/* ============================================================
   DRONE STORE — Página de producto
   ============================================================ */

/* ---------- Hero de producto ----------
   El velo se calibra con --velo (0 = imagen intacta, 1 = velo pleno). El
   generador lo fija según la luminancia real de cada hero: los oscuros apenas
   se atenúan, los claros llevan velo pleno para que el texto blanco se lea. */
.ph{--banda-h:min(92dvh,820px);--velo:1;place-items:stretch}
.ph .banda__fondo img{-webkit-mask-image:none;mask-image:none;object-position:var(--hero-pos,14%) center}
/* Hero de video a sangre (EVO Max 4N): cubre la banda como la imagen del hero */
.ph .banda__fondo .video__el{width:100%;height:100%;object-fit:cover;background:transparent;
  -webkit-mask-image:none;mask-image:none}
.ph__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,var(--void) 0%,rgba(10,10,10,calc(.96 * var(--velo))) 30%,rgba(10,10,10,calc(.5 * var(--velo))) 52%,rgba(10,10,10,calc(.1 * var(--velo))) 72%,transparent 84%),
    linear-gradient(to bottom,rgba(10,10,10,calc(.6 * var(--velo))) 0%,transparent 24%,transparent 66%,var(--void) 100%);
}
/* Hero con imagen pequeña o vertical: no da para banda a sangre completa.
   Se ancla a la derecha en una caja contenida y el texto ocupa la izquierda. */
.ph--retrato .banda__fondo{left:auto;width:min(46%,560px)}
.ph--retrato .banda__fondo img{object-fit:contain;object-position:center}
.ph--retrato .ph__velo{background:linear-gradient(90deg,var(--void) 0%,var(--void) 42%,rgba(10,10,10,.5) 62%,transparent 100%)}
.ph .banda__contenido{max-width:var(--maxw);width:100%;margin-inline:auto;text-align:left;align-self:center}
.ph h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:800;line-height:1;margin-block:1rem .8rem}
.ph__tagline{font-family:var(--f-display);font-size:clamp(1.1rem,2vw,1.6rem);font-weight:500;color:var(--steel);margin-bottom:1.6rem}
/* Sombra sutil en los textos del hero: los mantiene legibles sobre banners
   brillantes (p. ej. EVO Max 4T con velo bajo) sin oscurecer la imagen. En
   heroes oscuros es imperceptible, así que es seguro para todas las páginas. */
