/* =====================================================================================================================
   Disruptive Films · web propia · v4 (5 nov 2026)
   Dirección: cine oscuro y afiche. Video real de Maic, letra que llena el cuadro, grano y un solo color: violeta.

   TIPOGRAFÍA — una sola familia para que todo hable igual, dos voces con roles fijos:
   · Archivo (variable): condensada 62 % y negra para los titulares; normal para leer; mayúscula espaciada para
     etiquetas. Es la voz que AFIRMA.
   · Instrument Serif itálica: la voz que SIENTE. Solo dentro de un titular (un giro de tono) o como frase completa
     grande ("voz"). Nunca pequeña, nunca sola de relleno, nunca con guiones decorativos delante.
   Escala fija (tokens --t-*): nada de tamaños sueltos. Márgenes amplios (--borde) y columnas desplazadas para que
   cada frase tenga aire e intención.

   MOVIMIENTO — curva única (--ease, ease-out-quint). Entradas de 0,9 s; interacciones de 0,25 s. Los titulares suben
   palabra por palabra desde detrás de una línea (máscara), sin deformar ni desenfocar la letra. El desenfoque solo
   vive en la sección "Haz ruido", donde es el concepto.
   ===================================================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --negro: #0b0a0c;
  --carbon: #141216;
  --carbon-2: #1c1a1f;
  --linea: rgba(236, 232, 225, .12);
  --hueso: #ece8e1;
  --texto-2: #b3ada5;
  --cemento: #8f8983;
  --violeta: #8350e6;
  --violeta-claro: #b394f2;
  --violeta-campo: #6f35e8;
  --violeta-hondo: #5b2fa6;
  --tinta: #0b0a0c;
  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --display: 'Archivo', Impact, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --borde: clamp(24px, 5.5vw, 88px);
  /* escala */
  --t-mega: clamp(84px, 24vw, 380px);
  --t-display: clamp(58px, 14.5vw, 232px);
  --t-titulo: clamp(46px, 9.5vw, 140px);
  --t-sub: clamp(32px, 5vw, 66px);
  --t-voz: clamp(28px, 3.9vw, 58px);
  --t-lead: clamp(18px, 1.55vw, 22px);
  --t-body: 17px;
  --t-label: 11.5px;
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--negro); color: var(--hueso); font: 400 var(--t-body)/1.55 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; overflow-x: hidden; text-rendering: optimizeLegibility; }
::selection { background: var(--violeta); color: #fff; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
body::after { content: ''; position: fixed; inset: -50%; background-image: var(--grano); opacity: .065; pointer-events: none; z-index: 100; animation: grano 1s steps(4) infinite; }
@keyframes grano { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------- las dos voces ---------- */
.gigante, .grande, .k-titulo, .caso h3, .camino h3, .paso h3, .fila h3, .paquete h3, .ciclo h3, .limites li, .mensual li,
.menu nav a, .menu nav span, .cinta-pista span, .cinta-scroll .fila-k span, .manifiesto p.palabras, .entrada-t h2, .articulo-texto h2, .articulo-texto .golpe,
.portal-mascara span, .portal-texto h1, .afiche-letras, .dentro-texto, .pie .firma {
  font-family: var(--display); font-weight: 850; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.018em; }
.gigante { font-size: var(--t-display); line-height: .84; }
.grande { font-size: var(--t-titulo); line-height: .86; }
/* la serif dentro de un titular: mismo cuerpo, otra emoción */
.serif { font-family: var(--serif); font-weight: 400; font-style: italic; font-stretch: normal; text-transform: none; letter-spacing: -.01em; }
.gigante .serif, .grande .serif { font-size: 1.02em; line-height: .9; color: var(--violeta-claro); }
/* "voz": una frase completa dicha en serif, grande, con aire */
.voz { font: 400 var(--t-voz)/1.12 var(--serif); font-style: italic; letter-spacing: -.012em; color: var(--hueso); max-width: 22ch; text-wrap: balance; }
.voz em { font-style: normal; color: var(--violeta-claro); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--texto-2); max-width: 40ch; text-wrap: pretty; }
.etiqueta { font: 600 var(--t-label)/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cemento); }
.etiqueta.v { color: var(--violeta-claro); }
.ancha { font-family: var(--sans); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.borde { padding-inline: var(--borde); }
.punto { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a983f0, var(--violeta) 55%, var(--violeta-hondo)); vertical-align: .08em; position: relative; overflow: hidden; }
.punto::after { content: ''; position: absolute; inset: 0; background-image: var(--grano); opacity: .8; mix-blend-mode: multiply; }
.pendiente { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #cbb6f5; border: 1px dashed rgba(131, 80, 230, .7); background: rgba(131, 80, 230, .1); border-radius: 6px; padding: 5px 9px; }
.pendiente::before { content: '●'; font-size: 8px; color: var(--violeta); }

/* rejilla editorial: en escritorio el texto secundario entra desplazado, no pegado al borde */
.desplazado { margin-left: 0; }
@media (min-width: 900px) { .desplazado { margin-left: 41.666%; } .desplazado-1 { margin-left: 16.666%; } }

/* ---------- movimiento ---------- */
.revela { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.revela.visto { opacity: 1; transform: none; }
/* titulares: cada palabra sube desde detrás de su propia línea */
.k-letras .pal { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding: .06em .02em .04em; margin: -.06em -.02em -.04em; }
.k-letras .l { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 14ms); }
.k-letras.visto .l { transform: none; }
/* frases de voz: entran por líneas con un leve desplazamiento */
.voz.revela { transform: translateY(18px); transition-duration: 1.1s; }
@media (prefers-reduced-motion: reduce) { .revela, .k-letras .l { opacity: 1; transform: none; transition: none; } body::after { animation: none; } }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; gap: 14px; padding: 18px 26px; border-radius: 999px; font: 600 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border: 1px solid rgba(236, 232, 225, .5); color: var(--hueso); background: transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); }
.boton:hover { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.boton:active { transform: scale(.97); }
.boton.lleno { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.boton.lleno:hover { background: var(--hueso); border-color: var(--hueso); color: var(--negro); }
.boton .flecha { transition: transform .25s var(--ease); }
.boton:hover .flecha { transform: translateX(4px); }
.botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }

/* ---------- cabecera y menú ---------- */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--borde); mix-blend-mode: difference; color: #fff; }
.marca { display: flex; align-items: center; gap: 10px; font: 800 14px/1 var(--sans); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; }
.marca .punto { width: 15px; height: 15px; }
.abrir-menu { background: none; border: 0; color: inherit; cursor: pointer; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.abrir-menu i { width: 26px; height: 8px; position: relative; display: inline-block; }
.abrir-menu i::before, .abrir-menu i::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.abrir-menu i::before { top: 0; } .abrir-menu i::after { bottom: 0; }
.abrir-menu:hover i::before { transform: translateX(4px); } .abrir-menu:hover i::after { transform: translateX(-4px); }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--carbon); display: flex; flex-direction: column; padding: 20px var(--borde) 30px; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); }
.menu.abierto { clip-path: inset(0 0 0 0); }
.menu-cab { display: flex; justify-content: space-between; align-items: center; }
.menu nav { margin: auto 0; display: grid; gap: 4px; }
.menu nav a, .menu nav span { font-size: clamp(54px, 13vw, 140px); line-height: .9; display: flex; align-items: baseline; gap: 18px; }
.menu nav small { font: 600 11px/1 var(--sans); font-stretch: 100%; letter-spacing: .2em; color: var(--cemento); text-transform: uppercase; }
.menu nav span { color: #38343c; }
.menu-pie { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rueda { display: inline-flex; overflow: hidden; }
.rueda .l { display: inline-block; position: relative; transition: transform .5s var(--ease-io); transition-delay: calc(var(--i) * 16ms); }
.rueda .l::after { content: attr(data-l); position: absolute; left: 0; top: 100%; color: var(--violeta-claro); }
a:hover .rueda .l { transform: translateY(-100%); }

/* ---------- secciones base ---------- */
.seccion { padding-block: clamp(110px, 16vw, 220px); }
.cab-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(44px, 7vw, 88px); }
.portada { padding: clamp(150px, 22vw, 250px) var(--borde) clamp(60px, 9vw, 110px); }
.portada .lead { margin-top: 36px; }
.portada .gigante { max-width: 12ch; }

/* ---------- 1 · portal: el video dentro de las letras ---------- */
.portal { position: relative; height: 240svh; background: var(--tinta); }
.portal-pegado { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.portal video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portal .h { display: none; }
.portal-mascara { position: absolute; inset: 0; background: #000; mix-blend-mode: multiply; display: grid; place-items: center; will-change: transform; }
.portal-mascara span { color: #fff; font-weight: 900; font-stretch: 62%; line-height: .8; white-space: nowrap; }
.portal-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 12, .25), rgba(11, 10, 12, 0) 35%, rgba(11, 10, 12, .9)); opacity: var(--velo, 0); }
.portal-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--borde) 36px; opacity: var(--texto, 0); transform: translateY(calc((1 - var(--texto, 0)) * 30px)); }
.portal-texto h1 { font-size: var(--t-display); line-height: .84; }
.portal-texto h1 .serif { display: block; font-size: .78em; line-height: .95; color: var(--hueso); }
.portal-texto h1 .serif em { color: var(--violeta-claro); }
.hero-pie { display: grid; gap: 24px; margin-top: 30px; }
.hero-pie p { font-size: var(--t-lead); line-height: 1.45; max-width: 32ch; color: #dcd7cf; }
.portal-indicio { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); opacity: calc(1 - var(--texto, 0) * 3); }
.portal-indicio::after { content: ''; display: block; width: 1px; height: 46px; margin: 10px auto 0; background: linear-gradient(var(--hueso), transparent); animation: indicio 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes indicio { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2 · la pregunta ---------- */
.pregunta .gigante { max-width: 11ch; }
.pregunta .voz { margin-top: clamp(48px, 7vw, 96px); }

/* ---------- 3 y 10 · afiche ---------- */
.afiche { position: relative; overflow: hidden; background: var(--violeta-campo); color: var(--tinta); min-height: 100svh; display: grid; isolation: isolate; }
.afiche.hueso { background: var(--hueso); }
.afiche-letras { position: relative; z-index: 1; align-self: start; padding: clamp(84px, 10vw, 120px) var(--borde) 0; font-size: clamp(150px, 48vw, 640px); font-weight: 900; line-height: .78; color: var(--hueso); }
.afiche.hueso .afiche-letras { color: var(--violeta-campo); }
.afiche-persona { position: absolute; z-index: 2; bottom: 0; left: 64%; height: 76%; transform: translateX(-50%) translateY(var(--sube, 0px)); pointer-events: none; filter: grayscale(1) contrast(1.22); }
.afiche-persona img { height: 100%; width: auto; max-width: none; }
.afiche-suelta { position: absolute; z-index: 3; font: 400 clamp(20px, 2.4vw, 34px)/1 var(--serif); font-style: italic; color: var(--hueso); }
.afiche.hueso .afiche-suelta { color: var(--violeta-campo); }
.afiche-pie { position: absolute; z-index: 3; left: var(--borde); right: var(--borde); bottom: 26px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.afiche-pie .etiqueta { color: var(--hueso); }
.afiche.hueso .afiche-pie .etiqueta { color: var(--tinta); }
.sello { display: inline-flex; border: 1.5px solid currentColor; padding: 7px 11px; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.trama::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .55) 32%, transparent 34%) 0 0 / 4px 4px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.afiche-foto { position: absolute; inset: 0; z-index: 0; }
.afiche-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4 · manifiesto: palabras que se encienden + la respuesta en voz ---------- */
.manifiesto p.palabras { font-size: var(--t-titulo); line-height: .88; max-width: 13ch; }
.manifiesto p.palabras .w { color: #2b2830; transition: color .5s var(--ease); }
.manifiesto p.palabras .w.on { color: var(--hueso); }
.manifiesto p.palabras .w.serif { font-family: var(--serif); font-weight: 400; font-style: italic; font-stretch: normal; text-transform: none; }
.manifiesto p.palabras .w.serif.on { color: var(--violeta-claro); }
.respuesta { margin-top: clamp(80px, 12vw, 170px); display: grid; gap: clamp(40px, 6vw, 80px); }
.respuesta .etiqueta { display: block; margin-bottom: 18px; }

/* ---------- cintas ---------- */
.cinta { border-block: 1px solid var(--linea); overflow: hidden; padding: 20px 0; }
.cinta-pista { display: flex; width: max-content; animation: cinta 40s linear infinite; }
.cinta-pista span { font-size: clamp(30px, 5vw, 56px); line-height: 1; padding-right: 36px; display: flex; align-items: center; gap: 36px; white-space: nowrap; }
.cinta-pista span:nth-child(even) { font-family: var(--serif); font-weight: 400; font-style: italic; font-stretch: normal; text-transform: none; color: var(--cemento); }
.cinta-pista .punto { width: 14px; height: 14px; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta-scroll { overflow: hidden; padding: 14px 0; background: var(--tinta); border-block: 1px solid var(--linea); }
.cinta-scroll .fila-k { display: flex; white-space: nowrap; will-change: transform; }
.cinta-scroll .fila-k span { font-size: clamp(76px, 15vw, 230px); line-height: .95; padding-right: .28em; }
.cinta-scroll .fila-k span.hueco { color: transparent; -webkit-text-stroke: 1.4px rgba(236, 232, 225, .8); }
.cinta-scroll .fila-k span.v { color: var(--violeta); }
.cinta-scroll .fila-k span.sv { font-family: var(--serif); font-weight: 400; font-style: italic; font-stretch: normal; text-transform: none; color: var(--violeta-claro); }

/* ---------- casos ---------- */
.casos { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--borde) 8px; scrollbar-width: none; }
.casos::-webkit-scrollbar { display: none; }
.caso { scroll-snap-align: center; display: grid; gap: 16px; align-content: start; color: var(--hueso); }
.caso-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--carbon); }
.caso-media img, .caso-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s var(--ease); }
.caso-media video { opacity: 0; }
.caso-media.reproduce video { opacity: 1; }
.caso:hover .caso-media img, .caso:hover .caso-media video { transform: scale(1.04); }
.caso-media .n { position: absolute; top: 14px; left: 16px; z-index: 2; font: 600 11px/1 var(--sans); letter-spacing: .2em; color: #fff; mix-blend-mode: difference; }
.caso h3 { font-size: var(--t-sub); line-height: .88; }
.caso-linea { display: flex; flex-direction: column; gap: 10px; }
.caso dl { margin: 0; display: grid; gap: 4px; font-size: 14px; color: var(--texto-2); }
.caso dt { color: var(--cemento); font: 600 10.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; }
.caso dd { margin: 0; }

/* ---------- ruido ---------- */
.ruido { position: relative; padding: clamp(110px, 16vw, 220px) var(--borde); background: var(--tinta); overflow: hidden; }
.ruido-texto { font: 900 clamp(70px, 18vw, 280px)/.8 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.035em; color: #fff;
  filter: blur(var(--difuso, 16px)); text-shadow: 0 0 calc(var(--difuso, 16px) * 2) rgba(255, 255, 255, .6), 0 0 70px rgba(131, 80, 230, .5); }
.ruido-texto span { display: block; }
.ruido-texto span:nth-child(2) { padding-left: .45em; }
.ruido .voz { margin-top: clamp(56px, 8vw, 110px); }

/* ---------- dentro ---------- */
.dentro { background: var(--violeta-campo); padding: clamp(90px, 13vw, 170px) var(--borde) clamp(60px, 9vw, 120px); overflow: hidden; }
.dentro-texto { font-size: clamp(160px, 54vw, 660px); font-weight: 900; line-height: .8; background-size: cover; background-position: center var(--py, 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dentro .etiqueta { color: var(--tinta); }
.dentro .voz { color: var(--tinta); margin-top: 30px; }

/* ---------- caminos ---------- */
.caminos { border-top: 1px solid var(--linea); }
.camino { display: grid; gap: 18px; padding: clamp(40px, 7vw, 80px) var(--borde); border-bottom: 1px solid var(--linea); position: relative; overflow: hidden; isolation: isolate; }
.camino::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--violeta); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease-io); }
.camino:hover::before { transform: scaleY(1); }
.camino h3 { font-size: clamp(56px, 12.5vw, 196px); line-height: .84; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.camino h3 .flecha { font-family: var(--serif); font-weight: 400; font-stretch: normal; font-size: .55em; transition: transform .5s var(--ease); }
.camino:hover h3 .flecha { transform: translateX(-10px) rotate(-45deg); }
.camino p { font-size: var(--t-lead); max-width: 40ch; color: var(--texto-2); transition: color .3s; }
.camino:hover p, .camino:hover .etiqueta { color: #f3eefc; }

/* ---------- pasos / filas / paquetes ---------- */
.pasos { display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.paso { background: var(--negro); padding: 40px 0; display: grid; gap: 16px; }
.paso .num { font: 400 clamp(70px, 12vw, 150px)/.8 var(--serif); font-style: italic; color: var(--violeta-claro); }
.paso h3 { font-size: var(--t-sub); line-height: .9; }
.paso p { color: var(--texto-2); max-width: 36ch; }
.filas { border-top: 1px solid var(--linea); }
.fila { display: grid; grid-template-columns: 54px 1fr; gap: 8px 18px; padding: 32px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.fila .num { font: 400 30px/1 var(--serif); font-style: italic; color: var(--violeta-claro); grid-row: span 3; }
.fila h3 { font-size: clamp(38px, 7vw, 94px); line-height: .88; transition: color .3s var(--ease), transform .6s var(--ease); }
.fila:hover h3 { color: var(--violeta-claro); transform: translateX(8px); }
.fila p { color: var(--texto-2); max-width: 46ch; }
.paquetes { display: grid; gap: 16px; }
.paquete { border: 1px solid var(--linea); border-radius: 2px; padding: 30px 26px; display: grid; gap: 18px; background: var(--carbon); }
.paquete h3 { font-size: 40px; line-height: .9; }
.mensual { background: var(--violeta); color: #fff; padding: clamp(60px, 10vw, 140px) var(--borde); }
.mensual .etiqueta { color: #e3d6fb; }
.mensual ul { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.mensual li { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); font-size: clamp(24px, 3.4vw, 40px); line-height: 1; }
.mensual .pendiente { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
.mensual .pendiente::before { color: #fff; }
.banda { position: relative; height: 82svh; min-height: 500px; overflow: hidden; display: grid; place-items: center; text-align: center; }
.banda video, .banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banda::before { content: ''; position: absolute; inset: 0; background: rgba(11, 10, 12, .58); z-index: 1; }
.banda > div { position: relative; z-index: 2; padding: 0 var(--borde); }
.banda .voz { margin: 0 auto; }

/* ---------- trabajo ---------- */
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--borde); margin-bottom: 44px; }
.filtros button { flex: none; background: transparent; color: var(--hueso); border: 1px solid var(--linea); border-radius: 999px; padding: 12px 18px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all .25s var(--ease); }
.filtros button:hover { border-color: rgba(236, 232, 225, .5); }
.filtros button[aria-pressed='true'] { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.rejilla { display: grid; gap: 56px 16px; padding: 0 var(--borde); }
.caso[hidden] { display: none; }

/* ---------- formulario ---------- */
.formulario { display: grid; gap: 40px; max-width: 780px; }
.campo { display: grid; gap: 12px; }
.campo > label, .campo legend { font: 600 var(--t-label)/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cemento); padding: 0; }
.campo input, .campo select, .campo textarea { font: 400 var(--t-voz)/1.15 var(--serif); font-style: italic; background: transparent; color: var(--hueso); border: 0; border-bottom: 1px solid #3a363e; padding: 10px 0; width: 100%; border-radius: 0; transition: border-color .25s var(--ease); }
.campo textarea { font-size: clamp(22px, 2.4vw, 30px); resize: vertical; }
.campo ::placeholder { color: #4a454f; }
.campo select option { background: var(--carbon); font-style: normal; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--violeta); }
.campo fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: block; border: 1px solid #3a363e; border-radius: 999px; padding: 14px 20px; font: 500 14.5px/1 var(--sans); transition: all .25s var(--ease); }
.chip input:checked + span { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--hueso); outline-offset: 2px; }
.aviso { display: none; padding: 24px; border: 1px solid var(--violeta); border-radius: 2px; }
.aviso.visible { display: grid; gap: 12px; }

/* ---------- sistema ---------- */
.ciclo { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.ciclo li { background: var(--negro); padding: 38px 0; display: grid; gap: 12px; }
.ciclo h3 { font-size: clamp(44px, 7.5vw, 100px); line-height: .88; }
.ciclo h3 .serif { color: var(--violeta-claro); font-size: .7em; margin-right: 14px; }
.ciclo p { color: var(--texto-2); max-width: 44ch; }
.reporte { border: 1px solid var(--linea); border-radius: 2px; overflow: hidden; }
.reporte .fila-r { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; padding: 22px 24px; border-bottom: 1px solid var(--linea); }
.reporte .fila-r:last-child { border-bottom: 0; }
.limites { padding: 0; margin: 0; border-top: 1px solid var(--linea); }
.limites li { font-size: clamp(30px, 4.6vw, 58px); line-height: .95; padding: 22px 0; border-bottom: 1px solid var(--linea); list-style: none; }
.limites li span { display: block; font: 400 var(--t-voz)/1.15 var(--serif); font-style: italic; font-stretch: normal; text-transform: none; color: var(--texto-2); margin-top: 8px; font-size: clamp(20px, 2.2vw, 28px); }

/* ---------- cierre y pie ---------- */
.cierre { padding: clamp(120px, 18vw, 230px) var(--borde) clamp(70px, 9vw, 110px); }
.cierre .gigante { font-size: clamp(76px, 19vw, 300px); }
.cierre .voz { margin-top: 26px; }
.pie { border-top: 1px solid var(--linea); padding: 44px var(--borde) 24px; display: grid; gap: 44px; }
.pie-arriba { display: grid; gap: 28px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 10px 28px; font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.pie nav a { transition: color .25s var(--ease); }
.pie nav a:hover { color: var(--violeta-claro); }
.pie .firma { font-size: clamp(84px, 27vw, 450px); font-weight: 900; line-height: .78; color: var(--carbon-2); white-space: nowrap; overflow: hidden; user-select: none; }
.pie .firma .punto { width: .5em; height: .5em; }

/* ---------- bitácora ---------- */
.rejilla-b { display: grid; gap: 64px 28px; padding-bottom: 90px; }
.entrada-t { display: grid; gap: 16px; align-content: start; }
.entrada-t h2 { font-size: clamp(40px, 7vw, 84px); line-height: .88; transition: color .3s var(--ease); }
.entrada-t:hover h2 { color: var(--violeta-claro); }
.entrada-t p { font: 400 clamp(20px, 2vw, 26px)/1.25 var(--serif); font-style: italic; color: var(--texto-2); max-width: 34ch; }
.entrada-t .leer { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.entrada-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--violeta-campo); }
.entrada-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; transition: transform 1.2s var(--ease); }
.entrada-t:hover .entrada-img img { transform: scale(1.04); }
.vacio-b { font: 400 var(--t-voz)/1.1 var(--serif); font-style: italic; color: var(--cemento); }
.articulo-cab h1 { font-size: clamp(58px, 12vw, 190px); max-width: 14ch; }
.articulo-img { position: relative; margin: 0 0 clamp(48px, 8vw, 100px); height: 72svh; overflow: hidden; background: var(--violeta-campo); }
.articulo-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; }
.articulo-texto { max-width: 720px; margin: 0 auto; padding-bottom: clamp(70px, 11vw, 130px); font: 400 clamp(19px, 1.7vw, 22px)/1.7 var(--sans); color: #dcd7cf; }
.articulo-texto p { margin: 0 0 1.15em; }
.articulo-texto p:first-child::first-letter { font: 400 4.6em/.78 var(--serif); font-style: italic; float: left; margin: .04em .1em 0 0; color: var(--violeta-claro); }
.articulo-texto strong { color: var(--hueso); font-weight: 600; }
.articulo-texto .golpe { font-size: clamp(44px, 7vw, 92px); line-height: .9; color: var(--hueso); margin: 1.1em 0; }
.articulo-texto blockquote { margin: 1.6em 0; font: 400 var(--t-voz)/1.15 var(--serif); font-style: italic; color: var(--hueso); }
.articulo-texto h2 { font-size: clamp(36px, 5vw, 60px); line-height: .9; margin: 1.4em 0 .5em; color: var(--hueso); }

@media (min-width: 760px) {
  body { --t-body: 17.5px; }
  .portal .v { display: none; }
  .portal .h { display: block; }
  .hero-pie { grid-template-columns: 1fr auto; align-items: end; }
  .casos { grid-auto-columns: calc((100% - 2 * var(--borde) - 32px) / 3.2); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .paso { padding: 44px 36px 52px 0; }
  .paso + .paso { padding-left: 36px; }
  .fila { grid-template-columns: 90px 1fr 1fr; }
  .fila .num { grid-row: auto; }
  .paquetes { grid-template-columns: repeat(3, 1fr); }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .pie-arriba { grid-template-columns: 1fr auto; align-items: end; }
  .afiche-letras { font-size: clamp(220px, 30vw, 620px); }
  .afiche-persona { left: 62%; height: 92%; }
  .rejilla-b { grid-template-columns: repeat(2, 1fr); }
  .rejilla-b .primera { grid-column: 1 / -1; }
  .rejilla-b .primera .entrada-img { aspect-ratio: 21 / 9; }
  .rejilla-b .primera h2 { font-size: clamp(60px, 9vw, 150px); }
  .articulo-texto .golpe { margin-left: -6vw; margin-right: -6vw; }
}
@media (min-width: 1100px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); padding-bottom: 90px; }
  .rejilla .caso:nth-child(3n + 2) { transform: translateY(90px); }
}
@media (min-width: 760px) { .dentro-texto { font-size: clamp(220px, 38vw, 640px); } .afiche-letras { font-size: clamp(200px, 26vw, 560px); } }

/* ── portada comercial (6 nov 2026) ── */
.portal.directo { height: 100svh; --velo: 1; --texto: 1; }
.portal.directo .portal-texto { padding-bottom: clamp(36px, 7vh, 72px); }
.portal.directo .portal-texto h1 { font-size: clamp(54px, 10.5vw, 168px); max-width: 11ch; }
.portal.directo .portal-texto h1 .serif { display: inline; font-size: 1em; color: var(--violeta-claro); }
.portal.directo .botones { margin-top: 6px; }
.marcas { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.marcas li { font-weight: 850; font-stretch: 62%; text-transform: uppercase; font-size: clamp(30px, 5.2vw, 72px); line-height: 1; }
.marcas li::after { content: '·'; color: var(--violeta); padding: 0 .3em; }
.marcas li:last-child::after { content: ''; }
.marcas li small { font: 400 italic .42em/1 var(--serif); text-transform: none; color: var(--cemento); letter-spacing: 0; }
.sector-p { color: var(--texto-2); max-width: 34ch; font-size: 15px; line-height: 1.45; }
@media (min-width: 900px) { .casos.cinco { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }
.portal.directo .portal-velo { background: linear-gradient(90deg, rgba(11, 10, 12, .78), rgba(11, 10, 12, .2) 70%), linear-gradient(180deg, rgba(11, 10, 12, .35), rgba(11, 10, 12, 0) 35%, rgba(11, 10, 12, .9)); }
@media (max-width: 899px) { .portal.directo .portal-velo { background: linear-gradient(180deg, rgba(11, 10, 12, .3), rgba(11, 10, 12, .35) 30%, rgba(11, 10, 12, .92)); } }
@media (min-width: 900px) { .casos.cinco { padding: 0 var(--borde); } .casos.cinco h3 { font-size: clamp(30px, 3.1vw, 52px); } }
.dos-col { display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.dos-col > div { background: var(--negro); padding: 40px 0; display: grid; gap: 14px; align-content: start; }
.dos-col h3 { font-size: clamp(56px, 9vw, 140px); line-height: .85; }
.dos-col p { color: var(--texto-2); max-width: 40ch; font-size: var(--t-lead); line-height: 1.45; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; } .dos-col > div { padding: 48px 40px 48px 0; } .dos-col > div + div { padding-left: 40px; } }
.planes p { color: var(--texto-2); font-size: 15px; line-height: 1.45; }
.paquete.destacado { background: var(--violeta); border-color: var(--violeta); }
.paquete.destacado p, .paquete.destacado .etiqueta { color: #f3eefc; }
.paquete.destacado .pendiente { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
@media (min-width: 900px) { .paquetes.planes { grid-template-columns: repeat(5, 1fr); } .paquetes.planes h3 { font-size: 36px; } }
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); padding: 22px 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 850; font-stretch: 62%; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 46px); line-height: 1; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--serif); font-weight: 400; color: var(--violeta-claro); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 14px; color: var(--texto-2); max-width: 60ch; font-size: var(--t-lead); line-height: 1.45; }
.dos-col h3 { font-weight: 850; font-stretch: 62%; text-transform: uppercase; }
.mensual.garantias li { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2; text-transform: none; font-stretch: 100%; font-weight: 500; }
.portal.directo .portal-texto h1 { font-size: clamp(40px, min(9.5vw, 10.5vh), 150px); max-width: 13ch; }
.portal.directo .portal-texto { padding-top: 90px; }
.portal.directo .hero-pie p { font-size: clamp(15px, 2.1vh, 19px); }
@media (max-height: 640px) { .portal.directo .hero-pie { gap: 14px; margin-top: 16px; } .portal.directo .hero-pie p { display: none; } }

/* ── presentación en movimiento ── */
.motion { position: relative; background: var(--negro); }
.motion-pegado { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.escena { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; --t: 0;
  --in: clamp(0, calc(var(--t) / .35), 1); --out: clamp(0, calc((var(--t) - .78) / .22), 1); opacity: calc(1 - var(--out)); }
.escena.intro { align-content: center; justify-items: start; padding: 0 var(--borde); gap: 22px; }
.m-titulo { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(64px, 13vw, 220px); line-height: .84; }
.m-titulo span { display: inline-block; transform: translateY(calc((1 - var(--in)) * 60%)); opacity: var(--in); }
.m-titulo span:nth-child(2) { transition-delay: .05s; }
.m-titulo .serif { font-family: var(--serif); font-weight: 400; font-style: italic; font-stretch: normal; text-transform: none; color: var(--violeta-claro); }
.m-palabra { position: relative; z-index: 1; text-align: center; font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(80px, 19vw, 320px); line-height: .82; letter-spacing: -.01em; color: var(--hueso);
  clip-path: inset(calc((1 - var(--in)) * 100%) 0 0 0); transform: scale(calc(1.25 - var(--in) * .25 + var(--out) * .15)); mix-blend-mode: difference; }
.m-clips { position: absolute; inset: 0; z-index: 0; }
.m-clips video { position: absolute; width: clamp(130px, 17vw, 260px); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 3px; background: var(--carbon);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); --d: 0; --e: clamp(0, calc((var(--t) - var(--d)) / .38), 1);
  opacity: var(--e); transform: translate(var(--x0), calc(var(--y0) * (1 - var(--e)) - var(--t) * 60px)) rotate(calc(var(--r) * (1 - var(--e) * .6))); }
.m-clips video:nth-child(1) { left: 6%; top: 14%; --x0: 0px; --y0: 70vh; --r: -9deg; --d: 0; }
.m-clips video:nth-child(2) { right: 7%; top: 8%; --x0: 0px; --y0: -70vh; --r: 8deg; --d: .08; }
.m-clips video:nth-child(3) { left: 24%; bottom: 6%; --x0: 0px; --y0: 80vh; --r: 5deg; --d: .16; }
.m-clips video:nth-child(4) { right: 22%; bottom: 10%; --x0: 0px; --y0: 90vh; --r: -6deg; --d: .22; }
.m-pie { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; opacity: var(--in); color: var(--texto-2); }
.m-barra { position: absolute; left: var(--borde); right: var(--borde); bottom: 18px; height: 2px; background: var(--linea); }
.m-barra i { display: block; height: 100%; background: var(--violeta); transform-origin: left; transform: scaleX(0); }
@media (max-width: 759px) {
  .m-clips video { width: 36vw; }
  .m-clips video:nth-child(1) { left: -4%; top: 10%; }
  .m-clips video:nth-child(2) { right: -4%; top: 16%; }
  .m-clips video:nth-child(3) { left: 10%; bottom: 8%; }
  .m-clips video:nth-child(4) { right: 6%; bottom: 14%; }
}
.motion.quieta .escena { position: relative; height: 100svh; }

/* ── verticales y horizontales ── */
.formato { padding-block: clamp(60px, 9vw, 120px); }
.formato .cab-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.tira { overflow: hidden; margin-top: 36px; }
.tira-pista { display: flex; gap: 14px; width: max-content; will-change: transform; padding: 0 var(--borde); }
.tira figure { margin: 0; width: clamp(170px, 19vw, 260px); flex: none; display: grid; gap: 10px; }
.tira video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 3px; background: var(--carbon); transition: transform .5s var(--ease); }
.tira figure:hover video { transform: scale(1.03); }
.tira figcaption { font: 600 10.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.horizontales { display: grid; gap: 28px 16px; margin-top: 36px; }
@media (min-width: 760px) { .horizontales { grid-template-columns: 1fr 1fr; } .horizontales figure:nth-child(3n+1) { grid-column: span 2; } }
.horizontales figure { margin: 0; display: grid; gap: 12px; }
.horizontales video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: var(--carbon); }
.horizontales figcaption { color: var(--texto-2); font-size: 14px; }
.horizontales figcaption b { display: block; color: var(--hueso); font-weight: 850; font-stretch: 62%; text-transform: uppercase; font-size: clamp(26px, 3vw, 40px); line-height: 1; margin-bottom: 4px; }
.escena { --in: clamp(0, calc(var(--t) / .18), 1); --out: clamp(0, calc((var(--t) - .86) / .14), 1); }
.escena.intro { --in: 1; }
.m-clips video { --e: clamp(0, calc((var(--t) - var(--d)) / .22), 1); }
.m-clips video:nth-child(2) { --d: .03; } .m-clips video:nth-child(3) { --d: .06; } .m-clips video:nth-child(4) { --d: .09; }