/* Fuentes: BRANDING 2. Dos familias, nunca tres. */
/* Fuentes alojadas en el propio servidor: ni una peticion a
   Google desde el navegador del visitante. Generado por
   _bajar_fuentes.py — no se edita a mano. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/cormorant-garamond-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: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/libre-franklin-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: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/libre-franklin-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: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/libre-franklin-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: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/libre-franklin-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: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/libre-franklin-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: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/libre-franklin-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: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/special-elite-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: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/special-elite-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;
}

.vg-lp{
  /* ---- BASE — modo DIA (BRANDING 1) ---- */
  --paper:#F2EAE0;        /* lino crudo — nunca blanco puro */
  --paper-alt:#EAE0D2;    /* lino un escalon mas profundo */
  --surface:#FBF7F2;      /* tarjeta: un escalon mas clara que el fondo */
  --filet:#E0D3C4;        /* borde 1px — unico recurso de separacion */

  /* ---- ACENTOS — identicos en dia y en noche ---- */
  --acento:#C98A3C;       /* ambar de vela: lo que se toca o se sigue en orden */
  --acento-d:#A76D28;     /* el mismo oscurecido: borde inferior del boton */
  --valor:#A81C22;        /* LACRE. Escaso: el precio, y nada mas en la pagina */

  /* ---- TEXTO — modo DIA ---- */
  --tx-h:#1B1013;         /* titulos */
  --tx:#4A3A33;           /* cuerpo */
  --tx-lb:#6F5A4A;        /* etiquetas, pies */
  --rojo:#7A1216;         /* advertencia verdadera. NUNCA urgencia: esa es ambar */

  --disp:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',system-ui,-apple-system,sans-serif;

  font-family:var(--sans);
  color:var(--tx);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.vg-lp *{box-sizing:border-box}
.vg-lp img{max-width:100%;display:block;height:auto}

/* ============ SECCIONES ============
   El ritmo es NOCHE = la cena ocurriendo · DIA = lo que te llevas.
   En noche se redefinen los tokens: asi cada regla hija funciona sola. */
.vg-lp .vg-sec{position:relative;padding:64px 0;background:var(--paper)}
.vg-lp .vg-sec--alt{background:var(--paper-alt)}

.vg-lp .vg-sec--night{
  --paper:#1B1013;
  --paper-alt:#1B1013;
  --surface:#2A1A1E;
  --filet:#3D272C;
  --tx-h:#F5EDE3;
  --tx:#C9B9A8;
  --tx-lb:#9C8574;
  background:#1B1013;
  color:#C9B9A8;
}
/* Los dos unicos bloques a sangre de la pagina: los 3 pasos y la oferta. */
.vg-lp .vg-sec--bleed{padding:76px 0}

.vg-lp .vg-wrap{max-width:760px;margin:0 auto;padding:0 22px}
.vg-lp .vg-wrap--wide{max-width:1080px;margin:0 auto;padding:0 22px}
.vg-lp .vg-center{text-align:center}

/* ============ EL MOTIVO DE MARCA: LE TRE BUSTE (BRANDING 3) ============
   Tres puntos de lacre en linea. El tercero en ambar, no en rojo: el rojo
   es escaso y se gasta una sola vez en toda la pagina, en el precio. */
.vg-lp .vg-motivo{display:flex;gap:9px;justify-content:center;margin:0 auto;align-items:center}
.vg-lp .vg-motivo i{display:block;width:8px;height:8px;border-radius:50%;background:var(--filet)}
.vg-lp .vg-motivo i:nth-child(3){background:var(--acento)}
.vg-lp .vg-motivo--sep{margin:0 auto 26px}

/* ============ TIPOGRAFIA ============
   Cormorant nunca por debajo de 20px ni por debajo de peso 600.
   Los numeros corrientes van en Libre Franklin tabular. */
.vg-lp .vg-h1{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.4vw,54px);line-height:1.1;color:var(--tx-h);margin:0 0 18px;letter-spacing:-.005em}
.vg-lp .vg-h2{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,38px);line-height:1.16;color:var(--tx-h);margin:0 0 16px;letter-spacing:-.005em}
.vg-lp .vg-h3{font-family:var(--disp);font-weight:600;font-size:22px;line-height:1.28;color:var(--tx-h);margin:0 0 8px}
.vg-lp .vg-kicker{font-family:var(--sans);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.10em;color:var(--tx-lb);margin:0 0 14px}
.vg-lp .vg-lead{font-size:19px;line-height:1.6;margin:0 0 20px}
.vg-lp .vg-sub{font-size:15px;color:var(--tx-lb);margin:6px 0 0}
.vg-lp .vg-em{color:var(--tx-h);font-weight:700}
.vg-lp .vg-strike{text-decoration:line-through;opacity:.55}
.vg-lp .vg-rule{height:1px;background:var(--filet);border:0;margin:34px 0}

/* LA CIFRA — el unico elemento en lacre de su pieza. */
.vg-lp .vg-figure{font-family:var(--disp);font-weight:700;font-size:clamp(58px,11vw,92px);line-height:.95;color:var(--valor);font-variant-numeric:tabular-nums;display:block;letter-spacing:-.01em}

/* ============ TARJETAS ============
   Radio 4px: un sobre y un documento tienen esquinas vivas.
   Cero sombra: la profundidad la da el escalon de color. */
.vg-lp .vg-card{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:0 0 20px;overflow:hidden}
.vg-lp .vg-card>.vg-band{display:block;height:3px;width:100%;background:var(--acento)}
.vg-lp .vg-card-in{padding:20px 22px 0}
.vg-lp .vg-cards{display:grid;gap:18px}
@media(min-width:720px){.vg-lp .vg-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.vg-lp .vg-cards--3{grid-template-columns:repeat(3,1fr)}}
.vg-lp .vg-card-tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.10em;color:var(--tx-lb);margin:0 0 8px}
.vg-lp .vg-card-body{font-size:16px;margin:0}
.vg-lp .vg-card-img{border:1px solid var(--filet);border-radius:2px;margin:0 0 14px;background:var(--paper);width:100%;aspect-ratio:1/1;object-fit:cover}

/* ============ CHIPS ============ */
.vg-lp .vg-chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:18px 0 0}
.vg-lp .vg-chip{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.10em;color:var(--tx-lb);border-bottom:1px solid var(--filet);padding-bottom:3px}

/* ============ BOTONES ============ */
.vg-lp .vg-btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.25;text-align:center;text-decoration:none;padding:17px 34px 15px;border-radius:4px;background:var(--acento);color:#1B1013;border:1px solid var(--acento);border-bottom:3px solid var(--acento-d);transition:transform .06s ease}
.vg-lp .vg-btn:hover{transform:translateY(1px)}
.vg-lp .vg-btn:active{transform:translateY(2px);border-bottom-width:1px;padding-bottom:17px}
.vg-lp .vg-btn-note{font-size:14px;color:var(--tx-lb);margin:12px 0 0}

/* ============ HERO ============ */
.vg-lp .vg-hero{padding:72px 0 58px}
.vg-lp .vg-hero-badges{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:26px 0 0}
.vg-lp .vg-hero-badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.10em;color:var(--tx-lb)}

/* ============ DOLORES Y BENEFICIOS ============ */
.vg-lp .vg-pains,.vg-lp .vg-bens{display:grid;gap:16px;margin:26px 0 0}
@media(min-width:720px){
  .vg-lp .vg-pains{grid-template-columns:repeat(2,1fr)}
  .vg-lp .vg-bens{grid-template-columns:repeat(3,1fr)}
}
.vg-lp .vg-pain,.vg-lp .vg-ben{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:0 0 20px;overflow:hidden}
.vg-lp .vg-pain .vg-band,.vg-lp .vg-ben .vg-band{display:block;height:3px;width:100%;background:var(--acento)}
.vg-lp .vg-pain-in,.vg-lp .vg-ben-in{padding:18px 20px 0}
.vg-lp .vg-ben-num{font-family:var(--sans);font-weight:600;font-size:13px;line-height:1;color:var(--tx-lb);font-variant-numeric:tabular-nums;letter-spacing:.10em;margin:0 0 12px}

