/* =========================================================================
   IA — /ia/ · contenido hecho con inteligencia artificial
   Hereda de site.css: tokens, barra, pie, botones, .section, .shell, .head.
   Idea: tres superficies. El NAVY es la sala de montaje, donde las piezas
   se reproducen. El PAPEL es la mesa de trabajo, donde se catalogan y se
   explican. El BLANCO es la persona que decide. Ningún color nuevo: el
   color lo pone el vídeo.
   ========================================================================= */

/* El mismo archivo de Inter, con todo su rango: los titulares de esta
   página piden pesos que site.css no declara. */
@font-face{
  font-family:"Inter IA"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.ia{
  --pozo: #000A12;        /* el hueco donde vive un vídeo, más hondo que el navy */
  --borde: rgba(255,255,255,.14);
  font-family:"Inter IA", "Inter", ui-sans-serif, system-ui, sans-serif;
}
.ia button{ font-family:inherit; }

/* rótulo técnico: el idioma de una sala de montaje (formato, duración, ratio) */
.ficha{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 10px;
  font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-45); font-variant-numeric:tabular-nums;
}
.deep .ficha{ color:var(--on-deep-60); }
.ficha b{ font-weight:500; color:var(--signal-deep); }
.deep .ficha b{ color:var(--signal); }
.ficha span::before{ content:"·"; margin-right:10px; color:currentColor; opacity:.55; }

/* etiqueta en cápsula: el dato de contexto antes del titular */
.chip{
  display:inline-block; padding:8px 16px; border:1px solid var(--line-deep);
  font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-deep-60);
}

/* ---------- pieza de vídeo (se reutiliza en toda la página) ---------- */
.pieza{
  position:relative; display:block; width:100%; margin:0; padding:0;
  background:var(--pozo); border:0; border-radius:0; overflow:hidden;
  aspect-ratio:9 / 16; cursor:pointer; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.pieza video, .pieza img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.pieza video{ opacity:0; transition:opacity .5s var(--ease); }
.pieza.is-dando video{ opacity:1; }
/* el velo sostiene el rótulo sin tapar la imagen */
.pieza__velo{
  position:absolute; inset:auto 0 0 0; height:52%; pointer-events:none;
  background:linear-gradient(to top, rgba(0,10,18,.88) 12%, rgba(0,10,18,0));
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.pieza:hover .pieza__velo, .pieza:focus-visible .pieza__velo{ opacity:1; }
.pieza__t{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  font-size:.8125rem; font-weight:400; line-height:1.3; color:var(--white);
  text-align:left; text-shadow:0 1px 10px rgba(0,10,18,.7);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pieza:hover .pieza__t, .pieza:focus-visible .pieza__t{ opacity:1; transform:none; }
/* el disco de play solo aparece si el clip no se está reproduciendo */
.pieza__play{
  position:absolute; left:50%; top:50%; z-index:2;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  display:grid; place-items:center;
  background:rgba(0,10,18,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.5); color:var(--white);
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pieza.is-dando .pieza__play{ opacity:0; }
.pieza:hover .pieza__play{ background:var(--signal); border-color:var(--signal); color:var(--ink-deep); }
.pieza__play svg{ width:15px; height:15px; margin-left:2px; }
/* hilo de avance: dice por dónde va el bucle. Solo mientras se reproduce. */
.pieza__hilo{
  position:absolute; left:0; bottom:0; z-index:3; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left; background:var(--signal);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.pieza.is-dando .pieza__hilo{ opacity:1; }
.pieza:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* =========================================================================
   00 · portada
   Texto centrado y, debajo, la cinta: las piezas pasando por delante.
   ========================================================================= */
.iatop{ padding-top:clamp(88px, 10vh, 124px); padding-bottom:var(--sec); }
.iatop__centro{ display:grid; justify-items:center; text-align:center; }
.iatop__h1{
  margin-top:var(--s3);
  font-size:clamp(2.6rem, 7.4vw, 5.9rem); font-weight:200; letter-spacing:-.055em; line-height:.95;
  color:var(--white); text-wrap:balance;
}
.iatop__h1 em{ font-family:var(--voice); font-style:italic; font-weight:400; letter-spacing:-.03em; color:var(--signal); }
.iatop__sub{
  margin-top:var(--s3); max-width:58ch;
  font-size:var(--t-lead); font-weight:300; line-height:1.5; letter-spacing:-.015em;
  color:var(--on-deep-60); text-wrap:pretty;
}
.iatop__acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2); margin-top:var(--s4); }
.iatop__nota{
  margin-top:var(--s4); max-width:62ch;
  font-size:var(--t-small); font-weight:300; line-height:1.6; color:var(--on-deep-60);
}
@media (max-width:519px){ .iatop__acts .btn{ width:100%; justify-content:center; } }

/* la cinta: bobina de piezas que desfila sola. Sin margen lateral: es ancho
   completo a propósito, para que se note que no se acaba. */
.cinta{
  position:relative; margin-top:var(--s5); padding-block:14px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.cinta__pista{ display:flex; width:max-content; animation:desfile 74s linear infinite; will-change:transform; }
.cinta__g{ display:flex; }
.cinta__i{
  flex:0 0 auto; width:clamp(150px, 19vw, 226px); margin-right:var(--s2);
  display:grid; gap:10px; align-content:start;
}
.cinta__i:nth-child(odd){ transform:rotate(-1.1deg); }
.cinta__i:nth-child(even){ transform:rotate(1.1deg); }
.cinta__i .pieza{ outline:1px solid var(--borde); }
@keyframes desfile{ to{ transform:translate3d(-50%,0,0); } }
.cinta:hover .cinta__pista, .cinta:focus-within .cinta__pista{ animation-play-state:paused; }

/* en móvil no desfila sola: se arrastra con el dedo */
@media (max-width:859px){
  .cinta{
    overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);
    padding-inline:var(--gut);
    -webkit-mask-image:none; mask-image:none;
  }
  .cinta::-webkit-scrollbar{ display:none; }
  .cinta__pista{ animation:none; }
  .cinta__g--eco{ display:none; }
  .cinta__i, .cinta__i:nth-child(odd), .cinta__i:nth-child(even){ width:62vw; scroll-snap-align:start; transform:none; }
}

/* la fila de marcas: quien llega de frío necesita saber para quién es esto */
.marcas{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px var(--s3);
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--borde);
}
.marcas__k{ font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-60); }
.marcas__l{ font-size:1.0625rem; font-weight:300; letter-spacing:-.02em; color:var(--on-deep); }
.marcas__n{ margin-left:auto; font-size:var(--t-small); font-weight:300; color:var(--on-deep-60); }

/* =========================================================================
   01 · formatos (mesa de trabajo, papel)
   ========================================================================= */

/* qué parte es IA y qué parte no: la pregunta que hace todo el mundo */
.mezcla{
  display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr);
  margin-bottom:var(--s6); padding-block:var(--s4);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .mezcla{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s4); } }
