/* ═══════════════════════════════════════════════════════════════════════
   CRISTIAN AGUILERA FPV · hoja de estilos
   Sistema: "C — Velocidad" (CA-FPV_tokens.json v1.0)
   Regla de marca: el rojo es un gesto por pieza. No repetirlo sin motivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --c-carbon-900:#0E0F11;
  --c-asfalto-700:#1A1C1F;
  --c-humo-500:#33373B;
  --c-niebla-300:#8A9095;
  --c-hielo-050:#F2F4F5;
  --c-rojo-senal:#E5322D;

  /* Gris legible: el humo-500 sólo sirve para trazos, nunca para texto.
     Este es el mínimo que pasa AA (4.5:1) sobre carbon-900. */
  --c-texto-tenue:#8A9095;

  --fs-hero:clamp(42px,9vw,132px);
  --sp-borde:clamp(20px,5vw,64px);
  --ancho:1440px;

  --angulo:11deg;
  --ease:cubic-bezier(.16,1,.3,1);

  --ff-display:"Big Shoulders",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --ff-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ff-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--c-carbon-900);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body{
  margin:0;
  background:var(--c-carbon-900);
  color:var(--c-hielo-050);
  font-family:var(--ff-text);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,iframe{display:block;max-width:100%}
/* El navegador le da 40px laterales a <figure>. Con width:100% dentro de
   una rejilla eso se sale del viewport en móvil y recorta el panel. */
figure{margin:0}
a{color:var(--c-hielo-050);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--c-rojo-senal)}
::selection{background:var(--c-rojo-senal);color:var(--c-hielo-050)}

:focus-visible{
  outline:2px solid var(--c-rojo-senal);
  outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--c-hielo-050);color:var(--c-carbon-900);
  padding:14px 20px;font-family:var(--ff-mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Piezas tipográficas ────────────────────────────────────────────── */
.wrap{max-width:var(--ancho);margin:0 auto;padding-left:var(--sp-borde);padding-right:var(--sp-borde)}

.display{
  margin:0;
  font-family:var(--ff-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:.9;
  font-size:clamp(40px,7vw,96px);
  color:var(--c-hielo-050);
  text-wrap:balance;
}
.display--sm{font-size:clamp(38px,5.6vw,76px)}

.mono{
  font-family:var(--ff-mono);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.7;
}

.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.6;text-wrap:pretty}
.muted{color:var(--c-texto-tenue)}

/* La punta de flecha del isotipo, reutilizada como viñeta. */
.tip{display:block;flex:none}

/* ── Encabezado de sección ──────────────────────────────────────────── */
.head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(30px,4vw,50px)}
.head__label{flex:none;color:var(--c-hielo-050)}
.head__label--soft{color:var(--c-texto-tenue)}
.head__line{flex:1;height:1px;background:var(--c-asfalto-700);transform:skewX(calc(-1 * var(--angulo)))}

/* El gesto rojo: se dibuja al entrar en viewport. */
.head__red{
  width:clamp(44px,7vw,88px);height:2px;flex:none;margin-left:6px;
  background:var(--c-rojo-senal);
  transform:skewX(calc(-1 * var(--angulo))) scaleX(0);
  transform-origin:left center;
}
html.js .head__red{transition:transform .85s var(--ease) .15s}
.is-in .head__red{transform:skewX(calc(-1 * var(--angulo))) scaleX(1)}
html:not(.js) .head__red{transform:skewX(calc(-1 * var(--angulo))) scaleX(1)}

.hr{height:1px;background:var(--c-asfalto-700);transform:skewX(calc(-1 * var(--angulo)))}