.ph h1,.ph .breadcrumb,.ph .eyebrow,.ph__tagline{text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 20px rgba(0,0,0,.5)}
.ph__acciones{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
/* Badges dorados del hero (imágenes gold-sobre-negro que se funden con el hero oscuro) */
.ph__badges{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}
.ph__badge{height:clamp(50px,5.4vw,64px);width:auto;display:block}
/* Hero "alto": el sujeto (dos drones sobre pedestal) está centrado con aire
   negro arriba. El contenido sube a esa zona y la imagen se ve completa y
   grande; el texto deja de encimarse sobre los drones. */
.ph--alto{--banda-h:min(94dvh,880px)}
.ph--alto .banda__contenido{align-self:start;padding-top:clamp(6rem,12vh,9.5rem)}
.ph--alto .banda__fondo img{object-position:center 64%}
.ph--alto .ph__wordmark{max-width:min(520px,84%)}

/* Hero de banner brillante: el texto se ancla arriba (el sujeto va a la
   derecha/abajo) y las letras secundarias van un poco más claras para que
   resalten sobre el cielo. Se activa por-página con "hero_texto":"arriba". */
.ph--txt-top .banda__contenido{align-self:start;padding-top:clamp(5.5rem,13vh,9.5rem)}
.ph--txt-top .ph__tagline{color:#cfcfcf}
.ph--txt-top .eyebrow{color:#c4c4c4}
.ph--txt-top .breadcrumb{color:#9c9c9c}

/* ---------- Bloque de intro ---------- */
.intro{max-width:78ch}
.intro p{color:var(--steel);font-size:clamp(1rem,.95rem + .25vw,1.12rem)}
/* Intro centrado: título de sección centrado + párrafo centrado, como el
   original (no el párrafo pegado a la izquierda). Se activa por-página. */
.intro--centro{max-width:64ch;margin-inline:auto;text-align:center}

/* ---------- Viñetas sobre banda fotográfica ----------
   Un párrafo largo encima de la foto se lee como un muro; en viñetas se escanea. */
.banda__vinetas{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem;max-width:50ch}
.banda__vinetas li{position:relative;padding-left:1.7rem;color:#dcdcdc;
  font-size:clamp(1rem,.96rem + .3vw,1.14rem);line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.78)}
.banda__vinetas li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:2px;background:var(--ghost)}

/* ---------- Strip de capacidades con iconos ---------- */
/* Los divisores se dibujan con box-shadow inset (derecha + abajo) en cada
   celda, no con el fondo del contenedor asomando por el gap. Así, cuando la
   última fila queda incompleta (11 iconos en 5 columnas), las celdas que
   faltan muestran --carbon y se funden con el panel en vez de dejar un
   rectángulo gris. Funciona en cualquier conteo y en los breakpoints 5/3/2. */
.caps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--carbon);
  border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.cap{background:var(--carbon);box-shadow:inset -1px -1px 0 var(--hairline);
  padding:1.8rem 1.3rem;display:flex;flex-direction:column;gap:.9rem;
  transition:background .35s var(--ease)}
.cap:hover{background:var(--graphite-2)}
.cap img{width:38px;height:38px;object-fit:contain;filter:brightness(0) invert(1)}
.cap span{font-size:.86rem;color:var(--steel);line-height:1.45}

/* ---------- Video ---------- */
/* Los tres videos del cardán son 1440x1080 (4:3), no 16:9. Un contenedor
   16:9 con cover les recortaría el 25% de la imagen (R4). */
.video{position:relative;border:1px solid var(--hairline);border-radius:var(--radius);
  overflow:hidden;background:#000;aspect-ratio:4/3}
.video--ancho{aspect-ratio:16/9}
.video__el{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.video__sonido{
  position:absolute;right:.8rem;bottom:.8rem;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(10,10,10,.66);backdrop-filter:blur(6px);
  border:1px solid var(--hairline);color:var(--ghost);
  transition:border-color .3s var(--ease),transform .2s var(--ease),background .3s var(--ease);
}
.video__sonido svg{width:17px;height:17px}
.video__sonido:hover{border-color:var(--white);transform:scale(1.07)}
.video__sonido.esta-activo{background:var(--white);color:var(--void);border-color:var(--white)}
.video__sonido[hidden]{display:none}

/* ---------- Pestañas ---------- */
.pest{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.pest button{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);padding:.7rem 1.2rem;border:1px solid var(--hairline);border-radius:var(--radius);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.pest button:hover{color:var(--ghost);border-color:#444}
.pest button.esta-activo{background:var(--white);color:var(--void);border-color:var(--white);font-weight:700}
/* Los clips son 4:3. A todo el ancho de la columna medirían ~940 px de alto,
   más que la ventana. Van a dos columnas con el texto al lado. */
.panel{display:none}
.panel.esta-activo{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
  animation:aparece .5s var(--ease);
}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel .video{max-width:620px;width:100%}
/* pestañas variante "ancha": el panel apila diagrama a todo el ancho + texto centrado
   debajo (no imagen-izq/texto-der), y la barra de pestañas va ABAJO y centrada.
   Para "Sistema completo" del Dragonfish Nest (2 diagramas de red). */
.pest--ancho .panel.esta-activo{display:block}
.pest--ancho .media-ancho--sm{max-width:1100px}
/* selector ARRIBA, a la IZQUIERDA (como el resto de productos) y separado del intro */
.pest--ancho .pest{justify-content:flex-start;margin-top:clamp(2rem,4vw,3.2rem)}
.panel__texto{color:var(--steel);max-width:52ch;font-size:clamp(.95rem,.9rem + .2vw,1.06rem)}
.panel__cuerpo{align-self:center;display:flex;flex-direction:column;gap:1rem}
.panel__cuerpo .panel__texto{max-width:none}
/* Propiedades de un panel como viñetas con check (selector de cámaras del 4N) */
.panel__specs{list-style:none;display:flex;flex-direction:column;gap:.95rem}
.panel__specs li{position:relative;padding-left:1.15rem;color:#dcdcdc;
  font-size:clamp(1rem,.95rem + .2vw,1.12rem);line-height:1.4}
.panel__specs li::before{content:"";position:absolute;left:.1rem;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--acento)}
/* Selector de cámaras (Explora la noche): imagen más chica, con más peso al texto */
#explora-la-noche .panel.esta-activo{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
#explora-la-noche .panel .specs__media{max-width:340px;margin-inline:auto}

/* ---------- Rejilla media + texto ----------
   V1 forzaba aspect-ratio:5/4 con object-fit:cover en .specs__media, que es
   justo lo que recortaba las imágenes. Aquí la imagen conserva su proporción. */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.specs__media{border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--void)}
/* Tope de altura: sin él, una captura vertical estira la fila a 1000+ px y el
   texto corto queda flotando arriba con un hueco enorme debajo. */
.specs__media img,.specs__media video{width:100%;height:auto;max-height:64vh;object-fit:contain;display:block;margin-inline:auto}

/* Bloques apilados dentro de una placa clara: imagen y texto con aire entre sí */
.placa__stack{display:grid;gap:clamp(2rem,5vw,3.5rem)}

/* ---------- Rejilla genérica de fichas ---------- */
.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
/* 2 columnas (pares y parrilla térmica 2×2): columnas de ANCHO FIJO centradas,
   para que sean tarjetas y no bloques a todo lo ancho (funciona en cualquier
   viewport, no solo cuando la pantalla supera el max-width del grupo). */
.fichas--2{grid-template-columns:repeat(2,minmax(0,440px));justify-content:center}
/* 4 tarjetas en una sola fila (parrilla térmica); texto más compacto porque las
   columnas son angostas. */
.fichas--4{grid-template-columns:repeat(4,1fr)}
.fichas--4 .ficha__cuerpo{padding:1.1rem;gap:.4rem}
.fichas--4 .ficha__cuerpo h3{font-size:1rem}
.fichas--4 .ficha__cuerpo p{font-size:.82rem}
@media(max-width:1000px){.fichas--4{grid-template-columns:repeat(2,1fr)}}
/* 2 tarjetas GRANDES por fila (a todo el ancho, no las angostas de fichas--2):
   el cliente pidió "haz más grandes las fichas y 2 en cada fila" en seguridad. */
.fichas--2ancho{grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.fichas--2ancho .ficha__cuerpo{padding:1.6rem}
@media(max-width:720px){.fichas--2ancho{grid-template-columns:1fr}}
/* diagrama ancho bajo una galería (p. ej. flujo de seguridad de datos) */
.galeria__diag img,.galeria__lead img{width:100%;height:auto;display:block;border-radius:var(--radius)}
/* Trío de columnas: título + texto + imagen abajo (Búsqueda / Navegación /
   Identificación), como el original. Mismo realce dorado que las fichas. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1rem}
.trio__item{position:relative;overflow:hidden;background:var(--carbon);
  border:1px solid var(--hairline);border-radius:var(--radius);
  padding:2.2rem 1.8rem;display:flex;flex-direction:column;gap:1.1rem;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.trio__item::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;pointer-events:none;
  transform:scaleX(0);transform-origin:left;opacity:0;
  background:linear-gradient(90deg,transparent,var(--acento),transparent);
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.trio__item h3{font-size:clamp(1.15rem,1.4vw,1.35rem);font-weight:600;line-height:1.25;text-align:center}
.trio__item p{color:var(--steel);font-size:.92rem;line-height:1.6}
.trio__media{margin-top:auto;aspect-ratio:4/3;overflow:hidden;background:var(--void);
  border-radius:calc(var(--radius) - 4px)}
.trio__media img{width:100%;height:100%;object-fit:cover;object-position:center bottom;
  display:block;transition:transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .trio__item:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--acento) 60%,var(--hairline));
    box-shadow:0 18px 42px -20px color-mix(in srgb,var(--acento) 60%,transparent)}
  .trio__item:hover::after{transform:scaleX(1);opacity:1}
  .trio__item:hover .trio__media img{transform:scale(1.05)}
}
@media(prefers-reduced-motion:reduce){
  .trio__item:hover{transform:none}
  .trio__item:hover .trio__media img{transform:none}
  .trio__item::after,.trio__media img{transition-duration:1ms}
}
@media(max-width:900px){.trio{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
/* Varios clips de una sección, EN FILA (lado a lado) para que no se vean
   gigantes. El texto va a todo el ancho (se le quita el tope de 52ch de .lead). */
.video-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.3rem;margin-top:2rem}
.video-intro{margin-top:1.4rem}
.video-intro .lead{max-width:none}
@media(max-width:760px){.video-fila{grid-template-columns:1fr}}
/* Galería (Múltiples tipos): intro a todo el ancho (centrada) y nota separada
   de las imágenes, que se veían pegadas. */
.galeria__intro{text-align:center;margin-top:1.4rem}
.galeria__intro p{color:var(--steel);font-size:clamp(1rem,.95rem + .25vw,1.12rem)}
.galeria__nota{text-align:center;margin:1rem auto 2.8rem}
/* Recortes por-sección: se retira el aire vacío de arriba y se conserva el
   sujeto (operador / dron), como pidió el cliente. */
#autel-skylink-3-0 .placa__media{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius)}
#autel-skylink-3-0 .placa__media img{width:100%;height:100%;object-fit:cover;object-position:center 82%}
/* Entorno operativo: banda más baja (recorta el aire vacío de arriba) y el
   encuadre centrado en el dron. */
#entorno-operativo{--banda-h:clamp(42vh,48vw,56vh)!important}
#entorno-operativo .banda__fondo img{object-position:center 66%}
/* SkyLink: el párrafo va a todo el ancho (sin el tope de 52ch de .lead) */
#autel-skylink-3-0 .lead{max-width:none}
/* Aviso pequeño dentro de una pestaña, bajo el texto */
.panel__nota{font-size:.78rem;color:var(--steel);opacity:.72;margin-top:.9rem;max-width:60ch}
/* Vista en directo: encabezado centrado y con menos aire arriba (título más
   arriba); imagen grande centrada a todo el ancho de lectura. */
#vista-en-directo-mejorada{padding-top:clamp(1.4rem,3vw,2.4rem)}
#vista-en-directo-mejorada .sect-head{text-align:center;margin-inline:auto;margin-bottom:1.4rem}
#vista-en-directo-mejorada .sect-head .rule{margin-inline:auto}
#vista-en-directo-mejorada .reveal-scale{max-width:680px!important}
/* El pie de Vista centraba el texto DENTRO de una caja pegada a la izquierda;
   con margin-inline:auto se centra la caja completa. */
#vista-en-directo-mejorada .lead{margin-inline:auto}
/* Cifra con valor largo (banda de frecuencias): en UNA sola línea, más chico
   (es un valor, no un párrafo), en vez de partirse en dos o desbordarse. */
.cifra strong{overflow-wrap:anywhere}
.cifra.cifra--largo strong{font-size:clamp(1.1rem,1.9vw,1.55rem);line-height:1.2;letter-spacing:-.02em;white-space:normal}
/* Carga útil (Fusion): 2 tarjetas, imagen arriba + specs AGRUPADAS y compactas
   (zoom / gran angular / térmica / telémetro), en vez de una lista larga. */
.payload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:1.6rem}
.pcard{position:relative;overflow:hidden;background:var(--carbon);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:1.8rem 1.8rem 2rem;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;pointer-events:none;
  transform:scaleX(0);transform-origin:left;opacity:0;
  background:linear-gradient(90deg,transparent,var(--acento),transparent);
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.pcard__media{aspect-ratio:4/3;background:var(--void);border-radius:calc(var(--radius) - 4px);overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:contain}
.pcard h3{text-align:center;font-size:clamp(1.1rem,1.3vw,1.3rem);font-weight:600;margin:1.3rem 0 0}
.pcard__tag{text-align:center;font-size:.88rem;color:var(--steel);margin-top:.35rem}
.pcard__specs{display:grid;gap:.85rem;margin-top:1.3rem}
.pcard__g h4{font-size:.82rem;font-weight:600}
.pcard__g p{font-size:.82rem;color:var(--steel);line-height:1.5}
.pcard__nota{font-size:.74rem;color:var(--steel);opacity:.7;margin-top:1.2rem}
@media(hover:hover) and (pointer:fine){
  .pcard:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--acento) 60%,var(--hairline));
    box-shadow:0 18px 42px -20px color-mix(in srgb,var(--acento) 60%,transparent)}
  .pcard:hover::after{transform:scaleX(1);opacity:1}
}
@media(max-width:820px){.payload-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}
/* Fichas medianas (accesorios): 2 col, imagen arriba + título + texto/lista */
.tarjetas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;margin:1.6rem auto 0;max-width:1000px}
.tarjeta{position:relative;overflow:hidden;background:var(--carbon);border:1px solid var(--hairline);
  border-radius:var(--radius);display:flex;flex-direction:column;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.tarjeta::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;pointer-events:none;
  transform:scaleX(0);transform-origin:left;opacity:0;
  background:linear-gradient(90deg,transparent,var(--acento),transparent);
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.tarjeta__media{aspect-ratio:5/4;background:linear-gradient(180deg,var(--graphite),var(--carbon));
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1.7rem}
.tarjeta__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.tarjeta__cuerpo{padding:1.5rem 1.7rem 1.8rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.tarjeta__cuerpo h3{font-size:clamp(1.05rem,1.25vw,1.28rem);font-weight:600;margin-bottom:.35rem}
.tarjeta__cuerpo p{font-size:.87rem;color:var(--steel);line-height:1.55}
@media(hover:hover) and (pointer:fine){
  .tarjeta:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--acento) 60%,var(--hairline));
    box-shadow:0 18px 42px -20px color-mix(in srgb,var(--acento) 60%,transparent)}
  .tarjeta:hover::after{transform:scaleX(1);opacity:1}
}
@media(max-width:820px){.tarjetas-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}
.ficha{position:relative;background:var(--carbon);border:1px solid var(--hairline);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
/* Barrido superior en dorado (mismo acento de los iconos y badges).
   Oculto en reposo (scaleX:0), se despliega desde la izquierda al pasar el cursor. */
.ficha::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;pointer-events:none;
  transform:scaleX(0);transform-origin:left;opacity:0;
  background:linear-gradient(90deg,transparent,var(--acento),transparent);
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
/* La imagen del producto hace un zoom sutil hacia el espectador */
.ficha__media img{transition:transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .ficha:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--acento) 60%,var(--hairline));
    box-shadow:0 18px 42px -20px color-mix(in srgb,var(--acento) 60%,transparent)}
  .ficha:hover::after{transform:scaleX(1);opacity:1}
  .ficha:hover .ficha__media img{transform:scale(1.05)}
}
/* Movimiento reducido: se conserva el realce en azul (borde/brillo/barrido),
   se retira solo el desplazamiento y el zoom. */
