/* ============================================================
   NOTIMIGA · SISTEMA VISUAL CLARO
   Una landing de producto, no un instrumento de laboratorio.
   Fondo claro, mucho aire, jerarquía obvia y demostraciones
   que se parecen a lo que el cliente ya conoce: un chat.

   El scroll es elegante, no secuestrado: la página se lee
   normal y las piezas entran con un revelado suave.
   ============================================================ */

/* ---------- 1. Tipografías autoalojadas ---------- */

@font-face {
  font-family: 'Anybody';
  src: url('../fonts/anybody-latin-standard.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-standard.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('../fonts/martian-mono-latin-standard.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-stretch: 75% 112%;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tintas y medidas ---------- */

:root {
  /* Papel */
  --papel: #FFFFFF;
  --papel-2: #F7F8FA;
  --papel-3: #EEF1F7;
  --crema: #FCFAF7;

  /* Tinta. Nunca gris puro: todo tiene una gota del azul de marca. */
  --tinta: #101828;
  --tinta-2: #47536B;
  --tinta-3: #667085;

  --borde: #E4E8F0;
  --borde-fuerte: #CFD6E4;

  /* Marca */
  --azul: #2E63F7;
  --azul-hondo: #1D46C0;
  --azul-suave: #EDF2FF;
  --violeta: #7A3CE8;

  /* WhatsApp: sólo donde el canal es el tema */
  --verde: #25D366;
  --verde-hondo: #0B7A66;
  --verde-suave: #E8F8EF;
  --verde-globo: #DCF8C6;
  --verde-barra: #075E54;
  --lienzo-chat: #ECE5DD;

  /* Estados */
  --ambar-hondo: #92610A;
  --ambar-suave: #FEF6E4;
  --rojo: #D92D4E;
  --rojo-suave: #FFECF0;

  --liston: linear-gradient(100deg, var(--azul) 0%, var(--violeta) 100%);

  /* Tipos */
  --display: 'Anybody', system-ui, sans-serif;
  --texto: 'Archivo', system-ui, sans-serif;
  --num: 'Martian Mono', ui-monospace, monospace;

  /* Ritmo */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 18px;
  --s5: 28px;
  --s6: 42px;
  --s7: 64px;
  --s8: 96px;

  --r-chico: 8px;
  --r: 14px;
  --r-grande: 22px;

  /* Sombras: suaves y en capas, teñidas de azul */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-2: 0 2px 4px rgba(16, 24, 40, .04), 0 8px 20px -8px rgba(16, 24, 40, .10);
  --sombra-3: 0 4px 8px rgba(16, 24, 40, .04), 0 20px 40px -16px rgba(16, 24, 40, .16);
  --sombra-4: 0 8px 16px rgba(16, 24, 40, .05), 0 32px 64px -24px rgba(16, 24, 40, .22);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --canal: clamp(20px, 5vw, 64px);
  --alto-cabecera: 68px;
}

/* ---------- 3. Piso ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--papel);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: transparent;
  color: var(--tinta-2);
  font-family: var(--texto);
  font-size: clamp(15.5px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   VIDEO DE FONDO Y EFECTO DE SCROLLING WEB (ALTA DEFINICIÓN)
   - Video en alta definición fijo detrás de toda la página.
   - Micro-difuminado subpíxel ultra fino (blur: 0.4px) para máxima nitidez.
   - Renderizado optimizado para contraste y definición por GPU.
   - Velo translúcido ligero que resalta el video con legibilidad total.
   ============================================================ */

.video-fondo {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: -2;
  backface-visibility: hidden;

  /* Antes llevaba blur(0.4px) —o sea, ninguno— y encima contrast(1.14)
     saturate(1.24), que lo hacían MÁS vívido. Así el video se seguía
     reconociendo (la N, los circuitos) y competía con el texto en vez
     de acompañarlo. Con desenfoque de verdad, algo desaturado y más
     claro, deja de ser una imagen y pasa a ser un degradado que se
     mueve. La escala tapa los bordes transparentes que deja el blur. */
  filter: blur(7px) saturate(1.12) brightness(1.0);
  transform: scale(1.08) translateZ(0);
  will-change: transform;
}

/* El velo era radial y su punto más transparente —22 % de blanco— caía
   justo en el centro de arriba, que es exactamente donde va el titular.
   Ahora es parejo: el texto tiene el mismo suelo en toda la página y el
   video se lee como un lavado de color, nunca como una imagen. */
.video-fondo__velo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(150% 80% at 50% 0%, rgba(120, 150, 255, .10), transparent 62%),
    linear-gradient(to bottom,
      rgba(9, 14, 34, .30) 0%,
      rgba(9, 14, 34, .40) 55%,
      rgba(9, 14, 34, .48) 100%);
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--azul-suave);
  color: var(--azul-hondo);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--azul) 55%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

a {
  color: var(--azul);
  text-underline-offset: .2em;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--azul);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--r-chico);
  text-decoration: none;
  transition: top .2s var(--ease);
}

.salto:focus-visible {
  top: 16px;
}

/* ---------- 4. Voces tipográficas ---------- */

.titular {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 92%;
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

.titular em {
  font-style: normal;
  background: var(--liston);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.titulo {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 90%;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

.subtitulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 90%;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 0;
}

.entrada {
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  line-height: 1.6;
  color: var(--tinta-2);
  margin: 0;
  max-width: 58ch;
  text-wrap: pretty;
}

.parrafo {
  margin: 0;
  color: var(--tinta-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.parrafo strong,
.entrada strong {
  color: var(--tinta);
  font-weight: 600;
}

.nota {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-3);
  margin: 0;
  max-width: 66ch;
}

.nota b {
  color: var(--tinta-2);
  font-weight: 600;
}

.rotulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 80%;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul-hondo);
  line-height: 1;
}

.cifra {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

/* ---------- 5. Estructura ---------- */

.contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--canal);
}

.seccion {
  padding: clamp(26px, 3.4vw, 48px) 0;
  position: relative;
}

/* Antes las grises y las crema tapaban el video del todo y las blancas
   lo dejaban pasar entero: la página alternaba entre dos fondos que no
   se parecían. Ahora todas son tintes translúcidos sobre el mismo
   lavado, y el borde se desvanece por arriba y por abajo en vez de
   cortar en seco. */
.seccion--gris,
.seccion--crema {
  position: relative;
  border: 0;
}

/* Los tintes de sección desaparecen: ahora el ritmo lo dan los huecos
   entre lápidas, que es donde el video se ve entero. */



.encabezado-seccion {
  display: grid;
  gap: var(--s4);
  justify-items: center;
  text-align: center;
  max-width: 68ch;
  margin: 0 auto clamp(40px, 5vw, 66px);
}

.encabezado-seccion--izq {
  justify-items: start;
  text-align: left;
  margin-left: 0;
}

.pila {
  display: grid;
  gap: var(--s4);
}

.fila {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* ---------- 6. Pastillas y sellos ---------- */

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--azul-suave);
  color: var(--azul-hondo);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

.pastilla svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.pastilla__punto {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent);
  flex: none;
}

.sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.sello--hoy {
  background: var(--verde-suave);
  color: var(--verde-hondo);
}

.sello--pronto {
  background: var(--ambar-suave);
  color: var(--ambar-hondo);
}

.sello--agotado {
  background: var(--rojo-suave);
  color: var(--rojo);
}

.sello--neutro {
  background: var(--papel-3);
  color: var(--tinta-3);
}

/* ---------- 7. Botones ---------- */

.boton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  padding: 15px 24px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 86%;
  font-size: 15.5px;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.boton svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.boton--principal {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 10px 24px -10px color-mix(in srgb, var(--azul) 75%, transparent);
}

.boton--principal:hover {
  background: var(--azul-hondo);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .12), 0 16px 32px -12px color-mix(in srgb, var(--azul) 80%, transparent);
}

.boton--secundario {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-1);
}

.boton--secundario:hover {
  background: var(--papel-2);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-2);
}

.boton--claro {
  background: #fff;
  color: var(--azul-hondo);
  box-shadow: 0 10px 24px -12px rgba(6, 14, 40, .5);
}

.boton--claro:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 16px 32px -14px rgba(6, 14, 40, .6);
}

.boton--fantasma {
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 40%, transparent);
}

.boton--fantasma:hover {
  background: color-mix(in srgb, #fff 24%, transparent);
}

.boton--chico {
  padding: 11px 18px;
  font-size: 14px;
}

.boton:active {
  transform: translateY(0);
}

/* ---------- 8. Barra de progreso del scroll ---------- */

.progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 90;
  transform-origin: 0 50%;
  transform: scaleX(var(--avance, 0));
  background: var(--liston);
  pointer-events: none;
}