/* ── Botón ──────────────────────────────────────────────────────────── */
.btn{
  border:0;cursor:pointer;padding:0;
  background:var(--c-hielo-050);color:var(--c-carbon-900);
  transform:skewX(calc(-1 * var(--angulo)));
  transition:background .18s ease,transform .18s ease;
  font:inherit;
}
.btn:hover,.btn:focus-visible{background:#fff;transform:skewX(calc(-1 * var(--angulo))) translateY(-2px)}
.btn__in{
  display:flex;align-items:center;gap:12px;
  transform:skewX(var(--angulo));
  padding:19px 30px;
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
}
.btn--dark{background:var(--c-carbon-900);color:var(--c-hielo-050)}
.btn--dark:hover,.btn--dark:focus-visible{background:var(--c-asfalto-700)}

/* ── Revelado al scroll ─────────────────────────────────────────────── */
html.js .reveal{opacity:0;transform:translateY(26px)}
html.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .75s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s);
}

/* ── Barra de progreso de lectura (namespaced: el widget de leads
     también usa .progress) ───────────────────────────────────── */
.readbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.readbar.is-on{opacity:1}
.readbar i{
  display:block;height:100%;width:0;background:var(--c-rojo-senal);
  transform-origin:left;
}

/* ── Grano de película (sólo desktop) ───────────────────────────────── */
.grain{display:none}
@media (min-width:1024px){
  .grain{
    display:block;position:fixed;inset:0;z-index:3;pointer-events:none;
    opacity:.05;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }
}

/* ═══ HERO ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  /* Mismo patrón que la referencia: vh como piso universal, dvh
     encima para los navegadores que lo resuelven bien. El cover-fit
     del iframe de abajo usa vh puro — mezclar con svh acá abriría
     la puerta a un desajuste entre ambos otra vez. */
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;background:var(--c-carbon-900);
}

.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}

/* Primer pixel: patrón de marca, sin red, sin espera. */
.hero__fallback{
  position:absolute;inset:0;
  background:repeating-linear-gradient(-79deg,#15171A 0 16px,#101216 16px 32px);
}

.hero__frame{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;background:#000}
.hero__frame.is-playing{opacity:1}
.hero__frame iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  /* Un iframe sin fondo propio es blanco por defecto del navegador
     hasta que el documento cargado pinta encima. Con esto, cualquier
     borde sin cubrir —mientras carga, o si el cálculo de "cover" se
     queda corto por un pixel— es negro, no blanco. */
  background:#000;
}
/* Cobertura calcada en la implementación de referencia (viiva-fpv,
   mismo tipo de hero, sin este problema): todo en vw/vh puros, nunca
   svh/dvh. svh es una unidad nueva y no todos los motores la resuelven
   igual al alto real del contenedor — ahí es donde venía el borde sin
   cubrir. vw/vh es lo que un embed de Vimeo espera, sin sorpresas. */
.hero__frame--landscape iframe{width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh}
.hero__frame--portrait  iframe{width:100vw;height:177.78vw;min-height:100vh;min-width:56.25vh}

/* Fusión suave con la sección siguiente, sin oscurecer el plano */
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 90%,
    rgba(14,15,17,.5) 96%,
    var(--c-carbon-900) 100%);
  transition:opacity 1.5s var(--ease);
}

/* Velo de lectura sutil para el título. En modo cine desaparece por completo
   para que el video se aprecie con el brillo y color original de la edición. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  transition:opacity 1.5s var(--ease);
  background:linear-gradient(180deg,
    rgba(14,15,17,.40) 0%,
    transparent 35%,
    transparent 75%,
    rgba(14,15,17,.30) 100%);
  pointer-events:none;
}

/* ── Modo cine ──────────────────────────────────────────────────────
   A los pocos segundos sin actividad el hero se aparta y deja ver el
   plano entero, con su brillo y color original sin ninguna capa oscura encima. */
.hero__scrim,.hero__media::after,.nav__logo,.nav__links,.hero__body,.hero__scroll{
  transition:opacity 1.5s var(--ease);
}
.hero.is-cine .hero__scrim,
.hero.is-cine .hero__media::after,
.hero.is-cine .nav__logo,
.hero.is-cine .nav__links,
.hero.is-cine .hero__body,
.hero.is-cine .hero__scroll{opacity:0 !important;pointer-events:none}

