/* Estilo de las páginas de Chu (redescubrite.com/confirmado, #chu-conf): fondo vino oscuro, rosa, Sora + DM Sans.
   Sin tarjetas blancas: las preguntas van sobre el fondo oscuro. Colores elegidos para contraste WCAG AA
   (texto >= 4.5:1, bordes de controles >= 3:1) incluso sobre el punto más claro del fondo (ver tests). */
@font-face{font-family:"DM Sans";src:url(/static/fonts/dmsans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Sora;src:url(/static/fonts/sora.woff2) format("woff2");font-weight:700 800;font-display:swap}
:root{--bg:#0e0b0d;--ink:#fff;--muted:#b9adb3;--pink:#ec3d7f;--pink-btn:#d92f6f;--pink-btn-h:#c22561;--pink-soft:#ff6fa3;
  --borde:rgb(255 111 163 / .7);--campo:rgb(255 255 255 / .06);--sel:rgb(236 61 127 / .18);--placeholder:#b9adb3;
  color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--bg);color:var(--ink);font:400 16px/1.5 "DM Sans",system-ui,sans-serif;
  background-image:radial-gradient(70% 1100px at 100% 0%,rgb(160 28 84 / .34),transparent 70%),
    radial-gradient(60% 1000px at 0% 55%,rgb(110 20 52 / .36),transparent 72%),
    radial-gradient(60% 900px at 100% 100%,rgb(140 24 70 / .26),transparent 70%);background-attachment:fixed}
.wrap{max-width:592px;margin:0 auto;padding:0 16px 56px}
h1,.num,.preg{font-family:Sora,"DM Sans",sans-serif;letter-spacing:-.02em}
[hidden]{display:none!important}

