@font-face { font-family:"Barlow"; font-weight:400; font-display:swap; src:url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:600; font-display:swap; src:url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:600; font-display:swap; src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:700; font-display:swap; src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg:#F1F3F5; --panel:#fff; --fg:#15181E; --muted:#4F5A66; --line:#D3D9DF;
  --senal:#FFC400; --senal-fg:#15181E;
  --si:#0F7B47; --si-bg:#E4F4EB; --no:#B42318; --no-bg:#FCE9E7;
  --link:#1D4ED8; --foco:#1D4ED8;
  --plate-bg:#fff; --plate-fg:#15181E;
  --titulos:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --texto:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#101317; --panel:#181C21; --fg:#ECEFF2; --muted:#A3AEB9; --line:#2F3740;
    --si:#4CD58F; --si-bg:#12301F; --no:#FF8E80; --no-bg:#3A1714;
    --link:#8AB4FF; --foco:#8AB4FF;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 1.0625rem/1.55 var(--texto); }
.wrap { max-width:62rem; margin:0 auto; padding:0 1rem; }
a { color:var(--link); text-underline-offset:.15em; }
:focus-visible { outline:3px solid var(--foco); outline-offset:2px; }
.salto { position:absolute; left:-999px; top:0; background:var(--fg); color:var(--bg); padding:.6rem 1rem; z-index:10; }
.salto:focus { left:0; }
h1,h2 { font-family:var(--titulos); font-weight:700; line-height:1.05; margin:0 0 .6rem; letter-spacing:.005em; }
h1 { font-size:clamp(2.5rem,9vw,4.25rem); }
h2 { font-size:1.75rem; }
p { max-width:66ch; margin:0 0 1rem; }
.lead { font-size:1.2rem; color:var(--muted); }

/* Franja del plazo: señalización, no decoración */
.franja { background:var(--senal); color:var(--senal-fg); padding:.45rem 1rem; text-align:center; font-weight:600; font-size:.95rem; }
.franja a { color:inherit; }
.cab { display:flex; justify-content:space-between; align-items:center; padding-top:1rem; padding-bottom:1rem; }
.cab nav { display:flex; gap:1.25rem; }
.cab nav a { color:var(--fg); font-weight:600; text-decoration:none; padding:.4rem 0; }
.cab nav a:hover { text-decoration:underline; }
.logo { display:flex; align-items:center; gap:.45rem; font:700 1.6rem/1 var(--titulos); color:var(--fg); text-decoration:none; }

/* La placa: número de certificado */
.placa { display:inline-block; font:700 1.6rem/1 var(--titulos); letter-spacing:.09em; padding:.35rem .7rem .3rem;
  background:var(--plate-bg); color:var(--plate-fg); border:2px solid var(--plate-fg); border-radius:6px;
  box-shadow:inset 0 0 0 2px var(--plate-bg), inset 0 0 0 3.5px var(--plate-fg); font-variant-numeric:tabular-nums; }
.placa-logo { font-size:1.1rem; padding:.25rem .5rem .2rem; letter-spacing:.06em; }

/* Comprobador */
.comprobador { padding:1rem 0 1.5rem; }
form#comprobador { background:var(--panel); border:2px solid var(--fg); border-radius:8px; padding:1rem; max-width:42rem; }
form#comprobador > label:first-child { display:block; font-weight:600; margin-bottom:.4rem; }
#q { width:100%; font:600 1.4rem/1.2 var(--texto); padding:.85rem 1rem; color:var(--fg); background:var(--bg);
  border:2px solid var(--fg); border-radius:6px; }
#q::placeholder { color:var(--muted); font-weight:400; }
.ejemplos { margin:.8rem 0 .4rem; color:var(--muted); font-size:.95rem; }
.chip { font:inherit; font-weight:600; color:var(--fg); background:transparent; border:1.5px solid var(--fg);
  border-radius:99px; padding:.3rem .8rem; margin:.15rem .2rem .15rem 0; cursor:pointer; min-height:2.5rem; }