/* ═══ SOUND GATE (MODAL DE ENTRADA CON SONIDO) ═══════════════════════
   Aparece al cargar la página para que el visitante pueda activar el
   audio inmersivo de la producción FPV de inmediato.
   CRÍTICO: backdrop-filter: none (SIN desenfoque) para que la imagen
   del video impacte al 100% y tiente a escuchar el audio. */
.sound-gate{
  position:fixed;inset:0;z-index:95;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(8,9,11,.48);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1;visibility:visible;
  transition:opacity .42s cubic-bezier(.16,1,.3,1),visibility .42s ease;
  pointer-events:auto;
}
.sound-gate.is-dismissed{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.sound-gate__card{
  position:relative;
  width:100%;max-width:440px;
  background:rgba(18,20,24,.96);
  border:1px solid rgba(255,255,255,.14);
  border-top:2px solid var(--c-rojo-senal);
  box-shadow:0 24px 60px rgba(0,0,0,.85),0 0 35px rgba(229,50,45,.14);
  padding:clamp(28px,4vw,38px) clamp(22px,3.5vw,34px);
  text-align:center;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:scale(1);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.sound-gate.is-dismissed .sound-gate__card{
  transform:scale(.95);
}
.sound-gate__badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-hielo-050);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  padding:5px 12px;border-radius:999px;
  margin-bottom:18px;
}
.sound-gate__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-rojo-senal);
  box-shadow:0 0 8px var(--c-rojo-senal);
  animation:cafpv-pulse 1.8s infinite;
}
.sound-gate__title{
  font-family:var(--ff-title);
  font-size:clamp(26px,3.8vw,34px);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.15;
  color:#ffffff;
  margin:0 0 12px;
}
.sound-gate__desc{
  font-family:var(--ff-text);
  font-size:14.5px;
  line-height:1.55;
  color:var(--c-texto-tenue);
  margin:0 0 24px;
  text-wrap:pretty;
}
.sound-gate__actions{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.sound-gate__btn{
  width:100%;
  cursor:pointer;
}
.sound-gate__btn .btn__in{
  width:100%;justify-content:center;
  gap:10px;font-size:13px;
  padding:15px 24px;
}
.sound-gate__ico{
  flex-shrink:0;
}
.sound-gate__skip{
  background:none;border:none;
  color:var(--c-humo-400);
  font-family:var(--ff-mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;padding:6px 12px;
  transition:color .2s ease;
}
.sound-gate__skip:hover{
  color:var(--c-hielo-050);
}

/* ── Botón de sonido del Hero (arriba en la barra para evitar cualquier colisión con widgets inferiores) ── */
.hero__sound-wrap{
  flex:none;
  margin-left:clamp(14px,2vw,24px);
  z-index:6;pointer-events:auto;
  transition:opacity 1.5s var(--ease);
}
.hero.is-cine .hero__sound-wrap{opacity:.75}
.hero.is-cine .hero__sound-wrap:hover{opacity:1}

.hero__sound{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(18,20,24,.92);
  border:1px solid rgba(255,255,255,.2);
  color:var(--c-hielo-050);
  font-family:var(--ff-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.hero__sound:hover{
  background:#1a1d22;
  border-color:var(--c-rojo-senal);
  color:var(--c-hielo-050);
  transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(255,46,46,.25);
}
.hero__sound.is-active{
  border-color:var(--c-rojo-senal);
  color:#ffffff;
}
.hero__sound.is-active .hero__sound-icon--on{
  color:var(--c-rojo-senal);
}
.hero__sound-icon{
  flex-shrink:0;
  transition:color .2s ease;
}

/* Superpuesta, no en el flujo: antes era hija real del flex column del
   hero y le restaba altura a hero__body. Como overlay, el video siempre cubre el hero
   entero por sí solo. En desktop distribuye logo, enlaces y botón de sonido.
   En mobile muestra el botón de sonido arriba a la derecha sin obstrucciones. */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:5;
  max-width:var(--ancho);margin:0 auto;
  padding:clamp(20px,3.5vw,40px) var(--sp-borde);
  display:flex;align-items:center;column-gap:20px;
}
@media (max-width:859px){
  .nav{
    position:absolute;top:0;left:0;right:0;z-index:8;
    padding:clamp(16px,4vw,24px) var(--sp-borde);
    display:flex;justify-content:flex-end;align-items:center;
    pointer-events:none;
    max-width:none;
  }
  .nav__logo,.nav__links{display:none !important}
  .hero__sound-wrap{margin-left:0;pointer-events:auto}
}
.nav__logo{display:block;flex:none;line-height:0}
.nav__logo img{width:clamp(160px,18vw,230px);height:auto}
.nav__links{
  margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
}
.nav__links a{color:var(--c-texto-tenue)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--c-hielo-050)}

.hero__body{
  position:relative;z-index:4;flex:1;
  display:flex;align-items:flex-end;
  width:100%;max-width:var(--ancho);margin:0 auto;
  padding:0 var(--sp-borde) clamp(48px,7vw,104px);
}
.hero__inner{max-width:1120px}

.hero__eyebrow{
  display:flex;align-items:center;gap:12px;
  margin:0 0 clamp(18px,2.5vw,26px);
  color:var(--c-texto-tenue);
}

.hero__title{
  margin:0;
  font-family:var(--ff-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:.88;
  font-size:var(--fs-hero);color:var(--c-hielo-050);
}
/* Máscara por línea. El padding evita que se corten tildes y colas. */
.hero__title .line{
  display:block;overflow:hidden;
  padding:.06em .02em .03em;
  margin:-.06em -.02em -.03em;
}
html.js .hero__title .line > span{display:block;transform:translateY(112%)}
html.js .hero--in .hero__title .line > span{
  transform:none;
  transition:transform 1s var(--ease) var(--d,0s);
}

.hero__lead{
  margin:clamp(20px,2.6vw,30px) 0 0;
  font-size:clamp(18px,1.9vw,27px);line-height:1.35;
  color:var(--c-hielo-050);max-width:22ch;text-wrap:balance;
}

.hero__cta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,48px);
}

.hero__scroll{
  position:absolute;z-index:4;left:var(--sp-borde);bottom:18px;
  display:flex;align-items:center;gap:12px;
  color:var(--c-texto-tenue);pointer-events:none;
}
.hero__scroll .bar{
  width:54px;height:1px;background:var(--c-humo-500);
  transform:skewX(calc(-1 * var(--angulo)));position:relative;overflow:hidden;
}
.hero__scroll .bar::after{
  content:"";position:absolute;inset:0;background:var(--c-hielo-050);
  transform:translateX(-100%);animation:sweep 2.4s var(--ease) infinite;
}
@keyframes sweep{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(100%)}
  100%{transform:translateX(100%)}
}
@media (max-width:900px){.hero__scroll{display:none}}

