/* ============================================================================
   MOLDE LANDING — v1.4 (22-10-2026)
   Molde único para todas las landings. Se clona por producto y por país:
   se cambian SOLO los tokens del bloque PALETA y las dos fuentes. El resto
   no se toca nunca; si una landing necesita algo nuevo, se agrega acá y
   sube la versión del molde, no se parchea la copia.

   Todo está scopeado bajo .vg-lp para que nada de afuera (tema, checkout,
   script de terceros) pise el diseño, y para poder pegar el molde dentro de
   otra plataforma sin que se rompa.

   Uso: <link rel="stylesheet" href="landing.css"> y <div class="vg-lp"> …
   ============================================================================ */

/* ---------------------------------------------------------------- TIPOGRAFÍA
   Dos fuentes, nunca más: una condensada para titulares, una de palo seco
   para el cuerpo. Cambiar acá y en los dos tokens --cond / --sans. */
/* >>> FUENTES — generado por herramientas/fuentes.py, no editar a mano */
/* Fuentes autohospedadas: mismo origen que el CSS, sin viaje a Google. */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-condensed-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-condensed-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* <<< FUENTES */

.vg-lp{
  /* ---------- PALETA (lo único que se cambia por producto) ----------
     Los nombres son semánticos a propósito: dicen qué hace el color, no
     qué color es. Así el molde se repinta sin tocar una sola regla. */
  --marca:#101A2B;        /* estructura: badges, títulos, barra, pie, total */
  --marca-hondo:#0A1220;  /* barra fija, hover, texto sobre fondo claro */
  --acento:#1F6F5B;       /* íconos de línea, círculos numerados, subrayados */
  --velo:#DDE9E4;         /* paneles, cajas de ícono, píldoras */
  --filete:#CBC4B2;       /* bordes de tarjeta (1px) y separadores */
  --papel:#FBF8F0;        /* fondo de página */
  --papel-alt:#EEEAE0;    /* fondo alterno de sección */
  --tinta:#1C2026;        /* titulares */
  --texto:#3C434B;        /* cuerpo */
  --leyenda:#7A7F86;      /* notas, epígrafes, valores tachados */
  --resalte:#F2C230;      /* marcador de resaltador: UN número por pieza (celda clave de la demo 5b), con --tinta encima */

  /* ---------- EL MECANISMO (tres estados) ----------
     Si el producto tiene un mecanismo de tres niveles (sí / ojo / no,
     verde / amarillo / rojo, actuar / vigilar / derivar), estos son sus
     colores y se usan en todo: semáforos, checks, cruces, bordes.
     --si es además el color del botón de compra. */
  --si:#1F6F5B;    /* botón, checks, "GRATIS" */
  --duda:#946A24;  /* intermedio, cuenta regresiva, acento puntual */
  --no:#B3261E;    /* cruces, dolores, precio tachado */

  /* ---------- FUENTES ---------- */
  --cond:'IBM Plex Sans Condensed',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* ---------- MEDIDAS DEL MOLDE (no tocar) ---------- */
  --ancho:720px;       /* columna de lectura */
  --ancho-wide:1120px; /* secciones anchas (grids de 3) */
  --gutter:24px;
  --radio:14px;
  --sombra:0 2px 10px rgba(0,0,0,.06);
  --sombra-alta:0 8px 30px rgba(0,0,0,.14);

  font-family:var(--sans);
  color:var(--texto);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  font-size:17px;
}

/* full-bleed: la landing de borde a borde aunque el contenedor de afuera
   tenga márgenes propios. */
html,body{overflow-x:clip}
.vg-lp{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

.vg-lp *{box-sizing:border-box}
.vg-lp img{max-width:100%;display:block;height:auto}

/* ---------- RECORTES DE IMAGEN ----------
   Las imágenes se generan en estas cinco relaciones y nada más. El nombre
   del archivo lleva el sufijo: hero_169.png, vistazo_01_45.png, chat_01_916.png */
.vg-lp .vg-11 {aspect-ratio:1/1;  object-fit:cover;width:100%}
.vg-lp .vg-45 {aspect-ratio:4/5;  object-fit:cover;width:100%}
.vg-lp .vg-169{aspect-ratio:16/9; object-fit:cover;width:100%}
.vg-lp .vg-916{aspect-ratio:9/16; object-fit:cover;width:100%}
.vg-lp .vg-23 {aspect-ratio:2/3;  object-fit:cover;width:100%}

/* ============================================================== ESTRUCTURA */
.vg-lp .vg-wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.vg-lp .vg-wrap--wide{max-width:var(--ancho-wide);margin:0 auto;padding:0 var(--gutter)}
.vg-lp .vg-sec{position:relative;padding:72px 0;background:var(--papel)}
.vg-lp .vg-sec--alt{background:var(--papel-alt)}   /* alterna una sí, una no */
.vg-lp .vg-center{text-align:center}
.vg-lp p{font-size:1.0625rem;line-height:1.55;color:var(--texto);margin:0 0 14px}
.vg-lp .vg-lead{font-size:1.0625rem;line-height:1.55;color:var(--texto);margin:0 0 22px}
.vg-lp .vg-small{font-size:.875rem;color:var(--leyenda);line-height:1.5}

/* Números SIEMPRE tabulares, y sin traducir por el navegador */
.vg-lp [translate="no"],
.vg-lp .vg-num,
.vg-lp .vg-val,
.vg-lp .vg-price-now,
.vg-lp .vg-timer-n{font-variant-numeric:tabular-nums}
/* Un precio o una cifra no se parte en dos renglones («17,90» arriba y «€» abajo):
   por eso el espacio puede ser un espacio común y el número va en translate="no". */
.vg-lp [translate="no"]{white-space:nowrap}

/* ============================================================== TIPOGRAFÍA */
.vg-lp .vg-h1{
  font-family:var(--cond);font-weight:700;color:var(--tinta);
  font-size:2.5rem;line-height:1.02;letter-spacing:-.01em;margin:0 0 16px;
}
.vg-lp .vg-h2{
  font-family:var(--cond);font-weight:700;color:var(--tinta);
  font-size:2rem;line-height:1.08;letter-spacing:-.01em;margin:0 0 18px;
}
.vg-lp .vg-h3{
  font-family:var(--cond);font-weight:700;color:var(--marca);text-transform:uppercase;
  font-size:1.25rem;line-height:1.2;letter-spacing:.01em;margin:0 0 10px;
}
@media(min-width:900px){
  .vg-lp .vg-h1{font-size:3.75rem}
  .vg-lp .vg-h2{font-size:2.875rem}
}

/* Palabra clave resaltada dentro de un titular: <em class="vg-em">…</em>.
   Es formato, no copy: se repinta por cascada sin tocar el HTML. */
.vg-lp .vg-em{
  color:var(--marca);text-decoration:underline;text-decoration-color:var(--acento);
  text-decoration-thickness:4px;text-underline-offset:4px;font-style:normal;
}

/* Kicker / antetítulo: la banderita arriba del H1 o del H2 */
.vg-lp .vg-kicker{
  display:inline-block;font-family:var(--cond);font-weight:600;
  font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;
  color:#FFFFFF;background:var(--marca);
  padding:7px 16px 7px 12px;border-radius:4px 14px 14px 4px;margin:0 0 16px;
}
.vg-lp .vg-tag{
  font-family:var(--cond);font-weight:600;font-size:.8125rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--acento);
}

