@font-face{font-family:Figtree;src:url(/assets/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--marca:#C20063;--marca-osc:#9C0050;--marca-suave:#FBEAF2;--tinta:#1C1B1F;--tinta-2:#55525C;--linea:#D9D6DD;--fondo:#fff;--fondo-2:#F5F4F6;--error:#B3261E}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:110px}
button,label,input,textarea{touch-action:manipulation}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 19px/1.45 Figtree,system-ui,sans-serif;font-variant-numeric:tabular-nums}
main{display:block;max-width:640px;margin:0 auto;padding:24px 20px 140px;outline:none}
.barra{position:sticky;top:0;z-index:5;background:var(--fondo);padding:12px 20px 10px}
.barra img{display:block;height:34px;width:auto;margin:0 auto 10px}
.progreso{max-width:600px;height:6px;margin:0 auto;background:var(--fondo-2);border-radius:3px;overflow:hidden}
.progreso span{display:block;height:100%;width:0;background:var(--marca);transition:width .25s}
.paso{max-width:600px;margin:6px auto 0;font-size:15px;color:var(--tinta-2);min-height:21px}
h1,h2{text-wrap:balance}
h1{font-size:32px;line-height:1.15;letter-spacing:-.02em;margin:8px 0 14px;font-weight:700}
h2{font-size:26px;line-height:1.2;letter-spacing:-.01em;margin:4px 0 24px;font-weight:700}
p{margin:0 0 14px}
.lead{font-size:20px}
.nota{color:var(--tinta-2);font-size:17px}
.pregunta{border:0;margin:0 0 34px;padding:0;scroll-margin-top:110px}
.pregunta legend,.pregunta>label{display:block;padding:0;margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.3}
.pregunta .opcional{font-weight:400;color:var(--tinta-2);font-size:17px}
.pregunta.falta legend,.pregunta.falta>label{color:var(--error)}
.msj-falta{display:none;color:var(--error);font-size:17px;margin:8px 0 0}
.pregunta.falta .msj-falta{display:block}
.escala{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.nps{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.opcion{position:relative;display:block}
.opcion input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opcion span{display:flex;align-items:center;justify-content:center;min-height:60px;background:var(--fondo-2);border:2px solid var(--linea);border-radius:8px;font-size:22px;font-weight:600;padding:6px;text-align:center;transition:transform .08s,background .12s}
.nps .opcion span{min-height:54px;font-size:18px;padding:2px;border-radius:6px}
.opcion input:checked+span{background:var(--marca);border-color:var(--marca);color:#fff}
.opcion input:focus-visible+span{outline:3px solid var(--tinta);outline-offset:2px}
.opcion:active span{transform:scale(.96)}
.extremos{display:flex;justify-content:space-between;font-size:16px;color:var(--tinta-2);margin-top:6px}
.lista{display:grid;gap:8px}
.lista .opcion span{justify-content:flex-start;min-height:56px;font-size:19px;font-weight:500;padding:10px 16px;text-align:left}
textarea,input[type=text]{width:100%;font:inherit;color:inherit;background:#fff;border:2px solid var(--linea);border-radius:8px;padding:12px 14px}
textarea{min-height:120px;resize:vertical}
textarea:focus,input[type=text]:focus{outline:3px solid var(--marca);outline-offset:0;border-color:var(--marca)}
.acciones{position:fixed;left:0;right:0;bottom:0;background:var(--fondo);padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);z-index:6}
.acciones div{max-width:600px;margin:0 auto;display:flex;gap:10px}
button{font:inherit;font-weight:700;border:0;border-radius:8px;min-height:58px;padding:0 20px;cursor:pointer;transition:transform .08s,background .12s}
button:active{transform:scale(.98)}
button:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.prim{flex:1;background:var(--marca);color:#fff}
.prim:hover{background:var(--marca-osc)}
.prim[disabled]{background:var(--tinta-2);cursor:wait}
.sec{background:var(--fondo-2);color:var(--tinta)}
.sec:hover{background:var(--linea)}
.enlace{background:none;color:var(--marca-osc);text-decoration:underline;min-height:44px;padding:0;font-weight:600}
.promesa{background:var(--marca-suave);border-radius:8px;padding:16px 18px;margin:20px 0}
.promesa p:last-child{margin:0}
.promesa p{margin-bottom:10px}
.aviso{background:#FFF4E5;border-radius:8px;padding:12px 16px;font-size:17px;margin:0 0 18px}
.error-envio{color:var(--error);font-weight:600}
.entrevista{background:var(--fondo-2);border-radius:8px;padding:16px;margin:-14px 0 28px}
.entrevista label{display:block;font-weight:600;margin:14px 0 6px}
.trampa{position:absolute;left:-9999px}
.cargando{text-align:center;padding:60px 0}
.fin{text-align:left;padding-top:32px}
@media (max-width:380px){.nps{grid-template-columns:repeat(6,1fr);gap:6px}.nps .opcion span{min-height:56px;font-size:20px}}
@media (min-width:381px) and (max-width:560px){.nps{grid-template-columns:repeat(6,1fr);gap:6px}.nps .opcion span{min-height:56px;font-size:20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}