/* ═══ MANIFIESTO ════════════════════════════════════════════════════ */
.manifiesto{padding-top:clamp(64px,8vw,120px)}
.manifiesto .hr{margin-bottom:clamp(36px,4.5vw,60px)}
.manifiesto__big{
  margin:0;font-size:clamp(19px,2.3vw,32px);line-height:1.4;
  color:var(--c-hielo-050);max-width:30ch;text-wrap:pretty;
}
.manifiesto__sub{
  margin:clamp(20px,2.4vw,30px) 0 0;
  font-size:clamp(15px,1.25vw,18px);line-height:1.7;
  color:var(--c-texto-tenue);max-width:62ch;text-wrap:pretty;
}

/* ═══ SECCIONES ═════════════════════════════════════════════════════ */
.sec{padding-top:clamp(72px,10vw,152px)}
.sec__title{margin:0 0 clamp(32px,4.5vw,56px)}

.sec__titlerow{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px;
  margin-bottom:clamp(32px,4.5vw,56px);
}
.sec__aside{
  margin:0 0 10px auto;max-width:320px;
  font-size:14.5px;line-height:1.6;color:var(--c-texto-tenue);
}

.duo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(32px,5vw,88px);align-items:start;
}

/* ═══ MARCAS / CLIENTES ═════════════════════════════════════════════ */
.sec--marcas{padding-top:clamp(64px,8vw,120px)}
.marcas-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;background:#e2e5e9;
  border:1px solid #e2e5e9;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