@media(prefers-reduced-motion:reduce){
  .ficha:hover{transform:none}
  .ficha:hover .ficha__media img{transform:none}
  .ficha::after,.ficha__media img{transition-duration:1ms}
}
.ficha__media{background:#fff;aspect-ratio:4/3;overflow:hidden}
.ficha__media img{width:100%;height:100%;object-fit:contain}
.ficha__media--foto{background:var(--void)}
/* contain, no cover: el cliente quiere ver la imagen completa, no recortada */
.ficha__media--foto img{object-fit:contain}
/* Icono: se muestra a tamaño natural y centrado sobre placa oscura, nunca
   estirado al ancho de la tarjeta (era el origen del pixelado). */
.ficha__media--icono{background:var(--graphite);display:grid;place-items:center;aspect-ratio:16/10}
.ficha__media--icono img{width:auto;height:auto;max-width:84px;max-height:84px;object-fit:contain}
.ficha__cuerpo{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.ficha__cuerpo h3{font-size:1.15rem;font-weight:600}
.ficha__cuerpo p{color:var(--steel);font-size:.9rem}

/* ---------- Función con icono (icono chico + texto, como el original) ---------- */
.feature{display:flex;gap:clamp(1.3rem,3vw,2.2rem);align-items:flex-start;max-width:920px}
.feature__icono{flex:0 0 auto;width:clamp(72px,9vw,92px);aspect-ratio:1;border:1px solid var(--hairline);
  border-radius:50%;display:grid;place-items:center;background:var(--carbon)}
.feature__icono img{width:auto;height:auto;max-width:52%;max-height:52%;object-fit:contain}
.feature__texto{min-width:0}
.feature__texto .eyebrow{margin-bottom:.5rem}
.feature__texto h2{margin-bottom:.7rem}
@media(max-width:640px){.feature{gap:1.1rem}}

/* Sección de solo texto en dos columnas: título a la izquierda, cuerpo a la
   derecha. Llena el ancho en vez de dejar media pantalla en negro. */
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:820px){.dos-col{grid-template-columns:1fr;gap:1.2rem}}

/* Wordmark del producto en el hero (imagen en vez de texto) */
.ph__wordmark{max-width:min(440px,72%);height:auto;margin:.4rem 0 .2rem;display:block}

/* ---------- Bloque agrupado: imagen + (encabezado + intro + sub-funciones) ---------- */
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.bloque--inv .bloque__media{order:2}
.bloque__media{border-radius:var(--radius);overflow:hidden;background:var(--void);aspect-ratio:5/4}
.bloque__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bloque__texto{min-width:0}
.bloque__texto h2{margin:.6rem 0 1rem}
.bloque__lista{display:flex;flex-direction:column;gap:1.25rem;margin-top:1.7rem}
.bloque__item{display:flex;gap:1rem;align-items:flex-start}
.bloque__item--txt{padding-left:1.1rem;border-left:2px solid var(--hairline)}
.bloque__ico{width:42px!important;height:42px!important;flex:0 0 auto;object-fit:contain;margin-top:2px}
.bloque__item h3{font-size:1.05rem;font-weight:600;margin-bottom:.35rem;color:var(--ghost)}
.bloque__item p{color:var(--steel);font-size:.9rem;line-height:1.5}
.bloque__vin{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:.15rem}
.bloque__vin li{position:relative;padding-left:1.1rem;color:var(--steel);font-size:.9rem;line-height:1.5}
.bloque__vin li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--acento)}
/* modo "features": rejilla de 2 columnas de icono+título+texto (sin imagen al lado) */
.bloque__lista--rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:1.7rem 3rem;margin-top:2rem;align-items:start}
@media(max-width:760px){.bloque__lista--rejilla{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:1.5rem}}
/* imagen ancha (banner/comparativa) a todo el ancho, centrada, bajo texto centrado */
.media-ancho{max-width:1100px;margin:2.2rem auto 0}
.media-ancho img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.media-ancho--sm{max-width:760px}
/* intro centrado más ancho (para que el párrafo ocupe más espacio y no se
   estreche en una columna, p. ej. bajo "Nuevo sensor…" y en Rangos DRI) */
