/* Vacía tu vaso (2026-10-19) — la guía paso a paso de la respiración gratuita en grabacion.html.
   Mobile first, negro y crema, letra grande y sin cursivas (reglas de Diego). El dorado solo
   sobre negro; sobre crema, texto negro. Una pantalla a la vez: js/grabacion-guia.js. */
body.es-guia { background: #0B0B0A; }
body.es-guia .sg-ficha,
body.es-guia .sg-partes,
body.es-guia .sg-biblio,
body.es-guia .sg-escena__fondo { display: none; }
body.es-guia .sg-escena { padding-top: 0; }

.vaso-agua { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.vaso-agua__svg, .vaso-agua__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.vg { --c: #F2EDE4; --c2: #D9D2C5; --n: #0B0B0A; --n2: #1A1815; --l: #3A3631; --o: #D9B65A; --ok: #8FD1B4;
  padding: .5rem var(--g-gutter) 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; max-width: 1100px; margin: 0 auto; }

/* Avance: el hilo de pasos vive en css/hilo.css (js/lib/hilo.js). */

/* Pantalla */
.vg-pant { display: flex; flex-direction: column; gap: 1.25rem; }
.vg-pant--vaso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; justify-items: stretch; }
.vg-pant--vaso .vg-vaso { width: min(58vw, 240px); justify-self: center; }
.vg-pant__txt { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.vg-k { margin: 0; color: var(--o); font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vg-t { margin: 0; font: 700 clamp(2.4rem, 9vw, 4rem)/1.04 'Playfair Display', Georgia, serif; color: var(--c); text-wrap: balance; outline: none; }
.vg-t--num { display: flex; align-items: center; gap: .3em; font-size: clamp(4.5rem, 20vw, 7.5rem); font-variant-numeric: tabular-nums; }
.vg-flecha { color: var(--o); font-size: .6em; }
.vg-lead { margin: 0; font-size: clamp(1.3rem, 4.6vw, 1.6rem); line-height: 1.4; color: var(--c); font-weight: 500; }
.vg-lead b { font-weight: 700; }
.vg-gota { margin: 0; font-size: 1.3rem; color: var(--c2); }
.vg-gota b { color: var(--c); font-size: 1.5rem; }

.vg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.vg-lista li { font-size: 1.25rem; line-height: 1.4; color: var(--c2); padding-left: 1.5rem; position: relative; }
.vg-lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--o); }
.vg-lista b { color: var(--c); }

/* Seguridad: tarjeta crema, texto negro */
.vg-antes { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 0 .4rem; border-top: 1px solid var(--l); }
.vg-antes__t { margin: 0; font: 700 clamp(1.9rem, 3vw + 1rem, 2.6rem)/1.1 'Playfair Display', Georgia, serif; color: var(--c); }
.vg-antes__l { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--c); }
.vg-antes__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .75rem; }
.vg-antes__lista li { display: grid; justify-items: center; align-content: center; gap: .7rem; padding: 1.1rem .8rem; border: 1px solid rgba(217, 182, 90, .45); border-radius: 18px; text-align: center; font-size: 1.125rem; font-weight: 700; line-height: 1.25; color: var(--c); text-wrap: balance; }
.vg-antes__ico { width: 40px; height: 40px; fill: none; stroke: var(--o); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vg-antes__nota { margin: 0; display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; border: 1px dashed rgba(217, 182, 90, .6); border-radius: 18px; font-size: 1.125rem; line-height: 1.4; color: var(--c2); }
.vg-antes__nota b { color: var(--c); }
.vg-antes__nota .vg-antes__ico { flex: none; width: 32px; height: 32px; }
.vg-antes__m { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--c2); }
.vg-antes__m b { color: var(--c); }
@media (prefers-reduced-motion: no-preference) { .vg-antes__lista li { animation: vg-antes-in 600ms cubic-bezier(.23, 1, .32, 1) backwards; animation-delay: calc(var(--i) * 90ms); } }
@keyframes vg-antes-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 600px) { .vg-antes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .vg-antes__lista li { padding: .9rem .5rem; font-size: 1.0625rem; } }
.vg-seg { background: var(--c); color: var(--n); border-radius: 22px; padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.vg-seg__t { margin: 0; font: 700 1.6rem/1.15 'Playfair Display', Georgia, serif; }
.vg-seg p { margin: 0; font-size: 1.125rem; line-height: 1.45; }
.vg-contra { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vg-contra li { font-size: 1.0625rem; font-weight: 700; border: 2px solid var(--n); border-radius: 999px; padding: .35rem .85rem; }

.vg-check { display: flex; gap: .85rem; align-items: flex-start; font-size: 1.2rem; line-height: 1.35; color: var(--c); cursor: pointer; }
.vg-check input { width: 1.6rem; height: 1.6rem; flex: none; margin: .1rem 0 0; accent-color: var(--o); }

/* Botones */
.vg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 1.75rem; border-radius: 999px; border: 2px solid var(--o);
  background: var(--o); color: var(--n); font: 700 1.2rem/1.1 'DM Sans', system-ui, sans-serif; cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .2s var(--g-ease), opacity .2s var(--g-ease); }
.vg-btn:hover { transform: translateY(-1px); }
.vg-btn:active { transform: scale(.98); }
.vg-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.vg-btn--sec { background: transparent; color: var(--c); border-color: var(--c); }
.vg-link { background: none; border: 0; color: var(--c2); font: 600 1.125rem 'DM Sans', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 48px; padding: 0 .5rem; }
.vg-btn:focus-visible, .vg-link:focus-visible, .vg-n:focus-visible, .vg-carta:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }

/* Escala 0–10 */
.vg-escala { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.vg-n { min-height: 56px; border-radius: 14px; border: 2px solid var(--l); background: var(--n2); color: var(--c); font: 700 1.4rem/1 'DM Sans', system-ui, sans-serif; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: transform .15s var(--g-ease), background .15s var(--g-ease); }
.vg-n:hover { border-color: var(--c2); }
.vg-n.is-on { background: var(--c); border-color: var(--c); color: var(--n); transform: scale(1.04); }
.vg-escala__l { display: flex; justify-content: space-between; gap: 1rem; color: var(--c2); font-size: 1rem; font-weight: 500; margin-top: -.5rem; }

.vg-campo { display: flex; flex-direction: column; gap: .5rem; font-size: 1.2rem; font-weight: 700; color: var(--c); }
.vg-campo input { font: 500 1.2rem 'DM Sans', system-ui, sans-serif; padding: 1rem; border-radius: 14px; border: 2px solid var(--l); background: var(--n2); color: var(--c); min-height: 56px; }
.vg-campo input::placeholder { color: #8C857A; }
.vg-campo input:focus { outline: none; border-color: var(--c); }

/* Paso 1: la evocación. El botón espera candado hasta que termina. */
.vg-evoca { border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--l); }
.vg-evoca video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vg-candado { margin: -.5rem 0 0; font-size: 1.125rem; font-weight: 600; color: var(--c2); }
.vg-candado::before { content: "🔒︎ "; }
.vg-candado[hidden] { display: none; }

/* Paso 4: debajo del reproductor */
.vg-pant--corta { gap: .75rem; }
.vg-sigue { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 0 .5rem; }
.vg-sigue .vg-candado { margin: 0; }

/* Resultado y lo que sigue */
.vg-sig { display: flex; flex-direction: column; gap: 1.25rem; border-top: 1px solid var(--l); padding-top: 1.75rem; }
.vg-sig__t { margin: 0; font: 700 clamp(1.8rem, 6vw, 2.4rem)/1.1 'Playfair Display', Georgia, serif; color: var(--c); text-wrap: balance; }
.vg-cartas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.vg-carta { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; border-radius: 22px; border: 2px solid var(--l); background: var(--n2); color: var(--c); text-decoration: none;
  transition: transform .2s var(--g-ease); }
.vg-carta:hover { transform: translateY(-2px); }
.vg-carta__k { font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--o); }
.vg-carta__t { font: 700 1.7rem/1.1 'Playfair Display', Georgia, serif; }
.vg-carta__s { font-size: 1.15rem; line-height: 1.4; color: var(--c2); }
.vg-carta__b { margin-top: .4rem; align-self: flex-start; font-weight: 700; font-size: 1.15rem; border-bottom: 2px solid currentColor; padding-bottom: .15rem; }
.vg-carta--crema { background: var(--c); border-color: var(--c); color: var(--n); }
.vg-carta--crema .vg-carta__k, .vg-carta--crema .vg-carta__s { color: var(--n); }
/* Tu siguiente paso: dos pasos numerados, el de ahora resaltado */
.vg-ruta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.vg-ruta__p { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem; border-radius: 22px; border: 2px solid var(--l); background: var(--n2); }
.vg-ruta__p.is-ahora { border-color: var(--o); }
.vg-ruta__n { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; border: 2px solid var(--l); color: var(--c2); }
.vg-ruta__p.is-ahora .vg-ruta__n { background: var(--o); border-color: var(--o); color: var(--n); }
.vg-ruta__p.is-hecho .vg-ruta__n { background: var(--l); border-color: var(--l); color: var(--c); }
.vg-ruta__c { display: flex; flex-direction: column; gap: .7rem; min-width: 0; align-items: flex-start; }
.vg-ruta__t { margin: .35rem 0 0; font: 700 1.7rem/1.1 'Playfair Display', Georgia, serif; color: var(--c); }
.vg-ruta__s { margin: 0; font-size: 1.2rem; line-height: 1.45; color: var(--c2); }
.vg-mas { border-top: 1px solid var(--l); padding-top: 1rem; }
.vg-mas summary { cursor: pointer; font-size: 1.2rem; font-weight: 700; color: var(--c); min-height: 48px; display: flex; align-items: center; }
.vg-mas[open] summary { margin-bottom: 1rem; }
.vg-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.vg-gracias { margin: 0; font-size: 1.2rem; color: var(--ok); font-weight: 700; }