@media (min-width:560px){.marcas-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:860px){.marcas-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.marcas-grid{grid-template-columns:repeat(6,1fr)}}

.marca{
  background:#ffffff;
  padding:clamp(16px,2vw,24px) clamp(16px,2vw,22px);
  display:flex;align-items:center;justify-content:center;
  min-height:96px;
  transition:background .22s ease,box-shadow .22s ease;
  box-shadow:inset 0 0 0 0 var(--c-rojo-senal);
}
.marca:hover{
  background:#f8fafc;
  box-shadow:inset 0 3px 0 0 var(--c-rojo-senal);
}
.marca img{
  max-width:84%;max-height:46px;width:auto;height:auto;
  object-fit:contain;
  opacity:.96;
  filter:none;
  image-rendering:-webkit-optimize-contrast;
  transition:opacity .25s ease,transform .25s var(--ease);
}
.marca:hover img{
  opacity:1;
  transform:scale(1.08);
}

/* En dispositivos táctiles/móviles sin hover, las marcas se muestran claras y nítidas en su fondo blanco */
@media (hover:none), (max-width:859px){
  .marca{
    background:#ffffff;
  }
  .marca img{
    opacity:1;
    filter:none;
  }
}

.nav__ig{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--c-hielo-050) !important;
}
.nav__ig:hover{color:var(--c-rojo-senal) !important}
.btn--ig svg{flex:none}

/* ═══ TRABAJOS ══════════════════════════════════════════════════════ */
/* Rejilla editorial: convive un 16:9 con verticales 9:16 sin recortar
   ninguno. En 1 columna se apilan en el orden del documento. */
