/* Páginas interiores del sitio público (relatoría, privacidad, términos). Mismos colores y letras que la portada. */
:root{
  --fondo:#ffffff; --suave:#f4f5f8; --tinta:#121a36; --gris:#565f7d; --linea:#e1e4ee;
  --oro:#ffb21a; --oro-suave:#fff4d9; --oro-tinta:#7a4f00;
  --tit:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --txt:"Geist","Segoe UI",system-ui,sans-serif;
  --borde:1px solid var(--linea);
}
*{box-sizing:border-box}
html{scroll-padding-top:88px}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font:16px/1.6 var(--txt);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:4px}
.ancho{width:min(100% - 48px,1180px);margin-inline:auto}
@media (min-width:900px){.ancho{width:min(100% - 160px,1180px)}}
.salto{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:8px;z-index:20}
.salto:focus{left:16px}

/* barra */
.barra{position:sticky;top:0;z-index:10;background:var(--fondo);border-bottom:var(--borde)}
.barra__fila{display:flex;align-items:center;gap:32px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font:500 20px/1 var(--tit);letter-spacing:-.02em;text-decoration:none}
.marca{width:28px;height:28px;flex:none}
.barra__nav{display:flex;gap:28px;margin-inline:auto}
.barra__nav a,.barra__entrar{font-weight:500;font-size:15px;text-decoration:none;padding:10px 0;position:relative}
.barra__nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.barra__nav a:hover::after,.barra__nav a[aria-current]::after{transform:scaleX(1)}
.barra__acc{display:flex;align-items:center;gap:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:10px;background:var(--tinta);color:#fff;font:500 16px/1 var(--txt);text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{background:#1f2b57;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn--grande{min-height:56px;padding:0 30px;font-size:17px;background:var(--oro);color:#1c1400}
.btn--grande:hover{background:#ffc54d}
@media (max-width:860px){.barra__nav,.barra__entrar{display:none}.barra__acc{margin-left:auto}}
@media (max-width:520px){.barra__acc .btn{display:none}}

/* cabeza */
.migas{padding-top:28px;font-size:14px;color:var(--gris)}
.migas a{text-decoration:none}
.migas a:hover{text-decoration:underline}
.cabeza{padding:20px 0 40px;max-width:820px}
h1{font:500 clamp(34px,4.6vw,58px)/1.04 var(--tit);letter-spacing:-.035em;text-wrap:balance}
.entrada{margin-top:20px;font-size:19px;line-height:1.55;color:#2a3354;max-width:68ch}
.cabeza__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.enl{font-weight:500;text-underline-offset:4px;text-decoration-thickness:1.5px}
.enl:hover{text-decoration-color:var(--oro)}
.claves{margin-top:44px;padding:28px 32px;background:var(--suave);border-radius:16px}
.claves h2{font:500 22px/1.2 var(--tit);letter-spacing:-.02em}
.claves ol{margin-top:14px;padding-left:22px;display:grid;gap:8px}
.claves li::marker{font-weight:500;color:var(--oro-tinta)}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0}
.filtros--temas{padding-bottom:36px}
.filtro{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:var(--borde);border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;background:var(--fondo);transition:border-color .15s,background .15s}
.filtro span{font-weight:400;color:var(--gris);font-variant-numeric:tabular-nums}
.filtro:hover{border-color:var(--tinta)}
.filtro.es-activo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.filtro.es-activo span{color:#c5cae0}
.filtro--oro{background:var(--oro-suave);border-color:#f3d68a}
.filtros--temas .filtro{min-height:34px;font-size:14px;background:var(--suave);border-color:transparent}
.filtros--temas .filtro.es-activo{background:var(--tinta)}

/* cuerpo */
.dos{display:grid;gap:56px;align-items:start}
@media (min-width:1080px){.dos{grid-template-columns:minmax(0,1fr) 320px;gap:72px}}
.bloque{padding:8px 0 56px}
.bloque>h2,.oficiales h2,.cierre h2{font:500 clamp(26px,2.6vw,34px)/1.1 var(--tit);letter-spacing:-.03em}
.bloque>h2+p{margin-top:10px;color:var(--gris);max-width:64ch}
.nota{padding:26px 0;border-bottom:var(--borde)}
.nota:first-of-type{margin-top:8px}
.nota__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;color:var(--gris)}
.corte{font-weight:500;color:var(--tinta);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.corte::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oro)}
.corte--suprema::before{background:#121a36}
.corte--consejo-estado::before{background:#2f7d6b}
.prov{font-size:13px;font-weight:500;padding:2px 8px;border-radius:6px;background:var(--suave);color:var(--tinta);font-variant-numeric:tabular-nums}
.nota h3{margin-top:10px;font:500 22px/1.25 var(--tit);letter-spacing:-.02em;text-wrap:pretty}
.nota h3 a{text-decoration:none;background:linear-gradient(var(--oro),var(--oro)) 0 100%/0 2px no-repeat;transition:background-size .25s}
.nota h3 a:hover{background-size:100% 2px}
.nota>p:not([class]){margin-top:10px;color:#2a3354;max-width:70ch}
.nota__pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-size:14px}
.chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--suave);font-size:13px;font-weight:500;text-decoration:none}
.chip:hover{background:#e7e9f1}
.chip--oro{background:var(--oro-suave);color:var(--oro-tinta)}
.vacio{padding:32px 0;color:var(--gris)}
.paginador{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;font-size:15px;color:var(--gris)}
.paginador a{font-weight:500;color:var(--tinta)}
.oficiales{position:sticky;top:96px;padding:28px;background:var(--suave);border-radius:16px}
.oficiales h2{font-size:24px}
.oficiales p{margin-top:10px;font-size:15px;color:var(--gris)}
.oficiales ul{list-style:none;padding:0;margin-top:18px;display:grid;gap:14px}
.oficiales li a{font-weight:500;text-underline-offset:4px}
.oficiales li span{display:block;font-size:14px;color:var(--gris);margin-top:2px}
@media (max-width:1079px){.oficiales{position:static}}
.bloque--oro{margin-top:8px;padding:40px;background:var(--oro-suave);border-radius:20px;margin-bottom:56px}
.bloque--oro .nota{border-color:#f0dca6}
.bloque--oro .chip{background:#fff}
@media (max-width:640px){.bloque--oro{padding:28px 20px}}
.faq{display:grid;gap:0 56px;margin-top:20px}
@media (min-width:860px){.faq{grid-template-columns:1fr 1fr}}
.faq>div{padding:22px 0;border-bottom:var(--borde)}
.faq h3{font:500 19px/1.3 var(--tit);letter-spacing:-.015em}
.faq p{margin-top:8px;color:#2a3354}
.prosa{max-width:72ch}
.prosa h2{font:500 24px/1.2 var(--tit);letter-spacing:-.02em;margin-top:36px}
.prosa p{margin-top:10px}
.cierre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;margin:16px 0 72px;padding:44px;background:var(--tinta);color:#fff;border-radius:20px}
.cierre p{margin-top:10px;color:#c5cae0;max-width:56ch}
@media (max-width:640px){.cierre{padding:32px 24px}}

/* pie */
.pie{border-top:var(--borde);padding:36px 0 110px}
.pie__fila{display:grid;gap:20px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
.pie nav a{text-decoration:none;padding:6px 0}
.pie nav a:hover{text-decoration:underline}
.compartir{justify-self:start;min-height:44px;padding:0 18px;border:1px solid var(--tinta);border-radius:10px;background:none;color:inherit;font:500 15px/1 var(--txt);cursor:pointer}
.compartir:hover{background:var(--suave)}
.pie__nota{font-size:13px;color:var(--gris);max-width:90ch}
.fija{display:none}
@media (max-width:520px){
  .fija{display:block;position:fixed;inset:auto 0 0 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--fondo);border-top:var(--borde);z-index:9}
  .fija .btn{width:100%;min-height:48px}
}
@media (min-width:521px){.pie{padding-bottom:48px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