/* ---------- 9. Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.cabecera--fija {
  border-bottom-color: var(--borde);
  box-shadow: 0 4px 20px -12px rgba(16, 24, 40, .28);
}

.cabecera__caja {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--canal);
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}

.marca__glifo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
}

.marca__texto {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: 19px;
  letter-spacing: .06em;
  color: var(--tinta);
  line-height: 1;
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.menu a {
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 88%;
  font-size: 15px;
  color: var(--tinta-2);
  text-decoration: none;
  line-height: 1;
  transition: color .18s var(--ease), background .18s var(--ease);
}

.menu a:hover {
  color: var(--tinta);
  background: var(--papel-3);
}

.menu a[aria-current='true'] {
  color: var(--azul);
  background: var(--azul-suave);
}

.cabecera__cta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

.hamburguesa {
  display: none;
  appearance: none;
  border: 0;
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--tinta);
  margin-left: auto;
}

.hamburguesa svg {
  width: 20px;
  height: 20px;
}

.hamburguesa__cerrar {
  display: none;
}

.hamburguesa[aria-expanded='true'] .hamburguesa__abrir {
  display: none;
}

.hamburguesa[aria-expanded='true'] .hamburguesa__cerrar {
  display: block;
}

/* ---------- 10. Portada ---------- */

.portada {
  position: relative;
  padding: clamp(44px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
}

/* Los halos de marca vivían aquí, con `width: 70%; height: 120%`. Ahora
   los dos pseudoelementos de la portada los usa el oscurecedor (§34) y
   `inset: 0` NO anula width ni height: sobrevivían y recortaban el
   degradado al 70 % del ancho. Se declaran donde se usan y punto. */

.portada__caja {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.portada__texto {
  display: grid;
  gap: var(--s5);
  justify-items: start;
}

.portada .entrada {
  max-width: 52ch;
}

.confianza {
  display: grid;
  gap: 10px;
  padding-top: var(--s2);
}

.confianza__punto {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--tinta-2);
}

.confianza__punto svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--verde-hondo);
}

/* ---------- 11. El chat: la demostración principal ---------- */

.chat {
  width: 100%;
  max-width: 402px;
  margin-inline: auto;
  border-radius: var(--r-grande);
  overflow: hidden;
  background: var(--lienzo-chat);
  box-shadow: var(--sombra-4);
  border: 1px solid var(--borde-fuerte);
}

.chat__barra {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: var(--verde-barra);
  color: #fff;
}

.chat__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 22%, transparent);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex: none;
}

.chat__quien {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 15px;
  line-height: 1.1;
  color: #fff;
}

.chat__estado {
  font-size: 11.5px;
  line-height: 1.1;
  color: color-mix(in srgb, #fff 78%, transparent);
}

/* Columna flex anclada abajo, no rejilla. Con una rejilla y un alto
   reservado, las filas se estiran para rellenarlo y las burbujas salen
   deformadas mientras la conversación se reproduce. Anclada abajo, los
   mensajes se apilan hacia arriba igual que en WhatsApp. */
.chat__lienzo {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 9px;
  background-color: var(--lienzo-chat);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .025) 0 2px, transparent 3px);
  background-size: 44px 44px, 62px 62px;
}

.chat__dia {
  align-self: center;
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  font-size: 11px;
  color: var(--tinta-3);
  line-height: 1.2;
  margin-bottom: 2px;
}

.globo {
  position: relative;
  max-width: 84%;
  padding: 8px 11px 7px;
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font-size: 14.5px;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .12);
  /* Bloque, no rejilla. Con `display: grid` cada hijo se vuelve fila
     propia: un simple <b> dentro de la frase se iba solo a la línea de
     abajo y partía el mensaje por la mitad. */
  display: block;
  flex: 0 0 auto;
}

.globo--entra {
  align-self: flex-start;
  border-top-left-radius: 4px;
}

.globo--sale {
  align-self: flex-end;
  background: var(--verde-globo);
  border-top-right-radius: 4px;
}

.globo b {
  font-weight: 700;
}

.globo__pie {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 10.5px;
  color: var(--tinta-3);
  line-height: 1;
}

.globo__pie svg {
  width: 14px;
  height: 14px;
  color: #4FC3F7;
}

/* Nota de voz */
.audio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

.audio__play {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .16s var(--ease), background .16s var(--ease);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--verde-hondo);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.audio__play:hover {
  background: #0A6A59;
  transform: scale(1.06);
}

.audio__play:active {
  transform: scale(.96);
}

.audio__icono {
  width: 13px;
  height: 13px;
  grid-area: 1 / 1;
}

.audio__icono--play {
  margin-left: 2px;
}

.audio__icono--pausa,
.audio[data-sonando='true'] .audio__icono--play {
  display: none;
}

.audio[data-sonando='true'] .audio__icono--pausa {
  display: block;
}

/* Dos capas con exactamente las mismas barras. La de encima lleva el
   color de «ya sonó» y se recorta por la izquierda con --avance: el
   barrido es una sola propiedad y no hay que tocar 32 nodos por cuadro. */
.onda {
  position: relative;
  height: 26px;
  flex: 1 1 auto;
  min-width: 0;
}

.onda__capa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.onda__capa--llena {
  clip-path: inset(0 calc(100% - var(--avance, 0) * 100%) 0 0);
}

.onda i {
  flex: 1 1 auto;
  min-width: 2px;
  max-width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tinta-3) 55%, transparent);
  display: block;
}

.onda__capa--llena i {
  background: var(--verde-hondo);
}

.audio__dur {
  font-family: var(--num);
  font-size: 11px;
  color: var(--tinta-3);
  flex: none;
}

/* Imagen dentro del chat */
.foto-chat {
  border-radius: 9px;
  overflow: hidden;
  width: 100%;
  max-width: 176px;
  aspect-ratio: 4 / 3;
  position: relative;
  display: block;
  margin-bottom: 7px;
  background: var(--papel-3);
}

.foto-chat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Va del lado de quien escribe. En la cabecera pone «Marisol», así que
   este es el teléfono de la tienda: los globos verdes de la derecha son
   NOTIMIGA, y el «escribiendo…» anuncia su respuesta. A la izquierda
   estaba diciendo que quien escribe es Marisol, que es justo al revés. */
.chat__escribiendo {
  align-self: flex-end;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 12px;
  border-top-right-radius: 4px;
  background: var(--verde-globo);
  box-shadow: 0 1px 1px rgba(16, 24, 40, .12);
}

.chat__escribiendo i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--verde-hondo) 78%, transparent);
  animation: latido 1.3s infinite ease-in-out;
}

.chat__escribiendo i:nth-child(2) {
  animation-delay: .18s;
}

.chat__escribiendo i:nth-child(3) {
  animation-delay: .36s;
}

@keyframes latido {

  0%,
  60%,
  100% {
    opacity: .3;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat__pie {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px 12px;
  background: var(--papel-3);
  border-top: 1px solid var(--borde);
}

.chat__campo {
  flex: 1 1 auto;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--tinta-3);
  font-size: 13.5px;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px var(--borde);
}

.chat__enviar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--verde-hondo);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.chat__enviar svg {
  width: 16px;
  height: 16px;
}

/* El mensaje entra: lo usa el guion del chat */
.globo,
.chat__escribiendo,
.chat__dia {
  animation: entra-globo .42s var(--ease) both;
}

@keyframes entra-globo {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 12. Franja de canales ---------- */

.franja {
  background: color-mix(in srgb, var(--papel) 72%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: var(--s5) 0;
}

.franja__caja {
  display: flex;
  align-items: center;
  gap: var(--s4) var(--s6);
  flex-wrap: wrap;
  justify-content: center;
}

.franja__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.franja__canal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 90%;
  font-size: 15px;
  color: var(--tinta-2);
}

.franja__canal svg {
  width: 19px;
  height: 19px;
  color: var(--tinta-3);
  flex: none;
}

.franja__canal--vivo {
  color: var(--tinta);
}

.franja__canal--vivo svg {
  color: var(--verde-hondo);
}

/* ---------- 13. El problema ---------- */

.problema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--borde);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}

.cifras__celda {
  background: var(--papel);
  padding: var(--s4) var(--s5);
  display: grid;
  gap: 4px;
}

.cifras__num {
  font-family: var(--num);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

.cifras__num--alerta {
  color: var(--rojo);
}

.cifras__que {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--tinta-3);
}

