:root{
  --papel:#F3F7FB;
  --tinta:#12233D;
  --tinta-2:#4A5B74;
  --linea:#D5E0EC;
  --celeste:#6CACE4;
  --celeste-hondo:#2F6FA8;
  --libre:#17804F;
  --libre-fondo:#E3F4EA;
  --tomado:#7A8698;
  --error:#B23B2A;
  --campo:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --papel:#0E1A2C; --tinta:#E8EFF7; --tinta-2:#A3B2C6; --linea:#24364F;
    --celeste:#86BEEB; --celeste-hondo:#86BEEB; --libre:#5FD39A; --libre-fondo:#12352A;
    --tomado:#7F8EA3; --error:#F08471; --campo:#13233A;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:"Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 100;
  font-size:17px; line-height:1.55;
}
a{color:var(--celeste-hondo)}
.marco{max-width:820px; margin:0 auto; padding:0 20px}
@media (min-width:720px){ .marco{padding:0 32px} }

/* ---------- Navegación ---------- */
.nav{border-bottom:1px solid var(--linea)}
.nav .marco{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; min-height:60px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
.nav .logo{font-weight:780; font-variation-settings:"wdth" 112; font-size:19px; color:var(--tinta); text-decoration:none; letter-spacing:-.01em}
.nav ul{display:flex; gap:4px 18px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.nav ul a{color:var(--tinta-2); text-decoration:none; font-weight:560; font-size:15px; padding:4px 0}
.nav ul a:hover{color:var(--tinta)}
.nav ul a[aria-current="page"]{color:var(--tinta); box-shadow:inset 0 -2px 0 var(--celeste)}
.menu-boton{display:none}
@media (max-width:719px){
  .con-js .menu-boton{
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px;
    background:none; border:0; border-radius:10px; cursor:pointer; color:var(--tinta);
  }
  .menu-boton span, .menu-boton span::before, .menu-boton span::after{
    display:block; width:22px; height:2px; border-radius:2px; background:currentColor; position:relative; transition:transform .18s, background-color .18s;
  }
  .menu-boton span::before, .menu-boton span::after{content:""; position:absolute; left:0}
  .menu-boton span::before{top:-7px}
  .menu-boton span::after{top:7px}
  .menu-boton[aria-expanded="true"] span{background:transparent}
  .menu-boton[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
  .menu-boton[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
  .con-js .nav nav{display:none; flex-basis:100%}
  .con-js .nav nav.abierto{display:block}
  .nav .marco{padding-top:6px; padding-bottom:6px; row-gap:0}
  .nav ul{flex-direction:column; gap:0; padding:4px 0 8px}
  .nav ul a{display:block; padding:12px 0; font-size:17px; border-top:1px solid var(--linea)}
  .nav ul a[aria-current="page"]{box-shadow:none; color:var(--tinta); font-weight:700}
}
@media (prefers-reduced-motion:reduce){ .menu-boton span, .menu-boton span::before, .menu-boton span::after{transition:none} }

/* ---------- Cabecera de página ---------- */
.cabecera{padding:40px 0 0}
@media (min-width:720px){ .cabecera{padding-top:56px} }
.marca{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--tinta-2); margin-bottom:28px}
.marca b{color:var(--tinta)}
.franja{display:inline-flex; width:22px; height:14px; border-radius:2px; overflow:hidden; flex-direction:column}
.franja i{flex:1; background:var(--celeste)} .franja i:nth-child(2){background:#fff}
h1{
  margin:0 0 10px; font-weight:780; font-variation-settings:"wdth" 118;
  font-size:clamp(34px,6.2vw,58px); line-height:1.02; letter-spacing:-.02em;
}
.bajada{margin:0 0 32px; color:var(--tinta-2); max-width:58ch; font-size:18px}

/* ---------- Buscador ---------- */
.modos{display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap}
.modos button{
  font:inherit; font-size:15px; font-weight:560; color:var(--tinta-2); background:none;
  border:1px solid transparent; border-radius:999px; padding:7px 14px; cursor:pointer;
}
.modos button[aria-pressed="true"]{color:var(--tinta); border-color:var(--linea); background:var(--campo)}
.modos button:hover{color:var(--tinta)}
.busca{
  display:flex; align-items:stretch; background:var(--campo); border:2px solid var(--tinta);
  border-radius:14px; overflow:hidden;
}
.busca:focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--celeste) 45%, transparent)}
.busca input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--tinta); outline:none;
  font:inherit; font-weight:650; font-variation-settings:"wdth" 112;
  font-size:clamp(20px,4.4vw,32px); padding:15px 0 15px 20px; letter-spacing:-.01em;
}
.busca input::placeholder{color:var(--tomado); font-weight:450; font-size:.72em; font-variation-settings:"wdth" 100; letter-spacing:0}
.sufijo{
  display:flex; align-items:center; gap:6px; padding:0 14px 0 4px; font-weight:650; font-variation-settings:"wdth" 100;
  font-size:clamp(17px,3vw,22px); color:var(--celeste-hondo); white-space:nowrap; user-select:none;
}
.sufijo small{font-size:.7em; font-weight:550; color:var(--tinta-2)}
.boton{
  font:inherit; font-weight:650; font-size:17px; border:0; cursor:pointer;
  background:var(--tinta); color:var(--papel); padding:0 24px; white-space:nowrap;
}
.boton:hover{background:var(--celeste-hondo)}
.boton:disabled{opacity:.6; cursor:progress}
@media (max-width:760px){
  .busca{flex-wrap:wrap}
  .busca input{padding:14px 0 14px 16px}
  .busca .boton{flex-basis:100%; padding:14px}
}
.panel textarea{
  width:100%; font:inherit; color:var(--tinta); background:var(--campo);
  border:2px solid var(--tinta); border-radius:14px; padding:14px 16px; outline:none;
  min-height:150px; resize:vertical; font-weight:560; font-size:19px; line-height:1.5;
}
.panel textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--celeste) 45%, transparent)}
.panel label{display:block; font-weight:600; font-size:15px; margin:0 0 6px}
.panel .campo{margin-bottom:16px}
.ayuda{font-size:14px; color:var(--tinta-2); margin:6px 0 0}
.fila-acciones{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:4px}
.panel .tlds{margin:0 0 18px}
.fila-acciones .boton{padding:14px 24px; border-radius:12px}
.tlds{display:flex; gap:18px; margin-top:14px; font-size:15px; color:var(--tinta-2); flex-wrap:wrap}
.tlds label{display:inline-flex; gap:7px; align-items:center; cursor:pointer}
.tlds input{accent-color:var(--tinta); width:16px; height:16px}
.confianza{margin:14px 0 0; font-size:14px; color:var(--tinta-2)}
.verificacion{margin-top:14px}
.verificacion:empty{display:none}

