/* ════════════════════════════════════════════════════════════════════════════
   ORDEN GLOBAL · /sitio/ (noviembre de 2026)

   El mismo idioma visual del demo de AURA, que es la puerta: oro sobre negro,
   Cormorant Garamond para los títulos (cursiva dorada para la palabra que
   importa) y Manrope para todo lo demás. Se entra de la llamada al sitio sin
   cambiar de mundo.

   Una sola pieza memorable: el film del oro, a pantalla completa, que maneja
   el scroll. Todo lo demás, quieto y ordenado: aire entre secciones, un solo
   dorado de relleno por pantalla, papel marfil para lo que se comprueba.

   Sin html.vivo (sin JS o con movimiento reducido) nada se esconde ni se
   mueve: el film se lee como cinco imágenes quietas con su texto.
   ════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fuentes/cormorant-garamond-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("/assets/fuentes/cormorant-garamond-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fuentes/manrope-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fuentes/manrope-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --negro: #07060a;
  --noche: #0e0c11;
  --noche-2: #15121a;
  --tinta: #f2ece0;
  --suave: rgba(242, 236, 224, 0.76);
  --tenue: rgba(242, 236, 224, 0.6);
  --linea: rgba(242, 236, 224, 0.1);
  --linea-fuerte: rgba(242, 236, 224, 0.22);
  --oro: #d4a656;
  --oro-claro: #f3d18e;
  --oro-hondo: #8a6326;
  --jade: #3ed69c;
  --papel: #f2ebdd;
  --papel-tinta: #1b1712;
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --margen: clamp(20px, 6vw, 96px);
  --ancho: 1240px;
  --cab-h: 68px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--negro); scroll-padding-top: calc(var(--cab-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--negro); color: var(--tinta); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--tinta); color: var(--negro); border-radius: 8px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
em { font-style: italic; color: var(--oro-claro); }
s { text-decoration-thickness: 2px; text-decoration-color: var(--oro); }
.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 10px var(--jade); flex: none; animation: led 2.2s ease-in-out infinite; }
@keyframes led { 50% { opacity: 0.35; box-shadow: 0 0 2px var(--jade); } }
.senal { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 0 rgba(62, 214, 156, 0.6); flex: none; }
.senal.late { animation: late 1.4s var(--curva); }
@keyframes late { from { box-shadow: 0 0 0 0 rgba(62, 214, 156, 0.7); } to { box-shadow: 0 0 0 14px rgba(62, 214, 156, 0); } }

/* ── Botones y enlaces ─────────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--oro-claro), var(--oro) 70%); color: #1a1206; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; text-decoration: none; box-shadow: 0 10px 30px -12px rgba(212, 166, 86, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva); white-space: nowrap; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -12px rgba(212, 166, 86, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.boton.sec { background: rgba(242, 236, 224, 0.08); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-fuerte); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.boton.sec:hover { background: rgba(242, 236, 224, 0.14); box-shadow: inset 0 0 0 1px rgba(243, 209, 142, 0.5); }
.enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--suave); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--linea-fuerte); font-size: 15px; background: none; border: 0; padding: 0; }
.enlace:hover { color: var(--tinta); text-decoration-color: var(--oro); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.ojo { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--oro); font-size: 12.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.ojo img { width: 17px; height: auto; }
.rot-gen { margin: 18px 0 0; color: var(--tenue); font-size: 12px; letter-spacing: 0.02em; }

/* «Escuchar a AURA»: tres ondas que se mueven cuando habla */
.escuchar .ondas { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.escuchar .ondas i { display: block; width: 2px; height: 6px; border-radius: 2px; background: var(--oro-claro); }
.escuchar[aria-pressed="true"] .ondas i, .guia.habla .ondas i { animation: onda 0.9s ease-in-out infinite; }
.escuchar .ondas i:nth-child(2) { animation-delay: -0.3s; height: 12px; }
.escuchar .ondas i:nth-child(3) { animation-delay: -0.6s; height: 9px; }
@keyframes onda { 50% { transform: scaleY(0.35); } }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cab { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--cab-h); display: flex; align-items: center; gap: 20px; padding: 0 var(--margen); padding-top: env(safe-area-inset-top); transition: background 0.4s var(--curva), box-shadow 0.4s var(--curva); }
.cab.solida { background: rgba(7, 6, 10, 0.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--linea); }
.marca { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; margin-right: auto; }
.marca img { width: 44px; height: auto; }
.marca span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.32em; white-space: nowrap; }
.cab-nav { display: flex; align-items: center; gap: 4px; }
.cab-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--suave); font-size: 14.5px; text-decoration: none; border-radius: 999px; transition: color 0.2s; }
.cab-nav a:hover { color: var(--tinta); }
.cab-nav a.activa { color: var(--oro-claro); }
.cab-aura { gap: 9px; margin-left: 6px; background: rgba(242, 236, 224, 0.06); box-shadow: inset 0 0 0 1px var(--linea); padding: 0 14px 0 6px !important; }
.cab-aura img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.cab-aura .led { margin-left: -2px; }
.cab-nav .idioma { font-weight: 700; letter-spacing: 0.08em; font-size: 13px; }
.cab-cuenta { min-height: 42px; padding: 0 18px; font-size: 14px; }
.cab-menu { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(242, 236, 224, 0.08); position: relative; }
.cab-menu i, .cab-menu i::before, .cab-menu i::after { position: absolute; left: 14px; width: 18px; height: 1.6px; background: var(--tinta); transition: transform 0.3s var(--curva), opacity 0.2s; }
.cab-menu i { top: 22px; } .cab-menu i::before { content: ""; left: 0; top: -6px; } .cab-menu i::after { content: ""; left: 0; top: 6px; }
.cab-menu[aria-expanded="true"] i { background: transparent; }
.cab-menu[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.cab-menu[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); }

