@font-face{font-family:Jost;font-weight:400;font-display:swap;src:url(/fuentes/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:500;font-display:swap;src:url(/fuentes/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:600;font-display:swap;src:url(/fuentes/jost-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Playfair;font-weight:600;font-display:swap;src:url(/fuentes/playfair-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Playfair;font-weight:500;font-style:italic;font-display:swap;src:url(/fuentes/playfair-display-latin-500-italic.woff2) format("woff2")}

/* Paleta del logo (Cerebro §5) */
:root{
  --rosa:#E3ADCE; --lila:#B3A3D0; --lila-claro:#DAC8E2;
  --ciruela:#5B3A5E; --ciruela-osc:#3E2740; --dorado:#C9A15A;
  --crema:#FBF6F8; --blanco:#FFFFFF; --linea:#EADCE6; --suave:#6E5A73; --error:#A0344F;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--crema);color:var(--ciruela-osc);font-family:Jost,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:Playfair,Georgia,serif;font-weight:600;line-height:1.15;color:var(--ciruela-osc)}
em{font-family:Playfair,Georgia,serif;font-style:italic;font-weight:500;color:var(--ciruela)}
button{font:inherit}
.wrap{max-width:520px;margin:0 auto;padding:0 16px 40px}
header{display:flex;align-items:center;justify-content:center;padding:18px 0 6px}
.logo{font-family:Playfair,Georgia,serif;font-size:21px;color:var(--ciruela);letter-spacing:.1em}
.logo span{color:var(--lila)}
.pantalla{display:none;animation:entra .3s ease}
.pantalla.activa{display:block}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pantalla{animation:none}}

.hero{margin-top:12px;border-radius:24px;padding:32px 22px 26px;background:linear-gradient(150deg,var(--rosa),var(--lila-claro) 55%,var(--lila));text-align:center}
.etiqueta{display:inline-block;background:rgba(255,255,255,.75);color:var(--ciruela);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.hero h1{font-size:32px;margin:16px 0 12px}
.hero p{max-width:400px;margin:0 auto}
.botones{display:grid;gap:10px;margin-top:22px}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:15px 18px;font-weight:600;font-size:16px;cursor:pointer;text-align:center;text-decoration:none;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn-1{background:var(--ciruela);color:#fff}
.btn-2{background:rgba(255,255,255,.85);color:var(--ciruela);border:1.5px solid var(--ciruela)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.link:focus-visible{outline:3px solid var(--lila);outline-offset:2px}
.confianza{display:grid;gap:8px;margin:18px 4px 0;list-style:none;font-size:14px;color:var(--suave)}
.confianza li::before{content:"✓ ";color:var(--ciruela);font-weight:600}

.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:20px;padding:24px 20px;margin-top:16px}
.paso{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lila)}
.tarjeta h2{font-size:25px;margin:6px 0 10px}
.tarjeta p{color:var(--suave)}
.check{display:flex;gap:12px;align-items:flex-start;margin:18px 0 6px;padding:14px;border-radius:12px;background:var(--crema);cursor:pointer;color:var(--ciruela-osc)}
.check input{width:22px;height:22px;margin-top:1px;accent-color:var(--ciruela);flex:none}
.enlaces{font-size:14px;margin-top:10px}
.enlaces a,.link{color:var(--ciruela);text-decoration:underline;background:none;border:0;cursor:pointer;padding:0}
details{margin-top:10px;font-size:14px;color:var(--suave)}
details summary{cursor:pointer;color:var(--ciruela)}
details p{margin-top:8px}

.camara{position:relative;margin-top:16px;border-radius:20px;overflow:hidden;background:var(--ciruela-osc);aspect-ratio:3/4}
.camara video,.camara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camara video{transform:scaleX(-1)}
.marco{position:absolute;inset:12% 16%;border:2px dashed rgba(255,255,255,.85);border-radius:50%/42%;pointer-events:none}
.barrido{position:absolute;left:16%;right:16%;height:2px;background:var(--rosa);box-shadow:0 0 12px var(--rosa);top:12%;display:none}
.camara.analizando .barrido{display:block;animation:barre 1.4s ease-in-out infinite alternate}
@keyframes barre{to{top:88%}}
.camara .aviso{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;color:#fff;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.consejos{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:12px;font-size:13px;color:var(--suave)}
.oculto{display:none !important}

.pregunta{margin-top:22px}
.pregunta legend{font-weight:600;font-size:16px;margin-bottom:10px}
.pregunta legend b{color:var(--dorado)}
fieldset{border:0}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{position:relative}
.opciones input{position:absolute;opacity:0;pointer-events:none}
.opciones span{display:inline-block;padding:10px 14px;border:1.5px solid var(--linea);border-radius:999px;font-size:15px;cursor:pointer;background:#fff;transition:all .15s}
.opciones input:checked+span{background:var(--ciruela);border-color:var(--ciruela);color:#fff}
.opciones input:focus-visible+span{outline:3px solid var(--lila);outline-offset:2px}

.campo{margin-top:14px}
.campo label{display:block;font-weight:500;font-size:15px;margin-bottom:6px}
.campo input,.campo select{width:100%;padding:13px 14px;border:1.5px solid var(--linea);border-radius:12px;font:16px Jost,system-ui,sans-serif;color:var(--ciruela-osc);background:#fff}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--lila)}
.campo small{display:block;color:var(--suave);font-size:13px;margin-top:4px}
.error{color:var(--error);font-size:14px;margin-top:12px;min-height:1em}
.ts{margin-top:12px;display:flex;justify-content:center}

.cargando{text-align:center;padding:48px 16px}
.cargando .punto{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lila);margin:0 4px;animation:late 1s infinite alternate}
.cargando .punto:nth-child(2){animation-delay:.2s}.cargando .punto:nth-child(3){animation-delay:.4s}
@keyframes late{to{opacity:.2;transform:scale(.7)}}

.resultado{margin-top:16px;border-radius:24px;padding:28px 22px;background:linear-gradient(160deg,var(--rosa),var(--lila-claro));text-align:center}
.resultado .paso{color:var(--ciruela)}
.resultado h2{font-size:30px;margin:8px 0 12px}
.vimos{margin-top:14px;font-size:15px;background:rgba(255,255,255,.6);border-radius:12px;padding:10px 14px}
.rutina{text-align:left;background:#fff;border-radius:16px;padding:18px;margin-top:18px}
.rutina h3{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ciruela);margin-bottom:10px}
.rutina ol{list-style:none;display:grid;gap:10px}
.rutina li{display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--linea);padding-top:10px}
.rutina li:first-child{border-top:0;padding-top:0}
.rutina small{flex:none;width:100px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--lila);text-transform:uppercase}
.codigo{margin-top:16px;padding:14px;border-radius:14px;background:#fff;border:1.5px dashed var(--dorado);font-size:15px}
.codigo strong{display:block;font-size:24px;letter-spacing:.12em;color:var(--ciruela-osc);margin-top:2px}
.nota{font-size:12px;color:var(--suave);margin-top:18px;text-align:center}
footer{text-align:center;font-size:12px;color:var(--suave);margin-top:28px;letter-spacing:.04em}
footer a{color:var(--suave)}