/* ---------- Resultados ---------- */
.estado-busqueda{min-height:8px; margin:24px 0 4px; font-size:15px; color:var(--tinta-2)}
.estado-busqueda:empty{margin:0}
.estado-busqueda.mal{color:var(--error)}
.resumen{font-weight:600; color:var(--tinta)}
.lista{list-style:none; margin:0; padding:0}
.item{
  display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:baseline;
  padding:18px 0 18px 18px; border-bottom:1px solid var(--linea); position:relative;
}
.item::before{content:""; position:absolute; left:0; top:20px; bottom:20px; width:4px; border-radius:2px; background:var(--tomado)}
.item.disponible::before{background:var(--libre)}
.item.probable_libre::before{background:repeating-linear-gradient(180deg,var(--libre) 0 6px,transparent 6px 10px)}
.item.pendiente::before{background:repeating-linear-gradient(180deg,var(--tomado) 0 6px,transparent 6px 10px)}
.item.error::before{background:var(--error)}
.dom{
  font-weight:700; font-variation-settings:"wdth" 108; font-size:clamp(20px,4.2vw,28px);
  letter-spacing:-.01em; overflow-wrap:anywhere; line-height:1.15;
}
.dom span{color:var(--tinta-2); font-weight:520}
.item.registrado .dom{color:var(--tinta-2); font-weight:560}
.veredicto{font-weight:650; font-size:16px; white-space:nowrap}
.disponible .veredicto, .probable_libre .veredicto{color:var(--libre)}
.probable_libre .veredicto{font-weight:550}
.registrado .veredicto, .pendiente .veredicto{color:var(--tomado)}
.error .veredicto{color:var(--error)}
.detalle{grid-column:1 / -1; font-size:15px; color:var(--tinta-2); margin:2px 0 0}
.detalle a{font-weight:600}
.detalle a.registrar{
  display:inline-block; margin:8px 12px 0 0; text-decoration:none; color:var(--libre); background:var(--libre-fondo);
  padding:5px 12px; border-radius:8px;
}
.detalle a.registrar:hover{text-decoration:underline}
.sugerencia{margin:16px 0 0; font-size:16px; color:var(--tinta-2)}
.sugerencia a{font-weight:650}

