/* ============================================================
   AEROTV — Landing "Aire-aire, sin el costo de un segundo avión"
   Traducción fiel del PDF maestro a HTML/CSS/JS vanilla.
   Tipografía: Okta Neue (única familia, todos los pesos).
   ============================================================ */

/* ---------- Okta Neue @font-face ---------- */
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-thin.ttf') format('truetype');
  font-weight:100; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-extra-light.ttf') format('truetype');
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-regular-italic.ttf') format('truetype');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-medium-italic.ttf') format('truetype');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-semi-bold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-heavy.ttf') format('truetype');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Okta Neue';
  src:url('assets/fonts/okta-neue-black.ttf') format('truetype');
  font-weight:900; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --bg: #050a0b;
  --bg-petrol: #04181c;
  --bg-card: #101010;
  --line: #22292a;
  --white: #ffffff;
  --grey-body: #c7ced1;
  --grey-counter: #9aa3a6;
  --lime: #e6ff2e;
  --cyan: #3fb6d9;

  /* Okta Neue única familia. El sans-serif genérico solo actúa
     como red de seguridad si, por algún motivo, el .ttf no cargó —
     nunca se usa Montserrat ni ninguna otra fuente intencionalmente. */
  --font: 'Okta Neue', sans-serif;

  --container: 1200px;
  --radius-lg: 24px;
  --radius-md: 16px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--font);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}
h1,h2,h3{ font-family:var(--font); font-weight:900; }

@media (min-width:1024px){
  .container{ padding:0 3rem; }
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;
  top:-100px;
  left:1rem;
  background:var(--lime);
  color:#050a0b;
  padding:.7rem 1.2rem;
  border-radius:8px;
  font-weight:700;
  z-index:1000;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- reveal animations ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.reveal-stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.1s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.2s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.3s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   HERO — el video es el elemento principal, el texto vive
   integrado sobre él (no es un bloque aparte con letterbox).
   ============================================================ */
.hero{
  position:relative;
  width:100%;
  height:clamp(420px, 68vw, 780px);
  max-height:82vh;
  overflow:hidden;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
/* Arsa.mp4 es un reel de 16:9 con varias escenas encadenadas.
   object-fit:cover + object-position centrado-alto mantiene la
   aeronave visible en la gran mayoría del recorrido del video sin
   recurrir a un bloque separado de letterbox/blur. */
.hero__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
}
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(5,10,11,0) 0%, rgba(5,10,11,.05) 42%, rgba(5,10,11,.82) 80%, rgba(5,10,11,.96) 100%);
  pointer-events:none;
}
.hero__top{
  position:absolute;
  top:1.75rem;
  left:1.5rem;
  z-index:2;
}
.hero__logo{ width:112px; height:auto; }
.hero__content{
  position:relative;
  z-index:2;
  padding:0 1.5rem 2.75rem;
}
.hero__title{
  font-size:clamp(2.1rem, 8vw, 3.6rem);
  line-height:1.05;
  letter-spacing:-.01em;
  max-width:15ch;
}
.hero__title mark{
  background:none;
  color:var(--lime);
}
.hero__sub{
  margin-top:1.1rem;
  font-size:clamp(.95rem, 2.4vw, 1.05rem);
  font-weight:400;
  color:var(--grey-body);
  max-width:36ch;
}
.hero__sub em{ font-style:italic; color:var(--lime); }

@media (min-width:760px){
  .hero__top{ top:2.25rem; left:3rem; }
  .hero__content{ padding:0 3rem 3.5rem; }
}

/* ============================================================
   Destellos atmosféricos — glow cinematográfico suave, cyan /
   azul petróleo / blanco muy tenue, detrás del contenido de cada
   sección oscura. Sin formas duras, sin partículas, sin brillo
   saturado. Cada sección tiene una posición distinta para que no
   se sienta repetido.
   ============================================================ */
.credibilidad, .problema, .alcance, .pricing{
  position:relative;
  overflow:hidden;
}
.credibilidad > .container, .problema > .container,
.alcance > .container, .pricing > .container{
  position:relative;
  z-index:1;
}
.credibilidad::before, .problema::before,
.alcance::before, .pricing::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  filter:blur(10px);
}
.credibilidad::before{
  background:
    radial-gradient(circle at 12% 15%, rgba(63,182,217,.14), transparent 38%),
    radial-gradient(circle at 88% 70%, rgba(0,120,150,.16), transparent 42%),
    radial-gradient(circle at 60% 95%, rgba(255,255,255,.05), transparent 30%);
}
.problema::before{
  background:
    radial-gradient(circle at 85% 10%, rgba(63,182,217,.13), transparent 36%),
    radial-gradient(circle at 8% 80%, rgba(0,120,150,.15), transparent 40%);
}
.alcance::before{
  background:
    radial-gradient(circle at 15% 20%, rgba(0,151,178,.16), transparent 35%),
    radial-gradient(circle at 85% 65%, rgba(255,255,255,.06), transparent 28%);
}
.pricing::before{
  background:
    radial-gradient(circle at 80% 20%, rgba(63,182,217,.12), transparent 34%),
    radial-gradient(circle at 20% 85%, rgba(0,120,150,.14), transparent 38%);
}