/* ── 1 · El film ──────────────────────────────────────────────────────── */
.film { position: relative; }
.film-fijo { position: relative; }
.film-fondo { position: absolute; inset: 0; overflow: hidden; background: var(--negro); }
.film-poster, .film-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-lienzo { opacity: 0; transition: opacity 0.6s; }
.film.lienzo-listo .film-lienzo { opacity: 1; }
.film-velo { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7, 6, 10, 0.86) 0%, rgba(7, 6, 10, 0.55) 34%, rgba(7, 6, 10, 0) 62%),
  linear-gradient(0deg, rgba(7, 6, 10, 0.9) 0%, rgba(7, 6, 10, 0) 32%),
  linear-gradient(180deg, rgba(7, 6, 10, 0.55) 0%, rgba(7, 6, 10, 0) 18%); pointer-events: none; }

/* Sin escena (sin JS o movimiento reducido): cada parada es una pantalla con su imagen quieta. */
html:not(.vivo) .film-fijo { display: grid; }
html:not(.vivo) .film-fondo { position: relative; height: 100svh; grid-area: 1 / 1; }
html:not(.vivo) .film-portada { grid-area: 1 / 1; align-self: end; position: relative; }
html:not(.vivo) .frase { position: relative; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; background: var(--negro) center / cover no-repeat; }
html:not(.vivo) .frase::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 6, 10, 0.88), rgba(7, 6, 10, 0.25)); }
html:not(.vivo) .frase > * { position: relative; }
html:not(.vivo) .frase[data-quieta="pepita"] { background-image: url("/assets/sitio/film/pepita-1600.webp"); }
html:not(.vivo) .frase[data-quieta="gramo"] { background-image: url("/assets/sitio/film/gramo-1600.webp"); }
html:not(.vivo) .frase[data-quieta="red"] { background-image: url("/assets/sitio/film/red-1600.webp"); }
html:not(.vivo) .frase[data-quieta="mundo"] { background-image: url("/assets/sitio/film/mundo-1600.webp"); }
html:not(.vivo) .film-pie, html:not(.vivo) .baja { display: none; }
/* quieta, cada parada ocupa el ancho de la página con sus márgenes (sin el desplazamiento del modo animado) */
html:not(.vivo) .parada { left: auto; right: auto; bottom: auto; max-width: none; padding: 48px var(--margen); }
html:not(.vivo) .film-portada { padding-bottom: clamp(56px, 9vh, 104px); }

