/* ZBE Fácil — estética de señalización vial */
:root{
  --asfalto:#181c24;
  --asfalto-2:#232936;
  --niebla:#f2f3f5;
  --blanco:#fff;
  --senal-roja:#c3002f;
  --senal-verde:#00703c;
  --senal-azul:#0057b8;
  --ambar:#f2a900;
  --gris:#5c6472;
  --linea:#d7dae0;
  --sans:'Barlow',system-ui,sans-serif;
  --cond:'Barlow Condensed',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--sans);color:var(--asfalto);background:var(--niebla);line-height:1.6;font-size:1.05rem}
.wrap{max-width:1040px;margin:0 auto;padding:0 1.1rem}

header.site{background:var(--asfalto);color:#fff;border-bottom:4px solid var(--ambar)}
nav.principal{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.85rem 0}
.logo{font-family:var(--cond);font-weight:700;font-size:1.5rem;letter-spacing:.02em;text-decoration:none;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.logo .disco{width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;border:.35rem solid var(--senal-roja);flex:none}
nav.principal ul{display:flex;gap:.2rem 1.15rem;flex-wrap:wrap;list-style:none;margin:0 0 0 auto;padding:0;font-size:.93rem}
nav.principal a{color:#c9cfda;text-decoration:none;padding:.25rem 0;border-bottom:3px solid transparent}
nav.principal a:hover,nav.principal a[aria-current=page]{color:#fff;border-bottom-color:var(--ambar)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--senal-azul);outline-offset:2px}

main{padding:2.2rem 0 3rem}
h1{font-family:var(--cond);font-weight:700;font-size:clamp(2rem,5vw,3.1rem);line-height:1.08;text-transform:uppercase;letter-spacing:.01em;margin:.2rem 0 1rem}
h2{font-family:var(--cond);font-weight:600;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;margin:2.3rem 0 .7rem}
h3{font-family:var(--cond);font-weight:600;font-size:1.2rem;margin:1.5rem 0 .5rem}
p,li{max-width:72ch}
a{color:var(--senal-azul)}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--senal-roja);margin:0}
.intro{font-size:1.14rem;color:#3a4150;max-width:68ch}

/* Panel comprobador: cartel de carretera */
.panel{background:var(--asfalto-2);color:#fff;border-radius:14px;border:3px solid #fff;box-shadow:0 0 0 3px var(--asfalto-2),0 10px 28px rgba(24,28,36,.35);padding:1.5rem;margin:1.8rem 0}
.panel h2{color:var(--ambar);margin-top:0}
.panel label{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:#c9cfda;margin:.9rem 0 .3rem}
.panel select,.panel button.accion{font:inherit;width:100%;padding:.7rem .8rem;border-radius:8px;border:2px solid #3a4356;background:#fff;color:var(--asfalto);font-size:1.02rem}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.fila{grid-template-columns:1fr}}
button.accion{background:var(--ambar);border-color:var(--ambar);font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;cursor:pointer;margin-top:1.2rem}
button.accion:hover{filter:brightness(1.08)}
.nota-panel{font-size:.85rem;color:#9aa3b2;margin:.8rem 0 0}
.nota-panel a{color:#c9cfda}

/* Veredicto tipo señal */
.veredicto{display:none;margin-top:1.4rem;background:#fff;color:var(--asfalto);border-radius:10px;padding:1.2rem;gap:1.1rem;align-items:flex-start}
.veredicto.visible{display:flex;flex-wrap:wrap}
.senal{width:92px;height:92px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:.95rem;text-transform:uppercase;text-align:center;color:#fff;position:relative}
.senal.no{background:#fff;border:14px solid var(--senal-roja);color:var(--senal-roja)}
.senal.no::after{content:"";position:absolute;width:118%;height:11px;background:var(--senal-roja);transform:rotate(-45deg);border-radius:4px}
.senal.si{background:var(--senal-verde);border:8px solid #fff;box-shadow:0 0 0 2px var(--senal-verde)}
.senal.depende{background:var(--ambar);border:8px solid #fff;box-shadow:0 0 0 2px var(--ambar);color:var(--asfalto)}
.veredicto .cuerpo{flex:1;min-width:230px}
.veredicto .titulo{font-family:var(--cond);font-weight:700;font-size:1.45rem;text-transform:uppercase;margin:0 0 .3rem}
.veredicto.res-no .titulo{color:var(--senal-roja)}
.veredicto.res-si .titulo{color:var(--senal-verde)}
.veredicto .multa{font-family:var(--mono);font-size:.85rem;background:var(--niebla);border-left:4px solid var(--senal-roja);padding:.5rem .7rem;margin:.7rem 0 0}

/* Etiquetas DGT */
.etiqueta{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.6rem;border-radius:50%;font-family:var(--cond);font-weight:700;color:#fff;padding:0 .5rem}
.et-0{background:var(--senal-azul)}
.et-eco{background:linear-gradient(135deg,var(--senal-azul) 50%,#43a047 50%)}
.et-c{background:#43a047}
.et-b{background:var(--ambar);color:var(--asfalto)}
.et-a{background:var(--gris)}

table{border-collapse:collapse;width:100%;margin:1.2rem 0;background:#fff;font-size:.96rem}
caption{text-align:left;font-family:var(--mono);font-size:.76rem;color:var(--gris);padding-bottom:.4rem}
th,td{border:1px solid var(--linea);padding:.6rem .8rem;text-align:left;vertical-align:top}
th{background:var(--asfalto);color:#fff;font-family:var(--cond);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.88rem}
tr:nth-child(even) td{background:#fafbfc}
td.dato{font-family:var(--mono);font-size:.88rem}

.aviso,.clave{border-left:5px solid var(--senal-azul);background:#fff;padding:.9rem 1.1rem;margin:1.3rem 0;border-radius:0 8px 8px 0}
.aviso{border-left-color:var(--senal-roja)}
.aviso strong:first-child,.clave strong:first-child{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;display:block;margin-bottom:.25rem}
.aviso strong:first-child{color:var(--senal-roja)}
.clave strong:first-child{color:var(--senal-azul)}

.ficha{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1rem 1.2rem;margin:1.2rem 0}
.ficha dt{font-family:var(--cond);text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;color:var(--gris);margin-top:.7rem}
.ficha dd{margin:0.1rem 0 0}
.rev{font-family:var(--mono);font-size:.75rem;color:var(--gris)}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.4rem 0;padding:0;list-style:none}
.tarjetas a{display:block;background:#fff;border:1px solid var(--linea);border-top:5px solid var(--ambar);border-radius:8px;padding:1rem 1.1rem;text-decoration:none;color:var(--asfalto);height:100%}
.tarjetas a:hover{border-top-color:var(--senal-roja);box-shadow:0 6px 16px rgba(24,28,36,.12)}
.tarjetas .t{font-family:var(--cond);font-weight:700;font-size:1.15rem;text-transform:uppercase;display:block;margin-bottom:.25rem}
.tarjetas .d{font-size:.9rem;color:#3a4150}

details{background:#fff;border:1px solid var(--linea);border-radius:8px;margin:.55rem 0;padding:.2rem .9rem}
summary{font-weight:600;cursor:pointer;padding:.6rem 0}
details[open]{border-left:5px solid var(--senal-azul)}

.cta{display:inline-block;background:var(--senal-azul);color:#fff;text-decoration:none;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.75rem 1.5rem;border-radius:8px;margin:.6rem 0}
.cta:hover{background:#004494}

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

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

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

#aviso-cookies{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:4px solid var(--asfalto);padding:.9rem 1.1rem;display:none;gap:1rem;align-items:center;flex-wrap:wrap;z-index:50;box-shadow:0 -4px 16px rgba(24,28,36,.2)}
#aviso-cookies p{margin:0;font-size:.88rem;flex:1;min-width:240px}
#aviso-cookies button{font:inherit;padding:.5rem 1rem;cursor:pointer;border:2px solid var(--asfalto);background:var(--asfalto);color:#fff;border-radius:6px}
#aviso-cookies button.secundario{background:none;color:var(--asfalto)}

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