/* ═══ 00 · NAVBAR ══════════════════════════════════════════════════════════
   La barra flotante de raycast: no pega en el borde, va en una píldora con
   cristal esmerilado por encima del hero. */
.navbar{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:16px 24px 4px;   /* 72 de caja + 20 de aire = los 92px medidos */
  animation:navEntra .5s var(--curva-entrada) both;
}
.navbar__caja{
  position:relative;
  max-width:var(--container-width);margin-inline:auto;
  height:72px;padding:0 32px 0 24px;
  display:flex;align-items:center;gap:24px;
  border-radius:var(--radius-xl);
  background:rgba(16,16,16,.92);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
}
.navbar__marca{
  display:flex;align-items:center;gap:10px;font-size:var(--texto-lg);letter-spacing:-.02em;
  transition:opacity var(--t-rapida) var(--curva);
}
.navbar__marca:hover{opacity:.72}
.navbar__marca img{border-radius:6px}
.navbar__enlaces{
  position:absolute;left:calc(50% - 36px);transform:translateX(-50%);
  display:flex;gap:33px;font-size:var(--texto-sm);
}
.navbar__enlaces a{color:var(--color-fg-200);transition:color var(--t-rapida) var(--curva)}
.navbar__enlaces a:hover{color:var(--color-fg)}
.navbar__acciones{display:flex;align-items:center;gap:30px;margin-left:auto}
.navbar__sesion{font-size:var(--texto-sm);color:var(--color-fg-200);transition:color var(--t-rapida) var(--curva)}
.navbar__sesion:hover{color:var(--color-fg)}

