/* ============================================================
   DRONE STORE — Sistema base
   Tokens heredados de V1 sin cambios. Solo lo compartido por
   todas las páginas: tipografía, botones, nav, footer, reveals,
   marcas de pendiente y los tres tratamientos de imagen.
   ============================================================ */
:root{
  --void:#0A0A0A;      /* fondo de página */
  --carbon:#141414;    /* tarjetas, superficies */
  --graphite:#1A1A1A;  /* superficies elevadas, nav con scroll */
  --graphite-2:#202020;
  --ghost:#F5F5F5;     /* texto primario */
  --steel:#8A8A8A;     /* texto secundario */
  --steel-dim:#5c5c5c;
  --hairline:#2A2A2A;  /* bordes, divisores */
  --white:#FFFFFF;     /* acento en reposo: luz de contorno, CTA */
  --acento:#EFB74E;    /* dorado de los iconos/badges: acento interactivo, solo en hover */

  --amber:#FFB000;     /* solo marcas de texto pendiente */
  --placa:#EDEDED;     /* superficie clara para ilustraciones y renders */
  --placa-linea:#D2D2D2;

  --f-display:'Sora',system-ui,sans-serif;
  --f-body:'Space Grotesk',system-ui,sans-serif;
  --f-mono:'Space Mono','SFMono-Regular',monospace;

  --maxw:1400px;
  --gutter:clamp(1.25rem,5vw,5rem);
  --sect-y:clamp(2.8rem,5vw,5rem);
  --radius:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Fondo de la raíz = color del footer. En iOS, el rebote elástico al llegar al
   final revela el lienzo (no el body): sin esto mostraba el negro --void bajo el
   footer (el "espacio negro grande" en móvil). Con graphite el rebote se funde. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--graphite)}

/* Las navegaciones entre páginas hacen crossfade, no un corte duro */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--ease)}

body{
  background:var(--void);
  color:var(--ghost);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.6;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--white);color:var(--void)}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sect-y)}
/* Los separadores entre secciones se retiraron a pedido del cliente: el ritmo
   lo da el padding de .section. La clase la sigue emitiendo generar_pagina.py;
   la dejamos inerte para no tener que regenerar las 11 páginas. */
.divider-top{}

/* ---------- Tipografía ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--steel);
}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.04}
.h-display{font-size:clamp(3rem,8vw,6.5rem);font-weight:800;line-height:.98}
.h-section{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700}
.h-sub{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.01em}
.lead{color:var(--steel);max-width:52ch;font-size:clamp(1rem,.95rem + .3vw,1.2rem)}
.nota-pie{color:var(--steel-dim);max-width:60ch;font-size:.82rem;line-height:1.5;margin-top:.4rem}
.mono{font-family:var(--f-mono)}
.text-steel{color:var(--steel)}
.dim{color:var(--steel)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 1.8rem;border-radius:var(--radius);
  transition:transform .25s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.btn .ico{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.btn-primary{background:var(--white);color:var(--void);font-weight:700}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:hover .ico{transform:translateX(4px)}
.btn-ghost{border:1px solid var(--hairline);color:var(--ghost)}
.btn-ghost:hover{border-color:var(--white);transform:translateY(-2px)}
.btn-lg{padding:1.2rem 2.4rem;font-size:.85rem}
/* variantes sobre placa clara */
.placa .btn-primary{background:var(--void);color:var(--placa)}
.placa .btn-ghost{border-color:var(--placa-linea);color:var(--void)}
.placa .btn-ghost:hover{border-color:var(--void)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gutter);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* Vignette superior SUAVE: da legibilidad al nav sobre heroes claros (banner del
   EVO Lite) SIN marcar una línea. Es alto (140px) y se desvanece gradual, así que
   no hay borde perceptible. Se apaga al hacer scroll (ahí manda el fondo sólido). */
.nav::before{
  content:"";position:absolute;top:0;left:0;right:0;height:140px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,8,.5), rgba(8,8,8,.2) 50%, transparent);
  transition:opacity .4s var(--ease);
}
.nav.scrolled::before{opacity:0}
.nav.scrolled{
  background:rgba(16,16,16,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--hairline);
  padding-block:1rem;
}
.nav__logo img{height:26px;width:auto}
.nav__links{display:flex;align-items:center;gap:2.4rem}
.nav__links a{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);position:relative;padding-block:.3rem;transition:color .3s var(--ease);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.nav.scrolled .nav__links a{text-shadow:none}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--white);
  transition:width .35s var(--ease);
}
.nav__links a:hover,.nav__links a.active{color:var(--ghost)}
.nav__links a:hover::after,.nav__links a.active::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:1.2rem}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:.4rem}
.nav__burger span{width:22px;height:1.5px;background:var(--ghost);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav.open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){opacity:0}
.nav.open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* barra de progreso de lectura */
.nav__progreso{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--white);transform:scaleX(var(--p,0));transform-origin:left;
  opacity:0;transition:opacity .3s var(--ease);
}
.nav.scrolled .nav__progreso{opacity:1}