.intro--ancho{max-width:none}
/* el .lead hereda max-width:52ch de core.css → se queda angosto y pegado a la
   izquierda; que llene TODO el ancho del .wrap (~1240px) y centre la caja */
.intro--ancho .lead{max-width:none;margin-inline:auto}
/* intro multi-párrafo: separar los párrafos para que no se lean como un muro */
.intro p + p{margin-top:1.05em}
/* --- EVO Lite Enterprise (revisión con cliente) --- */
/* galería "Aplicación empresarial": separar las fichas del intro y acotar la
   imagen ALTA del controlador (diagrama) para que no domine la sección */
#aplicacion-empresarial-de-autel .galeria__intro{margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
#aplicacion-empresarial-de-autel .galeria__lead{max-width:400px!important}
/* Transmisión de vídeo: texto a todo el ancho (sin el tope de 52ch) + sombra
   para que se lea sobre el banner claro */
#transmision-de-video-de-alta-defin .banda__contenido > *{max-width:none}
#transmision-de-video-de-alta-defin .banda__contenido p{text-shadow:0 2px 20px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.7)}
/* cifras dentro de la placa (Rendimiento de vuelo): aire respecto a la imagen */
.placa__cifras{margin-top:clamp(2rem,4vw,3rem)}
/* achicar imágenes que dominaban la sección: SDK (bloque) y dron de Rendimiento */
#ecosistema-sdk .specs__media{max-width:460px;margin-inline:auto}
#rendimiento-de-vuelo .placa__media{max-width:820px;margin-inline:auto}
/* caps: 4 columnas cuando son múltiplo de 4 → 2 filas de 4 exactas, sin celdas vacías */
.caps--4col{grid-template-columns:repeat(4,1fr)}
/* Seguridad: 3 tarjetas en fila con icono ARRIBA centrado (llena el ancho, sin
   el hueco a la derecha de la rejilla 2-col) */
#seguridad-de-datos-con-multiples-p .bloque__lista--rejilla{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-flow:row;gap:clamp(1.5rem,3vw,2.6rem)}
#seguridad-de-datos-con-multiples-p .bloque__item{flex-direction:column;text-align:center;align-items:center;gap:.9rem}
/* pestañas: subtítulo dorado de cada grupo de specs (térmica / luz visible) */
.panel__grupo + .panel__grupo{margin-top:1.5rem}
.panel__grupo h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin-bottom:.7rem}
/* banda con texto anclado ABAJO (deja ver el sujeto arriba — dron de SkyLink) */
.banda--txt-bottom{align-content:end}
.banda--txt-bottom .banda__contenido{align-self:end;padding-bottom:clamp(3rem,9vh,6rem)}
/* cifras dentro de una placa clara: mismo fondo claro que la sección (no oscuro) */
.placa__cifras .cifras{background:var(--placa-linea)}
.placa__cifras .cifra{background:var(--placa)}
.placa__cifras .cifra strong{color:var(--void)}
.placa__cifras .cifra span{color:#4a4a4a}
/* Rangos DRI: intro centrada + tabla|foto térmica lado a lado + viñetas bajo la
   tabla, con el subtítulo en negrita diferenciado (como el original). */
.dri{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start;margin-top:2rem}
.dri__tabla img,.dri__foto img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.dri__vin{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin-top:1.4rem}
.dri__vin li{position:relative;padding-left:1.2rem;color:var(--steel);font-size:.92rem;line-height:1.55}
.dri__vin li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--acento)}
.dri__vin strong{color:var(--ghost);font-weight:700}
@media(max-width:760px){.dri{grid-template-columns:1fr;gap:1.6rem}}
/* menos aire entre la foto de "Rendimiento líder" y la rejilla de cifras (la de
   cifras ya trae padding-top:0; esto recorta el de abajo de la foto) */
#rendimiento-lider-en-la-industria{padding-bottom:0}
/* --- EVO Nest (revisión con cliente) --- */
/* Diagramas de red / patrulla: line-art BLANCO sobre transparente → lucen a todo
   el ancho sobre el fondo oscuro (como el original, que los pone sobre blanco).
   Se ensanchan respecto al --sm por defecto (760px) porque llevan muchas
   etiquetas pequeñas (torres, "EVO Nest", inspecciones). */
#sistema-de-operaciones-remoto-comp .media-ancho--sm,
#pilotaje-autonomo-semiautonomo-o-r .media-ancho--sm{max-width:1060px}
/* "Inteligencia y seguridad": dos columnas reales (Operaciones inteligentes /
   Cifrado). La rejilla base fluye en 3 filas por columna → con 2 ítems dejaría
   una columna vacía; aquí se fuerza flujo por filas. Iconos en blanco. */
#operaciones-inteligentes .bloque__lista--rejilla{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-flow:row;gap:clamp(1.6rem,3.5vw,3rem)}
#operaciones-inteligentes .bloque__ico{filter:brightness(0) invert(1)}
/* el selector de id gana al breakpoint global (.bloque__lista--rejilla) → hay que
   volver a apilar a 1 columna en móvil, o las dos columnas quedan apretadas */
