/* ═══════════════════════════════════════════════════════════════════════════
   Sunmi AdsLink · sitio público
   ───────────────────────────────────────────────────────────────────────────
   La página es la tarjeta de presentación de una plataforma de marketing
   digital, así que no puede parecer una plantilla de software. La decisión de
   fondo: la página se comporta como el medio que vende. Campos enteros de
   color en vez de acentos, tipografía a escala de cartel, y los equipos como
   fuente de luz —su pantalla encendida derrama sobre el fondo—.

   Los campos cromáticos (el negro de la portada, el naranja de los cortes) NO
   cambian con el tema: son tinta, como en un impreso. Solo las secciones
   neutras se adaptan. Así la página tiene la misma voz en claro y en oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* El naranja es el del SUNMI Brand VI Book v1.5. No se retoca. */
  --sunmi: #ff6000;

  --vacio: light-dark(#f2eeea, #080a0f);
  --panel: light-dark(#ffffff, #151a24);
  --panel-alto: light-dark(#fdfbf9, #1b2230);
  --borde: light-dark(rgb(27 32 42 / 0.13), rgb(255 255 255 / 0.09));
  --borde-vivo: light-dark(rgb(27 32 42 / 0.24), #2f3c50);

  --texto: light-dark(#1b202a, #e8ecf2);
  --texto-medio: light-dark(#4d5766, #97a1b2);
  --texto-tenue: light-dark(#5b6577, #7f8b9d);
  --sunmi-texto: light-dark(#b04200, #ff6000);

  --accion: #c44a00;
  --sobre-accion: #ffffff;

  /* Campos que NO cambian con el tema: son tinta. */
  --noche: #07090d;
  --sobre-noche: #f3f5f8;
  --noche-medio: #9aa5b6;
  --naranja-campo: #ff6000;
  --sobre-naranja: #1a0c00;

  --pantalla: #0b0e15;

  --radio: 14px;
  --radio-gr: 26px;

  /* Una sola fuente para el ancho del contenido y su margen lateral. */
  --ancho: 1240px;
  --lado: clamp(20px, 5vw, 64px);
}
:root[data-tema='claro'] { color-scheme: light }
:root[data-tema='oscuro'] { color-scheme: dark }

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  margin: 0;
  background: var(--vacio);
  color: var(--texto);
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block }

/* ── Tipografía de cartel ────────────────────────────────────────────────── */
h1, h2 { margin: 0; letter-spacing: -0.028em; font-weight: 700; line-height: 0.98 }
h2 { font-size: clamp(30px, 5.2vw, 66px) }
h2 em { font-style: normal; color: var(--sunmi-texto) }
.lead { font-size: clamp(16.5px, 1.5vw, 19.5px); line-height: 1.55; color: var(--texto-medio); margin: 18px 0 0; max-width: 58ch }
.cejilla {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sunmi-texto);
}
.cejilla.sobre-naranja { color: var(--sobre-naranja); opacity: .72 }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.boton-gr { padding: 15px 30px; font-size: 16.5px }
.boton:hover { transform: translateY(-1px) }
/* La especificidad se iguala a la de `.menu a`: si no, el color del enlace le
   gana al del botón y el texto sale naranja sobre naranja. */
.cabecera .boton-principal,
.boton-principal { background: var(--accion); color: var(--sobre-accion) }
.boton-principal:hover { background: #a93f00 }
.boton-fantasma { color: var(--texto); border-color: var(--borde-vivo) }
.boton-fantasma:hover { border-color: var(--texto) }
.boton-negativo { background: var(--sobre-noche); color: var(--noche) }
.boton-fantasma-neg { color: var(--sobre-noche); border-color: rgb(255 255 255 / .28) }
.boton-fantasma-neg:hover { border-color: var(--sobre-noche) }

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 14px var(--lado);
  background: color-mix(in srgb, var(--vacio) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
/* --- El lockup ---------------------------------------------------------
   Todo sale de W, el ancho del logotipo de SUNMI, como manda marca/LEEME.md.
   Con una sola medida no hay dos números que se puedan desincronizar. */
.lockup {
  /* W es la ÚNICA medida del conjunto: el símbolo, las separaciones y el cuerpo
     de «AdsLink» se derivan de ella con calc(), como manda marca/LEEME.md. Por
     eso basta escalar W para que el lockup entero encoja sin deformarse.

     A 320 px la cabecera se salía 39: el lockup a 116 fijos más el conmutador
     de tema más el botón no cabían. Comprobado renderizado. */
  --w: clamp(80px, 24vw, 116px);
  display: inline-flex;
  align-items: center;
  gap: calc(0.0909 * var(--w));
  text-decoration: none;
  color: var(--texto);
}
.lockup-simbolo { width: calc(0.6043 * var(--w)); height: auto; flex: none }
.lockup-simbolo .terminal { stroke: var(--simbolo-terminal) }
.lockup-sunmi { width: var(--w); height: auto; display: block; color: var(--texto) }
.lockup-adslink {
  display: block;
  margin-top: calc(0.0398 * var(--w));
  font-size: calc(0.2159 * var(--w));
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
}
.menu { display: flex; gap: clamp(14px, 2vw, 28px); margin-left: auto }
.menu a { color: var(--texto-medio); text-decoration: none; font-size: 15px; white-space: nowrap }
.menu a:hover { color: var(--texto) }
.cabecera-fin { display: flex; align-items: center; gap: 12px; flex: none }
.tema {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borde-vivo); background: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.tema-punto { width: 13px; height: 13px; border-radius: 50%; background: var(--texto); box-shadow: inset -4px -1px 0 0 var(--vacio) }

/* ═══ PORTADA ══════════════════════════════════════════════════════════════
   La escena que abre: el terminal en su mostrador, proyectando el arte de un
   anunciante. Es la misma que ve quien entra al panel, de modo que la página
   de venta y el producto enseñan lo mismo. A su lado, lo que hay que leer.
   ═══════════════════════════════════════════════════════════════════════════ */
.portada {
  position: relative;
  background: var(--noche);
  color: var(--sobre-noche);
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(28px, 4vw, 64px) var(--lado);
  overflow: hidden;
  container-type: inline-size;
}
.portada > * { position: relative }
/* Después de la regla de arriba a propósito: con la misma especificidad gana
   la última, y declarado antes el velo perdía su `absolute`, ocupaba una celda
   de la rejilla y empujaba la escena a una segunda fila. */
.portada-luz {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(52% 46% at 74% 44%, rgb(255 96 0 / .16), transparent 70%);
}
.portada-texto { min-width: 0 }
.portada-cejilla { color: var(--sunmi) }

.titular {
  margin: 14px 0 0;
  /* El cuerpo sale de la portada y no de la ventana: el titular vive en una
     columna, no a lo ancho de la pantalla. */
  font-size: clamp(27px, 5cqi, 58px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: balance;
}
.titular em { font-style: normal; color: var(--sunmi) }

/* El dibujo es cuadrado y se recorta para cubrir: la proporción de la caja
   decide qué franja se ve. A 5/6 entra el terminal entero con su mostrador. */
.portada-escena {
  position: relative;
  aspect-ratio: 5 / 6;
  max-height: min(78svh, 680px);
  justify-self: center;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radio-gr);
}
.escena { position: absolute; inset: 0; width: 100%; height: 100% }

/* ═══ EL EQUIPO REAL ════════════════════════════════════════════════════════
   El terminal fotografiado con la pieza puesta en su vidrio. La portada cuenta
   el producto con un dibujo; esto lo enseña sobre el equipo que el comercio ya
   tiene, que es la prueba de que no hay que cambiar nada.
   ═══════════════════════════════════════════════════════════════════════════ */
.equipo-real {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--lado);
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.equipo-texto { min-width: 0; max-width: 46ch }
.equipo-texto h2 { margin: 12px 0 14px }
.equipo-texto p:last-child { margin: 0; color: var(--texto-medio); font-size: 16px; line-height: 1.55 }
.portada-equipo {
  margin: 0; justify-self: center;
  position: relative;
  width: min(100%, 320px);
  filter: drop-shadow(0 50px 70px rgb(0 0 0 / .6));
}
.portada-equipo img { width: 100%; height: auto }

/* El área de proyección del K2, medida sobre la propia imagen (388×900 px):
   el cristal cubre de 33 a 353 px en horizontal y de 115 a 640 en vertical,
   por debajo de la cámara y del logotipo, que van impresos en el bisel. Los
   valores anteriores dibujaban un rectángulo más estrecho y más alto que el
   vidrio, y la pieza quedaba flotando sobre la fotografía. */
.marquesina {
  position: absolute; left: 7.5%; top: 15%; width: 87%; height: 54%;
  border-radius: 1.7% / 1%; overflow: hidden;
  background: var(--pantalla);
  /* La pieza se mide contra la pantalla que la contiene, no contra la
     ventana: así el cuerpo tipográfico guarda su proporción con el equipo. */
  container-type: inline-size;
}
/* El vidrio: un reflejo diagonal y el oscurecimiento de los bordes. Es lo que
   funde la pieza con la fotografía en lugar de dejarla encima. */
.marquesina::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(107deg, rgb(255 255 255 / .10) 0 18%, rgb(255 255 255 / .03) 30%, transparent 46%),
    radial-gradient(125% 88% at 50% 118%, transparent 52%, rgb(0 0 0 / .5));
}
/* El símbolo de la marca, emitiendo desde el propio equipo. */
.mq-marca {
  position: absolute; right: 6cqi; top: 6cqi; width: 9cqi; height: auto;
  color: var(--naranja-campo); opacity: .5; z-index: 1;
}
/* Cada pieza es una creatividad de cartelería: el producto manda arriba y la
   ficha —categoría, nombre, detalle y precio— cierra abajo. El color de fondo
   sale del producto; el naranja de la marca queda para la categoría y para el
   tramo del ciclo, que es donde significa algo. */
.mq {
  position: absolute; inset: 0; opacity: 0;
  display: grid; grid-template-rows: 1fr auto; color: #fff;
}
.mq-burger   { background: radial-gradient(82% 40% at 50% 12%, #4a2415, transparent 72%), linear-gradient(178deg, #2a1410, #140a08 62%, #0b0605) }
.mq-refresco { background: radial-gradient(82% 40% at 50% 12%, #123c55, transparent 72%), linear-gradient(178deg, #0b2233, #061119 62%, #040c12) }
.mq-cafe     { background: radial-gradient(82% 40% at 50% 12%, #4a331e, transparent 72%), linear-gradient(178deg, #241a12, #120c08 62%, #0a0705) }
.mq-art { display: grid; place-items: center; padding: 8cqi 7cqi 2cqi; min-height: 0 }
.mq-art svg { width: 100%; height: 100%; max-height: 100%; object-fit: contain }
.mq-txt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqi;
  padding: 5cqi 6.5cqi 11cqi;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .55) 22%);
}
.mq-k {
  font-size: 3.5cqi; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sobre-naranja); background: var(--naranja-campo);
  padding: 1.4cqi 2.8cqi; border-radius: 99px;
}
.mq strong { font-size: 9.6cqi; line-height: 1.02; letter-spacing: -.028em; font-weight: 700; text-wrap: balance }
.mq-d { font-size: 4.3cqi; color: #c3cbd8; line-height: 1.34; text-wrap: balance }
.mq-precio {
  margin-top: 1.4cqi; font-size: 8.4cqi; font-weight: 700; letter-spacing: -.03em;
  color: var(--naranja-campo); font-variant-numeric: tabular-nums;
}
/* La pista del ciclo y el tramo recorrido: la pieza se está emitiendo. */
.mq::before, .mq::after {
  content: ''; position: absolute; left: 6.5cqi; right: 6.5cqi; bottom: 5cqi;
  height: .9cqi; border-radius: 99px;
}
.mq::before { background: rgb(255 255 255 / .17) }
.mq::after { background: var(--naranja-campo); transform: scaleX(.34); transform-origin: left center }

.portada-lead { margin-top: clamp(24px, 3vw, 40px); color: var(--noche-medio); font-size: clamp(16px, 1.4vw, 18.5px); max-width: 46ch }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }
.portada .boton-fantasma { color: var(--sobre-noche); border-color: rgb(255 255 255 / .26) }
.portada .boton-fantasma:hover { border-color: var(--sobre-noche) }

/* ═══ CINTA ════════════════════════════════════════════════════════════════ */
.cinta {
  background: var(--naranja-campo); color: var(--sobre-naranja);
  overflow: hidden; border-block: 1px solid rgb(0 0 0 / .18);
}
.cinta-pista {
  display: flex; gap: 0; width: max-content;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  padding: 11px 0;
}
.cinta-pista span { padding: 0 26px; border-right: 1px solid rgb(0 0 0 / .2); white-space: nowrap }
.cinta-pista .c-op { opacity: .55 }

/* ═══ EL CICLO ═════════════════════════════════════════════════════════════ */
.ciclo {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) var(--lado);
  display: grid; grid-template-columns: 1fr minmax(260px, .78fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
.pasos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 2px }
.pasos li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--borde) }
.pasos b { color: var(--sunmi-texto); font-variant-numeric: tabular-nums; font-size: 13.5px; letter-spacing: .08em }
.pasos strong { font-weight: 600 }
.pasos span { color: var(--texto-medio) }

.ciclo-escena { justify-self: center; text-align: center }
.tel { position: relative; width: min(100%, 300px); margin: 0 auto; filter: drop-shadow(0 36px 48px rgb(0 0 0 / .34)) }
.tel img { width: 100%; height: auto }
/* El área de pantalla del V3e, en % de la imagen. El equipo está fotografiado
   en perspectiva: las horizontales de su plano frontal caen 24°, medidos sobre
   la línea naranja del chasis, mientras las verticales se mantienen. Por eso
   se sesga y no se gira: un giro inclinaría también las verticales y la pieza
   volvería a despegarse de la fotografía. El área va ceñida hacia dentro
   porque el sesgo mantiene la altura del lado lejano, que en perspectiva
   es más corto: sin ese margen la pieza se salía del vidrio. */
.tel-pantalla {
  position: absolute; left: 6%; top: 15.5%; width: 88%; height: 78%;
  background: var(--pantalla); overflow: hidden;
  border-radius: 6% / 3.4%;
  container-type: inline-size;
}
/* El vidrio del terminal, para que la pieza quede debajo del reflejo. */
.tel-pantalla::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(107deg, rgb(255 255 255 / .09) 0 20%, transparent 44%),
    radial-gradient(130% 92% at 50% 116%, transparent 56%, rgb(0 0 0 / .42));
}
.cap {
  position: absolute; inset: 0; opacity: 0; color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1.8cqi; padding: 9cqi 7cqi; text-align: center;
  background:
    radial-gradient(86% 42% at 50% 6%, rgb(255 96 0 / .42), transparent 74%),
    linear-gradient(176deg, #26303f 0%, #141b26 58%, #0c1119 100%);
}
.cap-k {
  font-size: 3.2cqi; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sobre-naranja); background: var(--naranja-campo);
  padding: 1.1cqi 2.1cqi; border-radius: 99px;
}
.cap strong { font-size: 6.3cqi; line-height: 1.06; letter-spacing: -.025em; font-weight: 700; text-wrap: balance }
.cap-cobro { background: var(--naranja-campo); color: var(--sobre-naranja) }
.cap-cobro strong { font-size: 6.8cqi }
.cap-sub { font-size: 3.7cqi; opacity: .86; line-height: 1.3 }
.cap-ico { width: 7.7cqi; height: 7.7cqi; border-radius: 50%; border: .8cqi solid currentColor; opacity: .9 }
.ciclo-nota { margin: 22px 0 0; font-size: 13px; color: var(--texto-tenue) }

/* ═══ QUÉ CABE · campo naranja ═════════════════════════════════════════════ */
.cabe { background: var(--naranja-campo); color: var(--sobre-naranja); padding: clamp(56px, 8vw, 116px) var(--lado) }
.cabe-cab, .cabe-red, .mercados-cab, .mk { max-width: var(--ancho); margin-inline: auto }
.cabe h2, .mercados h2 { color: var(--sobre-naranja) }
.cabe-red { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(32px, 4vw, 54px) }
.pz { background: rgb(255 255 255 / .16); border: 1px solid rgb(0 0 0 / .14); border-radius: var(--radio-gr); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 7px }
.pz-k { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .62 }
.pz strong { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.06; letter-spacing: -.022em }
.pz p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; opacity: .78 }

/* ═══ EL PARQUE ════════════════════════════════════════════════════════════ */
.parque { max-width: var(--ancho); margin: 0 auto; padding: clamp(56px, 8vw, 116px) var(--lado) }
.fila { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 30px) clamp(10px, 1.4vw, 22px); align-items: end }
.fila li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0 }
.fila img { height: clamp(120px, 15vw, 210px); width: auto; object-fit: contain; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .22)) }
.fila b { margin-top: 14px; font-size: 16px; letter-spacing: .02em }
.fila span { font-size: 12.5px; color: var(--texto-tenue); line-height: 1.3; text-wrap: balance }
/* El equipo de salud cierra el parque con su propia imagen. Antes era una nota
   suelta y el lector la leía junto al terminal dibujado en la sección
   siguiente, de modo que el nombre quedaba puesto sobre otro equipo. */