/* Con escena: la sección mide varias pantallas y el escenario queda fijo mientras el scroll recorre el film. */
html.vivo .film { height: 640svh; }
html.vivo .film-fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
html.vivo .parada { position: absolute; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.7s var(--curva), transform 0.9s var(--curva), visibility 0s 0.7s; }
html.vivo .parada.ve { opacity: 1; visibility: visible; transform: none; transition: opacity 0.7s var(--curva), transform 0.9s var(--curva), visibility 0s; }

.film-portada { left: var(--margen); right: var(--margen); bottom: clamp(56px, 9vh, 104px); max-width: 760px; padding: 0; z-index: 2; }
.film-portada .ojo { margin-bottom: 22px; }
.film h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(3.1rem, 7.6vw, 7.4rem); line-height: 0.94; letter-spacing: -0.012em; text-wrap: balance; }
.film h1 em { font-weight: 500; }
.bajada { margin: 26px 0 30px; max-width: 34em; color: var(--suave); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
.dato-vivo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 28px 0 0; color: var(--suave); font-size: 13.5px; }
.dato-vivo b { color: var(--tinta); font-weight: 600; }
.vivo-sep { color: var(--tenue); }
.aviso { margin: 10px 0 0; max-width: 46em; color: var(--tenue); font-size: 12.5px; }
.baja { display: flex; align-items: center; gap: 12px; margin: 36px 0 0; color: var(--tenue); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.baja i { position: relative; width: 1px; height: 38px; background: var(--linea-fuerte); overflow: hidden; }
.baja i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--oro-claro); animation: cae 2.2s var(--curva) infinite; }
@keyframes cae { to { top: 100%; } }

.frase { left: var(--margen); bottom: clamp(110px, 18vh, 200px); max-width: min(760px, 86vw); z-index: 2; padding: 0; }
.frase-ojo { margin: 0 0 14px; color: var(--oro); font-size: 12.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.frase-t { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 6.2vw, 6.2rem); line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55); }
.frase-dato { display: inline-flex; gap: 8px; margin: 22px 0 0; padding: 9px 16px; border-radius: 999px; background: rgba(7, 6, 10, 0.55); box-shadow: inset 0 0 0 1px var(--linea-fuerte); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 15px; color: var(--suave); }
.frase-dato b { color: var(--oro-claro); font-weight: 600; }
.frase-pie { margin: 22px 0 26px; color: var(--suave); font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.frase.final .frase-t { font-size: clamp(2.3rem, 5.2vw, 5.2rem); }

.film-pie { position: absolute; left: var(--margen); right: var(--margen); bottom: 26px; z-index: 3; }
.film-riel { display: flex; gap: 0; margin: 0 0 10px; padding: 0; list-style: none; }
.film-riel li { flex: 1; color: var(--tenue); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.film-riel li.ve { color: var(--oro-claro); }
.film-barra { display: block; height: 1px; background: var(--linea-fuerte); }
.film-barra b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--oro-hondo), var(--oro-claro)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
html.vivo .film-pie { opacity: 0; transition: opacity 0.5s, right 0.5s var(--curva); }
html.con-guia .film-pie { right: calc(var(--margen) + min(440px, 34vw)); }
html.vivo .film.en-viaje .film-pie { opacity: 1; }
.film-nota, .film-rot { position: absolute; z-index: 3; margin: 0; color: var(--tenue); font-size: 11.5px; }
.film-nota { right: var(--margen); top: calc(var(--cab-h) + 14px); max-width: 30em; text-align: right; }
.film-rot { right: var(--margen); bottom: 54px; }
html:not(.vivo) .film-nota, html:not(.vivo) .film-rot { position: static; padding: 12px var(--margen) 0; text-align: left; }
html.vivo .film-nota { opacity: 0; transition: opacity 0.5s; }
html.vivo .film.en-viaje .film-nota { opacity: 1; }

/* ── Secciones ────────────────────────────────────────────────────────── */
.cap { position: relative; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: clamp(96px, 14vw, 180px) var(--margen) 0; }
.cap h2, .porque .respuesta, .cierre h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.cap h2 { margin: 0; font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: 1; }
.cap-cabeza { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.cap-bajada { margin: 22px 0 0; max-width: 40em; color: var(--suave); font-size: clamp(16px, 1.2vw, 18.5px); }
.cap-nota { margin: 26px 0 0; color: var(--tenue); font-size: 13.5px; }
h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.005em; }
.estado { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--linea-fuerte); color: var(--suave); }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.d { color: var(--jade); box-shadow: inset 0 0 0 1px rgba(62, 214, 156, 0.35); }
.estado.b { color: var(--oro-claro); box-shadow: inset 0 0 0 1px rgba(243, 209, 142, 0.35); }
.estado.p { color: var(--tenue); }
html.vivo .aparece { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--curva), transform 1.1s var(--curva); }
html.vivo .aparece.ve { opacity: 1; transform: none; }