.chip:hover { background:var(--fg); color:var(--bg); }
.check { display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--muted); min-height:2.5rem; }
.check input { width:1.15rem; height:1.15rem; accent-color:var(--fg); }

/* Veredicto */
.veredicto { max-width:42rem; margin-top:1rem; padding:1rem 1.1rem; border-left:8px solid; border-radius:4px; }
.veredicto[hidden] { display:none; }
.veredicto p:last-child { margin-bottom:0; }
.veredicto.si { background:var(--si-bg); border-color:var(--si); }
.veredicto.no { background:var(--no-bg); border-color:var(--no); }
.v-titulo { font:700 2rem/1 var(--titulos); margin-bottom:.5rem !important; }
.si .v-titulo { color:var(--si); }
.no .v-titulo { color:var(--no); }

/* Resultados */
.lista { list-style:none; margin:0; padding:0; max-width:50rem; }
.js .lista:not(.visible) .res { display:none; }
.js .lista:not(.visible) .res.on { display:grid; }
.res { display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; padding:.85rem 1rem; margin-bottom:.6rem; }
.placas { display:flex; flex-direction:column; gap:.3rem; }
.info { display:flex; flex-direction:column; min-width:0; }
.marca { font-weight:600; color:var(--muted); text-decoration:none; font-size:.95rem; }
.marca:hover { text-decoration:underline; }
.nom { font-weight:600; font-size:1.15rem; line-height:1.25; overflow-wrap:anywhere; }
.ver { color:var(--muted); font-size:.9rem; }
.accion { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.accion small { color:var(--muted); }
.btn-amz { display:inline-block; background:var(--senal); color:var(--senal-fg); font-weight:600; text-decoration:none;
  padding:.65rem 1.1rem; border-radius:6px; border:2px solid var(--senal-fg); min-height:2.75rem; }
.btn-amz:hover { background:var(--senal-fg); color:var(--senal); border-color:var(--senal-fg); }
.btn-sec { font:inherit; font-weight:600; color:var(--fg); background:var(--panel); border:2px solid var(--fg);
  border-radius:6px; padding:.65rem 1.1rem; cursor:pointer; min-height:2.75rem; }
.btn-sec:hover { background:var(--fg); color:var(--bg); }
.btn-sec[hidden] { display:none; }
.mas-wrap { margin:.4rem 0 0; }
.mas-wrap:has(#mas[hidden]) { display:none; }
.migas { color:var(--muted); font-size:.95rem; margin-top:1rem; }

/* Bloques de apoyo */
.aviso { max-width:50rem; margin:2rem 0; padding:1rem 1.1rem; background:var(--panel); border:1px solid var(--line); border-left:8px solid var(--senal); border-radius:4px; }
.aviso h2 { font-size:1.4rem; }
.aviso p:last-child { margin-bottom:0; }
.marcas { margin:2.5rem 0; }
.rejilla-marcas { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); gap:.4rem .8rem; }
.rejilla-marcas a { display:flex; justify-content:space-between; gap:.5rem; padding:.55rem .2rem; border-bottom:1px solid var(--line);
  color:var(--fg); text-decoration:none; font-weight:600; min-height:2.75rem; align-items:center; }
.rejilla-marcas a:hover { border-bottom-color:var(--fg); }
.rejilla-marcas span { font-family:var(--titulos); font-size:1.15rem; color:var(--muted); }
.guia-enlace { max-width:50rem; margin-bottom:2rem; }
main > h2 { margin-top:1.8rem; }
ol { max-width:66ch; padding-left:1.3rem; }
.pie { border-top:2px solid var(--fg); margin-top:2.5rem; padding-top:1.2rem; padding-bottom:2rem; color:var(--muted); font-size:.95rem; }

@media (min-width:44rem) {
  .res { grid-template-columns:7.5rem 1fr auto; padding:.9rem 1.1rem; }
  .accion { grid-column:auto; flex-direction:column; align-items:flex-end; }
}
@media (prefers-reduced-motion:no-preference) {
  .chip, .btn-amz, .btn-sec { transition:background-color .12s, color .12s; }
}