/* VeriFactu Claro — estilo documento fiscal */
:root{
  --tinta:#152238;
  --tinta-suave:#3c4a63;
  --papel:#f6f5f1;
  --blanco:#ffffff;
  --sello:#c22f21;
  --timbre:#20509e;
  --ok:#187a4b;
  --linea:#d9d6cc;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Archivo',var(--sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--sans);color:var(--tinta);background:var(--papel);line-height:1.65;font-size:1.06rem}

/* Barra countdown permanente */
.barra-plazo{background:var(--tinta);color:#fff;font-family:var(--mono);font-size:.82rem;text-align:center;padding:.45rem .75rem;letter-spacing:.02em}
.barra-plazo strong{color:#ffd9d4;font-weight:600}

header.site{background:var(--blanco);border-bottom:2px solid var(--tinta)}
.wrap{max-width:1020px;margin:0 auto;padding:0 1.1rem}
nav.principal{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 0}
.logo{font-family:var(--display);font-weight:800;font-size:1.3rem;text-decoration:none;color:var(--tinta);letter-spacing:-.02em}
.logo span{color:var(--sello)}
nav.principal ul{display:flex;gap:.2rem 1.1rem;flex-wrap:wrap;list-style:none;margin:0 0 0 auto;padding:0;font-size:.92rem}
nav.principal a{color:var(--tinta-suave);text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent}
nav.principal a:hover,nav.principal a[aria-current=page]{color:var(--tinta);border-bottom-color:var(--sello)}
nav.principal a:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--timbre);outline-offset:2px;border-radius:2px}

main{padding:2.2rem 0 3rem}
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.12;letter-spacing:-.025em;margin:.2rem 0 1rem}
h2{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-.01em;margin:2.4rem 0 .7rem}
h3{font-family:var(--display);font-weight:600;font-size:1.12rem;margin:1.6rem 0 .5rem}
p,li{max-width:72ch}
a{color:var(--timbre)}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sello);margin:0}
.intro{font-size:1.15rem;color:var(--tinta-suave);max-width:68ch}

/* Sello countdown — elemento firma */
.sello-plazo{display:inline-block;transform:rotate(-2deg);border:3px double var(--sello);color:var(--sello);padding:.9rem 1.3rem;margin:1.4rem 0;font-family:var(--mono);background:var(--blanco);box-shadow:2px 3px 0 rgba(21,34,56,.12)}
.sello-plazo .num{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;letter-spacing:.04em}
.sello-plazo .txt{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}