/* ============================================================== 0 · BARRA FIJA
   Franja superior fija con la oferta y un botón chico. El spacer va justo
   abajo en el HTML para que el hero no arranque tapado. */
.vg-lp .vg-bar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--marca-hondo);padding:12px 20px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.vg-lp .vg-bar__tx{
  font-family:var(--sans);font-weight:600;font-size:.8125rem;color:#FFFFFF;
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vg-lp .vg-bar__tx b{font-family:var(--cond);color:#7FE0A8;font-weight:700;font-variant-numeric:tabular-nums}
.vg-lp .vg-bar .vg-btn{flex:none;padding:9px 18px;min-height:auto;font-size:.8125rem;box-shadow:none;width:auto}
.vg-lp .vg-bar-spacer{height:52px}
@media(max-width:480px){
  .vg-lp .vg-bar{padding:7px 12px;gap:8px}
  .vg-lp .vg-bar__tx{font-size:.6875rem}
  .vg-lp .vg-bar .vg-btn{padding:7px 14px;font-size:.6875rem}
  .vg-lp .vg-bar-spacer{height:44px}
}

/* ============================================================== BOTÓN */
.vg-lp .vg-btn{
  display:inline-block;font-family:var(--cond);font-weight:700;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.2;
  text-align:center;text-decoration:none;color:#FFFFFF;
  background:var(--si);border:0;border-radius:12px;min-height:52px;
  padding:18px 28px;cursor:pointer;width:100%;max-width:460px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  box-shadow:0 6px 18px color-mix(in srgb,var(--si) 28%,transparent);  /* sigue al token: el molde no lleva colores sueltos */
  transition:transform .1s ease,filter .15s ease;
}
.vg-lp .vg-btn::after{content:'\2192';margin-left:10px;font-weight:700}
.vg-lp .vg-btn:hover{filter:brightness(.92)}
.vg-lp .vg-btn:active{transform:scale(.98)}
@media(min-width:540px){.vg-lp .vg-btn{width:auto}}
.vg-lp .vg-btn-note{font-size:.875rem;color:var(--leyenda);margin:14px 0 0}
.vg-lp .vg-btn-ghost{
  display:inline-block;font-family:var(--cond);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.02em;padding:12px 22px;border-radius:12px;
  border:2px solid var(--marca);background:var(--papel);color:var(--marca);
  cursor:pointer;text-decoration:none;
}
.vg-lp a.vg-link{color:var(--acento);text-decoration:underline}

/* ============================================================== TARJETA BASE */
.vg-lp .vg-card{
  background:var(--papel);border-radius:var(--radio);border:1px solid var(--filete);
  box-shadow:var(--sombra);
}
.vg-lp .vg-card-body{padding:26px}
.vg-lp .vg-hairline{border-top:1px solid var(--filete)}

/* Círculo numerado / check / cruz: los tres tienen la misma caja */
.vg-lp .vg-num-circle,
.vg-lp .vg-ico-ok,
.vg-lp .vg-ico-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;margin:0 0 14px;flex:none;
  font-family:var(--cond);font-weight:700;font-size:1.25rem;line-height:1;color:#FFFFFF;
}
.vg-lp .vg-num-circle{background:var(--acento)}
.vg-lp .vg-ico-ok{background:var(--si)}
.vg-lp .vg-ico-no{background:var(--no)}

/* ============================================================== PÍLDORAS */
.vg-lp .vg-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 0}
.vg-lp .vg-pill{
  display:inline-flex;align-items:center;gap:7px;border-radius:980px;padding:10px 18px;
  font-size:.8125rem;color:var(--marca-hondo);background:var(--velo);font-weight:600;
}
.vg-lp .vg-pill::before{content:'\2713';color:var(--si);font-weight:700}
.vg-lp .vg-trust{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:26px 0 0;font-size:.8125rem;color:var(--leyenda);
}
.vg-lp .vg-badge{
  display:inline-block;background:var(--duda);color:#FFFFFF;border-radius:980px;
  padding:8px 16px;font-weight:600;font-size:.9375rem;
}

/* ============================================================== SEMÁFORO (el mecanismo)
   Fila de tres puntos: encendido = lleno + halo, apagado = anillo. */