@media(max-width:760px){#operaciones-inteligentes .bloque__lista--rejilla{grid-template-columns:1fr;gap:1.5rem}}
/* Pilotaje: el diagrama de patrulla es line-art OSCURO → la sección ENTERA va sobre
   fondo claro a sangre ("claro":true → .placa); el diagrama se apoya en ese mismo
   claro, sin un panel que contraste con el negro de la sección. */
/* Operación autónoma: encuadrar el PRODUCTO (no el cielo) bajando el recorte */
#operacion-autonoma .banda__fondo img{object-position:center 88%}
/* Producto / imagen COMPLETA en las bandas de imagen (Transportable, Rendimiento,
   SDK): el cliente quiere ver la imagen ENTERA, sin recorte. Dos causas del recorte:
   (1) .banda__fondo img trae scale(1.06) de parallax → un zoom que recorta los bordes
   pase lo que pase; (2) object-fit:cover. Solución: la banda toma EXACTAMENTE la
   proporción de la imagen (2000x1125 → 1.778 → 56.25vw; 2000x738 → 2.71 → 36.9vw) y la
   imagen va contain + SIN escala → se ve completa, a sangre, sin franjas ni recorte. */
#transportable-y-de-facil-instalaci,
.p-evo-nest #rendimiento-en-todo-tipo-de-clima{--banda-h:56.25vw!important}
#soluciones-sdk{--banda-h:36.9vw!important}
#transportable-y-de-facil-instalaci .banda__fondo img,
.p-evo-nest #rendimiento-en-todo-tipo-de-clima .banda__fondo img,
#soluciones-sdk .banda__fondo img{object-fit:contain;object-position:center;transform:none}
/* Rendimiento: velo más suave (el cliente lo veía muy oscuro) → el Nest luce más */
.p-evo-nest #rendimiento-en-todo-tipo-de-clima .banda__fondo::after{background:linear-gradient(100deg,rgba(8,8,8,.72) 0%,rgba(8,8,8,.4) 38%,rgba(8,8,8,.08) 72%,rgba(8,8,8,0) 100%)}
/* Transportable / SDK: tomas de estudio CLARAS forzadas a banda (imagen a sangre,
   texto encima). El velo se BAJA (se veía muy oscuro) para que el sujeto luzca; a
   cambio, el texto se confina a la mitad izquierda (zona más oscura) y lleva sombra
   fuerte para seguir legible sobre el fondo claro. */
#transportable-y-de-facil-instalaci .banda__fondo::after,
#soluciones-sdk .banda__fondo::after{background:linear-gradient(100deg,rgba(8,8,8,.8) 0%,rgba(8,8,8,.5) 30%,rgba(8,8,8,.2) 54%,rgba(8,8,8,.03) 80%,rgba(8,8,8,0) 94%)}
#transportable-y-de-facil-instalaci .banda__contenido > *,
#soluciones-sdk .banda__contenido > *{max-width:600px}
#transportable-y-de-facil-instalaci .banda__contenido,
#soluciones-sdk .banda__contenido{text-shadow:0 2px 16px rgba(0,0,0,.98),0 1px 4px rgba(0,0,0,.92)}
/* media_texto invertido: imagen a la DERECHA, texto a la izquierda (Gestión) */
.specs--inv > .reveal-scale{order:2}
#gestion-de-la-informacion .specs__media{max-width:540px;margin-inline:auto}
/* titulo_dentro: el sect-head vive DENTRO de la columna → su margen inferior grande
   (para separar de secciones) aquí aleja el título del texto; se aprieta para que
   se lean como del mismo contenedor (Capacidad de carga, Gestión) */
.specs .sect-head{margin-bottom:clamp(1.2rem,2.2vw,1.7rem)}
/* Bandas de imagen en MÓVIL: la banda a proporción de imagen (56vw) queda muy baja en
   pantallas angostas y la foto quedaba en una tira oscura tras el texto. Se APILA como
   el hero: texto arriba y la imagen COMPLETA debajo, a todo el ancho y a tamaño natural
   (sin velo, sin recorte). */
@media(max-width:860px){
  #transportable-y-de-facil-instalaci,
  .p-evo-nest #rendimiento-en-todo-tipo-de-clima,
  #soluciones-sdk{--banda-h:auto!important;display:flex;flex-direction:column;justify-content:flex-start;padding-block:clamp(2.6rem,8vw,4rem)}
  #transportable-y-de-facil-instalaci .banda__contenido,
  .p-evo-nest #rendimiento-en-todo-tipo-de-clima .banda__contenido,
  #soluciones-sdk .banda__contenido{order:1;align-self:auto}
  #transportable-y-de-facil-instalaci .banda__contenido > *,
  #soluciones-sdk .banda__contenido > *{max-width:none}
  #transportable-y-de-facil-instalaci .banda__fondo,
  .p-evo-nest #rendimiento-en-todo-tipo-de-clima .banda__fondo,
  #soluciones-sdk .banda__fondo{order:2;position:relative;inset:auto;margin-top:1.6rem;height:auto}
  #transportable-y-de-facil-instalaci .banda__fondo img,
  .p-evo-nest #rendimiento-en-todo-tipo-de-clima .banda__fondo img,
  #soluciones-sdk .banda__fondo img{height:auto;object-fit:contain}
  #transportable-y-de-facil-instalaci .banda__fondo::after,
  .p-evo-nest #rendimiento-en-todo-tipo-de-clima .banda__fondo::after,
  #soluciones-sdk .banda__fondo::after{display:none}
}
@media(max-width:860px){.bloque{grid-template-columns:1fr;gap:1.4rem}.bloque--inv .bloque__media{order:0}}

/* ---------- Autel Dragonfish Nest (revisión con cliente) ---------- */
/* OJO colisión de ids: evo-nest y dragonfish comparten "#rendimiento-en-todo-tipo-de-
   clima". Las reglas de evo-nest van acotadas a .p-evo-nest (clase en <main>); aquí
   manda la banda por defecto. La imagen es casi cuadrada → fondo a sangre (cover) con
   el texto a TODO el ancho encima (el cliente lo pidió). */
/* Rendimiento: la imagen (casi cuadrada) tiene mucho cielo vacío arriba → se RECORTA
   por arriba (banda más baja + cover + object-position hacia abajo, para mostrar el
   dron y el Nest, que están en la mitad inferior-izquierda). El texto va a la DERECHA,
   sobre el cielo, para no encimarse con el producto. */
.p-autel-dragonfish-nest #rendimiento-en-todo-tipo-de-clima{--banda-h:clamp(46vh,52vw,66vh)!important}
.p-autel-dragonfish-nest #rendimiento-en-todo-tipo-de-clima .banda__fondo img{object-fit:cover;object-position:center 82%;transform:none}
.p-autel-dragonfish-nest #rendimiento-en-todo-tipo-de-clima .banda__contenido{text-align:right}
/* margin-left:auto empuja el bloque a la derecha; el !important vence al margin inline
   del h2 de la banda (margin:.9rem 0 1.3rem → margin-left:0), que si no lo dejaba a la izq */
.p-autel-dragonfish-nest #rendimiento-en-todo-tipo-de-clima .banda__contenido > *{max-width:min(640px,56%);margin-left:auto!important;margin-right:0}
/* Respaldo (bloque imagen+texto): los feat-*.svg vienen negros → invertir a blanco */
.p-autel-dragonfish-nest #fuente-de-alimentacion-de-respaldo .bloque__ico{filter:brightness(0) invert(1)}

/* ---------- Bloque con imagen de FONDO a sangre + panel de texto encima ---------- */
.bloque-fondo{--banda-h:clamp(60vh,62vw,80vh);text-align:left}
/* el sujeto de la foto va al lado OPUESTO del panel; brillo extra para que la
   lente/cámara no queden apagadas (más fuerte en Captura, la más oscura). */
.bloque-fondo .banda__fondo img{object-position:78% center;filter:brightness(1.12) contrast(1.03)}
.bloque-fondo--inv .banda__fondo img{object-position:22% center;filter:brightness(1.26) contrast(1.05)}
/* el panel vive dentro de .wrap (1400px centrado), alineado con el resto de
   secciones; flex lo empuja al lado que corresponde. */
.bloque-fondo__wrap{width:100%;min-height:var(--banda-h);display:flex;align-items:center}
.bloque-fondo:not(.bloque-fondo--inv) .bloque-fondo__wrap{justify-content:flex-start}
.bloque-fondo--inv .bloque-fondo__wrap{justify-content:flex-end}
.bloque-fondo__panel{position:relative;z-index:1;max-width:min(52ch,50%)}
/* badge radiométrico flotando sobre la imagen, centrado abajo (no bajo el texto) */
.bloque-fondo__badge{position:absolute;left:50%;bottom:clamp(1.5rem,4vw,3.2rem);
  transform:translateX(-50%);z-index:2;margin:0}
.bloque-fondo__badge .badge-img{height:70px}
.bloque-fondo--inv .banda__fondo::after{
  background:linear-gradient(260deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.64) 38%,rgba(8,8,8,.16) 72%,rgba(8,8,8,0) 100%)}