/* Test interactivo */
.test{background:var(--blanco);border:1.5px solid var(--tinta);box-shadow:5px 5px 0 rgba(21,34,56,.12);padding:1.6rem;margin:1.8rem 0}
.test .num-reg{font-family:var(--mono);font-size:.75rem;color:var(--tinta-suave);display:flex;justify-content:space-between;border-bottom:1px solid var(--linea);padding-bottom:.6rem;margin-bottom:1rem}
.test h2{margin-top:0}
.pregunta p{font-weight:600;font-size:1.12rem}
.opciones{display:grid;gap:.6rem;margin-top:.9rem}
.opciones button{font:inherit;text-align:left;background:var(--papel);border:1.5px solid var(--linea);padding:.75rem 1rem;cursor:pointer;color:var(--tinta)}
.opciones button:hover{border-color:var(--timbre);background:#eef2fa}
.progreso{font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);margin-top:1rem}
.resultado{border-top:2px dashed var(--linea);margin-top:1.2rem;padding-top:1.2rem;display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.resultado .qr{flex:0 0 84px;opacity:.9}
.resultado .veredicto{font-family:var(--display);font-weight:800;font-size:1.35rem;margin:0 0 .4rem}
.resultado.afecta .veredicto{color:var(--sello)}
.resultado.exento .veredicto{color:var(--ok)}
.reiniciar{background:none;border:none;color:var(--timbre);font:inherit;cursor:pointer;text-decoration:underline;padding:0;margin-top:.8rem}

/* Tablas */
table{border-collapse:collapse;width:100%;margin:1.2rem 0;background:var(--blanco);font-size:.97rem}
caption{text-align:left;font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);padding-bottom:.4rem}
th,td{border:1px solid var(--linea);padding:.6rem .8rem;text-align:left;vertical-align:top}
th{background:var(--tinta);color:#fff;font-family:var(--mono);font-weight:500;font-size:.85rem;letter-spacing:.03em}
tr:nth-child(even) td{background:#fbfaf7}
td.fecha{font-family:var(--mono);white-space:nowrap}

/* Cajas */
.aviso,.clave{border-left:4px solid var(--timbre);background:var(--blanco);padding:.9rem 1.1rem;margin:1.3rem 0}
.aviso{border-left-color:var(--sello)}
.clave strong:first-child,.aviso strong:first-child{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:.3rem}
.aviso strong:first-child{color:var(--sello)}
.clave strong:first-child{color:var(--timbre)}

/* Checklist */
.checklist{list-style:none;padding:0;counter-reset:paso}
.checklist li{background:var(--blanco);border:1px solid var(--linea);margin:.55rem 0;padding:.8rem 1rem .8rem .9rem;display:flex;gap:.7rem;align-items:flex-start}
.checklist input[type=checkbox]{width:1.25rem;height:1.25rem;margin-top:.2rem;accent-color:var(--ok);flex:none}
.checklist label{cursor:pointer}
.checklist input:checked+label{text-decoration:line-through;color:var(--tinta-suave)}

/* FAQ */
details{background:var(--blanco);border:1px solid var(--linea);margin:.55rem 0;padding:.2rem .9rem}
summary{font-weight:600;cursor:pointer;padding:.6rem 0}
details[open]{border-left:4px solid var(--timbre)}

/* Tarjetas enlaces internos */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1.4rem 0;padding:0;list-style:none}
.tarjetas a{display:block;background:var(--blanco);border:1.5px solid var(--linea);padding:1rem 1.1rem;text-decoration:none;color:var(--tinta);height:100%}
.tarjetas a:hover{border-color:var(--tinta);box-shadow:3px 3px 0 rgba(21,34,56,.12)}
.tarjetas .t{font-family:var(--display);font-weight:700;display:block;margin-bottom:.25rem}
.tarjetas .d{font-size:.9rem;color:var(--tinta-suave)}
.tarjetas .ref{font-family:var(--mono);font-size:.72rem;color:var(--sello);display:block;margin-bottom:.4rem}

.cta{display:inline-block;background:var(--sello);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;padding:.75rem 1.4rem;margin:.6rem 0;box-shadow:3px 3px 0 rgba(21,34,56,.25)}
.cta:hover{background:#a72619}

.meta-doc{font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);border-top:1px solid var(--linea);margin-top:2.5rem;padding-top:.8rem}

/* Hueco publicidad */
.pub{margin:2rem 0;min-height:90px;background:repeating-linear-gradient(45deg,#efeee9,#efeee9 8px,#f6f5f1 8px,#f6f5f1 16px);border:1px dashed var(--linea);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;color:#9a968a;letter-spacing:.1em}

footer.site{background:var(--tinta);color:#c8cedd;font-size:.9rem;margin-top:2rem}
footer.site .wrap{padding:2rem 1.1rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site h2{color:#fff;font-size:1rem;margin:0 0 .6rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.3rem 0}
footer.site a{color:#c8cedd}
footer.site .legalinea{grid-column:1/-1;border-top:1px solid #2b3a57;padding-top:1rem;font-family:var(--mono);font-size:.75rem}

/* Aviso cookies */
#aviso-cookies{position:fixed;bottom:0;left:0;right:0;background:var(--blanco);border-top:2px solid var(--tinta);padding:.9rem 1.1rem;display:none;gap:1rem;align-items:center;flex-wrap:wrap;z-index:50;box-shadow:0 -4px 16px rgba(21,34,56,.15)}
#aviso-cookies p{margin:0;font-size:.88rem;flex:1;min-width:240px}
#aviso-cookies button{font:inherit;padding:.5rem 1rem;cursor:pointer;border:1.5px solid var(--tinta);background:var(--tinta);color:#fff}
#aviso-cookies button.secundario{background:none;color:var(--tinta)}

@media(max-width:640px){
  nav.principal ul{margin-left:0;width:100%}
  .test{padding:1.1rem}
}