/* BOE Fácil — sistema visual de la Portada (bloques de color por sección, titulares condensados)
   con los componentes de acción de "Para ti" (tarjeta oscura + plazo en lima). */
:root{
  --bg:#ECEEF1; --surface:#FFFFFF; --surface-2:#F6F7F9;
  --ink:#0A0B0F; --ink-2:#3B404B; --ink-3:#69707D;
  --line:#0A0B0F; --line-soft:#D7DAE0;
  --focus:#2433FF;
  --c-normas:#2433FF; --on-normas:#FFFFFF;
  --c-opos:#C6F432;   --on-opos:#0A0B0F;
  --c-reg:#FF7CBF;    --on-reg:#0A0B0F;
  --c-ayudas:#FF5126; --on-ayudas:#0A0B0F;
  --c-conv:#7EDCFF;   --on-conv:#0A0B0F;
  --c-mas:#0A0B0F;    --on-mas:#FFFFFF;
  --act-bg:#0A0B0F; --act-ink:#F4F5F7; --act-muted:#A9AFBA; --act-line:rgba(255,255,255,.16);
  --signal:#C6F432; --signal-ink:#0A0B0F;
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --text:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gap:12px; --maxw:1320px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0B0C10; --surface:#15171D; --surface-2:#1C1F27;
  --ink:#F1F2F4; --ink-2:#BEC3CC; --ink-3:#8C93A0;
  --line:#F1F2F4; --line-soft:#2B2F39; --focus:#C6F432;
  --c-normas:#5866FF; --c-mas:#F1F2F4; --on-mas:#0A0B0F;
  --act-bg:#20232C; --act-line:rgba(255,255,255,.12);
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0B0C10; --surface:#15171D; --surface-2:#1C1F27;
  --ink:#F1F2F4; --ink-2:#BEC3CC; --ink-3:#8C93A0;
  --line:#F1F2F4; --line-soft:#2B2F39; --focus:#C6F432;
  --c-normas:#5866FF; --c-mas:#F1F2F4; --on-mas:#0A0B0F;
  --act-bg:#20232C; --act-line:rgba(255,255,255,.12);
  color-scheme:dark; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:16px}
@media (min-width:720px){ .wrap{padding-inline:28px} }
.h{font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 82, "opsz" 48; letter-spacing:-.02em; line-height:1.02; margin:0; text-wrap:balance}
.mono{font-family:var(--mono)}

/* colores de sección */
.s-normas{--c:var(--c-normas);--on:var(--on-normas)} .s-opos{--c:var(--c-opos);--on:var(--on-opos)}
.s-reg{--c:var(--c-reg);--on:var(--on-reg)} .s-ayudas{--c:var(--c-ayudas);--on:var(--on-ayudas)}
.s-conv{--c:var(--c-conv);--on:var(--on-conv)} .s-mas{--c:var(--c-mas);--on:var(--on-mas)}

/* cabecera */
.mast{padding-block:22px 18px}
.mast .wrap{display:grid; grid-template-columns:1fr auto; gap:16px 24px; align-items:end}
.logo{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75, "opsz" 96; font-size:clamp(52px, 11vw, 132px); line-height:.82; letter-spacing:-.035em}
.logo a{text-decoration:none}
.logo .dot{display:inline-block; width:.2em; height:.2em; background:var(--c-normas); margin-left:.04em}
.mast.small .logo{font-size:clamp(40px, 6vw, 64px)}
.mast-meta{text-align:right; font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.mast-meta strong{display:block; font-family:var(--display); font-variation-settings:"wdth" 85; font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.tagline{grid-column:1/-1; border-top:3px solid var(--line); padding-top:10px; font-size:14px; color:var(--ink-2)}

/* barra de navegación */
.nav{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--ink); color:var(--bg)}
.nav .wrap{display:flex; align-items:center; gap:4px; min-height:48px}
.nav-toggle{display:none; background:none; border:0; padding:10px 0; font-weight:600; font-size:15px; cursor:pointer; color:var(--bg); align-items:center; gap:8px}
.nav-links{display:flex; gap:2px; list-style:none; margin:0; padding:0; flex:1; flex-wrap:wrap}
.nav-links a{display:flex; align-items:center; gap:8px; text-decoration:none; font-size:14px; font-weight:500; padding:8px 12px; color:var(--bg)}
.nav-links a:hover{background:color-mix(in srgb, var(--bg) 14%, transparent)}
.nav-links .sw{width:10px; height:10px; background:var(--c)}
.nav-links .foryou a{font-weight:700}
.nav-links .foryou .sw{background:var(--signal); border-radius:50%}
.nav-links .n{font-family:var(--mono); font-size:12px; opacity:.65}
.theme-btn{margin-left:auto; background:none; border:2px solid color-mix(in srgb, var(--bg) 40%, transparent); color:var(--bg); padding:5px 10px; font-size:13px; font-weight:600; cursor:pointer}
@media (max-width:899px){
  .nav .wrap{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none; flex-basis:100%; flex-direction:column; padding:4px 0 12px}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 4px; font-size:16px; border-top:1px solid color-mix(in srgb, var(--bg) 18%, transparent)}
}