.muro {
  display: grid;
  gap: 8px;
}

.muro__msj {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 15px;
  border-radius: 11px;
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-1);
  font-size: 14.5px;
  color: var(--tinta-2);
}

.muro__hora {
  font-family: var(--num);
  font-size: 11.5px;
  color: var(--tinta-3);
  flex: none;
}

.muro__msj--tarde {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rojo) 28%, transparent), var(--sombra-1);
  background: var(--rojo-suave);
  color: var(--tinta);
}

.muro__msj--tarde .muro__hora {
  color: var(--rojo);
  font-weight: 700;
}

/* ---------- 14. Pasos ---------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  counter-reset: paso;
}

.paso {
  position: relative;
  background: var(--papel);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-2);
  display: grid;
  gap: var(--s3);
  align-content: start;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.paso:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-3);
}

.paso__num {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--liston);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--num);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.04em;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--azul) 80%, transparent);
}

/* ---------- 15. Funciones: filas alternadas ---------- */

.funciones {
  display: grid;
  gap: clamp(56px, 8vw, 110px);
}

.funcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.funcion:nth-child(even) .funcion__texto {
  order: 2;
}

.funcion__texto {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  align-content: start;
}

.funcion__lista {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.funcion__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: var(--tinta-2);
}

.funcion__lista svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  color: var(--verde-hondo);
}

/* La lámina: el marco donde vive cada demostración */
.lamina {
  background: var(--papel);
  border-radius: var(--r-grande);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-3);
  overflow: hidden;
}

.lamina__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 12px 18px;
  border-bottom: 1px solid var(--borde);
  background: var(--papel-2);
}

.lamina__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.lamina__cuerpo {
  padding: clamp(18px, 2.4vw, 26px);
  display: grid;
  gap: var(--s4);
}

/* Fichas de lo que entendió */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--papel-2);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 13.5px;
  line-height: 1;
  color: var(--tinta-2);
}

.etiqueta b {
  color: var(--tinta);
  font-weight: 600;
}

.etiqueta--marca {
  background: var(--azul-suave);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azul) 22%, transparent);
  color: var(--azul-hondo);
}

.etiqueta--marca b {
  color: var(--azul-hondo);
}

.etiqueta__color {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .18);
}

/* La foto que analiza */
.plancha {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.plancha__foto {
  border-radius: var(--r-chico);
  aspect-ratio: 3 / 4;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12);
}

.plancha__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La ficha del archivo va debajo, no encima. Sobre la imagen tapaba
   justo el producto y se leía como una marca de agua de depuración. */
.plancha__col {
  display: grid;
  gap: 8px;
  align-content: start;
}

.plancha__nota {
  font-family: var(--num);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--tinta-3);
  text-align: center;
}

/* Tabla de inventario, en versión legible */
.tabla-caja {
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 420px;
}

.tabla th {
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla td {
  padding: 12px;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta-2);
  white-space: nowrap;
}

.tabla tr:last-child td {
  border-bottom: 0;
}

.tabla .n {
  text-align: right;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.tabla .sku {
  font-family: var(--num);
  font-size: 12.5px;
  letter-spacing: -.03em;
  color: var(--tinta);
}

.tabla tr.agotada td {
  background: var(--rojo-suave);
  color: var(--rojo);
}

.tabla tr.agotada .sku {
  color: var(--rojo);
}

.tabla tr.alterna td {
  background: var(--verde-suave);
}

.tabla tr.alterna .sku {
  color: var(--verde-hondo);
}

/* Ficha del cliente */
.ficha {
  display: grid;
  gap: 1px;
  background: var(--borde);
  border-radius: var(--r-chico);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--borde);
}

.ficha__renglon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: 11px 14px;
  background: var(--papel);
  font-size: 14px;
}

.ficha__clave {
  color: var(--tinta-3);
}

.ficha__valor {
  color: var(--tinta);
  font-weight: 600;
  text-align: right;
}

.ficha__valor--bien {
  color: var(--verde-hondo);
}

/* ---------- 16. Tarjetas de beneficio ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--s4);
}

.tarjeta {
  background: var(--papel);
  border-radius: var(--r);
  padding: clamp(24px, 2.8vw, 32px);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-1);
  display: grid;
  gap: var(--s3);
  align-content: start;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-3);
}

.tarjeta__glifo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--azul-suave);
  color: var(--azul);
  flex: none;
}

.tarjeta__glifo svg {
  width: 23px;
  height: 23px;
}

/* ---------- 17. Canales ---------- */

.canales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.canal {
  background: var(--papel);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-1);
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.canal--vivo {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--verde) 55%, transparent), var(--sombra-2);
}

.canal__alto {
  display: flex;
  align-items: center;
  gap: 11px;
}

.canal__glifo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--papel-3);
  color: var(--tinta-3);
  flex: none;
}

.canal__glifo svg {
  width: 21px;
  height: 21px;
}

.canal--vivo .canal__glifo {
  background: var(--verde-suave);
  color: var(--verde-hondo);
}

.canal__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 17px;
  color: var(--tinta);
  line-height: 1.15;
}

.canal__nota {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-2);
  margin: 0;
}

/* Vistas previas dentro de cada canal */
.vista {
  border-radius: 10px;
  background: var(--papel-2);
  box-shadow: inset 0 0 0 1px var(--borde);
  padding: 12px;
  display: grid;
  gap: 7px;
  margin-top: auto;
}

.vista__globo {
  max-width: 90%;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.35;
  background: #fff;
  color: var(--tinta-2);
  box-shadow: 0 1px 1px rgba(16, 24, 40, .08);
}

.vista__globo--sale {
  justify-self: end;
  background: var(--verde-globo);
  color: var(--tinta);
}

.vista__asunto {
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: -.03em;
  color: var(--tinta);
}

.vista__linea {
  height: 6px;
  border-radius: 3px;
  background: var(--borde-fuerte);
}

.vista__linea--corta {
  width: 56%;
}

.vista--agenda {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  align-items: end;
}

.vista__dia {
  display: grid;
  gap: 4px;
  align-content: end;
}

.vista__rotulo-dia {
  font-family: var(--num);
  font-size: 9.5px;
  color: var(--tinta-3);
  text-align: center;
  margin-bottom: 2px;
}

.vista__bloque {
  height: 8px;
  border-radius: 3px;
  background: var(--borde-fuerte);
}

.vista__bloque--libre {
  background: color-mix(in srgb, var(--borde-fuerte) 45%, transparent);
}

.vista__bloque--cita {
  background: var(--azul);
  box-shadow: 0 3px 9px -3px color-mix(in srgb, var(--azul) 75%, transparent);
}

/* ---------- 18. Preguntas ---------- */

.preguntas {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: var(--s3);
}

.pregunta {
  background: var(--papel);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-1);
  overflow: hidden;
  transition: box-shadow .2s var(--ease);
}

.pregunta[open] {
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-2);
}

.pregunta__cabeza {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 20px clamp(18px, 2.4vw, 26px);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 90%;
  font-size: clamp(16px, 1.2vw, 18px);
  letter-spacing: -.012em;
  color: var(--tinta);
  transition: background .16s var(--ease);
}

.pregunta__cabeza::-webkit-details-marker {
  display: none;
}

.pregunta__cabeza:hover {
  background: var(--papel-2);
}

.pregunta__cruz {
  flex: none;
  width: 17px;
  height: 17px;
  position: relative;
  color: var(--azul);
}

.pregunta__cruz::before,
.pregunta__cruz::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .24s var(--ease);
}

.pregunta__cruz::after {
  transform: rotate(90deg);
}

.pregunta[open] .pregunta__cruz::after {
  transform: rotate(0);
}

.pregunta__cuerpo {
  padding: 0 clamp(18px, 2.4vw, 26px) 22px;
  margin: 0;
  color: var(--tinta-2);
  max-width: 70ch;
}

.pregunta__cuerpo b {
  color: var(--tinta);
  font-weight: 600;
}

/* ---------- 19. Cierre ---------- */

.cierre {
  padding: clamp(64px, 9vw, 118px) 0;
  background: linear-gradient(135deg, #1D46C0 0%, var(--azul) 46%, #6B39DE 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cierre::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 78% 10%, rgba(255, 255, 255, .18), transparent 62%);
  pointer-events: none;
}

.cierre__caja {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
}

.cierre .titulo {
  color: #fff;
}

.cierre__texto {
  display: grid;
  gap: var(--s5);
  justify-items: start;
}

.cierre .entrada {
  color: color-mix(in srgb, #fff 86%, transparent);
}

.cierre .pastilla {
  background: color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
}

.panel-estado {
  background: color-mix(in srgb, #fff 12%, transparent);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 26%, transparent);
  backdrop-filter: blur(8px);
  display: grid;
  gap: var(--s3);
}

.panel-estado__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 80%, transparent);
}

.panel-estado__renglon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent);
  font-size: 14.5px;
  color: #fff;
}