.works{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.work{grid-column:span 12}
/* Regla simétrica a la de abajo: en el teléfono el 16:9 es el formato
   ajeno (es el que se recorta al vuelo en el hero), así que acá se
   oculta y sólo queda el 9:16, que es el nativo. */
.work--wide{display:none}
.work--tall{grid-column:span 12}
.work--cta{grid-column:span 12}

@media (min-width:860px){
  .work--wide{display:block;grid-column:span 6}
  /* El 9:16 es material pensado para el teléfono. Al lado de un 16:9 en
     escritorio queda como una franja angosta y desmiente el formato.
     Se muestra sólo en pantallas donde es el formato natural; el reel
     vertical ya tiene su lugar en el hero cuando el aparato está en
     retrato. Oculto también evita que el observer cargue ese player. */
  .work--tall{display:none}
  .work--cta{
    grid-column:span 12;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    min-height:150px;
  }
}

.work{
  position:relative;
  border:1px solid var(--c-asfalto-700);
  background:var(--c-carbon-900);
  transition:border-color .25s ease,transform .35s var(--ease);
  text-align:left;
}
.work:hover,.work:focus-within{border-color:var(--c-humo-500)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .work:hover{transform:translateY(-4px)}
}

.work__media{
  position:relative;overflow:hidden;
  background:repeating-linear-gradient(-79deg,#15171A 0 16px,#101216 16px 32px);
}
.work--wide .work__media{aspect-ratio:16/9}
.work--tall .work__media{aspect-ratio:9/16}

/* Controles interactivos para ítems con múltiples videos */
.work__controls{
  position:absolute;top:12px;right:12px;z-index:4;
  display:flex;align-items:center;gap:6px;
}
.work__pills{
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(14,15,17,.88);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.work__pill{
  background:transparent;border:0;
  color:var(--c-texto-tenue);
  font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;
}
.work__pill:hover{color:var(--c-hielo-050)}
.work__pill.is-active{
  background:var(--c-rojo-senal);color:#ffffff;
  font-weight:600;box-shadow:0 2px 8px rgba(255,46,46,.4);
}
.work__arrow{
  width:26px;height:26px;border-radius:50%;
  background:rgba(14,15,17,.88);border:1px solid rgba(255,255,255,.15);
  color:var(--c-hielo-050);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:all .2s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.work__arrow:hover{
  border-color:var(--c-rojo-senal);color:var(--c-rojo-senal);
  background:#1a1d22;
}
.work__header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.work__count{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-rojo-senal);background:rgba(255,46,46,.12);
  border:1px solid rgba(255,46,46,.25);padding:2px 8px;border-radius:3px;
}

.work__frame{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.work__frame.is-playing{opacity:1}
.work__frame iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;pointer-events:none;
}
.work--wide .work__frame iframe{width:100%;height:56.25%;min-height:100%;min-width:177.78%}
.work--tall .work__frame iframe{width:100%;height:100%;min-width:100%;min-height:100%}

.work__mark{
  position:absolute;left:clamp(14px,1.4vw,20px);bottom:clamp(14px,1.4vw,20px);
  pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

/* Botón de reproducción para Ahorro de datos / movimiento reducido. */
.work__play{
  position:absolute;inset:0;z-index:2;
  display:none;align-items:center;justify-content:center;gap:12px;
  background:rgba(14,15,17,.35);border:0;cursor:pointer;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-hielo-050);
}
.work__play.is-on{display:flex}
.work__play:hover{background:rgba(14,15,17,.15)}

.work__body{padding:clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px) clamp(18px,1.8vw,24px)}
.work__title{
  margin:0;font-family:var(--ff-display);font-weight:500;
  text-transform:uppercase;letter-spacing:.03em;line-height:1;
  font-size:clamp(22px,2.4vw,30px);color:var(--c-hielo-050);
}
.work__kind{display:block;margin-top:8px;color:var(--c-texto-tenue);font-size:10px;letter-spacing:.2em}

/* Tarjeta-CTA que cierra la rejilla. */
.work--cta{
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  padding:clamp(24px,2.8vw,40px);min-height:160px;
}
.work--cta:hover{transform:none}
.work__ctatitle{
  margin:0;font-family:var(--ff-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.02;
  font-size:clamp(26px,2.6vw,38px);max-width:16ch;
}

/* ═══ SERVICIOS AUDIOVISUALES ═══════════════════════════════════════ */
.grid-serv{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;background:var(--c-asfalto-700);
  border:1px solid var(--c-asfalto-700);
}
@media (min-width:680px){ .grid-serv{grid-template-columns:repeat(2,1fr)} }

.serv{
  background:var(--c-carbon-900);
  padding:clamp(14px,1.5vw,20px) clamp(16px,1.8vw,24px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:66px;
  transition:background .22s ease,box-shadow .22s ease,transform .22s ease;
  box-shadow:inset 0 0 0 0 var(--c-rojo-senal);
}
.serv:hover{
  background:#14171a;
  box-shadow:inset 3px 0 0 0 var(--c-rojo-senal);
}
.serv__start{
  display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);
  flex:1;min-width:0;
}
.serv__num{
  font-size:12px;letter-spacing:.14em;
  color:var(--c-rojo-senal);
  flex-shrink:0;opacity:.95;
}
.serv__title{
  margin:0;font-family:var(--ff-display);font-weight:500;
  text-transform:uppercase;letter-spacing:.025em;line-height:1.15;
  font-size:clamp(16px,1.5vw,21px);color:var(--c-hielo-050);
  transition:color .2s ease;
}
.serv:hover .serv__title{
  color:#ffffff;
}
.serv__tip{
  color:var(--c-humo-500);flex-shrink:0;
  transition:color .22s ease,transform .22s ease;
}
.serv:hover .serv__tip{
  color:var(--c-rojo-senal);
  transform:translateX(3px);
}

/* ═══ POSTPRODUCCIÓN ════════════════════════════════════════════════ */
.post__video{
  position:relative;aspect-ratio:9/16;max-width:340px;width:100%;
  margin-top:clamp(28px,3.4vw,44px);
  border:1px solid var(--c-asfalto-700);overflow:hidden;
  background:repeating-linear-gradient(-79deg,#15171A 0 16px,#101216 16px 32px);
}
.post__video .work__frame iframe{height:100%;width:56.25%;min-width:100%;min-height:177.78%}

.steps{display:flex;flex-direction:column}
.step{
  display:flex;align-items:center;gap:16px;
  padding:clamp(15px,1.7vw,20px) 0;
  border-top:1px solid var(--c-asfalto-700);
}
.step:last-of-type{border-bottom:1px solid var(--c-asfalto-700)}
.step span{
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.03em;font-size:clamp(22px,2.2vw,29px);
  color:var(--c-hielo-050);line-height:1;
}

/* ═══ EL PILOTO ═════════════════════════════════════════════════════ */
.piloto{padding-bottom:clamp(72px,10vw,152px)}
.piloto__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(32px,5vw,80px);align-items:center;
}
/* Panel gráfico de marca. Al llegar el retrato real se sustituye por
   <picture> con el mismo aspecto 4:5 (ver README, "Assets pendientes"). */
.piloto__panel{
  position:relative;aspect-ratio:4/5;max-width:460px;width:100%;
  border:1px solid var(--c-asfalto-700);overflow:hidden;
  background:
    linear-gradient(180deg,rgba(14,15,17,0) 40%,rgba(14,15,17,.9) 100%),
    repeating-linear-gradient(-79deg,#15171A 0 16px,#101216 16px 32px);
}
.piloto__panel img{
  position:absolute;top:50%;left:50%;width:74%;height:auto;
  transform:translate(-50%,-54%) skewX(calc(-1 * var(--angulo)));
  opacity:.09;
}
/* El marco es 4:5 y el retrato viene apaisado, así que el recorte manda.
   object-position corre el encuadre hacia el sujeto: si la cara quedara
   cortada, se ajusta acá y en ningún otro lado. */
.piloto__panel .foto{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 42%;
  opacity:1;transform:none;
}
/* El degradado del fondo del panel queda detrás de la foto real y no le
   hace nada: sin este velo propio, "+5 años de vuelo" cae sobre la
   frente iluminada y se pierde. Sube encima de la foto, debajo de la
   leyenda. */
.piloto__panel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,15,17,0) 52%,rgba(14,15,17,.88) 100%);
}
.piloto__panel figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,2vw,24px);
  color:var(--c-texto-tenue);
}
.piloto__rule{
  position:absolute;left:0;bottom:clamp(52px,6vw,72px);z-index:2;
  width:clamp(44px,7vw,88px);height:2px;background:var(--c-rojo-senal);
  transform:skewX(calc(-1 * var(--angulo)));
}

