/* Base compartida por las 5 variantes. Cada variante cambia colores con estas variables y agrega su propio estilo. */
:root{--morado:#4a2fc0;--morado-osc:#1a0f4d;--magenta:#c2187a;--rojo:#e3173e;--naranja:#ff7a1a;--dorado:#ffc83d;--verde:#25d366;
  --fondo:#f6f3ff;--tarjeta:#fff;--texto:#1d1640;--suave:#5d5873;--borde:#ddd5f5;--acento:var(--rojo)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font:18px/1.55 Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.12;margin:0 0 12px}
.envoltura{max-width:620px;margin:0 auto;padding:0 16px}
.seccion{padding:40px 0}
.logo{display:block;width:96px;height:auto;filter:drop-shadow(0 4px 12px #0007)}
.top .logo,.f-centro .logo{margin:0 auto}
.marca{font-weight:900;letter-spacing:.02em;font-size:22px;line-height:1}
.marca small{display:block;font-size:10px;letter-spacing:.3em;font-weight:600;opacity:.8;margin-top:3px}

/* barra superior con cuenta regresiva del sorteo */
.barra{background:var(--morado-osc);color:#fff;text-align:center;font-size:14px;font-weight:600;padding:8px 12px;position:sticky;top:0;z-index:10}
.barra b{color:var(--dorado)}

/* botones */
.boton{display:block;width:100%;font:inherit;font-weight:800;font-size:20px;padding:17px 16px;border:0;border-radius:16px;background:var(--acento);color:#fff;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 6px 0 #0002;transition:transform .1s}
.boton:active{transform:translateY(3px);box-shadow:0 3px 0 #0002}
.boton small{display:block;font-size:13px;font-weight:600;opacity:.9}
.boton.wa{background:var(--verde)}
.boton.sec{background:var(--morado)}
.boton.borde{background:transparent;color:var(--morado);border:2px solid var(--morado);box-shadow:none}
.boton:disabled{opacity:.6}
.pulso{animation:pulso 1.8s infinite}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* formulario */
.form,.cupon,.opinion{color:var(--texto)}
.form{background:var(--tarjeta);border-radius:22px;padding:22px 18px;box-shadow:0 10px 40px #4a2fc022}
.form fieldset{border:0;margin:0 0 22px;padding:0}
.form legend,.form .t{font-weight:800;margin-bottom:10px;display:block;font-size:19px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0}
.chips span{display:block;border:2px solid var(--borde);border-radius:999px;padding:10px 16px;cursor:pointer;background:#fff;font-weight:600;font-size:16px}
.chips input:checked+span{background:var(--morado);border-color:var(--morado);color:#fff}
.chips input:focus-visible+span{outline:3px solid var(--dorado);outline-offset:2px}
.form input[type=text],.form input[type=tel],.form input[type=email],.form select{width:100%;font:inherit;padding:13px 14px;border:2px solid var(--borde);border-radius:14px;background:#fff;margin-bottom:14px}
.form input:focus,.form select:focus{outline:3px solid var(--dorado);border-color:var(--morado)}
.caja-sorteo{background:linear-gradient(135deg,#fff6d6,#ffe9f2);border:2px dashed var(--dorado);border-radius:18px;padding:16px;margin:6px 0 18px}
.caja-sorteo h3{font-size:19px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:8px 0 16px;color:var(--suave)}
.check input{width:22px;height:22px;flex:none;margin-top:1px}
.error{color:var(--rojo);font-weight:600;font-size:15px;min-height:1em}
.oculto{position:absolute;left:-9999px}
/* modo quiz: una pregunta a la vez */
.pasos .paso{display:none}.pasos .paso.activo{display:block;animation:entra .3s}
@keyframes entra{from{opacity:0;transform:translateX(20px)}to{opacity:1}}
.avance{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:var(--morado);margin-bottom:6px}
.atras{font:inherit;font-size:14px;background:none;border:0;color:var(--suave);cursor:pointer;padding:4px 0}
.progreso{height:10px;background:var(--borde);border-radius:9px;margin-bottom:18px;overflow:hidden}
.progreso i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--morado),var(--magenta));transition:width .3s}

/* resultado: cupón */
.cupon{scroll-margin-top:50px;display:none;background:var(--tarjeta);border-radius:22px;padding:26px 18px;text-align:center;border:3px dashed var(--dorado);box-shadow:0 10px 40px #4a2fc022}
.cupon.ver{display:block;animation:entra .4s}
.codigo{font:900 36px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:var(--morado);background:var(--fondo);border-radius:14px;padding:18px;margin:12px 0}
.cupon ol{text-align:left;padding-left:22px}
.cupon .boton{margin-top:12px}
.folio{display:inline-block;background:var(--morado-osc);color:var(--dorado);font-weight:800;border-radius:999px;padding:6px 16px;margin:8px 0}

/* opiniones */
.opiniones{display:grid;gap:12px}
.opinion{background:var(--tarjeta);border-radius:18px;padding:16px 18px;box-shadow:0 4px 18px #4a2fc014}
.opinion .est{color:#f5a700;letter-spacing:2px}
.opinion p{margin:4px 0;font-weight:600}
.opinion small{color:var(--suave)}

/* WhatsApp Guadalajara */
.gdl{background:linear-gradient(135deg,#0b3d2c,#128c4a);color:#fff;border-radius:22px;padding:22px 18px}
.gdl h3{font-size:22px}

/* redes */
.redes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.redes a{display:block;border-radius:16px;padding:14px 6px;text-align:center;color:#fff;font-weight:800;text-decoration:none;font-size:15px}
.redes a small{display:block;font-weight:600;font-size:12px;opacity:.9}
.redes .tt{background:#111}.redes .yt{background:#ff0033}.redes .fb{background:#1877f2}

/* pie */
footer{font-size:13px;color:var(--suave);padding:30px 0 50px}
footer details{margin-top:10px}
footer summary{cursor:pointer;font-weight:700}

/* "Lo que tu doctor te diría" */
.doc-titulo{font-size:28px;font-weight:900}
.doc-titulo em{font-style:normal;color:var(--acento)}
.doc-sub{margin:0 0 12px;opacity:.85}
.carrusel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;padding-bottom:10px;margin:0 -16px;padding-left:16px;padding-right:16px}
.carrusel figure{flex:0 0 62%;max-width:240px;margin:0;scroll-snap-align:start}
.carrusel video{width:100%;aspect-ratio:9/16;border-radius:18px;background:#000;object-fit:cover;box-shadow:0 8px 24px #0003}
.carrusel figcaption{font-weight:700;font-size:15px;line-height:1.3;margin-top:8px}
.esperar{background:var(--tarjeta);color:var(--texto);border-radius:22px;padding:20px 18px;margin-top:18px;box-shadow:0 10px 40px #4a2fc022}
.esperar h3{font-size:22px}.esperar h3 small{display:block;font-size:14px;color:var(--acento)}
.meses{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.meses li{background:var(--fondo);border-radius:14px;padding:12px 8px;font-size:13px;line-height:1.3;text-align:center}
.meses b{display:block;font-size:18px;color:var(--morado)}