/* ============ 3 PASOS — «LA LINEA DELLA SERATA» ============
   No es una reticula de tarjetas: es una linea de tiempo. La regla ambar
   es el hilo de la noche, y cada parada cuelga de ella. */
.vg-lp .vg-steps{display:grid;gap:0;margin:34px 0 0;border-top:1px solid var(--filet)}
.vg-lp .vg-step-card{background:transparent;border:0;border-bottom:1px solid var(--filet);padding:22px 0}
.vg-lp .vg-step-in{padding:0}
.vg-lp .vg-step-hour{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--acento);font-variant-numeric:tabular-nums;display:inline-block;margin:0 0 8px}
.vg-lp .vg-step-course{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-lb);margin:0 0 10px}
.vg-lp .vg-step-num{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.2;color:var(--tx-h);margin:0 0 8px}
.vg-lp .vg-step-body{font-size:16px;margin:0;color:var(--tx)}
.vg-lp .vg-steps-foot{margin:30px 0 0;text-align:center}
@media(min-width:860px){
  .vg-lp .vg-steps{grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--acento);margin-top:40px}
  .vg-lp .vg-step-card{border-bottom:0;border-left:1px solid var(--filet);padding:26px 20px 0}
  .vg-lp .vg-step-card:first-child{border-left:0;padding-left:0}
}

/* ============ CARRUSELES (vistazo 4:5 · testimonios 9:16) ============ */
.vg-lp .vg-carousel{overflow:hidden;position:relative;margin:26px 0 0}
.vg-lp .vg-carousel-hint{font-size:13px;color:var(--tx-lb);margin:10px 0 0;text-align:center}
.vg-lp .vg-track{display:flex;gap:14px;width:max-content;animation:vg-scroll 46s linear infinite}
.vg-lp .vg-track--b{animation-duration:56s}
.vg-lp .vg-track--c{animation-duration:64s}
.vg-lp .vg-carousel:hover .vg-track{animation-play-state:paused}
@keyframes vg-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .vg-lp .vg-track{animation:none}
  .vg-lp .vg-carousel{overflow-x:auto}
}
.vg-lp .vg-slide{flex:0 0 auto;width:212px}
.vg-lp .vg-slide--tall{width:190px}
.vg-lp .vg-slide img{border:1px solid var(--filet);border-radius:2px;background:var(--surface)}
.vg-lp .vg-slide-cap{font-size:13px;color:var(--tx-lb);margin:8px 0 0;text-align:center}
.vg-lp .vg-45{aspect-ratio:4/5;object-fit:cover;width:100%}
.vg-lp .vg-916{aspect-ratio:9/16;object-fit:cover;width:100%}
.vg-lp .vg-11{aspect-ratio:1/1;object-fit:cover;width:100%}
.vg-lp .vg-169{aspect-ratio:16/9;object-fit:cover;width:100%}