.mezcla__i{ display:grid; gap:8px; align-content:start; padding-left:var(--s2); border-left:2px solid var(--signal); }
.mezcla__k{ font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.mezcla__i p{ font-size:var(--t-small); font-weight:300; line-height:1.55; color:var(--ink-60); }
.mezcla__n{ grid-column:1 / -1; font-size:var(--t-small); font-weight:300; color:var(--ink-45); }

.fmts{ display:grid; gap:var(--s5) var(--s4); grid-template-columns:minmax(0,1fr); }
@media (min-width:880px){ .fmts{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s6) var(--s5); } }
.fmt{
  display:grid; gap:var(--s3); align-items:start;
  grid-template-columns:clamp(104px, 27vw, 148px) minmax(0,1fr);
}
.fmt__txt{ display:grid; gap:12px; align-content:start; }
.fmt__t{ font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; }
.fmt__d{ font-size:var(--t-small); font-weight:300; line-height:1.55; color:var(--ink-60); max-width:46ch; }
.fmt .pieza{ outline:1px solid var(--line); }
.fmt .pieza__play{ width:38px; height:38px; margin:-19px 0 0 -19px; }

/* la octava casilla: cierra la rejilla y lleva al contacto */
.fmt-hueco{
  display:grid; gap:12px; align-content:center; padding:var(--s4);
  border:1px solid var(--line); color:inherit;
  transition:border-color var(--dur) var(--ease);
}
.fmt-hueco:hover{ border-color:var(--signal-deep); }
.fmt-hueco__k{ font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; }
.fmt-hueco__t{ font-size:var(--t-small); font-weight:300; line-height:1.55; color:var(--ink-60); max-width:42ch; }
.fmt-hueco__l{ display:inline-flex; align-items:center; gap:9px; justify-self:start; padding-bottom:3px; border-bottom:1px solid currentColor; font-size:var(--t-small); color:var(--signal-deep); transition:gap var(--dur) var(--ease); }
.fmt-hueco:hover .fmt-hueco__l{ gap:14px; }