main{padding-block:var(--gap) 48px}

/* ---------- franja "Para ti" ---------- */
.foryou-band{background:var(--surface); padding:20px; margin-bottom:var(--gap); display:grid; gap:14px; border-top:8px solid var(--signal)}
.fy-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px}
.fy-head h2{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 78, "opsz" 72; font-size:clamp(26px, 3.4vw, 38px); letter-spacing:-.025em; line-height:1}
.fy-head p{margin:0; color:var(--ink-2); font-size:14.5px}
.fy-head .who{color:var(--ink)}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; font-weight:600; font-size:14px; text-decoration:underline; text-underline-offset:3px}
.pick{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.pick button,.pick a{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:2px solid var(--ink); background:var(--surface); cursor:pointer; font-weight:600; font-size:15px; text-decoration:none}
.pick button:hover,.pick a:hover{background:var(--ink); color:var(--bg)}
.pick .n{font-family:var(--mono); font-size:12px; font-weight:500; opacity:.7}
.pick .a{font-size:11px; font-weight:700; background:var(--signal); color:var(--signal-ink); padding:2px 6px}
.pick [aria-current="page"]{background:var(--ink); color:var(--bg)}
.fy-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); list-style:none; margin:0; padding:0}
.fy-foot{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center}
.go{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); padding:12px 18px; font-weight:700; text-decoration:none}
.go::after{content:"→"}
@media (max-width:1000px){ .fy-cards{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .foryou-band{padding:16px} }

/* ---------- tarjeta de acción ---------- */
.acard{display:flex; flex-direction:column; gap:12px; height:100%; background:var(--act-bg); color:var(--act-ink); padding:18px; text-decoration:none; min-width:0}
.acard .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--act-muted)}
.flag{background:var(--signal); color:var(--signal-ink); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px}
.acard .h{font-size:21px; color:var(--act-ink)}
.acard .todo-l{margin:0; color:var(--act-muted); font-size:14.5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.facts-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-top:auto}
.fact{padding:10px 12px; border:1px solid var(--act-line); min-width:0}
.fact .k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; opacity:.75}
.fact .v{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 80, "opsz" 48; font-size:26px; line-height:1.05; letter-spacing:-.02em; margin-top:2px; overflow-wrap:anywhere}
.fact .s{font-size:12.5px; margin-top:3px; opacity:.85; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.fact.deadline{background:var(--signal); color:var(--signal-ink); border-color:transparent}
.acard .open{font-weight:700; font-size:13.5px; color:var(--signal)}
.acard .open::after{content:" →"}
@media (prefers-reduced-motion: no-preference){ a.acard,a.tile{transition:transform .15s ease} a.acard:hover,a.tile:hover{transform:translateY(-2px)} }

/* ---------- portada ---------- */
.tile{position:relative; display:flex; flex-direction:column; background:var(--surface); color:var(--ink); text-decoration:none; padding:20px; min-width:0}
.kicker{display:flex; align-items:center; gap:8px; font:600 12px/1.2 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px}
.kicker::before{content:""; flex:none; width:12px; height:12px; background:var(--c, var(--ink))}
.dek{color:var(--ink-2); margin:10px 0 0; font-size:15px; line-height:1.5}
.more{margin-top:auto; padding-top:16px; font:600 13px/1 var(--text)}
.more::after{content:" →"}
.badge{display:inline-block; align-self:flex-start; margin-top:12px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--signal); color:var(--signal-ink); padding:3px 7px}
.front{display:grid; gap:var(--gap); grid-template-columns:repeat(12, minmax(0,1fr))}
.lead{grid-column:span 8; grid-row:span 3; background:var(--c); color:var(--on); padding:clamp(20px, 3.4vw, 44px); min-height:520px}
.lead .kicker{color:var(--on)} .lead .kicker::before{background:var(--on)}
.lead .fig{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75, "opsz" 96; font-size:clamp(84px, 15vw, 200px); line-height:.78; letter-spacing:-.05em; margin:18px 0 6px; overflow-wrap:anywhere}
.lead .fig small{display:block; font-size:.3em; letter-spacing:-.02em; line-height:1; margin-top:.25em; font-variation-settings:"wdth" 85}
.lead .h{font-size:clamp(30px, 3.8vw, 52px); margin-top:auto; padding-top:28px; max-width:18ch}
.lead .dek{color:var(--on); opacity:.92; font-size:17px; max-width:60ch}
.lead .badge{background:var(--on); color:var(--c)}
.second{grid-column:span 4; border-top:8px solid var(--c)}
.second .h{font-size:clamp(22px, 2vw, 27px)}
.second .dek{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:14.5px}