@keyframes navEntra{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

@media (max-width:1000px){
  .navbar__enlaces{display:none}
  .navbar__caja{height:64px;padding-inline:16px}
}
@media (max-width:560px){ .navbar__sesion{display:none} }

/* ═══ 01 · HERO ════════════════════════════════════════════════════════════
   La pintada: seis brochazos diagonales muy difuminados con grano por encima.
   En raycast son rojos; aquí flúor, que es el acento de Claudia. El grano es
   lo que evita que parezca un degradado de plantilla — sin él, esto es
   exactamente el hero genérico de cualquier landing. */
.hero{
  position:relative;isolation:isolate;
  /* NADA de justify-content:center aquí. Con el contenido más alto que la caja,
     centrar reparte el desbordamiento arriba Y abajo, y el navegador recorta el
     de arriba: el titular se quedaba decapitado por encima del borde de la
     sección. Se apila desde arriba y el aire se pone con padding, que no puede
     dar negativo. */
  /* La portada de raycast se mide por dos silencios: el que hay entre la barra
     y el titular (~280px) y el que hay entre el copy y su CTA. Sin ellos el
     hero cabe igual pero pierde el respiro que lo define. */
  min-height:min(1010px,100vh);
  padding-top:236px;padding-bottom:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:hidden;
  border-bottom:1px solid var(--color-border-soft);
}
.hero__pintada{
  position:absolute;inset:-28% -2%;z-index:-2;opacity:0.52;
  /* la pintada MUERE antes de los bordes: en raycast no sangra a la sección
     siguiente ni invade la columna del texto */
  /* el hueco central es MAYOR: el pico de verde no puede caer justo detrás
     del titular, que es lo que abarata la primera pantalla */
  /* CUERPO, no velo. El hueco central que había antes repartía el mismo brillo
     de un borde al otro (relación centro/bordes 1,1 contra 9,1 en la
     referencia) y eso no sostiene un titular: lo empapela. */
  mask-image:radial-gradient(37% 46% at 50% 44%, #000 0%, #000 34%, rgba(0,0,0,.4) 64%, transparent 90%);
  -webkit-mask-image:radial-gradient(37% 46% at 50% 44%, #000 0%, #000 34%, rgba(0,0,0,.4) 64%, transparent 90%);
}
.hero__pintada span{
  position:absolute;top:-24%;height:150%;
  width:calc(40px + var(--i) * 22px);
  left:calc(20% + var(--i) * 11.5%);
  transform:rotate(36deg);
  filter:blur(calc(8px + var(--i) * 3px));
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(168,255,0,.18) 14%,
    rgba(200,255,90,1) 40%,
    rgba(184,255,60,.94) 60%,
    rgba(168,255,0,.10) 86%,
    transparent 96%);
  animation:brochazo 1s var(--curva-entrada) both;
  animation-delay:calc(var(--i) * 70ms);
}
.hero__pintada span:nth-child(2n){opacity:.5;width:calc(12px + var(--i) * 6px);filter:blur(7px)}
.hero__pintada span:nth-child(3n){opacity:.18;width:calc(30px + var(--i) * 10px);filter:blur(26px)}

@keyframes brochazo{
  from{opacity:0;transform:rotate(36deg) translateY(70px) scaleY(.72)}
  to{opacity:1;transform:rotate(36deg)}
}

/* Grano: SVG de turbulencia como data-uri. Es lo que convierte un degradado de
   plantilla en algo pintado; sin él esto es el hero genérico de cualquier web. */
.hero__grano{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.3;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
/* La viñeta que devuelve el negro al cuadro. Va fuerte a propósito: en raycast
   la pintada es un acento que asoma por detrás del texto, no un fondo de color.
   Sin esto el flúor se come el titular y la página deja de ser negra. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34% 22% at 50% 39%, rgba(10,10,10,.34) 0%, rgba(10,10,10,.18) 58%, transparent 84%),
    radial-gradient(104% 74% at 50% 44%, transparent 26%, rgba(10,10,10,.86) 62%, var(--color-bg-100) 92%),
    linear-gradient(180deg, rgba(10,10,10,.9) 0%, transparent 22%, transparent 72%, var(--color-bg-100) 100%);
}

.hero__cuerpo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.hero__titular{
  font-family:var(--font-titular);
  font-weight:400;
  font-size:clamp(40px,5.4vw,64px);
  line-height:1.06;
  letter-spacing:-.01em;
  text-wrap:balance;
  animation:subeYAparece 1s var(--curva-entrada) both;
}
.hero__bajada{
  margin-top:28px;width:100%;max-width:60ch;
  font-size:var(--texto-lg);color:#EDEDED;line-height:1.5;
  animation:subeYAparece 1s var(--curva-entrada) .08s both;
}
.hero__letra-pequena{
  margin-top:18px;
  font-family:var(--font-mono);font-size:var(--texto-sm);
  color:#C8C8C8;letter-spacing:.03em;
  animation:subeYAparece 1s var(--curva-entrada) .24s both;
}
.hero__letra-pequena a{
  color:var(--color-acento);
  border-bottom:1px solid rgba(168,255,0,.3);
  transition:color var(--t-rapida) var(--curva), border-color var(--t-rapida) var(--curva);
}
.hero__letra-pequena a:hover{color:var(--color-acento-vivo);border-color:var(--color-acento-vivo)}
.hero .pastilla{margin-top:44px}

@keyframes subeYAparece{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* El silencio entre el bloque de copy y su llamada: en la referencia el CTA no
   cuelga del subtítulo, cae solo en la mitad baja de la primera pantalla. */
.hero .lista{margin-top:56px}

/* ── el formulario de la lista ── */
/* Tres datos y nada más: el correo, el teléfono con su país y el consentimiento.
   Van apilados a propósito — un selector de país metido en la misma cápsula que
   el correo deja el número en 90px y no se puede ni leer lo que escribes. */
.lista{
  margin-top:40px;width:100%;max-width:520px;
  display:flex;flex-direction:column;gap:11px;
  animation:subeYAparece .7s var(--curva-entrada) .2s both;
}
.lista__campo{
  display:flex;gap:8px;padding:8px;
  border-radius:var(--radius-lg);
  background:rgba(22,22,22,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  transition:box-shadow var(--t-rapida) var(--curva);
}
.lista__campo:focus-within{box-shadow:inset 0 0 0 1px var(--color-acento), var(--glow-acento)}
.lista__campo input{
  flex:1;min-width:0;height:40px;padding-inline:14px;
  background:rgba(0,0,0,.32);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  border:0;border-radius:var(--radius-sm);
  transition:background-color var(--t-rapida) var(--curva), box-shadow var(--t-rapida) var(--curva);
  font-size:var(--texto-sm);
}
.lista__campo input:hover{background:rgba(0,0,0,.42)}
.lista__campo input::placeholder{color:var(--color-fg-300)}
.lista__campo input:focus-visible{outline:2px solid var(--color-acento);outline-offset:-1px}

/* El selector de país: el <select> del sistema, que es el que la gente sabe
   usar y el único que funciona igual en un móvil de 2018 que en un iPhone. */
.lista__pais{
  flex:none;width:168px;height:40px;padding:0 30px 0 12px;
  border:0;border-radius:var(--radius-sm);
  color:var(--color-fg);font-family:inherit;font-size:var(--texto-sm);
  color-scheme:dark;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background:rgba(0,0,0,.32)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%239A9A9A' d='M6 8.5 1.8 4.3l1-1L6 6.5l3.2-3.2 1 1z'/%3E%3C/svg%3E")
    no-repeat right 11px center / 11px 11px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  text-overflow:ellipsis;
  transition:background-color var(--t-rapida) var(--curva);
}
.lista__pais:hover{background-color:rgba(0,0,0,.46)}
.lista__pais:focus-visible{outline:2px solid var(--color-acento);outline-offset:-1px}

.lista > .boton{width:100%;height:46px}

/* El consentimiento: sin esto no se puede guardar un teléfono, así que no es
   letra pequeña decorativa — es parte del formulario y se lee. */
.lista__ok{
  display:flex;align-items:flex-start;gap:10px;
  text-align:left;font-size:var(--texto-sm);line-height:1.45;
  color:var(--color-fg-200);cursor:pointer;
}
.lista__ok input{
  flex:none;width:17px;height:17px;margin-top:2px;
  accent-color:var(--color-acento);cursor:pointer;
}
.lista__ok input:focus-visible{outline:2px solid var(--color-acento);outline-offset:2px}
.lista__ok a{color:var(--color-fg);text-decoration:underline;text-underline-offset:2px}
.lista__ok a:hover{color:var(--color-acento)}

.lista__aviso{margin-top:0;min-height:20px;font-size:var(--texto-sm);color:var(--color-fg-200);text-align:center}
.lista__aviso:empty{min-height:0}
.lista__aviso[data-estado="mal"]{color:var(--color-no)}
.lista__aviso[data-estado="bien"]{color:var(--color-acento)}
.lista.temblar .lista__campo{animation:temblor .4s var(--curva)}
@keyframes temblor{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* ═══ 02 · EL PANTALLAZO DE PRODUCTO ═══════════════════════════════════════
   El equivalente del "Take shortcuts, not detours" de raycast: un marco de
   escritorio con la ventana de la app dentro, un resplandor de marca por
   detrás y un dock para cambiar de vista. Es la foto que más se mira de toda
   la página, así que la ventana va RECREADA en DOM y no como imagen: se ve
   nítida en cualquier pantalla y pesa cero. */
.producto{padding-top:var(--seccion-y)}
.producto__escena{position:relative;margin-top:64px}
.producto__resplandor{
  position:absolute;inset:-4% 4% 4%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 50% 88%, rgba(168,255,0,.6), transparent 70%),
    radial-gradient(44% 36% at 32% 56%, rgba(168,255,0,.34), transparent 70%),
    radial-gradient(40% 34% at 70% 38%, rgba(168,255,0,.28), transparent 70%),
    radial-gradient(70% 50% at 50% 50%, rgba(168,255,0,.14), transparent 76%);
  filter:blur(64px);
}

.escritorio{
  position:relative;z-index:1;isolation:isolate;
  max-width:1189px;margin-inline:auto;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(118deg, transparent 26%, rgba(168,255,0,.14) 36%, transparent 48%),
    linear-gradient(118deg, transparent 56%, rgba(168,255,0,.08) 66%, transparent 78%),
    linear-gradient(180deg,#090909,#050505);   /* el mat: la superficie MÁS oscura del bloque */
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo), var(--sombra-flotante);
  padding:0 0 46px;
  overflow:hidden;
}
.escritorio__barra{
  display:flex;align-items:center;gap:20px;
  height:34px;padding-inline:18px;
  font-size:var(--texto-xs);color:var(--color-fg-200);
  border-bottom:1px solid var(--color-border-soft);
  background:rgba(255,255,255,.02);
}
.escritorio__barra b{font-weight:400;color:var(--color-fg)}
.escritorio__marca{border-radius:4px;flex:none}
.escritorio__derecha{margin-left:auto;display:flex;align-items:center;gap:14px}
.escritorio__pila{width:22px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--color-fg-400);position:relative}
.escritorio__pila::after{content:"";position:absolute;inset:2px;right:7px;border-radius:1px;background:var(--color-acento)}

/* ── la ventana de la app ── */
.ventana{
  display:grid;grid-template-columns:196px 1fr;
  width:72%;margin:78px auto 0;
  min-height:0;
  border-radius:var(--radius-lg);
  /* Superficie PROPIA, muy por encima del escritorio que la rodea. Con el mismo
     negro que el mat la ventana deja de leerse como panel flotante, que es el
     gesto entero de este pantallazo. */
  background:#1A1A1A;
  box-shadow:
    inset 0 0 0 1px #3C3C3C,
    inset 0 1px rgba(255,255,255,.07),
    0 48px 110px -28px rgba(0,0,0,1),
    0 0 120px -20px rgba(168,255,0,.22);
  overflow:hidden;
  animation:ventanaEntra 1.1s var(--curva-entrada) both;
}
@keyframes ventanaEntra{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}

.ventana__rail{
  display:flex;flex-direction:column;gap:2px;
  padding:16px 12px;
  background:var(--color-bg-200);
  border-right:1px solid var(--color-border-soft);
}
.rail__marca{display:flex;align-items:center;gap:8px;padding:6px 8px 16px;font-size:var(--texto-sm)}
.rail__item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius-sm);
  font-size:var(--texto-sm);color:var(--color-fg-200);
  transition:background-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}
.rail__item i{width:14px;height:14px;border-radius:4px;background:var(--color-bg-400);flex:none}
.rail__item:hover{background:var(--color-bg-300);color:var(--color-fg)}
.rail__item.is-activo{background:var(--color-acento-wash);color:var(--color-fg)}
.rail__item.is-activo:hover{background:rgba(168,255,0,.2)}
.rail__item.is-activo i{background:var(--color-acento)}
.rail__pie{margin-top:auto;padding:8px 10px}

.ventana__panel{padding:20px 22px 24px;display:flex;flex-direction:column;gap:18px;justify-content:space-between}
.panel__cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.panel__cabeza h3{margin-top:6px;font-size:var(--texto-xl);font-weight:400;letter-spacing:-.02em}
.chip{
  display:inline-flex;align-items:center;height:26px;padding-inline:10px;
  border-radius:999px;font-size:var(--texto-xs);color:var(--color-fg-200);
  background:var(--color-bg-200);box-shadow:inset 0 0 0 1px var(--color-border);
  white-space:nowrap;
}
.chip--acento{color:var(--color-acento);background:var(--color-acento-wash);box-shadow:inset 0 0 0 1px rgba(168,255,0,.28)}

.fases{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.fases li{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px 7px 8px;border-radius:999px;
  font-size:var(--texto-xs);color:var(--color-fg-300);
  background:var(--color-bg-200);box-shadow:inset 0 0 0 1px var(--color-border-soft);
}
.fases b{
  width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:400;background:var(--color-bg-400);color:var(--color-fg-200);
}
.fases .is-hecha{color:var(--color-fg-200)}
.fases .is-hecha b{background:rgba(168,255,0,.2);color:var(--color-acento)}
.fases .is-viva{color:var(--color-sobre-acento);background:var(--color-acento);box-shadow:none}
.fases .is-viva b{background:rgba(10,10,10,.22);color:var(--color-sobre-acento)}

/* ── la timeline ── */
.pista{position:relative;padding:14px 0 6px;border-top:1px solid var(--color-border-soft)}
.pista__regla{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--color-fg-400);margin-bottom:10px}
.pista__linea{position:relative;height:38px;margin-bottom:6px;border-radius:6px;background:rgba(255,255,255,.025)}
.pista__linea--fina{height:16px}
.clip{
  position:absolute;top:3px;bottom:3px;
  left:calc(var(--x) * 1%);width:calc(var(--w) * 1%);
  border-radius:4px;
  background:linear-gradient(180deg,#2A2A2A,#202020);
  box-shadow:inset 0 0 0 1px #3A3A3A, inset 0 1px rgba(255,255,255,.06);
}
.clip.is-elegido{
  background:linear-gradient(180deg,rgba(168,255,0,.9),rgba(168,255,0,.65));
  box-shadow:inset 0 0 0 1px var(--color-acento-vivo), 0 0 26px -6px rgba(168,255,0,.75);
}
.clip--sfx{top:2px;bottom:2px;background:linear-gradient(180deg,#2E3A22,#242D1B);box-shadow:inset 0 0 0 1px #3E5228}
.clip--txt{top:2px;bottom:2px;background:linear-gradient(180deg,#26262C,#1E1E24);box-shadow:inset 0 0 0 1px #34343E}
.pista__aguja{
  position:absolute;top:26px;bottom:0;left:46%;width:1px;
  background:var(--color-acento);
  box-shadow:0 0 12px rgba(168,255,0,.8);
}
.pista__aguja::before{
  content:"";position:absolute;top:-5px;left:-4px;
  width:9px;height:9px;border-radius:2px;background:var(--color-acento);
}

.panel__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}

/* ── el dock ── */
.dock{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;justify-content:center;
  margin:26px auto 0;padding:8px;width:fit-content;
  border-radius:var(--radius-lg);
  background:rgba(20,20,20,.82);backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
}
.dock button{
  width:52px;height:44px;border:0;border-radius:var(--radius-sm);
  /* CAJA, no glifo desnudo: en la referencia los cinco la llevan, no solo el
     activo, y es lo que hace que el dock se lea como una fila de teclas. */
  background:var(--color-bg-200);box-shadow:inset 0 0 0 1px var(--color-border-soft);
  color:var(--color-fg-300);cursor:pointer;
  display:grid;place-items:center;
  transition:background-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}
.dock button:hover{background:var(--color-bg-300);color:var(--color-fg-200)}
.dock button[aria-selected="true"]{background:var(--color-bg-400);color:var(--color-acento)}
.dock button[aria-selected="true"]:hover{background:#3A3A3A}
.dock__globo{
  width:fit-content;margin:0 auto 10px;
  padding:5px 11px;border-radius:var(--radius-sm);
  font-size:var(--texto-xs);color:var(--color-fg-200);
  background:var(--color-bg-300);box-shadow:inset 0 0 0 1px var(--color-border);
}

.producto__pie{
  margin-top:52px;text-align:center;max-width:460px;margin-inline:auto;
  font-size:var(--texto-lg);color:var(--color-fg-300);line-height:1.5;text-wrap:balance;
}
.producto__pie b{font-weight:400;color:var(--color-fg)}

@media (max-width:900px){
  .ventana{grid-template-columns:1fr;margin:34px 18px 0}
  .ventana__rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--color-border-soft)}
  .rail__marca,.rail__pie{display:none}
  .rail__item{white-space:nowrap}
}

/* ═══ 03 · MANIFIESTO ══════════════════════════════════════════════════════
   En raycast esta sección es un SPLIT ASIMÉTRICO: a la izquierda el dicho con
   su botón sólido, a la derecha un mosaico de teclas apagadas del que cuatro se
   levantan como tarjetas. Estaba montada como tres cifras centradas, que es
   otra sección distinta. El instrumento de Claudia no es un teclado, así que
   las teclas apagadas son CLIPS de una timeline. */
.manifiesto__split{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:64px;align-items:center;
}
.manifiesto__dicho{display:flex;flex-direction:column;align-items:flex-start;gap:28px}

.mosaico{position:relative;min-height:326px}
.mosaico__pista{
  /* La rejilla llena el bloque entero, por debajo y a los lados de las tarjetas:
     en la referencia las tarjetas SON celdas del teclado, no fichas flotando
     sobre una fila recortada. */
  position:absolute;inset:-16% -12% -18% -8%;
  display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:auto;gap:11px;
  mask-image:radial-gradient(92% 88% at 52% 48%, #000 42%, transparent 94%);
  -webkit-mask-image:radial-gradient(92% 88% at 52% 48%, #000 42%, transparent 94%);
}
.mosaico__pista span{
  /* CUADRADA. Con la fila más baja que la columna el fondo deja de leerse como
     instrumento y pasa a ser un rayado apaisado. */
  aspect-ratio:1;
  position:relative;border-radius:10px;
  background:#121212;
  box-shadow:inset 0 0 0 1px #1E1E1E;
}
/* Y con leyenda: una celda vacía se lee como una caja sin terminar. En la
   referencia cada tecla lleva sus dos glifos; aquí el instrumento es una
   timeline, así que cada celda lleva su pista arriba y su timecode abajo. */
.mosaico__pista span::before,
.mosaico__pista span::after{
  position:absolute;left:9px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;
  color:rgba(255,255,255,.2);
}
.mosaico__pista span::before{content:attr(data-a);top:8px}
.mosaico__pista span::after{content:attr(data-b);bottom:8px}
.mosaico__pista span:nth-child(3n){opacity:.55}
.mosaico__pista span:nth-child(4n){opacity:.75}

.mosaico__ficha{
  position:relative;z-index:1;
  grid-column:calc(var(--fx) + 1) / span 2;
  display:flex;flex-direction:column;gap:6px;
  padding:9px 11px 10px;max-width:none;
  /* atada al módulo: la tarjeta ES una celda, no una ficha flotando encima */
  grid-row:span 1;align-self:stretch;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#1C1C1C,#161616);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo), 0 20px 44px -26px rgba(0,0,0,.95);
}
.mosaico__ficha svg{color:var(--color-acento)}
.mosaico__ficha p{font-size:var(--texto-xl);line-height:1.3;color:var(--color-fg-300);max-width:15ch}
.mosaico__ficha b{font-weight:400;color:var(--color-fg)}
/* Se colocan sobre la pista: dos arriba y dos abajo, desplazadas, como allí */
.mosaico{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:auto;gap:12px;align-content:center}
.mosaico__ficha:nth-of-type(1){grid-area:1 / 2 / 2 / 5}
.mosaico__ficha:nth-of-type(2){grid-area:1 / 5 / 2 / 8}
.mosaico__ficha:nth-of-type(3){grid-area:2 / 1 / 3 / 4}
.mosaico__ficha:nth-of-type(4){grid-area:2 / 4 / 3 / 7}

@media (max-width:1000px){
  .manifiesto__split{grid-template-columns:1fr;gap:48px}
  .mosaico__ficha:nth-of-type(1),.mosaico__ficha:nth-of-type(2),
  .mosaico__ficha:nth-of-type(3),.mosaico__ficha:nth-of-type(4){grid-area:auto / auto / auto / span 2}
}
@media (max-width:620px){
  .mosaico{grid-template-columns:1fr}
  .mosaico__ficha{grid-area:auto!important}
  .mosaico__pista{display:none}
}

/* ═══ 04 · EL BANCO VISUAL ═════════════════════════════════════════════════
   La rejilla con pestañas de raycast, pero con las piezas reales del banco.
   El carril se sale del contenedor a propósito: la tarjeta cortada por el
   borde derecho es lo que dice "hay más" sin escribirlo. */
.banco__cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.pestanas{
  display:flex;gap:2px;padding:6px;
  border-radius:999px;
  background:rgba(22,22,22,.8);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
}
.pestanas button{
  height:50px;padding-inline:20px;border:0;border-radius:999px;
  background:transparent;color:var(--color-fg-300);
  font-size:var(--texto-sm);cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}
.pestanas button:hover{color:var(--color-fg-200)}
.pestanas button[aria-selected="true"]{background:var(--color-bg-400);color:var(--color-fg)}

.banco__carro{
  /* La máscara estaba en el carril, pero quien recorta es ESTE: la cuarta
     tarjeta salía guillotinada a cuchillo a 93px del borde, con el comentario
     de la máscara justo al lado diciendo que existe para evitarlo. */
  mask-image:linear-gradient(90deg, #000 0, #000 82%, transparent 99%);
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 82%, transparent 99%);
}
.banco__carril{
  margin-top:52px;overflow:hidden;
  padding-left:max(0px, calc((100vw - var(--container-width)) / 2 - 59px));
  /* El carril se sale del contenedor a propósito —la tarjeta cortada es lo que
     dice "hay más"—, pero cortada A CUCHILLO parece un fallo de maquetación.
     La máscara la desvanece, que es lo que hace raycast. */
  mask-image:linear-gradient(90deg, #000 0, #000 78%, transparent 99%);
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 78%, transparent 99%);
}
.banco .contenedor{max-width:1252px}   /* medido en A; no tocar para alinear el raíl */
.banco__carro{
  /* El carril cuelga de la SECCIÓN, no del contenedor, así que su borde no
     hereda el raíl: sin esto la primera tarjeta arranca 24px a la izquierda de
     su propio titular, que es una fuga de un solo componente contra el sistema. */
  display:flex;gap:22px;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:none;
}
.banco__carro::-webkit-scrollbar{display:none}

/* El raíl: la primera tarjeta a plomo con el titular. Ni el `padding-inline` del
   contenedor de scroll ni un margen en la primera tarjeta valen: el
   `scroll-snap-type:x mandatory` ancla la tarjeta a su borde y SE COME los dos
   (medido: margen 142px aplicado, y el carril en scrollLeft 166 al cargar). El
   raíl va en el contenedor que NO scrollea. */
.pieza{
  position:relative;
  flex:0 0 356px;height:556px;scroll-snap-align:start;
  border-radius:var(--radius-lg);
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  overflow:hidden;
  display:flex;flex-direction:column;
  animation:piezaEntra .7s var(--curva-entrada) both;
  animation-delay:calc(var(--n) * 45ms);
  transition:transform var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva);
}
.pieza::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.pieza:nth-child(3n+1){background:linear-gradient(168deg,rgba(168,255,0,.055),var(--color-bg-200) 62%)}
.pieza:nth-child(3n+2){background:linear-gradient(168deg,rgba(168,255,0,.09),var(--color-bg-200) 58%)}
.pieza:nth-child(3n+3){background:linear-gradient(168deg,rgba(255,255,255,.045),var(--color-bg-200) 60%)}
.pieza:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #3A3A3A, var(--brillo), 0 18px 40px -22px rgba(0,0,0,.9)}
@keyframes piezaEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.pieza__cabeza{display:flex;align-items:center;gap:12px;padding:18px 18px 0}
.pieza__icono{
  width:38px;height:38px;border-radius:10px;flex:none;
  background:var(--color-acento-wash);
  box-shadow:inset 0 0 0 1px rgba(168,255,0,.3);
  display:grid;place-items:center;
  font-family:var(--font-titular);font-size:14px;letter-spacing:-.02em;color:var(--color-acento);
}
.pieza__nombre{font-size:var(--texto-base);letter-spacing:-.01em;line-height:1.25}
.pieza__autor{font-family:var(--font-mono);font-size:11px;color:var(--color-fg-400)}
.pieza__ir{
  margin-left:auto;width:28px;height:28px;border-radius:7px;flex:none;
  background:var(--color-bg-300);color:var(--color-fg-300);
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.pieza__que{
  margin:14px 18px 22px;font-size:var(--texto-base);color:#D8D8D8;line-height:1.5;
  flex:none;overflow:hidden;
  /* Tres líneas de alto SIEMPRE, para que las cuatro tarjetas se alineen, pero
     el texto ya viene cortado desde el dato: el clamp es solo una red, no el
     que corta. Así no hay dos elipsis ni una cuarta línea a medio glifo. */
  min-height:calc(2 * 1.5 * var(--texto-base));
  max-height:calc(2 * 1.5 * var(--texto-base));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pieza__lienzo{
  /* En raycast el arte llega hasta los bordes de la tarjeta; encajonarlo con
     padding y un borde lo convierte en una miniatura dentro de una ficha. */
  margin:0;border-radius:0;
  flex:1;min-height:0;overflow:hidden;
  /* Superficie ÚNICA con la tarjeta: ni fondo propio ni filete que la parta en
     dos. Con el pozo en negro y su raya encima, la tarjeta se leía como una
     cabecera y una caja aparte, no como una pieza. */
  background:transparent;
  border-top:0;
}
.pieza__lienzo img{width:100%;height:100%;object-fit:cover;object-position:center}
/* El arte llena su pozo y sangra hasta el borde inferior, como el resto del
   carrusel: una pieza pequeña flotando en el centro parece un icono, no obra.
   OJO: nada de `display:grid` + `min-width:100%` aquí. La pista se dimensiona
   por su contenido y el contenido se dimensiona por la pista — ese ciclo colgó
   el renderizador entero y se llevó por delante el pase de hover completo. */
.pieza__lienzo img{object-fit:cover;object-position:center top}
/* Y el tinte de la tarjeta pasa POR ENCIMA del arte, que es lo que funde las dos
   mitades en una sola superficie en vez de dejar el arte flotando en un pozo. */
.pieza__lienzo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(168deg, rgba(168,255,0,.05), transparent 46%);
}
.pieza__lienzo{position:relative}

.banco__pie{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:34px}
.banco__flechas{display:flex;gap:10px}

/* ═══ 05 · EL CORTE POR GUIÓN ══════════════════════════════════════════════
   La gramática exacta del AIShowCase de raycast, que no es un split de dos
   columnas: ceja entre filetes → titular centrado → ESCENARIO a todo el ancho
   con la pieza dentro y la pintada de marca sangrando por detrás → paginación
   en rayas → tres columnas de texto con la viva encendida → enlace de cierre
   centrado. Estaba montada como split y por eso no se parecía. */

/* La ceja: un filete que se abre para dejar pasar una palabra, con su brillo */
.ceja{
  display:flex;align-items:center;gap:18px;
  max-width:640px;margin:0 auto 44px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--color-acento);
}
.ceja::before,.ceja::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,255,0,.55));
}
.ceja::after{background:linear-gradient(90deg,rgba(168,255,0,.55),transparent)}
.ceja span{text-shadow:0 0 18px rgba(168,255,0,.7)}

.corte__escenario{position:relative;margin-top:64px;isolation:isolate;max-width:1058px;margin-inline:auto}
.escenario__pintada{
  position:absolute;inset:2% -4% 16% 34%;z-index:-1;pointer-events:none;
  background:
    linear-gradient(118deg, transparent 18%, rgba(168,255,0,.75) 26%, transparent 34%),
    linear-gradient(118deg, transparent 38%, rgba(168,255,0,.5) 47%, transparent 56%),
    linear-gradient(118deg, transparent 60%, rgba(168,255,0,.3) 69%, transparent 78%);
  filter:blur(14px);opacity:.5;
  mask-image:linear-gradient(200deg,#000 18%,transparent 72%);
  -webkit-mask-image:linear-gradient(200deg,#000 18%,transparent 72%);
}
/* El marco exterior: en raycast es la carcasa del portátil que enmarca la
   ventana y la separa del fondo. */
.escenario__marco{
  /* VISOR, no caja: en la referencia el marco recorta la ventana por abajo y es
     ese corte el que da la sensación de asomarse a algo más grande. Encajada con
     margen igual por los cuatro lados, la pieza se lee terminada y pequeña. */
  border-radius:var(--radius-xl);
  padding:24px 24px 0;
  max-height:568px;
  overflow:hidden;
  background:linear-gradient(180deg,#141414,#0C0C0C);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
}
.marco__ventana{
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo), 0 30px 70px -30px rgba(0,0,0,.95);
}
.marco__barra{
  display:flex;align-items:center;gap:7px;height:44px;padding-inline:18px;
  border-bottom:1px solid var(--color-border-soft);
}
.marco__barra span{width:9px;height:9px;border-radius:999px;background:var(--color-bg-400)}
.marco__barra b{margin-left:12px;font-weight:400}
.marco__cuerpo{padding:22px 24px 34px;display:flex;flex-direction:column;gap:5px}
.linea{
  display:flex;gap:16px;align-items:center;
  padding:15px 16px;border-radius:var(--radius-sm);
  font-size:var(--texto-base);color:var(--color-fg-200);line-height:1.5;
  max-width:none;
}
.linea em{font-family:var(--font-mono);font-size:12px;color:var(--color-fg-400);font-style:normal;flex:none}
.linea > span{min-width:0}
.linea b{font-weight:400;color:var(--color-fg)}
.linea i{color:var(--color-fg-400);font-style:normal}
/* CERO opacidad de penumbra: bajando la luz no se llega a 4,5:1 sin dejar de
   leerse (2,04 con .45, 3,65 con .78). Lo que comunica «descartada» es el
   TACHADO, y ese no cuesta contraste. */
.linea.is-descartada{opacity:1;color:var(--color-fg-300);text-decoration:line-through;text-decoration-color:var(--color-fg-400)}
.linea.is-descartada em{color:var(--color-fg-300)}
.linea.is-elegida{background:var(--color-acento-wash);box-shadow:inset 0 0 0 1px rgba(168,255,0,.28)}
/* Sobre el lavado de flúor el gris de cota se queda en 3,8:1. Aquí sube un
   escalón: es el único sitio de la página donde el fondo no es el negro base. */
.linea.is-elegida em{color:var(--color-fg-200)}
.linea.is-hueco{background:rgba(255,45,70,.08);box-shadow:inset 0 0 0 1px rgba(255,45,70,.24)}
.tic{
  margin-left:auto;flex:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;
  color:var(--color-sobre-acento);background:var(--color-acento);
  padding:4px 8px;border-radius:4px;
}

/* La paginación de raycast son rayas, y la viva se enciende con su halo */
.paginacion{display:flex;gap:10px;justify-content:center;margin-top:44px}
.paginacion button{
  width:66px;height:3px;padding:0;border:0;border-radius:999px;
  background:var(--color-bg-400);cursor:pointer;overflow:hidden;
  transition:background-color var(--t-rapida) var(--curva);
}
.paginacion button:hover{background:var(--color-fg-400)}
.paginacion button span{display:block;height:100%;width:0;background:var(--color-acento)}
.paginacion button[aria-selected="true"]{box-shadow:0 0 16px rgba(168,255,0,.55)}
.paginacion button[aria-selected="true"] span{width:100%;animation:barrita 5s linear}
@keyframes barrita{from{width:0}to{width:100%}}

/* Tres columnas de texto; la viva encendida y las otras apagadas, como allí */
.corte__texto{
  /* La fila se alinea con la ventana, no con el contenedor: volando 143px por
     lado dejaba de leerse como el pie de la pieza. */
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  max-width:1148px;margin-inline:auto;
  margin-top:64px;
}
.corte__paso{
  /* El salto entre apagado y encendido lo da el ACTIVO subiendo a blanco, no el
     inactivo bajando: por debajo de este gris el texto deja de cumplir 4,5:1 y
     en legibilidad manda la calidad, no la paridad. */
  font-size:var(--texto-base);line-height:1.6;max-width:38ch;
  color:#8A8A8A;
  transition:color var(--t-media) var(--curva);
}
.corte__paso b{font-weight:400;color:#8A8A8A;transition:color var(--t-media) var(--curva)}
.corte__paso.is-viva{color:#FFFFFF}
.corte__paso.is-viva b{color:#FFFFFF}
.corte__mas{display:flex;justify-content:center;margin-top:64px}

@media (max-width:960px){ .corte__texto{grid-template-columns:1fr;gap:24px} }

/* ═══ 06 · VÍDEOS ══════════════════════════════════════════════════════════ */
.muro{
  display:flex;gap:14px;align-items:center;
  max-width:1030px;margin-inline:auto;
  margin-top:56px;overflow-x:auto;padding:12px 4px;
  /* `safe` no es decorativo: con `justify-content:center` a secas y el contenido
     desbordando, los primeros elementos se salen POR LA IZQUIERDA de la caja de
     scroll y dejan de ser alcanzables — la primera ficha del muro se quedó sin
     poder pulsarse. */
  justify-content:safe center;
  scroll-snap-type:x proximity;
  /* Desvanecido en LOS DOS extremos: cortado en seco contra el borde derecho
     parece un fallo de maquetación, no "hay más". */
  mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  scrollbar-width:none;
}
.muro::-webkit-scrollbar{display:none}
.muro__ficha{
  flex:0 0 auto;scroll-snap-align:center;display:flex;align-items:center;gap:16px;
  padding:18px 24px 18px 18px;border-radius:var(--radius-lg);
  background:transparent;border:0;cursor:pointer;text-align:left;
  opacity:1;
  transition:opacity var(--t-media) var(--curva), background-color var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva);
}
.muro__ficha:hover{
  opacity:1;background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px #3A3A3A, 0 14px 32px -20px rgba(0,0,0,.9);
}
.muro__ficha:focus-visible{
  opacity:1;outline:2px solid var(--color-acento);outline-offset:2px;border-radius:var(--radius-lg);
}
.muro__ficha[aria-selected="true"]{
  opacity:1;background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
}
/* No es un avatar: es el vídeo. En raycast el muro son caras de personas, y
   aquí las caras son de gente real de rodajes de cliente — así que la
   miniatura va difuminada y en vertical, que es lo que dice "esto es un reel"
   sin enseñar a nadie. */
.muro__mini{
  width:42px;height:58px;border-radius:7px;object-fit:cover;flex:none;
  background:var(--color-bg-300);
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.muro__ficha b{display:block;font-weight:400;font-size:var(--texto-base);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.muro__ficha span{display:block;font-family:var(--font-mono);font-size:11px;color:var(--color-fg-300)}

.muro__detalle{
  /* raíl interior de ~1030px y divisor EN EL EJE: con el raíl completo y el
     reparto .9/1.1 el divisor caía al 59% y la cita quedaba colgando. */
  max-width:1030px;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  margin-top:88px;padding-top:72px;border-top:1px solid var(--color-border-soft);
}
.muro__datos{margin:0;display:flex;flex-direction:column;gap:22px}
.muro__datos div{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:start}
.muro__datos dt{font-family:var(--font-mono);font-size:var(--texto-xs);color:var(--color-fg-400);padding-top:5px}
.muro__datos dd{margin:0;display:flex;flex-direction:column;gap:6px}
.muro__datos dd p{font-size:var(--texto-base);color:var(--color-fg-300);line-height:1.5;max-width:36ch}
.muro__cita{
  /* La regla que separa las dos columnas del panel: sin ella los tres bloques
     flotan sueltos en vez de leerse como una tabla. */
  margin:0;padding-left:40px;position:relative;
  border-left:1px solid var(--color-border-soft);
  font-size:20px;line-height:1.45;letter-spacing:-.01em;max-width:43ch;
  color:var(--color-fg-300);text-wrap:balance;
}
.muro__cita b{font-weight:400;color:var(--color-fg)}
.muro__enlaces{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.muro__enlaces .boton{font-size:var(--texto-sm)}
.muro__cita::before{
  content:"“";position:absolute;left:22px;top:-4px;
  font-family:var(--font-titular);font-size:56px;line-height:1;color:var(--color-fg-400);
}
@media (max-width:960px){ .muro__detalle{grid-template-columns:1fr;gap:32px} .muro{justify-content:flex-start} }

/* ═══ 07 · TARJETAS DE AUTOMATISMO ═════════════════════════════════════════ */
.tarjeta{
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-bg-100);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  display:flex;flex-direction:column;
}
.tarjeta--ancha{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);margin-top:56px}
/* La costura vertical recta dejaba la tarjeta como dos rectángulos pegados. En
   la referencia el gráfico entra en diagonal y muerde la mitad de texto por
   arriba, que es lo que hace que las dos mitades se engranen. */
.tarjeta--ancha .tarjeta__demo{
  margin-left:-78px;z-index:1;
  clip-path:polygon(78px 0, 100% 0, 100% 100%, 0 100%);
}
.tarjeta--ancha .tarjeta__texto{position:relative;z-index:2}
/* Y un panel de interfaz real flotando sobre el gráfico, recortado contra el
   borde de la tarjeta: sin él la mitad visual es un fondo desenfocado con un
   rótulo encima. */
.demo__panel{
  position:absolute;right:50px;bottom:26px;z-index:2;
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(20,20,20,.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo), 0 22px 50px -24px rgba(0,0,0,.95);
}
.demo__panel span{font-family:var(--font-mono);font-size:11px;color:var(--color-fg-200);white-space:nowrap}
.demo__panel i{
  font-style:normal;font-size:11px;letter-spacing:.04em;
  padding:5px 10px;border-radius:5px;
  background:var(--color-acento);color:var(--color-sobre-acento);
}
.tarjeta__texto{padding:32px 34px;display:flex;flex-direction:column;gap:12px;justify-content:center}
/* Aire contra la cuña diagonal: el copy llegaba a 3px de ella. */
.tarjeta--ancha .tarjeta__texto{padding-right:132px}
.tarjeta__texto h3{display:flex;align-items:center;gap:10px;font-size:var(--texto-xl);font-weight:400;letter-spacing:-.02em}
.tarjeta__texto h3 svg{color:var(--color-fg-300)}
.tarjeta__texto p{font-size:var(--texto-base);color:var(--color-fg-200);line-height:1.6;max-width:44ch}
.tarjeta__texto em{font-style:normal;color:var(--color-acento)}

.tarjeta__demo{position:relative;min-height:228px;display:grid;place-items:center;padding:24px;overflow:hidden}
.tarjeta__demo--arriba{border-bottom:1px solid var(--color-border-soft)}
.demo__fondo{
  position:absolute;inset:0;
  background:
    linear-gradient(116deg, transparent 20%, rgba(168,255,0,.85) 27%, rgba(168,255,0,.2) 33%, transparent 38%),
    linear-gradient(116deg, transparent 40%, rgba(168,255,0,.55) 47%, transparent 54%),
    linear-gradient(116deg, transparent 58%, rgba(168,255,0,.34) 66%, transparent 73%),
    linear-gradient(116deg, transparent 78%, rgba(168,255,0,.22) 85%, transparent 92%);
  filter:blur(9px);opacity:.7;
}
/* el grano también aquí: es lo que hace que se lea como pintura y no como CSS */
.demo__fondo::after{
  content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.karaoke{position:relative;display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center}
.karaoke span{
  font-family:var(--font-display);font-size:clamp(26px,3.4vw,44px);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  color:var(--color-fg);opacity:.42;
  text-shadow:0 2px 12px rgba(0,0,0,.75);
  animation:palabra 1.2s var(--curva) infinite;
}
.karaoke span:nth-child(1){animation-delay:0s}
.karaoke span:nth-child(2){animation-delay:.12s}
.karaoke span:nth-child(3){animation-delay:.24s}
.karaoke span:nth-child(4){animation-delay:.36s}
.karaoke .es-golpe{color:var(--color-acento)}
@keyframes palabra{0%,6%{opacity:.42;transform:translateY(4px)}14%,52%{opacity:1;transform:none}70%,100%{opacity:.42;transform:none}}
.demo__pie{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#E4E4E4}

/* Una rejilla de dos con UNA tarjeta deja 595x411px de negro y no se lee como
   asimetría: se lee como una tarjeta que no cargó. Se adapta al número real. */
.tarjetas-par{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:22px;margin-top:22px}
.onda{display:flex;align-items:flex-end;gap:6px;height:150px}
.onda span{
  width:8px;border-radius:3px;background:var(--color-bg-400);
  height:calc(var(--h) * 1%);
  transform-origin:bottom;
}
.onda{animation:latido 1.1s var(--curva) infinite alternate}
.onda span:nth-child(5n){background:var(--color-acento)}
@keyframes latido{from{transform:scaleY(.72)}to{transform:scaleY(1)}}
.onda__marca{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center}

.captions{
  position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;
  width:100%;height:100%;justify-content:flex-end;padding:0 18px 12px;
  border-radius:var(--radius-sm);
  background:
    radial-gradient(70% 55% at 50% 34%, rgba(255,255,255,.09), transparent 72%),
    linear-gradient(180deg, #1A1A1A, #0E0E0E);
  box-shadow:inset 0 0 0 1px var(--color-border-soft);
}
/* la silueta de quien habla, insinuada: el caption tiene que verse SOBRE algo */
.captions::before{
  content:"";position:absolute;left:50%;top:16%;transform:translateX(-50%);
  width:96px;height:96px;border-radius:999px;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.11), rgba(255,255,255,.03) 70%);
}
.captions p{
  font-size:clamp(19px,2.4vw,26px);letter-spacing:-.01em;
  color:rgba(255,255,255,.34);
  text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.65);
}
.captions .es-viva{color:#fff}

@media (max-width:900px){
  .tarjeta--ancha,.tarjetas-par{grid-template-columns:1fr}
}

/* ═══ 08 · GALERÍA DE SUPER EFECTOS ════════════════════════════════════════ */
.galeria{
  display:flex;gap:18px;margin-top:40px;
  padding-inline:max(24px, calc((100vw - var(--container-width)) / 2));
  overflow-x:auto;scrollbar-width:none;
  mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 90%, transparent 100%);
}
.galeria::-webkit-scrollbar{display:none}
.galeria__pieza{
  flex:0 0 244px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  transition:transform var(--t-media) var(--curva);
}
.galeria__pieza:hover{transform:translateY(-4px)}
.galeria__pieza figure{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
/* Esta franja era la ÚNICA caja de luz del sitio: media de gris 55 en una página
   que se mueve entre 10 y 25. No es un tratamiento distinto, es un bloque de
   otra web pegado encima. */
.galeria__pieza video,.galeria__pieza img{filter:brightness(.46) saturate(.92)}
.galeria__pieza figure::after{
  /* `inset:0` cubría también el figcaption, que es hijo del figure: el copy
     comercial de las cinco tarjetas quedaba a 1,83:1. El velo es del METRAJE. */
  content:"";position:absolute;inset:0 0 auto;aspect-ratio:9/16;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.36) 0%, rgba(10,10,10,.14) 42%, rgba(10,10,10,.72) 100%);
}
/* El mismo rótulo que lleva el muro de vídeos: una pieza borrosa sin explicar se
   lee como una imagen rota, no como una cara protegida a propósito. */
.galeria__pieza{position:relative}
/* Anclado ARRIBA, sobre el metraje. Abajo caía sobre el pie de la tarjeta y le
   comía dos líneas: el rótulo que explicaba el difuminado tapaba la explicación. */
/* DESVIACIÓN DELIBERADA nº2 (la nº1 es el CTA flúor, en base.css). La referencia
   no sella ninguna pieza; aquí el metraje es de cliente y va difuminado, y una
   imagen borrosa sin explicar se lee como rota. El rótulo se queda, pero como
   cota discreta y no como cinta estampada. */
.galeria__pieza .aviso{
  position:absolute;left:10px;top:10px;z-index:2;opacity:.72;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;
  padding:3px 7px;border-radius:4px;
  color:var(--color-fg-300);background:rgba(10,10,10,.62);
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.galeria__pieza video,.galeria__pieza img{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--color-bg-100)}
.galeria__pieza figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.galeria__pieza figcaption b{font-weight:400;font-size:var(--texto-sm)}
.galeria__pieza figcaption span{font-size:var(--texto-sm);color:var(--color-fg-300);line-height:1.5}

/* ═══ 09 · EL JUEZ ═════════════════════════════════════════════════════════ */
.parte{
  margin-top:26px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo), var(--sombra-card);
}
.parte__cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--color-border-soft)}
.parte__lista{list-style:none;margin:0;padding:6px}
.parte__lista li{
  display:grid;grid-template-columns:76px 96px minmax(0,1fr) 150px;gap:18px;align-items:center;
  padding:9px 16px;border-radius:var(--radius-sm);
  font-size:var(--texto-sm);
}
.parte__lista li:nth-child(odd){background:rgba(255,255,255,.018)}
.parte__lista b{font-family:var(--font-mono);font-size:11px;color:var(--color-fg-400);font-weight:400}
.parte__lista .sev{
  justify-self:start;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;text-align:center;
}
.parte__lista [data-sev="bloq"] .sev{background:rgba(255,45,70,.16);color:#FF7085}
.parte__lista [data-sev="grave"] .sev{background:rgba(255,184,26,.16);color:#FFB81A}
.parte__lista [data-sev="mej"] .sev{background:var(--color-acento-wash);color:var(--color-acento)}
.parte__lista .que{color:var(--color-fg-200)}
.parte__lista .parte__pieza{color:var(--color-fg-400);text-align:right}
.parte__pie{padding:12px 20px;border-top:1px solid var(--color-border-soft)}
@media (max-width:760px){ .parte__lista li{grid-template-columns:1fr;gap:6px} }

/* ═══ 10 · EL PLANO TÉCNICO ════════════════════════════════════════════════
   La sección de la API de raycast: papel cuadriculado, cotas monoespaciadas
   FIG_0N y dibujos isométricos de línea. Aquí es el sitio natural para el
   line-art del video system, que ya es la gramática de la marca. */
.plano{position:relative;overflow:hidden;padding-block:var(--seccion-y)}
.plano__rejilla{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:100px 100px;
  mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.plano__cuerpo{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--color-border-soft);
  border-left:1px solid var(--color-border-soft);
}
.plano__celda{
  position:relative;padding:48px 34px;min-height:604px;   /* medido: A mide 3.182px de sección; encogerla la saca de banda */
  border-right:1px solid var(--color-border-soft);
  border-bottom:1px solid var(--color-border-soft);
  display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.plano__celda--titulo{grid-column:span 1;justify-content:flex-start;padding-top:44px}
.plano__celda--titulo h2{
  font-family:var(--font-titular);font-weight:400;
  font-size:clamp(30px,3.9vw,56px);   /* medido: 56px */line-height:1.04;letter-spacing:0;
}
.plano__celda--titulo p{max-width:34ch;line-height:1.7;font-size:13px}
.plano__celda--grande{grid-column:span 3}
.plano__celda--fig{align-items:center;color:var(--color-fg-300)}
/* Los pies van ANCLADOS al borde inferior con un inset constante: centrados en
   su celda, el plano pierde el ritmo de hoja de delineación. */
.plano__celda--texto{justify-content:flex-end;padding-bottom:24px}
.plano__celda--texto h3{min-height:calc(2 * 1.3em);display:flex;align-items:flex-end}
.plano__celda--texto h3{font-size:var(--texto-lg);font-weight:400;letter-spacing:-.02em}
.plano__celda--texto p{max-width:38ch;line-height:1.7;font-size:13px}
.plano__celda--der{align-items:flex-start}
.plano__celda--cierre{grid-column:span 4;min-height:0;padding-block:30px;align-items:center}
.plano__cota{position:absolute;top:14px;left:16px;font-size:11px}
.iso{width:100%;max-width:460px;height:auto;color:var(--color-fg-300)}
/* La figura sostiene la retícula: por debajo de la mitad de la celda el plano se
   lee vacío por mucho que la cota esté bien puesta. */
.plano__celda--fig .iso{max-height:none;height:362px;min-height:362px;width:auto;max-width:100%}   /* 0,60 del alto de celda, como A */
.plano__celda--grande .iso{height:400px;min-height:400px;width:auto;max-width:100%}
.iso__vivo{animation:isoLate 1.5s var(--curva) infinite alternate}
@keyframes isoLate{from{opacity:.75}to{opacity:1}}
@media (max-width:900px){
  .plano__cuerpo{grid-template-columns:1fr}
  .plano__celda--grande,.plano__celda--cierre{grid-column:span 1}
}

/* ═══ 11 · CIERRE ══════════════════════════════════════════════════════════
   El objeto-firma. En raycast es un teclado gigante que llena el cuadro y se
   apaga hacia los bordes; el instrumento de Claudia no es un teclado, es una
   TIMELINE — así que es una timeline la que ocupa ese sitio, con su clip
   elegido encendido en flúor igual que allí se enciende ⌘+espacio. */
.cierre{position:relative;overflow:hidden;padding-top:0;isolation:isolate}
.cierre__pista{
  position:absolute;top:112px;left:-10%;right:-10%;height:600px;z-index:-1;
  display:flex;flex-direction:column;gap:8px;
  mask-image:radial-gradient(74% 88% at 50% 44%, #000 8%, rgba(0,0,0,.55) 58%, transparent 92%);
  -webkit-mask-image:radial-gradient(74% 88% at 50% 44%, #000 8%, rgba(0,0,0,.55) 58%, transparent 92%);
}
.cierre__pista i{
  display:block;height:96px;border-radius:8px;
  background:
    repeating-linear-gradient(90deg,
      #232323 0 var(--a, 150px),
      transparent var(--a, 150px) calc(var(--a, 150px) + 12px));
  box-shadow:inset 0 1px rgba(255,255,255,.045);
}
/* Las pistas se mantienen dentro de un rango de 1,3x. Desplomándose de 96 a 22
   dejaban de leerse como filas de un mismo instrumento, y el clip encendido no
   pertenecía a ninguna. */
.cierre__pista i{position:relative}
.cierre__pista i::after{
  content:attr(data-r);
  position:absolute;left:12px;top:9px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  color:rgba(255,255,255,.16);
}
.cierre__pista i:nth-child(1){--a:186px;height:96px}
.cierre__pista i:nth-child(2){--a:124px;height:88px;background-color:#1D1D1D;opacity:.9}
.cierre__pista i:nth-child(3){--a:238px;height:82px;opacity:.75}
.cierre__pista i:nth-child(4){--a:96px;height:78px;opacity:.55}
.cierre__pista i:nth-child(5){--a:164px;height:74px;opacity:.4}
/* el clip elegido: el equivalente exacto del ⌘+espacio encendido de raycast */
.cierre__pista::after{
  content:"toma elegida";
  position:absolute;left:50%;top:200px;width:330px;height:82px;   /* exactamente la altura de SU pista */
  transform:translateX(-50%);border-radius:8px;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--color-sobre-acento);
  background:linear-gradient(180deg,rgba(168,255,0,.62),rgba(168,255,0,.42));
  box-shadow:0 0 70px 14px rgba(168,255,0,.16), inset 0 1px rgba(255,255,255,.25);
}
/* y la aguja de reproducción, que es lo que dice «esto es una timeline» */
.cierre__pista::before{
  content:"";position:absolute;left:50%;top:120px;width:2px;height:300px;
  transform:translateX(158px);
  background:linear-gradient(180deg,var(--color-acento),rgba(168,255,0,.1));
}
.cierre__cuerpo{position:relative;padding-top:684px;   /* 700 dejaba una pantalla de negro; 392 encogía la sección un 33% */display:flex;flex-direction:column;align-items:center}
.cierre .lista{margin-top:40px}
.cierre{padding-bottom:var(--seccion-y)}
@media (max-width:760px){
  .cierre__pista{height:280px;top:48px}
  .cierre__cuerpo{padding-top:276px}
}

/* ═══ 12 · PIE ═════════════════════════════════════════════════════════════ */
.pie{position:relative;overflow:hidden;padding-block:224px 96px;border-top:1px solid var(--color-border-soft)}
.pie__pintada{position:absolute;inset:-60% -10% auto;height:70%;z-index:0;filter:blur(50px);opacity:.5;pointer-events:none}
.pie__pintada span{
  position:absolute;top:0;height:100%;width:calc(90px + var(--i) * 40px);
  left:calc(26% + var(--i) * 12%);transform:rotate(38deg);border-radius:999px;
  background:linear-gradient(180deg,rgba(168,255,0,.5),transparent 78%);
}
.pie .contenedor{position:relative;max-width:1064px}
.pie__columnas{display:grid;grid-template-columns:repeat(6,1fr);gap:28px}
.pie__columnas h4{margin-bottom:38px;font-size:var(--texto-sm);font-weight:400;letter-spacing:-.01em}
.pie__columnas a{display:block;margin-bottom:18px;font-size:var(--texto-sm);color:var(--color-fg-300);transition:color var(--t-rapida) var(--curva)}
.pie__columnas a:hover{color:var(--color-fg)}
.pie__boletin{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
  margin-top:112px;padding-top:64px;border-top:1px solid var(--color-border-soft);
}
.pie__boletin b{font-weight:400;font-size:var(--texto-base)}
.pie__boletin p{margin-top:8px;font-size:var(--texto-base);color:var(--color-fg-300);max-width:38ch;line-height:1.55}
.lista--pie{margin-top:0;max-width:none}
.pie__firma{display:flex;justify-content:space-between;gap:16px;margin-top:72px;padding-top:28px;border-top:1px solid var(--color-border-soft)}
@media (max-width:900px){
  .pie__columnas{grid-template-columns:repeat(2,1fr);gap:24px}
  .pie__boletin{grid-template-columns:1fr}
}

/* ═══ LA PANTALLA DE "YA ESTÁS DENTRO" ═════════════════════════════════════
   No es un mensaje de gracias: es la pantalla que hace crecer la lista. El
   número grande y el enlace que sube puestos son el producto de este formulario. */
.dentro{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:30px 26px;border-radius:var(--radius-lg);
  background:rgba(22,22,22,.8);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px rgba(168,255,0,.28), var(--glow-acento);
  animation:subeYAparece .5s var(--curva-entrada) both;
}
.dentro__num{
  font-family:var(--font-titular);font-weight:400;
  font-size:clamp(44px,7vw,74px);line-height:1;letter-spacing:-.03em;
  color:var(--color-acento);
}
.dentro__barra{width:100%;max-width:320px;height:6px;border-radius:999px;background:var(--color-bg-400);overflow:hidden}
.dentro__barra span{display:block;height:100%;background:var(--color-acento);border-radius:999px;animation:llena .9s var(--curva-entrada) both}
@keyframes llena{from{width:0!important}}
.dentro__pie{font-size:var(--texto-sm);color:var(--color-fg-200);text-align:center}
.dentro__enlace{display:flex;gap:8px;width:100%;max-width:420px;margin-top:4px}
.dentro__enlace input:focus-visible{outline:2px solid var(--color-acento);outline-offset:-1px}
.dentro__enlace input{
  flex:1;min-width:0;height:40px;padding-inline:12px;
  border-radius:var(--radius-sm);border:0;
  background:var(--color-bg-100);color:var(--color-fg-200);
  font-family:var(--font-mono);font-size:12px;
  box-shadow:inset 0 0 0 1px var(--color-border);
}

/* ═══ REVELADO AL BAJAR ════════════════════════════════════════════════════
   Lo mismo que hace raycast: la sección sube 20px y aparece al entrar en
   cuadro, una sola vez. Con reduced-motion no se aplica ni la clase. */
.aparece{opacity:0;transform:translateY(22px);transition:opacity .65s var(--curva-entrada), transform .65s var(--curva-entrada)}
.aparece.se-ve{opacity:1;transform:none}
.aparece[data-s="navbar"],.aparece[data-s="hero"]{opacity:1;transform:none}

/* el cambio de panel de la ventana */
.cambia{animation:panelCambia .34s var(--curva-entrada)}
@keyframes panelCambia{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Las vistas reales de la app dentro del mismo marco de ventana. La timeline
   va recreada en DOM (nítida a cualquier tamaño) y el resto son capturas de la
   app corriendo en local: la mezcla que pidió el encargo. */
.ventana{position:relative}
.ventana__foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top left;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-media) var(--curva);
}
.ventana[data-vista="videos"]  .ventana__foto[data-para="videos"],
.ventana[data-vista="banco"]   .ventana__foto[data-para="banco"],
.ventana[data-vista="sistema"] .ventana__foto[data-para="sistema"],
.ventana[data-vista="proceso"] .ventana__foto[data-para="proceso"]{opacity:1;visibility:visible}
.ventana:not([data-vista="timeline"]) .ventana__rail,
.ventana:not([data-vista="timeline"]) .ventana__panel{opacity:0}
.ventana__rail,.ventana__panel{transition:opacity var(--t-rapida) var(--curva)}

/* Raycast no usa un solo ancho: las secciones con pieza visual grande —el
   pantallazo de producto, el corte, el muro y el plano— se van a 1392px y el
   resto se queda en 1204. Medido, no supuesto. */
.producto > .contenedor,
.corte .contenedor,
.videos .contenedor,
.plano__cuerpo{max-width:1392px}

.juez{position:relative;isolation:isolate;overflow:hidden;padding-block:calc(var(--seccion-y) * .44)}   /* medido: la sección homóloga de A son 795px, no la banda completa */
/* Sin la pintada esta franja era la única de la página con el fondo plano: en la
   referencia es de las más moduladas, con el color cruzándola en diagonal. */
.juez::before{
  content:"";position:absolute;inset:-30% -6%;z-index:-1;pointer-events:none;
  background:
    linear-gradient(112deg, transparent 22%, rgba(168,255,0,.5) 30%, transparent 39%),
    linear-gradient(112deg, transparent 46%, rgba(168,255,0,.3) 55%, transparent 64%),
    linear-gradient(112deg, transparent 68%, rgba(168,255,0,.18) 77%, transparent 86%);
  filter:blur(58px);opacity:.5;
  mask-image:radial-gradient(78% 84% at 46% 50%, #000 20%, transparent 88%);
  -webkit-mask-image:radial-gradient(78% 84% at 46% 50%, #000 20%, transparent 88%);
}
.juez > *{position:relative}
.juez > .titulo-seccion{margin-top:34px}
.juez__intro{margin-top:18px;display:flex;justify-content:center}
.juez__intro p{
  max-width:46ch;text-align:center;
  /* La lente de calidad pidió apagarlo para que la jerarquía descienda. NO se
     aplica: en la referencia este párrafo va a 13,2 de contraste y apagarlo
     encoge la sección un 13%. Gana paridad. */
  font-size:var(--texto-base);color:#D8D8D8;line-height:1.6;
}
.juez__cierre{margin-top:20px;text-align:center;max-width:36ch;margin-inline:auto}

/* ═══ MÓVIL · lo que la tira de 390px enseñó ═══════════════════════════════
   Va al final a propósito: son correcciones sobre reglas que ya existen, y en
   una cascada plana lo último gana. Puestas antes, las pisaría el bloque de
   escritorio de cada sección. */
@media (max-width:760px){
  /* La ventana de la app no cabe en 390 y se salía por la derecha. En vez de
     recortarla —que es enseñar media interfaz— se deja rodar en horizontal
     dentro de su marco, que es lo que hace un editor de verdad. */
  .escritorio{padding-bottom:26px}
  .escritorio__barra{overflow-x:auto;scrollbar-width:none}
  .escritorio__barra::-webkit-scrollbar{display:none}
  .ventana{margin:26px 12px 0;min-height:0}
  .ventana__panel{padding:16px 14px 18px;overflow-x:auto}
  .panel__cabeza h3{font-size:var(--texto-base);word-break:break-word}
  .fases{gap:6px}
  .fases li{padding:6px 10px 6px 6px}
  .pista__linea{min-width:300px}
  .dock{grid-template-columns:repeat(5,1fr);width:100%;max-width:320px}
  .dock button{width:auto}

  /* La ventana de la transcripción, lo mismo */
  .marco__cuerpo{padding:14px 12px 16px}
  .linea{flex-wrap:wrap;gap:6px;padding:11px 10px}
  .linea.is-elegida{white-space:normal}
  .tic{margin-left:0}

  /* El plano en una columna con celdas de 604px dejaba media pantalla vacía */
  .plano__celda{min-height:0;padding:30px 22px}
  .plano__celda--fig{min-height:220px}
  .iso{max-width:280px}

  /* El cierre reservaba 752px para una timeline que en móvil mide 280 */
  .cierre__pista{height:280px;top:76px}
  .cierre__pista i{height:48px}
  .cierre__pista::after{width:150px;height:48px;top:120px}
  .cierre__cuerpo{padding-top:330px}

  .pie__columnas{grid-template-columns:repeat(2,1fr)}
  .muro__cita{font-size:var(--texto-xl);padding-left:28px}
  .banco__cabeza{gap:20px}
  .pestanas{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .pestanas::-webkit-scrollbar{display:none}
}

/* El reproductor del muro: la sección que demuestra que el producto funciona
   tenía que enseñar un vídeo, y no enseñaba ninguno. El de Claudia va limpio
   —es su propia promo— y el de cliente va difuminado con su rótulo diciéndolo:
   un vídeo borroso sin explicación se lee como un fallo de carga. */
.muro__detalle{grid-template-columns:212px minmax(0,1fr)!important;gap:40px!important;align-items:start;margin-top:64px!important;padding-top:56px!important}
.muro__reproductor{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo), var(--sombra-card);
}
.muro__video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:var(--color-bg-100)}
.muro__velo{
  position:absolute;left:10px;right:10px;bottom:10px;
  padding:6px 9px;border-radius:6px;text-align:center;
  background:rgba(10,10,10,.82);backdrop-filter:blur(8px);
  font-size:10px;color:var(--color-fg-300);
}
.muro__velo[data-propio="true"]{color:var(--color-acento);background:rgba(10,10,10,.78)}
.muro__ficha-datos{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px}
@media (max-width:1000px){
  .muro__detalle{grid-template-columns:1fr!important}
  .muro__reproductor{max-width:236px}
  .muro__ficha-datos{grid-template-columns:1fr;gap:28px}
}

/* La flecha de esquina que en la referencia marca cada celda de figura */
.plano__esquina{position:absolute;top:16px;right:18px;color:var(--color-fg-400)}

/* Estados que faltaban: el revisor cazó cinco trípticos donde reposo, hover y
   foco eran el mismo fichero byte a byte. Un control sin cambio visible al
   pasar por encima no se sabe que se puede tocar; sin anillo de foco no se
   sabe dónde estás al tabular. Esto es accesibilidad, no gusto. */
.pestanas button{position:relative}
.pestanas button:focus-visible{outline:2px solid var(--color-acento);outline-offset:-2px}
.pie__columnas a{border-radius:3px}
.pie__columnas a:focus-visible{outline:2px solid var(--color-acento);outline-offset:3px}
.plano .flecha:focus-visible,.corte__mas .flecha:focus-visible,.banco__pie .flecha:focus-visible{
  outline:2px solid var(--color-acento);outline-offset:4px;border-radius:4px;
}
.galeria__pieza{position:relative}
.galeria__pieza:focus-within{box-shadow:inset 0 0 0 1px var(--color-acento), var(--glow-acento)}
.muro__ficha{border-radius:var(--radius-lg)}

/* ═══ EL PANTALLAZO, VIVO ═══════════════════════════════════════════════════
   El hallazgo fue exacto: la referencia tiene cuatro animaciones en bucle
   infinito en su pantallazo y la mía tenía una de una pasada, así que la
   ventana se leía como una CAPTURA y no como una demo. Aquí la timeline corre
   sola: la aguja barre, los clips se encienden a su paso, la fase respira y el
   contador de la cola cambia. Es lo que hace que se vea que la máquina está
   trabajando sin que nadie toque nada. */

/* 1 · la aguja barre la timeline, ida y vuelta */
.pista__aguja{
  left:0;
  animation:agujaBarre 2s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes agujaBarre{ from{left:2%} to{left:96%} }

/* 2 · el clip elegido late al ritmo de la aguja */
.clip.is-elegido{ animation:clipLate 1.1s ease-in-out infinite alternate }
@keyframes clipLate{
  0%,22%{box-shadow:inset 0 0 0 1px var(--color-acento-vivo), 0 0 12px -4px rgba(168,255,0,.45)}
  30%,46%{box-shadow:inset 0 0 0 1px var(--color-acento-vivo), 0 0 34px -2px rgba(168,255,0,.95)}
  60%,100%{box-shadow:inset 0 0 0 1px var(--color-acento-vivo), 0 0 12px -4px rgba(168,255,0,.45)}
}

/* 3 · los clips de sonido y texto se encienden por turnos, como al reproducir */
.clip--sfx{animation:enciende 1.1s ease-in-out infinite}
.clip--sfx:nth-of-type(2){animation-delay:-.72s}
.clip--sfx:nth-of-type(3){animation-delay:-.36s}
.clip--txt{animation:enciende 1.1s ease-in-out infinite}
.clip--txt:nth-of-type(2){animation-delay:-.82s}
.clip--txt:nth-of-type(3){animation-delay:-.55s}
.clip--txt:nth-of-type(4){animation-delay:-.27s}
@keyframes enciende{
  0%,86%{filter:none}
  90%{filter:brightness(2.1)}
  96%,100%{filter:none}
}

/* 4 · la fase viva respira: la máquina está en marcha */
.fases .is-viva{animation:fasePulsa 1.1s ease-in-out infinite}
@keyframes fasePulsa{
  0%,100%{box-shadow:0 0 0 0 rgba(168,255,0,0)}
  50%{box-shadow:0 0 0 4px rgba(168,255,0,.14)}
}

/* 5 · el cursor de la transcripción, que dice que se está escribiendo */
.marco__barra b::after{
  content:"";display:inline-block;width:7px;height:13px;margin-left:7px;
  vertical-align:-2px;background:var(--color-acento);
  animation:parpadea 1.1s steps(1) infinite;
}
@keyframes parpadea{0%,50%{opacity:1}51%,100%{opacity:0}}

/* 6 · la pintada del hero deja de estar quieta: deriva muy despacio, como el
   fondo de la referencia, que tiene dos bucles de 3 s */
/* NO sobre el contenedor: la máscara va en el mismo elemento y viaja con él, de
   modo que trasladar un degradado suave bajo su propia máscara deja el cuadro
   igual (delta medido 0,3-1,0 contra 4,6-6,7 de la referencia). Se animan los
   trazos, desfasados, que es lo que hace que se muevan UNOS RESPECTO A OTROS. */
/* Solo DOS trazos derivan. Con los seis, el hero llegaba a 19 animaciones vivas
   contra 4 de la referencia: el movimiento no se percibía mejor, solo pesaba
   más — y una `both` de entrada sigue contando como animación viva. */
.hero__pintada span{animation:brochazo 1s var(--curva-entrada) both}
.hero__pintada span:nth-child(2),
.hero__pintada span:nth-child(5){
  animation:
    brochazo 1s var(--curva-entrada) both,
    deriva 3s ease-in-out calc(1s + var(--i) * 200ms) infinite alternate;
}
@keyframes deriva{
  from{transform:rotate(36deg) translate3d(-42px,30px,0) scaleY(.82)}
  to{transform:rotate(36deg) translate3d(48px,-36px,0) scaleY(1.24)}
}
/* y el canto: en la referencia cada trazo tiene un borde recto, no un
   degradado gaussiano. Se le añade un filo al brochazo principal. */
.hero__pintada span:nth-child(odd)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(92deg, transparent 42%, rgba(200,255,110,.55) 47%, transparent 53%);
  filter:blur(1.5px);
}

@media (prefers-reduced-motion:reduce){
  .pista__aguja,.clip.is-elegido,.clip--sfx,.clip--txt,.fases .is-viva,
  .marco__barra b::after,.hero__pintada{animation:none!important}
}

/* ═══ CAMPO DE COLOR POR SECCIÓN ═══════════════════════════════════════════
   Medido: la fracción de píxeles con saturación >0,15 en la referencia va de
   0,049 a 0,138 sección a sección; aquí caía a 0,001-0,009 en cuanto pasabas el
   hero. La referencia pinta TODA la página; Claudia se gastaba el color arriba
   y dejaba el resto en negro plano. Esto lo reparte, muy tenue, sin robarle
   protagonismo a la acción. */
.producto::before,.banco::before,.corte::before,.juez::before,.videos::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 46% at var(--cx,28%) var(--cy,34%), rgba(168,255,0,.055), transparent 68%);
}
.banco::before{--cx:78%;--cy:26%}
.corte::before{--cx:70%;--cy:44%}
.juez::before{--cx:24%;--cy:52%}
.videos::before{--cx:80%;--cy:60%}

/* El resplandor del producto: en la referencia baña TODO el escritorio */
.producto__resplandor{
  inset:-8% 0 0;
  background:
    radial-gradient(44% 40% at 30% 54%, rgba(168,255,0,.62), transparent 70%),
    radial-gradient(40% 36% at 70% 36%, rgba(168,255,0,.4), transparent 72%),
    radial-gradient(86% 62% at 50% 48%, rgba(168,255,0,.2), transparent 78%);
  filter:blur(72px);
}

/* ═══ HUECOS Y SUPERFICIES ═════════════════════════════════════════════════
   Medido: la referencia usa 40-56px de hueco de rejilla donde yo tenía 22, y
   sus tarjetas tienen relleno propio; las mías se sostenían solo con un borde
   el doble de fuerte, así que no se leían como superficie. */
.banco__carro{gap:40px}
.galeria{gap:34px}
.tarjetas-par{gap:34px}
.tarjeta--ancha{margin-top:56px}
.tarjeta{background:linear-gradient(180deg,#141414,#101010)}
.tarjeta{box-shadow:inset 0 0 0 1px var(--color-border-soft), var(--brillo), 0 18px 44px -30px rgba(0,0,0,.9)}

/* La galería iba tan desenfocada que las piezas eran ilegibles: se difumina lo
   justo para no reconocer una cara, no para no ver el efecto. */
.galeria__pieza video,.galeria__pieza img{filter:contrast(1.12) saturate(1.08)}

/* El plano: la trama era una jaula de líneas continuas seis veces más gruesa
   de paso y cuatro veces más contrastada que la de la referencia. */
.plano__rejilla{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size:26px 26px;
}
/* y su titular partía en cuatro líneas con dos huérfanas de una palabra */
.plano__celda--titulo{grid-column:span 2}
.plano__celda--grande{grid-column:span 2}

/* El pie anidaba un input con borde dentro de un envoltorio también con borde */
.lista--pie{max-width:none;gap:10px}
.lista--pie .lista__campo{box-shadow:none;background:transparent;padding:0;gap:10px;backdrop-filter:none}
.lista--pie .lista__campo input,.lista--pie .lista__pais{box-shadow:inset 0 0 0 1px var(--color-border);background-color:var(--color-bg-200)}
/* Y su hover, AQUÍ: la regla que lo intentaba en base.css tiene menos
   especificidad que esta, así que el campo del pie se quedaba sin gesto por más
   veces que se «arreglara» en el otro fichero. */
.lista--pie .lista__campo input:hover{background:var(--color-bg-300)}

/* El corte: la ventana llenaba el marco y desaparecía el escritorio que la rodea */
.escenario__marco{padding:52px 56px}

/* Los vídeos: el detalle iba a sangre y dejaba la cita a 50px del borde */
.muro__detalle{padding-inline:clamp(0px, 4vw, 88px)}

/* ═══ EL RECORRIDO ══════════════════════════════════════════════════════════
   La página deja de ser un catálogo de secciones y pasa a ser un camino de 7
   pasos. Lo que manda aquí es que cada pantalla EMPUJE a la siguiente: el aire
   de 224px que copiaba a la referencia dejaba 300-450px de negro entre bloques
   y el scroll se sentía como saltar huecos, no como avanzar. */
.paso{padding-block:112px}
.paso + .paso{padding-top:96px}
.paso__cabeza{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.paso__num{
  font-size:11px;letter-spacing:.18em;color:var(--color-acento);
  padding:6px 12px;border-radius:999px;
  background:var(--color-acento-wash);box-shadow:inset 0 0 0 1px rgba(168,255,0,.26);
}
/* GRANDE de verdad: el titular del paso es el segundo tamaño de la página,
   solo por debajo del H1 del hero. Antes competía con el cuerpo a 20px. */
.paso__titulo{
  font-family:var(--font-titular);font-weight:400;
  font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;max-width:16ch;
}
.paso__bajada{
  max-width:58ch;font-size:var(--texto-lg);color:#D8D8D8;line-height:1.55;text-wrap:balance;
}
.paso__bajada b{font-weight:400;color:var(--color-acento)}
.paso__cta{display:flex;justify-content:center;margin-top:56px}

/* ── el nodo del hero: Claudia entrega, los modelos ejecutan ── */
.nodo{
  display:flex;align-items:center;justify-content:center;gap:0;
  margin-bottom:44px;flex-wrap:wrap;
}
.nodo__pieza{display:flex;flex-direction:column;align-items:center;gap:10px}
.nodo__pieza b{font-size:10px;letter-spacing:.14em;font-weight:400;color:var(--color-fg-200)}
/* Los dos modelos, UNO AL LADO DEL OTRO y etiquetados. Orbitando sobre una
   elipse de 18px se solapaban en 4 de cada 6 fotogramas: en reposo se veía un
   solo logo y el pie de 11px era lo único que decía que son dos. Ahora se
   turnan por ESCALA y luz, no por posición, que es lo que se lee quieto. */
.nodo__modelos{display:flex;align-items:center;gap:20px}
.nodo__claudia{
  display:grid;place-items:center;width:88px;height:88px;flex:none;
  border-radius:16px;background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo), 0 0 44px -10px rgba(168,255,0,.4);
}
/* el vínculo: una línea con un pulso que VIAJA de ella a los modelos, que es
   literalmente lo que cuenta la sección */
.nodo__vinculo{position:relative;width:104px;height:1px;margin:0 16px 22px;flex:none;
  background:linear-gradient(90deg,rgba(168,255,0,.15),rgba(168,255,0,.75))}
.nodo__vinculo i{
  position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:999px;
  background:var(--color-acento);box-shadow:0 0 10px var(--color-acento);
  animation:pulsoViaja 3s var(--curva) infinite;
}
@keyframes pulsoViaja{0%{left:0;opacity:0}12%{opacity:1}86%{opacity:1}100%{left:100px;opacity:0}}

/* la órbita: los dos logos girando uno alrededor del otro e intercambiándose */

.nodo__marca{
  display:grid;place-items:center;width:54px;height:54px;
  border-radius:15px;
  background:var(--color-bg-300);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  animation:releva 3s ease-in-out infinite;
}
/* Y cada marca su color: las dos en el mismo flúor, misma caja y mismo tamaño
   eran indistinguibles. */
.nodo__marca--a{color:var(--color-acento)}
.nodo__marca--b{color:#FFFFFF;animation-delay:-1.5s}

/* El relevo: mientras uno está al frente el otro espera, y se cambian. Es lo
   que cuenta «ella le pasa el trabajo a estos dos» sin que se pisen. */
@keyframes releva{
  0%,100%{transform:translateY(0) scale(1);box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo)}
  50%    {transform:translateY(-9px) scale(1.09);box-shadow:inset 0 0 0 1px rgba(168,255,0,.4), 0 14px 30px -14px rgba(0,0,0,.95), 0 0 30px -8px rgba(168,255,0,.45)}
}


/* ── paso 1 · la transcripción ── */
.transcripcion__lista{list-style:none;margin:0;padding:6px}
.transcripcion__lista li{
  display:grid;grid-template-columns:88px minmax(0,1fr) 130px;gap:18px;align-items:center;
  padding:11px 16px;border-radius:var(--radius-sm);font-size:var(--texto-base);
}
.transcripcion__lista li:nth-child(odd){background:rgba(255,255,255,.018)}
.transcripcion__lista em{font-family:var(--font-mono);font-size:11px;color:var(--color-fg-300);font-style:normal}
.transcripcion__lista span{color:var(--color-fg-200)}
.transcripcion__lista i{color:var(--color-fg-300);text-align:right;font-size:11px;font-style:normal}

/* ── paso 3 · el río de piezas ──────────────────────────────────────────────
   Tres filas que corren en direcciones alternas. No llevan rótulo ni categoría
   a propósito: la idea no es que leas qué hace cada pieza, es que de un solo
   scroll te pasen delante muchísimas y entiendas el tamaño del banco. */
.rio{display:flex;flex-direction:column;gap:16px;margin-top:64px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.rio__fila{display:flex;gap:16px;width:max-content;will-change:transform}
.rio__fila[data-fila="0"]{animation:rioIzq 64s linear infinite}
.rio__fila[data-fila="1"]{animation:rioDer 78s linear infinite}
.rio__fila[data-fila="2"]{animation:rioIzq 92s linear infinite}
@keyframes rioIzq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rioDer{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.rio img{
  /* RETRATO. En 210x118 el `cover` decapitaba las piezas —checklists a media
     fila, títulos partidos— y pasaban 7 por fila. En retrato se ven enteras y
     pasan 11: la sección existe para que se vea CUÁNTAS hay, y una pila de
     recortes ilegibles no dice eso. */
  width:132px;height:186px;object-fit:cover;object-position:top;flex:none;
  border-radius:10px;background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border);
}

/* ── paso 0 · las fichas del estilo ── */
.estilo{display:flex;flex-direction:column;gap:22px;margin-top:56px}
.estilo__fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ficha-estilo{
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  padding:26px 28px 24px;border-radius:var(--radius-lg);
  background:var(--color-bg-100);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
}
.ficha-estilo > span.mono{font-size:10px;letter-spacing:.16em;color:var(--color-acento)}
.ficha-estilo i{font-style:normal;font-size:var(--texto-sm);color:var(--color-fg-200);line-height:1.5}
.ficha-estilo__muestra{font-family:var(--font-titular);font-size:46px;font-weight:400;line-height:1;letter-spacing:-.03em}
.ficha-estilo__tintas{display:flex;gap:8px}
.ficha-estilo__tintas i{width:34px;height:34px;border-radius:9px}
.ficha-estilo__tintas i:nth-child(1){background:var(--color-acento)}
.ficha-estilo__tintas i:nth-child(2){background:#FFFFFF}
.ficha-estilo__tintas i:nth-child(3){background:#2C2C2C}
.ficha-estilo__tintas i:nth-child(4){background:#0A0A0A;box-shadow:inset 0 0 0 1px var(--color-border)}
.ficha-estilo__efectos{display:flex;gap:8px;align-items:flex-end;height:34px}
.ficha-estilo__efectos i{width:26px;border-radius:5px;background:var(--color-bg-400)}
.ficha-estilo__efectos i:nth-child(1){height:34px;background:var(--color-acento)}
.ficha-estilo__efectos i:nth-child(2){height:22px}
.ficha-estilo__efectos i:nth-child(3){height:14px}

/* ── el titular del pantallazo, en grande ── */
.titulo-seccion--grande b{font-size:clamp(30px,4.2vw,54px);line-height:1.05;letter-spacing:-.02em;display:block}
.titulo-seccion--grande span{font-size:var(--texto-lg);display:block;margin-top:14px}

/* ── SUPER EFECTOS SIN VELO: son NUESTROS, no metraje de cliente ────────── */
.galeria__pieza video,.galeria__pieza img{filter:none}
.galeria__pieza figure::after{display:none}
.galeria__pieza .aviso{display:none}

/* ── menos aire entre pantallas: que el scroll empuje ── */
.seccion{padding-block:112px}
.producto{padding-top:96px}
@media (max-width:900px){
  .estilo__fichas{grid-template-columns:1fr}
  .paso{padding-block:72px}
  .nodo__vinculo{width:56px}
}

/* El par del paso 0: captions a ancho completo, no media rejilla vacía. */
.estilo__par{display:grid;grid-template-columns:1fr;gap:22px}
.estilo__par .tarjeta__demo{min-height:300px}

/* El hilo entre pasos: siete CTA seguidos son siete puertas de salida. Se dejan
   tres llamadas (paso 0, 3 y 6) y el resto empuja al paso siguiente. */
.paso__sigue{display:flex;justify-content:center;margin-top:56px}
.paso__sigue .flecha{font-size:var(--texto-base)}

/* ═══ ESTADOS APAGADOS DE LAS DEMOS · declarados ════════════════════════════
   `.karaoke span` en reposo y `.captions p` sin `.es-viva` salen por debajo de
   4,5:1 a propósito: NO son interfaz, son la ilustración de una palabra ANTES
   de encenderse y de un caption que todavía no manda. Subirlos rompería lo que
   la demo enseña. Son las únicas dos excepciones de contraste de la página y
   quedan aquí escritas para que nadie las "arregle" apagando la demostración. */

/* ═══ EL PIE DE CADA PASO ═══════════════════════════════════════════════════
   Santiago, 11-09-2026: la llamada va SIEMPRE, y la flecha tiene que llevar al
   paso que viene DE VERDAD (estaba saltando del corte al juez y se comía dos
   pasos por el camino). Las dos cosas caben en la misma fila, así que esto no
   añade ni un píxel de alto respecto al pie de una sola pieza. */
.paso__pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 28px;margin-top:56px;
}
.paso__pie .flecha{font-size:var(--texto-base)}

/* La ficha del clip del que sale cada línea de la transcripción */
.linea i.mono{margin-left:auto;flex:none;color:var(--color-fg-200);font-style:normal}
@media (max-width:760px){ .linea i.mono{margin-left:0} }

/* ═══ PASO 2 · EL CORTE, COMO UN VÍDEO ══════════════════════════════════════
   El paso 2 enseña un RESULTADO, no un procedimiento: a la izquierda un corte
   real reproduciéndose, a la derecha las dos pistas — lo que grabaste y lo que
   te devuelve — con el sobrante cayéndose y el corte encajando solo. Aquí no
   se nombra ninguna herramienta a propósito: eso es justo lo que se compra. */
.montaje{
  display:grid;grid-template-columns:minmax(200px,278px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;margin-top:64px;
}
.reproductor{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius-xl);background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border),
             0 30px 80px -34px rgba(0,0,0,.95),
             0 18px 60px -30px rgba(168,255,0,.32);
}
.reproductor__video{display:block;width:100%;height:100%;object-fit:cover}
.reproductor__estado{
  position:absolute;left:12px;bottom:12px;z-index:3;
  padding:6px 11px;border-radius:999px;
  background:var(--color-acento);color:var(--color-sobre-acento);
  font-size:10px;letter-spacing:.07em;
}
.montaje__cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:11px}
.montaje__cabeza b{font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--color-fg)}
.montaje__cabeza span{color:var(--color-fg-200)}
.montaje__tira{
  position:relative;display:flex;gap:4px;height:54px;padding:6px;
  border-radius:var(--radius);background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.montaje__tira i{flex:var(--w) 1 0;border-radius:4px;position:relative;overflow:hidden}

.montaje__tira--bruto i{background:var(--color-bg-300);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.montaje__tira--bruto i[data-t="buena"]{background:rgba(168,255,0,.20);box-shadow:inset 0 0 0 1px rgba(168,255,0,.42)}
.montaje__tira--bruto i[data-t="silencio"]{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.montaje__tira--bruto i[data-t="mala"]::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.12) 5px 6px);
}
.montaje__tira--bruto i[data-t="mala"],
.montaje__tira--bruto i[data-t="silencio"]{animation:seCae 7s var(--curva) infinite}
@keyframes seCae{
  0%,26%{opacity:1;transform:none}
  44%,74%{opacity:.14;transform:scaleY(.22)}
  90%,100%{opacity:1;transform:none}
}
.montaje__tira--corte i{
  background:linear-gradient(180deg,rgba(168,255,0,.92),rgba(168,255,0,.5));
  transform-origin:left center;
  animation:encaja 7s var(--curva) infinite calc(var(--i) * .08s);
}
@keyframes encaja{
  0%,30%{transform:scaleX(0);opacity:0}
  46%,94%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(0);opacity:0}
}
.montaje__cabezal{
  position:absolute;top:5px;bottom:5px;width:2px;border-radius:2px;left:6px;
  background:#FFFFFF;box-shadow:0 0 14px rgba(255,255,255,.85);
  animation:cabezal 7s linear infinite;
}
@keyframes cabezal{
  0%,52%{left:6px;opacity:0}
  56%{opacity:1}
  95%{left:calc(100% - 8px);opacity:1}
  100%{left:calc(100% - 8px);opacity:0}
}
.montaje__baja{display:flex;justify-content:center;gap:9px;padding:16px 0}
.montaje__baja i{width:5px;height:5px;border-radius:999px;background:var(--color-fg-400);animation:baja 1.7s ease-in-out infinite}
.montaje__baja i:nth-child(2){animation-delay:.16s}
.montaje__baja i:nth-child(3){animation-delay:.32s}
@keyframes baja{0%,100%{opacity:.22;transform:translateY(-3px)}50%{opacity:1;transform:translateY(3px)}}

.montaje__marcas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0}
.montaje__marcas li{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:999px;
  font-size:var(--texto-sm);color:var(--color-fg);
  background:var(--color-acento-wash);box-shadow:inset 0 0 0 1px rgba(168,255,0,.26);
}
.montaje__marcas li::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--color-acento)}
.montaje__nota{margin-top:20px;font-size:var(--texto-sm);color:var(--color-fg-200);max-width:58ch;line-height:1.55}

@media (max-width:900px){
  .montaje{grid-template-columns:1fr;gap:36px}
  .montaje__pantalla{max-width:238px;margin-inline:auto}
}

/* El enlace legal en la firma del pie */
.pie__legal{display:inline-flex;align-items:center;gap:18px}
.pie__legal a{font-family:var(--font-mono);font-size:var(--texto-xs);letter-spacing:.04em;color:var(--color-fg-200)}
.pie__legal a:hover{color:var(--color-fg)}

/* La página entera se navega por anclas ahora (cada paso lleva al siguiente),
   y la barra es fija: sin esto, cada salto deja el titular del paso DEBAJO de
   la barra y parece que el enlace te ha dejado a mitad de sección. */
.seccion[id],.paso[id],#lista{scroll-margin-top:112px}

/* La pintada del escenario sangra un 4% por la derecha a propósito, pero en
   móvil ese 4% es el único scroll horizontal de toda la página. */
@media (max-width:900px){ .corte__escenario{overflow:clip} }

/* En un móvil de 390 el logo y «Entra a la lista de espera» no caben a su
   tamaño de escritorio: el botón se montaba encima de la marca. La llamada NO
   se acorta (siempre dice lo mismo) — lo que se ajusta es su caja. */
@media (max-width:560px){
  .navbar__marca{flex:none}
  .navbar__marca span{font-size:var(--texto-sm)}
  .navbar .boton{flex:none;height:36px;padding-inline:13px;font-size:13px;white-space:nowrap}
}

/* Los rótulos del nodo (Claudia · Claude · Codex) caen sobre el brochazo del
   hero, y ahí el gris de etiqueta se queda en 3,8:1 medido EN PÍXEL. */
.nodo__pieza b.mono{color:#E4E4E4}

/* ═══ HERO 2.0 · QUÉ ES, QUÉ GANAS Y CÓMO SE VE ═════════════════════════════
   Santiago, Loom 3 (11-09-2026): «ten en cuenta que la gente no sabe qué cojones
   es Claudia; cuando se meta, que esté muy bien especificado qué es y por qué es
   mejor». Y con eso, tres piezas que antes no estaban: el MOCKUP del ordenador
   con la app dentro, los TRES BENEFICIOS y el valor pegado a la llamada.
   La referencia que puso encima de la mesa es akka.app. */
.hero{
  padding-top:168px;padding-bottom:64px;
  align-items:stretch;justify-content:flex-start;
  min-height:0;
}
.hero__reja{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,80px);align-items:center;width:100%;
}
.hero__texto{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero__titular{font-size:clamp(38px,4.8vw,62px);text-align:left;max-width:12ch}
.hero__bajada{margin-top:22px;max-width:46ch;font-size:var(--texto-base);line-height:1.6}
.hero__bajada b{font-weight:400;color:var(--color-acento)}

/* Los tres beneficios. El check va en flúor y el texto en blanco: es la línea
   que decide si alguien se apunta, no una lista de características. */
.ventajas{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ventajas li{
  position:relative;padding-left:30px;
  font-size:var(--texto-base);line-height:1.5;color:var(--color-fg);
  max-width:46ch;
}
.ventajas li::before{
  content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:999px;
  background:var(--color-acento-wash);box-shadow:inset 0 0 0 1px rgba(168,255,0,.4);
}
.ventajas li::after{
  content:"";position:absolute;left:5.5px;top:8.5px;width:8px;height:4px;
  border-left:1.6px solid var(--color-acento);border-bottom:1.6px solid var(--color-acento);
  transform:rotate(-45deg);
}
.hero .lista{margin-top:34px;max-width:520px}
.hero__valor{
  margin-top:14px;max-width:48ch;
  font-size:var(--texto-sm);line-height:1.55;color:var(--color-fg-200);
}
.hero__valor b{font-weight:400;color:var(--color-fg)}

/* El nodo pasa de cartel a firma: arriba del titular, en una línea. */
.hero .nodo{margin-bottom:26px;justify-content:flex-start;gap:0}
.hero .nodo__pieza{flex-direction:row;align-items:center;gap:8px}
.hero .nodo__vinculo{width:46px;margin:0 12px}
.hero .nodo__modelos{gap:14px}
.hero .nodo__claudia{width:34px;height:34px;border-radius:9px}
.hero .nodo__marca{width:28px;height:28px;border-radius:8px}

/* El mockup. Un portátil de verdad: marco, pantalla y peana — lo que pidió
   («un mockup con ordenador»). La imagen es una captura REAL de la app. */
.hero__mockup{position:relative;justify-self:center;width:100%;max-width:620px}
.portatil{position:relative;filter:drop-shadow(0 40px 80px rgba(0,0,0,.85))}
.portatil__pantalla{
  border-radius:14px;overflow:hidden;
  background:var(--color-bg-200);
  padding:10px 10px 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.9),
             0 24px 70px -26px rgba(168,255,0,.3);
}
.portatil__pantalla img{display:block;width:100%;height:auto;border-radius:8px 8px 0 0}
.portatil__pie{
  height:14px;margin:0 -7%;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#242424,#111);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -10px rgba(0,0,0,.9);
}
.portatil__pie::after{
  content:"";display:block;width:76px;height:4px;margin:0 auto;border-radius:0 0 6px 6px;
  background:rgba(255,255,255,.13);
}
/* Las dos fichas que flotan sobre el mockup: lo que la máquina acaba de hacer. */
.flota{
  position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;
  padding:10px 14px;border-radius:12px;
  background:rgba(18,18,18,.92);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--color-border), 0 16px 40px -16px rgba(0,0,0,.9);
  animation:flotar 5.5s ease-in-out infinite;
}
.flota b{font-weight:400;font-size:var(--texto-sm);color:var(--color-fg)}
.flota i{font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.05em;color:var(--color-acento)}
.flota--a{left:-26px;top:16%}
.flota--b{right:-18px;bottom:14%;animation-delay:-2.6s}
@keyframes flotar{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}

@media (max-width:1080px){
  .hero{padding-top:132px}
  .hero__reja{grid-template-columns:1fr;gap:48px}
  .hero__mockup{order:2;max-width:560px;margin-inline:auto}
  .flota--a{left:-10px}
  .flota--b{right:-6px}
}
@media (max-width:560px){
  .hero{padding-top:116px}
  .flota{display:none}
  .hero__titular{max-width:none}
}


/* ═══ EL CIERRE, SIN EL TRONCHO ═════════════════════════════════════════════
   Santiago, Loom 1 2:14: «esto no lo entiendo, es todo este troncho aquí».
   Eran 684px de negro con un carril decorativo dentro para justificarlos. Lo
   que cierra una landing es la llamada, no un silencio de pantalla y media. */
.cierre__cuerpo{padding-top:0}
.cierre{padding-block:120px 128px}
.cierre__aviso{
  margin-top:16px;max-width:52ch;text-align:center;
  font-size:var(--texto-sm);line-height:1.55;color:var(--color-fg-200);
}
@media (max-width:760px){ .cierre__cuerpo{padding-top:0} }

/* El pie se queda en una línea: nombre, legal y nada más. Las seis columnas de
   enlaces y el formulario repetido se fueron (Loom 1, 2:33 y 2:39). */
.pie{padding-block:96px 72px}
.pie__firma{margin-top:0;padding-top:0;border-top:0;align-items:center}
.pie__legal{font-family:var(--font-mono);font-size:var(--texto-xs);letter-spacing:.04em;color:var(--color-fg-200)}
.pie__legal:hover{color:var(--color-fg)}

/* El rail de la ventana ya no navega: es parte de la foto y se enciende solo
   para decir qué estás viendo (Loom 1, 0:32 — «cada vez que pinchas aquí se te
   va abajo»). Los botones que mandan son los del dock, y son los únicos. */
.rail__item{cursor:default}

/* ═══ SCROLL SUAVE ══════════════════════════════════════════════════════════
   Loom 1, 0:00: «cada vez que clicas en un sitio te carga directamente ahí;
   que se vea que va desplazando, como un ancla de WordPress, para que no
   pierdas dónde estás». */
/* NO se pone `scroll-behavior:smooth` en <html>: en Chrome eso rompe la
   restauración de scroll del botón Atrás (el navegador coloca la posición y la
   animación se la come). El viaje suave se hace en app.js, que además guarda
   dónde estabas — que es la otra mitad de lo que falló. */

/* ═══ QUIÉNES SOMOS ═════════════════════════════════════════════════════════
   Loom 2, 0:22: «podríamos meter una parte de quiénes somos, contar un poco la
   historia, tipo como en el libro de Isra Bravo». Su estilo es una carta, no un
   «About us»: columna estrecha, texto plano, sin tarjetas, sin fotos de equipo
   y sin una sola palabra de folleto. Todo el diseño está en el ritmo. */
.historia{padding-block:112px}
.historia__caja{max-width:none}
.historia__eco{
  display:block;text-align:center;margin-bottom:40px;
  font-size:11px;letter-spacing:.2em;color:var(--color-acento);
}
.historia__texto{
  max-width:62ch;margin-inline:auto;
  display:flex;flex-direction:column;gap:22px;
}
.historia__texto p{font-size:var(--texto-lg);line-height:1.62;color:var(--color-fg-200)}
.historia__texto b{font-weight:400;color:var(--color-fg)}
.historia__firma{
  margin-top:10px;
  font-family:var(--font-mono);font-size:var(--texto-sm);
  letter-spacing:.04em;color:var(--color-fg)!important;
}

/* ═══ LA VENTANA, MÁS GRANDE Y SIN AIRE MUERTO ══════════════════════════════
   Loom 1, 1:05: «aquí hay como un espacio raro». Eran 78px por encima de la
   ventana y 130 por debajo, con la ventana ocupando solo el 72% del mat: la
   foto del producto se leía pequeña dentro de una caja enorme y medio vacía. */
.ventana{width:88%;margin-top:42px}
.escritorio{padding-bottom:32px}
.dock{margin-top:20px}
.producto__pie{margin-top:44px}
@media (max-width:900px){ .ventana{width:auto} }

/* ═══ SUPER EFECTOS · uno grande y nítido, los demás por su nombre ══════════ */
.galeria{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  max-width:1064px;margin:56px auto 0;padding-inline:24px;
}
.efecto__muestra{
  position:relative;aspect-ratio:9/16;border-radius:var(--radius-xl);overflow:hidden;
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border),
             0 30px 80px -34px rgba(0,0,0,.95),
             0 18px 60px -30px rgba(168,255,0,.3);
}
.efecto__muestra video{display:block;width:100%;height:100%;object-fit:cover}
.efecto__sello{
  position:absolute;left:12px;bottom:12px;z-index:2;
  padding:6px 11px;border-radius:999px;
  background:var(--color-acento);color:var(--color-sobre-acento);
  font-size:10px;letter-spacing:.07em;
}
.efecto__skills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.efecto__skills li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:14px 16px;border-radius:var(--radius);
  border-top:1px solid var(--color-border-soft);
}
.efecto__skills li:first-child{border-top:0}
.efecto__skills b{font-weight:400;font-size:var(--texto-base);color:var(--color-fg);flex:none}
.efecto__skills span{font-size:var(--texto-sm);color:var(--color-fg-200);line-height:1.45}
.efecto__skills .es-viva{background:var(--color-acento-wash);box-shadow:inset 0 0 0 1px rgba(168,255,0,.26);border-top:0}
.efecto__skills .es-viva b{color:var(--color-acento)}
@media (max-width:860px){
  .galeria{grid-template-columns:1fr;gap:32px}
  .efecto__muestra{max-width:250px;margin-inline:auto}
}

/* ═══ LOOP 1 DEL JUEZ · 4 bloqueantes y 12 graves ═══════════════════════════ */

/* BLOQUEANTE · «hay tres escalas de H2 conviviendo y dos secciones tienen
   titulares de cuerpo de texto». Los 20px venían MEDIDOS de raycast, y con la
   paridad retirada esa medida ya no manda: manda que el titular que cierra la
   conversión no puede ser del tamaño de su propia bajada. */
.titulo-seccion b{font-size:clamp(30px,4vw,48px);line-height:1.06;letter-spacing:-.02em;display:block}
.titulo-seccion span{display:block;margin-top:14px;font-size:var(--texto-lg);color:var(--color-fg-200)}

/* BLOQUEANTE · el hero se salía de la pantalla por la derecha en móvil: un
   `1fr` tiene mínimo automático, así que el campo de teléfono ensanchaba la
   columna 44px por debajo del padding del contenedor y el texto salía cortado. */
@media (max-width:1080px){ .hero__reja{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){
  .lista__pais{width:132px}
  .hero__texto{min-width:0}
}

/* GRAVE · las fichas flotantes MUERDEN el producto en vez de anotarlo. Salen
   del marco: por fuera son una anotación, por dentro son un tachón. */
.flota--a{left:auto;right:calc(100% - 46px);top:12%}
.flota--b{right:-14px;bottom:8%}
@media (max-width:1080px){ .flota--a{right:auto;left:-8px} }

/* GRAVE · doble marco en los campos: la cápsula y el input dibujaban dos
   bordes concéntricos a 8px y el eje izquierdo del formulario se duplicaba. */
.lista__campo{padding:0;background:none;backdrop-filter:none;box-shadow:none}
.lista__campo:focus-within{box-shadow:none}
.lista__campo input,.lista__pais{
  height:46px;
  background:rgba(22,22,22,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--color-border), var(--brillo);
  border-radius:var(--radius);
}
.lista__campo input:hover,.lista__pais:hover{background-color:rgba(31,31,31,.85)}
.lista__campo input:focus,.lista__pais:focus{
  outline:none;box-shadow:inset 0 0 0 1px var(--color-acento), var(--glow-acento);
}
.lista__campo input:focus-visible,.lista__pais:focus-visible{outline:none}

/* GRAVE · la casilla de privacidad era el único blanco puro de la página y
   pesaba más que el botón que da de comer. */
.lista__ok input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border-radius:5px;
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border);
  transition:background-color var(--t-rapida) var(--curva), box-shadow var(--t-rapida) var(--curva);
}
.lista__ok input:hover{box-shadow:inset 0 0 0 1px var(--color-fg-400)}
.lista__ok input:checked{background:var(--color-acento);box-shadow:none}
.lista__ok input:checked::after{
  content:"";position:absolute;width:9px;height:4.5px;margin:5px 0 0 4.5px;
  border-left:2px solid var(--color-sobre-acento);border-bottom:2px solid var(--color-sobre-acento);
  transform:rotate(-45deg);
}
.lista__ok input:focus-visible{box-shadow:inset 0 0 0 1px var(--color-acento), var(--glow-acento)}

/* GRAVE · la línea de valor iba DEBAJO de la letra legal y en el mismo gris:
   lo que convence quedaba por detrás de lo que obliga. */
.hero .lista{order:2}
.hero__valor{order:1;margin:18px 0 6px;color:var(--color-fg);font-size:var(--texto-base)}
.hero__valor b{color:var(--color-acento)}
.hero__texto{display:flex;flex-direction:column}
.hero .nodo{order:-3}
.hero__titular{order:-2}
.hero__bajada{order:-1}
.ventajas{order:0}

/* El portátil va CENTRADO con la columna de texto (Santiago, 14-09-2026:
   «el portátil está puesto arriba del todo, quiero que esté centrado con el
   texto»). Anclarlo arriba era un arreglo mío de un loop anterior para que las
   dos columnas compartieran línea de techo; su ojo manda sobre el revisor. El
   hueco negro que aquel arreglo perseguía se reparte ahora arriba y abajo en
   vez de acumularse entero al pie, que es lo que se leía como columna rota. */
.hero__reja{align-items:center}
.hero__mockup{margin-top:0}

/* GRAVE · tres tratamientos distintos para tres chips de la misma firma. */
.hero .nodo__claudia,.hero .nodo__marca{
  width:30px;height:30px;border-radius:9px;
  background:var(--color-bg-200);box-shadow:inset 0 0 0 1px var(--color-border);
  display:inline-flex;align-items:center;justify-content:center;
}
.hero .nodo__marca--a{color:var(--color-acento)}
.hero .nodo__marca--b{color:var(--color-fg)}

/* GRAVE · la lista de super efectos arrancaba las descripciones en seis x
   distintos: era una lista de dos campos maquetada como texto corrido. */
@media (min-width:861px){
  .efecto__skills li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 20px;align-items:baseline}
}