/* 2 · por qué */
.porque { padding: clamp(96px, 12vw, 160px) var(--margen) 0; max-width: calc(1440px + 2 * var(--margen)); margin: 0 auto; }
.triptico { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.foto { margin: 0; }
.foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; filter: saturate(0.92); }
.foto figcaption { margin: 20px 0 0; font-family: var(--display); font-size: clamp(1.35rem, 1.9vw, 1.85rem); line-height: 1.22; color: var(--tinta); text-wrap: pretty; }
.foto figcaption s { color: var(--tenue); }
html.vivo .triptico .foto:nth-child(2) { transition-delay: 0.12s; }
html.vivo .triptico .foto:nth-child(3) { transition-delay: 0.24s; }
.respuesta { margin: clamp(64px, 9vw, 120px) auto 0; max-width: 16em; text-align: center; font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.04; }
.porque .rot-gen { text-align: center; }

/* 3 · cómo funciona */
.como-escena { display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.como-equipo { position: sticky; top: calc(var(--cab-h) + 40px); margin: 0; }
.como-equipo img { width: min(100%, 360px); margin: 0 auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); }
.pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(36px, 5vw, 64px); }
.paso { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding-top: 26px; border-top: 1px solid var(--linea); }
.paso-n { font-family: var(--display); font-size: 2.6rem; line-height: 0.9; color: var(--oro); }
.paso h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 2.6vw, 2.4rem); letter-spacing: 0; }
.paso p { margin: 10px 0 0; color: var(--suave); max-width: 34em; }
.papel { margin: 22px 0 6px; max-width: 360px; padding: 20px 22px 16px; border-radius: 10px; background: var(--papel); color: var(--papel-tinta); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); font-size: 14px; }
.papel p { margin: 0; color: inherit; }
.papel-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6b5a3a; }
.papel-t { margin-top: 6px !important; font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.papel ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.papel li::before { content: "✓"; display: inline-block; width: 1.4em; color: #1f7a52; font-weight: 800; }
.papel-pie { margin-top: 14px !important; padding-top: 10px; border-top: 1px dashed rgba(27, 23, 18, 0.25); font-size: 12px; color: #6b5a3a; }
.recibo { -webkit-mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 16px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 16px 100% repeat-x; padding-top: 24px; }
.papel-cab { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b5a3a; }
.papel-monto { margin-top: 8px !important; font-family: var(--display); font-size: 2.4rem; font-weight: 600; }
.papel-monto small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.papel dl { margin: 10px 0 0; display: grid; gap: 4px; }
.papel dl div { display: flex; justify-content: space-between; gap: 12px; }
.papel dt { color: #6b5a3a; } .papel dd { margin: 0; font-weight: 600; }

/* 4 · hoy */
.verbos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--linea); border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); }
.verbo { display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 26px; background: var(--negro); }
.verbo h3 { font-family: var(--display); font-weight: 500; font-size: 2rem; letter-spacing: 0; line-height: 1; }
.verbo p { margin: 0; color: var(--suave); font-size: 15.5px; flex: 1; }
.verbo .estado { align-self: flex-start; }

/* 5 · productos */
.piezas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.pieza { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 6px 16px; padding: 22px; border-radius: 16px; background: linear-gradient(180deg, rgba(242, 236, 224, 0.045), rgba(242, 236, 224, 0.015)); box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow 0.3s, transform 0.4s var(--curva); }
.pieza:hover { box-shadow: inset 0 0 0 1px rgba(243, 209, 142, 0.35); }
.pieza-logo { grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: rgba(7, 6, 10, 0.6); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
.pieza-logo img { width: 56px; height: 56px; object-fit: contain; }
.sin-logo { font-family: var(--display); font-size: 2rem; color: var(--oro-claro); }
.pieza h3 { font-size: 18px; }
.pieza p { margin: 4px 0 0; color: var(--suave); font-size: 15px; line-height: 1.5; }
.pieza .estado { grid-column: 2; justify-self: start; margin-top: 8px; }
.pieza .enlace { grid-column: 2; min-height: 36px; font-size: 14.5px; }
.pieza[data-estado="p"] { opacity: 0.82; }

/* 6 · origen */
.origen-par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.cuenta { padding: 26px 28px; border-radius: 18px; background: rgba(242, 236, 224, 0.035); box-shadow: inset 0 0 0 1px var(--linea); }
.cuenta > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 16px; }
.cuenta > div span:last-child { color: var(--tinta); font-weight: 600; }
.cuenta .op { color: var(--tenue); font-size: 14px; padding: 8px 0; }
.cuenta .op span:last-child { color: var(--tenue); font-weight: 400; }
.cuenta .res { border-bottom: 0; padding-top: 18px; font-family: var(--display); font-size: 2rem; }
.cuenta .res span:last-child { color: var(--oro-claro); font-weight: 600; }
.fuente { margin: 12px 0 0; color: var(--tenue); font-size: 12.5px; }
.oficial .ojo { margin-bottom: 12px; }
.oficial-t { margin: 0; font-family: var(--display); font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.32; }
.limites { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--suave); font-size: 15px; }
.limites li { padding-left: 20px; position: relative; }
.limites li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--oro); }
.trailer { margin: clamp(48px, 7vw, 88px) 0 0; }
.trailer video { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px var(--linea); }
.trailer figcaption { margin-top: 12px; color: var(--tenue); font-size: 13px; }
.monedas { margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border-radius: 14px; overflow: hidden; }
.monedas > div { padding: 24px 22px; background: var(--negro); }
.monedas dt { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.1em; font-size: 15px; }
.monedas dt img { width: 40px; height: 40px; object-fit: contain; }
.monedas dd { margin: 12px 0 0; color: var(--suave); font-size: 14.5px; }