.vg-lp .vg-feux{display:flex;gap:8px;align-items:center}
.vg-lp .vg-feu{
  width:12px;height:12px;border-radius:50%;flex:none;background:transparent;
  transition:background .35s cubic-bezier(.2,.9,.25,1),box-shadow .35s cubic-bezier(.2,.9,.25,1);
}
.vg-lp .vg-feu--no  {box-shadow:inset 0 0 0 1.5px rgba(216,58,58,.4)}
.vg-lp .vg-feu--duda{box-shadow:inset 0 0 0 1.5px rgba(240,138,28,.4)}
.vg-lp .vg-feu--si  {box-shadow:inset 0 0 0 1.5px rgba(28,155,72,.4)}
.vg-lp .vg-feu.is-on.vg-feu--no  {background:var(--no);  box-shadow:0 0 8px rgba(216,58,58,.35)}
.vg-lp .vg-feu.is-on.vg-feu--duda{background:var(--duda);box-shadow:0 0 8px rgba(240,138,28,.35)}
.vg-lp .vg-feu.is-on.vg-feu--si  {background:var(--si);  box-shadow:0 0 8px rgba(28,155,72,.35)}

/* ============================================================== 1 · HERO
   Orden fijo: kicker -> H1 -> lead -> imagen -> botón -> píldoras.
   REGLA DEL PRIMER VISTAZO: a 375x812 el botón tiene que verse antes de
   y=700. El bloque @media de abajo existe para eso: no aflojarlo. */
.vg-lp .vg-hero{padding:20px 0 32px;text-align:center;position:relative;overflow:hidden}
.vg-lp .vg-hero::before{
  content:'';position:absolute;left:50%;top:210px;width:900px;height:900px;
  background:var(--velo);border-radius:50%;transform:translateX(-50%);z-index:0;
}
.vg-lp .vg-hero .vg-wrap{position:relative;z-index:1}
.vg-lp .vg-hero .vg-h1{margin-bottom:14px}
.vg-lp .vg-fig{margin:20px 0}
.vg-lp .vg-fig img{border-radius:var(--radio);box-shadow:var(--sombra-alta)}
.vg-lp .vg-fig figcaption{font-size:.8125rem;color:var(--leyenda);margin:10px 0 0}

/* Logo arriba del hero */
.vg-lp .vg-logo{display:flex;align-items:center;gap:10px;margin:0 0 22px;justify-content:center}
.vg-lp .vg-logo svg,.vg-lp .vg-logo img{flex:none;width:32px;height:32px}
.vg-lp .vg-logo-tx{text-align:left;line-height:1.05}
.vg-lp .vg-logo-nom{
  font-family:var(--cond);font-weight:700;font-size:1.625rem;color:var(--marca);
  display:block;letter-spacing:-.01em;
}
.vg-lp .vg-logo-tag{
  font-family:var(--sans);font-weight:600;font-size:.625rem;color:var(--acento);
  display:block;letter-spacing:.18em;text-transform:uppercase;margin-top:2px;
}
@media(min-width:720px){.vg-lp .vg-hero .vg-logo{justify-content:flex-start}}

/* ============================================================== GRILLAS
   vg-grid: 1 col en móvil, 2 en >=720. vg-grid--3: 3 en >=900. */
.vg-lp .vg-grid{display:grid;gap:16px;grid-template-columns:1fr;margin:28px 0 0}
@media(min-width:720px){.vg-lp .vg-grid{grid-template-columns:1fr 1fr}}
.vg-lp .vg-grid--3{grid-template-columns:1fr}
@media(min-width:900px){.vg-lp .vg-grid--3{grid-template-columns:repeat(3,1fr)}}
.vg-lp .vg-grid--1{grid-template-columns:1fr}

/* 2 · DOLORES — barra roja a la izquierda */
.vg-lp .vg-card--pain{border-left:4px solid var(--no);padding-left:24px}

/* 5 · ESTADÍSTICAS / CIFRAS */
.vg-lp .vg-stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin:28px 0 0}
@media(min-width:720px){.vg-lp .vg-stats{grid-template-columns:repeat(4,1fr)}}
.vg-lp .vg-stat{text-align:center;padding:20px 12px;border-radius:12px;background:var(--velo)}
.vg-lp .vg-stat b{display:block;font-family:var(--cond);font-weight:700;font-size:2rem;
  color:var(--marca);line-height:1;font-variant-numeric:tabular-nums}
.vg-lp .vg-stat span{font-size:.8125rem;color:var(--leyenda)}