/* para qué funciona cada formato. Es un criterio, no una métrica medida:
   por eso son tramos y no porcentajes. */
.barras{ display:grid; gap:7px; margin-top:2px; max-width:310px; }
.barra{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s2); }
.barra__k{ font-size:var(--t-label); font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45); }
.barra__s{ display:flex; gap:3px; }
.barra__s i{ display:block; width:15px; height:6px; background:var(--ink-12); }
.barra__s i.on{ background:var(--signal-deep); }
.deep .barra__s i{ background:var(--on-deep-30); }
.deep .barra__s i.on{ background:var(--signal); }

/* tira de anuncios estáticos: formato 4:5, no 9:16 */
.estat__bloque{ margin-top:var(--s7); }
.estat__head{ display:grid; gap:10px; max-width:54ch; }
.estat{
  display:grid; gap:var(--s2); margin-top:var(--s4);
  grid-auto-flow:column; grid-auto-columns:minmax(58vw, 1fr);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gut); margin-inline:calc(-1 * var(--gut)); scroll-padding-inline:var(--gut);
  scrollbar-width:none;
}
.estat::-webkit-scrollbar{ display:none; }
.estat img{
  scroll-snap-align:start; width:100%; height:auto; display:block;
  aspect-ratio:4 / 5; object-fit:cover;
  background:var(--line-soft); outline:1px solid var(--line);
}
@media (min-width:760px){
  .estat{
    grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0,1fr));
    overflow:visible; padding-inline:0; margin-inline:0;
  }
}

/* =========================================================================
   02 · un producto, nueve piezas (sala de montaje)
   ========================================================================= */
.var{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){
  .var{ grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:var(--s6); align-items:start; }
}
@media (min-width:1200px){ .var{ grid-template-columns:minmax(0,340px) minmax(0,1fr); } }
.var__visor{ position:relative; }
.var__visor .pieza{ cursor:default; outline:1px solid var(--borde); }
.var__pie{ margin-top:12px; }

.var__lista{ display:grid; gap:0; }
.var__l{
  display:grid; gap:2px var(--s3); grid-template-columns:auto minmax(0,1fr);
  width:100%; padding:14px 0; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--borde); color:inherit;
  cursor:pointer; transition:color var(--dur) var(--ease);
}
.var__l:first-child{ border-top:1px solid var(--borde); }
.var__n{
  grid-row:1 / 3; align-self:center;
  width:30px; font-size:var(--t-label); letter-spacing:.1em;
  color:var(--on-deep-30); font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease);
}
.var__t{ font-size:1.0625rem; font-weight:300; letter-spacing:-.02em; color:var(--on-deep); transition:color var(--dur) var(--ease); }
.var__d{ font-size:var(--t-small); font-weight:300; line-height:1.45; color:var(--on-deep-60); }
.var__l:hover .var__t, .var__l:focus-visible .var__t{ color:var(--signal); }
.var__l[aria-current="true"] .var__t{ color:var(--signal); }
.var__l[aria-current="true"] .var__n{ color:var(--signal); }
.var__l:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }

/* las palancas: la versión concreta de «las posibilidades son infinitas» */
.palancas{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--borde);
}
.palancas li{
  padding:7px 14px; border:1px solid var(--borde);
  font-size:var(--t-small); font-weight:300; color:var(--on-deep);
}
.palancas__t{ width:100%; margin-bottom:4px; font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-60); }

/* =========================================================================
   03 · automatizaciones (mesa de trabajo)
   ========================================================================= */

