:root{--prim:#FFB832;--req:#F49F00;--err:#F87171;--bg:#4A4A4A;--txt:#fff;--in:rgb(255 255 255/.09);--borde:rgba(255,255,255,.2)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:Montserrat,system-ui,sans-serif;color:var(--txt);background:var(--bg) url(../img/fondo.jpg) center/cover fixed;font-size:1.0625rem;line-height:1.45}
body::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:-1}
header.cab{display:flex;justify-content:flex-end;padding:14px 16px}
header.cab img{height:44px;max-width:60%;object-fit:contain}
#barra{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,.2);z-index:10}
#progreso{height:100%;width:0;background:var(--prim);transition:width .3s}
main{max-width:626px;margin:0 auto;padding:8px 16px 64px}
h1{color:var(--prim);font-weight:800;font-size:1.7rem;line-height:1.2;margin:.4em 0}
h2.sec{color:var(--prim);font-weight:800;font-size:1.1rem;letter-spacing:.02em;margin:1.8em 0 .4em}
.sub,.par{margin:.4em 0 1em}
.portada{padding:12vh 0 4vh}
.ilu{display:block;width:100%;max-width:420px;margin:1rem 0;border-radius:4px}
.campo{margin:0 0 1.5rem}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.fila{grid-template-columns:1fr}}
.et{display:block;color:var(--prim);font-weight:500;margin-bottom:.35rem}
.req{color:var(--req)}
.cap{font-size:.875rem;opacity:.8;margin:-.15rem 0 .5rem}
.cuenta{float:right;font-size:.8rem;color:#ccc}.cuenta.over{color:var(--err)}
.in{width:100%;padding:.7rem .8rem;background:var(--in);color:#fff;border:1px solid var(--borde);border-radius:4px;font:inherit}
.in:focus,.op:focus-visible,.drop:focus-visible,.btn:focus-visible,.btn-sec:focus-visible,.sw:focus-visible,.mx:focus-visible{outline:2px solid var(--prim);outline-offset:2px}
.in::placeholder{color:rgba(255,255,255,.45)}
select.in option{color:#000}
.tel{display:grid;grid-template-columns:130px 1fr;gap:8px}
textarea.in{resize:vertical}
.opciones{display:grid;gap:8px}
.op{display:flex;gap:.7rem;align-items:center;text-align:left;width:100%;padding:.7rem .8rem;background:var(--in);color:#fff;border:1px solid var(--borde);border-radius:4px;font:inherit;cursor:pointer}
.op.on{border-color:var(--prim);background:rgba(255,184,50,.18)}
.circ,.caja{flex:none;width:18px;height:18px;border:2px solid var(--borde);display:grid;place-items:center}
.circ{border-radius:50%}.caja{border-radius:3px}
.op.on .circ,.op.on .caja{border-color:var(--prim);background:var(--prim);box-shadow:inset 0 0 0 4px #3a3a3a}
.op.on .caja{box-shadow:none}
.sw{display:flex;gap:.8rem;align-items:center;background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:0;text-align:left}
.pastilla{flex:none;width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,.25);position:relative;transition:.2s}
.bola{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.sw.on .pastilla{background:var(--prim)}.sw.on .bola{left:23px}
.drop{display:flex;gap:1rem;align-items:center;justify-content:center;text-align:center;padding:1.6rem 1rem;border:2px dashed var(--borde);border-radius:4px;cursor:pointer;background:var(--in)}
.drop.over{border-color:var(--prim)}
.drop.ok{border:2px solid #4ade80;background:rgba(74,222,128,.12);justify-content:flex-start}
.drop img{width:64px;height:64px;object-fit:cover;border-radius:4px}
.matriz-wrap{overflow-x:auto}
.matriz{border-collapse:collapse;width:100%;font-size:.9rem}
.matriz th,.matriz td{padding:.5rem;border-bottom:1px solid var(--borde);text-align:center}
.matriz th[scope=row]{text-align:left;font-weight:500}
.mx{width:22px;height:22px;border-radius:50%;border:2px solid var(--borde);background:none;cursor:pointer}
.mx.on{background:var(--prim);border-color:var(--prim);box-shadow:inset 0 0 0 4px #3a3a3a}
.campo.err .in,.campo.err .drop{border-color:var(--err)}
.msg{color:var(--err);font-size:.9rem;margin-top:.35rem}
.botones{display:flex;gap:1rem;align-items:center;margin-top:2rem;flex-wrap:wrap}
.btn{background:var(--prim);color:#1a1a1a;border:0;padding:.85rem 1.8rem;font:inherit;font-weight:700;cursor:pointer;border-radius:0;animation:grow 2s ease-in-out infinite}
.btn:disabled{opacity:.5;animation:none}
.btn-sec{background:none;border:0;color:#fff;font:inherit;cursor:pointer;text-decoration:underline}
@keyframes grow{50%{transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){.btn{animation:none}}
.rev dt{color:var(--prim);font-weight:500;margin-top:1rem;font-size:.95rem}
.rev dd{margin:.2rem 0 0;word-break:break-word}
.rev em{opacity:.6}
.edit{background:none;border:0;color:var(--prim);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem;margin-left:.5rem}
.estado{margin-top:1rem;color:var(--prim)}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
a{color:var(--prim)}
/* portada selector */
.lista{display:grid;gap:12px;margin-top:1.5rem}
.lista a{display:block;padding:1rem 1.2rem;border:1px solid var(--borde);background:var(--in);color:#fff;text-decoration:none;font-weight:700}
.lista a:hover{border-color:var(--prim);color:var(--prim)}
.portada.inicio{padding-top:6vh}