:root{
  --lienzo-1:#FDEEF3; --lienzo-2:#EFE4F6;
  --papel:#FFFBFD;
  --tinta:#39264A; --tinta-suave:#7A6488;
  --rosa:#DE4C7C; --rosa-luz:#FBE4EC;
  --verde:#2C9E9B; --verde-luz:#DFF3F2;
  --solape:#8B57AE; --solape-luz:#EFE3F6;
  --dorado:#E8A317;
  --borde:#EBDFF0;
  --r-l:26px; --r-m:18px; --r-s:12px;
  --sombra:0 10px 30px -18px rgba(57,38,74,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  font-family:"Karla",system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:linear-gradient(165deg,var(--lienzo-1) 0%,var(--lienzo-2) 100%) fixed;
  line-height:1.5;
}
#app{max-width:560px;margin:0 auto;padding:22px 18px calc(40px + env(safe-area-inset-bottom))}

h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;margin:0;line-height:1.15}
h1{font-size:1.9rem;letter-spacing:-.01em}
h2{font-size:1.35rem}
.eyebrow{font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-suave)}
.mono{font-family:"DM Mono",ui-monospace,monospace}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.marca{display:flex;align-items:center;gap:9px}
.marca .glifo{width:30px;height:18px;flex:none}
.marca span{font-family:"Fraunces",serif;font-size:1.05rem}
.nav{display:flex;gap:4px;background:rgba(255,255,255,.6);padding:4px;border-radius:999px}
.nav button{border:0;background:none;font:inherit;font-size:.85rem;color:var(--tinta-suave);
  padding:6px 13px;border-radius:999px;cursor:pointer}
.nav button[aria-current="true"]{background:var(--papel);color:var(--tinta);box-shadow:var(--sombra)}

.card{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-l);
  padding:20px;box-shadow:var(--sombra);margin-bottom:14px}
.card.tight{padding:16px}