/* 4 · SOLUCIÓN — leyenda del mecanismo */
.vg-lp .vg-legend{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.vg-lp .vg-legend li{
  display:flex;align-items:flex-start;gap:12px;font-size:.9375rem;color:var(--texto);
  padding:14px 16px;border-radius:12px;background:var(--velo);
}
.vg-lp .vg-legend li .vg-feu{margin-top:5px}
.vg-lp .vg-legend b{font-family:var(--cond);font-weight:700;color:var(--marca)}

/* 5 · TRES CASOS — tarjeta con franja de color según data-feu */
.vg-lp .vg-cases{display:grid;gap:20px;grid-template-columns:1fr;margin:26px 0 0}
@media(min-width:780px){.vg-lp .vg-cases{grid-template-columns:repeat(3,1fr)}}
.vg-lp .vg-case{
  padding:0 22px 22px;border-radius:var(--radio);overflow:hidden;text-align:left;
  background:var(--papel);border:1px solid var(--filete);
  transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s ease;
}
.vg-lp .vg-case.is-active{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.vg-lp .vg-case__head{
  display:flex;align-items:center;gap:10px;margin:0 -22px 16px;padding:14px 22px;
  background:var(--leyenda);
}
.vg-lp .vg-case[data-feu="si"]   .vg-case__head{background:var(--si)}
.vg-lp .vg-case[data-feu="duda"] .vg-case__head{background:var(--duda)}
.vg-lp .vg-case[data-feu="no"]   .vg-case__head{background:var(--no)}
.vg-lp .vg-case__label{font-family:var(--cond);font-weight:700;font-size:1rem;color:#FFFFFF;
  text-transform:uppercase;letter-spacing:.02em}
.vg-lp .vg-case img{border-radius:10px;margin:0 0 14px}
.vg-lp .vg-case__meta{font-size:.875rem;color:var(--texto);margin:0 0 14px;line-height:1.5}
.vg-lp .vg-case__box{border:1.5px solid var(--filete);border-radius:10px;padding:14px 16px 16px;background:var(--papel)}
.vg-lp .vg-case[data-feu="si"]   .vg-case__box{border-color:var(--si)}
.vg-lp .vg-case[data-feu="duda"] .vg-case__box{border-color:var(--duda)}
.vg-lp .vg-case[data-feu="no"]   .vg-case__box{border-color:var(--no)}
/* Variante neutra: para productos SIN mecanismo de tres estados (los casos son
   momentos de uso, no semáforos). Franja y borde en los colores de marca. */
.vg-lp .vg-case[data-feu="marca"] .vg-case__head{background:var(--marca)}
.vg-lp .vg-case[data-feu="marca"] .vg-case__box{border-color:var(--acento)}
.vg-lp .vg-case__tag{
  display:inline-block;font-family:var(--cond);font-weight:600;font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--marca);background:var(--velo);
  padding:4px 10px;border-radius:4px 10px 10px 4px;margin:0 0 8px;
}
.vg-lp .vg-case__box p{font-size:.875rem;line-height:1.5;margin:0}

/* 5b · DEMO INTERACTIVA — una pieza del producto, elegible, antes de comprar.
   Botones (vg-demo-opt) + un panel por opción (vg-demo-card; solo el activo va
   sin [hidden]). Es HTML común: se traduce y se edita como cualquier bloque; el
   JS de abajo del index.html solo alterna cuál se ve. La celda clave lleva el
   resaltador (--resalte): el número que decide, uno por pieza. */
.vg-lp .vg-demo{margin:26px 0 0;padding:22px 18px;border-radius:var(--radio);
  background:var(--papel);border:1px solid var(--filete);box-shadow:var(--sombra)}
.vg-lp .vg-demo-q{font-family:var(--cond);font-weight:700;font-size:1.125rem;color:var(--tinta);margin:0 0 12px;text-align:center}
.vg-lp .vg-demo-opts{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.vg-lp .vg-demo-opt{
  font:600 1rem var(--sans);color:var(--tinta);text-align:left;cursor:pointer;
  padding:12px 14px;min-height:48px;border-radius:10px;border:1px solid var(--filete);background:var(--papel-alt);
}
.vg-lp .vg-demo-opt:last-child:nth-child(odd){grid-column:1/-1}
.vg-lp .vg-demo-opt:hover{border-color:var(--acento)}
.vg-lp .vg-demo-opt.is-on{border-color:var(--acento);background:var(--velo);box-shadow:inset 3px 0 0 var(--acento)}
.vg-lp .vg-demo-opt:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.vg-lp .vg-demo-card{margin:16px 0 0;padding:18px 16px;border-radius:10px;border:1px solid var(--filete);
  border-top:6px solid var(--acento);background:var(--papel)}
.vg-lp .vg-demo-card[hidden]{display:none}
.vg-lp .vg-demo-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.vg-lp .vg-demo-title{font-family:var(--cond);font-weight:700;font-size:1.875rem;line-height:1.1;color:var(--tinta);margin:0 0 12px}
.vg-lp .vg-demo-cells{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--filete);
  border-radius:8px;overflow:hidden;background:var(--papel)}
.vg-lp .vg-demo-cell{padding:9px 4px 10px;text-align:center;border-right:1px solid var(--filete);min-width:0}
.vg-lp .vg-demo-cell:last-child{border-right:0}
.vg-lp .vg-demo-cell i{display:block;font-style:normal;font-family:var(--cond);font-weight:600;font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--leyenda)}
.vg-lp .vg-demo-cell b{display:block;margin-top:3px;font-family:var(--cond);font-weight:700;font-size:1.1875rem;
  line-height:1.2;color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.vg-lp .vg-demo-cell.is-key b{display:inline-block;background:var(--resalte);padding:0 .3em;border-radius:3px}
.vg-lp .vg-demo-rows{margin:14px 0 0;border-top:1px solid var(--filete)}
.vg-lp .vg-demo-rows div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--filete);font-size:.9375rem}
.vg-lp .vg-demo-rows span:first-child{font-family:var(--cond);font-weight:600;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--leyenda);padding-top:3px}
.vg-lp .vg-demo-rows span:last-child{font-weight:600;color:var(--tinta);text-align:right}
.vg-lp .vg-demo-note{margin:14px 0 0;padding:12px 14px;border-radius:10px;border:1px dashed var(--filete);
  background:var(--papel-alt);font-size:.9375rem;line-height:1.45;color:var(--texto)}
.vg-lp .vg-demo-note b{display:block;margin:0 0 3px;font-family:var(--cond);font-weight:600;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--leyenda)}
.vg-lp .vg-demo-foot{margin:12px 0 0}
@media(max-width:480px){
  .vg-lp .vg-demo{padding:18px 12px}
  .vg-lp .vg-demo-card{padding:16px 12px}
  .vg-lp .vg-demo-title{font-size:1.625rem}
  .vg-lp .vg-demo-cell{padding:8px 2px 9px}
  .vg-lp .vg-demo-cell b{font-size:.8125rem}
}
@media(min-width:720px){
  .vg-lp .vg-demo{padding:28px 30px}
  .vg-lp .vg-demo-opts{grid-template-columns:repeat(3,1fr)}
  .vg-lp .vg-demo-opt:last-child:nth-child(odd){grid-column:auto}
  .vg-lp .vg-demo-card{padding:24px}
}

/* 6 · CÓMO FUNCIONA — 3 pasos */
.vg-lp .vg-steps{display:grid;gap:16px;grid-template-columns:1fr;margin:28px 0 0}
@media(min-width:900px){.vg-lp .vg-steps{grid-template-columns:repeat(3,1fr)}}
.vg-lp .vg-step{padding:26px;text-align:center;border-radius:var(--radio);
  background:var(--papel);border:1px solid var(--filete);box-shadow:var(--sombra)}