/* ===== Banner de Chu (componente compartido: cabecera de la ficha y pantalla de gracias) ===== */
.bn-card{position:relative;width:100%;max-width:640px;min-height:143px;margin:0 auto;display:flex;align-items:center;
  border-radius:18px;overflow:visible;
  background:radial-gradient(120% 140% at 100% 100%,#e2574c 0%,#b2284f 22%,#5c1430 48%,#fff0 72%),
    linear-gradient(100deg,#141013 0%,#1a1216 55%,#2a1420 100%);
  box-shadow:0 18px 40px rgb(0 0 0 / .45),inset 0 0 0 1px rgb(255 255 255 / .06)}
.bn-copy{position:relative;z-index:2;padding:15px 0 13px 16px;width:60%}
.bn-logo{display:block;width:100%;max-width:300px;height:auto}
.bn-sub{display:inline-block;margin-top:7px;font:600 11px/1.2 "DM Sans",sans-serif;color:#fff;white-space:nowrap;
  border:1px solid rgb(255 255 255 / .35);border-radius:999px;padding:4px 9px;background:rgb(0 0 0 / .25)}
.bn-chu{position:absolute;z-index:1;right:10px;bottom:0;height:calc(100% + 42px);width:auto;max-width:none;
  aspect-ratio:806/1024;object-fit:contain;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}

/* ===== Cabecera de la ficha ===== */
.cabeza{text-align:center;padding-top:64px;margin-bottom:26px}
.cabeza h1{font-size:clamp(26px,7.4vw,34px);line-height:1.12;font-weight:800;margin-top:26px;text-wrap:balance}
.sub{color:var(--muted);font-size:16.5px;margin:10px auto 0;max-width:34ch}
.marca{padding:26px 0 8px;text-align:center}
.marca img{display:inline-block;width:150px;height:auto;opacity:.95}

/* ===== Preguntas: sobre el fondo, sin tarjeta ===== */
fieldset{border:0;min-width:0}
.card{padding:22px 0;border-bottom:1px solid rgb(255 255 255 / .09)}
legend.preg{float:left}
.ayuda,.opciones,.card>.err{clear:both}
.preg{display:block;width:100%;font-weight:700;font-size:19px;line-height:1.3;margin-bottom:16px;color:#fff}
.num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;
  background:var(--pink-btn);color:#fff;font-size:13px;font-weight:700;margin-right:8px;vertical-align:2px}
.opc{font:500 14px/1.3 "DM Sans",sans-serif;color:var(--muted);margin-left:4px;letter-spacing:0}
.ayuda{color:var(--muted);font-size:14.5px;margin:-8px 0 12px}
.opciones{display:grid;gap:10px}
/* opciones como píldoras con borde rosa (estilo de los botones de la página de Chu) */
.op{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 18px;border:1.5px solid var(--borde);
  border-radius:999px;background:rgb(255 255 255 / .03);color:#fff;cursor:pointer;font-size:16px;line-height:1.3;
  transition:border-color .15s,background .15s,box-shadow .15s}
.op:hover{border-color:var(--pink-soft);background:rgb(236 61 127 / .08)}
.op input{flex:none;width:20px;height:20px;accent-color:var(--pink)}
.op:has(input:checked){border-color:var(--pink-soft);background:var(--sel);
  box-shadow:0 0 0 4px rgb(236 61 127 / .12),0 0 24px rgb(236 61 127 / .22)}
.op:has(input:disabled){opacity:.45;cursor:not-allowed}
.op:has(input:focus-visible){outline:3px solid var(--pink-soft);outline-offset:3px}
.campo{width:100%;min-height:54px;padding:14px 18px;border:1.5px solid var(--borde);border-radius:18px;
  font:500 16px/1.45 "DM Sans",system-ui,sans-serif;background:var(--campo);color:#fff;outline:none;
  transition:border-color .2s,box-shadow .2s;appearance:none}
input.campo{border-radius:999px}
select.campo{border-radius:999px;background-image:linear-gradient(45deg,transparent 50%,var(--pink-soft) 50%),
    linear-gradient(135deg,var(--pink-soft) 50%,transparent 50%);
  background-position:calc(100% - 24px) 24px,calc(100% - 18px) 24px;background-size:6px 6px;background-repeat:no-repeat;
  padding-right:44px}
select.campo option{background:#1d1418;color:#fff}
.campo:focus{border-color:var(--pink-soft);box-shadow:0 0 0 4px rgb(236 61 127 / .25)}
.campo::placeholder{color:var(--placeholder);opacity:1}
.area{field-sizing:content;min-height:150px;max-height:none;overflow:hidden;resize:none}
.otra{margin-top:-2px}
.nota{color:var(--muted);font-size:14px;margin-top:10px}
.err{color:var(--pink-soft);font-size:14.5px;font-weight:700;margin-top:10px}
.err:empty{display:none}
.card.mal .campo,.card.mal .op{border-color:var(--pink-soft)}
.err.general{text-align:center;margin:6px 0 12px}

/* botón principal: rosa oscuro para que el texto blanco pase 4.5:1 */
.btn{display:flex;width:100%;align-items:center;justify-content:center;min-height:56px;margin-top:22px;border:0;
  border-radius:999px;background:var(--pink-btn);color:#fff;font:800 16.5px/1 "DM Sans",sans-serif;letter-spacing:.06em;
  box-shadow:0 10px 26px rgb(236 61 127 / .35);cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--pink-btn-h);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn:focus-visible,.atras:focus-visible{outline:3px solid var(--pink-soft);outline-offset:3px}

/* ===== Una pregunta por pantalla (solo con JS: el script agrega .pp al body). Sin número ni progreso. ===== */
.pp .card{display:none;border-bottom:0;padding-top:18px}
.pp .card.activa{display:block;animation:entrar .25s ease-out}
.pp .num,.pp #enviar{display:none}
.pp .preg{font-size:clamp(21px,6vw,25px);line-height:1.25;margin-bottom:20px;outline:none}
.pp .cabeza{margin-bottom:6px}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp .card.activa{animation:none}}
.nav{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:4px}
.btn.sig{margin-top:8px}
.btn.sig:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.atras{align-self:center;background:none;border:0;color:var(--muted);font:500 15px/1 "DM Sans",sans-serif;
  padding:12px 16px;cursor:pointer;border-radius:999px}
.atras:hover{color:#fff}

/* aviso simple (error sin JS) */
.aviso{text-align:center;padding:60px 10px}
.aviso h1{font-size:clamp(24px,7vw,32px);font-weight:800;line-height:1.15}
.aviso p{color:var(--muted);font-size:17px;margin:14px auto 0;max-width:32ch}

/* ===== Pantalla de gracias: mismo diseño que redescubrite.com/confirmado ===== */
.fin .wrap{max-width:672px}
.gracias{padding-top:64px}
.gracias .key,.gracias .date-card{width:calc(100% - 30px);max-width:560px;margin-left:auto;margin-right:auto}
.gracias .key{position:relative;margin-top:30px;background:linear-gradient(180deg,#1d1418,#140f12);
  border:1.5px solid var(--pink);border-radius:22px;padding:24px 18px 20px;text-align:center;
  box-shadow:0 0 0 6px rgb(236 61 127 / .10),0 0 42px rgb(236 61 127 / .22)}
.gracias .key .ok{display:block;width:34px;height:34px;margin:0 auto}
.gracias .key h1{font-size:clamp(24px,7vw,30px);font-weight:800;line-height:1.15;margin-top:8px;outline:none}
.gracias .key p{color:var(--muted);margin:6px auto 0;max-width:32ch;font-size:15.5px;line-height:1.5}
.gracias .key p b{color:#fff;font-weight:700}
.gracias .date-card{background:#fff;color:#17121a;border-radius:22px;padding:20px 16px 16px;margin-top:22px;text-align:left;
  box-shadow:0 20px 50px rgb(0 0 0 / .35)}
.gracias .dc-date{font:800 clamp(17px,5.5vw,34px)/1.12 Sora,sans-serif;letter-spacing:-.03em;white-space:nowrap}
.gracias .tz{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-top:16px;padding-top:14px;
  border-top:1px solid #ece6e9}
.gracias .tz li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:#4a3f45}
.gracias .tz img{width:22px;height:15px;max-width:none;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgb(0 0 0 / .08);flex:none}
.gracias .tz span{flex:1}
.gracias .tz b{color:#17121a;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:359px){.gracias .tz{grid-template-columns:1fr}.gracias .dc-date{font-size:17px}}
@media (min-width:520px){.gracias .tz{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:720px){
  .gracias,.cabeza{padding-top:74px}
  .bn-card{min-height:180px;border-radius:20px}
  .bn-copy{width:56%;padding:20px 0 18px 32px}
  .bn-logo{max-width:340px}
  .bn-sub{font-size:12.5px;padding:5px 11px;margin-top:9px}
  .bn-chu{right:44px;height:calc(100% + 56px)}
  .gracias .date-card{padding:26px 28px 20px}
}
a.btn{text-decoration:none;color:#fff}
.px{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}