/* Menú (como el "Navigate" de Forge: desarme/menu/DESARME-MENU.md). Medidas en px porque cada página tiene su tamaño base.
   La página (#pagina) se achica hacia el centro y deja ver el menú, que está ATRÁS (z-index 0). */
:root { --bezzy2: cubic-bezier(0.43, 0.195, 0.02, 1); --bezzy3: cubic-bezier(0.5, 0, 0, 1); --menu-bordo: #410306; --menu-texto: #F2F1ED; }

/* Solo mientras el menú se usa: dejarlo fijo traba la portada (medido 2026-11-10: 26 cuadros largos vs 1) */
html.menu-activo #pagina { position: relative; z-index: 1; background: var(--fondo-pagina, #000); }   /* el mismo fondo que la página: sin cambio al terminar */
#pagina.menu-preparado { will-change: clip-path, scale; }
#pagina.menu-anima { transition: clip-path 1s var(--bezzy2), scale 1s var(--bezzy2); }
html.menu-abierto #pagina { pointer-events: none; }
/* En la portada el botón de sonido se corre a la izquierda del de Menú */
html.con-menu .sonido { right: 132px; top: 31px; }
html.menu-abierto .barra-scroll, html.menu-abierto .hint { opacity: 0 !important; transition: opacity 0.3s ease-in-out; }

/* Botón Menú / Cerrar */
.menu-boton { position: fixed; top: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: flex-end; gap: 16px; overflow: clip; padding: 24px; color: #fff; background: none; border: 0; cursor: pointer; font: inherit; }
@media (min-width: 420px) { .menu-boton { padding: 32px; } }
@media (min-width: 1024px) { .menu-boton { padding: 40px; } }
.menu-boton em { display: none; }
@media (min-width: 1024px) {
  .menu-boton em { position: relative; display: grid; justify-items: end; overflow: clip; font-style: normal; font-family: 'Bricolage Grotesque', Arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.6; letter-spacing: 0; transition: opacity 0.3s ease-in-out; }
}
.menu-boton em span { display: block; text-align: right; transition: transform 1s var(--bezzy3); }
.menu-boton em span { grid-area: 1 / 1; }
.menu-boton em span[data-menu="cerrado"] { transform: translateY(0) skewY(0); }
.menu-boton em span[data-menu="abierto"] { transform: translateY(-100%) skewY(3deg); }
html.menu-abierto .menu-boton em span[data-menu="cerrado"] { transform: translateY(100%) skewY(3deg); }
html.menu-abierto .menu-boton em span[data-menu="abierto"] { transform: translateY(0) skewY(0); }
.menu-icono { --gap: 6px; position: relative; display: flex; width: 24px; height: 23px; rotate: 0deg; transition: rotate 1s var(--bezzy2); }
@media (min-width: 1024px) { .menu-icono { width: 16px; height: 15px; margin-bottom: 1px; --gap: 4px; } }
.menu-icono i { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; transition: translate 0.3s ease-in-out, rotate 0.3s ease-in-out, scale 0.3s ease-in-out; }
.menu-icono i:nth-child(1) { translate: 0 calc(-50% - var(--gap)); }
.menu-icono i:nth-child(2) { translate: 0 -50%; }
.menu-icono i:nth-child(3) { translate: 0 calc(-50% + var(--gap)); }
html.menu-abierto .menu-icono { rotate: 270deg; }
html.menu-abierto .menu-icono i:nth-child(1) { rotate: -45deg; translate: 0 -50%; }
html.menu-abierto .menu-icono i:nth-child(2) { scale: 0 1; translate: 10px -50%; }
html.menu-abierto .menu-icono i:nth-child(3) { rotate: 45deg; translate: 0 -50%; }
@media (hover: hover) and (pointer: fine) {
  .menu-boton:hover em { opacity: 0.4; }
  .menu-boton:hover .menu-icono i:nth-child(2) { scale: 0.5 1; }
  html.menu-abierto .menu-boton:hover .menu-icono i:nth-child(2) { scale: 0 1; }
}
.menu-boton:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: -12px; }

/* El menú */
.menu { position: fixed; inset: 0; z-index: 0; background: var(--menu-bordo); overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out 0.9s, visibility 0s linear 1.2s; }
.menu.abierto { pointer-events: all; opacity: 1; visibility: visible; transition: opacity 0.3s ease-in-out 0s, visibility 0s linear 0s; }
.menu::after { content: ''; position: absolute; inset: 0; z-index: 0; background: #000; opacity: 0.2; pointer-events: none; }
.menu.sin-anim, .menu.sin-anim *, #pagina.sin-anim { transition: none !important; }

/* Fondo: el logo de AiCars gigante en negro al 20%, se corre al revés del mouse */
.menu__fondo { position: absolute; inset: -120px; z-index: 1; margin: 0; pointer-events: none; }
.menu__fondo i { position: absolute; left: 50%; top: 50%; width: 175vmax; aspect-ratio: 660 / 171; translate: -50% -50%; rotate: -24deg; background: rgba(0, 0, 0, 0.2);
  -webkit-mask: url('../assets/logo.png') center / contain no-repeat; mask: url('../assets/logo.png') center / contain no-repeat; }

.menu__contenido { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%; height: 100%;
  opacity: 0; scale: 2; filter: blur(8px); transition: opacity 0.25s var(--bezzy2), scale 0.75s var(--bezzy2), filter 0.25s var(--bezzy2); }
.menu.abierto .menu__contenido { opacity: 1; scale: 1; filter: blur(0px); transition: opacity 1.2s var(--bezzy2), scale 0.75s var(--bezzy2), filter 1.2s var(--bezzy2); transition-delay: 0.15s; }

.menu__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.menu__lista :is(a, button) { --mov: 1.5em; display: inline-block; overflow: clip; color: var(--menu-texto); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity 0.3s ease-in-out; }
.menu__lista :is(a, button) span { display: inline-block; white-space: pre; text-shadow: var(--menu-texto) 0 calc(var(--mov) * -1) 0; transition: transform 0.5s var(--bezzy2); transition-delay: calc(var(--i) * 0.02s); }
@media (hover: hover) and (pointer: fine) {
  .menu__lista:hover :is(a, button) { opacity: 0.2; }
  .menu__lista :is(a, button):hover { opacity: 1; }
  .menu__lista :is(a, button):hover span { transform: translateY(var(--mov)); }
}
.menu__lista :is(a, button):focus-visible { outline: 1px solid rgba(242, 241, 237, 0.4); outline-offset: 4px; }

.menu__paginas { flex-direction: column; gap: 8px; }
.menu__paginas a { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(56px, min(13vh, 10.5vw), 140px); line-height: 1.1; letter-spacing: -2px; text-transform: uppercase; }
.menu__chicos { flex-wrap: wrap; gap: 8px 32px; }
.menu__chicos :is(a, button) { font-family: 'Instrument Serif', Georgia, serif; font-size: 20px; line-height: 1.2; letter-spacing: 0; }
@media (min-width: 1200px) { .menu__chicos :is(a, button) { font-size: 22px; } }

.menu__pie { position: absolute; left: 40px; right: 40px; bottom: 40px; display: flex; justify-content: space-between; margin: 0; }
.menu__pie p { margin: 0; font-family: 'Bricolage Grotesque', Arial, sans-serif; font-weight: 400; font-size: 13px; line-height: 1.3; color: rgba(242, 241, 237, 0.55); }
@media (max-width: 699px) { .menu__pie { left: 24px; right: 24px; bottom: 24px; } .menu__pie p { font-size: 12px; } }

@media (max-height: 500px) and (orientation: landscape) {
  .menu__contenido { padding: 72px 8px 64px; gap: 4px; }
  .menu__paginas { flex-direction: row; gap: 24px; }
  .menu__paginas a { font-size: clamp(32px, 6vw, 60px); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  #pagina.menu-anima { transition: none; }
  .menu, .menu__contenido, .menu.abierto .menu__contenido { transition: none; }
}
html[data-menu-cargando], html[data-menu-cargando] * { cursor: progress !important; }
html.menu-abierto .cabeza::before { opacity: 0; }
.cabeza::before { transition: opacity 0.3s ease-in-out; }

/* Línea de avance de las páginas internas (js/progreso.js), igual a la de la portada */
.progreso { position: fixed; left: 2.4rem; right: 2.4rem; bottom: calc(env(safe-area-inset-bottom) + 1.4rem); z-index: 900; height: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.1); pointer-events: none; }
.progreso i { display: block; width: 100%; height: 100%; background: #EDE6D6; transform: scaleX(0.0005); transform-origin: left center; will-change: transform; }
@media (min-width: 1024px) { .progreso { left: 4rem; right: 4rem; bottom: 3rem; } }
html.menu-abierto .progreso { opacity: 0; }

/* Celular: Inicio · Legales · Configurar cookies, cada uno con su lugar (tres columnas parejas, centrados) */
@media (max-width: 699px) {
  .menu__chicos { display: grid; grid-template-columns: 1fr 1fr 1.5fr; width: 100%; max-width: 400px; padding: 0 20px; gap: 0; }
  .menu__chicos li { display: flex; justify-content: center; }
  .menu__chicos :is(a, button) { font-size: 19px; white-space: nowrap; }
}

/* "Meta Tech Providers" al lado del copyright; en celular va en su propia línea (Octa 11-10) */
@media (max-width: 699px) { .menu__tp { display: block; margin-top: 2px; } .menu__sep { display: none; } }