.vg-lp .vg-step p{font-size:.9375rem;color:var(--leyenda);margin:0}
.vg-lp .vg-steps-foot{font-size:.875rem;color:var(--leyenda);margin:18px 0 0;text-align:center}

/* 7 · QUÉ RECIBÍS — tarjeta con imagen arriba */
.vg-lp .vg-prod{overflow:hidden;border-radius:var(--radio);background:var(--papel);
  border:1px solid var(--filete);box-shadow:var(--sombra)}
.vg-lp .vg-prod-in{padding:24px 26px}
.vg-lp .vg-cat{font-size:.8125rem;font-weight:600;color:var(--acento);display:block;
  margin:0 0 8px;letter-spacing:.03em;text-transform:uppercase}
.vg-lp .vg-prod p{font-size:.9375rem;line-height:1.5;margin:0 0 10px;color:var(--texto)}
.vg-lp .vg-val{font-size:.8125rem;color:var(--leyenda);font-weight:600}

/* 8 · VISTAZO / TESTIMONIOS — marquesina infinita
   El track lleva los slides DUPLICADOS (A B C A B C) y el keyframe corre
   hasta -50%: así el loop no salta. */
.vg-lp .vg-carousel{overflow:hidden;position:relative;margin:28px calc(var(--gutter) * -1) 0}
.vg-lp .vg-track{display:flex;width:max-content;animation:vg-scroll 52s linear infinite;will-change:transform}
.vg-lp .vg-track--b{animation-duration:58s}
.vg-lp .vg-slide{flex:0 0 auto;width:220px;margin-right:16px}
.vg-lp .vg-slide--tall{width:190px}
.vg-lp .vg-slide img{border-radius:10px;border:1px solid var(--filete);box-shadow:var(--sombra)}
.vg-lp .vg-slide-cap{font-size:.8125rem;color:var(--leyenda);margin:10px 0 0;text-align:center}
.vg-lp .vg-carousel-hint{font-size:.8125rem;color:var(--leyenda);text-align:center;margin:14px 0 0}
@keyframes vg-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 9 · BONOS — la imagen ES la tarjeta (2:3). Grid de 3 en desktop,
   carrusel con scroll-snap en móvil. Arriba de las tres va además UNA imagen
   compuesta 16:9 (título + las tres tapas + píldoras), y cada tarjeta lleva
   su ancla de precio. */
.vg-lp .vg-gifts{display:grid;grid-template-columns:1fr;gap:18px;margin:28px 0 0}
.vg-lp .vg-gift img{border-radius:var(--radio);border:1px solid var(--filete);box-shadow:0 4px 16px rgba(0,0,0,.1)}
/* Ancla por regalo: «En vez de X · GRATIS HOY». Va en TODAS las tarjetas. */
.vg-lp .vg-gift-price{display:block;text-align:center;margin:10px 0 0;font-size:.875rem;color:var(--leyenda)}
.vg-lp .vg-gift-price s{color:var(--no)}
.vg-lp .vg-gift-price b{color:var(--si);font-weight:700;text-transform:uppercase}
@media(min-width:720px){.vg-lp .vg-gifts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:719px){
  .vg-lp .vg-gifts{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:28px calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 6px;grid-template-columns:none;
    scroll-padding:0 var(--gutter);   /* el snap respeta el gutter: la tarjeta no queda pegada al borde */
  }
  .vg-lp .vg-gift{flex:0 0 85%;scroll-snap-align:start}
}

/* 11 · OFERTA — pila de valor, total, precio */
.vg-lp .vg-offer{padding:30px 24px;margin:28px 0 0;border-radius:var(--radio);
  background:var(--papel);border:1px solid var(--filete);box-shadow:var(--sombra)}
.vg-lp .vg-stack-row{
  display:flex;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--filete);font-size:.9375rem;color:var(--texto);
}
.vg-lp .vg-stack-row span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.vg-lp .vg-stack-row--gift span:last-child{color:var(--si);font-weight:700}
.vg-lp .vg-strike{text-decoration:line-through;color:var(--no)}
/* Sobre la fila oscura del total, el rojo del token no se lee: se aclara (sigue al token). */
.vg-lp .vg-stack-tot .vg-strike{color:#FFB4AB;color:color-mix(in srgb,var(--no) 38%,#FFFFFF)}
/* La fila del valor total lleva id="vg-precio": es el destino de TODOS los
   CTA de arriba. Con scroll-margin para que el salto no la pegue al borde.
   Regla del 16-10: los botones saltan acá, nunca a la sección entera, así el
   toque deja en la misma pantalla el total, el precio, el ahorro, el reloj y
   el botón de compra. */
.vg-lp .vg-stack-tot{
  display:flex;justify-content:space-between;gap:14px;margin:8px -24px 0;padding:14px 24px;
  font-family:var(--cond);font-weight:700;font-size:1.25rem;color:#FFFFFF;background:var(--marca);
  /* 52px de barra fija + 16 de aire. La regla original decía 16, de cuando no
     había barra fija: con barra, el salto dejaba la fila medio tapada. */
  scroll-margin-top:68px;
}
@media(max-width:480px){.vg-lp .vg-stack-tot{scroll-margin-top:60px}} /* barra de 44px */
/* Imagen del paquete completo, justo arriba del precio. NUNCA lazy. */
.vg-lp .vg-pack{margin:0 0 22px}
.vg-lp .vg-pack img{border-radius:var(--radio);box-shadow:var(--sombra-alta)}
.vg-lp .vg-price{margin:26px 0 0;text-align:center}
.vg-lp .vg-price-now{
  display:block;font-family:var(--cond);font-weight:700;
  font-size:3.5rem;line-height:1;color:var(--tinta);margin:8px 0 0;
}
@media(min-width:480px){.vg-lp .vg-price-now{font-size:4.5rem}}
.vg-lp .vg-price-note{font-size:.875rem;color:var(--leyenda);margin:14px 0 0}
.vg-lp .vg-save{display:inline-block;margin:16px 0 0;padding:10px 20px;border-radius:980px;
  background:var(--si);color:#FFFFFF;font-size:.9375rem}

/* CUENTA REGRESIVA / CUPOS */
.vg-lp .vg-timer{margin:26px 0 0;text-align:center}
.vg-lp .vg-timer-lbl{font-size:.8125rem;font-weight:600;color:var(--leyenda);margin:0 0 10px}
.vg-lp .vg-timer-box{display:inline-flex;gap:8px;align-items:flex-end}
.vg-lp .vg-timer-n{
  font-family:var(--cond);font-weight:700;font-size:1.75rem;line-height:1;
  color:var(--marca-hondo);border-radius:10px;padding:10px 14px;background:var(--velo);
}
.vg-lp .vg-timer-unit{font-size:.6875rem;color:var(--leyenda);text-transform:lowercase}
.vg-lp .vg-timer-msg{font-size:.875rem;color:var(--leyenda);margin:12px 0 0}
.vg-lp .vg-cupos{font-size:.875rem;font-weight:600;color:var(--no);margin:10px 0 0}
.vg-lp .vg-cupos b{font-family:var(--cond);font-size:1.0625rem;font-variant-numeric:tabular-nums}
/* Barra de compradores: punto que late + «N personas comprando ahora» */
.vg-lp .vg-live{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 0;
  font-size:.875rem;color:var(--texto)}
.vg-lp .vg-live b{font-family:var(--cond);font-size:1.0625rem;color:var(--tinta);font-variant-numeric:tabular-nums}
.vg-lp .vg-live__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--si);
  animation:vg-late 1.8s ease-out infinite}