/* menú móvil */
.mobile-menu{
  position:fixed;inset:0;z-index:90;background:var(--void);
  display:flex;flex-direction:column;justify-content:center;gap:1.5rem;
  padding:var(--gutter);
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:var(--f-display);font-size:2rem;font-weight:600;color:var(--ghost)}
.mobile-menu a span{font-family:var(--f-mono);font-size:.8rem;color:var(--steel);margin-right:1rem}

/* ---------- Marquee de confianza ---------- */
.trust{border-block:1px solid var(--hairline);padding-block:1.15rem;overflow:hidden}
.trust__track{display:flex;gap:3.5rem;white-space:nowrap;animation:marquee 32s linear infinite;width:max-content}
.trust__track span{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
  display:inline-flex;align-items:center;gap:3.5rem;
}
.trust__track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--steel-dim)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Cabecera de sección ---------- */
.sect-head{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:60ch}
.sect-head .eyebrow{display:inline-block;margin-bottom:1rem}
.sect-head .rule{width:64px;height:2px;background:var(--white);margin-top:1.4rem}
.placa .sect-head .rule{background:var(--void)}

/* ---------- Cabecera de páginas interiores ---------- */
.page-hero{padding-top:11rem;padding-bottom:2rem}
.page-hero .eyebrow{display:inline-block;margin-bottom:1.2rem}
.breadcrumb{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-dim);margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--ghost)}

/* ============================================================
   Tres tratamientos de imagen

   El material original no es homogéneo: 2 fotografías reales,
   3 renders de estudio sobre blanco y 3 ilustraciones isométricas
   verticales. Forzarlos al mismo tratamiento produce manchas
   grises; recortarles el fondo destruye las hélices con desenfoque
   de movimiento. Cada tipo recibe el suyo y ninguna imagen se edita.
   ============================================================ */

/* 1. Banda cinematográfica — SOLO fotografías */
.banda{
  position:relative;min-height:var(--banda-h,clamp(60vh,70vw,86vh));
  display:grid;place-items:center;overflow:hidden;isolation:isolate;
}
.banda__fondo{position:absolute;inset:0;z-index:-1}
.banda__fondo img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask-image:radial-gradient(ellipse 96% 96% at 50% 48%,#000 70%,transparent 100%);
          mask-image:radial-gradient(ellipse 96% 96% at 50% 48%,#000 70%,transparent 100%);
  transform:translate3d(0,var(--py,0),0) scale(1.06);
  will-change:transform;
}
.banda__contenido{position:relative;text-align:center;max-width:60ch;padding-inline:var(--gutter)}
.banda__contenido .lead{margin-inline:auto;font-size:clamp(1rem,.9rem + .45vw,1.2rem);color:#d7d7d7}
.banda__contenido h2,.banda__contenido .lead{text-shadow:0 2px 24px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.6)}
/* En vez de atenuar TODA la imagen (la dejaba apagada), un scrim radial oscurece
   solo detrás del texto y deja los bordes vivos; se refuerza con text-shadow. */
.banda__fondo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 66% at 50% 50%,rgba(8,8,8,.72) 0%,rgba(8,8,8,.4) 46%,transparent 78%),
    linear-gradient(to bottom,rgba(8,8,8,.5) 0%,rgba(8,8,8,.22) 34%,rgba(8,8,8,.32) 66%,rgba(8,8,8,.6) 100%);
}
/* Los heroes traen su propio velo direccional y el texto a la izquierda */
.banda--hero .banda__fondo::after,.ph .banda__fondo::after{display:none}

/* Banda de SECCIÓN (no hero): el texto va a la izquierda para cubrir el negro y
   dejar ver más la imagen a la derecha; el velo es lateral (oscuro a la
   izquierda, transparente a la derecha) en vez de tapar toda la foto. */