/* 7 · la red */
.red-tablero { display: grid; gap: 6px; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, rgba(212, 166, 86, 0.12), rgba(7, 6, 10, 0) 60%), rgba(242, 236, 224, 0.03); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
.red-n { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(3.6rem, 11vw, 10rem); line-height: 0.9; letter-spacing: -0.01em; }
.red-n b { font-weight: 500; }
.red-k { margin: 10px 0 0; color: var(--suave); font-size: 15px; }
.red-k b { color: var(--oro-claro); }
.red-latidos { display: flex; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.red-latidos li { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: background 0.6s, box-shadow 0.6s; }
.red-latidos li.sella { background: radial-gradient(circle, var(--oro-claro), var(--oro) 60%, rgba(212, 166, 86, 0) 72%); box-shadow: 0 0 24px rgba(243, 209, 142, 0.55); }
.reglas { margin-top: clamp(40px, 5vw, 64px); max-width: 760px; }
.reglas h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 2.8vw, 2.6rem); letter-spacing: 0; }
.reglas p { color: var(--suave); }

/* 8 · compruébalo */
.pruebas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.prueba-grupo { padding: 28px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linea); }
.prueba-grupo h3 { color: var(--oro); font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 8px; }
.prueba-grupo ul { margin: 0; padding: 0; list-style: none; }
.prueba-grupo li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.prueba-grupo li:last-child { border-bottom: 0; }
.prueba-grupo b { font-size: 18px; }
.prueba-grupo li span { color: var(--suave); font-size: 15px; }