@keyframes vg-late{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.25)}
  70%{box-shadow:0 0 0 9px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  @keyframes vg-late{
    0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--si) 50%,transparent)}
    70%{box-shadow:0 0 0 9px transparent}
    100%{box-shadow:0 0 0 0 transparent}
  }
}

/* 12 · QUIÉN LO HIZO */
.vg-lp .vg-expert{display:grid;grid-template-columns:1fr;gap:24px;margin:28px 0 0;align-items:center}
@media(min-width:720px){.vg-lp .vg-expert{grid-template-columns:280px 1fr}}
.vg-lp .vg-expert img{border-radius:var(--radio);border:1px solid var(--filete);aspect-ratio:1/1;object-fit:cover}
.vg-lp .vg-expert-sign{font-family:var(--cond);font-weight:700;font-size:1.1rem;color:var(--marca);margin:8px 0 0}
.vg-lp .vg-quote{font-size:1.0625rem;line-height:1.55;font-style:italic;color:var(--texto);
  border-left:3px solid var(--acento);padding-left:18px;margin:0 0 14px}

/* 13 · RESEÑAS — encabezado con la nota global («4,8 de 5»), y entre las seis
   va SIEMPRE una de 4 estrellas con una queja menor: es lo que hace creíbles
   a las otras cinco. */
.vg-lp .vg-score{text-align:center;margin:0 0 22px}
.vg-lp .vg-score b{
  display:block;font-family:var(--cond);font-weight:700;font-size:3rem;line-height:1;
  color:var(--tinta);font-variant-numeric:tabular-nums;
}
.vg-lp .vg-score .vg-stars{font-size:1.125rem;margin:8px 0 4px;letter-spacing:3px}
.vg-lp .vg-score span{font-size:.875rem;color:var(--leyenda)}
.vg-lp .vg-reviews{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.vg-lp .vg-reviews{grid-template-columns:1fr 1fr}}
.vg-lp .vg-review{padding:20px 22px;border-radius:var(--radio);background:var(--papel);
  border:1px solid var(--filete);box-shadow:var(--sombra)}
.vg-lp .vg-review-head{display:flex;align-items:center;gap:11px;margin:0 0 8px}
.vg-lp .vg-review-ini{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600;
  color:var(--marca);background:var(--velo);
}
.vg-lp .vg-review-name{font-size:.875rem;font-weight:600;color:var(--tinta)}
.vg-lp .vg-review-sub{font-size:.75rem;color:var(--leyenda)}
.vg-lp .vg-stars{color:#F5B301;font-size:.8125rem;letter-spacing:1.5px;margin:0 0 8px}
.vg-lp .vg-review p{font-size:.9375rem;line-height:1.5;margin:0;color:var(--texto)}

/* COMPARACIÓN (antes / después) */
.vg-lp .vg-vs{display:grid;gap:16px;grid-template-columns:1fr;margin:28px 0 0}
@media(min-width:720px){.vg-lp .vg-vs{grid-template-columns:1fr 1fr}}
.vg-lp .vg-vs-col{padding:24px;border-radius:var(--radio);border:1px solid var(--filete)}
.vg-lp .vg-vs-col--no{background:var(--papel-alt);border-left:4px solid var(--no)}
.vg-lp .vg-vs-col--si{background:var(--velo);border-left:4px solid var(--si)}
.vg-lp .vg-vs-col ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:.9375rem}
.vg-lp .vg-vs-col--no li::before{content:'\2715  ';color:var(--no);font-weight:700}
.vg-lp .vg-vs-col--si li::before{content:'\2713  ';color:var(--si);font-weight:700}

/* 14 · GARANTÍA */
.vg-lp .vg-guarantee{padding:34px 26px;text-align:center;border-radius:var(--radio);
  background:var(--papel);border:1px solid var(--filete);box-shadow:var(--sombra)}
.vg-lp .vg-seal{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:700;
  font-size:.875rem;text-transform:uppercase;letter-spacing:.03em;color:var(--marca);
  border:1.5px solid var(--marca);border-radius:980px;padding:8px 18px;margin:0 0 18px;
}

/* 15 · FAQ — <details> nativo, el + rota 45° y queda × */
.vg-lp .vg-faq{margin:0 0 12px;border-radius:var(--radio);overflow:hidden;
  background:var(--papel);border:1px solid var(--filete)}