.panel-estado__renglon:last-child {
  border-bottom: 0;
}

.panel-estado .sello--hoy {
  background: color-mix(in srgb, #fff 92%, transparent);
  color: var(--verde-hondo);
}

.panel-estado .sello--pronto {
  background: color-mix(in srgb, #fff 20%, transparent);
  color: #fff;
}

/* Formulario */
.forma {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 470px;
}

.forma__fila {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.campo {
  flex: 1 1 210px;
  min-width: 0;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 15px 22px;
  font-family: var(--texto);
  font-size: 15.5px;
  color: var(--tinta);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}

.campo::placeholder {
  color: var(--tinta-3);
}

.campo:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--azul);
}

.cierre .campo {
  box-shadow: none;
}

.cierre .campo:focus {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9);
}

.campo[aria-invalid='true'] {
  box-shadow: inset 0 0 0 2px var(--rojo);
}

.forma__aviso {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-3);
  margin: 0;
  min-height: 1.5em;
}

.cierre .forma__aviso {
  color: color-mix(in srgb, #fff 82%, transparent);
}

.forma__aviso[data-estado='error'] {
  color: var(--rojo);
  font-weight: 600;
}

.cierre .forma__aviso[data-estado='error'] {
  color: #FFD5DE;
}

.forma__aviso[data-estado='ok'] {
  color: var(--verde-hondo);
  font-weight: 600;
}

.cierre .forma__aviso[data-estado='ok'] {
  color: #C8FFE2;
}

/* ---------- 20. Pie ---------- */

.pie {
  padding: clamp(44px, 5vw, 72px) 0 var(--s6);
}

.pie__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto auto;
  gap: clamp(30px, 5vw, 84px);
  align-items: start;
}

.pie__marca {
  display: grid;
  gap: var(--s3);
  justify-items: start;
  max-width: 34ch;
}

.pie__lema {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-2);
}

.pie__col {
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.pie__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 82%;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* El estado de los cuatro canales: el pie estaba medio vacío y esto es
   lo que más se repite en la página, así que cierra recordándolo. */
.pie__estado {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.pie__estado li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font-size: 14.5px;
  color: var(--tinta-2);
  white-space: nowrap;
}

/* En una sola fila con flex-wrap, los seis enlaces se partían 5+1 y
   «Probarlo» se quedaba huérfano abajo. En rejilla de dos columnas
   salen tres y tres, siempre parejos. */
.pie__enlaces {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px clamp(24px, 3vw, 44px);
}

.pie__enlaces a {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 88%;
  font-size: 15px;
  color: var(--tinta-2);
  text-decoration: none;
}

.pie__enlaces a:hover {
  color: var(--azul);
}

.pie__legal {
  border-top: 1px solid var(--borde);
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  justify-content: space-between;
  align-items: baseline;
}

.pie__legal .nota:first-child {
  max-width: 62ch;
}

.pie__legal .nota:last-child {
  white-space: nowrap;
}

/* ---------- 21. Revelado al entrar en pantalla ----------
   El scroll no secuestra nada: la página se lee normal y cada
   pieza sube 18 px al asomarse. El escalonado lo pone el JS. */

.revela {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .68s var(--ease) var(--retraso, 0ms),
    transform .68s var(--ease) var(--retraso, 0ms);
  will-change: opacity, transform;
}

.revela.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- 22. Adaptación ---------- */

@media (max-width: 1000px) {
  .portada__caja {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 56px);
  }

  .portada__texto {
    justify-items: center;
    text-align: center;
  }

  .portada .entrada {
    margin-inline: auto;
  }

  .confianza {
    justify-items: center;
  }

  .confianza__punto {
    text-align: left;
  }

  /* El pie sale de aquí: tiene su propio salto en §35.1, a dos columnas
     antes de apilarse del todo. Dejarlo en esta lista lo pisaba. */
  .funcion,
  .problema,
  .cierre__caja {
    grid-template-columns: 1fr;
  }

  .funcion:nth-child(even) .funcion__texto {
    order: 0;
  }

  .cierre__texto {
    justify-items: start;
  }
}

@media (max-width: 1080px) {
  .menu {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-3);
    padding: var(--s3) var(--canal) var(--s5);
    margin-left: 0;
    display: none;
  }

  .menu[data-abierto='true'] {
    display: flex;
  }

  .menu a {
    padding: 15px 12px;
    font-size: 17px;
    border-radius: 10px;
  }

  .hamburguesa {
    display: flex;
  }
}

/* El botón de la cabecera no pierde su texto tan pronto: entre 900 y
   1080 px sobra sitio de sobra, sólo hacía falta plegar el menú. */
@media (max-width: 900px) {
  .cabecera__cta .boton span {
    display: none;
  }

  .cabecera__cta .boton {
    padding: 11px 13px;
  }
}

@media (max-width: 620px) {
  .plancha {
    grid-template-columns: 1fr;
  }

  /* La captura de una historia es vertical. Metida en una caja
     apaisada, `object-fit: cover` le corta la mitad y deja de
     leerse como lo que es. Se queda vertical y se centra. */
  .plancha__col {
    max-width: 220px;
    margin-inline: auto;
  }

  .pie__legal {
    flex-direction: column;
  }

  .boton {
    width: 100%;
  }

  .portada__texto .fila,
  .cierre__texto .fila {
    width: 100%;
  }

  .cabecera__cta .boton {
    width: auto;
  }
}

/* ---------- 23. Movimiento reducido ----------
   Nada se mueve, todo se ve. El revelado se apaga entero. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .revela {
    opacity: 1;
    transform: none;
  }

  .chat__escribiendo {
    display: none;
  }
}

/* ---------- 24. Las anclas no quedan debajo de la cabecera ---------- */

[id] {
  scroll-margin-top: calc(var(--alto-cabecera) + 20px);
}

/* ---------- 25. Rejillas sin filas cojas ----------
   Cuatro canales en tres columnas dejan una tarjeta sola; tres
   pasos en dos, igual. Aquí se declaran los saltos a mano para
   que cada fila salga siempre completa. */

@media (min-width: 1080px) {
  .canales {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .pasos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .canales {
    grid-template-columns: 1fr;
  }
}

/* ---------- 26. La tabla cabe en el teléfono ----------
   El sello AGOTADO es el argumento de la sección: no puede
   quedarse fuera, escondido tras un desplazamiento lateral.
   Se va la columna de color, que se deduce del SKU. */

@media (max-width: 620px) {
  .tabla {
    min-width: 0;
    font-size: 13px;
  }

  .tabla th:nth-child(2),
  .tabla td:nth-child(2) {
    display: none;
  }

  .tabla th,
  .tabla td {
    padding: 9px 5px;
  }

  .tabla .sku {
    font-size: 11px;
  }

  .tabla .sello {
    font-size: 10px;
    padding: 4px 7px;
    letter-spacing: .04em;
  }
}

/* ---------- 27. El careo: el mismo mensaje, dos respuestas ----------
   El lado apagado no es una caricatura de nadie: es la plantilla que
   casi todo el mundo tiene puesta. Se dibuja en gris para que el ojo
   sepa cuál de los dos es el bueno antes de leer una palabra. */

.careo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  align-items: stretch;
}

.careo__lado {
  border-radius: var(--r);
  padding: clamp(22px, 2.8vw, 32px);
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.careo__lado--apagado {
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}

.careo__lado--vivo {
  background: var(--papel);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--verde) 50%, transparent), var(--sombra-3);
}

.careo__alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.careo__quien {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 88%;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -.02em;
  color: var(--tinta);
  line-height: 1.1;
}

.careo__mensaje {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border-top-left-radius: 4px;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.5;
  min-height: 7.5em;
}

.careo__lado--apagado .careo__mensaje {
  background: #fff;
  color: var(--tinta-3);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.careo__lado--vivo .careo__mensaje {
  background: var(--verde-globo);
  color: var(--tinta);
}

.marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.marcas li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tinta-2);
}

.marcas svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--verde-hondo);
}

.marcas__no {
  color: var(--tinta-3);
}

.marcas__no svg {
  color: var(--rojo);
}