.credibilidad{
  background:var(--bg);
  padding:3rem 0 4.5rem;
}
.credibilidad__headline{
  font-family:var(--font);
  font-weight:900;
  font-size:clamp(3.8rem, 22vw, 10rem);
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px #6b7476;
  background:linear-gradient(180deg,#8b9496,#3a4042);
  -webkit-background-clip:text;
  background-clip:text;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.2rem .6rem;
  margin-bottom:2.75rem;
}
.credibilidad__headline span{
  font-size:clamp(1.15rem, 3.4vw, 2rem);
  color:var(--white);
  -webkit-text-fill-color:var(--white);
  font-weight:800;
}
.credibilidad__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.credibilidad__card{
  position:relative;
  border:2px solid var(--lime);
  border-radius:var(--radius-lg);
  overflow:hidden;
  /* 9:16 = relación nativa exacta de Sundownjet y Flyzar.
     Al coincidir el contenedor con el video no hay ningún recorte:
     cover y contain producen el mismo resultado. */
  aspect-ratio:9/16;
  background:#000;
}
.credibilidad__video{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (min-width:640px){
  .credibilidad__grid{ grid-template-columns:1fr 1fr; gap:1.75rem; }
}

/* ============================================================
   PROBLEMA — bloque editorial grande, con aire y drama.
   ============================================================ */
.problema{
  background:var(--bg);
  padding:5.5rem 0;
}
.problema__head{
  font-size:clamp(1.7rem, 6vw, 2.6rem);
  line-height:1.25;
  max-width:20ch;
  margin-bottom:3.5rem;
}
.techo-badge{
  color:var(--cyan);
  font-weight:900;
}
.problema__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3.5rem;
}
.problema__list{
  list-style:none;
  font-size:1.2rem;
  color:var(--white);
  font-weight:500;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.problema__cost{ display:flex; flex-direction:column; align-items:flex-start; }
.problema__figure{
  font-family:var(--font);
  font-weight:900;
  font-size:clamp(2.6rem, 13vw, 5rem);
  color:var(--grey-counter);
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.problema__more{
  margin-top:.6rem;
  font-weight:700;
  font-size:1.05rem;
  color:var(--white);
  align-self:flex-end;
}
@media (min-width:760px){
  .problema__grid{ grid-template-columns:1fr 1fr; align-items:start; column-gap:4rem; }
}

/* ============================================================
   SOLUCIÓN + METODOLOGÍA
   ============================================================ */
.solucion{
  position:relative;
  background:radial-gradient(140% 100% at 50% 0%, var(--bg-petrol) 0%, var(--bg) 60%);
  padding:6.5rem 0 7rem;
  text-align:center;
  overflow:hidden;
}
.solucion::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  filter:blur(10px);
  background:
    radial-gradient(circle at 20% 12%, rgba(63,182,217,.15), transparent 34%),
    radial-gradient(circle at 82% 55%, rgba(0,120,150,.14), transparent 40%),
    radial-gradient(circle at 30% 92%, rgba(255,255,255,.05), transparent 30%);
}
.solucion__kicker{
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(2.4rem, 8.5vw, 3.6rem);
  position:relative;
  z-index:1;
}
.solucion__lead{
  margin:1.4rem auto 6rem;
  max-width:42ch;
  color:var(--grey-body);
  font-size:clamp(1rem, 2.4vw, 1.15rem);
  position:relative;
  z-index:1;
}
.metodologia__grid{
  display:flex;
  flex-direction:column;
  gap:5.5rem;
  text-align:left;
  position:relative;
  z-index:1;
}

/* Cada bloque es una unidad: contenido (título+texto) + imagen,
   siempre dos únicos hijos de grid — así nunca se desarma la
   composición sin importar cuántas líneas tenga cada texto. */
.metodo-card{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  align-items:center;
}
.metodo-card__content{
  display:flex;
  flex-direction:column;
}
.metodo-card__title{
  font-size:clamp(1.5rem, 4.2vw, 1.9rem);
  margin-bottom:1rem;
}
/* La línea vertical acompaña únicamente al párrafo descriptivo,
   nunca al título — se estira a la altura del texto mediante flex. */
.metodo-card__description{
  display:flex;
  align-items:stretch;
  gap:.9rem;
}
.metodo-card__accent{
  flex:0 0 2px;
  width:2px;
  background:var(--lime);
  border-radius:2px;
}
.metodo-card__text{
  color:var(--grey-body);
  font-size:1.02rem;
  max-width:42ch;
}
.metodo-card__media{ justify-self:center; width:100%; }
.metodo-card__media img{ width:100%; border-radius:var(--radius-md); }

/* Bloque "Referencias reales": recreamos el marco tipo teléfono en
   CSS ya que la foto de origen es una foto plana, no un mockup. */
.metodo-card__media--phone{
  max-width:320px;
  background:var(--white);
  border-radius:28px;
  padding:.6rem;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.metodo-card__media--phone img{
  border-radius:16px;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* Bloques "Identidad de marca" y "Shoot list": la imagen ya es una
   tarjeta terminada, solo se le da esquinas + sombra. */
.metodo-card__media--card{ max-width:360px; }
.metodo-card__media--card img{
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}

/* Bloque "Primeras generaciones": el mockup de teléfono ya viene
   incluido en la propia imagen (collage de 3 fotos) — no se le
   agrega otro marco encima. */
.metodo-card__media--composite{ max-width:320px; }
.metodo-card__media--composite img{
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}

@media (min-width:760px){
  .metodo-card{ grid-template-columns:1.05fr .95fr; gap:3.5rem; }
  /* Zigzag: igual que el PDF, los bloques 2 y 4 invierten el orden
     (media a la izquierda, contenido a la derecha). */
  .metodo-card:nth-child(even){ grid-template-columns:.95fr 1.05fr; }
  .metodo-card:nth-child(even) .metodo-card__media{ order:-1; }
}

/* ============================================================
   EJEMPLO DE ALCANCE DIGITAL
   ============================================================ */
.alcance{
  background:var(--bg);
  padding:5.5rem 0;
  text-align:center;
}
.alcance h2{
  font-size:clamp(1.8rem, 6vw, 2.6rem);
  margin-bottom:2.75rem;
}
.alcance__media-wrap{
  border:2px solid var(--lime);
  border-radius:var(--radius-lg);
  overflow:hidden;
  max-width:720px;
  margin:0 auto 3rem;
  /* 16:9 = relación nativa exacta de Air to Air 1st test V2.mp4.
     Sin recorte: cover y contain coinciden. */
  aspect-ratio:16/9;
  background:#000;
}
.alcance__media{ width:100%; height:100%; object-fit:cover; }
.alcance__stats{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem 1rem;
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.stat__num{
  font-family:var(--font);
  font-weight:900;
  font-size:clamp(1.8rem, 6.5vw, 2.3rem);
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block;
  margin-top:.2rem;
  font-weight:600;
  font-size:1.02rem;
  color:var(--white);
}
.alcance__footnote{
  margin-top:2.5rem;
  color:var(--grey-body);
  font-size:.92rem;
}
@media (min-width:560px){
  .alcance__stats{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing{
  background:var(--bg);
  padding:2.5rem 0 6rem;
}
.pricing__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  max-width:460px;
  margin:0 auto;
}
.price-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:3rem 2.25rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.price-card--primary{
  border-color:rgba(230,255,46,.5);
  box-shadow:0 0 70px rgba(230,255,46,.09);
}
.price-card__price{
  font-family:var(--font);
  font-weight:900;
  font-size:clamp(2.2rem, 8.5vw, 2.8rem);
  color:var(--lime);
  text-shadow:0 0 26px rgba(230,255,46,.5);
  margin-bottom:2rem;
}
.price-card__list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin-bottom:2.5rem;
  color:var(--grey-body);
  font-size:1rem;
  text-align:left;
  width:100%;
}
.price-card__list li{ display:flex; gap:.7rem; }
.price-card__list li::before{
  content:"";
  flex:0 0 20px;
  height:2px;
  margin-top:.8em;
  background:var(--lime);
}
.price-card__title{
  font-size:1.9rem;
  margin-bottom:1.4rem;
}
.price-card__text{
  color:var(--grey-body);
  margin-bottom:2.25rem;
  max-width:28ch;
}
.btn{
  display:inline-block;
  font-family:var(--font);
  font-weight:800;
  font-size:1.02rem;
  padding:1.05rem 2.6rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-lime{
  background:var(--lime);
  color:#0a0a00;
}
.btn-lime:hover, .btn-lime:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(230,255,46,.35);
}
.btn:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }

@media (min-width:700px){
  .pricing__grid{ grid-template-columns:1fr 1fr; max-width:none; gap:2.5rem; }
  .price-card{ padding:3.5rem 2.5rem; }
}

/* ============================================================
   FOOTER — dos columnas con jerarquía propia, nunca comprimido
   en una sola línea.
   ============================================================ */
.site-footer{
  background:#000;
  padding:3.5rem 1.5rem 3rem;
  display:flex;
  flex-direction:column;
  gap:2.25rem;
}
.site-footer__brand{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.site-footer__logo{ width:120px; }
.site-footer__contact p{
  font-size:.92rem;
  color:var(--grey-body);
  margin-bottom:.5rem;
}
.site-footer__contact a{ text-decoration:none; }
.site-footer__contact a:hover{ color:var(--lime); }
.site-footer__legal{
  font-size:.78rem;
  color:#5a6062;
}

@media (min-width:760px){
  .site-footer{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    padding:3rem 3rem 2.5rem;
  }
}

/* ============================================================
   Accesibilidad / touch targets
   ============================================================ */
a, button{ min-height:24px; }
@media (hover:none){
  .btn{ padding:1.1rem 2.6rem; }
}