.fuera {
  margin: clamp(34px, 4vw, 56px) 0 0; padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--borde); border-left: 3px solid var(--sunmi);
  border-radius: var(--radio); background: var(--panel);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
/* La escena: el equipo, quien lo usa y la pieza proyectándose en su vidrio.
   Las tres capas se miden en % sobre la propia fotografía, de modo que siguen
   al equipo a cualquier tamaño. La mano va por encima de la pieza: es lo que
   sostiene la escena, porque quien mira ve que se está tocando el anuncio. */
.fuera-escena { position: relative; margin: 0; width: min(100%, 430px); justify-self: center }
.fuera-fondo { display: block; width: 100%; height: auto }
.fuera-pantalla {
  position: absolute; left: 57.75%; top: 23.3%; width: 20%; height: 25.43%;
  overflow: hidden; background: var(--pantalla);
  container-type: inline-size;
}
.fuera-mano { position: absolute; left: 52%; top: 41.41%; width: 8.75%; height: auto; z-index: 2 }
.sa {
  position: absolute; inset: 0; opacity: 0; color: #fff;
  display: grid; grid-template-rows: 1fr auto;
  background:
    radial-gradient(84% 40% at 50% 10%, #10355c, transparent 72%),
    linear-gradient(178deg, #0d2743, #071626 60%, #040e18);
}
.sa-art { display: grid; place-items: center; padding: 12cqi 14cqi 2cqi; min-height: 0 }
.sa-art svg { width: 100%; height: 100%; max-height: 100%; object-fit: contain }
.sa-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqi; padding: 4cqi 7cqi 9cqi }
.sa-k {
  font-size: 5.4cqi; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sobre-naranja); background: var(--naranja-campo);
  padding: 1.6cqi 3cqi; border-radius: 99px;
}
.sa strong { font-size: 11cqi; line-height: 1.04; letter-spacing: -.028em; font-weight: 700; text-wrap: balance }
.sa-d { font-size: 6cqi; color: #b9c9de; line-height: 1.3; text-wrap: balance }
.sa::before, .sa::after {
  content: ''; position: absolute; left: 7cqi; right: 7cqi; bottom: 4.4cqi;
  height: 1.1cqi; border-radius: 99px;
}
.sa::before { background: rgb(255 255 255 / .18) }
.sa::after { background: var(--naranja-campo); transform: scaleX(.4); transform-origin: left center }
.sa-1 { opacity: 1 }
.fuera-texto { min-width: 0 }
.fuera h3 { margin: 10px 0 12px; font-size: clamp(19px, 2vw, 26px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance }
.fuera p:last-child { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texto-medio); max-width: 62ch }
.fuera strong { color: var(--texto); font-weight: 600 }

/* ═══ LO QUE NO CAMBIA ═════════════════════════════════════════════════════ */
.cambia {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(36px, 4vw, 64px) var(--lado) clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.cambia-texto { min-width: 0; max-width: 56ch }
/* El terminal de siempre, con su aplicativo: es la prueba de lo que dice la
   lista de al lado. Va como referencia, no como demostración, así que no
   lleva pieza proyectándose. */
.cambia-equipo { margin: 0; justify-self: center; width: min(100%, 230px) }
.cambia-equipo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgb(0 0 0 / .22)) }
.niegas { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 2px }
.niegas li { padding: 14px 0; border-top: 1px solid var(--borde); color: var(--texto-medio); font-size: 15.5px; line-height: 1.5 }
.niegas b { color: var(--texto); font-weight: 600 }