/* la tubería: cinco pasos sobre un raíl, con su marca en la línea */
.flujo{ display:grid; gap:0; grid-template-columns:minmax(0,1fr); margin-bottom:var(--s6); }
@media (min-width:900px){ .flujo{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
.flujo__p{
  position:relative; display:grid; gap:5px; align-content:start;
  padding:var(--s3) var(--s3) var(--s3) 0; border-top:1px solid var(--line);
}
@media (min-width:900px){ .flujo__p{ padding-right:var(--s4); } }
.flujo__p::before{
  content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; background:var(--signal-deep);
}
.flujo__n{ font-size:var(--t-label); letter-spacing:.14em; color:var(--ink-45); font-variant-numeric:tabular-nums; }
.flujo__t{ font-size:1.0625rem; font-weight:400; letter-spacing:-.02em; }
.flujo__d{ font-size:var(--t-small); font-weight:300; line-height:1.5; color:var(--ink-60); }

.autos{ display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){
  .autos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .auto:nth-child(5){ grid-column:1 / -1; }
}
/* seis columnas para poder repartir 3 + 2 sin dejar un hueco al final */
@media (min-width:1060px){
  .autos{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .auto{ grid-column:span 2; }
  .auto:nth-child(4), .auto:nth-child(5){ grid-column:span 3; }
}
.auto{
  display:grid; gap:14px; align-content:start;
  padding:var(--s3); background:var(--white); border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease);
}
.auto:hover{ border-color:var(--signal-deep); }
.auto__t{ font-size:1.0625rem; font-weight:400; letter-spacing:-.02em; }
.auto__d{ font-size:var(--t-small); font-weight:300; line-height:1.55; color:var(--ink-60); }

/* la maqueta: un esquema de lo que hace, no un icono decorativo */
.maq{
  display:grid; place-items:center; padding:var(--s2);
  background:var(--paper); color:var(--ink-45);
}
.maq svg{ width:100%; max-width:230px; height:auto; display:block; }
.maq__hi{ stroke:var(--signal-deep); }
.maq__fill{ fill:rgba(1,104,168,.12); }

/* el radar: lo que casi nadie ofrece, así que ocupa el ancho y va en navy */
.auto--radar{
  grid-column:1 / -1;
  background:var(--ink-deep); border-color:var(--ink-deep); color:var(--on-deep);
  padding:var(--s4); gap:var(--s4);
}
@media (min-width:760px){
  .auto--radar{ grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:var(--s6); align-items:center; }
}
.auto--radar:hover{ border-color:var(--signal); }
.auto--radar .auto__txt{ display:grid; gap:12px; align-content:start; }
.auto--radar .auto__t{ font-size:var(--t-h3); font-weight:400; color:var(--white); }
.auto--radar .auto__d{ color:var(--on-deep-60); max-width:56ch; }

.radar{ position:relative; width:100%; max-width:240px; aspect-ratio:1; margin-inline:auto; }
.radar__anillo{ position:absolute; inset:0; border:1px solid var(--line-deep); border-radius:50%; }
.radar__anillo:nth-child(2){ inset:17%; }
.radar__anillo:nth-child(3){ inset:34%; }
.radar__barrido{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(0,158,254,.38), rgba(0,158,254,0) 78deg);
  animation:barre 5.5s linear infinite;
}
@keyframes barre{ to{ transform:rotate(360deg); } }
.radar__punto{
  position:absolute; left:var(--x); top:var(--y); width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--on-deep-30); border-radius:50%;
}
.radar__punto--vivo{ background:var(--signal); animation:late 2.8s ease-out infinite; }
@keyframes late{
  0%{ box-shadow:0 0 0 0 rgba(0,158,254,.55); }
  70%{ box-shadow:0 0 0 16px rgba(0,158,254,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,158,254,0); }
}

.aviso{ margin-top:4px; padding:14px 16px; background:rgba(0,158,254,.08); border-left:2px solid var(--signal); }
.aviso__k{ font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); }
.aviso__t{ margin-top:6px; font-size:var(--t-small); font-weight:300; line-height:1.5; color:var(--on-deep); }
.aviso__n{ margin-top:6px; font-size:var(--t-label); letter-spacing:.04em; color:var(--on-deep-60); }

/* =========================================================================
   04 · quién soy (banda blanca)
   ========================================================================= */