/* 9 · AURA */
.aura { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.aura-foto { margin: 0; position: relative; }
.aura-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.9); }
.aura-foto::after { content: ""; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linea); }
.aura .acciones { margin-top: 30px; }
.aura-nota { margin: 18px 0 0; color: var(--tenue); font-size: 13px; }

/* 10 · cierre */
.cierre { position: relative; margin-top: clamp(96px, 14vw, 180px); padding: clamp(96px, 12vw, 160px) var(--margen); text-align: center; background: radial-gradient(60% 70% at 50% 100%, rgba(212, 166, 86, 0.16), rgba(7, 6, 10, 0) 70%); border-top: 1px solid var(--linea); }
.cierre-in { max-width: 860px; margin: 0 auto; }
.cierre-og { width: 94px; height: auto; margin: 0 auto 28px; }
.cierre h2 { margin: 0 0 34px; font-size: clamp(3rem, 7vw, 6.6rem); line-height: 0.96; }
.cierre .acciones { justify-content: center; }
.legal { margin: 40px auto 0; max-width: 52em; color: var(--tenue); font-size: 13.5px; text-align: left; }
.legal a { color: var(--suave); }

/* pie */
.pie { padding: 56px var(--margen) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); color: var(--suave); font-size: 14.5px; }
.pie-a { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; max-width: var(--ancho); margin: 0 auto; }
.pie h2 { margin: 0 0 12px; color: var(--oro); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pie a { display: inline-flex; min-height: 34px; align-items: center; color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--tinta); }
.pie-a img { width: 49px; height: auto; margin-bottom: 8px; }
.pie-b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; max-width: var(--ancho); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 13px; }