/* GRAVE · la cita del muro ya no es una cita —es la conclusión—, así que la
   comilla decorativa sobraba, y además se comía la «Y» de su primera palabra. */
.muro__cita::before{content:none}
.muro__mini{width:64px;height:88px}

/* MEJORA · el pie era una línea suelta sin regla, sin marca y con un bloom
   verde en una esquina sin nada que iluminar. */
.pie{padding-block:64px 64px}
.pie .contenedor{border-top:1px solid var(--color-border-soft);padding-top:36px}
.pie__pintada{display:none}
.pie__firma{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* GRAVE · el paso 4 era media sección: una tarjeta sola dentro de una rejilla
   de dos, con 640×180 de negro a su derecha. Pasa a una pieza ancha: la onda a
   la izquierda y el texto a la derecha, sin columna fantasma. */
.tarjetas-par--sola{grid-template-columns:1fr!important;margin-top:56px}
.tarjeta--sonido{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.tarjeta--sonido .tarjeta__demo--arriba{min-height:260px}
@media (max-width:860px){ .tarjeta--sonido{grid-template-columns:1fr} }

/* GRAVE · la pista «EL CORTE» del paso 2 salía como una caja vacía: la
   animación pasaba el 30% de cada vuelta con los segmentos a scaleX(0). Ahora
   encaja UNA vez, al entrar en pantalla, y se queda llena. En reposo —sin JS,
   sin scroll, en una captura— está llena, que es como tiene que verse. */
.montaje__tira--corte i{animation:none;transform:none;opacity:1}
.se-ve .montaje__tira--corte i{animation:encaja .9s var(--curva) calc(var(--i) * .09s) both}
@keyframes encaja{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* MEJORA · 213px seguidos de negro entre el final del cierre y el pie. */
.cierre{padding-bottom:88px}

/* La firma del nodo, rematada: sin la animación `releva` (que escalaba los
   chips y los montaba sobre la etiqueta del vecino) y con los tres iguales. */
.hero .nodo__marca{animation:none;width:30px;height:30px;border-radius:9px;
  background:var(--color-bg-200);box-shadow:inset 0 0 0 1px var(--color-border)}
.hero .nodo__claudia{width:30px;height:30px;border-radius:9px;
  background:var(--color-bg-200);box-shadow:inset 0 0 0 1px var(--color-border), 0 0 26px -10px rgba(168,255,0,.5)}
.hero .nodo__claudia img{width:20px;height:20px}
.hero .nodo__pieza{white-space:nowrap}
.hero .nodo__modelos{gap:18px}
.hero .nodo__pieza b{font-size:10px}

/* Las fichas flotantes, fuera del cuadro de la app: una sola y por DEBAJO de
   la peana, donde no hay interfaz que morder. Dos colgando de los bordes era
   una anotación que tachaba justo lo que señalaba. */
.flota--b{display:none}
.flota--a{
  left:50%;right:auto;top:auto;bottom:-26px;transform:translateX(-50%);
  flex-direction:row;align-items:baseline;gap:10px;white-space:nowrap;
  animation:none;
}
@media (max-width:1080px){ .flota--a{left:50%} }

/* El hero respiraba de más por arriba y empujaba el formulario fuera de la
   primera pantalla. */
.hero{padding-top:136px}
.hero .nodo{margin-bottom:20px}
.ventajas{margin-top:22px;gap:10px}
.flota--a{bottom:-40px}

/* GRAVE (móvil) · el pie del visual de Supertextos salía cortado por la
   izquierda: se posicionaba contra un ancestro que no era su propia caja. */
.tarjeta__demo{position:relative;overflow:hidden}
.demo__pie{left:8px;right:8px}
@media (max-width:560px){ .demo__pie{font-size:10px} }

/* GRAVE (móvil) · la barra de menús del escritorio se cortaba a mitad de
   palabra y la ficha del panel se partía en cuatro líneas contra su chip. */
@media (max-width:760px){
  .escritorio__barra span:not(.mono):not(.escritorio__pila){display:none}
  .panel__pie{flex-direction:column;align-items:flex-start;gap:10px}
  .ventana__rail{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
                 mask-image:linear-gradient(90deg,#000 86%,transparent)}
}

/* ═══ LOOP 2 DEL JUEZ ═══════════════════════════════════════════════════════ */

/* BLOQUEANTE · el río enseñaba 12 tarjetas vacías dando vueltas. No faltaba
   ningún fichero: seis piezas del banco son de 440×782 con la franja de arriba
   en fondo liso, y el recorte iba anclado ARRIBA. Centrado, todas tienen algo. */
.rio img{object-position:center}

/* BLOQUEANTE · el muro de vídeos era un carrusel con la barra oculta que
   enseñaba 3 de 6 en escritorio y 1 de 6 en móvil, y cortaba el tercer título
   a media palabra. La prueba social no puede estar escondida detrás de un
   scroll que no se ve: pasa a rejilla y se ven los seis. */
.muro{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;overflow:visible!important;scroll-snap-type:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.muro__ficha{scroll-snap-align:none;width:auto;min-width:0}
.muro__ficha b{max-width:none;white-space:normal}

/* BLOQUEANTE · la casilla obligatoria daba 1,42:1 contra el fondo y además
   caía por debajo del pliegue: se rellenaba el formulario, se pulsaba y el
   navegador bloqueaba el envío señalando un cuadrado invisible. Sube de
   contraste y se pone ANTES del botón, que es donde se lee. */
.lista__ok input{box-shadow:inset 0 0 0 1.5px var(--color-fg-400)}
.lista__ok input:hover{box-shadow:inset 0 0 0 1.5px var(--color-fg-200)}
.lista .lista__ok{order:1;margin-top:2px}
.lista > .boton{order:2}
.lista__aviso{order:3}
.lista{display:flex;flex-direction:column}
.lista__campo{order:0}

/* GRAVE · en móvil el texto del paso 1 tocaba los dos bordes de la pantalla. */
.corte__texto{padding-inline:24px}

/* GRAVE · lo descartado en la tira de brutos daba 1,06:1: la comparación
   antes/después, que es el argumento del paso 2, no se veía. */
.montaje__tira--bruto i[data-t="mala"]::after{
  background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(255,255,255,.34) 4px 6px);
}
.montaje__tira--bruto i[data-t="mala"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.montaje__tira--bruto i[data-t="silencio"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}

/* GRAVE · el caption apagado del paso 0 daba 3,12:1. Es una demo de un estado
   apagado, sí, pero la regla de la casa es que en legibilidad manda calidad. */
.captions p{color:#9A9A9A}
.captions p.es-viva{color:#FFFFFF}

/* GRAVE · los tres controles del texto del paso 1 eran botones de 66×3px. */
.paginacion button{height:3px;padding:11px 0;background-clip:content-box;box-sizing:content-box}
.paginacion button span{background-clip:content-box}

/* GRAVE · el enlace legal del pie no parecía un enlace en la única página que
   pide correo y teléfono. */
.pie__legal{text-decoration:underline;text-underline-offset:3px;color:var(--color-fg)}

/* GRAVE · la ventana de transcripción se cortaba en seco a mitad de timecode. */
.escenario__marco{position:relative}
.escenario__marco::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
  background:linear-gradient(180deg,transparent,#0B0B0B);
}

/* GRAVE (móvil) · el punto del vínculo se paraba encima de la «C» de Claude y
   el rótulo del supertexto se salía por los dos lados de su caja. */
@media (max-width:560px){
  .hero .nodo__vinculo{display:none}
  .hero .nodo{gap:14px}
  .demo__pie{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ═══ LOOP 3 DEL JUEZ ═══════════════════════════════════════════════════════ */

/* BLOQUEANTE · el río seguía enseñando cajas vacías: `cover` recorta 132×186 de
   una pieza de 440×782 y en varias piezas ese recorte cae en fondo liso. Con
   `contain` no hay recorte que valga: se ve la pieza entera o no se ve nada, y
   siempre hay algo. La tarjeta pasa a ser el soporte, no el marco. */
.rio img{object-fit:contain;background:var(--color-bg-200);padding:8px;
  box-shadow:inset 0 0 0 1px var(--color-border-soft)}

/* BLOQUEANTE · la tarjeta de Captions era un agujero de 1108×251 con una bola
   gris difusa dentro: la rejilla reservaba sitio para dos y solo había una. */
.estilo__par .tarjeta__demo{min-height:210px}
.captions::before{width:64px;height:64px;top:12%}

/* BLOQUEANTE · la ventana insignia tenía la iconografía sin dibujar: cinco
   cuadrados grises vacíos donde van los iconos. Pasan a ser puntos, que es lo
   que son — marcas de lista, no iconos a medio hacer. */
.rail__item i{width:6px;height:6px;border-radius:999px;background:var(--color-fg-400)}

/* GRAVE · el pantallazo del hero enseñaba las miniaturas difuminadas y cortaba
   la fila de pasos por la mitad. El degradado devuelve el foco al cromo —que sí
   está nítido— y funde lo borroso contra el marco del portátil. */
.portatil__pantalla{position:relative}
.portatil__pantalla::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:46%;
  pointer-events:none;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.55) 42%,#0B0B0B 92%);
}

/* GRAVE · 390×530px de negro al lado del formulario: el mockup moría a media
   columna. Ocupa su columna entera y las dos mitades acaban a la vez. */
.hero__mockup{max-width:none;margin-top:64px}
@media (max-width:1080px){ .hero__mockup{max-width:560px;margin-top:0} }

/* GRAVE · la página tenía seis anchos de columna. El pie iba 140px más estrecho
   que todo lo demás y el escenario del corte 146 más. */
.pie .contenedor{max-width:var(--container-width)}
.corte__escenario{max-width:var(--container-width)}

/* GRAVE · en móvil la demo de la tarjeta ancha sangraba 78px SOLO por la
   izquierda (la diagonal de escritorio) y se comía el principio de su pie. */
@media (max-width:860px){
  .tarjeta--ancha .tarjeta__demo{margin-left:0;clip-path:none}
}

/* GRAVE · la paginación del paso 1 se veía como una cápsula negra vacía con
   halo: el `box-shadow` del activo se dibujaba sobre la caja de 25px mientras
   la barra visible era de 3. El área de pulsación se hace con un pseudo, que
   no pinta nada. */
.paginacion button{
  height:3px;padding:0;box-sizing:border-box;position:relative;overflow:visible;
  background-clip:border-box;
}
.paginacion button::after{content:"";position:absolute;inset:-12px 0}
.paginacion button span{background-clip:border-box}

/* GRAVE · en móvil la barra del mock cortaba sus letras por la mitad y la
   ventana de transcripción respiraba a 56px cuando la página respira a 24. */
@media (max-width:760px){
  .escritorio__barra{height:auto;min-height:34px;padding-block:7px;align-items:center}
  .escenario__marco{padding:18px 16px 0;max-height:none}
  .escenario__marco::after{height:56px}
  .corte__escenario{margin-top:40px}
}

/* MEJORA · el selector de país se truncaba en móvil. Ensancha lo que se puede
   sin comerse el número: el prefijo, que es lo que importa, siempre se lee. */
@media (max-width:420px){ .lista__pais{width:146px;font-size:13px} }

/* ═══ LOOP 4 DEL JUEZ ═══════════════════════════════════════════════════════ */

/* LO PEOR · el botón del formulario arrancaba en y=903 y los pliegues reales
   son 900, 824 y 720: quien llegaba veía un formulario SIN BOTÓN. Se recupera
   con copy más corto (index.html) y con aire: el hero es la única pantalla
   donde 30px de respiro valen menos que ver dónde se pulsa. */
.hero{padding-top:104px}
.hero .nodo{margin-bottom:18px}
.hero__bajada{margin-top:18px}
.ventajas{margin-top:20px;gap:9px}
.hero__valor{margin:14px 0 4px}
.hero .lista{margin-top:24px;gap:10px}
.hero__mockup{margin-top:40px}

/* El río, con la tarjeta apaisada que pedían las 33 piezas apaisadas: con
   tarjeta vertical y `contain`, dos tercios de cada una eran gris liso. */
.rio img{width:186px;height:112px;object-fit:cover;object-position:center;padding:0}
.rio__fila{gap:12px}

/* Un solo eje izquierdo. Había seis (118, 142, 188, 197, 205 y 0 a 1440): 87px
   de vaivén al bajar, que es lo que impide que catorce secciones se lean como
   un mismo sistema por mucho que compartan color y tipografía. */
.galeria,.producto__escena,.muro__detalle{max-width:var(--container-width);margin-inline:auto}
.galeria{padding-inline:24px}
.muro__detalle{padding-inline:0}
.escritorio{max-width:none}

/* La escala de titulares estaba invertida: las dos secciones que deciden si
   alguien deja el correo se titulaban MÁS PEQUEÑAS que la sección más flaca. */
.titulo-seccion b,.titulo-seccion--grande b{font-size:clamp(34px,4.6vw,60px)}

/* El pantallazo del portátil cortaba los rótulos a media letra por abajo. */
.portatil__pantalla::after{height:54%}

/* En pantallas BAJAS (un portátil de 720 de alto) el botón seguía cayendo 69px
   por debajo del pliegue. Ahí la firma del nodo es lo primero que sobra: es un
   detalle bonito, y el botón es el negocio. */
@media (min-width:1081px) and (max-height:790px){
  .hero{padding-top:72px}
  .hero .nodo{display:none}
  .hero__bajada{margin-top:14px}
  .ventajas{margin-top:16px;gap:8px}
}

/* ═══ LOOP 5 DEL JUEZ ═══════════════════════════════════════════════════════ */

/* BLOQUEANTE · el río decapitaba 81 de las 99 piezas. Meter 9:16 y 16:9 en la
   MISMA caja obliga a recortar una de las dos familias, y la vez anterior la
   minoría apaisada fijó la geometría de la mayoría vertical: de cada pieza de
   9:16 se veía una banda del 34%. Con el ALTO fijo y el ancho libre no hay caja
   que imponer: cada pieza entra entera, la vertical estrecha y la apaisada
   ancha, que es además lo que hace que el río parezca un banco y no una rejilla. */
.rio img{width:auto;height:112px;object-fit:contain;object-position:center;padding:0;
  background:var(--color-bg-200)}

/* GRAVE · la prueba social estaba metida 157px hacia dentro respecto a su
   propio título: el arreglo del eje único llegó a `.muro__detalle` y se dejó
   `.muro`, que era justo el que el comentario nombraba. */
.muro{max-width:var(--container-width);margin-inline:auto}

/* GRAVE · y debajo, 1070×220 de vacío: la ficha de datos acababa a media altura
   del vídeo y la divisoria se cortaba con ella. */
.muro__detalle{align-items:stretch}
.muro__ficha-datos{display:flex;flex-direction:column;justify-content:center}
.muro__cita{align-self:center}

/* GRAVE (móvil) · la tarjeta de Supertextos reservaba 132px de margen derecho
   para la diagonal de escritorio, que en móvil no existe: el texto se quedaba
   en 176px de ancho, nueve líneas de 18 caracteres. */
@media (max-width:860px){ .tarjeta--ancha .tarjeta__texto{padding-right:34px} }

/* La casilla se mueve en el MARCADO, no con `order`: el tabulador sigue el DOM
   y se estaba saltando el consentimiento para ir al botón. */
.lista .lista__ok,.lista > .boton,.lista__aviso,.lista__campo{order:initial}
/* y con el alto libre cada pieza necesita su canto, o el río se lee como un
   montón de recortes flotando en vez de un banco de piezas. */
.rio img{height:150px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--color-border);background:var(--color-bg-200)}
.rio{gap:14px}
@media (max-width:760px){ .rio img{height:112px} }
/* (el `inset box-shadow` de un <img> se pinta DEBAJO del bitmap y no se veía:
   el canto tiene que ser `outline`, que sí pinta encima) */
.rio img{box-shadow:none;outline:1px solid var(--color-border);outline-offset:-1px}
/* El titular partía en tres líneas («Tú grabas. / Claudia / edita.») porque el
   `max-width:12ch` mordía la columna. El corte ya lo pone el <br> del marcado. */
.hero__titular{max-width:none}

/* ═══ SUPER EFECTOS · el carril ════════════════════════════════════════════
   Santiago, 14-09-2026: «me gustaría ver una galería de los distintos super
   efectos, no solo los nombres, sino visualmente; al menos una pantalla con 2,
   3, 4, y que se note que hay más, pero que no se ven».

   Ocho piezas de 9:16 en fila. La caja se sale del contenedor por la derecha
   hasta el borde de la ventana, así que la cuarta tarjeta SIEMPRE queda medio
   cortada: ese corte es el que dice «hay más». La máscara lo remata en
   degradado para que se lea como continuación y no como recorte roto. */
.efectos__barra{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:44px;
}
.efectos__cuenta{font-size:10px;letter-spacing:.09em;color:var(--color-fg-300)}
.efectos__mandos{display:flex;gap:8px}
.efectos__flecha{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:999px;background:var(--color-bg-200);color:var(--color-fg-200);
  box-shadow:inset 0 0 0 1px var(--color-border);
  transition:color var(--t-corta) var(--curva), background var(--t-corta) var(--curva);
}
.efectos__flecha:hover:not(:disabled){background:var(--color-bg-300);color:var(--color-fg)}
.efectos__flecha:disabled{opacity:.32;cursor:default}

.galeria{
  display:flex;gap:18px;align-items:flex-start;
  margin:18px 0 0;max-width:none;
  /* Arranca en el eje del contenedor y muere en el borde de la ventana. */
  padding:4px max(24px, calc((100vw - var(--container-width)) / 2)) 4px
             max(24px, calc((100vw - var(--container-width)) / 2));
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  /* El snapport arranca en el eje del contenedor, no en el borde de la caja:
     sin esto `scroll-snap-align:start` pega la primera tarjeta al borde y se
     come los 118px de sangrado izquierdo nada más pintar. */
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scroll-padding-inline-start:max(24px, calc((100vw - var(--container-width)) / 2));
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
  transition:-webkit-mask-image var(--t-media) var(--curva);
}
/* Al llegar al final ya no hay nada escondido: el degradado se retira, porque
   difuminar la última pieza cuando es la última la hace parecer rota. */
.galeria.es-final{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 100%);
}
.galeria::-webkit-scrollbar{display:none}
.galeria:focus-visible{outline:2px solid var(--color-acento);outline-offset:4px}

.efecto{
  flex:0 0 clamp(216px,22vw,272px);margin:0;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:14px;
}
.efecto__lienzo{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border),
             0 24px 60px -32px rgba(0,0,0,.95);
  transition:box-shadow var(--t-media) var(--curva), transform var(--t-media) var(--curva);
}
.efecto:hover .efecto__lienzo{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(168,255,0,.34),
             0 30px 70px -30px rgba(0,0,0,.95),
             0 16px 50px -30px rgba(168,255,0,.34);
}
.efecto__lienzo video{display:block;width:100%;height:100%;object-fit:cover;filter:none}
.efecto figcaption{display:flex;flex-direction:column;gap:5px;padding-right:8px}
.efecto figcaption b{font-weight:400;font-size:var(--texto-base);color:var(--color-fg)}
.efecto figcaption span{font-size:var(--texto-sm);color:var(--color-fg-300);line-height:1.5}

@media (max-width:760px){
  /* En móvil no caben tres: caben una y media, que sigue diciendo que hay más. */
  .efecto{flex:0 0 min(64vw,240px)}
  .galeria{padding-inline:24px;gap:14px}
  /* Las flechas se quedan también en móvil: con ocho piezas y una y media a la
     vista, un carril que solo se descubre arrastrando esconde seis. */
  .efectos__flecha{width:32px;height:32px}
}

/* 10px de scroll horizontal en toda la página a 1280: el resplandor decorativo
   de `.escenario__pintada` sangra un −4% que a ese ancho cae fuera de la
   ventana. `clip` y no `hidden` a propósito: `hidden` convierte al body en
   contenedor de scroll y rompe el `position:sticky` del navbar. */
/* No vale ponerlo en el body: su overflow se propaga al viewport y el body
   vuelve a `visible`, así que los 10px seguían ahí. Se recorta en la caja que
   sangra. `clip` y no `hidden` para no crear un contenedor de scroll. */
.corte__escenario{overflow:clip}

/* ═══ EL PIE DE LA VENTANA DE PRODUCTO ═════════════════════════════════════
   Santiago, 15-09-2026: «ese texto tiene que ir en el centro de ese hueco
   negro, entre la línea donde acaba la animación y la línea donde pone paso 0.
   Hazlo más amplio a nivel horizontal para que no ocupe cuatro líneas».

   Estaba en 460px (cuatro líneas) con 76px de aire arriba y 224 abajo: ni
   centrado ni ancho. Ahora 760px (dos líneas) y el hueco repartido — 120
   arriba y 120 abajo, contando que el `padding-top` de 112 del paso 0 ya pone
   casi todo el de abajo, así que a esta sección le quedan 8. */
.producto__pie{max-width:760px;margin-top:96px}
.producto.seccion{padding-bottom:8px}
@media (max-width:760px){ .producto__pie{margin-top:56px} .producto.seccion{padding-bottom:24px} }

/* ═══ LA VENTANA DE PRODUCTO · manda el rail ════════════════════════════════
   Santiago, 15-09-2026. Tres cambios encadenados:

   1. Las capturas dejan de cubrir la ventana entera y se quedan en la columna
      de contenido, porque si tapan el rail no se puede pulsar lo que él quiere
      pulsar. Van recortadas sin la barra lateral propia de la app (1116×880),
      o se verían dos raíles, uno encima del otro.
   2. El rail se queda visible en todas las vistas.
   3. El dock ya no es un tablist: son `span`, indicador y no mando. */
.ventana__foto{
  /* `width:auto` con left+right NO estira un <img>: en un elemento reemplazado
     resuelve al ancho intrínseco, y la captura se quedaba en 625px dejando
     medio panel en negro. El ancho se calcula. */
  position:absolute;top:0;bottom:0;left:196px;right:0;
  width:calc(100% - 196px);height:100%;
  object-fit:cover;object-position:top left;
}
.ventana[data-vista="banco"]   .ventana__foto[data-para="banco"],
.ventana[data-vista="sonidos"] .ventana__foto[data-para="sonidos"],
.ventana[data-vista="sistema"] .ventana__foto[data-para="sistema"],
.ventana[data-vista="proceso"] .ventana__foto[data-para="proceso"]{opacity:1;visibility:visible}
.ventana:not([data-vista="timeline"]) .ventana__rail{opacity:1}
.ventana:not([data-vista="timeline"]) .ventana__panel{opacity:0}
/* El rail por encima de la captura y con su propio fondo, que si no la foto
   se le cuela por debajo del borde. */
.ventana__rail{position:relative;z-index:2}

/* Botones de verdad: hay que apagarles el aspecto de <button>. */
.rail__item{
  appearance:none;border:0;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;background:transparent;
}
.rail__item:focus-visible{outline:2px solid var(--color-acento);outline-offset:-2px}

/* El dock, ya sin botones */
.dock span[data-ver]{
  width:46px;height:44px;display:grid;place-items:center;border-radius:10px;
  color:var(--color-fg-400);
  transition:background-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}
.dock span[data-ver].is-activo{background:var(--color-bg-400);color:var(--color-acento)}

@media (max-width:900px){
  /* En móvil la ventana es de una columna: la foto vuelve a ocuparla entera y
     el rail se pone encima, en fila. */
  .ventana__foto{left:0;width:100%}
}

/* ═══ EL MURO DE VÍDEOS · feedback de Pablo ════════════════════════════════
   «que no estén difuminados, que se vean bien aquí», «que aquí ponga algo como
   pulsa para verlo», «hay como mucho espacio aquí negro, no está bien armado». */

/* Que se puede pulsar se dice dos veces: con palabras en la bajada de la
   sección y con el triángulo de play sobre cada miniatura, que es la señal que
   todo el mundo ya sabe leer. */
/* Fuera del <span> de la bajada: dentro heredaba el `font-size` de titular de
   `.titulo-seccion b` y «Pulsa cualquiera para verlo» salía a 60px, más grande
   que la propia bajada. */
.titulo-seccion .muro__pista{
  display:block;margin-top:14px;
  font-size:10px;letter-spacing:.1em;color:var(--color-acento);
}
.muro__cara{position:relative;display:block;flex:none;line-height:0}
.muro__play{
  position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:999px;
  background:rgba(10,10,10,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  display:grid;place-items:center;
  transition:background-color var(--t-rapida) var(--curva), transform var(--t-rapida) var(--curva);
}
.muro__play::after{
  content:"";width:0;height:0;margin-left:2px;
  border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.muro__ficha:hover .muro__play{background:var(--color-acento);transform:scale(1.1)}
.muro__ficha:hover .muro__play::after{border-left-color:var(--color-sobre-acento)}
.muro__ficha[aria-selected="true"] .muro__play{background:var(--color-acento)}
.muro__ficha[aria-selected="true"] .muro__play::after{border-left-color:var(--color-sobre-acento)}

/* El bloque de detalle tenía el reproductor pequeño flotando en un campo negro
   larguísimo: el resultado —que es lo único que se viene a ver— era la pieza
   más chica de la sección. Se agranda el vídeo y se recorta el aire. */
.muro__detalle{align-items:center;gap:clamp(28px,4vw,56px);margin-top:36px}
.muro__reproductor{max-width:none}

/* «Centrarlo más en el resultado» (Pablo). El reproductor estaba en 212px
   —una columna fija puesta con !important en un loop viejo— dentro de un
   bloque de 1030: el vídeo montado, que es lo único que se viene a ver aquí,
   era la pieza más pequeña de la sección y el resto era negro. Sube a 300 y el
   bloque se aprieta: 40px de aire arriba en vez de 120 entre borde y borde. */
.muro__detalle{
  grid-template-columns:300px minmax(0,1fr)!important;
  gap:clamp(28px,3.4vw,52px)!important;
  align-items:center!important;
  margin-top:40px!important;padding-top:40px!important;
}
.muro__ficha-datos{grid-template-columns:1fr;gap:22px}
.muro__datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px}
@media (max-width:960px){
  .muro__detalle{grid-template-columns:1fr!important}
  .muro__reproductor{max-width:260px;margin-inline:auto}
  .muro__datos{grid-template-columns:1fr}
}

/* Dos textos por debajo de AA que el medidor analítico no ve y el de PÍXEL sí,
   porque los dos caen sobre algo pintado y no sobre un color declarado.

   1. El karaoke en reposo iba a `opacity:.42` sobre el fondo de la demo: la
      palabra apagada medía 3,67:1. El suelo sube a .58 —sigue leyéndose como
      «todavía no le toca», que es lo que cuenta el gesto— y el keyframe
      arranca del mismo sitio, o la animación devolvía el valor viejo.
   2. Los pies del carril de super efectos, a 4,48:1 por un pelo. */
.karaoke span{opacity:.58}
@keyframes palabra{0%,6%{opacity:.58;transform:translateY(4px)}14%,52%{opacity:1;transform:none}70%,100%{opacity:.58;transform:none}}
.efecto figcaption span{color:var(--color-fg-200)}
/* «TUS» a 4,44:1 — el flúor de las palabras que golpean cae justo encima de la
   zona clara del fondo de la demo. No se toca el color (es la marca): se le
   pone un halo oscuro ceñido, que es además lo que hace un supertexto de
   verdad sobre metraje. */
.karaoke .es-golpe{text-shadow:0 1px 2px rgba(0,0,0,.96), 0 2px 16px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8)}

/* ═══ EL CUESTIONARIO ══════════════════════════════════════════════════════
   Cinco preguntas de un toque, dentro de la misma caja donde estaba el
   formulario. Minimalista a propósito: una pregunta, sus opciones y nada más
   — ni ilustraciones, ni iconos, ni una sola cosa que mirar que no sea lo que
   hay que contestar. */
.quiz{display:flex;flex-direction:column;gap:22px;animation:quizEntra .34s var(--curva-entrada) both}
@keyframes quizEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.quiz__cabeza{display:flex;align-items:center;gap:14px}
.quiz__cuenta{font-size:10px;letter-spacing:.1em;color:var(--color-fg-300);flex:none}
.quiz__barra{flex:1;height:2px;border-radius:2px;background:var(--color-bg-400);overflow:hidden}
.quiz__barra span{
  display:block;height:100%;background:var(--color-acento);
  transition:width var(--t-media) var(--curva);
}

.quiz__pregunta{
  margin:0;font-family:var(--font-titular);font-weight:400;
  font-size:clamp(21px,2.4vw,27px);line-height:1.22;letter-spacing:-.01em;
  color:var(--color-fg);text-wrap:balance;
}

.quiz__opciones{display:flex;flex-direction:column;gap:8px}
.quiz__opcion{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 15px;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--color-bg-200);box-shadow:inset 0 0 0 1px var(--color-border);
  color:var(--color-fg-200);font-family:inherit;font-size:var(--texto-base);
  text-align:left;line-height:1.35;
  transition:background-color var(--t-rapida) var(--curva),
             box-shadow var(--t-rapida) var(--curva),
             color var(--t-rapida) var(--curva),
             transform var(--t-rapida) var(--curva);
}
.quiz__opcion:hover{
  background:var(--color-bg-300);color:var(--color-fg);
  box-shadow:inset 0 0 0 1px rgba(168,255,0,.34);
}
.quiz__opcion:focus-visible{outline:2px solid var(--color-acento);outline-offset:2px}
/* El acuse: 180 ms en flúor antes de pasar de pantalla, para que el toque se
   sienta registrado y no parezca que la pregunta se ha ido sola. */
.quiz__opcion.es-elegida{
  background:var(--color-acento);color:var(--color-sobre-acento);
  box-shadow:inset 0 0 0 1px var(--color-acento);transform:translateX(3px);
}
.quiz__opcion.es-elegida .quiz__tecla{background:rgba(10,10,10,.22);color:var(--color-sobre-acento)}

/* El número es la tecla: en portátil se contesta entero sin tocar el ratón. */
.quiz__tecla{
  flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:5px;
  background:var(--color-bg-400);color:var(--color-fg-300);font-size:11px;
  transition:background-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}

/* El recordatorio vive encima de la primera pregunta, no en una pantalla
   propia: se lee de camino a contestar y no cuesta un paso. Va en acento
   porque es la promesa de que esto se acaba enseguida, que es lo único que
   hace falta decir aquí. */
.quiz__intro{
  margin:0;font-size:var(--texto-sm);line-height:1.5;
  color:var(--color-acento);letter-spacing:.005em;
}

/* «Otro» abre este campo en vez de avanzar. Aparece pegado a las opciones,
   con el botón al lado, para que quede claro que sigue siendo la misma
   pregunta y no un formulario nuevo. */
.quiz__otro{
  display:flex;flex-direction:column;gap:8px;
  animation:quizEntra .26s var(--curva-entrada) both;
}
.quiz__otro-eco{font-size:10px;letter-spacing:.12em;color:var(--color-fg-300)}
.quiz__otro-fila{display:flex;gap:8px}
.quiz__otro input{
  flex:1;min-width:0;min-height:46px;padding-inline:14px;
  border:0;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.32);color:var(--color-fg);
  box-shadow:inset 0 0 0 1px var(--color-border);
  font-family:inherit;font-size:var(--texto-base);
  transition:box-shadow var(--t-rapida) var(--curva);
}
.quiz__otro input::placeholder{color:var(--color-fg-300)}
.quiz__otro input:focus-visible{outline:2px solid var(--color-acento);outline-offset:-1px}
.quiz__otro .boton{flex:none;min-height:46px;padding-inline:22px}
@media (max-width:620px){
  .quiz__otro-fila{flex-direction:column}
  .quiz__otro .boton{width:100%}
}

.quiz__pie{display:flex;align-items:center;justify-content:space-between;gap:12px}
.quiz__atras{
  border:0;background:none;cursor:pointer;padding:4px 2px;
  font-family:inherit;font-size:var(--texto-sm);color:var(--color-fg-300);
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--t-rapida) var(--curva);
}
.quiz__atras:hover{color:var(--color-fg)}
.quiz__atras:focus-visible{outline:2px solid var(--color-acento);outline-offset:3px}

@media (max-width:620px){
  .quiz__opcion{padding:12px 13px;gap:10px}
  .quiz__tecla{display:none}   /* en móvil no hay teclado que usar */
}

/* (Retirado el 15-09: el cuestionario pasó a capa a pantalla completa, así que
   ya no compite con el hero y no hay que recogerlo.) */

/* ═══ MÓVIL ════════════════════════════════════════════════════════════════
   Santiago, 15-09-2026: «optimízala para móvil, que vaya espectacular».
   Auditoría en 390×844 antes de tocar: 0 de scroll horizontal (bien), pero
   doce elementos táctiles por debajo de 44px, ocho textos por debajo de 12px,
   y el rail de la ventana convertido en una tira que se corta a la mitad y
   esconde tres de sus cinco pestañas sin decirlo. */
@media (max-width:760px){

  /* 1 · El rail de la ventana SE PARTE EN FILAS en vez de salirse por la
     derecha. Antes cabían dos pestañas y media y las otras tres solo
     aparecían arrastrando una tira que no se veía que fuese arrastrable: el
     mismo fallo que ya cazamos en el muro de vídeos. */
  .ventana__rail{
    flex-direction:row;flex-wrap:wrap;gap:6px;
    overflow:visible;padding:12px;
    border-right:0;border-bottom:1px solid var(--color-border-soft);
  }
  .ventana__rail .rail__marca,
  .ventana__rail .rail__pie{display:none}
  .rail__item{width:auto;min-height:44px;padding:10px 13px;flex:0 1 auto}

  /* 2 · La barra de menús del escritorio se quedaba en dos líneas apretadas
     por meter la cola y la fecha en 390px. Es atrezzo: en móvil sobra. */
  .escritorio__derecha{display:none}
  .escritorio__barra span:not(.escritorio__pila){display:none}
  .escritorio__barra b{font-size:var(--texto-sm)}

  /* 3 · Nada que se pueda tocar por debajo de 44px. El dedo no es un ratón. */
  .boton{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .navbar__marca{min-height:44px;display:inline-flex;align-items:center}
  .flecha{min-height:44px;display:inline-flex;align-items:center;gap:8px}
  .pie__columnas a{display:inline-block;padding-block:8px}
  /* El punto de paginación medía 66×3: el área de toque es el botón, la barra
     de 3px se queda dentro como dibujo. */
  .paginacion button{padding-block:20px;background:none;border:0}

  /* La casilla del consentimiento: 18px es un objetivo imposible, y es la que
     decide si alguien entra en la lista. El <label> entero ya la marca, pero
     lleva dos enlaces dentro que se comen el toque, así que la caja tiene que
     ser grande por sí sola. */
  .lista__ok input{width:24px;height:24px;flex:none}
  .lista__ok{align-items:flex-start;gap:12px}

  /* 4 · Suelo de 11px en el texto. Había cotas a 9 y 10 que en una pantalla a
     un palmo de la cara no se leen, se adivinan. */
  .mono,.paso__num,.demo__pie,.reproductor__estado,.efectos__cuenta,
  .muro__pista,.chip,.rail__pie{font-size:11px}

  /* 5 · El muro respiraba de más: 60px entre tarjeta y tarjeta en una columna
     hacía que solo cupieran tres por pantalla. */
  .muro{gap:14px}
  .muro__ficha{padding:10px 12px}
}

/* Segunda pasada de móvil, sobre lo que la primera dejó fuera. */
@media (max-width:760px){
  /* La casilla: 24px de dibujo, 40px de zona de toque. El borde transparente
     agranda el área sin agrandar la caja, que es lo que se ve. */
  .lista__ok input{
    border:8px solid transparent;background-clip:padding-box;
    width:40px;height:40px;
  }
  /* Los dos enlaces de la casilla y los del pie: de 18px de alto a 32. */
  .lista__ok a,.pie__legal,.pie__columnas a{
    display:inline-block;padding-block:7px;
  }
  /* Las flechas del carril de efectos, a tamaño de dedo. */
  .efectos__flecha{width:44px;height:44px}

  /* Suelo real de 11px: las cotas de 10 venían de reglas más específicas que
     la mía, así que aquí se gana por especificidad y no por orden. */
  .titulo-seccion .muro__pista,
  .parte__lista .sev,
  .quiz__tecla,
  .efecto__lienzo .mono,
  .escritorio__barra .mono,
  .panel__cabeza .mono,
  .rail__pie,
  .chip,
  .mono{font-size:11px}
}
/* Los tres últimos que quedaban a 10px en móvil: las cotas del portátil del
   hero, la regla de tiempos de la timeline y las etiquetas de las fichas de
   estilo. Son rótulos de maqueta, pero se leen igual que el resto. */
@media (max-width:760px){
  .flota i,.pista__regla span,.ficha-estilo .mono{font-size:11px}
}

/* ═══ LA CAPA DEL CUESTIONARIO ═════════════════════════════════════════════
   Santiago, 15-09-2026: «que se me pongan en pantalla completa, que el resto
   se ponga en un segundo plano borroso». */
.capa{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:center;padding:24px;
  opacity:0;transition:opacity var(--t-media) var(--curva);
}
.capa.es-viva{opacity:1}
.capa__velo{
  position:absolute;inset:0;
  background:rgba(6,6,6,.82);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
          backdrop-filter:blur(18px) saturate(.9);
}
.capa__caja{
  position:relative;width:100%;max-width:560px;
  max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(26px,4vw,40px);
  border-radius:var(--radius-xl);
  background:var(--color-bg-200);
  box-shadow:inset 0 0 0 1px var(--color-border),
             inset 0 1px rgba(255,255,255,.06),
             0 40px 120px -30px rgba(0,0,0,1),
             0 0 140px -40px rgba(168,255,0,.28);
  transform:translateY(12px) scale(.985);
  transition:transform var(--t-media) var(--curva-entrada);
}
.capa.es-viva .capa__caja{transform:none}

.capa__paso{display:flex;flex-direction:column;gap:18px;animation:quizEntra .3s var(--curva-entrada) both}
.capa__eco{font-size:10px;letter-spacing:.12em;color:var(--color-acento)}
.capa__bajada{margin:0;font-size:var(--texto-base);line-height:1.6;color:var(--color-fg-200)}
.capa__saltar{
  border:0;background:none;cursor:pointer;padding:6px 2px;
  font-family:inherit;font-size:var(--texto-sm);color:var(--color-fg-300);
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--t-rapida) var(--curva);
}
.capa__saltar:hover{color:var(--color-fg)}
.capa__saltar:focus-visible{outline:2px solid var(--color-acento);outline-offset:3px}

/* La pregunta, ya sin competir con nada: el titular puede ir más grande. */
.capa .quiz__pregunta{font-size:clamp(23px,2.8vw,30px)}
.capa .dentro__num{font-size:clamp(44px,6vw,64px)}
.capa .capa__saltar[data-cerrar]{align-self:flex-start;margin-top:4px}

/* El fondo se queda quieto mientras la capa está abierta. `position:fixed` en
   el body y no `overflow:hidden`, que en iOS no sujeta nada. */
body.con-capa{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media (max-width:620px){
  .capa{padding:0;place-items:stretch}
  .capa__caja{
    max-width:none;max-height:none;min-height:100dvh;border-radius:0;
    padding:calc(env(safe-area-inset-top) + 28px) 22px calc(env(safe-area-inset-bottom) + 28px);
    display:flex;flex-direction:column;justify-content:center;
  }
}
@media (prefers-reduced-motion: reduce){
  .capa,.capa__caja{transition:none}
  .capa__paso{animation:none}
}
/* Vuelta 1 del bucle: la capa pasaba todo lo estructural (cubre, difumina,
   cabe, atrapa el foco, sujeta el fondo, cierra y devuelve el scroll) pero
   dejaba siete controles por debajo de 44px. Dentro de una capa que ocupa la
   pantalla entera no hay excusa de sitio. */
.capa .boton{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
.capa__saltar,
.capa .quiz__atras{min-height:44px;display:inline-flex;align-items:center;padding-inline:4px}
.capa .dentro__enlace input{min-height:46px}
.capa .dentro__enlace .boton{min-height:46px;padding-inline:20px}
/* «TUS» volvió a caer a 4,24:1 y el medidor lo pilla unas veces sí y otras no:
   es una palabra ANIMADA. Las de acento laten de .58 a 1 igual que las
   apagadas, y medida en el valle el flúor no llega. Se les quita el latido de
   opacidad y se les deja solo el movimiento: son las que golpean, no tienen
   por qué apagarse, y así el contraste deja de depender del fotograma. */
.karaoke .es-golpe{opacity:1;animation-name:palabraGolpe}
@keyframes palabraGolpe{0%,6%{transform:translateY(4px)}14%,100%{transform:none}}