.sec{margin-top:calc(var(--gap) * 4); scroll-margin-top:60px}
.sec-head{display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px 24px; background:var(--c); color:var(--on); padding:18px 20px 16px}
.sec-head h2{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75, "opsz" 96; font-size:clamp(38px, 6vw, 76px); line-height:.85; letter-spacing:-.035em}
.sec-head p{margin:8px 0 0; font-size:15px; max-width:62ch}
.sec-head .big{grid-row:1/3; grid-column:2; text-align:right; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75, "opsz" 96; font-size:clamp(48px, 8vw, 104px); line-height:.8; letter-spacing:-.04em}
.sec-head .big small{display:block; font:600 12px/1.2 var(--text); letter-spacing:.06em; text-transform:uppercase; margin-top:8px}
.grid{display:grid; gap:var(--gap); margin-top:var(--gap)}
.g4{grid-template-columns:repeat(4, minmax(0,1fr))} .g3{grid-template-columns:repeat(3, minmax(0,1fr))} .g2{grid-template-columns:repeat(2, minmax(0,1fr))}
.card .h{font-size:21px}
.card .dek{font-size:14px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.card .fig{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75, "opsz" 96; font-size:44px; line-height:.9; letter-spacing:-.03em; margin:0 0 4px}
.card .figlab{font:500 12.5px/1.35 var(--text); color:var(--ink-3); margin-bottom:14px}
.card.wide{grid-column:span 2}
.group .places{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.group .places a{font:500 13.5px/1 var(--text); padding:9px 11px; border:2px solid var(--ink); text-decoration:none}
.group .places a:hover{background:var(--c); color:var(--on); border-color:var(--c)}

/* tablero de oposiciones */
.board{background:var(--surface); margin-top:var(--gap)}
.board-head,.board a{display:grid; grid-template-columns:110px minmax(0,1.6fr) minmax(0,1fr) 170px 24px; gap:16px; align-items:center; padding:14px 20px}
.board-head{font:600 11.5px/1 var(--text); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); border-bottom:3px solid var(--line); padding-block:16px 12px}
.board > div + div a{border-top:1px solid var(--line-soft)}
.board a{text-decoration:none; color:var(--ink)}
.board a:hover{background:var(--surface-2)}
.board .pl{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75, "opsz" 96; font-size:46px; line-height:.85; letter-spacing:-.04em}
.board .pl.none{font-size:15px; font-family:var(--text); font-weight:500; color:var(--ink-3); letter-spacing:0}
.board .pl-bar{display:block; height:6px; margin-top:6px; background:var(--c-opos)}
.board .pu{font-weight:600; font-size:16.5px; line-height:1.3}
.board .wh{font-size:14.5px; color:var(--ink-2)}
.board .pz{font-family:var(--mono); font-size:13px}
.board .arr{text-align:right}
.fixes{display:flex; flex-wrap:wrap; gap:var(--gap); margin-top:var(--gap)}
.fix{flex:1 1 280px; display:flex; gap:12px; align-items:baseline; background:var(--surface); padding:14px 16px; text-decoration:none; font-size:14.5px}
.fix b{flex:none; font:700 11px/1 var(--text); letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:var(--bg); padding:5px 6px}

/* registradores */
.reg .num{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-bottom:10px}
.reg .tile .h{font-size:22px; font-weight:650; font-variation-settings:"wdth" 88, "opsz" 36}
.reg .tile::after{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--c)}
.reg .first{grid-column:span 2; grid-row:span 2; background:var(--c); color:var(--on)}
.reg .first::after{display:none}
.reg .first .h{font-size:clamp(28px, 3.2vw, 40px); font-weight:800; font-variation-settings:"wdth" 78, "opsz" 72}
.reg .first .dek,.reg .first .num{color:var(--on); opacity:.85}