.bloque-fondo .h-section{margin-bottom:1rem;text-shadow:0 2px 22px rgba(0,0,0,.75)}
.bloque-fondo .lead{text-shadow:0 1px 14px rgba(0,0,0,.7);color:#d7d7d7}
.bloque-fondo .bloque__lista{margin-top:1.8rem;gap:1.5rem}
.bloque-fondo .bloque__item h3{margin-bottom:.5rem;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.bloque-fondo .bloque__item p{color:#c9c9c9;line-height:1.6;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.bloque-fondo .bloque__item--txt{border-left-color:rgba(255,255,255,.28);padding-left:1.3rem}
@media(max-width:820px){
  .bloque-fondo__wrap{min-height:0}
  .bloque-fondo__panel{max-width:none}
  .bloque-fondo__badge{position:static;transform:none;margin-top:1.6rem;display:flex}
}

/* ---------- Dúo de features + imagen ancha (Diseño compacto / Flujos) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  margin-bottom:clamp(2rem,4vw,3.2rem)}
.duo__item{display:flex;gap:1.1rem;align-items:flex-start}
.duo__ico{width:54px!important;height:54px!important;flex:0 0 auto;object-fit:contain;margin-top:2px}
.duo__item h3{font-size:1.18rem;font-weight:600;margin-bottom:.45rem;color:var(--ghost)}
.duo__item p{color:var(--steel);font-size:.94rem;line-height:1.55}
.duo__media{border-radius:var(--radius);overflow:hidden;background:var(--void)}
.duo__media img{width:100%;height:auto;display:block;max-height:72vh;object-fit:contain;margin-inline:auto}
@media(max-width:760px){.duo{grid-template-columns:1fr;gap:1.5rem}}

/* ---------- Cuadrantes: 4 features alrededor de una imagen central (Seguro y robusto) ---------- */
.quad{display:grid;grid-template-columns:1fr minmax(0,1.1fr) 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:2.6rem}
.quad__col{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,4.5rem);justify-content:center}
.quad__item h3{font-size:1.12rem;font-weight:600;margin-bottom:.5rem;color:var(--ghost)}
.quad__item p{color:var(--steel);font-size:.9rem;line-height:1.5}
.quad__media{background:var(--void);border-radius:var(--radius);overflow:hidden}
.quad__media img{width:100%;height:auto;display:block;object-fit:contain}
/* align-items:center centra cada párrafo (que está topado a 60ch por .nota-pie);
   sin él quedaban pegados a la izquierda del contenedor aunque el texto fuera centrado. */
.quad__notas{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;gap:.5rem;
  align-items:center;text-align:center}
@media(max-width:860px){
  .quad{grid-template-columns:1fr;gap:1.8rem}
  .quad__col{gap:1.8rem}
  .quad__media{order:-1;max-width:440px;margin-inline:auto}
}

/* Pastillas (6K / 1") y badge-imagen (Radiometric) */
.badges{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.7rem}
.badge{display:inline-flex;align-items:center;border:1.5px solid var(--amber);color:var(--amber);
  border-radius:6px;padding:.4rem .85rem;font-family:var(--f-mono);font-size:.78rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.badge-img{height:52px;width:auto;object-fit:contain}
/* Badge radiométrico centrado y más grande bajo el texto (Cámaras duales) */
.badges--centro{justify-content:center;margin-top:2.1rem}
.badges--centro .badge-img{height:66px}

/* ---------- Rejilla de aplicaciones (foto + leyenda) ---------- */
/* centra el bloque completo, no solo el texto dentro de la caja de 60ch */
/* El .sect-head base limita a 60ch (~510px), lo que parte los títulos largos en
   3 líneas. Para los centrados lo ensanchamos a 52rem: caben en 2 líneas
   ("Múltiples modos…", "Características prácticas…") sin quedar en una sola. */
.sect-head--centro{text-align:center;margin-inline:auto;max-width:52rem}
.sect-head--centro .rule{margin-inline:auto}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
.app{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--void)}
.app img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.app:hover img{transform:scale(1.04)}
.app figcaption{position:absolute;inset:auto 0 0 0;padding:1.5rem;font-size:1.1rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 60%,transparent)}
@media(max-width:1000px){.apps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.apps{grid-template-columns:1fr}}
/* 6 casos → 3 columnas (como el original) */
.apps--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.apps--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.apps--3{grid-template-columns:1fr}}
/* variante con texto: imagen + título + descripción DEBAJO (no superpuesto) */
.apps--texto{gap:1.4rem 1.6rem}
.apps--texto .app{aspect-ratio:auto;overflow:visible;background:none;text-align:center}
.apps--texto .app img{aspect-ratio:16/10;height:auto;border-radius:var(--radius)}
.apps--texto figcaption{position:static;inset:auto;padding:.9rem 0 .3rem;font-size:1.2rem;background:none}
.app__texto{color:var(--steel);font-size:.9rem;line-height:1.55;margin:.15rem auto 0;max-width:36ch}