/* ============ STACK DE VALOR ============ */
.vg-lp .vg-stack{margin:22px 0 0}
.vg-lp .vg-stack-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--filet);font-size:16px}
.vg-lp .vg-stack-row--bonus span:first-child::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acento);margin-right:10px;vertical-align:middle}
.vg-lp .vg-val{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.vg-lp .vg-stack-tot{display:flex;justify-content:space-between;gap:16px;padding:16px 0 0;font-family:var(--disp);font-weight:700;font-size:22px;color:var(--tx-h)}

/* ============ OFERTA Y PRECIO ============ */
.vg-lp .vg-offer-card{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:30px 26px}
.vg-lp .vg-price{margin:24px 0 6px;text-align:center}
.vg-lp .vg-price-old{font-size:17px;color:var(--tx-lb);text-decoration:line-through;font-variant-numeric:tabular-nums}
.vg-lp .vg-price-now{font-family:var(--disp);font-weight:700;font-size:clamp(50px,8.5vw,70px);line-height:1;color:var(--valor);display:block;margin:6px 0 0;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vg-lp .vg-price-note{font-size:14px;color:var(--tx-lb);margin:10px 0 0;text-align:center}
/* El ahorro REMARCADO: pildora ambar. No lleva lacre: el lacre ya lo gasto el precio. */
.vg-lp .vg-save--big{display:table;margin:14px auto 0;padding:11px 22px;background:var(--acento);border-radius:4px;font-size:19px;color:#1B1013}
.vg-lp .vg-save--big strong{font-family:var(--sans);font-weight:700;font-variant-numeric:tabular-nums}


/* ============ RESENAS ============ */
.vg-lp .vg-reviews{display:grid;gap:16px;margin:26px 0 0}
@media(min-width:720px){.vg-lp .vg-reviews{grid-template-columns:repeat(2,1fr)}}
.vg-lp .vg-review{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:20px}
.vg-lp .vg-review-top{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.vg-lp .vg-avatar{width:38px;height:38px;border-radius:50%;flex:0 0 auto;color:#1B1013;background:var(--acento);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.vg-lp .vg-review-name{font-weight:700;font-size:15px;color:var(--tx-h)}
.vg-lp .vg-verified{font-size:12px;color:var(--tx-lb)}
.vg-lp .vg-stars{color:var(--acento);font-size:14px;letter-spacing:.06em}
.vg-lp .vg-rating-hd{display:flex;align-items:baseline;gap:12px;justify-content:center;margin:0 0 6px}
.vg-lp .vg-rating-num{font-family:var(--sans);font-weight:700;font-size:34px;color:var(--tx-h);font-variant-numeric:tabular-nums}
.vg-lp .vg-rating-txt{font-size:14px;color:var(--tx-lb)}

/* ============ GARANTIA ============ */
.vg-lp .vg-guarantee{background:var(--surface);border:1px solid var(--acento);border-radius:4px;padding:0 0 26px;overflow:hidden}
.vg-lp .vg-guarantee-in{padding:24px 26px 0}
.vg-lp .vg-seal{font-family:var(--sans);font-weight:700;font-size:12px;color:var(--acento);text-transform:uppercase;letter-spacing:.14em;margin:0 0 12px}

/* ============ FAQ ============ */
.vg-lp .vg-faq{margin:26px 0 0;border-top:2px solid var(--acento)}
.vg-lp .vg-faq details{border-bottom:1px solid var(--filet);padding:16px 0}
.vg-lp .vg-faq summary{cursor:pointer;list-style:none;font-family:var(--disp);font-weight:600;font-size:21px;color:var(--tx-h);display:flex;justify-content:space-between;gap:14px}
.vg-lp .vg-faq summary::-webkit-details-marker{display:none}
.vg-lp .vg-faq summary::after{content:'+';color:var(--acento);font-size:22px;line-height:1;font-family:var(--sans)}
.vg-lp .vg-faq details[open] summary::after{content:'–'}
.vg-lp .vg-faq-a{margin:12px 0 0;font-size:16px}

/* ============ CTA FINAL Y LEGALES ============ */
.vg-lp .vg-final{padding:70px 0}
.vg-lp .vg-trust{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:24px 0 0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.10em;color:var(--tx-lb)}
.vg-lp .vg-legal{font-size:13px;color:var(--tx-lb);text-align:center;padding:30px 22px;background:var(--paper-alt)}
.vg-lp .vg-legal a{color:var(--acento)}
.vg-lp .vg-legal p+p{margin-top:10px}

/* ============ PAGINA LIMPIA: sin encabezado, sin pie, sin carrito ============
   Este bloque viaja SOLO en esta plantilla, asi que no toca el resto de la
   tienda. Se oculta por CLASE DE GRUPO, nunca por el id de seccion: el id
   lleva un hash del tema y cambia si el tema se vuelve a crear.

   Por que: es una pagina de trafico pago y el cobro lo hace Hotmart. El
   carrito de Shopify es una fuga directa — quien lo toca cae en un checkout
   vacio — y el menu y el buscador son salidas justo donde no queremos dar
   salidas. El aviso legal y el enlace de privacidad viven dentro de la
   landing (bloque 3), no en el pie del tema. */
.shopify-section-group-header-group,
.shopify-section-group-footer-group,
#shopify-section-cart-drawer-section{display:none !important}
/* ============ FOLD (5-oct-2026) ============
   El precio y el boton tienen que entrar en la PRIMERA pantalla de movil:
   quien ya venia convencido por el anuncio no deberia scrollear para comprar.
   Va al FINAL y con prefijo .vg-lp a proposito. Las reglas del tema usan dos
   clases, asi que una regla sin prefijo pierde por especificidad, y una puesta
   antes pierde por orden de aparicion. La primera version fallo por las dos. */
.vg-lp .vg-price--hero{margin:12px 0 2px}
.vg-lp .vg-price--hero .vg-price-now{font-size:clamp(34px,9vw,42px);margin:2px 0 0;font-variant-numeric:proportional-nums;letter-spacing:0}
.vg-lp .vg-price--hero .vg-price-old{font-size:15px}
.vg-lp .vg-hero-save{font-size:13px;color:var(--tx-lb);margin:4px 0 0;text-align:center}
.vg-lp .vg-hero-cta{margin:14px 0 0}
@media(max-width:600px){
  .vg-lp .vg-hero{padding:34px 0 46px}
  .vg-lp .vg-hero .vg-motivo{margin-bottom:14px}
  .vg-lp .vg-hero .vg-kicker{margin-bottom:10px}
  .vg-lp .vg-hero .vg-h1{font-size:32px;margin-bottom:12px}
  .vg-lp .vg-hero .vg-lead{font-size:17px;line-height:1.5;margin-bottom:14px}
}

/* ===== RETOQUES VISUALES (5-oct-2026) ======================================
   Solo movil. En escritorio los dos bloques ya se ven bien y no se tocan.
   1. La cabecera del 4,8: la frase envuelve y el grupo deja de verse centrado.
   2. Las capturas de WhatsApp a 190 px no se leen, y su pie habla de un mouse
      que en un telefono no existe. */
@media(max-width:600px){
  .vg-lp .vg-rating-hd{flex-direction:column;align-items:center;gap:0}
  .vg-lp .vg-rating-txt{max-width:26ch;margin:0 auto;text-align:center}
  .vg-lp .vg-slide--tall{width:72vw;max-width:290px}
  .vg-lp .vg-carousel-hint{display:none}
}

/* ============================================================
   CAPA VISUAL — marcas de expediente y movimiento
   Agregada el 8-oct-2026. Va al final del bloque de CSS.

   Lo que esta capa NO hace, porque el brandbook lo prohibe:
     · ni una sombra       · ni un degradado
     · ni un rojo nuevo: el lacre (--valor) se sigue gastando una sola vez
       por pieza, en el precio. Por eso las manchas son de VINO y van en el
       color del texto o en ambar, nunca en rojo.
   Una salpicadura roja ademas es contenido violento para la revision de
   Meta, y esta pagina es el destino de los anuncios.
   ============================================================ */

/* ---------- LAS MARCAS ----------
   Huellas, cercos de copa y vino derramado, dibujados en SVG dentro del
   bloque de HTML. Se tiñen con `currentColor`, asi que la MISMA marca sirve
   en seccion clara (tinta) y en seccion oscura (ambar) sin duplicar nada.
   Reglas heredadas del fascicolo, que es donde nacieron estas marcas:
     · como mucho DOS por seccion, y nunca dos del mismo tipo
     · nunca encima de un bloque que haya que leer
     · jamas interceptan el clic                                        */
/* `position:relative` ADEMAS de `overflow:hidden`, y las dos cosas juntas:
   un elemento sin posicionar no es el bloque contenedor de sus hijos
   absolutos, asi que no los recorta aunque tenga overflow. `.vg-sec` ya
   venia relativo del sistema; `.vg-hero` NO, y sus dos marcas se escapaban
   hasta el borde del documento: en un telefono de 375 px la pagina se iba a
   440 y aparecia barra horizontal. Se ve midiendo scrollWidth contra
   clientWidth; mirando una captura no, porque Chrome headless en Windows no
   dibuja por debajo de 485 px de ancho y la recorta en vez de desbordarla. */
.vg-lp .vg-sec,.vg-lp .vg-hero{position:relative;overflow:hidden}
.vg-lp .vg-wrap,.vg-lp .vg-wrap--wide{position:relative;z-index:1}

.vg-lp .vg-marca{
  position:absolute;z-index:0;pointer-events:none;display:block;height:auto;
  color:var(--tx-h);opacity:.07
}
/* En seccion oscura la tinta no se ve: la marca pasa al ambar de vela. */
.vg-lp .vg-sec--night .vg-marca{color:var(--acento);opacity:.11}

/* El cerco de copa y el vino derramado van en VINO, no en tinta: en el
   fascicolo esas marcas son fotografias de vino de verdad, y una mancha de
   vino gris no es una mancha de vino, es una sombra —que es justo lo que el
   brandbook no quiere en esta pagina.
   No es el lacre: #A81C22 sigue gastandose una sola vez, en el precio. Este
   es un vino seco y apagado, al 8 %, en una esquina. A esa distancia de un
   numero de 70 px en rojo pleno no le compite nada. */
.vg-lp .vg-marca--vino{color:#7E3A32;opacity:.085}
.vg-lp .vg-sec--night .vg-marca--vino{color:var(--acento);opacity:.11}

.vg-lp .vg-marca--a{top:-34px;right:-46px;width:208px;transform:rotate(13deg)}
.vg-lp .vg-marca--b{bottom:-58px;left:-54px;width:268px;transform:rotate(-9deg)}
.vg-lp .vg-marca--c{top:34%;left:-74px;width:186px;transform:rotate(21deg)}
.vg-lp .vg-marca--d{bottom:-40px;right:-38px;width:176px;transform:rotate(-17deg)}
.vg-lp .vg-marca--e{top:-48px;left:12%;width:150px;transform:rotate(-6deg)}

/* En telefono la pagina es angosta y una marca grande se come el texto. */
@media(max-width:760px){
  .vg-lp .vg-marca{opacity:.05}
  .vg-lp .vg-sec--night .vg-marca{opacity:.08}
  .vg-lp .vg-marca--c,.vg-lp .vg-marca--e{display:none}
  .vg-lp .vg-marca--a{width:140px}
  .vg-lp .vg-marca--b{width:170px}
  .vg-lp .vg-marca--d{width:120px}
}

/* ---------- TARJETAS: se levantan al pasar por encima ----------
   Sin sombra, como manda el brandbook: lo que cambia es el filete, que es
   el unico recurso de separacion del sistema. */
.vg-lp .vg-card,.vg-lp .vg-pain,.vg-lp .vg-ben,.vg-lp .vg-review{
  transition:border-color .22s ease,transform .22s cubic-bezier(.2,.7,.3,1)
}
@media(hover:hover){
  .vg-lp .vg-card:hover,.vg-lp .vg-pain:hover,.vg-lp .vg-ben:hover,.vg-lp .vg-review:hover{
    border-color:var(--acento);transform:translateY(-3px)
  }
}

/* ---------- EL BOTON ----------
   El hundido ya existia. Lo que se agrega es el eco: un filete ambar que
   sale del boton y se apaga, tres veces, cuando el boton entra en pantalla.
   Es un BORDE que escala, no una sombra: el brandbook sigue entero. */
.vg-lp .vg-btn{position:relative;transition:transform .08s ease,border-color .2s ease}
.vg-lp .vg-btn::after{
  content:"";position:absolute;inset:-1px;border-radius:4px;
  border:1px solid var(--acento);opacity:0;pointer-events:none
}

/* ============================================================
   MOVIMIENTO
   Todo lo de abajo pide DOS condiciones: que el visitante no haya pedido
   menos movimiento, y que el JS haya podido correr (pone .vg-anim en el
   contenedor). Sin JS la pagina se ve exactamente como antes — ni un
   elemento queda en opacidad 0, que es la forma clasica de dejar una
   landing en blanco para el 1 % que bloquea scripts.
   ============================================================ */
@media(prefers-reduced-motion:no-preference){

  /* NADA se oculta por estar escrito en el HTML: el estado oculto siempre
     cuelga de una clase que pone el script (.vg-rise o .vg-arm), y el script
     NO se la pone a lo que ya se ve al cargar. Lo que entra en el primer
     pantallazo —titulo, bajada, foto, precio, boton— se dibuja a la primera
     y no espera a nadie. Una landing que esconde su propio titular medio
     segundo pierde el LCP, y lo pierde justo en el telefono lento, que es
     donde cae el trafico de Meta. */

  /* lo que sube al entrar en pantalla */
  .vg-lp.vg-anim .vg-rise{
    opacity:0;transform:translateY(18px);
    transition:opacity .64s ease,transform .64s cubic-bezier(.2,.7,.3,1)
  }
  .vg-lp.vg-anim .vg-rise.vg-in{opacity:1;transform:none}

  /* El filete ambar de cada tarjeta se dibuja de izquierda a derecha.
     Va colgado de `.vg-rise` y no de `.vg-anim` a secas: la regla que lo
     aplana tiene que alcanzar EXACTAMENTE a los mismos elementos que la
     regla que lo devuelve. Sin ese `.vg-rise` delante, un filete dentro de
     una tarjeta que el script no armo —porque ya se veia al cargar— se
     quedaba en scaleX(0) para siempre: la barra ambar desaparecia de la
     pagina y nadie se enteraba, porque desaparecer no da error. */
  .vg-lp.vg-anim .vg-rise .vg-band{
    transform:scaleX(0);transform-origin:left;
    transition:transform .72s cubic-bezier(.2,.7,.3,1) .12s
  }
  .vg-lp.vg-anim .vg-rise.vg-in .vg-band{transform:none}

  /* las tres buste del motivo se sellan una detras de otra */
  .vg-lp.vg-anim .vg-motivo.vg-arm i{
    transform:scale(.25);opacity:0;
    transition:transform .42s cubic-bezier(.2,1.5,.4,1),opacity .34s ease
  }
  .vg-lp.vg-anim .vg-motivo.vg-arm.vg-in i{transform:none;opacity:1}
  .vg-lp.vg-anim .vg-motivo.vg-arm.vg-in i:nth-child(2){transition-delay:.14s}
  .vg-lp.vg-anim .vg-motivo.vg-arm.vg-in i:nth-child(3){transition-delay:.28s}

  /* el precio cae como un sello de lacre: entra grande y se asienta */
  .vg-lp.vg-anim .vg-price-now.vg-arm,.vg-lp.vg-anim .vg-figure.vg-arm{
    opacity:0;transform:scale(1.16);
    transition:transform .36s cubic-bezier(.2,1.45,.35,1),opacity .26s ease
  }
  .vg-lp.vg-anim .vg-price-now.vg-arm.vg-in,.vg-lp.vg-anim .vg-figure.vg-arm.vg-in{opacity:1;transform:none}

  /* el eco del boton: tres veces y se calla */
  .vg-lp.vg-anim .vg-btn.vg-in::after{animation:vg-eco 2.6s ease-out 3}
  @keyframes vg-eco{
    0%{opacity:.8;transform:scale(1)}
    65%{opacity:0;transform:scale(1.13)}
    100%{opacity:0;transform:scale(1.13)}
  }
}

/* ============================================================
   EL HERO — que la oferta entre sin hacer scroll
   Agregado el 8-oct-2026. Va despues de la capa visual.

   EL PROBLEMA, MEDIDO Y NO SUPUESTO
   Midiendo donde cae cada pieza en pantallas reales, el boton quedaba
   FUERA DE VISTA en las dos mas comunes:
     iPhone SE   375x667  -> precio cortado, boton fuera
     Portatil   1366x768  -> foto cortada, precio y boton fuera
     iPhone 14  390x844   -> boton al borde justo
     Monitor   1920x1080  -> entra
   O sea: en un telefono chico y en un portatil normal habia que hacer
   scroll para enterarse de que existe un boton.

   No se toca ni una palabra del copy ni el orden de los elementos: lo
   unico que cambia es COMO se acomodan.
   ============================================================ */

/* ---------- EL CORTE DE LINEA DEL TITULAR ----------
   En media pagina el titular partia dejando «stato.» solo en la tercera
   linea. `text-wrap:balance` reparte las lineas parejas y lo arregla sin
   tocar ni el texto ni el cuerpo de letra. Donde el navegador no lo
   entiende, lo ignora y queda como estaba: no hay nada que pueda romper. */
.vg-lp .vg-hero .vg-h1,
.vg-lp .vg-hero .vg-lead{text-wrap:balance}

/* ---------- ESCRITORIO ANCHO: dos columnas ----------
   La pagina mide 1200 y la columna de contenido 760: sobraban 440 px de
   nada a los lados mientras el boton se caia por abajo. Con la foto a la
   derecha el hero pasa de 1117 px de alto a unos 610, y entra entero en un
   portatil de 768.

   La foto se agarra por `.vg-hero-foto`, una clase que pone el armador, y
   no por `:nth-child(5)`: con nth-child, el dia que alguien meta una linea
   mas en el hero la foto salta de columna y nadie entiende por que. */
@media(min-width:1000px){
  .vg-lp .vg-hero{padding:58px 0 50px}

  .vg-lp .vg-hero .vg-wrap{
    max-width:1140px;
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
    column-gap:56px;
    align-items:start;
    text-align:left
  }
  .vg-lp .vg-hero .vg-wrap > *{grid-column:1}
  /* El selector lleva `.vg-wrap >` delante por una razon y no por adorno:
     la regla de arriba tiene tres clases y manda TODO a la columna 1. Una
     regla de dos clases para la foto pierde y la foto se queda a la
     izquierda, apilada sobre el texto. Con cuatro clases gana. */
  .vg-lp .vg-hero .vg-wrap > .vg-hero-foto{
    grid-column:2;
    grid-row:1 / span 30;   /* mas filas de las que puede haber: ocupa todas */
    align-self:center;
    max-width:none;
    margin:0
  }

  /* El titular en media pagina: 54 px eran seis lineas en 520 px de ancho. */
  .vg-lp .vg-hero .vg-h1{font-size:clamp(34px,3.1vw,46px)}

  /* La foto en 16:9 quedaba 100 px mas baja que la columna de texto y
     dejaba un hueco arriba y abajo. En 4:3 las dos columnas terminan a la
     misma altura. El recorte no se lleva nada: lo que cuenta de esa foto
     —las tres buste y la copa volcada— esta en el centro. */
  .vg-lp .vg-hero .vg-169{aspect-ratio:4/3}

  /* Todo lo que el sistema centraba vuelve a la izquierda, incluido el
     motivo de las tres buste, que centrado sobre texto a la izquierda
     queda flotando en el medio de la nada. */
  .vg-lp .vg-hero .vg-motivo{justify-content:flex-start;margin-left:0;margin-right:0}
  .vg-lp .vg-hero .vg-price,
  .vg-lp .vg-hero .vg-hero-save,
  .vg-lp .vg-hero .vg-btn-note{text-align:left}
  .vg-lp .vg-hero .vg-hero-badges{justify-content:flex-start}
}

/* ---------- PANTALLA BAJA: apretar ----------
   Solo por ALTO, y solo en telefono: un iPhone SE tiene 667 px y de ahi se
   come el navegador unos 95. En 572 px no entran titular, bajada, foto,
   precio y boton sin recortar algo — y lo que se recorta es la foto, que es
   lo unico que el visitante ya vio en el anuncio que lo trajo.
   La condicion va por `max-height` y no por `max-width` porque el problema
   es de alto: un iPhone 14, que es igual de angosto pero tiene 844, no
   necesita nada de esto y se queda con el hero holgado. */
@media(max-height:760px) and (max-width:900px){
  .vg-lp .vg-hero{padding:22px 0 30px}
  .vg-lp .vg-hero .vg-motivo{margin-bottom:10px}
  .vg-lp .vg-hero .vg-kicker{margin-bottom:8px}
  .vg-lp .vg-hero .vg-h1{font-size:28px;line-height:1.12;margin-bottom:10px}
  .vg-lp .vg-hero .vg-lead{font-size:15.5px;line-height:1.45;margin-bottom:12px}

  /* EL REORDEN DEL HERO — y por que hoy ya casi no hace nada.
     Nacio el 5-oct para un problema que ya no existe: no entraban titular,
     bajada, foto, PRECIO y BOTON en 572 px utiles, asi que la foto cedia el
     lugar y caia debajo del boton.
     El 15-oct se sacaron del hero el precio y el boton, asi que los ordenes
     5 a 8 no alcanzan a nada y la secuencia que queda —1,2,3,4,9,10— es la
     misma del HTML. Las reglas quedan por si el hero vuelve a crecer; si no
     vuelve, se pueden borrar sin consecuencia.
     Lo que SI sigue valiendo: en pantallas bajas el hero es flex column, y
     cualquier elemento nuevo que se agregue sin `order` se va al principio. */
  .vg-lp .vg-hero .vg-wrap{display:flex;flex-direction:column}
  .vg-lp .vg-hero .vg-motivo{order:1}
  .vg-lp .vg-hero .vg-kicker{order:2}
  .vg-lp .vg-hero .vg-h1{order:3}
  .vg-lp .vg-hero .vg-lead{order:4}
  .vg-lp .vg-hero .vg-price{order:5}
  .vg-lp .vg-hero .vg-hero-save{order:6}
  .vg-lp .vg-hero .vg-hero-cta{order:7}
  .vg-lp .vg-hero .vg-btn-note{order:8}
  .vg-lp .vg-hero .vg-wrap > .vg-hero-foto{order:9;margin:16px 0 0}
  .vg-lp .vg-hero .vg-hero-badges{order:10}
  /* El nombre cierra. Sin `order` explicito se iria al principio:
     en esta consulta el hero es flex column. */
  .vg-lp .vg-hero .vg-hero-marca{order:11}

  /* La foto pasa de 16:9 a panoramica: ya no tiene que competir por el
     espacio de arriba, pero tampoco conviene que empuje el resto. */
  .vg-lp .vg-hero .vg-169{aspect-ratio:2/1}

  .vg-lp .vg-price--hero{margin:8px 0 0}
  .vg-lp .vg-hero-save{margin-top:3px}
  .vg-lp .vg-hero-cta{margin:10px 0 0}
  .vg-lp .vg-hero .vg-btn{padding:14px 28px 12px}
  .vg-lp .vg-hero-badges{margin-top:16px;gap:12px}
}

/* EL NOMBRE AL PIE DEL HERO — 15-oct-2026
   Cierra el hero y llena el hueco que dejo el precio al salir. En capitales
   espaciadas, que es como el brandbook trata las etiquetas: los titulares
   nunca van en caja alta, un sello de marca si.
   El LACRE se gasta aca. Es el unico de la pagina hasta la seccion de
   oferta, donde vuelve a ser el precio. */
.vg-lp .vg-hero-marca{
  margin:30px 0 0; text-align:center;
  font-family:var(--disp); font-weight:700; font-size:25px; line-height:1.15;
  letter-spacing:.16em; text-transform:uppercase; color:var(--valor);
}
@media (max-width:860px){
  .vg-lp .vg-hero-marca{font-size:19px; letter-spacing:.13em; margin-top:22px}
}

/* ====================================================================
   BARRA FIJA DE COMPRA — 15-oct-2026
   Se enciende cuando el visitante LLEGA al primer boton de la pagina (el
   de la seccion 4, que desde hoy es el primero) y se apaga mientras la
   oferta o el CTA final estan en pantalla: taparle al visitante el boton
   de verdad con una barra es el error clasico de este patron.

   NO ESCONDE NADA DEL CONTENIDO. La barra nace invisible y la enciende el
   script; sin JS no aparece y la pagina conserva sus cuatro botones. Es el
   reverso del fallo de la capa de movimiento, donde lo que quedaba oculto
   sin JS era el copy.

   Reglas de marca que respeta: cero sombras —la separacion es un filete de
   1 px sobre fondo solido—, el ambar es lo unico que se toca, y el lacre no
   aparece (vive en el precio, que esta en la seccion de oferta).
   ==================================================================== */
.vg-lp .vg-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--paper); border-top:1px solid var(--filet);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  transform:translateY(115%); visibility:hidden;
}
.vg-lp .vg-sticky.is-on{transform:none; visibility:visible}
.vg-lp .vg-sticky-in{
  max-width:720px; margin:0 auto; display:flex;
  align-items:center; justify-content:space-between; gap:14px;
}
.vg-lp .vg-sticky-tx{
  font-family:var(--disp); font-size:17px; line-height:1.2; color:var(--tx-h);
}
.vg-lp .vg-sticky .vg-btn{padding:13px 24px 11px; font-size:16px; white-space:nowrap}

/* En el telefono el nombre del caso estorba: gana el boton, a todo el ancho. */
@media (max-width:560px){
  .vg-lp .vg-sticky-tx{display:none}
  .vg-lp .vg-sticky .vg-btn{flex:1 1 auto}
}

/* El deslizamiento solo si el visitante no pidio lo contrario. Sin
   transicion la barra sigue funcionando: aparece y desaparece seca. */
@media (prefers-reduced-motion: no-preference){
  .vg-lp .vg-sticky{transition:transform .28s ease, visibility 0s linear .28s}
  .vg-lp .vg-sticky.is-on{transition:transform .28s ease, visibility 0s}
}


/* ============================================================
   CAPA FOTOGRÁFICA — 1-nov-2026
   Se agrega AL FINAL del bloque de CSS. No toca ni una palabra del
   copy ni el orden de las secciones: lo único que cambia es la piel.

   QUÉ CAMBIA Y POR QUÉ
   1. La página deja de alternar día y noche y pasa a ser UNA SOLA
      noche. El ritmo ya no lo da el salto de claro a oscuro: lo da
      la alternancia de sección CON FOTO y sección lisa.
   2. Nueve fotografías de ambiente debajo de las secciones, cada una
      hundida bajo un velo oscuro. Son el fondo, no la ilustración:
      se leen como forma y luz, nunca como detalle.
   3. Grano de película encima de todo, como en un fotograma.
   4. La máquina de escribir entra como tercera voz, sólo en etiquetas,
      horas y números de caso. El brandbook ya la nombraba y el CSS
      nunca la había usado.

   LO QUE SE RESPETA DEL BRANDBOOK
   Cero sombras. Radio 4 px. El filete sigue siendo el único recurso
   de separación. El lacre se gasta una vez por pieza.

   LO QUE SE ROMPE, A PROPÓSITO Y MEDIDO
   · DEGRADADOS. El velo sobre una fotografía no se puede hacer con
     color plano: o tapa la foto o no deja leer el texto. Es el único
     degradado de la página y siempre va encima de una foto, nunca
     sobre color liso.
   · EL LACRE CAMBIA DE TONO. #A81C22 sobre #140C0F da 2,6:1 — es
     ilegible y lo marcaba el medidor. #D9574A da 4,97:1 sobre la
     página y 4,55:1 sobre la tarjeta: pasa AA en los dos. Sigue
     siendo cera caliente, que bajo una vela es más clara que la
     cera fría del brandbook.
   ============================================================ */

/* ---------- 1. LA PÁGINA ES DE NOCHE ENTERA ---------- */
.vg-lp{
  --paper:#140C0F;        /* noche de vino, un escalón más honda que antes */
  --paper-alt:#1E1418;    /* el escalón de contraste, no un cambio de luz */
  --surface:#221519;      /* la tarjeta: un escalón MÁS CLARA que su fondo */
  --filet:#3A262B;
  --tx-h:#F6EEE4;
  --tx:#CBBAA9;
  --tx-lb:#A89180;        /* subido de #9C8574: 6,45:1 contra 5,6:1 */
  --valor:#D9574A;        /* lacre bajo la vela */
  --maq:'Special Elite','Courier New',monospace;
  background:var(--paper);
  color:var(--tx);
}
.vg-lp .vg-sec{background:var(--paper)}
.vg-lp .vg-sec--alt{background:var(--paper-alt)}
/* Va DESPUÉS de las dos de arriba: misma especificidad, gana la última. */
.vg-lp .vg-sec--night{
  --paper:#140C0F; --paper-alt:#140C0F; --surface:#221519; --filet:#3A262B;
  --tx-h:#F6EEE4; --tx:#CBBAA9; --tx-lb:#A89180;
  background:#140C0F; color:#CBBAA9;
}

/* ---------- 2. LAS FOTOGRAFÍAS DE AMBIENTE ----------
   La foto y el velo son dos pseudo-elementos de la propia sección, con
   z-index 0 los dos: pintan en orden de aparición, así que el velo cae
   siempre encima de la foto. El contenido ya venía en z-index 1 desde
   la capa visual de octubre (`.vg-wrap`), así que no hay que tocarlo.

   ⚠️ NO llevan z-index NEGATIVO. Un hijo en z-index -1 pinta por detrás
   del fondo de su propio padre, y la sección tiene fondo: la foto
   desaparecía entera y el síntoma era «no se ve ninguna foto», que no
   da error en ningún lado. */
.vg-lp [data-amb]{position:relative;overflow:hidden}
.vg-lp [data-amb]::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--amb);
  background-size:cover;background-position:var(--amb-pos,50% 50%);
  opacity:var(--amb-op,.48);
  /* Sin esto la página entera sale marrón leche: una foto cálida bajo un
     velo cálido promedia a chocolate, que es lo contrario de una noche.
     Se le baja la luz a la foto ANTES del velo, no después. */
  filter:brightness(.74) contrast(1.14) saturate(.86);
}
/* El velo son tres capas y el orden importa: la primera que se escribe es
   la que queda ARRIBA.
     1. el charco de vela — lo único cálido de la pantalla
     2. la viñeta — la luz se acaba en los bordes, como en una mesa real
     3. el velo de arriba abajo — el que de verdad deja leer el texto */
.vg-lp [data-amb]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(660px 500px at var(--amb-luz,74% 22%), rgba(201,138,60,.20), rgba(201,138,60,0) 62%),
    radial-gradient(132% 112% at 50% 38%, rgba(0,0,0,0) 38%, rgba(7,3,4,.74) 100%),
    linear-gradient(180deg,
      rgba(14,8,10,.96) 0%,
      rgba(14,8,10,.70) 22%,
      rgba(14,8,10,.74) 62%,
      rgba(14,8,10,.98) 100%);
}
/* Donde hay fotografía, las marcas de expediente sobran: la textura ya
   la pone la foto y dos texturas encimadas son suciedad, no carácter. */
.vg-lp [data-amb] .vg-marca{display:none}

/* Las nueve. El orden es el de la noche, no el de la página. */
.vg-lp .vg-amb--hero{--amb:url("img/amb_hero_169.jpg");--amb-op:.42;--amb-luz:68% 30%}
.vg-lp .vg-amb--dolori{--amb:url("img/amb_dolori_169.jpg");--amb-op:.34;--amb-luz:26% 30%}
/* Ésta y la de «sguardo» van más apagadas a propósito: las dos secciones
   traen su propia fotografía encima —el mecanismo y el carrusel— y dos
   imágenes compitiendo en la misma pantalla no dejan ganar a ninguna. */
.vg-lp .vg-amb--soluzione{--amb:url("img/amb_soluzione_169.jpg");--amb-op:.26}
.vg-lp .vg-amb--serata{--amb:url("img/amb_serata_169.jpg");--amb-op:.44;--amb-luz:50% 18%}
.vg-lp .vg-amb--ricevi{--amb:url("img/amb_ricevi_169.jpg");--amb-op:.38}
.vg-lp .vg-amb--sguardo{--amb:url("img/amb_sguardo_169.jpg");--amb-op:.24}
.vg-lp .vg-amb--offerta{--amb:url("img/amb_offerta_169.jpg");--amb-op:.42;--amb-luz:50% 20%}
.vg-lp .vg-amb--garanzia{--amb:url("img/amb_garanzia_169.jpg");--amb-op:.34}
.vg-lp .vg-amb--finale{--amb:url("img/amb_finale_169.jpg");--amb-op:.46;--amb-luz:50% 26%}

/* En teléfono la foto se recorta mucho y pierde el sentido; además es
   peso que viaja por datos móviles. Se queda, pero más apagada. */
@media(max-width:600px){
  .vg-lp [data-amb]::before{opacity:calc(var(--amb-op,.48) * .72)}
}

/* ---------- 3. EL GRANO ----------
   Un fotograma de película tiene grano y una página web no. Es lo que
   más barato convierte un color plano en una imagen.
   Va en `body` y no en `.vg-lp` porque la plantilla tiene DOS `.vg-lp`
   —uno por bloque de Custom Liquid— y en `.vg-lp` el grano se pintaría
   dos veces, al doble de opacidad. El bloque sólo viaja en esta
   plantilla, así que no alcanza al resto de la tienda. */
body::after{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- 4. LAS SUPERFICIES SOBRE LA FOTO ----------
   Una tarjeta opaca sobre una fotografía la corta en seco. Un 8 % de
   transparencia deja pasar la luz de la vela por debajo y la tarjeta
   deja de estar pegada encima: está APOYADA. No es vidrio esmerilado
   —no hay desenfoque— es papel sobre una mesa oscura. */
.vg-lp .vg-card,.vg-lp .vg-pain,.vg-lp .vg-ben,
.vg-lp .vg-review,.vg-lp .vg-offer-card,.vg-lp .vg-guarantee{
  background:rgba(34,21,25,.92);
}
.vg-lp [data-amb] .vg-card,.vg-lp [data-amb] .vg-pain,
.vg-lp [data-amb] .vg-ben,.vg-lp [data-amb] .vg-review,
.vg-lp [data-amb] .vg-offer-card,.vg-lp [data-amb] .vg-guarantee{
  background:rgba(26,15,18,.88);
}

/* ---------- 5. LA MÁQUINA DE ESCRIBIR ----------
   Tercera familia, y sólo para lo que en un expediente real saldría
   de una Olivetti: el número de caso, las horas, las etiquetas y los
   sellos. Nunca un titular, nunca un párrafo. */
.vg-lp .vg-kicker{
  font-family:var(--maq);font-weight:400;font-size:13px;line-height:1.5;
  letter-spacing:.17em;text-transform:uppercase;color:var(--acento);
  margin:0 0 16px;
}
.vg-lp .vg-card-tag,.vg-lp .vg-step-course,.vg-lp .vg-seal,
.vg-lp .vg-hero-badge,.vg-lp .vg-chip,.vg-lp .vg-trust{
  font-family:var(--maq);font-weight:400;letter-spacing:.14em;
}
/* 13 px es el piso: por debajo de ahí, en un teléfono a pleno sol, una
   etiqueta no existe. Lo marcó el inspector sobre la página viva, donde
   veintiocho bloques estaban en 11. */
.vg-lp .vg-card-tag{font-size:13px;color:var(--acento)}
.vg-lp .vg-step-course{font-size:13px}
.vg-lp .vg-seal{font-size:13px;letter-spacing:.16em}
.vg-lp .vg-hero-badge{font-size:13px;color:var(--tx-lb)}
.vg-lp .vg-trust{font-size:13px}
.vg-lp .vg-step-hour,.vg-lp .vg-ben-num{
  font-family:var(--maq);font-weight:400;letter-spacing:.08em;
}
.vg-lp .vg-step-hour{font-size:17px;color:var(--acento)}
.vg-lp .vg-ben-num{font-size:15px;color:var(--acento);opacity:.8}
.vg-lp .vg-verified{font-family:var(--maq);font-size:13px;letter-spacing:.05em}
.vg-lp .vg-avatar{font-family:var(--maq);font-weight:400;font-size:13px;letter-spacing:.04em}

/* ---------- 6. LA ESCALA ----------
   El medidor marcaba «la primera pantalla no tiene nada que mande»:
   el tipo más grande era 44,6 px, o sea 3,1 vw, contra una mediana de
   8,4 vw en las páginas que puntúan alto. El copy no se toca, así que
   lo único que puede crecer es el cuerpo de letra. */
.vg-lp .vg-h1{font-size:clamp(36px,6.2vw,62px);line-height:1.05;letter-spacing:-.018em}
.vg-lp .vg-h2{font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.015em;margin:0 0 18px}
.vg-lp .vg-h3{font-size:23px;line-height:1.26}
.vg-lp .vg-lead{font-size:19px;line-height:1.62;max-width:64ch}
.vg-lp .vg-center .vg-lead,.vg-lp .vg-lead.vg-center{margin-left:auto;margin-right:auto}
.vg-lp .vg-step-num{font-size:27px}

/* ---------- 7. EL HERO ----------
   La foto de las tres buste es la MISMA del anuncio que trajo al
   visitante, así que no se cambia: lo que cambia es lo que tiene
   detrás. La gente de la mesa va al fondo, hundida, y la foto del
   producto sigue siendo lo único nítido de la pantalla. */
.vg-lp .vg-hero{padding:88px 0 72px}
.vg-lp .vg-hero-foto img{border-radius:3px}

/* La mesa del fondo sale de la penumbra. El inspector decía que la
   primera pantalla «no tiene nada que mande»: con la foto al 42 % era
   textura, no fotografía. Al 60 % se ve la gente, y la primera pantalla
   pasa a ser una imagen con texto encima, que es lo que hace la
   referencia.
   Lo que lo hace posible es que el velo deja de ser parejo: en
   escritorio el texto vive en la mitad izquierda, así que ahí el velo
   aprieta al 95 % y en la derecha afloja al 55 %, justo donde está la
   gente. Un velo parejo que dejara leer a la izquierda mataría la foto
   entera. */
.vg-lp .vg-amb--hero::before{opacity:.60;filter:brightness(.80) contrast(1.16) saturate(.88)}
@media(min-width:1000px){
  .vg-lp .vg-amb--hero::after{
    background:
      radial-gradient(680px 520px at 70% 34%, rgba(201,138,60,.16), rgba(201,138,60,0) 60%),
      linear-gradient(90deg,
        rgba(14,8,10,.95) 0%,
        rgba(14,8,10,.90) 34%,
        rgba(14,8,10,.58) 62%,
        rgba(14,8,10,.72) 100%),
      linear-gradient(180deg,
        rgba(14,8,10,.80) 0%,
        rgba(14,8,10,.18) 26%,
        rgba(14,8,10,.30) 70%,
        rgba(14,8,10,.92) 100%);
  }
}
.vg-lp .vg-hero-badges{gap:14px 22px;margin-top:30px}
.vg-lp .vg-hero-marca{color:var(--valor);letter-spacing:.2em}

@media(min-width:1000px){
  .vg-lp .vg-hero{padding:74px 0 66px}
  /* El titular en media página: 62 px en 540 px de ancho son siete
     líneas. 54 es el techo donde sigue entrando en tres. */
  .vg-lp .vg-hero .vg-h1{font-size:clamp(38px,3.8vw,54px)}
}

/* ---------- 8. LOS TRES PASOS ----------
   La línea de tiempo es lo más cerca que la página está de un
   expediente. Con la hora en máquina de escribir y la regla ámbar
   más marcada, se lee como una ficha horaria y no como una tabla. */
@media(min-width:860px){
  .vg-lp .vg-steps{border-top-width:3px}
}

/* ---------- 9. ARREGLOS MEDIDOS ----------
   Los tres salieron del inspector sobre la página viva, no de una
   opinión. */

/* a) El pie legal corría a 202 caracteres por línea en escritorio,
      que es el doble de lo que un ojo sigue sin perder el renglón. */
.vg-lp .vg-legal{background:#100A0C;padding:38px 22px 44px}
/* 54ch y no 74: en esta familia un `ch` mide 0,69 em, así que 74ch son
   100 caracteres de verdad. El tope se mide contando, no estimando. */
.vg-lp .vg-legal p{max-width:54ch;margin-left:auto;margin-right:auto}
.vg-lp .vg-legal p+p{margin-top:12px}

/* b) «Si apre la Busta 2» quedaba TAPADO al 100 % en 390 px: la marca
      de expediente de esa sección caía justo encima. En las secciones
      con foto ya no existe; en las demás se manda al fondo de verdad. */
.vg-lp .vg-marca{z-index:0}
.vg-lp .vg-wrap,.vg-lp .vg-wrap--wide{position:relative;z-index:1}

/* c) Nada que haya que leer por debajo de 12,5 px. Las etiquetas
      estaban en 11 y en un teléfono a pleno sol no existen. */
.vg-lp .vg-sub,.vg-lp .vg-btn-note,.vg-lp .vg-price-note,
.vg-lp .vg-carousel-hint,.vg-lp .vg-rating-txt{font-size:14.5px}
.vg-lp .vg-legal{font-size:14px;line-height:1.7}

/* ---------- 10. EL FILETE SOBRE FONDO OSCURO ----------
   Un borde de 1 px a pleno color sobre negro es una cicatriz. Sobre
   las imágenes el filete se va del todo: la foto ya tiene su propio
   borde, que es donde se acaba la luz. */
.vg-lp .vg-card-img,.vg-lp .vg-slide img{border-color:rgba(201,138,60,.16)}
.vg-lp .vg-hero-foto img{border:0}
.vg-lp .vg-slide img{background:#100A0C}

/* ---------- 11. EL BOTÓN ----------
   Sigue siendo ámbar plano con el canto hundido. Sobre una noche
   entera puede crecer: es lo único encendido de la pantalla. */
.vg-lp .vg-btn{font-size:17.5px;padding:19px 40px 17px;letter-spacing:.01em}
.vg-lp .vg-sticky .vg-btn{padding:14px 26px 12px;font-size:16px}
.vg-lp .vg-sticky{background:rgba(16,9,11,.96);border-top-color:rgba(201,138,60,.22)}

/* ---------- 12. EL PRECIO ----------
   La cifra es lo más grande de su pantalla y ahora cae sobre una foto.
   Crece y se asienta sobre la tarjeta, que es su fondo real. */
.vg-lp .vg-price-now{font-size:clamp(56px,9.5vw,82px)}
.vg-lp .vg-save--big{font-size:19.5px;padding:12px 24px}
.vg-lp .vg-stack-tot{font-size:24px}

/* ---------- 13. LAS RESEÑAS Y EL 4,8 ---------- */
.vg-lp .vg-rating-num{font-family:var(--disp);font-weight:700;font-size:46px;color:var(--acento)}
.vg-lp .vg-stars{font-size:15px;letter-spacing:.1em;margin:0 0 10px}

/* ---------- 14. LA FAQ ---------- */
.vg-lp .vg-faq{border-top-width:3px}
.vg-lp .vg-faq summary{font-size:22px;padding:2px 0}
.vg-lp .vg-faq details{padding:18px 0}

/* ---------- 15. LOS DOS CARRUSELES ----------
   Son veinte rectángulos de papel blanco sobre una página que es de
   noche: sin tocarlos saltan de la pantalla como un fluorescente y
   rompen lo único que esta página tiene, que es una sola luz.
   No se oscurecen para que se vean menos —hay que poder leerlos— se
   bajan al punto donde parecen papel iluminado por una vela y no una
   captura de pantalla pegada encima. */
.vg-lp .vg-45{filter:brightness(.95) saturate(.94)}
.vg-lp .vg-916{filter:brightness(.88) saturate(.9)}
/* Al pasar por encima el carrusel se frena; que también se encienda. */
@media(hover:hover){
  .vg-lp .vg-carousel:hover .vg-45,
  .vg-lp .vg-carousel:hover .vg-916{filter:none}
}
.vg-lp .vg-45,.vg-lp .vg-916{transition:filter .3s ease}

/* ---------- 16. LA MEDIDA DEL RENGLÓN ----------
   El inspector contó 202 caracteres por línea en escritorio, que es el
   doble de lo que un ojo sigue sin perder el renglón al volver. */
.vg-lp .vg-faq-a,
.vg-lp .vg-guarantee .vg-lead,
.vg-lp .vg-guarantee .vg-card-body{max-width:56ch}
/* La nota de debajo del botón de los tres pasos corría a 143 caracteres:
   vive en la columna ancha, que es de 1080 px, y no tenía tope. */
.vg-lp .vg-btn-note{max-width:62ch;margin-left:auto;margin-right:auto}

/* ---------- 17. EL AIRE DEL HERO ----------
   En dos columnas la de texto termina en el nombre del producto y la
   foto queda centrada: debajo del nombre sobraba media pantalla de
   nada antes de la sección siguiente. */
@media(min-width:1000px){
  .vg-lp .vg-hero{padding:74px 0 52px}
  .vg-lp .vg-hero .vg-hero-marca{margin-top:26px}
}
/* ============================================================
   PAGINAS LEGALES — 1-nov-2026
   Tres documentos al lado del index: note-legali, condizioni-di-vendita
   e informativa-privacy. Se pegan al final de `landing.css` porque las
   tres paginas cargan EL MISMO CSS que la landing: asi heredan la noche,
   el grano y la maquina de escribir sin duplicar nada.

   LA DIFERENCIA CON LA LANDING
   Una landing se mira; una legal se LEE de corrido. Entonces: una sola
   columna, medida corta, interlineado alto, y el cuerpo en el tono alto
   de texto (no en el de cuerpo de tarjeta), porque son 2.000 palabras
   seguidas sobre fondo oscuro.

   CONTRASTE MEDIDO EN EL NAVEGADOR, no calculado de cabeza
     cuerpo --tx-h sobre la pagina ..... 16,77:1
     cuerpo dentro de la ficha ......... 15,36:1
     cuerpo dentro de la nota de lacre . 15,63:1
     enlaces --acento .................. 6,60:1
     fecha y pie --tx-lb ............... 6,45:1
   El ambar pasa de sobra como texto en la noche. En la pagina DIA de
   Enquete no pasaba y hubo que inventar un token; aca no hace falta.

   Y LA MEDIDA SE CUENTA, NO SE ESTIMA
   A 624 px de columna el renglon da 63-76 caracteres, contados
   partiendo el parrafo en lineas con un Range en el navegador. La
   cuenta por ancho medio de caracter daba 80 y me habria hecho
   estrechar la columna de mas: es la tercera vez que estimar la
   medida miente.
   ============================================================ */

.vg-lp .vg-doc{
  max-width:624px;margin:0 auto;padding:44px 20px 80px;
  color:var(--tx-h);
}
.vg-lp .vg-doc p.vg-doc-back{font-size:15px;margin:0 0 30px}
.vg-lp .vg-doc a{color:var(--acento);text-decoration:underline;
                 text-underline-offset:3px;text-decoration-thickness:1px}
.vg-lp .vg-doc a:hover{color:var(--tx-h)}

.vg-lp .vg-doc .vg-kicker{margin:0 0 14px}

.vg-lp .vg-doc-h1{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(32px,5vw,44px);line-height:1.08;letter-spacing:-.015em;
  color:var(--tx-h);margin:0 0 8px;
}
.vg-lp .vg-doc p.vg-doc-date{font-family:var(--maq);font-size:13px;letter-spacing:.06em;
                             color:var(--tx-lb);margin:0 0 38px}

.vg-lp .vg-doc-h2{
  font-family:var(--disp);font-weight:600;font-size:25px;line-height:1.2;
  color:var(--tx-h);margin:40px 0 12px;
  padding-top:18px;border-top:1px solid var(--filet);
}
.vg-lp .vg-doc-h3{
  font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.01em;
  color:var(--tx-h);margin:30px 0 10px;
}

.vg-lp .vg-doc p{margin:0 0 15px;font-size:17px;line-height:1.75;color:var(--tx-h)}
.vg-lp .vg-doc-ul{margin:0 0 15px;padding-left:22px}
.vg-lp .vg-doc-ul li{margin:0 0 9px;font-size:17px;line-height:1.75;color:var(--tx-h)}
.vg-lp .vg-doc strong{font-weight:600;color:#FFF9F0}

/* El bloque de datos (domicilio, modulo de recesso): ficha sobre la mesa.
   El filete sigue siendo el unico recurso de separacion del brandbook. */
.vg-lp .vg-doc p.vg-doc-bloc{
  background:var(--surface);border:1px solid var(--filet);border-radius:4px;
  padding:20px 22px;margin:0 0 18px;
  font-size:16px;line-height:1.7;
}

/* La unica nota que tiene que leerse SI O SI: la del derecho de recesso.
   Se gasta aqui el lacre, una vez en la pieza, como manda el brandbook. */
.vg-lp .vg-doc p.vg-doc-note{
  background:var(--paper-alt);border:1px solid var(--filet);
  border-left:3px solid var(--valor);border-radius:4px;
  padding:18px 20px;margin:0 0 18px;
}
.vg-lp .vg-doc-note p:last-child{margin:0}

.vg-lp .vg-doc p.vg-doc-nav{
  margin:52px 0 0;padding:20px 0 0;border-top:1px solid var(--filet);
  font-size:15px;color:var(--tx-lb);
}

@media(max-width:600px){
  .vg-lp .vg-doc{padding:32px 18px 64px}
  .vg-lp .vg-doc-h2{font-size:22px;margin:34px 0 10px}
  .vg-lp .vg-doc p,.vg-lp .vg-doc-ul li{font-size:16px}
}