.vg-lp .vg-faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--tinta);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.vg-lp .vg-faq summary::-webkit-details-marker{display:none}
.vg-lp .vg-faq summary::after{
  content:'+';color:#FFFFFF;background:var(--acento);font-weight:700;font-size:1rem;flex:none;
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
.vg-lp .vg-faq[open] summary::after{transform:rotate(45deg)}
.vg-lp .vg-faq-a{padding:0 24px 22px}
.vg-lp .vg-faq-a p{font-size:.9375rem;line-height:1.5;margin:0;color:var(--leyenda)}
.vg-lp .vg-faq[open] .vg-faq-a p{animation:vg-faq-in .3s cubic-bezier(.2,.9,.25,1)}
@keyframes vg-faq-in{from{opacity:0}to{opacity:1}}

/* 16 · CIERRE */
.vg-lp .vg-final{padding:80px 0;text-align:center}

/* PIE: franja de marca de borde a borde */
.vg-lp .vg-footer-band{
  width:100vw;margin:40px calc(50% - 50vw) 0;padding:18px 24px;text-align:center;
  background:var(--marca);color:#FFFFFF;font-family:var(--cond);font-weight:600;
  font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;
}
.vg-lp .vg-legal{padding:36px 0;background:var(--papel-alt);font-size:.8125rem;
  color:var(--leyenda);line-height:1.7;text-align:center}
.vg-lp .vg-legal a{color:var(--leyenda);text-decoration:underline}

/* ============================================================== APARICIÓN
   Todo lo que lleve .vg-mat entra con un fundido de 12px al cruzar el
   viewport. Lo prende el IntersectionObserver del final del HTML; si no
   hay JS, el fallback les pone .is-in a todos. */
.vg-lp .vg-mat{
  opacity:0;transform:translateY(12px);
  transition:opacity .35s cubic-bezier(.2,.9,.25,1),transform .35s cubic-bezier(.2,.9,.25,1);
}
.vg-lp .vg-mat.is-in{opacity:1;transform:translateY(0)}

/* ============================================================== REGLA DEL PRIMER VISTAZO
   A 375x812 el botón del hero tiene que entrar antes de y=700. Este bloque
   comprime el hero para lograrlo. No aflojar los valores sin volver a medir. */
@media(max-width:480px){
  .vg-lp .vg-sec{padding:52px 0}
  .vg-lp .vg-hero{padding:6px 0 22px}
  .vg-lp .vg-hero .vg-logo{margin-bottom:12px}
  .vg-lp .vg-logo svg,.vg-lp .vg-logo img{width:26px;height:26px}
  .vg-lp .vg-logo-nom{font-size:1.25rem}
  .vg-lp .vg-logo-tag{font-size:.5625rem}
  .vg-lp .vg-hero .vg-h1{font-size:2rem;line-height:1.08;margin-bottom:8px}
  .vg-lp .vg-hero .vg-kicker{margin-bottom:5px;font-size:.75rem;padding:5px 12px 5px 10px}
  .vg-lp .vg-hero .vg-lead{font-size:.8125rem;line-height:1.4;margin-bottom:0}
  .vg-lp .vg-hero .vg-fig{margin:8px auto 8px}
  .vg-lp .vg-hero .vg-btn{font-size:1rem;padding:13px 22px;min-height:46px}
}

/* ============================================================== ACCESIBILIDAD */
@media(prefers-reduced-motion:reduce){
  .vg-lp .vg-mat,.vg-lp .vg-feu,.vg-lp .vg-case{
    transition:opacity .2s linear !important;transform:none !important;
  }
  .vg-lp .vg-track{animation:none}
  .vg-lp .vg-live__dot{animation:none}
}

/* ---------------------------------------------------------------- v1.4 · JAPONÉS
   Los titulares del molde llevan interlineado 1.02-1.08 pensado para letras latinas
   condensadas; con kanji/kana se pisan los renglones. Este bloque solo actúa si el
   <html> es lang="ja" y no cambia nada en los demás idiomas. */
html:lang(ja) .vg-lp{line-height:1.8;word-break:auto-phrase;overflow-wrap:anywhere}
html:lang(ja) .vg-lp .vg-h1{line-height:1.3;letter-spacing:0;font-size:2rem}
html:lang(ja) .vg-lp .vg-h2{line-height:1.35;letter-spacing:0;font-size:1.6rem}
html:lang(ja) .vg-lp .vg-h3{line-height:1.4;letter-spacing:0;text-transform:none;font-size:1.1rem}
html:lang(ja) .vg-lp .vg-lead,html:lang(ja) .vg-lp p{line-height:1.8}
html:lang(ja) .vg-lp .vg-kicker,html:lang(ja) .vg-lp .vg-tag,html:lang(ja) .vg-lp .vg-btn,
html:lang(ja) .vg-lp .vg-badge,html:lang(ja) .vg-lp .vg-pill{letter-spacing:.02em;text-transform:none}

/* ==========================================================================
   PULIDO v1.5 — pasada de craft
   Nada de acá cambia la estructura, el texto, la oferta ni la urgencia.
   Son las capas que el navegador pinta por su cuenta cuando nadie se las
   pide: la selección de texto, el flash del toque, el foco del teclado, el
   rebote de iOS, la barra de scroll. Es lo más barato que separa una página
   construida de una armada, y lo que todos saltean.
   ========================================================================== */

/* 1. EL REBOTE Y EL ZOOM DE SAFARI --------------------------------------
   Al tirar de la página hacia abajo en el celular, atrás del contenido
   aparece el fondo del navegador: blanco en claro, negro en oscuro. Nunca
   el papel de la landing. Y sin text-size-adjust, iOS agranda el cuerpo
   solo cuando el visitante gira el teléfono. (El color espeja --papel: si
   cambiás la paleta, cambiá también este.) */
html{
  background:#FBF8F0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* 2. SELECCIÓN DE TEXTO -------------------------------------------------
   El azul del sistema no es de nadie. Cuando alguien arrastra sobre el
   precio o sobre una garantía —y en una página de venta lo hacen— que el
   resalte sea el verde de la marca. */
.vg-lp ::selection{
  background:color-mix(in srgb,var(--acento) 20%,transparent);
  color:var(--tinta);
}

/* 3. EL FLASH DEL TOQUE -------------------------------------------------
   En Android, cada tap pinta un rectángulo celeste translúcido encima del
   botón. Es el default de WebView y grita «esto es una web». El botón YA
   tiene su respuesta al apretar (:active con scale .98); el flash la tapa.
   Apagándolo, la que se ve es la nuestra. */
.vg-lp,
.vg-lp a,
.vg-lp button,
.vg-lp summary{
  -webkit-tap-highlight-color:transparent;
}

/* La curva del apretón: salida exponencial en vez de 'ease'. Se siente
   firme al apretar y suelta sin rebote. */
.vg-lp .vg-btn{
  transition:transform .12s cubic-bezier(.2,.9,.25,1),filter .15s ease;
}
.vg-lp .vg-btn-ghost{
  transition:transform .12s cubic-bezier(.2,.9,.25,1),background .15s ease;
}
.vg-lp .vg-btn-ghost:active{transform:scale(.98)}

/* 4. FOCO DE TECLADO ----------------------------------------------------
   Antes solo lo tenía un elemento de la demo. Quien navega con teclado
   —o con el control por voz de Android, que usa el mismo foco— perdía el
   rastro en el resto de la página, botón de compra incluido. */
.vg-lp a:focus-visible,
.vg-lp button:focus-visible,
.vg-lp summary:focus-visible,
.vg-lp [tabindex]:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:3px;
  border-radius:4px;
}

/* 5. ÁREAS DE TOQUE DE 44 px -------------------------------------------
   El botón de la barra fija —el único CTA visible todo el scroll— mide
   27 px de alto en celular. El mínimo que se toca sin errarle es 44.
   No se agranda el botón: eso subiría la barra y el espaciador de 44 px
   dejaría de coincidir. Se agranda SOLO el área que escucha el dedo, con
   un pseudo-elemento invisible. El botón se ve igual; se toca mejor. */
.vg-lp .vg-bar .vg-btn{position:relative}
.vg-lp .vg-bar .vg-btn::before{
  content:'';
  position:absolute;
  left:0;right:0;top:50%;
  height:44px;
  transform:translateY(-50%);
}

/* Mismo truco para el mail del pie, que mide 22 px de alto. */
.vg-lp a[href^="mailto:"]{position:relative;text-underline-offset:.18em}
.vg-lp a[href^="mailto:"]::before{
  content:'';
  position:absolute;
  inset:-11px -6px;
}

/* 6. SOMBRAS CON DIRECCIÓN ---------------------------------------------
   Los tres semáforos encendidos usaban `0 0 8px`: un halo de color sin
   desplazamiento, que no es profundidad sino decoración. Una sombra real
   cae hacia algún lado. */
.vg-lp .vg-feu.is-on.vg-feu--no  {box-shadow:0 3px 10px rgba(216,58,58,.32)}
.vg-lp .vg-feu.is-on.vg-feu--duda{box-shadow:0 3px 10px rgba(240,138,28,.32)}
.vg-lp .vg-feu.is-on.vg-feu--si  {box-shadow:0 3px 10px rgba(28,155,72,.32)}

/* 7. SUBRAYADO DE LOS LINKS DE TEXTO ------------------------------------
   Pegado a la letra, el subrayado se come las colas de la g y la y. */
.vg-lp a.vg-link{text-underline-offset:.18em;text-decoration-thickness:1px}

/* 8. LA BARRA DE SCROLL (escritorio) ------------------------------------
   La pinta el sistema operativo y queda gris sobre un papel crema. */
@supports (scrollbar-color:auto){
  html{scrollbar-color:#9FB3AC #EEEAE0}
}

/* 9. Quien pidió menos movimiento tampoco quiere el apretón animado. */
@media(prefers-reduced-motion:reduce){
  .vg-lp .vg-btn,
  .vg-lp .vg-btn-ghost{transition:none}
}

/* 10. ICONOS DIBUJADOS, NO GLIFOS -------------------------------------
   El tilde, la cruz y la flecha venían de la tipografía: '\2713', '\2715',
   '\2192'. Cada fuente los dibuja a su manera —y la del sistema, cuando
   la propia no cubre el carácter, los dibuja distinto todavía—, así que
   el grosor no coincide con nada de la página y en algunos Android el
   tilde sale como un palito. Acá son tres SVG con el MISMO trazo (2,2,
   puntas redondeadas), pintados con mask para que sigan heredando el
   color de su regla. Mismo lugar, mismo tamaño, familia consistente. */
.vg-lp .vg-pill::before,
.vg-lp .vg-vs-col li::before,
.vg-lp .vg-btn::after{
  content:'';
  display:inline-block;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

/* tilde */
.vg-lp .vg-pill::before,
.vg-lp .vg-vs-col--si li::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.4 18 20 6.6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.4 18 20 6.6'/%3E%3C/svg%3E");
}
/* cruz */
.vg-lp .vg-vs-col--no li::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5'/%3E%3C/svg%3E");
}
/* flecha */
.vg-lp .vg-btn::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 6.2 18.8 12 13 17.8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 6.2 18.8 12 13 17.8'/%3E%3C/svg%3E");
}

/* Tamaño y asiento de cada uno en su contexto. */
.vg-lp .vg-pill::before{
  width:1.05em;height:1.05em;background:var(--si);
}
.vg-lp .vg-vs-col li::before{
  width:1.05em;height:1.05em;margin-right:.45em;vertical-align:-.17em;
}
.vg-lp .vg-vs-col--si li::before{background:var(--si)}
.vg-lp .vg-vs-col--no li::before{background:var(--no)}
.vg-lp .vg-btn::after{
  width:.85em;height:.85em;margin-left:10px;background:currentColor;vertical-align:-.04em;
}