.careo__pie {
  margin: var(--s5) auto 0;
  text-align: center;
  max-width: 74ch;
}

@media (max-width: 820px) {
  .careo {
    grid-template-columns: 1fr;
  }

  .careo__mensaje {
    min-height: 0;
  }
}

/* ---------- 28. Barra de acción fija en el teléfono ----------
   Aparece cuando la portada ya se fue y se retira sola al llegar
   al cierre, para no repetir el mismo botón dos veces en pantalla. */

.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: none;
  padding: 10px var(--canal) calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  border-top: 1px solid var(--borde);
  transform: translateY(115%);
  transition: transform .32s var(--ease);
}

.barra-movil[data-visible='true'] {
  transform: none;
}

.barra-movil .boton {
  width: 100%;
}

@media (max-width: 900px) {
  .barra-movil {
    display: block;
  }

  /* El pie no se queda debajo de la barra. */
  body {
    padding-bottom: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .barra-movil {
    transition: none;
  }
}

/* ============================================================
   29. ANIMACIONES DIRIGIDAS POR EL SCROLL
   Donde el navegador las soporta, estas corren en el hilo del
   compositor: no pasan por JavaScript ni por el hilo principal,
   así que no se entrecortan aunque la página esté ocupada.
   Donde no, el JavaScript sigue haciendo su trabajo igual.
   ============================================================ */

@supports (animation-timeline: scroll()) {

  /* La barra de progreso deja de depender del evento de scroll. */
  .progreso {
    animation: barrer-progreso linear;
    animation-timeline: scroll(root block);
  }

  @keyframes barrer-progreso {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }

  /* La conversación de la portada se separa un poco del texto al
     bajar. Es un desplazamiento de 26 px en todo el recorrido: se
     nota como profundidad, no como efecto. */
  .portada__demo {
    animation: deriva-demo linear;
    animation-timeline: view(block);
    animation-range: entry 0% exit 100%;
  }

  @keyframes deriva-demo {
    from {
      transform: translateY(22px);
    }

    to {
      transform: translateY(-22px);
    }
  }
}

/* ---------- 29.1 El revelado gana profundidad ---------- */

.revela {
  transform: translateY(20px) scale(.988);
  transform-origin: 50% 20%;
}

.revela.visible {
  transform: none;
}

/* ---------- 29.2 Las preguntas se abren y se cierran ----------
   `interpolate-size` deja animar de 0 a `auto`, que es lo que hacía
   falta para que un acordeón no dé un salto seco. Es progresivo:
   donde no está, el <details> abre como siempre. */

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .pregunta::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size .38s var(--ease),
      opacity .3s var(--ease),
      content-visibility .38s allow-discrete;
  }

  .pregunta[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* ---------- 29.3 Micro-interacciones ----------
   La flecha de un botón que empuja al pasar el ratón es de las pocas
   animaciones que además informan: dice «esto te lleva a otro sitio». */

.boton svg:last-child {
  transition: transform .22s var(--ease);
}

.boton:hover svg:last-child {
  transform: translateX(3px);
}

.canal,
.lamina,
.careo__lado--vivo {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.canal:hover {
  transform: translateY(-3px);
}

.marca__glifo {
  transition: transform .35s var(--ease);
}

.marca:hover .marca__glifo {
  transform: rotate(-6deg) scale(1.06);
}

/* El sello de «hoy» respira muy despacio: dice que hay algo vivo. */
@keyframes latir-punto {

  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent);
  }

  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--verde) 6%, transparent);
  }
}

.pastilla__punto {
  animation: latir-punto 2.6s ease-in-out infinite;
}

/* ---------- 29.4 El video de fondo de la portada ----------
   Se activa solo si el archivo existe y carga: el JS le pone la clase
   al elemento padre. Sin archivo, la portada se ve exactamente igual
   que ahora. El velo mantiene el texto legible encima. */





@media (prefers-reduced-motion: reduce) {

  .progreso,
  .portada__demo,
  .pastilla__punto {
    animation: none;
  }

  .pregunta::details-content {
    transition: none;
  }

  .boton svg:last-child,
  .canal,
  .marca__glifo {
    transition: none;
  }
}

/* ============================================================
   30. LA DEMO INTERACTIVA
   El visitante se pone del lado del cliente: sus mensajes van a
   la derecha en verde y los de NOTIMIGA a la izquierda, que es
   justo al revés que en la portada — allí el teléfono es el de
   la tienda. La cabecera de cada chat dice de quién es.
   ============================================================ */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: stretch;
}

.demo .chat {
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Aquí la conversación crece hacia abajo y rueda: no se sabe de
   antemano cuántas preguntas va a hacer el visitante. */
.demo__lienzo {
  justify-content: flex-start;
  height: clamp(300px, 42vh, 380px);
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.demo__lienzo .chat__dia {
  margin-bottom: 4px;
}

/* NOTIMIGA es ahora la otra parte: escribe desde la izquierda. */
.demo__lienzo .chat__escribiendo {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 12px;
}

.demo__lienzo .chat__escribiendo i {
  background: color-mix(in srgb, var(--tinta-3) 85%, transparent);
}

.demo__opciones {
  border-top: 1px solid var(--borde);
  background: var(--papel-3);
  padding: 14px;
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.demo__rotulo {
  color: var(--tinta-3);
  font-size: 11.5px;
}

.demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo__chip {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 13.5px;
  line-height: 1.25;
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-1);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease);
}

.demo__chip:hover:not(:disabled) {
  transform: translateY(-2px);
  color: var(--azul-hondo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azul) 45%, transparent), var(--sombra-2);
}

.demo__chip:disabled {
  cursor: default;
  opacity: .42;
  box-shadow: inset 0 0 0 1px var(--borde);
}

.demo__reiniciar {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  justify-self: start;
  padding: 4px 0;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 88%;
  font-size: 13px;
  color: var(--tinta-3);
  text-decoration: underline;
  text-underline-offset: .25em;
  transition: color .16s var(--ease);
}

.demo__reiniciar:hover {
  color: var(--azul);
}

/* ---------- 30.1 El panel del razonamiento ----------
   Es la mitad que nadie enseña: no sólo qué contesta, sino qué
   miró antes de contestar. Ahí está el argumento del producto. */

.razonamiento {
  background: var(--papel);
  border-radius: var(--r-grande);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.razonamiento__alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 12px 18px;
  border-bottom: 1px solid var(--borde);
  background: var(--papel-2);
}

.pasos-demo {
  list-style: none;
  margin: 0;
  padding: clamp(16px, 2.2vw, 22px);
  display: grid;
  gap: 12px;
  align-content: start;
  counter-reset: paso-demo;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pasos-demo__vacio {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-3);
  max-width: 34ch;
}

.pasos-demo li:not(.pasos-demo__vacio) {
  counter-increment: paso-demo;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  animation: entra-paso .42s var(--ease) both;
}

/* Todo el texto del paso, en un único elemento de rejilla. Suelto,
   cada <b> se iba a una fila propia y a la columna del número. */
.pasos-demo__txt {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tinta-2);
  min-width: 0;
  padding-top: 3px;
}

.pasos-demo li:not(.pasos-demo__vacio)::before {
  content: counter(paso-demo);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--azul-suave);
  color: var(--azul-hondo);
  font-family: var(--num);
  font-size: 11.5px;
  font-weight: 700;
}

.pasos-demo li b {
  color: var(--tinta);
  font-weight: 600;
}

.pasos-demo li .no {
  color: var(--rojo);
  font-weight: 600;
}

.pasos-demo li .si {
  color: var(--verde-hondo);
  font-weight: 600;
}

@keyframes entra-paso {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.razonamiento__cierre {
  margin: 0;
  padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2.2vw, 22px);
  border-top: 1px solid var(--borde);
  background: var(--papel-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-3);
}

.razonamiento__cierre b {
  color: var(--tinta-2);
  font-weight: 600;
}

.demo__pie {
  margin: var(--s5) auto 0;
  text-align: center;
  max-width: 78ch;
}