/* ═══ TRANSICIÓN A CONTACTO ═════════════════════════════════════════ */
/* El corte a 11° del sistema, a ancho completo. La línea roja se dibuja
   sobre la arista exacta porque vive en el mismo espacio del SVG. */
.wipe{display:block;width:100%;height:clamp(52px,10vw,150px);margin-bottom:-1px}
.wipe__edge{
  stroke-dasharray:1;stroke-dashoffset:1;
}
html.js .wipe.is-in .wipe__edge{transition:stroke-dashoffset 1.1s var(--ease)}
.wipe.is-in .wipe__edge{stroke-dashoffset:0}
html:not(.js) .wipe__edge{stroke-dashoffset:0}

/* ═══ CONTACTO ══════════════════════════════════════════════════════ */
.contacto{background:var(--c-hielo-050);color:var(--c-carbon-900)}
.contacto .wrap{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,9vw,132px)}
.contacto .head__label{color:var(--c-carbon-900)}
.contacto .head__line{background:rgba(138,144,149,.45)}
.contacto .display{color:var(--c-carbon-900)}
.contacto__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(32px,5vw,72px);align-items:end;
}
.contacto__side{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,28px);align-items:flex-start}
.contacto__side p{margin:0;font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--c-humo-500);max-width:42ch;text-wrap:pretty}
.contacto a{color:var(--c-carbon-900)}