/* resto sin ficha */
.rest{margin-top:calc(var(--gap) * 4)}
.rest h2{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 80, "opsz" 72; font-size:clamp(28px, 4vw, 40px); letter-spacing:-.025em; line-height:1; margin:0 0 6px}
.rest > p{color:var(--ink-2); margin:0 0 16px; max-width:70ch}
details.drawer{background:var(--surface); margin-top:6px}
details.drawer summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; padding:16px 20px; font-weight:600}
details.drawer summary::-webkit-details-marker{display:none}
details.drawer summary .c{font-family:var(--mono); font-size:13px; color:var(--ink-3); font-weight:500}
details.drawer ul{list-style:none; margin:0; padding:0 20px 12px}
details.drawer li a{display:block; padding:12px 0; border-top:1px solid var(--line-soft); text-decoration:none; font-size:14.5px; line-height:1.4}
details.drawer li a:hover .t{text-decoration:underline}
details.drawer li .d{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:3px}

.warn{display:flex; gap:12px; align-items:flex-start; background:var(--ink); color:var(--bg); padding:14px 18px; font-size:14px; line-height:1.45}
.warn b{flex:none; font:700 11px/1 var(--text); letter-spacing:.06em; text-transform:uppercase; border:1.5px solid currentColor; padding:4px 6px; margin-top:1px}
.foot{margin-top:48px; padding-block:24px 40px; border-top:3px solid var(--line); font-size:14px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}


/* ---------- página de perfil ---------- */
.p-head{background:var(--act-bg); color:var(--act-ink); padding:clamp(20px, 3.4vw, 40px); display:grid; gap:14px}
.p-head .eyebrow{font:600 12px/1.2 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--act-muted)}
.p-head h1{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75, "opsz" 96; font-size:clamp(48px, 9vw, 120px); line-height:.85; letter-spacing:-.04em}
.p-head .stat{font-size:17px; color:var(--act-muted)} .p-head .stat b{color:var(--signal)}
.p-head .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.mine{background:var(--signal); color:var(--signal-ink); border:0; padding:11px 16px; font-weight:700; cursor:pointer}
.mine[aria-pressed="true"]{background:transparent; color:var(--signal); outline:2px solid var(--signal); outline-offset:-2px}
.p-switch{margin-top:var(--gap); background:var(--surface); padding:16px 20px; display:grid; gap:10px}
.p-switch .lab{font:600 12px/1.2 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.p-switch .pick a{border-width:1.5px; padding:8px 12px; font-size:14px}
.block-title{display:flex; align-items:baseline; gap:12px; margin:calc(var(--gap) * 3) 0 var(--gap)}
.block-title h2{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 80, "opsz" 72; font-size:clamp(26px, 3.4vw, 38px); letter-spacing:-.025em; line-height:1}
.block-title .n{font-family:var(--mono); font-size:14px; color:var(--ink-3)}
.cards-act{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); list-style:none; margin:0; padding:0}
@media (max-width:860px){ .cards-act{grid-template-columns:minmax(0,1fr)} }