.yo{ background:var(--white); }
.section:not(.deep) + .section.yo{ padding-top:var(--sec); }
.yo__grid{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:900px){ .yo__grid{ grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:var(--s7); } }
.yo__media{ position:relative; margin:0; }
.yo__media img{ width:100%; height:auto; outline:1px solid var(--line); }
.yo__tag{
  position:absolute; left:0; bottom:0; padding:9px 14px;
  background:var(--ink-deep); color:var(--white);
  font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.yo__h{ margin-top:var(--s2); font-size:var(--t-h2); font-weight:400; letter-spacing:-.025em; }
.yo__h em{ color:var(--signal-deep); }
.yo__p{ margin-top:var(--s3); }
.yo__p p{ font-weight:300; color:var(--ink-60); }
.yo__cifras{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line);
}
.cifra{ display:grid; gap:2px; }
.cifra b{ font-size:clamp(1.6rem, 2.8vw, 2.2rem); font-weight:200; letter-spacing:-.04em; line-height:1; }
.cifra span{ font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); }
.enlace{
  display:inline-flex; align-items:center; gap:9px; margin-top:var(--s4);
  padding-bottom:3px; border-bottom:1px solid currentColor;
  font-size:var(--t-small); color:var(--signal-deep);
  transition:gap var(--dur) var(--ease);
}
.enlace:hover{ gap:14px; }

/* =========================================================================
   05 · cierre
   ========================================================================= */
.cierre__centro{ display:grid; justify-items:center; text-align:center; }
.cierre__h{
  margin-top:var(--s3);
  font-size:clamp(2.1rem, 5.6vw, 4.3rem); font-weight:200; letter-spacing:-.05em; line-height:1;
  color:var(--white); text-wrap:balance;
}
.cierre__h em{ font-family:var(--voice); font-style:italic; font-weight:400; letter-spacing:-.03em; color:var(--signal); }
.cierre__sub{
  margin-top:var(--s3); max-width:54ch;
  font-size:var(--t-lead); font-weight:300; line-height:1.5; color:var(--on-deep-60);
}
.cierre__acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2); margin-top:var(--s5); }
@media (max-width:519px){ .cierre__acts .btn{ width:100%; justify-content:center; } }
.cierre__pie{ margin-top:var(--s3); font-size:var(--t-small); font-weight:300; color:var(--on-deep-60); }
.cierre__pie a{ color:var(--signal); border-bottom:1px solid rgba(0,158,254,.4); }
.cierre .foot{ width:100%; margin-top:var(--s7); text-align:left; }

.deep .btn--wa{ --btn-bg:transparent; --btn-fg:var(--white); --btn-bd:var(--line-deep); }
.deep .btn--wa:hover{ --btn-bg:transparent; --btn-fg:var(--signal); --btn-bd:var(--signal); }
.wa__ico{ width:17px; height:17px; flex:0 0 auto; color:#25D366; }
.btn--wa:hover .wa__ico{ color:currentColor; }

/* ---------- visor a pantalla completa ---------- */
.lupa{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.lupa[hidden]{ display:none; }
.lupa__fondo{ position:absolute; inset:0; background:rgba(0,8,14,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:0; }
.lupa__caja{
  position:relative; z-index:1;
  display:grid; gap:12px; justify-items:center;
  max-height:100%; animation:lupa-entra .3s var(--ease) both;
}
@keyframes lupa-entra{ from{ opacity:0; transform:scale(.97); } }
.lupa__v{
  display:block; max-height:min(84vh, 1100px); max-width:100%;
  width:auto; background:var(--pozo); outline:1px solid rgba(255,255,255,.18);
}
.lupa__pie{ font-size:var(--t-small); font-weight:300; color:rgba(255,255,255,.72); text-align:center; }
.lupa__x{
  position:absolute; top:-8px; right:-8px; z-index:2;
  width:42px; height:42px; display:grid; place-items:center;
  background:var(--white); color:var(--ink-deep); border:0; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lupa__x:hover{ background:var(--signal); }
.lupa__x svg{ width:17px; height:17px; }
body.lupa-abierta{ overflow:hidden; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .pieza video, .pieza__t, .pieza__velo, .lupa__caja{ transition:none; animation:none; }
  .pieza__t, .pieza__velo{ opacity:1; transform:none; }
  .cinta__pista{ animation:none; }
  .cinta{
    overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:var(--gut);
    -webkit-mask-image:none; mask-image:none;
  }
  .cinta__g--eco{ display:none; }
  .cinta__i, .cinta__i:nth-child(odd), .cinta__i:nth-child(even){ transform:none; scroll-snap-align:start; }
  .radar__barrido, .radar__punto--vivo{ animation:none; }
  .enlace{ transition:none; }
}