/* ============================================================
   Contacto Activo · la portada «la mesa»
   ------------------------------------------------------------
   Qué es: la historia del producto contada sobre una mesa de papel,
   con piezas reales del sitio. Cuatro ejemplos (seguros, isapre, AFP,
   propiedades) que se eligen con pestañas y avanzan solos. Nació como
   la prueba 2 (video-hero/prueba-2/, aprobada por Felipe el 2026-09-26);
   esa carpeta queda como registro y ya no se toca.

   Capas:
   1. La mesa: la foto K2 que Felipe hizo en Gemini, sin las llaves
      (se borraron) y con el papel igualado a #F4F0E8 en los bordes.
      Es una foto, no un video: nítida, liviana (47 KB) y sin marca ✦.
   2. El escenario: tarjeta vieja, tarjeta nueva, teléfono y chat, en
      HTML. Todo lo que se lee es real; nada lo inventa la IA. Lo que se
      ve dentro del teléfono son capturas de las páginas de ejemplo
      (video-hero/capturar-paginas.py → assets/mesa/).

   El escenario se diseña en px fijos (760 × 720 ancho, 400 × 560
   alto) y se escala entero con --k (lo calcula js/mesa.js). Así la
   taza, la tarjeta y el teléfono mantienen su proporción en cualquier
   pantalla.

   Luz: viene de arriba a la derecha (la foto). Toda sombra cae hacia
   abajo a la izquierda. Los objetos del sitio NO llevan sombra en la
   página plana (principio del rediseño); acá sí, porque están sobre
   una foto con luz real y sin sombra parecerían pegados.
   ============================================================ */

/* ---------- La portada con la mesa ----------
   Teléfono: el texto arriba y la mesa abajo, de borde a borde.
   Escritorio: dos columnas y la mesa sigue hasta el borde derecho. */
[data-plumon] { position: relative; white-space: nowrap; }
/* Sin JavaScript el plumón no se dibuja: queda un tachón simple. */
.sin-js [data-plumon] { text-decoration: line-through; text-decoration-color: var(--acento); text-decoration-thickness: .08em; }
.hero-mesa { padding-top: 28px; overflow: hidden; }
.hero-mesa .hero__rejilla { display: grid; gap: 20px; }
.hero-mesa .mv { margin-inline: calc(var(--gutter) * -1); }
.hero-mesa .mv-pie { padding-inline: var(--gutter); }
@media (min-width: 700px) {
  .hero-mesa .hero__acciones .boton--primario { width: auto; }
}
@media (min-width: 980px) {
  .hero-mesa { padding-top: 0; }
  .hero-mesa .hero__rejilla {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 0 16px;
    min-height: clamp(720px, calc(100svh - 64px), 900px); align-items: stretch;
  }
  .hero-mesa .hero__texto { align-self: center; padding: 64px 0 96px; }
  .hero-mesa .hero__bajada { font-size: var(--t-20); }
  /* La mesa sigue hasta el borde derecho de la pantalla. */
  .hero-mesa .mv { margin: 0 calc((100vw - min(100vw, 1180px)) / -2 - var(--gutter)) 0 0; padding-bottom: 28px; }
  .hero-mesa .mv-pie { padding-inline: 0; margin-left: var(--x0); max-width: min(660px, calc(100% - var(--x0) - var(--gutter))); }
}

.mv {
  --k: 1;
  --tinta-sombra: 58 42 24;           /* sombra cálida, del papel */
  --plumon: var(--acento);
  --wa-sale: #D9FDD3; --wa-entra: #FFFFFF; --wa-fondo-chat: #EFEAE2;
  --wa-cab: #F6F5F3; --wa-azul: #3A9FD0; --wa-meta: #56656E;  /* un poco más oscuros que WhatsApp: pasan 4,5:1 */
  --ios-curva: cubic-bezier(.32, .72, 0, 1);
  --inercia: cubic-bezier(.16, .84, .3, 1);   /* scroll con impulso */
  --cae: cubic-bezier(.2, .9, .3, 1.02);      /* objeto que se posa */
  position: relative; margin: 0;
  display: flex; flex-direction: column;
}

/* ---------- La vista: recorta, no escala ---------- */
/* Deja salir la foto hacia los lados y arriba (ahí se funde sola) y corta
   solo abajo, para que nada pase por encima del pie. */