/* ═══ QUÉ MIDE ═════════════════════════════════════════════════════════════ */
.mide { max-width: var(--ancho); margin: 0 auto; padding: clamp(56px, 8vw, 116px) var(--lado) }
.medidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(32px, 4vw, 54px) }
.md { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-gr); padding: clamp(20px, 2vw, 28px) }
.md b { display: block; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.018em; margin-bottom: 7px }
.md p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--texto-medio) }
/* La medida que nadie más entrega ocupa toda la fila: es el argumento, no un
   ítem más de una lista de cuatro. */
.md-clave { grid-column: 1 / -1; background: var(--noche); border-color: transparent; color: var(--sobre-noche); position: relative; overflow: hidden }
.md-clave::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 88% 50%, rgb(255 96 0 / .22), transparent 70%); pointer-events: none }
.md-clave > * { position: relative }
.md-sello { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sunmi); margin-bottom: 12px }
.md-clave b { font-size: clamp(22px, 2.6vw, 34px) }
.md-clave p { color: var(--noche-medio); max-width: 68ch; font-size: 15.5px }

.informe { margin-top: clamp(24px, 3vw, 38px); border: 1px solid var(--borde); border-radius: var(--radio-gr); background: var(--panel); overflow: hidden }
.informe-cab { display: flex; align-items: center; gap: 14px; padding: 16px clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--borde) }
.informe-cab .cejilla { margin: 0 }
.informe-marca { margin-left: auto; font-size: 12px; color: var(--texto-tenue); border: 1px dashed var(--borde-vivo); padding: 3px 10px; border-radius: 999px }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px }
.tabla th, .tabla td { text-align: right; padding: 13px clamp(18px, 2vw, 26px); border-top: 1px solid var(--borde) }
.tabla th:first-child, .tabla td:first-child { text-align: left }
.tabla thead th { border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue) }
.tabla td { font-variant-numeric: tabular-nums; color: var(--texto-medio) }
.tabla td:first-child { color: var(--texto); font-weight: 500 }
.tabla td:last-child { color: var(--sunmi-texto); font-weight: 600 }