@media (max-width: 900px) {
  .demo {
    grid-template-columns: 1fr;
  }

  .razonamiento {
    min-height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .demo__chip,
  .demo__reiniciar,
  .pasos-demo li:not(.pasos-demo__vacio) {
    transition: none;
    animation: none;
  }

  .demo__lienzo {
    scroll-behavior: auto;
  }
}

/* ============================================================
   31. TRANSICIONES DE SCROLL
   Todo esto va dentro de un @supports y con timeline de scroll:
   lo lleva el compositor, no el hilo principal, así que no se
   entrecorta aunque la página esté ocupada. Donde no hay soporte,
   la página se ve exactamente igual, sólo que quieta.
   ============================================================ */

@supports (animation-timeline: view()) {

  /* --- 31.1 El fondo respira con el scroll ---
     El video ya va atado al scroll por su línea de tiempo; esto le
     añade profundidad: se desplaza y se abre un poco menos de lo que
     se mueve la página, que es lo que el ojo lee como «está detrás». */
  .video-fondo {
    animation: deriva-fondo linear;
    animation-timeline: scroll(root block);
  }

  @keyframes deriva-fondo {
    from {
      transform: scale(1.24) translate3d(0, -2.2%, 0);
    }

    to {
      transform: scale(1.14) translate3d(0, 2.2%, 0);
    }
  }

}

/* --- 31.4 El revelado, con más recorrido y mejor curva --- */

.revela {
  transform: translateY(26px) scale(.985);
  transition:
    opacity .8s var(--ease) var(--retraso, 0ms),
    transform .8s var(--ease) var(--retraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {

  .video-fondo {
    animation: none;
  }
}

/* ---------- 31.5 En el teléfono, el fondo se queda quieto ----------
   Un video de 1280x720 desenfocado a 34 px y recompuesto en cada
   cuadro es caro. En un teléfono de gama media se nota, y ahí el
   fondo aporta muy poco: ocupa la pantalla entera detrás del texto.
   Se cambia por el mismo degradado, que no cuesta nada. */

@media (max-width: 860px) {
  .video-fondo {
    display: none;
  }

  .video-fondo__velo {
    background:
      radial-gradient(120% 60% at 78% 0%, color-mix(in srgb, var(--azul) 9%, transparent), transparent 62%),
      radial-gradient(100% 50% at 0% 30%, color-mix(in srgb, var(--violeta) 7%, transparent), transparent 60%),
      var(--papel);
  }
}

/* ---------- 31.6 Los pies que flotan sobre el fondo ----------
   --tinta-3 se queda en 3,5 de contraste sobre el velo: vale dentro de
   una tarjeta blanca, no encima del video. Estos dos son los únicos
   textos de ese tono que no tienen tarjeta debajo. */

.demo__pie,
.careo__pie {
  color: var(--tinta-2);
}

/* ============================================================
   32. LA ARQUITECTURA DE VIDRIO
   El problema no era de números, era de planos. En un tema claro
   con mucho texto no se puede tener el video visible Y texto
   legible encima del mismo plano: o tapas el video con un velo
   —y entonces no se ve— o lo dejas pasar y el texto no se lee.

   Así que se separan. El contenido de cada sección vive dentro de
   una lápida de vidrio esmerilado: el texto siempre tiene un 86 %
   de blanco debajo, y el video se ve a plena fuerza en los huecos
   entre lápidas y en los márgenes. Ahí es donde se aprecia.
   ============================================================ */

.seccion>.contenedor {
  max-width: 1200px;
  padding: clamp(38px, 5vw, 76px) clamp(24px, 4vw, 62px);
  border-radius: clamp(22px, 2.6vw, 36px);

  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);

  /* Tres capas de borde: la línea clara de arriba imita el canto de
     un cristal, la sombra ancha lo separa del fondo. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    0 1px 2px rgba(16, 24, 40, .04),
    0 34px 80px -44px rgba(16, 24, 40, .42);
}

/* Sin backdrop-filter no hay vidrio: se sube la opacidad para que el
   texto no quede nunca sobre el video crudo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .seccion>.contenedor {
    background: color-mix(in srgb, var(--papel) 96%, transparent);
  }
}

/* La franja de canales: la misma lápida, en forma de píldora. */
.franja {
  background: none;
  backdrop-filter: none;
  border: 0;
  padding: clamp(10px, 1.4vw, 18px) 0;
}

.franja>.contenedor {
  max-width: 1200px;
  padding: clamp(18px, 2vw, 26px) clamp(24px, 4vw, 52px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    0 22px 54px -34px rgba(16, 24, 40, .38);
}

/* ---------- 32.1 La portada se queda abierta ----------
   Es el único sitio donde el video merece la pantalla entera: no
   lleva lápida. El texto se sostiene con un velo propio, más denso
   a la izquierda —donde está— y transparente a la derecha, donde
   sólo hay una tarjeta de chat que ya es opaca. */

/* Este clip es oscuro: azules, violetas y la cinta blanca. Aclarado al
   80 % daba un gris lavanda muerto, y a plena fuerza sobre blanco no
   dejaba leer. No hay densidad de velo que arregle eso — lo que quiere
   es fondo oscuro. Así que la portada es oscura y el video se ve
   entero, y el cuerpo de la página sigue claro. */
.portada::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(98deg,
      rgba(6, 11, 28, .92) 0%,
      rgba(6, 11, 28, .86) 34%,
      rgba(6, 11, 28, .62) 54%,
      rgba(6, 11, 28, .30) 74%,
      rgba(6, 11, 28, .16) 100%),
    linear-gradient(to bottom, rgba(6, 11, 28, .42) 0%, transparent 26%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, .35) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, .35) 100%);
}

/* Aquí había un fundido a blanco puro, y era el borde que cantaba: el
   cuerpo de la página NO es blanco —es el video con un velo mínimo—, así
   que la secuencia era oscuro → banda blanca → oscuro otra vez. Ya no
   hace falta ningún fundido: el oscurecedor se destensa por abajo con
   una máscara y la portada entra en el mismo fondo que el resto. */

/* ---------- 32.2 El cierre también se despega del borde ---------- */

.cierre {
  padding: clamp(26px, 3.4vw, 48px) 0 clamp(40px, 5vw, 72px);
  background: none;
}

.cierre::before {
  display: none;
}

.cierre>.contenedor {
  max-width: 1200px;
  padding: clamp(38px, 5vw, 76px) clamp(24px, 4vw, 62px);
  border-radius: clamp(22px, 2.6vw, 36px);
  background: linear-gradient(135deg, #1D46C0 0%, var(--azul) 46%, #6B39DE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 34px 80px -40px color-mix(in srgb, var(--azul) 62%, transparent);
  overflow: hidden;
}

/* ---------- 32.3 El pie cierra la página ---------- */

/* El pie era la única pieza a sangre en una página de paneles
   flotantes: el canto de arriba cortaba en seco contra el lienzo
   oscuro. Con las esquinas de arriba redondeadas cierra la página
   como una hoja que sube, y habla el mismo idioma que las lápidas. */
.pie {
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .6);
  margin-top: clamp(26px, 3.4vw, 48px);
  border-radius: clamp(22px, 2.6vw, 36px) clamp(22px, 2.6vw, 36px) 0 0;
}

/* ---------- 32.4 La cabecera, del mismo material ---------- */

.cabecera {
  background: color-mix(in srgb, var(--papel) 76%, transparent);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
}

.cabecera--fija {
  background: color-mix(in srgb, var(--papel) 88%, transparent);
}

/* ---------- 32.5 En pantalla angosta la lápida se pega a los bordes ----
   A 390 px, 36 px de radio y 24 px de margen se comen el ancho útil.
   Se queda el vidrio, se va el redondeo lateral. */

@media (max-width: 720px) {

  /* Un margen lateral pequeño: sin él la lápida va de canto a canto y
     el redondeo no se ve, así que deja de leerse como una pieza. */
  .seccion>.contenedor,
  .cierre>.contenedor,
  .franja>.contenedor {
    width: auto;
    margin-inline: clamp(10px, 3.2vw, 18px);
  }

  .seccion>.contenedor,
  .cierre>.contenedor {
    border-radius: 20px;
    padding-inline: clamp(18px, 5vw, 26px);
  }

  .franja>.contenedor {
    border-radius: 22px;
  }
}

/* ============================================================
   33. LAS TRANSICIONES DE LA LÁPIDA
   La lápida no se desvanece: se asienta. Entra un poco encogida,
   con la sombra corta, y al llegar se abre y le cruza un destello
   por el canto —como un cristal que pasa por delante de una luz.
   El texto de dentro lo maneja .revela aparte, así que no hay dos
   opacidades peleándose: aquí sólo escala, sombra y brillo.
   ============================================================ */

.seccion>.contenedor,
.franja>.contenedor,
.cierre>.contenedor {
  position: relative;
  overflow: hidden;
  transform: scale(.978) translateZ(0);
  transition:
    transform 1.05s var(--ease),
    box-shadow 1.05s var(--ease);
}

/* La especificidad importa: `.seccion > .contenedor` son dos clases y
   `.lapida--entra` una sola, así que la regla base ganaba y la lápida
   se quedaba encogida al 97,8 % para siempre. Hay que igualarla. */
.seccion>.contenedor.lapida--entra,
.franja>.contenedor.lapida--entra,
.cierre>.contenedor.lapida--entra {
  transform: scale(1) translateZ(0);
}

/* El destello: una banda diagonal muy tenue que cruza una sola vez. */
.seccion>.contenedor::after,
.cierre>.contenedor::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(104deg,
      transparent 38%,
      rgba(255, 255, 255, .38) 48%,
      rgba(255, 255, 255, .62) 51%,
      rgba(255, 255, 255, .38) 54%,
      transparent 64%);
  transform: translateX(-58%);
}