/* ── AURA te acompaña ─────────────────────────────────────────────────── */
.guia { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 32px)); padding: 10px 10px 10px 10px; border-radius: 22px; background: rgba(14, 12, 17, 0.86); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--linea-fuerte); animation: guia-entra 0.6s var(--curva); }
@keyframes guia-entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.guia-cara { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(243, 209, 142, 0.25); transition: box-shadow 0.4s; }
.guia.habla .guia-cara { box-shadow: 0 0 0 2px var(--oro-claro), 0 0 22px rgba(243, 209, 142, 0.45); animation: habla 1.6s ease-in-out infinite; }
@keyframes habla { 50% { box-shadow: 0 0 0 3px var(--oro-claro), 0 0 30px rgba(243, 209, 142, 0.6); } }
.guia-t { flex: 1; min-width: 0; }
.guia-k { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); }
.guia-k b { color: var(--oro-claro); letter-spacing: 0.2em; }
.guia-sub { margin: 3px 0 0; min-height: 1.4em; font-size: 15px; line-height: 1.4; color: var(--tenue); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guia-sub .dicha { color: var(--tinta); transition: color 0.15s; }
.guia-b { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(242, 236, 224, 0.08); }
.guia-b:hover { background: rgba(242, 236, 224, 0.16); }
.guia-b svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guia-b .i-play { fill: var(--tinta); stroke: none; display: none; }
.guia.pausada .guia-b .i-pausa { display: none; }
.guia.pausada .guia-b .i-play { display: block; }

/* muelle del teléfono: la acción principal siempre a un toque */
.muelle { display: none; }

/* ── Teléfono ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cab-nav a:not(.cab-aura):not(.idioma) { padding: 0 9px; }
}
@media (max-width: 960px) {
  :root { --cab-h: 60px; }
  .cab { gap: 10px; }
  .cab-menu { display: block; }
  .cab-cuenta { display: none; }
  .cab-nav { position: fixed; inset: var(--cab-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--margen) 22px; background: rgba(7, 6, 10, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--linea); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--curva), transform 0.3s var(--curva), visibility 0s 0.3s; }
  .cab.abierta .cab-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--curva), transform 0.3s var(--curva); }
  .cab.abierta { background: rgba(7, 6, 10, 0.96); }
  .cab-nav a { min-height: 52px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--linea); padding: 0 4px !important; }
  .cab-aura { margin: 10px 0 0; border-radius: 999px !important; border-bottom: 0 !important; padding: 0 16px 0 8px !important; align-self: flex-start; }
  .como-escena { grid-template-columns: 1fr; }
  .como-equipo { position: relative; top: 0; }
  .como-equipo img { width: min(62%, 260px); }
  .origen-par, .pruebas, .aura { grid-template-columns: 1fr; }
  .monedas { grid-template-columns: 1fr 1fr; }
  .pie-a { grid-template-columns: 1fr 1fr; }
  .pie-a > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  body { font-size: 16px; }
  .marca span { font-size: 11.5px; letter-spacing: 0.26em; }
  .marca img { width: 38px; }
  html.vivo .film { height: 560svh; }
  .film-velo { background: linear-gradient(0deg, rgba(7, 6, 10, 0.96) 0%, rgba(7, 6, 10, 0.7) 40%, rgba(7, 6, 10, 0.1) 70%, rgba(7, 6, 10, 0.5) 100%); }
  .film-portada { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .film h1 { font-size: clamp(2.9rem, 13.4vw, 4rem); }
  .bajada { margin: 18px 0 22px; font-size: 15.5px; }
  .film-portada .acciones .escuchar { display: none; }
  .dato-vivo { font-size: 12.5px; margin-top: 18px; }
  .vivo-sep { display: none; }
  .dato-vivo > span:last-child { flex-basis: 100%; }
  .baja { display: none; }
  .frase { bottom: calc(150px + env(safe-area-inset-bottom)); left: 20px; right: 20px; max-width: none; }
  .frase-t { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .frase.final .frase-t { font-size: clamp(2.1rem, 9.6vw, 3rem); }
  .film-pie, html.con-guia .film-pie { bottom: calc(86px + env(safe-area-inset-bottom)); left: 20px; right: 20px; }
  .film-riel li { font-size: 0; padding: 0; }
  .film-riel li.ve { font-size: 11px; flex: 3; }
  /* el límite de ORIGEN se ve también en el teléfono, arriba, durante todo el film */
  .film-nota { left: 20px; right: 20px; top: calc(var(--cab-h) + 8px); max-width: none; text-align: left; font-size: 12px; }
  .film-rot { left: 20px; right: auto; top: calc(var(--cab-h) + 64px); bottom: auto; }
  html.vivo .film-rot { opacity: 0; transition: opacity 0.5s; }
  html.vivo .film.en-viaje .film-rot { opacity: 1; }
  .film-portada .rot-gen { display: none; }
  .triptico { grid-template-columns: 1fr; gap: 44px; }
  .foto img { aspect-ratio: 4 / 5; }
  .respuesta { font-size: clamp(2rem, 9vw, 2.8rem); }
  .paso { grid-template-columns: 1fr; gap: 6px; }
  .paso-n { font-size: 2rem; }
  .verbos { grid-template-columns: 1fr; }
  .monedas { grid-template-columns: 1fr; }
  .cuenta { padding: 18px 18px; }
  .cuenta .res { font-size: 1.6rem; }
  .red-latidos li { width: 26px; height: 26px; }
  .pie-a { grid-template-columns: 1fr; }
  .muelle { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(14, 12, 17, 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), inset 0 0 0 1px var(--linea-fuerte); transform: translateY(140%); transition: transform 0.5s var(--curva); }
  .muelle.ve { transform: none; }
  .muelle .boton { flex: 1; min-height: 46px; }
  .muelle .boton.sec { flex: none; padding: 0 16px; }
  .guia { left: 12px; right: 12px; width: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px); }
  .guia-cara { width: 40px; height: 40px; }
  .guia-sub { font-size: 14px; }
  .cierre { padding-bottom: 120px; }
  .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Revisión de diseño y accesibilidad (medido a 1440×900, 390×844 y 844×390) ── */