/* Ventana del testimonio */
.vg-modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 5, 4, .78); display: grid; place-items: end center;
  padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
.vg-modal__caja { width: min(560px, 100%); background: #F2EDE4; color: #0B0B0A; border-radius: 24px; padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
.vg-modal__t { margin: 0; font: 700 clamp(1.8rem, 6vw, 2.3rem)/1.1 'Playfair Display', Georgia, serif; outline: none; text-wrap: balance; }
.vg-modal__s { margin: 0; font-size: 1.15rem; line-height: 1.45; }
.vg-modal textarea { font: 500 1.15rem/1.45 'DM Sans', system-ui, sans-serif; padding: 1rem; border-radius: 14px; border: 2px solid #0B0B0A; background: #fff; color: #0B0B0A; resize: vertical; min-height: 9rem; }
.vg-modal textarea:focus { outline: 3px solid #0B0B0A; outline-offset: 2px; }
.vg-modal .vg-check { color: #0B0B0A; font-size: 1.125rem; }
.vg-campo--claro { color: #0B0B0A; font-size: 1.125rem; }
.vg-campo--claro input { background: #fff; color: #0B0B0A; border-color: #0B0B0A; }
.vg-campo--claro input:focus { border-color: #0B0B0A; outline: 3px solid #0B0B0A; outline-offset: 2px; }
.vg-modal .vg-check input { accent-color: #0B0B0A; }
.vg-modal .vg-btn { background: #0B0B0A; border-color: #0B0B0A; color: #F2EDE4; }
.vg-modal .vg-link { color: #0B0B0A; }
.vg-modal__acc { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.vg-error { margin: 0; color: #9B2C1F; font-weight: 700; font-size: 1.05rem; min-height: 0; }
.vg-error:empty { display: none; }

/* Sin sesión: la puerta de la respiración */
.sg-estado__lead { color: var(--g-cream); font-size: 1.4rem !important; line-height: 1.4; font-weight: 500; }

@media (min-width: 720px) {
  .vg-escala { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .vg-cartas { grid-template-columns: 1fr 1fr; }
  .vg-carta--crema { grid-column: 1 / -1; }
  .vg-modal { place-items: center; }
}
@media (min-width: 900px) {
  .vg-pant--vaso { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: 3rem; }
  .vg-pant--vaso .vg-vaso { width: 100%; }
  .vg-pant { max-width: 760px; }
  .vg-pant--vaso { max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .vg-pant, .vg-sig { animation: vgEntra .32s var(--g-ease) both; }
}
@keyframes vgEntra { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.es-guia .sg-estado__s, .sg-estado__lead ~ .sg-estado__s { font-size: 1rem; }
/* En la guía la escena va debajo del texto: sin el margen negativo que la sube bajo la cabecera. */
body.es-guia .sg-escena { margin-top: 0; padding-top: 1rem; scroll-margin-top: 0; }
body.es-guia .sg-escena::after { display: none; }
/* Sin video todavía: el aviso se lee grande. */
body.es-guia .sg-espera p { font-size: 1.125rem; line-height: 1.5; color: var(--c, #F2EDE4); }
/* Entrada de la guía: el botón de Google, grande. */
.sg-estado:has(.hilo) .sg-btn { min-height: 58px; padding: 0 2rem; font-size: 1.125rem; font-weight: 700; }

/* Al terminar: Sumergirte a precio especial (Diego, 2026-10-27). Crema sobre negro, texto negro. */
.vg-of { background: var(--c); color: var(--n); border-radius: 26px; padding: 1.8rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.vg-of[hidden] { display: none; }
.vg-of__k { margin: 0; font-size: 1.1rem; font-weight: 700; }
.vg-of__t { margin: 0; font: 700 clamp(2rem, 7vw, 2.8rem)/1.05 'Playfair Display', Georgia, serif; text-wrap: balance; }
.vg-of__s { margin: 0; font-size: 1.2rem; line-height: 1.45; }
.vg-of__p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.vg-of__p s { font-size: 1.3rem; opacity: .6; }
.vg-of__p b { font: 700 clamp(2.4rem, 9vw, 3.2rem)/1 'Playfair Display', Georgia, serif; }
.vg-of__r { margin: 0; font-size: 1.2rem; }
.vg-of__g { margin: 0; font-size: 1.1rem; }
.vg-of .vg-btn { background: var(--n); border-color: var(--n); color: var(--c); width: 100%; }
.vg-of .vg-link { color: var(--n); font-size: 1.15rem; font-weight: 700; }
.vg-of a:not(.vg-btn):not(.vg-link) { color: inherit; }

/* Ventana de la oferta al terminar (Diego, 2026-10-27): los tres niveles con su precio
   especial, con las MISMAS tarjetas de /ofertas («la oferta que está publicada está
   mejor hecha»). Las reglas .of-* son copia de css/style-ofertas.css, acotadas a la
   ventana; si cambian allá, cambiarlas aquí. */
.vg-ofm { --negro: #000; --carbon: #12110f; --linea: #2e2a24; --crema: #f2ede4; --gris: #c9c1b4; --oro: #c9a84c; --oro-claro: #e3c988; --ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .88); display: grid; place-items: end center; }
.vg-ofm__caja { position: relative; width: min(1180px, 100%); max-height: 100dvh; overflow-y: auto; background: var(--negro); color: var(--crema);
  font: 400 1.1875rem/1.5 'Jost', system-ui, sans-serif; border: 1px solid var(--linea); border-radius: 26px 26px 0 0;
  padding: 1.75rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.vg-ofm__x { position: absolute; top: .75rem; right: .75rem; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--crema); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.vg-ofm__k { margin: 0; color: var(--oro-claro); font-weight: 600; font-size: 1.125rem; padding-right: 3rem; }
.vg-ofm__t { margin: 0; font: 600 clamp(2.125rem, 8vw, 3rem)/1.05 'Bodoni Moda', serif; outline: none; text-wrap: balance; }
.vg-ofm__s { margin: 0; font-size: 1.25rem; }
.vg-ofm__s b { color: var(--oro-claro); }
.vg-ofm__ah { margin: 0; color: var(--oro-claro); font-weight: 650; font-size: 1.25rem; }
.vg-ofm__g { margin: 0; color: var(--gris); font-size: 1.125rem; }
.vg-ofm__acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.vg-ofm__a { appearance: none; background: none; border: 0; color: var(--oro-claro); font: 500 1.1875rem 'Jost', sans-serif; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 48px; padding: 0 .25rem; }
.vg-ofm__err { margin: 0; font-size: 1.125rem; }
.vg-ofm__err a { color: inherit; }
.vg-ofm__x:focus-visible, .vg-ofm__a:focus-visible, .vg-ofm .of-b:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }

.vg-ofm .of-progs { display: grid; gap: 1.5rem; margin-top: .75rem; }
.vg-ofm .of { border: 1px solid var(--linea); border-radius: 18px; background: linear-gradient(180deg, #16140f 0%, var(--carbon) 60%);
  padding: 1.75rem 1.375rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.vg-ofm .of--top { border: 2px solid var(--oro); position: relative; padding-top: 2rem; background: linear-gradient(180deg, #1d1912 0%, #120f0a 70%); box-shadow: 0 0 0 1px rgba(201,168,76,.25), 0 0 60px -20px rgba(201,168,76,.45); }
.vg-ofm .of-tag { position: absolute; top: -.95rem; left: 1.25rem; margin: 0; background: var(--oro); color: var(--negro); font-weight: 650; padding: .3rem .9rem; border-radius: 999px; font-size: 1.0625rem; }
.vg-ofm .of-k { margin: 0; color: var(--oro-claro); font-weight: 600; font-size: 1.125rem; }
.vg-ofm .of-n { font: 600 clamp(1.875rem, 7.5vw, 2.375rem)/1.08 'Bodoni Moda', serif; margin: 0; }
.vg-ofm .of-q { list-style: none; margin: .25rem 0; padding: 0; display: grid; gap: .5rem; font-size: 1.3125rem; }
.vg-ofm .of-q li, .vg-ofm .of-l li { display: flex; align-items: center; gap: .75rem; }
.vg-ofm .of-q svg { width: 1.75rem; height: 1.75rem; flex: none; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-ofm .of-q b { color: var(--oro); font-size: 1.625rem; }
.vg-ofm .of-x { margin: .75rem 0 0; color: var(--gris); font-size: 1.25rem; }
.vg-ofm .of-p { margin: 0; font: 700 clamp(2.5rem, 11vw, 3.25rem)/1 'Jost', sans-serif; letter-spacing: -.01em; }
.vg-ofm .of-l { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .375rem; font-size: 1.25rem; }
.vg-ofm .of-l svg { width: 1.625rem; height: 1.625rem; flex: none; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-ofm .of-b { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: .75rem 1.75rem; margin-top: .75rem;
  border: 2px solid var(--oro); border-radius: 999px; background: var(--oro); color: var(--negro); font: 650 1.25rem/1.2 'Jost', sans-serif; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
.vg-ofm .of-b:active { transform: scale(.97); }
.vg-ofm .of-b:disabled { opacity: .55; cursor: default; }
.vg-ofm .tachado { text-decoration: none; position: relative; display: inline-block; }
.vg-ofm .tachado::after { content: ''; position: absolute; left: -2%; right: -2%; top: 52%; height: 2px; background: var(--crema); }
.vg-ofm .pta { --pta-f: transparent; --pta-s: rgba(201,168,76,.32); --pta-o: rgba(201,168,76,.32); width: 18px; height: 27px; flex: none; overflow: visible; }
.vg-ofm .pta.on { --pta-f: rgba(201,168,76,.22); --pta-s: var(--oro); --pta-o: var(--oro-claro); }
.vg-ofm .of-prof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; margin: .75rem 0 .5rem; }
.vg-ofm .of-g { display: grid; justify-items: center; gap: .5rem; padding: .75rem .25rem .625rem; border-radius: 12px; border: 1px dashed rgba(201,168,76,.25); }
.vg-ofm .of-g.on { border: 1px solid rgba(201,168,76,.5); background: rgba(201,168,76,.07); }
.vg-ofm .of-g > div { display: flex; gap: .375rem; }
.vg-ofm .of-g span { font-size: 1.125rem; font-weight: 600; color: var(--gris); }
.vg-ofm .of-g.on span { color: var(--crema); }
@media (min-width: 1000px) {
  .vg-ofm { place-items: center; padding: 1.5rem; }
  .vg-ofm__caja { border-radius: 26px; padding: 2.25rem; max-height: calc(100dvh - 3rem); }
  .vg-ofm .of-progs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; margin-top: 1.5rem; }
  .vg-ofm .of-b { margin-top: auto; }
  .vg-ofm .of-l + .of-b { margin-top: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .vg-ofm { animation: vg-ofm-in 260ms cubic-bezier(.23, 1, .32, 1); }
  .vg-ofm__caja { animation: vg-ofm-sube 300ms cubic-bezier(.23, 1, .32, 1); }
}
@keyframes vg-ofm-in { from { opacity: 0; } }
@keyframes vg-ofm-sube { from { transform: translateY(24px); opacity: 0; } }
/* El regalo: una gota cerrada que cae al tocarla y abre el 30 % */
.vg-ofm__regalo { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: 2.5rem 0 2rem; }
.vg-ofm__regalo .vg-ofm__k { padding-right: 0; }
.vg-ofm__gota { appearance: none; background: radial-gradient(circle, rgba(201,168,76,.18), transparent 70%); border: 0; border-radius: 50%; width: 11rem; height: 11rem; display: grid; place-items: center; cursor: pointer; }
.vg-ofm__gota .pta { width: 64px; height: 96px; filter: drop-shadow(0 0 18px rgba(227,201,136,.5)); }
.vg-ofm__gota:focus-visible { outline: 2px solid var(--crema); outline-offset: 4px; }
.vg-ofm__t--regalo b { color: var(--oro-claro); font-family: 'Jost', sans-serif; font-weight: 700; }
.vg-ofm .of-p { white-space: nowrap; }
@media (min-width: 1000px) { .vg-ofm .of-p { font-size: clamp(2.25rem, 3vw, 3rem); } }
@media (prefers-reduced-motion: no-preference) {
  .vg-ofm__gota .pta { animation: vg-gota-late 2.4s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 50% 70%; }
  .vg-ofm__regalo.is-abierto .pta { animation: vg-gota-cae 800ms cubic-bezier(.55, 0, .9, .4) forwards; }
  .vg-ofm__regalo.is-abierto > :not(.vg-ofm__gota) { transition: opacity 300ms; opacity: 0; }
  .vg-ofm__oferta:not([hidden]) { animation: vg-ofm-sube 400ms cubic-bezier(.23, 1, .32, 1); }
}
@keyframes vg-gota-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes vg-gota-cae { 30% { transform: translateY(-10px) scale(1.05); } 100% { transform: translateY(160px) scale(.6); opacity: 0; } }
.vg-ofm__oferta { display: flex; flex-direction: column; gap: 1rem; }
.vg-ofm__oferta[hidden] { display: none; }
/* Palabras rápidas del testimonio (2026-10-27): contestar en un toque. */
.vg-rapidas { display: flex; flex-wrap: wrap; gap: .5rem; }
.vg-rapida { min-height: 48px; padding: .6rem 1rem; border: 2px solid #0B0B0A; border-radius: 999px; background: #fff; color: #0B0B0A; font: 700 1.0625rem/1.2 'DM Sans', system-ui, sans-serif; cursor: pointer; transition: background-color 160ms ease-out, transform 160ms cubic-bezier(.23, 1, .32, 1); }
.vg-rapida:active { transform: scale(.97); }
.vg-rapida:focus-visible { outline: 3px solid #0B0B0A; outline-offset: 2px; }
.vg-rapida[aria-pressed="true"] { background: #0B0B0A; color: #F2EDE4; }
.vg-modal textarea#vg-texto { min-height: 5.5rem; }
/* Después: el botón se enciende en cuanto hay número. */
.vg-btn.is-listo { animation: vg-listo 1.6s cubic-bezier(.23, 1, .32, 1) 1; }
@keyframes vg-listo { 0% { transform: scale(1); } 30% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vg-btn.is-listo { animation: none; } .vg-rapida { transition: none; } }

/* El regalo anunciado en cada paso (2026-10-27). */
.vg-regalo { margin: 0; padding: .8rem 1rem; border-left: 2px solid #C9A84C; color: #E3C988; font-size: 1.1875rem; font-weight: 700; line-height: 1.35; }