.lapida--entra::after {
  animation: destello 1.5s var(--ease) .18s both;
}

@keyframes destello {
  0% {
    opacity: 0;
    transform: translateX(-58%);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(58%);
  }
}

/* En el cierre, que es azul, el destello va más contenido. */
.cierre>.contenedor::after {
  background: linear-gradient(104deg,
      transparent 40%,
      rgba(255, 255, 255, .16) 50%,
      transparent 62%);
}

/* ---------- 33.1 Las tarjetas entran con una pizca de perspectiva ----
   Seis grados de inclinación que se enderezan. Es lo que separa un
   «aparece» de un «llega». La perspectiva va en el contenedor para
   que las tarjetas de una misma fila compartan punto de fuga. */

.rejilla,
.tarjetas,
.canales,
.pasos,
.careo,
.funciones {
  perspective: 1400px;
  perspective-origin: 50% 0%;
}

.tarjeta.revela,
.canal.revela,
.paso.revela,
.careo__lado.revela,
.lamina.revela,
.pregunta.revela {
  transform: translateY(30px) rotateX(6deg) scale(.985);
  transform-origin: 50% 0%;
}

.tarjeta.revela.visible,
.canal.revela.visible,
.paso.revela.visible,
.careo__lado.revela.visible,
.lamina.revela.visible,
.pregunta.revela.visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .seccion>.contenedor,
  .franja>.contenedor,
  .cierre>.contenedor {
    transform: none;
    transition: none;
  }

  .lapida--entra::after {
    animation: none;
  }

  .tarjeta.revela,
  .canal.revela,
  .paso.revela,
  .careo__lado.revela,
  .lamina.revela,
  .pregunta.revela {
    transform: none;
  }
}

/* El rótulo de la franja es el único texto en --tinta-3 que se apoya
   directamente en el vidrio (4,2 de contraste). Sube un tono. */
.franja__titulo {
  color: var(--tinta-2);
}

/* ============================================================
   34. LA PORTADA OSCURA
   Sobre el oscurecedor el texto va en claro. Todo va acotado a
   .portada: el resto de la página sigue siendo un tema claro.
   ============================================================ */

.portada .titular {
  color: #fff;
}

/* Sobre oscuro el azul de marca queda apagado: el degradado sube a
   cian y violeta, que es donde ese listón se lee de verdad. */