/* ---------- artículo ---------- */
.art-top{background:var(--c); color:var(--on)}
.art-top .wrap{padding-block:18px clamp(28px, 5vw, 56px)}
.back{display:inline-flex; align-items:center; gap:8px; background:var(--on); color:var(--c); padding:10px 14px; font-weight:600; font-size:14px; text-decoration:none}
.art-top .kicker{color:var(--on); margin:28px 0 14px} .art-top .kicker::before{background:var(--on)}
.art-top h1{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 78, "opsz" 96; font-size:clamp(36px, 6.4vw, 84px); line-height:.92; letter-spacing:-.035em; margin:0; max-width:20ch; text-wrap:balance}
.art-top .lede{font-size:clamp(17px, 1.8vw, 21px); line-height:1.45; max-width:62ch; margin:20px 0 0}
.art-top .who{display:flex; flex-wrap:wrap; gap:6px; margin-top:20px}
.art-top .who a{font:600 13px/1 var(--text); padding:8px 10px; border:1.5px solid currentColor; text-decoration:none}
.art-top .who a:hover{background:var(--on); color:var(--c)}
.art-body{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--gap); margin-top:var(--gap)}
.art-main > section,.art-side > section{background:var(--surface); padding:clamp(18px, 2.6vw, 30px); margin-bottom:var(--gap)}
.art-main > .act-block{background:var(--act-bg); color:var(--act-ink)}
.art-main h2,.art-side h2{font:700 12px/1.2 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.act-block h2{color:var(--act-muted)}
.act-block .todo-t{margin:0 0 16px; font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 92, "opsz" 24; font-size:clamp(20px, 2.2vw, 25px); line-height:1.3; letter-spacing:-.01em}
.keys{list-style:none; margin:0; padding:0; counter-reset:k}
.keys li{counter-increment:k; display:grid; grid-template-columns:44px 1fr; gap:10px; padding:12px 0; border-top:1px solid var(--line-soft); font-size:17px; line-height:1.45}
.keys li:first-child{border-top:0; padding-top:0}
.keys li::before{content:counter(k, decimal-leading-zero); font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 75; font-size:26px; line-height:1}
.items{display:grid}
.item{padding:16px 0; border-top:1px solid var(--line-soft)}
.item:first-child{border-top:0; padding-top:0}
.item .amt{font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 78, "opsz" 72; font-size:clamp(30px, 3.4vw, 42px); line-height:1; letter-spacing:-.03em}
.item .date{display:inline-block; font-family:var(--mono); font-size:13px; font-weight:600; background:var(--ink); color:var(--bg); padding:4px 7px; margin-bottom:8px}
.item .desc{font-weight:600; font-size:16px; margin:6px 0 10px; line-height:1.4}
.cita{margin:0; padding:10px 14px; border-left:4px solid var(--c); background:var(--surface-2); font-family:var(--mono); font-size:13px; line-height:1.55; color:var(--ink-2)}
.cita::before{content:"Texto literal del BOE"; display:block; font:600 10.5px/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.facts{margin:0; display:grid; gap:14px}
.facts dt{font:600 11px/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.facts dd{margin:0; font-size:14.5px; line-height:1.45}
.links{display:grid; gap:8px}
.btn{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; text-decoration:none; font-weight:600; font-size:15px; border:2px solid var(--ink)}
.btn.primary{background:var(--ink); color:var(--bg)}
.btn:hover{background:var(--c); color:var(--on); border-color:var(--c)}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags a,.tags span{font-size:12.5px; padding:5px 8px; background:var(--surface-2); border:1px solid var(--line-soft); text-decoration:none}
.tags a:hover{border-color:var(--ink)}
.next{display:block; text-decoration:none}
.next .h{font-size:22px; margin-top:4px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .lead{grid-column:1/-1; grid-row:auto; min-height:0}
  .g4,.g3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .art-body{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:760px){
  .front,.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}
  .second,.card.wide,.reg .first{grid-column:auto; grid-row:auto}
  .lead .h{max-width:none}
  .sec-head{grid-template-columns:1fr; padding:16px}
  .sec-head .big{grid-row:auto; grid-column:auto; text-align:left}
  .board-head{display:none}
  .board a{grid-template-columns:72px minmax(0,1fr); gap:4px 14px; padding:14px 16px}
  .board .pl{grid-row:1/4; align-self:start; font-size:40px}
  .board .wh,.board .pz{grid-column:2}
  .board .arr{display:none}
  .art-body{grid-template-columns:minmax(0,1fr)}
  .mast .wrap{grid-template-columns:1fr}
  .mast-meta{text-align:left}
  .tile{padding:18px 16px}
  details.drawer summary{padding:14px 16px}
  details.drawer ul{padding:0 16px 10px}
  .keys li{grid-template-columns:36px 1fr; font-size:16px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-links .s-mas .sw{background:transparent; outline:2px solid var(--bg); outline-offset:-2px}
[hidden]{display:none !important}

/* ---------- filtros ---------- */
.tgl{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:2px solid var(--ink); background:var(--surface); cursor:pointer; font-weight:600; font-size:14.5px}
.tgl .n{font-family:var(--mono); font-size:12px; font-weight:500; opacity:.7}
.tgl[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.tgl[data-t="act"][aria-pressed="true"]{background:var(--signal); color:var(--signal-ink); border-color:var(--signal)}
.results{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); margin-bottom:var(--gap)}
.res{display:flex; min-width:0} .res > a{flex:1}
.res-div{grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; padding-top:10px; border-bottom:3px solid var(--line); padding-bottom:8px}
.res-div h3{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 80, "opsz" 72; font-size:clamp(22px, 2.6vw, 30px); letter-spacing:-.02em; line-height:1}
.res-div a{font-weight:600; font-size:14px}
.results .empty{grid-column:1/-1; background:var(--surface); padding:24px; margin:0}
.card .where{display:block; margin-top:8px; font-family:var(--mono); font-size:12px; color:var(--ink-3)}

/* "Tu BOE": un solo panel para filtrar y guardar */
.f-saved{margin:0; font-size:14px; font-weight:600; background:var(--signal); color:var(--signal-ink); padding:8px 12px; justify-self:start}
.pick button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.pick button[aria-pressed="true"] .a{background:var(--signal); color:var(--signal-ink)}

/* pie y página "Qué es" */
.foot-links{display:inline-flex; flex-wrap:wrap; gap:8px 20px}
.about{background:var(--surface); padding:clamp(20px, 4vw, 48px); margin-top:var(--gap); max-width:820px}
.about h1{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 78, "opsz" 96; font-size:clamp(40px, 6vw, 72px); line-height:.92; letter-spacing:-.035em}
.about .lede{font-size:clamp(18px, 2vw, 21px); line-height:1.45; margin:18px 0 0; max-width:62ch}
.about h2{margin:32px 0 8px; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 80, "opsz" 48; font-size:26px; letter-spacing:-.02em}
.about p{max-width:65ch; margin:0 0 12px; font-size:16.5px; line-height:1.6}

@media (max-width:1000px){ .results{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){ .results{grid-template-columns:minmax(0,1fr)} }

/* ---------- "Tu BOE": barra de filtros compacta ---------- */
.tb{display:grid; gap:8px; margin-bottom:var(--gap); scroll-margin-top:60px}
.tb-bar{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,210px) minmax(0,250px) auto; gap:8px; background:var(--surface); padding:10px}
.tb input,.tb select,.tb-more{font-size:15px; padding:10px 12px; border:2px solid var(--ink); border-radius:0; background:var(--surface); color:var(--ink); min-width:0}
.tb input,.tb select{width:100%}
.tb-q,.tb-sel{display:block; min-width:0}
.tb-more{font-weight:600; cursor:pointer; white-space:nowrap}
.tb-more[aria-expanded="true"]{background:var(--ink); color:var(--bg)}
.tb-panel{display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--surface); padding:10px}
.tb-panel .tb-sel{flex:0 1 260px}
.tgl{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:2px solid var(--ink); background:var(--surface); cursor:pointer; font-weight:600; font-size:14.5px}
.tgl .n{font-family:var(--mono); font-size:12px; font-weight:500; opacity:.7}
.tgl[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.tgl[data-t="act"][aria-pressed="true"]{background:var(--signal); color:var(--signal-ink); border-color:var(--signal)}
.tb-active{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:2px 0}
.tb-status{font-family:var(--mono); font-size:13px; color:var(--ink-2)}
.tb-chips{display:contents}
.chip-x{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; background:var(--ink); color:var(--bg); border:0; font-weight:600; font-size:13.5px; cursor:pointer}
.chip-x span{opacity:.7}
.tb-active .mine{margin-left:auto; padding:8px 14px}
.tb-active .f-saved{margin-left:auto}
.tb-saved{background:var(--surface); padding:20px; display:grid; gap:14px; border-top:8px solid var(--signal)}
@media (max-width:760px){
  .tb-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tb-q,.tb-more{grid-column:1/-1}
  .tb-saved{padding:16px}
}
.mast-meta a{color:inherit}
.days{list-style:none; margin:24px 0 0; padding:0; display:grid}
.days a{display:grid; gap:4px; padding:14px 0; border-top:1px solid var(--line-soft); text-decoration:none}
.days a:hover strong{text-decoration:underline}
.days strong{font-family:var(--display); font-size:22px; font-weight:700}
.days .mono{font-size:12.5px; color:var(--ink-3)}
.days .tops{font-size:14.5px; color:var(--ink-2)}
.lead:not(:has(.fig)){min-height:0} .lead:not(:has(.fig)) .h{margin-top:12px; padding-top:0}