.mv__vista { position: relative; flex: 1 1 auto; clip-path: inset(0 -400px 0 -400px); }
.mv-escenario {
  position: absolute; left: var(--x0, 0px); top: var(--y0, 0px);
  width: 760px; height: 720px;
  transform: scale(var(--k)); transform-origin: 0 0;
}
.mv[data-formato="alto"] .mv-escenario { width: 400px; height: 560px; }
.mv-camara {
  position: absolute; inset: 0;
  transform-origin: var(--foco-x, 484px) var(--foco-y, 392px);
  transition: transform 1400ms cubic-bezier(.45, 0, .2, 1);
}
.mv.cerca .mv-camara { transform: scale(1.1); }
.mv[data-formato="alto"].cerca .mv-camara { transform: none; }
.mv[data-formato="alto"] .mv-luz { animation: none; }  /* en el teléfono no hay aire para acercarse */

/* La foto de la mesa: se ubica en coordenadas del escenario, así la
   taza queda arriba a la derecha y los lentes abajo, cortados por el
   borde como en una foto de producto. Sus bordes se funden al papel. */
.mv-mesa {
  position: absolute; left: -428px; top: -116px; width: 1300px; height: auto;
  max-width: none; pointer-events: none; user-select: none;
  /* Los cortes de la vista caen en medio de la foto: js/mesa.js calcula
     dónde (--ma…--mf) y ahí la foto se funde al papel, sin borde. */
  --ma: 0px; --mb: 120px; --mc: 0px; --md: 30px; --me: calc(100% - 90px); --mf: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent var(--ma), #000 var(--mb), #000 calc(100% - 110px), transparent),
                      linear-gradient(180deg, transparent var(--mc), #000 var(--md), #000 var(--me), transparent var(--mf));
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent var(--ma), #000 var(--mb), #000 calc(100% - 110px), transparent),
                      linear-gradient(180deg, transparent var(--mc), #000 var(--md), #000 var(--me), transparent var(--mf));
          mask-composite: intersect;
}
.mv[data-formato="alto"] .mv-mesa { left: -421px; top: 412px; width: 900px; }

/* Luz de ventana: una franja cálida que respira muy lento. Es lo único
   que se mueve cuando la historia está quieta. */
.mv-luz-caja {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
          mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.mv-luz {
  position: absolute; inset: -12%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgb(255 246 226 / .55) 50%, transparent 64%);
  mix-blend-mode: soft-light;
  animation: mv-luz 14s ease-in-out infinite alternate;
}
@keyframes mv-luz { from { transform: translate3d(-4%, -2%, 0); } to { transform: translate3d(4%, 2%, 0); } }

/* ---------- Objetos de papel: sombra propia ---------- */
.mv-obj { position: absolute; }
.mv-obj::before {                      /* sombra difusa, animable sin repintar */
  content: ""; position: absolute; inset: 4% 3% 0 3%;
  background: rgb(var(--tinta-sombra) / .28); filter: blur(9px);
  transform: translate(-7px, 9px); border-radius: 6px; z-index: -1;
  transition: transform 520ms var(--cae), opacity 520ms var(--cae);
}

/* ---------- 1 · La tarjeta vieja ---------- */
.mv-vieja {
  left: 38px; top: 478px; width: 280px; height: 171px;
  /* Mismas funciones, mismo orden, en todos los estados: así el navegador
     interpola cada una por separado y el recorrido es el que se ve. */
  transform: translate(0, -14px) rotate(-6deg) scale(1.05); opacity: 0;
  transition: transform 460ms var(--cae), opacity 200ms linear;
  filter: drop-shadow(-1px 1px .6px rgb(var(--tinta-sombra) / .22));
}
.mv-vieja::before { opacity: 0; transform: translate(-16px, 22px); }
.mv.t-vieja .mv-vieja { opacity: 1; transform: translate(0, 0) rotate(-6deg) scale(1); }
.mv.t-vieja .mv-vieja::before { opacity: 1; transform: translate(-7px, 9px); }
/* Se bota: un manotazo la desliza hacia el borde y cae de la mesa. Vista
   desde arriba, lo que cae se aleja de la cámara: se achica y su sombra se
   despega. Nunca sale del escenario, así no la corta ningún borde. */
.mv.t-bota .mv-vieja { animation: mv-bota 660ms forwards; }
.mv.t-bota .mv-vieja::before { animation: mv-bota-sombra 660ms forwards; }
@keyframes mv-bota {
  0%   { transform: translate(0, 0) rotate(-6deg) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  38%  { transform: translate(-92px, 28px) rotate(-18deg) scale(1.03); opacity: 1; animation-timing-function: cubic-bezier(.45, .1, .8, .45); }
  100% { transform: translate(-150px, 64px) rotate(-38deg) scale(.46); opacity: 0; }
}
@keyframes mv-bota-sombra {
  0%, 38% { transform: translate(-7px, 9px); opacity: 1; }
  100% { transform: translate(-40px, 52px); opacity: 0; }
}

/* El papel: cartulina brillante de plantilla, con una esquina doblada. */
.mv-vieja__papel {
  position: absolute; inset: 0; overflow: hidden;
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .75) 44%, rgb(255 255 255 / 0) 58%),
    #FBFCFD;
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #1D2B44;
  padding: 18px 20px 0 20px;
}
.mv-vieja__dobles {                    /* el revés de la esquina doblada */
  position: absolute; right: 0; bottom: 0; width: 24px; height: 24px;
  background: linear-gradient(315deg, transparent 50%, #E4E6E3 50%, #F4F4F1 78%);
  box-shadow: -1px -1px 2px rgb(var(--tinta-sombra) / .18);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.mv-vieja__fila { display: flex; gap: 12px; align-items: center; }
.mv-vieja__logo { width: 36px; height: 36px; flex: 0 0 auto; }
.mv-vieja__nom { display: block; font-weight: 700; font-size: 14px; letter-spacing: .07em; line-height: 1.15; }
.mv-vieja__cargo { display: block; font-size: 10.5px; color: #54607A; margin-top: 2px; }
.mv-vieja__datos { margin-top: 16px; font-size: 10.5px; line-height: 1.55; color: #33405A; }
.mv-vieja__datos b { font-weight: 700; color: #1D2B44; }
.mv-vieja__ola { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; }
.mv-vieja__mancha { position: absolute; right: -34px; top: -38px; width: 118px; height: 118px; opacity: .9; }

/* El plumón: trazo con forma de pincel (grosor que cambia, bordes
   irregulares, vetas de tinta). Se revela con una máscara que recorre
   su eje. Se multiplica sobre el papel: la letra impresa se ve debajo,
   como tinta de verdad. */
.plumon { position: absolute; overflow: visible; pointer-events: none; mix-blend-mode: multiply; }
.plumon path.tinta { fill: var(--plumon, var(--acento)); }

/* ---------- 2 · La tarjeta nueva (una por casa) ---------- */
.mv-nueva {
  left: 38px; top: 478px; width: 280px; height: 171px;
  transform: translate(10px, -16px) rotate(-6deg) scale(1.05); opacity: 0;
  transition: transform 520ms var(--cae), opacity 220ms linear;
  filter: drop-shadow(-1px 1px .6px rgb(var(--tinta-sombra) / .2));
}
.mv-nueva::before { opacity: 0; transform: translate(-18px, 24px); }
.mv.t-nueva .mv-nueva { opacity: 1; transform: translate(0, 0) rotate(-6deg) scale(1); }
.mv.t-nueva .mv-nueva::before { opacity: 1; transform: translate(-7px, 9px); }

.mvt {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 16px 16px 14px 18px; overflow: hidden;
}
.mvt__datos { display: flex; flex-direction: column; min-width: 0; }
.mvt__nom { margin-top: auto; }
.mvt__qr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.mvt__qr img { width: 84px; height: 84px; }
.mvt__qr span { font-size: 9px; }

/* La tarjeta del PRODUCTO (desde el 2026-10-02): la misma que imprime el
   generador (sistema/motor/tarjeta.py), en el color de cada compañía real y
   con su logo difuminado. Las casas de abajo (Meridional, Araucaria,
   Cordillera, Poniente) quedan para la prueba 2 del video, que es registro. */
.mvt--producto {
  background: #fff; color: #17191F; font-family: "Figtree", sans-serif;
  border: 1px solid #E3E1DC; border-radius: 3px; padding: 20px 14px 32px 16px; gap: 10px;
}
.mvt--producto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--mvt-color); }
.mvt--producto .mvt__logo { height: 19px; width: auto; max-width: 130px; object-fit: contain; object-position: left center; align-self: flex-start; }
.mvt--producto .mvt__nom { font-weight: 700; font-size: 13.5px; line-height: 1.12; letter-spacing: -.01em; }
.mvt--producto .mvt__cargo { margin-top: 4px; font-size: 6.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6B6F76; }
.mvt--producto .mvt__tel { margin-top: 6px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mvt--producto .mvt__qr img { width: 74px; height: 74px; }
.mvt--producto .mvt__qr span:not(.mv-visor) { font-size: 6px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mvt-color); }
.mvt__pie {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; padding: 0 14px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--mvt-color); color: #fff; font-size: 7.5px; font-weight: 700; letter-spacing: .02em;
}
.mvt__pie b { font-weight: 700; white-space: nowrap; }

/* Meridional: ficha técnica. Blanco, acero, un filete ámbar corto. */
.mvt--meridional { background: #fff; color: #0E2233; font-family: "Archivo", sans-serif; border: 1px solid #D6DFE8; border-radius: 4px; }
.mvt--meridional::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #123A5C; }
.mvt__marca { display: flex; align-items: center; gap: 7px; }
.mvt__marca img { width: 22px; height: auto; flex: 0 0 auto; }
.mvt__marca b { display: block; line-height: 1.05; }
.mvt__marca small { display: block; font-size: 8px; line-height: 1.2; }
.mvt--meridional .mvt__marca b { font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #123A5C; }
.mvt--meridional .mvt__marca small { color: #4E5E6D; }
.mvt--meridional .mvt__nom { font-weight: 700; font-size: 15.5px; line-height: 1.12; letter-spacing: -.01em; }
.mvt--meridional .mvt__nom::after { content: ""; display: block; width: 26px; height: 2px; background: #E39A2B; margin: 6px 0 5px; }
.mvt--meridional .mvt__cargo { font-size: 10px; color: #4E5E6D; }
.mvt--meridional .mvt__tel { margin-top: 3px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mvt--meridional .mvt__qr span { color: #4E5E6D; font-weight: 600; letter-spacing: .02em; }

/* Araucaria: la persona primero. Blanco, verde bosque, formas blandas. */
.mvt--araucaria { background: #fff; color: #10302A; font-family: "Manrope", sans-serif; border: 1px solid #D5E6DD; border-radius: 12px; }
.mvt--araucaria .mvt__marca b { font-weight: 800; font-size: 13px; color: #0F4D3F; }
.mvt--araucaria .mvt__marca small { color: #4F625B; }
.mvt--araucaria .mvt__persona { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.mvt--araucaria .mvt__foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mvt--araucaria .mvt__nom { margin: 0; font-weight: 800; font-size: 14px; line-height: 1.12; color: #0F4D3F; }
.mvt--araucaria .mvt__cargo { margin-top: 5px; font-size: 10px; color: #4F625B; }
.mvt--araucaria .mvt__tel { margin-top: 2px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mvt--araucaria .mvt__qr { background: #EAF5EF; border-radius: 10px; padding: 8px 8px 6px; }
.mvt--araucaria .mvt__qr img { width: 76px; height: 76px; background: #fff; padding: 3px; border-radius: 4px; }
.mvt--araucaria .mvt__qr span { color: #0F4D3F; font-weight: 700; }

/* Cordillera: carta membretada. Papel crema, serif, filete de latón. */
.mvt--cordillera { background: #FBF8F2; color: #16232E; font-family: "Spectral", Georgia, serif; border: 1px solid #D9D2C3; border-bottom-width: 3px; }
.mvt--cordillera .mvt__casa { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }
.mvt--cordillera .mvt__casa img { width: 24px; height: auto; }
.mvt--cordillera .mvt__nom { font-weight: 600; font-size: 15.5px; line-height: 1.12; }
.mvt--cordillera .mvt__nom::after { content: ""; display: block; width: 28px; height: 1px; background: #B8912F; margin: 6px 0 4px; }
.mvt--cordillera .mvt__cargo { font-style: italic; font-size: 11px; color: #5A5F63; }
.mvt--cordillera .mvt__tel { margin-top: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }
.mvt--cordillera .mvt__qr span { font-style: italic; color: #5A5F63; }

/* Poniente: el horizonte. El sello con las iniciales se para sobre una
   línea burdeos, como en su página; el QR lleva la etiqueta en sol. */
.mvt--poniente { background: #FFFBF7; color: #2B1419; font-family: "Instrument Sans", sans-serif; border: 1px solid #EADBD0; border-radius: 4px; }
.mvt--poniente .mvt__marca img { width: 24px; }
.mvt--poniente .mvt__marca b { font-weight: 700; font-size: 13px; color: #6B1D33; }
.mvt--poniente .mvt__marca small { color: #6A5552; }
.mvt--poniente .mvt__persona { margin-top: auto; display: flex; align-items: flex-end; gap: 8px; box-shadow: inset 0 -1.5px 0 #6B1D33; }
.mvt--poniente .mvt__sello {
  flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 34px; padding-top: 4px;
  border-radius: 14px 14px 0 0; background: #6B1D33; color: #F7E3D6; font-weight: 600; font-size: 11px; letter-spacing: .02em;
}
.mvt--poniente .mvt__nom { margin: 0; padding-bottom: 5px; font-weight: 700; font-size: 14px; line-height: 1.1; letter-spacing: -.01em; }
.mvt--poniente .mvt__cargo { margin-top: 6px; font-size: 10px; color: #6A5552; }
.mvt--poniente .mvt__tel { margin-top: 2px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mvt--poniente .mvt__qr span { color: #A8431D; font-weight: 700; }

/* El visor: cuatro esquinas coral que se cierran sobre el QR real. */
.mv-visor { position: absolute; left: 50%; top: 42%; width: 104px; height: 104px; translate: -50% -50%; opacity: 0; scale: 1.35; pointer-events: none;
  transition: scale 380ms var(--salida), opacity 160ms linear; }
.mv-visor i { position: absolute; width: 22px; height: 22px; border: 3px solid var(--acento); }
.mv-visor i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.mv-visor i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 7px; }
.mv-visor i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 7px; }
.mv-visor i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }
.mv.t-visor .mv-nueva .mv-visor { opacity: 1; scale: 1; }
.mv.t-pagina .mv-nueva .mv-visor { opacity: 0; transition-duration: 200ms; }

/* ---------- 3 · El teléfono de tu cliente ---------- */
.mv-fono {
  left: 350px; top: 116px; width: 268px; height: 552px;
  transform: translate(210px, 150px) rotate(16deg); opacity: 0;
  transition: transform 820ms var(--cae), opacity 240ms linear;
  --s: .65128;                          /* 254 px de pantalla / 390 px CSS */
}
.mv-fono::before { inset: 3% 4%; border-radius: 40px; background: rgb(var(--tinta-sombra) / .30); filter: blur(16px); transform: translate(-22px, 30px); }
.mv.t-fono .mv-fono { opacity: 1; transform: translate(0, 0) rotate(3deg); }
.mv-fono__cuerpo {
  position: absolute; inset: 0; border-radius: 44px; padding: 7px;
  background: linear-gradient(145deg, #2A2C33, #0E1014 60%);
  box-shadow: inset 0 0 0 1.5px #4A4D57, inset 0 0 0 3px #0B0C0F;
}
.mv-pantalla { position: relative; width: 254px; height: 538px; border-radius: 37px; overflow: hidden; background: #000; isolation: isolate; }
.mv-vp { position: absolute; left: 0; top: 0; width: 390px; height: 826px; transform: scale(var(--s)); transform-origin: 0 0; font-family: var(--texto-f); }

/* Barra de estado, isla y línea de inicio: lo que hace creíble el teléfono. */
.mv-estado {
  position: absolute; left: 0; right: 0; top: 0; height: 50px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 44px;
  font-weight: 600; font-size: 16px; color: var(--estado-texto, #111); background: var(--estado-fondo, transparent);
  transition: color 200ms linear, background-color 200ms linear;
}
.mv-estado svg { height: 13px; width: auto; }
.mv-estado__iconos { display: flex; gap: 6px; align-items: center; }
.mv-isla { position: absolute; left: 50%; top: 12px; width: 112px; height: 32px; translate: -50% 0; border-radius: 20px; background: #000; z-index: 6; }
.mv-inicio { position: absolute; left: 50%; bottom: 8px; width: 138px; height: 5px; translate: -50% 0; border-radius: 3px; background: rgb(0 0 0 / .8); z-index: 6; }
.mv-fono[data-pantalla="camara"] { --estado-texto: #fff; }
.mv-fono[data-pantalla="camara"] .mv-estado { background: transparent; }
.mv-fono[data-pantalla="camara"] .mv-inicio { background: rgb(255 255 255 / .85); }

.mvp { position: absolute; inset: 0; }

/* Pantalla 1: la cámara, apuntando a la tarjeta. */
.mvp--camara { background: radial-gradient(120% 80% at 50% 42%, #DCD5C9, #9E978B); overflow: hidden; }
.mvp-foto {
  position: absolute; left: 0; top: 0; width: 280px; height: 171px;
  transform-origin: 0 0; filter: blur(.5px) saturate(.92) brightness(.97);
}
.mvp-foto > .mvt { transform: none; }
.mvp--camara::after {                  /* viñeta de lente */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(0 0 0 / .45));
}
.mvp-visor { position: absolute; left: 50%; top: 45%; width: 230px; height: 230px; translate: -50% -50%; scale: 1.3; opacity: 0; z-index: 2;
  transition: scale 380ms var(--salida), opacity 160ms linear; }
.mvp-visor i { position: absolute; width: 46px; height: 46px; border: 5px solid var(--acento); }
.mvp-visor i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.mvp-visor i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; }
.mvp-visor i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; }
.mvp-visor i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
.mv.t-visor .mvp-visor { scale: 1; opacity: 1; }
.mvp-pildora {
  position: absolute; left: 50%; bottom: 128px; z-index: 3; translate: -50% 12px; opacity: 0;
  display: flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px;
  background: rgb(255 255 255 / .96); color: #111318; font-size: 17px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  transition: translate 300ms var(--salida), opacity 200ms linear;
}
.mvp-pildora .marca-qr { width: 20px; height: 21px; background: var(--acento); }
.mv.t-pildora .mvp-pildora { translate: -50% 0; opacity: 1; }

/* Pantalla 2: la página real del ejemplo, con scroll. */
.mvp--pagina { background: var(--estado-fondo, #fff); opacity: 0; scale: .94; transition: opacity 260ms linear, scale 420ms var(--ios-curva); overflow: hidden; }
.mv.t-pagina .mvp--pagina { opacity: 1; scale: 1; }
.mvp-pagina__img { position: absolute; left: 0; top: 50px; width: 390px; height: auto; max-width: none; will-change: transform; }
.mvp-pagina__barra { position: absolute; left: 0; bottom: 0; width: 390px; height: auto; max-width: none; translate: 0 100%; transition: translate 220ms var(--salida); }
.mv.t-barra .mvp-pagina__barra { translate: 0 0; }

/* El cotizador oficial de la compañía, abierto desde el link del ejecutivo.
   Entra como una página nueva (desde la derecha) y vuelve igual. */
.mvp--cotiza { background: #fff; z-index: 3; translate: 100% 0; transition: translate 420ms var(--ios-curva); }
.mvp-cotiza__img { position: absolute; left: 0; top: 50px; width: 390px; height: auto; max-width: none; }
.mv.t-cotiza .mvp--cotiza { translate: 0 0; }
.mv.t-volver .mvp--cotiza { translate: 100% 0; }

/* La hoja «guardar contacto»: sube desde abajo. */
.mvp-hoja {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4;
  padding: 22px 20px 20px; border-radius: 30px; background: #FFFFFF; color: #111318;
  box-shadow: 0 -2px 30px rgb(0 0 0 / .22);
  translate: 0 115%; transition: translate 420ms var(--ios-curva);
  text-align: center;
}
.mv.t-hoja .mvp-hoja { translate: 0 0; }
.mv.t-hoja-fuera .mvp-hoja { translate: 0 115%; transition-duration: 300ms; }
.mvp-hoja::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .0); }
.mvp-hoja__foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; display: block; }
.mvp-hoja__nom { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.mvp-hoja__org { display: block; font-size: 15px; color: #5E5953; margin-top: 2px; }
.mvp-hoja__tel { display: block; font-size: 15px; color: #5E5953; font-variant-numeric: tabular-nums; }
.mvp-hoja__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; height: 54px; border-radius: 16px;
  background: #F1EEE8; color: #111318; font-size: 17px; font-weight: 600;
  transition: background-color 200ms linear, color 200ms linear;
}
.mvp-hoja__btn svg { width: 20px; height: 20px; display: none; }
.mv.t-guardado .mvp-hoja__btn { background: #E5F6EA; color: #0B6B34; }
.mv.t-guardado .mvp-hoja__btn svg { display: block; }
.mvp-velo { position: absolute; inset: 0; z-index: 3; background: rgb(0 0 0 / .28); opacity: 0; transition: opacity 300ms linear; }
.mv.t-hoja .mvp-velo { opacity: 1; }
.mv.t-hoja-fuera .mvp-velo { opacity: 0; }

/* Pantalla 3: WhatsApp, con el mensaje ya escrito por la página. */
.mvp--chat { background: var(--wa-fondo-chat); translate: 100% 0; transition: translate 420ms var(--ios-curva); z-index: 4; }
.mv.t-chat .mvp--chat { translate: 0 0; }
.mvc-cab {
  position: absolute; left: 0; right: 0; top: 0; height: 112px; padding: 56px 14px 0 8px;
  display: flex; align-items: center; gap: 10px; background: var(--wa-cab); border-bottom: 1px solid #E2DED6; color: #111;
}
.mvc-cab svg { width: 26px; height: 26px; color: #1FAD55; flex: 0 0 auto; }
.mvc-cab img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mvc-cab b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.mvc-cab small { display: block; font-size: 13px; color: var(--wa-meta); }
.mvc-cab .escribiendo { display: none; color: #1FAD55; }
.mv.t-escribe .mvc-cab .en-linea { display: none; }
.mv.t-escribe .mvc-cab .escribiendo { display: block; }
.mv.t-respuesta .mvc-cab .en-linea { display: block; }
.mv.t-respuesta .mvc-cab .escribiendo { display: none; }
.mvc-hoy { position: absolute; left: 50%; top: 126px; translate: -50% 0; padding: 5px 12px; border-radius: 8px; background: #fff; font-size: 13px; color: var(--wa-meta); box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.mvc-aviso {
  position: absolute; left: 50%; top: 170px; translate: -50% 0; width: 300px; padding: 7px 12px; border-radius: 8px;
  background: #FFF3C4; color: #54463A; font-size: 12.5px; line-height: 1.35; text-align: center;
}
.mvc-aviso svg { display: inline-block; width: 10px; height: 11px; margin-right: 5px; vertical-align: -1px; }
.mvc-lista { position: absolute; left: 0; right: 0; bottom: 96px; display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.mvc-globo {
  max-width: 80%; padding: 8px 10px 6px 11px; border-radius: 12px; font-size: 16.5px; line-height: 1.35; color: #111;
  box-shadow: 0 1px 1px rgb(0 0 0 / .1); opacity: 0; translate: 0 10px; transition: opacity 180ms linear, translate 260ms var(--salida);
}
.mvc-globo small { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11.5px; color: var(--wa-meta); margin-top: 2px; }
.mvc-globo small svg { width: 17px; height: 11px; color: var(--wa-meta); transition: color 300ms linear; }
.mvc-globo--sale { align-self: flex-end; background: var(--wa-sale); border-top-right-radius: 3px; }
.mvc-globo--entra { align-self: flex-start; background: var(--wa-entra); border-top-left-radius: 3px; }
.mv.t-enviado .mvc-globo--sale, .mv.t-respuesta .mvc-globo--entra { opacity: 1; translate: 0 0; }
.mv.t-leido .mvc-globo--sale small svg { color: var(--wa-azul); }
.mvc-escribe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92px; padding: 10px 10px 30px;
  display: flex; align-items: center; gap: 8px; background: var(--wa-cab);
}
.mvc-campo { flex: 1; min-height: 44px; display: flex; align-items: center; padding: 8px 16px; border-radius: 22px; background: #fff; font-size: 16.5px; line-height: 1.25; color: #111; border: 1px solid #E2DED6; }
.mv.t-enviado .mvc-campo span { visibility: hidden; }
.mvc-enviar { width: 44px; height: 44px; border-radius: 50%; background: #1FAD55; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.mvc-enviar svg { width: 20px; height: 20px; }

/* Qué pantalla está al frente. */
.mv-fono:not([data-pantalla="camara"]) .mvp--camara { visibility: hidden; transition: visibility 0s 300ms; }

/* El toque: un círculo como los que marcan los toques en una grabación. */
.mv-toque {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 8; border-radius: 50%;
  background: rgb(255 255 255 / .55); box-shadow: 0 0 0 2px rgb(17 19 24 / .22), 0 4px 14px rgb(0 0 0 / .18);
  opacity: 0; pointer-events: none;
}

/* ---------- 4 · El chat, grande, sobre la mesa ---------- */
.mv-globo {
  position: absolute; left: 22px; width: 280px; padding: 10px 13px 8px; border-radius: 14px;
  font-family: var(--texto-f); font-size: 15px; line-height: 1.38; color: #111;
  opacity: 0; transform: translate(120px, 30px) scale(.8); transform-origin: 100% 50%;
  transition: transform 560ms var(--cae), opacity 220ms linear;
}
.mv-globo::before { inset: 6% 4% 0; border-radius: 14px; }
.mv-globo__quien { display: block; font-size: 12px; font-weight: 600; color: var(--mudo); margin-bottom: 3px; letter-spacing: .01em; }
.mv-globo small { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11.5px; color: var(--wa-meta); margin-top: 2px; }
.mv-globo small svg { width: 17px; height: 11px; color: var(--wa-azul); }
.mv-globo--cliente { top: 120px; background: var(--wa-sale); border-top-right-radius: 4px; }
.mv-globo--tu { top: 232px; left: 50px; background: #fff; border-top-left-radius: 4px; transform-origin: 100% 0; }
.mv.t-globo .mv-globo--cliente, .mv.t-respuesta .mv-globo--tu { opacity: 1; transform: none; }

/* El sello de la comisión: sobre la mesa, bajo el chat. */
.mv-sello {
  left: 22px; top: 384px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
  border-radius: 12px; background: #fff; font-family: var(--texto-f); color: var(--texto);
  opacity: 0; transform: translate(120px, 0) scale(.8); transform-origin: 100% 50%;
  transition: transform 560ms var(--cae), opacity 220ms linear;
}
.mv-sello::before { border-radius: 12px; }
.mv-sello svg { width: 26px; height: 26px; color: var(--acento-hondo); flex: 0 0 auto; }
.mv-sello small { display: block; font-size: 12px; font-weight: 600; color: var(--mudo); line-height: 1.2; }
.mv-sello b { display: block; font-size: 17px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.mv.t-sello .mv-sello { opacity: 1; transform: none; }

/* ---------- Formato alto (teléfono): mismo cuento, otra mesa ---------- */
.mv[data-formato="alto"] .mv-vieja,
.mv[data-formato="alto"] .mv-nueva { left: 8px; top: 424px; transform-origin: 0 0; scale: .7; }
.mv[data-formato="alto"] .mv-fono { left: 198px; top: 38px; scale: .74; transform-origin: 0 0; }
.mv[data-formato="alto"] .mv-globo { left: 6px; width: 192px; font-size: 13.5px; padding: 8px 11px 7px; }
.mv[data-formato="alto"] .mv-globo__quien { font-size: 11px; }
.mv[data-formato="alto"] .mv-globo--cliente { top: 64px; }
.mv[data-formato="alto"] .mv-globo--tu { top: 176px; left: 14px; }
.mv[data-formato="alto"] .mv-camara { --foco-x: 297px; --foco-y: 242px; }
.mv[data-formato="alto"] .mv-sello { left: 6px; top: 300px; padding: 8px 12px 8px 10px; }
.mv[data-formato="alto"] .mv-sello b { font-size: 15px; }

/* ---------- Transición entre ejemplos ---------- */
.mv.sale .mv-camara > .mv-obj { opacity: 0 !important; transition: opacity 380ms linear !important; }
.mv.sin-trans *, .mv.sin-trans *::before, .mv.sin-trans *::after { transition: none !important; }

/* ---------- El pie: qué está pasando y qué ejemplo se ve ---------- */
.mv-pie { position: relative; z-index: 2; padding: 14px 0 0; }
.mv-rotulo {
  --fs: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; align-content: end; gap: 0 12px;
  min-height: calc(var(--fs) * 2.4); margin: 0;
}
/* En teléfonos angostos el rótulo más largo pedía tres líneas y empujaba
   las pestañas mientras corría la historia: la letra baja un punto y, bajo
   340 px, se reservan tres líneas. Las pestañas nunca se mueven. */
@media (max-width: 379px) { .mv-rotulo { --fs: 1.125rem; } }
@media (max-width: 339px) { .mv-rotulo { min-height: calc(var(--fs) * 3.6); } }
.mv-rotulo__n:empty { display: none; }
.mv-rotulo__n { font-size: var(--t-13); font-weight: 600; color: var(--mudo); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.mv-rotulo__txt {
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: var(--fs);
  line-height: 1.2; letter-spacing: -.01em; color: var(--texto); text-wrap: balance;
  transition: opacity 180ms linear, translate 240ms var(--salida);
}
.mv-rotulo__txt.cambia { opacity: 0; translate: 0 6px; transition: none; }

.mv-control { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mv-tabs { display: flex; flex: 1; gap: 4px; min-width: 0; }
.mv-tab {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 2px 0; white-space: nowrap; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  font: 600 var(--t-15)/1.2 var(--texto-f); color: var(--mudo);
  transition: color 160ms var(--salida);
}
.mv-tab[aria-pressed="true"] { color: var(--texto); }
.mv-tab__pista { display: block; width: 100%; height: 2px; background: var(--linea); overflow: hidden; }
.mv-tab__pista i { display: block; height: 100%; background: var(--acento-hondo); transform-origin: 0 50%; transform: scaleX(0); }
.mv-tab[aria-pressed="true"] .mv-tab__pista { background: var(--linea); }
.mv-tab:focus-visible, .mv-pausa:focus-visible { outline: 2px solid var(--acento-hondo); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) { .mv-tab:hover { color: var(--texto); } }
.mv-tab:active { transform: translateY(1px); }
.mv-pausa {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--linea); background: transparent; color: var(--texto); cursor: pointer;
  transition: border-color 160ms var(--salida), transform 140ms var(--salida);
}
.mv-pausa svg { width: 14px; height: 14px; }
.mv-pausa .ico-play { display: none; }
.mv.pausado .mv-pausa .ico-play { display: block; }
.mv.pausado .mv-pausa .ico-pausa { display: none; }
@media (hover: hover) { .mv-pausa:hover { border-color: var(--texto); } }
.mv-pausa:active { transform: scale(.94); }
.mv-ficticio { margin-top: 10px; font-size: var(--t-13); color: var(--mudo); }

/* Movimiento reducido: sin historia animada. Queda la escena final del
   ejemplo elegido, quieta; las pestañas la cambian al instante. */
@media (prefers-reduced-motion: reduce) {
  .mv-luz { animation: none; }
  .mv-pausa { display: none; }
  .mv-rotulo { grid-template-columns: 1fr; }
  .mv-vieja { display: none; }
  .mv__vista *, .mv__vista *::before, .mv__vista *::after { transition: none !important; }
}