.portada .titular em {
  background: linear-gradient(104deg, #5AC8FA 0%, #7B8DFF 46%, #C084FC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portada .entrada {
  color: rgba(255, 255, 255, .80);
}

.portada .entrada strong {
  color: #fff;
}

.portada .pastilla {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.portada .confianza__punto {
  color: rgba(255, 255, 255, .78);
}

.portada .confianza__punto svg {
  color: #4ADE80;
}

/* El botón secundario deja de ser una tarjeta blanca y pasa a vidrio. */
.portada .boton--secundario {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

.portada .boton--secundario:hover {
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .48);
}

/* El primario gana un halo, que sobre oscuro es lo que lo despega. */
.portada .boton--principal {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .3),
    0 14px 40px -12px color-mix(in srgb, var(--azul) 90%, transparent);
}

/* ---------- 34.1 La cabecera se adapta a lo que tiene detrás ----------
   Mientras la portada está detrás va transparente y en claro; en cuanto
   pasa, se vuelve el vidrio claro de siempre. El JS conmuta la clase
   cuando el borde inferior de la portada cruza la cabecera. */

.cabecera {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

.cabecera .marca__texto {
  color: #fff;
}

.cabecera .menu a {
  color: rgba(255, 255, 255, .82);
}

.cabecera .menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.cabecera .menu a[aria-current='true'] {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.cabecera .hamburguesa {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.cabecera--fija {
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border-bottom-color: var(--borde);
  box-shadow: 0 4px 20px -12px rgba(16, 24, 40, .28);
}

.cabecera--fija .marca__texto {
  color: var(--tinta);
}

.cabecera--fija .menu a {
  color: var(--tinta-2);
}

.cabecera--fija .menu a:hover {
  color: var(--tinta);
  background: var(--papel-3);
}

.cabecera--fija .menu a[aria-current='true'] {
  color: var(--azul);
  background: var(--azul-suave);
}

.cabecera--fija .hamburguesa {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}

/* El cajón del menú en móvil siempre es claro: es una superficie propia. */
.menu[data-abierto='true'] a {
  color: var(--tinta-2);
}

.menu[data-abierto='true'] a[aria-current='true'] {
  color: var(--azul);
  background: var(--azul-suave);
}

/* ---------- 34.2 En móvil no hay video, así que no hay portada oscura ----
   El fondo pasa a ser el degradado claro; el texto oscuro de siempre. */

@media (max-width: 860px) {

  /* Sin video la portada se quedaba en blanco plano. Vuelven los halos
     de marca, que es lo que le daba color antes de que hubiera video. */
  .portada::before {
    background:
      radial-gradient(closest-side, color-mix(in srgb, var(--azul) 13%, transparent), transparent) no-repeat -10% -30% / 70% 120%,
      radial-gradient(closest-side, color-mix(in srgb, var(--violeta) 9%, transparent), transparent) no-repeat 110% 130% / 55% 110%;
  }

  .portada::after {
    display: none;
  }

  .portada .titular {
    color: var(--tinta);
  }

  .portada .titular em {
    background: var(--liston);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .portada .entrada {
    color: var(--tinta-2);
  }

  .portada .entrada strong {
    color: var(--tinta);
  }

  .portada .pastilla {
    background: var(--azul-suave);
    color: var(--azul-hondo);
    box-shadow: none;
  }

  .portada .confianza__punto {
    color: var(--tinta-2);
  }

  .portada .confianza__punto svg {
    color: var(--verde-hondo);
  }

  .portada .boton--secundario {
    background: var(--papel);
    color: var(--tinta);
    box-shadow: inset 0 0 0 1px var(--borde-fuerte), var(--sombra-1);
  }

  .cabecera {
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
  }

  .cabecera .marca__texto {
    color: var(--tinta);
  }

  .cabecera .hamburguesa {
    background: var(--papel);
    color: var(--tinta);
    box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  }
}

/* ============================================================
   35. EL LIENZO OSCURO
   La página es, en realidad, un fondo oscuro con paneles claros
   flotando encima. Asumirlo quita el único borde que cantaba —el
   fundido de la portada a un blanco que abajo no existía— y hace
   que el video se vea en todos los huecos, no sólo en la portada.

   Todo esto es de 861 px hacia arriba. Por debajo no hay video:
   el fondo sigue siendo claro y la portada también.
   ============================================================ */

@media (min-width: 861px) {

  /* Base oscura detrás del video, para que no haya un destello blanco
     mientras el clip carga. */
  html {
    background: #090E22;
  }

  /* Sobre el lienzo oscuro, el canto de arriba del pie va en claro:
     el borde gris de la versión clara desaparecería. La opacidad la
     define la regla base, para no tener dos fuentes de verdad. */
  .pie {
    border-top: 1px solid rgba(255, 255, 255, .5);
  }
}

/* Por debajo de 861 px el velo vuelve a ser el fondo claro con los
   halos de marca: sin video, un velo oscuro dejaría la página negra. */
@media (max-width: 860px) {
  html {
    background: var(--papel);
  }
}

/* ---------- 35.1 El pie en pantalla estrecha ----------
   Tres columnas no caben por debajo de 1000 px. La marca pasa a ocupar
   el ancho y las dos listas se reparten debajo; a 620 px, todo apilado. */

@media (max-width: 1000px) {
  .pie__caja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 5vw, 44px);
  }

  .pie__marca {
    grid-column: 1 / -1;
    max-width: 46ch;
  }
}

@media (max-width: 620px) {
  .pie__caja {
    grid-template-columns: 1fr;
  }

  .pie__estado li {
    white-space: normal;
  }
}

/* Dentro del pie no se usa --tinta-3: sobre el panel al 94 % encima del
   lienzo oscuro se queda en 4,44 de contraste, por debajo del mínimo. */
.pie .nota {
  color: var(--tinta-2);
}

/* ============================================================
   36. MODAL DE SOLICITUD DE DEMO (ENTERPRISE SPLIT: FORM IZQUIERDA / MEDIA DERECHA)
   - Layout 2 columnas: Formulario a la izquierda + panel media a la derecha
   - Stepper interconectado con micro-indicadores y línea de progreso
   - Campos con iconos vectoriales corporativos de alta definición
   - Tarjetas seleccionables de perfil comercial (Empresa vs Emprendimiento)
   - CERO scroll y adaptación responsiva fluida
   ============================================================ */

.modal-lead {
  border: 0;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 820px;
  width: calc(100% - 32px);
  z-index: 200;
  overflow: visible;
}

.modal-lead::backdrop {
  background: rgba(3, 7, 18, 0.84);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  animation: modal-fade-in .2s var(--ease) both;
}

.modal-lead[open] {
  animation: modal-zoom-in .22s var(--ease) both;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-lead__caja {
  position: relative;
  background:
    radial-gradient(circle at 25% 10%, rgba(46, 99, 247, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #0d172e 0%, #080e1e 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 20px rgba(46, 99, 247, 0.08);
  overflow: hidden;
}

.modal-lead__caja--split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 480px;
}

/* Botón cerrar universal (Esquina Superior Derecha) */
.modal-lead__cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
  z-index: 50;
}

.modal-lead__cerrar:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
}

.modal-lead__cerrar:active {
  transform: scale(0.92);
}

/* Panel de Contenido del Formulario (Lado Izquierdo) */
.modal-lead__cuerpo {
  flex: 1 1 auto;
  padding: 24px 28px 20px;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Encabezado Corporativo */
.modal-lead__cabeza {
  margin-bottom: 14px;
}

.modal-lead__marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-lead__logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  box-shadow: 0 4px 14px rgba(46, 99, 247, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0d1527;
  padding: 2px;
}

.modal-lead__titulares {
  display: flex;
  flex-direction: column;
}

.modal-lead__badge-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.modal-lead__punto-vivo {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulso-vivo 2s infinite ease-in-out;
}

@keyframes pulso-vivo {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.modal-lead__badge-texto {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #38bdf8;
}

.modal-lead__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.01em;
}

/* Stepper Corporativo Interconectado */
.stepper-corp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.stepper-corp__paso {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  transition: all .2s ease;
}

.stepper-corp__num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 800;
  color: #94a3b8;
  display: grid;
  place-items: center;
  transition: all .2s ease;
}

.stepper-corp__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.stepper-corp__etiqueta {
  font-size: 9.5px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: .04em;
}

.stepper-corp__nombre {
  font-size: 11.5px;
  font-family: var(--display);
  font-weight: 700;
  color: #94a3b8;
  transition: color .2s ease;
}

.stepper-corp__paso--activo .stepper-corp__num {
  background: #2E63F7;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(46, 99, 247, 0.60);
}

.stepper-corp__paso--activo .stepper-corp__nombre {
  color: #38bdf8;
}

.stepper-corp__paso--completado .stepper-corp__num {
  background: #10b981;
  color: #ffffff;
}

.stepper-corp__paso--completado .stepper-corp__nombre {
  color: #cbd5e1;
}

.stepper-corp__linea {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.stepper-corp__progreso {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2E63F7, #38bdf8);
  border-radius: 999px;
  transition: width .25s ease;
}

/* Paneles de cada Paso */
.wizard-panel {
  display: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease;
}

.wizard-panel--activo {
  display: block;
  opacity: 1;
  transform: translateX(0);
  animation: modal-fade-in .2s var(--ease) both;
}

.modal-lead__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.campo-grupo {
  display: grid;
  gap: 3px;
}

.campo-grupo--completo {
  grid-column: 1 / -1;
}

.campo-etiqueta {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 11px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: .01em;
}

.campo-req {
  color: #f87171;
}

/* Campos con Iconos */
.campo-icono-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-icono {
  position: absolute;
  left: 11px;
  color: #64748b;
  pointer-events: none;
  transition: color .15s ease;
  flex: none;
}

.modal-lead .campo {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 13px;
  color: #ffffff;
  height: 38px;
  transition: all .15s ease;
}

.modal-lead .campo--con-icono {
  padding-left: 32px;
}

.modal-lead .campo::placeholder {
  color: #64748b;
  font-size: 12.5px;
}

.modal-lead .campo:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
  outline: none;
}

.campo-icono-wrap:focus-within .campo-icono {
  color: #38bdf8;
}

.modal-lead .campo[aria-invalid='true'] {
  border-color: #f87171;
  background: rgba(239, 68, 68, 0.12);
}

/* Tarjetas Corporativas de Selección de Tipo de Negocio */
.tarjetas-tipo-negocio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.tarjeta-tipo {
  position: relative;
  cursor: pointer;
  display: block;
}

.tarjeta-tipo input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tarjeta-tipo__cuerpo {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all .15s ease;
}

.tarjeta-tipo__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.tarjeta-tipo__icono {
  font-size: 17px;
}

.tarjeta-tipo__check {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: transparent;
  font-size: 9.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  transition: all .15s ease;
}

.tarjeta-tipo__titulo {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
}

.tarjeta-tipo__sub {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.25;
}

.tarjeta-tipo input:checked + .tarjeta-tipo__cuerpo {
  background: rgba(46, 99, 247, 0.14);
  border-color: #2E63F7;
  box-shadow: 0 0 14px rgba(46, 99, 247, 0.25);
}

.tarjeta-tipo input:checked + .tarjeta-tipo__cuerpo .tarjeta-tipo__titulo {
  color: #38bdf8;
}

.tarjeta-tipo input:checked + .tarjeta-tipo__cuerpo .tarjeta-tipo__check {
  background: #2E63F7;
  color: #ffffff;
}

#grupo-rif {
  transition: opacity .2s ease;
}

#grupo-rif.oculto {
  display: none;
}

.modal-lead__acciones {
  margin-top: 12px;
  display: grid;
  gap: 4px;
}

.wizard-fila-botones {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.boton--volver {
  height: 42px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #94a3b8;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.boton--volver:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.wizard-fila-botones .boton--demo {
  flex: 1;
}

.boton--ancho {
  width: 100%;
}

.boton--demo {
  height: 42px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #2E63F7 0%, #1d4ed8 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(46, 99, 247, 0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s ease;
}

.boton--demo:hover {
  background: linear-gradient(135deg, #3870ff 0%, #2554d8 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(46, 99, 247, 0.65);
}

.modal-lead__aviso {
  text-align: center;
  font-size: 11.5px;
  color: #94a3b8;
  margin: 0;
  min-height: 16px;
  line-height: 1.35;
}

.modal-lead__aviso[data-estado='error'] {
  color: #f87171;
  font-weight: 600;
}

.modal-lead__aviso[data-estado='ok'] {
  color: #34d399;
  font-weight: 600;
}

/* Panel Lateral para Imagen / Video (Lado Derecho) */
.modal-lead__lateral {
  flex: 0 0 310px;
  width: 310px;
  position: relative;
  background:
    radial-gradient(circle at 60% 40%, rgba(46, 99, 247, 0.22), transparent 70%),
    linear-gradient(180deg, #070d1a 0%, #040811 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.modal-lead__lateral-media {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  background: #060b17;
}

.modal-lead__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.modal-lead__video--activo {
  opacity: 1;
  pointer-events: none !important;
}

.modal-lead__video::-webkit-media-controls,
.modal-lead__video::-webkit-media-controls-enclosure,
.modal-lead__video::-webkit-media-controls-panel,
.modal-lead__video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none;
}

/* Escudo protector que intercepta el cursor para que el navegador no dibuje botones flotantes */
.modal-lead__video-escudo {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: auto;
  background: transparent;
}

@media (max-width: 780px) {
  .modal-lead {
    max-width: 490px;
  }

  .modal-lead__lateral {
    display: none;
  }

  .modal-lead__cuerpo {
    padding: 22px 18px 18px;
  }

  .modal-lead__rejilla {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .modal-lead__rejilla .campo-grupo {
    grid-column: 1 / -1;
  }

  .tarjetas-tipo-negocio {
    grid-template-columns: 1fr;
  }
}