.hero-login{text-align:center;padding:34px 22px}
.hero-login p{color:var(--tinta-suave);margin:10px 0 26px}
.quien{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quien button{font:inherit;cursor:pointer;padding:20px 10px;border-radius:var(--r-m);
  background:var(--papel);border:2px solid var(--borde);display:grid;gap:8px;justify-items:center;
  transition:transform .15s ease,border-color .15s ease}
.quien button:hover{transform:translateY(-2px)}
.quien button[data-c="rose"][aria-pressed="true"]{border-color:var(--rosa);background:var(--rosa-luz)}
.quien button[data-c="teal"][aria-pressed="true"]{border-color:var(--verde);background:var(--verde-luz)}
.punto{width:34px;height:34px;border-radius:50%}
.punto.rose{background:var(--rosa)} .punto.teal{background:var(--verde)}

.q{margin-bottom:22px}
.q h3{font-size:1.08rem;margin-bottom:4px}
.q .pista{font-size:.78rem;color:var(--tinta-suave);margin-bottom:11px;display:block}
.opts{display:grid;gap:9px}
.opt{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:var(--r-m);
  border:1.5px solid var(--borde);background:var(--papel);cursor:pointer;font-size:.95rem;
  transition:border-color .12s ease,background .12s ease}
.opt input{position:absolute;opacity:0;pointer-events:none}
.marca-op{width:20px;height:20px;flex:none;border:1.5px solid #D6C6DE;background:#fff}
.opt[data-t="single"] .marca-op{border-radius:50%}
.opt[data-t="multi"] .marca-op{border-radius:6px}
.opt:has(input:checked){border-color:var(--solape);background:var(--solape-luz)}
.opt:has(input:checked) .marca-op{background:var(--solape);border-color:var(--solape);
  box-shadow:inset 0 0 0 3.5px var(--papel)}
.opt:has(input:focus-visible){outline:2px solid var(--solape);outline-offset:2px}

.btn{width:100%;font:inherit;font-weight:700;padding:15px;border:0;border-radius:var(--r-m);
  background:var(--tinta);color:#fff;cursor:pointer;font-size:1rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.suave{background:var(--solape-luz);color:var(--solape)}
.link{background:none;border:0;font:inherit;color:var(--tinta-suave);text-decoration:underline;
  cursor:pointer;padding:0}

.venn{display:block;width:100%;max-width:330px;margin:6px auto 2px}
.venn .c{mix-blend-mode:multiply;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.venn .num{font-family:"Fraunces",serif;font-size:34px;font-weight:600;fill:var(--tinta);
  text-anchor:middle;dominant-baseline:central}
.leyenda{display:flex;justify-content:center;gap:18px;font-size:.82rem;color:var(--tinta-suave)}
.leyenda i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}

.par{border-top:1px solid var(--borde);padding:16px 0}
.par:first-of-type{border-top:0}
.par h3{font-size:1rem;margin-bottom:10px}
.resp{display:flex;gap:9px;align-items:flex-start;margin-bottom:7px;font-size:.92rem}
.quien-tag{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;
  border-radius:999px;flex:none;margin-top:2px;font-family:"DM Mono",monospace}
.tag-rose{background:var(--rosa-luz);color:var(--rosa)}
.tag-teal{background:var(--verde-luz);color:var(--verde)}
.tag-dos{background:var(--solape-luz);color:var(--solape)}
.coincide{background:var(--solape-luz);border-radius:var(--r-s);padding:10px 12px}

.espera{text-align:center;padding:38px 20px}
.latido{width:58px;height:58px;margin:0 auto 18px;animation:latir 2.4s ease-in-out infinite}
@keyframes latir{0%,100%{transform:scale(1)}18%{transform:scale(1.13)}36%{transform:scale(1)}54%{transform:scale(1.08)}}

.dia{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-m);padding:13px 15px;margin-bottom:9px}
.dia .pct{font-family:"Fraunces",serif;font-size:1.25rem;color:var(--solape);min-width:56px}
.dia small{display:block;color:var(--tinta-suave);font-size:.76rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-bottom:14px}
.stats div{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r-m);padding:14px 8px}
.stats b{display:block;font-family:"Fraunces",serif;font-size:1.5rem;font-weight:600}
.stats small{color:var(--tinta-suave);font-size:.72rem}

.aviso{background:var(--rosa-luz);color:var(--rosa);border-radius:var(--r-m);padding:12px 14px;
  font-size:.9rem;margin-bottom:12px}
.vacio{text-align:center;color:var(--tinta-suave);padding:34px 16px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- koalas y detalles de enamorados ---------- */
.koala{width:42px;height:41px;display:block}
.koala.mediano{width:62px;height:60px}
.glifo{display:flex;align-items:center}
.glifo .koala{width:26px;height:25px}
.glifo .koala:last-child{margin-left:-11px}
.corazon{width:20px;height:18px;display:block}
.corazon.mini{width:15px;height:14px}

.pareja{display:flex;align-items:flex-end;justify-content:center;gap:2px;margin-bottom:14px}
.pareja .corazon{margin:0 -4px 14px;animation:palpita 2.2s ease-in-out infinite}
.pareja.grande .koala{width:74px;height:72px}
.pareja.grande .corazon{width:24px;height:22px}
.inclina-d{transform:rotate(11deg)}
.inclina-i{transform:rotate(-11deg)}
@keyframes palpita{0%,100%{transform:scale(1)}25%{transform:scale(1.18)}50%{transform:scale(1)}}

.revelado{position:relative}
.flota{position:absolute;bottom:34px;opacity:0;animation:subir 4.6s ease-in infinite}
.flota .corazon{width:14px;height:13px}
.f1{left:24%;animation-delay:.2s}
.f2{left:50%;animation-delay:1.6s}
.f3{left:74%;animation-delay:3s}
@keyframes subir{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  18%{opacity:.75}
  100%{opacity:0;transform:translateY(-72px) scale(1.05)}
}
.pie-venn{font-size:11px;fill:#7A6488;text-anchor:middle;letter-spacing:.14em;
  font-family:"DM Mono",monospace}
.piropo{text-align:center;font-family:"Fraunces",serif;font-style:italic;font-size:1.08rem;
  color:var(--solape);margin:14px 0 2px}
.sub-centro{text-align:center;color:var(--tinta-suave);margin:6px 0 0;font-size:.92rem}
.cuenta{font-size:.8rem;color:var(--tinta-suave);margin-bottom:18px}
.nota-pie{text-align:center;font-size:.8rem;color:var(--tinta-suave);margin-top:10px}
.vacio .pareja{margin-bottom:10px}

.quien button{padding:16px 10px}
.hero-login .eyebrow{display:block;margin-top:22px}
.espera .latido{width:auto;height:auto}
.espera .koala{margin:0 auto}

.pie-sesion{text-align:center;margin-top:20px;font-size:.82rem;color:var(--tinta-suave)}
.pie-sesion strong{color:var(--tinta);font-weight:700}
.pie-sesion .link{color:var(--solape)}

/* ---------- pasos, comodín y conocimiento ---------- */
.pasos{margin:0 0 14px;font-size:.85rem;color:var(--solape)}
.intro-paso{margin:0 0 18px;color:var(--tinta-suave);font-size:.92rem}
.botonera{display:flex;gap:10px}
.botonera .btn{flex:1}
.botonera .btn.suave{flex:0 0 34%}
textarea{width:100%;font:inherit;padding:12px 14px;border-radius:var(--r-m);resize:vertical;
  border:1.5px solid var(--borde);background:var(--papel);color:var(--tinta)}
textarea:focus{outline:none;border-color:var(--solape)}
.sep{border:0;border-top:1px solid var(--borde);margin:20px 0}
.sub-izq{color:var(--tinta-suave);font-size:.88rem;margin:0 0 10px}

.conocer{text-align:center}
.conocer-num{font-family:"Fraunces",serif;font-size:2.4rem;color:var(--solape);margin:6px 0 16px}
.barras{display:grid;gap:12px;text-align:left}
.barras>div{display:grid;grid-template-columns:1fr 90px 42px;align-items:center;gap:10px;font-size:.85rem}
.barras span{color:var(--tinta-suave)}
.barra{height:8px;border-radius:999px;background:var(--borde);overflow:hidden}
.barra i{display:block;height:100%;border-radius:999px}
.barras b{font-family:"DM Mono",monospace;font-size:.85rem;text-align:right}

.comodin h2{font-family:"Fraunces",serif;font-style:italic;font-size:1.15rem}
.sello{display:inline-block;margin-top:8px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;font-family:"DM Mono",monospace}
.sello.ok{background:var(--verde-luz);color:var(--verde)}
.sello.medio{background:#FDF0DC;color:#B57A12}
.sello.no{background:var(--rosa-luz);color:var(--rosa)}
.pie-sesion .link:disabled{color:var(--verde);text-decoration:none;cursor:default}