/* ═══ MERCADOS · campo naranja ═════════════════════════════════════════════ */
.mercados { background: var(--naranja-campo); color: var(--sobre-naranja); padding: clamp(56px, 8vw, 116px) var(--lado) }
.mk { list-style: none; margin: clamp(32px, 4vw, 54px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 }
.mk li { padding: 20px 0; border-top: 1px solid rgb(0 0 0 / .22); padding-right: 24px }
.mk b { display: block; font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -.02em; margin-bottom: 4px }
.mk span { font-size: 14.5px; line-height: 1.45; opacity: .74 }

/* ═══ ALCANCE ══════════════════════════════════════════════════════════════ */
.alcance { max-width: var(--ancho); margin: 0 auto; padding: clamp(56px, 8vw, 116px) var(--lado) }
.tipos { list-style: none; margin: clamp(32px, 4vw, 54px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 }
.tipos li { padding: 18px 24px 18px 0; border-top: 1px solid var(--borde) }
.tipos b { display: block; font-size: 17.5px; letter-spacing: -.012em; margin-bottom: 3px }
.tipos span { font-size: 14.5px; color: var(--texto-medio); line-height: 1.45 }

/* ═══ CIERRE · campo noche ═════════════════════════════════════════════════ */
.cierre { background: var(--noche); color: var(--sobre-noche); padding: clamp(64px, 9vw, 130px) var(--lado); text-align: center; position: relative; overflow: hidden }
.cierre::before { content: ''; position: absolute; inset: 0; background: radial-gradient(54% 60% at 50% 0%, rgb(255 96 0 / .24), transparent 70%); pointer-events: none }
.cierre > * { position: relative }
.cierre .cejilla { color: var(--sunmi); opacity: 1 }
.cierre h2 { color: var(--sobre-noche) }
.cierre .lead { color: var(--noche-medio); margin-inline: auto; text-align: center }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px }
.contacto { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; margin: 40px 0 0; padding: 0 }
.contacto a { color: var(--noche-medio); text-decoration: none; font-size: 15px }
.contacto a:hover { color: var(--sobre-noche) }

/* ═══ PIE ══════════════════════════════════════════════════════════════════ */
.pie { max-width: var(--ancho); margin: 0 auto; padding: 26px var(--lado); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; color: var(--texto-tenue) }
.pie-fin { margin-left: auto }

/* ═══ MOVIMIENTO ═══════════════════════════════════════════════════════════
   Uno solo y con sentido: la pieza se releva con el ritmo con que lo hace un
   terminal, y la cinta corre como el parte de una emisora. Todo vive dentro de
   `no-preference`; sin él queda una composición fija que se sostiene igual,
   con la primera pieza puesta y la cinta quieta.
   ═══════════════════════════════════════════════════════════════════════════ */
.mq-1, .cap-a { opacity: 1 }

@media (prefers-reduced-motion: no-preference) {
  @keyframes releva { 0%, 1% { opacity: 0 } 4%, 34% { opacity: 1 } 37%, 100% { opacity: 0 } }
  @keyframes avanza { 0%, 4% { transform: scaleX(0) } 30% { transform: scaleX(1) } 100% { transform: scaleX(1) } }
  .mq { animation: releva 13.5s infinite both }
  .mq::after { animation: avanza 13.5s infinite both; animation-delay: inherit }
  @keyframes relevaDos { 0%, 1% { opacity: 0 } 4%, 46% { opacity: 1 } 49%, 100% { opacity: 0 } }
  .sa { animation: relevaDos 11s infinite both }
  .sa-2 { animation-delay: 5.5s }
  .sa::after { animation: avanza 11s infinite both; animation-delay: inherit }
  .mq-1 { animation-delay: 0s }
  .mq-2 { animation-delay: 4.5s }
  .mq-3 { animation-delay: 9s }

  /* El ciclo del V3e: proyecta, llega el cobro y se apodera, vuelve. */
  @keyframes proyecta-a { 0%, 2% { opacity: 0 } 6%, 30% { opacity: 1 } 36%, 100% { opacity: 0 } }
  @keyframes cobra      { 0%, 34% { opacity: 0 } 40%, 62% { opacity: 1 } 68%, 100% { opacity: 0 } }
  @keyframes proyecta-b { 0%, 66% { opacity: 0 } 72%, 96% { opacity: 1 } 100%  { opacity: 0 } }
  .cap-a { animation: proyecta-a 12s infinite both }
  .cap-cobro { animation: cobra 12s infinite both }
  .cap-b { animation: proyecta-b 12s infinite both }

  @keyframes corre { from { transform: translateX(0) } to { transform: translateX(-50%) } }
  .cinta-pista { animation: corre 38s linear infinite }
}

/* Parada, se ve la primera pieza; las demás esperan su turno. */
.escena .pieza + .pieza { opacity: 0 }

@media (prefers-reduced-motion: no-preference) {
  .escena .pieza {
    animation: relevo-3 15s cubic-bezier(.22,1,.36,1) infinite;
  }
  /* El turno de cada pieza. Va AQUÍ y no en un atributo `style` del SVG:
     la CSP del sitio declara `style-src` sin `'unsafe-inline'`, así que el
     navegador descarta los estilos en línea —y los descarta sin que se note,
     porque el aviso solo sale por la consola—. Con los tres retardos en cero
     las tres piezas se relevaban a la vez y la pantalla se quedaba negra 9,5 s
     de cada 15, enseñando el `rect` de fondo. */
  .escena .pieza-2 { animation-delay: 5s }
  .escena .pieza-3 { animation-delay: 10s }
  /* Cada pieza se mantiene puesta todo su turno y empieza a irse justo cuando
     entra la siguiente: apagarla antes deja un parpadeo negro en cada relevo,
     que en una pantalla de publicidad es lo que no puede pasar. */
  @keyframes relevo-3 {
    0%           { opacity: 0 }
    3%, 33.33%   { opacity: 1 }
    36.33%, 100% { opacity: 0 }
  }
  .arco {
    transform-box: fill-box; transform-origin: left center;
    animation: emitir 5s cubic-bezier(.16,1,.3,1) infinite;
  }
  .arco-2 { animation-name: emitir-2; animation-delay: .22s }
  .arco-3 { animation-name: emitir-3; animation-delay: .44s }
  @keyframes emitir   { 0% { opacity: 0; transform: translateX(-16px) scaleX(.86) } 18% { opacity: 1 }    100% { opacity: 0; transform: translateX(12px) scaleX(1.05) } }
  @keyframes emitir-2 { 0% { opacity: 0; transform: translateX(-16px) scaleX(.86) } 18% { opacity: .55 }  100% { opacity: 0; transform: translateX(12px) scaleX(1.05) } }
  @keyframes emitir-3 { 0% { opacity: 0; transform: translateX(-16px) scaleX(.86) } 18% { opacity: .28 }  100% { opacity: 0; transform: translateX(12px) scaleX(1.05) } }
}

/* ═══ ANCHOS ═══════════════════════════════════════════════════════════════ */
/* Dos botones en la cabecera piden su propio ajuste antes de que el menú se
   retire: sin esto, entre los 900 y los 1010 px el conjunto se salía. */
@media (max-width: 1010px) {
  .cabecera { gap: clamp(12px, 2vw, 22px) }
  .menu { gap: clamp(10px, 1.4vw, 18px) }
  .menu a { font-size: 14px }
  .cabecera-fin { gap: 8px }
  .cabecera-fin .boton { padding: 10px 14px; font-size: 14px }
}

@media (max-width: 1080px) {
  .fila { grid-template-columns: repeat(3, 1fr); row-gap: 30px }
  .medidas { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 900px) {
  .menu { display: none }
  /* En una columna la escena va delante: es lo que cuenta el producto. */
  .portada { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 34px) }
  .portada-texto { order: 2 }
  .portada-escena { order: 1; aspect-ratio: 4 / 3; max-height: 52svh }
  .equipo-real { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center }
  .cambia { grid-template-columns: 1fr; gap: 32px; justify-items: center }
  .cambia-equipo { width: min(62%, 190px) }
  .equipo-texto { margin-inline: auto }
  .portada-equipo { width: min(78%, 280px) }
  .ciclo { grid-template-columns: 1fr; gap: 40px }
  .fuera { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center }
  .fuera-escena { width: min(100%, 330px) }
  .fuera p:last-child { margin-inline: auto }
}
@media (max-width: 620px) {
  .fila { grid-template-columns: repeat(2, 1fr) }
  .medidas { grid-template-columns: 1fr }
  .informe { overflow-x: auto }
  .tabla { min-width: 520px }
  .pie-fin { margin-left: 0 }
  .cabecera { gap: 12px }
  .cabecera-fin .boton { padding: 10px 16px; font-size: 14px }
  /* De los dos botones se retira el de la demostración: esa acción está en la
     portada y en el cierre, mientras que entrar al panel solo está aquí. */
  .cabecera .boton-principal { display: none }
}
@media (max-width: 400px) {
  .fila { grid-template-columns: repeat(2, 1fr) }
  .boton-gr { padding: 13px 20px; font-size: 15px }
  .portada-acciones .boton, .cierre-acciones .boton { flex: 1 1 100% }
}
@media (max-width: 760px) {
  /* Las llamadas del plano van posicionadas y sin partir: por debajo de este
     ancho se salen de la pantalla. El dibujo sigue explicándose con sus
     números, y lo que decían ya está escrito en la lista de al lado. */
}