/* ---------- Tira de especificaciones (icono chico + rótulo) ---------- */
/* chips centrados, sin estirarse a todo el ancho (flex:0 → no crecen) */
.spec-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.25rem,2.5vw,2rem)}
.spec-item{flex:0 1 520px;display:flex;align-items:center;gap:1rem;background:var(--carbon);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:1.1rem 1.4rem}
.spec-item__ico{width:40px!important;height:40px!important;object-fit:contain;flex:0 0 auto}
.spec-item span{font-size:.9rem;color:var(--ghost);font-weight:500;line-height:1.35}
/* 4 specs en una sola fila (grid anula el display:flex de .spec-strip) */
.spec-strip--fila{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.spec-strip--fila{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.spec-strip--fila{grid-template-columns:1fr}}

/* ---------- Tarjeta de cotización por WhatsApp (contacto) ---------- */
.wa-card{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--carbon);
  padding:clamp(2rem,4vw,3rem)}
.wa-card__glifo{width:44px;height:44px;color:var(--steel);margin-bottom:1.4rem;display:block}

/* ---------- Tira de iconos con leyenda (funciones avanzadas) ---------- */
/* Encabezado de subsección: más chico que un título de sección (h-section), centrado */
.h-sub{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.01em;
  text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.tira{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem)}
.tira__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem}
/* caja de icono de altura fija → todos los pies arrancan a la misma altura */
.tira__ico{height:72px;display:grid;place-items:center}
.tira__ico img{width:auto;height:auto;max-width:74px;max-height:72px;object-fit:contain;
  filter:brightness(0) invert(1)}
.tira__item span{font-size:.9rem;color:var(--steel);line-height:1.45}

/* ---------- Cifras destacadas ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;margin-top:2.5rem}
.cifra{background:var(--carbon);padding:2rem 1.6rem;text-align:center}
.cifra strong{display:block;font-family:var(--f-mono);font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.8rem);color:var(--ghost);margin-bottom:.5rem;line-height:1.15}
.cifra span{font-size:.84rem;color:var(--steel)}
.cifras__notas{margin-top:1.3rem}
.cifras__notas .nota-pie{margin-top:.25rem}

/* ---------- Lista de especificaciones de accesorio ---------- */
.espec{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.espec li{color:var(--steel);font-size:.88rem;padding-left:1rem;position:relative;line-height:1.5}
.espec li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--steel-dim)}

/* ---------- Notas legales ---------- */
.notas{border-top:1px solid var(--hairline);padding-top:2rem;margin-top:1rem}
.notas ol{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:1.1rem}
.notas li{counter-increment:n;color:var(--steel-dim);font-size:.82rem;line-height:1.65;
  padding-left:2.2rem;position:relative;max-width:96ch}
.notas li::before{content:counter(n);position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:.72rem;color:var(--steel-dim)}

/* ---------- Contenido largo / legales ---------- */
.legal{max-width:74ch;padding-block:1rem clamp(4rem,8vw,7rem)}
.legal__updated{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dim);margin-bottom:3rem}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:3rem 0 1rem}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--f-body);font-size:1.02rem;font-weight:600;color:var(--ghost);margin:1.6rem 0 .6rem}
.legal p{color:var(--steel);margin-bottom:1rem}
.legal ul,.legal ol{color:var(--steel);margin:0 0 1.2rem 1.3rem}
.legal li{margin-bottom:.5rem}
.legal strong{color:var(--ghost);font-weight:600}
.legal a{color:var(--ghost);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--hairline)}
.legal a:hover{text-decoration-color:var(--ghost)}
.legal__note{border:1px solid var(--hairline);border-radius:var(--radius);padding:1.2rem 1.4rem;font-size:.88rem;color:var(--steel);margin-top:3rem}

/* ---------- Formulario de contacto ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.field input,.field select,.field textarea{
  background:var(--carbon);border:1px solid var(--hairline);border-radius:var(--radius);
  color:var(--ghost);font-family:var(--f-body);font-size:.95rem;padding:.9rem 1rem;
  transition:border-color .3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--white)}
.field textarea{min-height:130px;resize:vertical}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .caps{grid-template-columns:repeat(3,1fr)}
  .fichas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ph{--banda-h:auto;display:flex;flex-direction:column;padding-block:7.5rem 0}
  .ph .banda__contenido{order:1;align-self:auto}
  /* El padding-top de escritorio de .ph--alto (para posicionar el texto en el
     hero alto) se filtraba a móvil y se sumaba al padding del padre → hueco
     negro enorme sobre el breadcrumb. En móvil el aire lo da .ph (7.5rem). */
  .ph--alto .banda__contenido,.ph--txt-top .banda__contenido{padding-top:0}
  /* En móvil todos los heroes se apilan a ancho completo. El de retrato pierde
     su width:46% de escritorio para no quedar diminuto. */
  .ph .banda__fondo,.ph--retrato .banda__fondo{order:2;position:relative;inset:auto;left:auto;z-index:0;margin-top:2.4rem;width:100%}
  .ph .banda__fondo img{width:100%;height:auto;object-position:center;transform:none}
  .ph:not(.ph--retrato) .banda__fondo img{aspect-ratio:2000/794;object-fit:cover}
  .ph--retrato .banda__fondo img{max-height:66vh;object-fit:contain}
  .ph__velo{display:none}
  .cifras{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .panel.esta-activo{grid-template-columns:1fr}
  .panel .video{max-width:none}
}
@media (max-width:560px){
  .caps{grid-template-columns:repeat(2,1fr)}
  .fichas,.fichas--2,.fichas--4,.fichas--2ancho{grid-template-columns:1fr}
  .ph__acciones{flex-direction:column;align-items:stretch}
  .ph__acciones .btn{justify-content:center}
}

/* ============ Ajustes Dragonfish Series (revisión cliente 2026-07-28) ============ */
/* Pestañas sobre fondo CLARO (.placa--pest): el selector y las specs, que por
   defecto van claros para el fondo negro, se pasan a oscuro-sobre-claro. */