/* La guía nunca tapa texto: en la portada del teléfono la invitación espera a que entres al film,
   y con la guía abajo las frases, el riel y la portada suben. */
.film-nota { color: var(--suave); padding: 6px 10px; border-radius: 8px; background: rgba(7, 6, 10, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html.con-guia .film-rot { bottom: 100px; }
.pieza .enlace { min-height: 44px; }
.pie a { min-height: 44px; }
.guia-b { width: 44px; height: 44px; }
@media (max-width: 699px) {
  html { scroll-padding-bottom: 96px; }
  html.con-guia { scroll-padding-bottom: 190px; }
  html:has(.film-portada.ve) .guia.invita { display: none; }
  html.guia-activa .film-portada { bottom: calc(176px + env(safe-area-inset-bottom)); }
  html.con-guia .frase { bottom: calc(232px + env(safe-area-inset-bottom)); }
  html.con-guia .film-pie { bottom: calc(184px + env(safe-area-inset-bottom)); }
  html.con-guia .film-rot { bottom: auto; }
  .film-velo { background: linear-gradient(0deg, rgba(7, 6, 10, 0.96) 0%, rgba(7, 6, 10, 0.82) 50%, rgba(7, 6, 10, 0.25) 78%, rgba(7, 6, 10, 0.5) 100%); }
}
@media (max-width: 699px) and (max-height: 700px) {
  .film h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .bajada { font-size: 14.5px; }
}
/* el teléfono acostado: todo el texto del film cabe en 390 px de alto */
@media (max-height: 500px) and (orientation: landscape) {
  .film-portada { bottom: 16px; max-width: none; }
  html:has(.film-portada.ve) .guia.invita { display: none; }
  .film-portada .ojo { margin-bottom: 8px; }
  .film h1 { font-size: clamp(2rem, 10.5vh, 2.8rem); }
  .bajada { margin: 8px 0 12px; font-size: 14px; line-height: 1.45; }
  .film-portada .acciones .boton { min-height: 44px; }
  .film-portada .dato-vivo { margin-top: 10px; font-size: 12px; }
  .film-portada .aviso { max-width: none; margin-top: 6px; font-size: 12px; line-height: 1.35; }
  .film-portada .acciones .escuchar { display: none; }
  .baja { display: none; }
  .frase { bottom: 84px; max-width: min(560px, 58vw); }
  .frase-t { font-size: clamp(1.9rem, 10vh, 2.6rem); }
  .frase.final .frase-t { font-size: clamp(1.7rem, 9vh, 2.3rem); }
  .frase-pie { margin: 10px 0 12px; }
  .film-nota { max-width: 36vw; font-size: 11.5px; }
  .film-rot { top: auto; bottom: 8px; }
  html.con-guia .film-pie { right: calc(var(--margen) + min(440px, 52vw)); }
  .film-velo { background: linear-gradient(90deg, rgba(7, 6, 10, 0.85) 0%, rgba(7, 6, 10, 0.55) 45%, rgba(7, 6, 10, 0.1) 75%), linear-gradient(0deg, rgba(7, 6, 10, 0.7), transparent 40%); }
}