/* ═══ FOOTER ════════════════════════════════════════════════════════ */
.foot{background:var(--c-carbon-900);border-top:1px solid var(--c-asfalto-700)}
.foot__grid{
  max-width:var(--ancho);margin:0 auto;
  padding:clamp(48px,6vw,80px) var(--sp-borde) clamp(28px,3vw,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(32px,4vw,56px);
}
.foot__col{display:flex;flex-direction:column;gap:12px}
.foot__brand{gap:20px}
.foot__brand img{width:clamp(150px,16vw,190px);height:auto}
.foot__head{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-texto-tenue);margin-bottom:6px;
}
.foot__col a,.foot__col button{
  font-family:var(--ff-text);font-size:14.5px;color:var(--c-texto-tenue);
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  transition:color .18s ease;
}
.foot__col a:hover,.foot__col button:hover,.foot__col a:focus-visible,.foot__col button:focus-visible{color:var(--c-hielo-050)}
.foot__legal{
  max-width:var(--ancho);margin:0 auto;
  padding:0 var(--sp-borde) clamp(96px,10vw,120px);
}
.foot__legal .hr{margin-bottom:20px}
.foot__legal span{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-texto-tenue);
}

/* ═══ FAB WHATSAPP ══════════════════════════════════════════════════ */
.wa-fab{
  position:fixed;right:22px;bottom:86px;z-index:55;
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:var(--c-carbon-900);border:1px solid var(--c-humo-500);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  transition:transform .18s ease,border-color .18s ease;
}
.wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-2px);border-color:var(--c-niebla-300)}
.wa-fab svg{width:24px;height:24px}
@media (max-width:420px){.wa-fab{bottom:80px;right:16px}}

/* ═══ Preferencias del usuario ══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .hero__title .line > span{transform:none;transition:none}
  .head__red{transform:skewX(calc(-1 * var(--angulo))) scaleX(1) !important;transition:none !important}
  .wipe__edge{stroke-dashoffset:0 !important;transition:none !important}
  .hero__scroll .bar::after{animation:none;transform:translateX(0);opacity:.35}
  .hero__frame,.work__frame{transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

@media print{
  .hero__media,.wa-fab,.progress,.grain,.work__frame{display:none !important}
  body{background:#fff;color:#000}
}

/* ── Escalonado (sin atributos style, para poder usar CSP estricta) ── */
.d0{--d:0s}
.d1{--d:.09s}
.d2{--d:.18s}
.d3{--d:.27s}
.d4{--d:.36s}

/* ═══ 404 ═══════════════════════════════════════════════════════════ */
.err{
  min-height:100svh;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:clamp(18px,2.4vw,28px);
  padding:clamp(48px,8vw,96px) 0;
}
.err .nav__logo{margin-bottom:clamp(20px,4vw,48px)}
.err .nav__logo img{width:clamp(160px,18vw,230px);height:auto}
.err__code{margin:0}
.err__text{margin:0;max-width:46ch}
.err .btn{margin-top:clamp(8px,1.5vw,16px)}