/* ---------- Contenido ---------- */
.contenido{padding:56px 0 8px}
.contenido > *{max-width:66ch}
.contenido h2{font-size:clamp(23px,3.4vw,29px); line-height:1.2; font-weight:720; font-variation-settings:"wdth" 108; letter-spacing:-.01em; margin:48px 0 12px}
.contenido > h2:first-child, .contenido > .cta:first-child{margin-top:0}
.cabecera + .contenido{padding-top:8px}
.contenido h3{font-size:18px; font-weight:680; margin:26px 0 6px}
.contenido p{margin:0 0 14px}
.contenido ol, .contenido ul{margin:0 0 16px; padding-left:22px}
.contenido li{margin:0 0 8px}
.contenido li::marker{color:var(--tinta-2); font-weight:650}
.dos-columnas{display:grid; gap:14px 28px; max-width:none}
@media (min-width:720px){ .dos-columnas{grid-template-columns:1fr 1fr} }
.dos-columnas h3{margin-top:0}
.tabla{width:100%; max-width:560px; border-collapse:collapse; margin:8px 0 10px; font-size:16px}
.tabla th, .tabla td{padding:10px 12px; border-bottom:1px solid var(--linea); text-align:left}
.tabla th{font-size:14px; color:var(--tinta-2); font-weight:600}
.tabla td:not(:first-child), .tabla th:not(:first-child){text-align:right; font-variant-numeric:tabular-nums}
.tabla td:first-child{font-weight:650}
.nota{font-size:14px; color:var(--tinta-2)}
.aviso{border-left:4px solid var(--celeste); padding:2px 0 2px 16px; margin:18px 0}
.cta{display:inline-block; margin:6px 0 18px; padding:13px 22px; border-radius:12px; background:var(--tinta); color:var(--papel); text-decoration:none; font-weight:650}
.cta:hover{background:var(--celeste-hondo)}
.preguntas h2{margin-bottom:8px}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; cursor:pointer; list-style:none}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary h3{margin:0; font-size:18px; font-weight:650; line-height:1.35}
.pregunta summary::after{
  content:""; flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--linea); background:var(--campo);
  background-image:linear-gradient(var(--tinta),var(--tinta)),linear-gradient(var(--tinta),var(--tinta));
  background-size:12px 2px,2px 12px; background-position:center; background-repeat:no-repeat;
}
.pregunta[open] summary::after{background-size:12px 2px,0 0}
.pregunta summary:hover::after{border-color:var(--tinta-2)}
.pregunta .respuesta{padding:0 46px 6px 0}
.mas-opciones{margin:12px 0 0; font-size:15px; color:var(--tinta-2)}
.mas-opciones a{font-weight:650}
.relacionados{list-style:none; padding:0 !important; display:flex; flex-wrap:wrap; gap:8px 10px}
.relacionados a{display:inline-block; padding:6px 13px; border:1px solid var(--linea); border-radius:999px; text-decoration:none; color:var(--tinta); font-size:15px; background:var(--campo)}
.relacionados a:hover{border-color:var(--tinta-2)}

/* ---------- Pie ---------- */
.notas{margin-top:64px; padding-top:24px; border-top:1px solid var(--linea); font-size:15px; color:var(--tinta-2)}
.notas > *{max-width:62ch}
.notas h2{font-size:17px; color:var(--tinta); margin:0 0 8px; font-weight:650}
.notas p{margin:0 0 12px}
.pie{margin-top:56px; border-top:1px solid var(--linea); padding:28px 0 48px; font-size:14px; color:var(--tinta-2)}
.pie ul{display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:0 0 14px; padding:0}
.pie ul a{color:var(--tinta-2)}
.pie p{margin:0; max-width:62ch}

:focus-visible{outline:3px solid var(--celeste-hondo); outline-offset:2px}
.busca input:focus-visible, .panel textarea:focus-visible{outline:none}
.oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@keyframes entra{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.item.nuevo{animation:entra .22s ease-out both}
@media (prefers-reduced-motion:reduce){ .item.nuevo{animation:none} }
[hidden]{display:none !important}