.banda:not(.ph){min-height:var(--banda-h,clamp(46vh,52vw,64vh))}
/* El contenido va dentro del mismo contenedor de 1400px que .wrap para que su
   borde izquierdo coincida con las demás secciones (no pegado al gutter). El
   texto se limita a ~52ch dentro de ese contenedor. */
.banda:not(.ph) .banda__contenido{justify-self:center;width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--gutter);text-align:left}
.banda:not(.ph) .banda__contenido > *{max-width:52ch}
.banda:not(.ph) .banda__contenido .lead{margin-inline:0;line-height:1.6}
.banda:not(.ph) .banda__contenido .lead + .lead{margin-top:1.15rem}
/* banda con texto anclado arriba (no centrado verticalmente) — SkyLink 2.0 */
.banda--txt-top{align-content:start}
.banda--txt-top .banda__contenido{align-self:start;padding-top:clamp(3.5rem,10vh,7rem)}
.banda:not(.ph) .banda__fondo img{-webkit-mask-image:none;mask-image:none}
/* Velo lateral más suave: cubre el texto a la izquierda pero deja la imagen de
   la derecha (cámara, controlador) más viva y menos apagada. */
.banda:not(.ph) .banda__fondo::after{
  background:linear-gradient(100deg,rgba(8,8,8,.85) 0%,rgba(8,8,8,.52) 40%,rgba(8,8,8,.1) 74%,rgba(8,8,8,0) 100%);
}

/* 2. Placa técnica clara — renders e ilustraciones, sin recorte */
.placa{
  background:var(--placa);color:var(--void);
  padding-block:clamp(3.5rem,7vw,6rem);
  border-block:1px solid var(--placa-linea);
}
.placa .eyebrow{color:#6a6a6a}
.placa .lead{color:#4a4a4a}
.placa h1,.placa h2,.placa h3{color:var(--void)}
.placa__media img{width:100%;height:auto;object-fit:contain}

/* 3. Placa a dos columnas — ilustraciones verticales junto al texto */
.placa--par .placa__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.placa--par .placa__media img{max-height:min(78vh,760px);margin-inline:auto;width:auto}
.placa--inv .placa__media{order:2}

/* ============================================================
   Marcas de texto pendiente (R5)
   Se activan con <body class="ver-pendientes">.
   Quitar esa clase las apaga todas sin tocar el contenido.
   ============================================================ */
body.ver-pendientes .tbd{
  position:relative;
  background:rgba(255,176,0,.07);
  box-shadow:inset 0 0 0 1px rgba(255,176,0,.45);
  border-radius:3px;
  padding:.5rem .65rem;
  margin-block:.6rem;
}
body.ver-pendientes .tbd::after{
  content:"PENDIENTE — " attr(data-tbd);
  position:absolute;top:-.62rem;left:.55rem;
  font-family:var(--f-mono);font-size:.55rem;font-weight:700;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--void);background:var(--amber);
  padding:.24rem .45rem;border-radius:2px;white-space:nowrap;
  max-width:calc(100% - 1.1rem);overflow:hidden;text-overflow:ellipsis;
}
body.ver-pendientes .placa .tbd{background:rgba(255,176,0,.18)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--hairline);background:var(--graphite);padding-block:clamp(3rem,6vw,5rem)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.footer__logo img{height:30px;margin-bottom:1.4rem}
.footer__grid p{color:var(--steel);font-size:.88rem;max-width:32ch}
.footer h5{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-dim);margin-bottom:1.3rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.footer ul a,.footer ul li{color:var(--steel);font-size:.9rem;transition:color .3s var(--ease)}
.footer ul a:hover{color:var(--ghost)}
.footer__bottom{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer__bottom span,.footer__bottom a{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-dim)}
.footer__social{display:flex;gap:1.8rem}
.footer__social a:hover{color:var(--ghost)}

/* ============================================================
   Animaciones de aparición
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms);will-change:transform,opacity}
.reveal.in-view{opacity:1;transform:none}
.reveal-x{opacity:0;transform:translateX(-30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.reveal-x.in-view{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-scale.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,.reveal-x,.reveal-scale{opacity:1!important;transform:none!important}
  .banda__fondo img{transform:none!important}
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta .btn{display:none}
  .nav__burger{display:flex}
  .placa--par .placa__grid{grid-template-columns:1fr}
  .placa--inv .placa__media{order:0}
  .placa--par .placa__media img{max-height:56vh}
  .banda{min-height:auto;padding-block:clamp(5rem,18vw,8rem)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr}
  body.ver-pendientes .tbd::after{font-size:.5rem}
}