.placa--pest .pest button{color:#4a4a4a;border-color:var(--placa-linea)}
.placa--pest .pest button.esta-activo{background:var(--void);color:var(--placa);border-color:var(--void)}
.placa--pest .panel__specs li{color:#2a2a2a}
.placa--pest .panel__specs li::before{color:var(--void)}
.placa--pest .panel__texto{color:#3a3a3a}
.placa--pest .intro p,.placa--pest .intro .lead{color:#3a3a3a}
/* Galería sobre fondo CLARO (.placa--galeria): fichas claras + texto oscuro, para que
   el diagrama de redundancias y las ilustraciones (fondo blanco) integren en la sección. */
.placa--galeria .ficha{background:#fff;border-color:var(--placa-linea)}
.placa--galeria .ficha__media,.placa--galeria .ficha__media--foto{background:#fff}
.placa--galeria .ficha__cuerpo h3{color:var(--void)}
.placa--galeria .ficha__cuerpo p{color:#4a4a4a}
.placa--galeria .galeria__nota{color:#4a4a4a}
/* Montaje: el render del dron sobre placa clara, sin caja oscura alrededor. */
.p-dragonfish-series #montaje-rapido .specs__media{background:transparent;border:0}
/* Vuelo silencioso: imagen COMPLETA (sin el zoom 1.06 que recorta los bordes). */
.p-dragonfish-series #vuelo-silencioso .banda__fondo img{transform:none;object-position:center 40%}
/* Comparación de tamaños: título en 2 líneas + imagen a mayor tamaño. */
.p-dragonfish-series #comparacion-de-tamanos .h-section{max-width:12ch;margin-inline:auto}
.p-dragonfish-series #comparacion-de-tamanos .media-ancho{max-width:none}
.p-dragonfish-series #comparacion-de-tamanos .media-ancho img{width:100%}
/* Diagrama de lógica: fondo de la SECCIÓN = color exacto del fondo de la imagen (#F6F6F6),
   para que no se vea la caja/borde de la imagen (el cliente: "fondo del mismo color"). */
.p-dragonfish-series #diagrama-de-logica-de-vuelo.placa{background:#F6F6F6}
/* Pestañas: separar el intro de los tabs (estaban muy pegados) — operaciones y L20T. */
.p-dragonfish-series [data-pestanas]{margin-top:clamp(1.8rem,3.8vw,3rem)}
/* Diagrama de redundancias: imagen más grande (sobrescribe el max-width en línea). */
.p-dragonfish-series #multiples-redundancias-que-garanti .galeria__lead{max-width:min(1080px,100%)!important}

/* ============================================================================
   EAVISION (EA-J150 / EA-J70) — ficha de venta agrícola
   Página tipo landing (no showcase de fabricante): hero partido, ficha técnica
   como lista de definición, aplicaciones en pastillas y FAQ en acordeón.
   ========================================================================== */

/* --- Kicker: rótulo REAL de sección ("Ideal para", "Qué resuelve"…) --- */
.kicker{display:inline-block;font-family:var(--f-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acento);margin-bottom:.9rem}
.sect-head--centro .kicker{margin-inline:auto}
.placa .kicker{color:#93701d}

/* --- Hero partido: texto a un lado, el dron (con alfa) flotando al otro --- */
.hero-prod{position:relative;background:var(--void);overflow:hidden;
  padding-block:clamp(6.5rem,13vh,9.5rem) clamp(3rem,7vw,5.5rem)}
.hero-prod__wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.hero-prod__texto{max-width:39rem}
.hero-prod .breadcrumb{margin-bottom:1.1rem}
.hero-prod h1{font-family:var(--f-display);font-size:clamp(2.9rem,6vw,4.8rem);font-weight:800;
  line-height:.98;letter-spacing:-.02em;margin:.7rem 0 1rem}
.hero-prod__tagline{font-size:clamp(1.18rem,1rem + .8vw,1.55rem);color:#e9e9e9;font-weight:500;
  line-height:1.28;margin-bottom:1.15rem;max-width:22ch}
.hero-prod__intro{color:var(--steel);max-width:46ch;line-height:1.62;margin-bottom:2.1rem}
.hero-prod__media{position:relative;justify-self:center;width:100%}
.hero-prod__media img{display:block;width:100%;max-width:640px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 55px rgba(0,0,0,.65))}
.hero-prod__media::before{content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:96%;aspect-ratio:1;z-index:0;
  background:radial-gradient(ellipse 50% 42% at center,rgba(239,183,78,.16),transparent 68%)}
.hero-prod__media img{position:relative;z-index:1}
@media(max-width:820px){
  .hero-prod__wrap{grid-template-columns:1fr;text-align:center}
  .hero-prod__texto{max-width:none;margin-inline:auto}
  .hero-prod__tagline,.hero-prod__intro{margin-inline:auto}
  .hero-prod .ph__acciones{justify-content:center}
  .hero-prod__media{order:-1;margin-bottom:.5rem}
  .hero-prod__media img{max-width:min(480px,86%)}
}

/* --- Checklist ✓: value-props y highlights de la ficha --- */
.checklist{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:.95rem 2.2rem;margin-top:1.9rem}
.checklist li{position:relative;padding-left:2.3rem;color:#cfcfcf;line-height:1.5;
  font-size:clamp(1rem,.96rem + .2vw,1.12rem)}
.checklist li::before{content:"✓";position:absolute;left:0;top:.02em;width:1.55rem;height:1.55rem;
  display:grid;place-items:center;border-radius:50%;background:rgba(239,183,78,.14);
  color:var(--acento);font-size:.82rem;font-weight:700}
/* Tarjeta centrada de solo-checklist ("Ideal para…"): apilada, con superficie. */
.checklist--centro{grid-template-columns:1fr;max-width:720px;margin:2rem auto 0;
  background:var(--carbon);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(1.7rem,3.6vw,2.6rem)}

/* --- Ficha técnica: lista de definición a dos columnas (rótulo → valor) --- */
.especs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2.2rem,5vw,4.5rem);
  max-width:1040px;margin:2.5rem auto 0}
.especs__fila{display:flex;justify-content:space-between;gap:1.4rem;align-items:baseline;
  padding:1.1rem .2rem;border-bottom:1px solid var(--hairline)}
.especs__fila dt{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--steel);white-space:nowrap}
.especs__fila dd{margin:0;text-align:right;color:#f0f0f0;font-weight:500;
  font-size:clamp(.98rem,.94rem + .2vw,1.1rem)}
@media(max-width:720px){.especs{grid-template-columns:1fr;gap:0}}

/* --- Aplicaciones sin foto → pastillas --- */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:940px;
  margin:2.4rem auto 0}
.chip{border:1px solid var(--hairline);border-radius:100px;padding:.62rem 1.25rem;
  font-size:.98rem;color:#cfcfcf;background:var(--carbon);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.chip:hover{border-color:var(--acento);color:#fff}

/* --- FAQ: acordeón nativo <details>, sin JS (R6) --- */
.faq{max-width:860px;margin:2.5rem auto 0}
.faq__item{border-bottom:1px solid var(--hairline)}
.faq__item:first-child{border-top:1px solid var(--hairline)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1.5rem;padding:1.45rem .2rem;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.05rem,1rem + .35vw,1.24rem);color:#ededed;transition:color .2s var(--ease)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:#fff}
.faq__mas{position:relative;flex:none;width:1.15rem;height:1.15rem}
.faq__mas::before,.faq__mas::after{content:"";position:absolute;background:var(--acento);
  transition:transform .3s var(--ease)}
.faq__mas::before{inset:0 auto 0 50%;translate:-50% 0;width:2px}
.faq__mas::after{inset:50% 0 auto;translate:0 -50%;height:2px}
.faq__item[open] .faq__mas::before{transform:scaleY(0)}
.faq__cuerpo{padding:0 .2rem 1.5rem;color:var(--steel);line-height:1.65;max-width:72ch}
.faq__cuerpo p{margin:0}
@media(prefers-reduced-motion:reduce){.faq__mas::before,.faq__mas::after{transition:none}}