:root{
  color-scheme:light;
  --paper:#FBF7F1; --white:#FFFFFF; --sand:#FFECDB;
  --ink:#262826; --ink-2:#515351; --ink-3:#6E6F6E; --line:#D9D6CF; --line-2:#E9EAE9;
  --blue:#3E89FF; --blue-t:#2C61B5; --red:#FF634E; --red-t:#B54637; --yellow:#FFC314; --yellow-t:#8C6B0B; --mint:#0CA172; --mint-t:#097251; --green:#2ED874;
  --serif:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:#FBF7F1}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:#FBF7F1; color:#262826; font-family:var(--sans); font-size:16px; line-height:1.6; padding-bottom:0; -webkit-font-smoothing:antialiased}
.wrap{max-width:1240px; margin-inline:auto; padding-inline:max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px))}
a{color:inherit; text-decoration-color:var(--blue); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--blue-t)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

/* Barra superior */
.topbar{background:var(--ink); color:var(--paper)}
.topbar .wrap{display:flex; justify-content:space-between; gap:6px 24px; flex-wrap:wrap; padding-block:9px; font:700 .7rem/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase}
.topbar .fecha{color:#fff}

/* Cabecera */
.masthead{margin:0; padding:22px 0 6px; font:800 clamp(2.5rem,11.4vw,9.4rem)/.9 var(--sans); letter-spacing:-.045em; text-transform:uppercase; color:var(--ink); overflow-wrap:anywhere}
.formas{display:flex; gap:8px; height:14px; margin:8px 0 14px}
.formas i{display:block; height:100%; border-radius:999px; flex:1}
.formas i:nth-child(1){background:var(--blue); flex:3} .formas i:nth-child(2){background:var(--yellow); flex:1} .formas i:nth-child(3){background:var(--red); flex:2} .formas i:nth-child(4){background:var(--mint); flex:1} .formas i:nth-child(5){background:var(--green); flex:2} .formas i:nth-child(6){background:var(--ink); flex:3}
.tagline{margin:0 0 4px; font:italic 400 1.1rem/1.4 var(--serif); color:var(--ink-2)}

/* Ticker */
.ticker{border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); margin-top:14px; overflow:hidden; white-space:nowrap}
.ticker-in{display:inline-block; padding:9px 0; font:700 .78rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; animation:marq 60s linear infinite}
.ticker-in span{padding-right:1.1em}
.ticker-in b{color:var(--blue-t); padding-right:1.1em}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker{white-space:normal}.ticker-in{animation:none}}

/* Selector */
.controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:14px 0; border-bottom:1px solid var(--line)}
.controls label{font:800 .7rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--blue-t)}
.controls select{font:700 .95rem/1.2 var(--sans); color:var(--ink); background:#FBF7F1; border:0; border-bottom:2px solid var(--ink); border-radius:0; padding:6px 28px 6px 0; min-width:0; max-width:100%; cursor:pointer}
.controls .estado{margin-left:auto; font:600 .85rem/1.3 var(--sans); color:var(--ink-2)}
.controls button.limpiar{font:700 .85rem/1.2 var(--sans); color:var(--ink); background:none; border:0; border-bottom:2px solid var(--blue); padding:2px 0; cursor:pointer}
.controls button.limpiar:hover{color:var(--blue-t)}

/* Índice */
.indice{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); counter-reset:n; border-bottom:2px solid var(--ink)}
@media (min-width:760px){.indice{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1060px){.indice{grid-template-columns:repeat(4,minmax(0,1fr))}}
.indice li{counter-increment:n; padding:14px 16px 16px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding-left:14px; position:relative}
.indice li::before{content:counter(n,decimal-leading-zero); display:block; font:700 .7rem/1 var(--sans); letter-spacing:.12em; color:var(--ink-3); margin-bottom:8px}
.indice li::after{content:''; position:absolute; left:14px; right:16px; top:-1px; height:4px; background:var(--cr)}
.indice li.paid{--cr:var(--blue); --c:var(--blue-t)} .indice li.seo{--cr:var(--red); --c:var(--red-t)} .indice li.ai{--cr:var(--yellow); --c:var(--yellow-t)} .indice li.tools{--cr:var(--mint); --c:var(--mint-t)}
.indice .w{display:flex; align-items:baseline; justify-content:space-between; gap:8px; width:100%; text-align:left; background:none; border:0; padding:0 0 6px; font:800 clamp(1.45rem,3.6vw,2.05rem)/1.05 var(--sans); letter-spacing:-.04em; color:var(--ink); cursor:pointer; overflow-wrap:anywhere}
.indice .w::after{content:'\2192'; font-weight:600; font-size:.7em; color:var(--c); transition:transform .15s}
.indice .w:hover{color:var(--c)} .indice .w:hover::after{transform:translateX(4px)}
.indice li.activo .w{color:var(--c)}
.indice li.vacio .w{color:#9B9C9B}
.indice .cnt{display:block; font:700 .7rem/1.35 var(--sans); letter-spacing:.06em; color:var(--ink-3); padding:0 0 4px}
.indice a.sub{display:block; font:500 .88rem/1.35 var(--sans); color:var(--ink-2); text-decoration:none; padding:2px 0}
.indice a.sub:hover{color:var(--c)}

/* Vista */
.vista{margin-top:34px; scroll-margin-top:12px}
.vista-head{margin:0 0 6px; font:800 clamp(2rem,5vw,3.4rem)/1 var(--sans); letter-spacing:-.04em; text-transform:uppercase}
.vista-sub{margin:0 0 24px; font:600 .9rem/1.4 var(--sans); color:var(--ink-2)}
.fecha-h{display:flex; align-items:baseline; gap:14px; margin:42px 0 0; padding:10px 0; border-top:2px solid var(--ink)}
.fecha-h:first-of-type{margin-top:0}
.fecha-h h2{margin:0; font:italic 700 1.35rem/1.1 var(--serif)}
.fecha-h span{font:800 .72rem/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--blue-t)}
.vacio-msg{padding:30px 0; color:var(--ink-2)}

/* Notas */
.grid{display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line)}
@media (min-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
article{padding:20px 22px 26px 0; border-bottom:1px solid var(--line); break-inside:avoid; --cr:var(--blue); --c:var(--blue-t)}
@media (min-width:760px){article{padding-left:22px; border-left:1px solid var(--line)} .grid>article:nth-child(2n+1){border-left:0; padding-left:0}}
@media (min-width:1060px){.grid>article:nth-child(2n+1){border-left:1px solid var(--line); padding-left:22px} .grid>article:nth-child(3n+1){border-left:0; padding-left:0}}
article.paid{--cr:var(--blue); --c:var(--blue-t)} article.seo{--cr:var(--red); --c:var(--red-t)} article.ai{--cr:var(--yellow); --c:var(--yellow-t)} article.tools{--cr:var(--mint); --c:var(--mint-t)}
.kicker{margin:0 0 10px; padding-top:8px; border-top:4px solid var(--cr); font:800 .7rem/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--c)}
.kicker .flag{color:var(--ink-3); font-weight:700}
.titular{margin:0 0 10px; font:700 1.3rem/1.22 var(--serif); letter-spacing:-.01em}
.dek{margin:0 0 12px; font:500 1rem/1.5 var(--sans); color:var(--ink-2)}
.etiquetas{margin:0 0 12px; font:800 .72rem/1.9 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.etiquetas::before{content:'Etiquetas  '; font-weight:600; letter-spacing:.04em}
.etq{background:none; border:0; padding:0 0 1px; margin:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--c); cursor:pointer; border-bottom:2px solid var(--cr)}
.etq:hover{background:var(--sand)}
.fuente{margin:0 0 14px; font:600 .76rem/1.5 var(--sans); color:var(--ink-3)}
.fuente a{color:var(--ink-2)}
.cuerpo{font-size:.97rem; line-height:1.62}
.cuerpo p{margin:0 0 .8em}
.cierre{margin-top:16px; display:grid; gap:12px; font-size:.9rem; line-height:1.5}
.cierre p{margin:0; padding:10px 0 0 12px; border-left:3px solid var(--cr)}
.cierre b{display:block; font:800 .66rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--c); margin-bottom:4px}

/* Nota principal */
.grid>article.lead{grid-column:1/-1; border-left:0; padding-left:0; padding-right:0}
@media (min-width:900px){ article.lead{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:44px; align-items:start} }
article.lead .titular{font-size:clamp(1.8rem,3.8vw,3rem); line-height:1.12; letter-spacing:-.02em}
article.lead .dek{font-size:1.15rem}
article.lead .cuerpo{font-size:1.02rem}

/* Pie */
footer{margin-top:64px; background:var(--ink); color:var(--paper)}
footer .wrap{display:flex; justify-content:space-between; gap:14px 40px; flex-wrap:wrap; padding-block:34px 40px}
footer p{margin:0; max-width:62ch; font:500 .8rem/1.6 var(--sans); color:#BCBCBC}
footer .lema{font:italic 700 1.3rem/1.3 var(--serif); color:#fff}

/* Portada en tres columnas, estilo diario */
.masthead{text-align:center; font:700 clamp(2.6rem,10vw,7.4rem)/.95 var(--serif); letter-spacing:-.035em; text-transform:none; padding:18px 0 8px}
.tagline{text-align:center; margin:0 0 6px}
.formas{max-width:520px; margin-inline:auto}
.controls{border-bottom-style:dashed} .indice li{border-bottom-style:dashed; border-right-style:dashed} .grid{border-top-style:dashed} article{border-bottom-style:dashed; border-left-style:dashed}
.p3{display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:1px dashed var(--line)}
.p3>*{padding-block:22px; border-bottom:1px dashed var(--line)}
.centro{order:1} .vistazo{order:2} .lado{order:3}
@media (min-width:1060px){
  .p3{grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr) minmax(0,.85fr); border-bottom:1px dashed var(--line)}
  .p3>*{border-bottom:0; padding-inline:26px}
  .vistazo{order:1; padding-left:0} .centro{order:2; border-inline:1px dashed var(--line)} .lado{order:3; padding-right:0}
}
.vz-t{margin:0 0 14px; font:700 1.6rem/1.1 var(--serif); letter-spacing:-.01em}
.vz{list-style:none; counter-reset:v; margin:0; padding:0}
.vz li{counter-increment:v; position:relative; padding:0 0 16px 28px; font:400 .98rem/1.5 var(--serif); color:var(--ink-2)}
.vz li::before{content:counter(v); position:absolute; left:0; top:0; font:700 .95rem/1.5 var(--sans); color:var(--ink)}
.vz-a{font-weight:700; color:var(--ink); text-decoration-color:var(--ink)}
.vz-a:hover{color:var(--blue-t)}
.centro article,.lado article{border:0; padding:0 0 22px}
.lado article{border-bottom:1px dashed var(--line); margin-bottom:22px}
.lado article:last-child{border-bottom:0; margin-bottom:0}
.centro .kicker{text-align:center}
.centro .titular{text-align:center; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.12; letter-spacing:-.02em}
.centro .dek{text-align:center; font-size:1.15rem; font-family:var(--serif)}
.centro .etiquetas,.centro .fuente{text-align:center}
.centro .cuerpo,.centro .cierre{max-width:62ch; margin-inline:auto}
.lado .titular{font-size:1.2rem}
.lado .dek{font-family:var(--serif)}

/* Resumen horizontal sobre negro y notas en columnas continuas */
.resumen-n{background:var(--ink); color:var(--paper); padding:22px 24px 8px; margin:0 0 6px}
.rn-t{margin:0 0 16px; font:800 .72rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#BCBCBC}
.rn{list-style:none; counter-reset:r; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0 22px}
.rn li{counter-increment:r; position:relative; padding:12px 0 18px; border-top:3px solid var(--cr)}
.rn li.paid{--cr:var(--blue)} .rn li.seo{--cr:var(--red)} .rn li.ai{--cr:var(--yellow)} .rn li.tools{--cr:var(--mint)}
.rn li::before{content:counter(r); position:absolute; right:0; top:10px; font:700 .8rem/1 var(--sans); color:#9B9C9B}
.rn-k{display:block; margin-bottom:6px; font:800 .66rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cr)}
.rn-a{display:block; margin-bottom:6px; font:700 1.05rem/1.2 var(--serif); color:#fff; text-decoration-color:var(--cr)}
.rn-a:hover{color:#fff; text-decoration-thickness:3px}
.rn-d{margin:0; font:400 .85rem/1.45 var(--sans); color:#D9D6CF}
.grid.cols{display:block; column-count:1; column-gap:44px; column-rule:1px dashed var(--line); border-top:0; padding-top:6px}
@media (min-width:760px){.grid.cols{column-count:2}}
@media (min-width:1060px){.grid.cols{column-count:3}}
.grid.cols>article,.grid.cols>article:nth-child(n){display:block; break-inside:avoid; border-left:0; padding:20px 0 26px; border-bottom:1px dashed var(--line); margin:0}

/* Monocromo: sin colores por categoría. Solo la banda de formas conserva los colores de la marca */
.formas i:nth-child(1){background:#3E89FF} .formas i:nth-child(2){background:#FFC314} .formas i:nth-child(3){background:#FF634E} .formas i:nth-child(4){background:#0CA172} .formas i:nth-child(5){background:#2ED874}
:root{--blue:#262826; --blue-t:#262826; --red:#262826; --red-t:#262826; --yellow:#262826; --yellow-t:#262826; --mint:#262826; --mint-t:#262826}
a{text-decoration-color:var(--ink)}
a:hover{color:var(--ink); text-decoration-thickness:3px}
a:focus-visible,button:focus-visible,select:focus-visible{outline-color:var(--ink)}
.fecha-h span,.controls label{color:var(--ink-3)}
.rn li,.rn li.paid,.rn li.seo,.rn li.ai,.rn li.tools{--cr:#fff}
.rn-k{color:#BCBCBC}
.etq:hover{background:var(--sand)}

/* Nota: sección arriba, aclaración debajo, titular grande */
.kicker{margin:0 0 6px; padding-top:8px; border-top:4px solid var(--ink); font:800 .78rem/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.flag-l{margin:0 0 10px; font:700 .72rem/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.titular{font-size:1.62rem; line-height:1.18; margin-bottom:12px}
.dek{font-size:1.05rem}
.fuente{margin:14px 0 0}
.cierre{margin-top:16px}
.rn li{padding:12px 0 16px}
.rn-a{margin:0; font-size:1.1rem}
.rn li::before{top:12px}
.rn{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.resumen-n{padding-bottom:6px}
.rn-a{padding-right:20px}
.rn-a{text-decoration:none; font-size:1.3rem; line-height:1.22}
.rn-a:hover{text-decoration:none; opacity:.8}


/* ===== Pareado con el home de union-atlantica.com ===== */
:root{--page:#F8F9FF; --lav:#E9ECFF; --menta:#E6F9F0; --grad:linear-gradient(90deg,#FF5E62 0%,#B06AB3 55%,#7C8CF0 100%)}
html,body{background:var(--page)}
body{background:radial-gradient(900px 420px at 8% -8%,var(--lav),transparent 70%),radial-gradient(900px 480px at 100% 0%,var(--menta),transparent 70%),var(--page); background-repeat:no-repeat}
.controls select{background:var(--page)}

/* Barra negra de anuncio, como en el home */
.anuncio{background:var(--ink); color:#fff; display:flex; justify-content:center; flex-wrap:wrap; gap:4px 10px; padding:9px 16px; font:600 .78rem/1.3 var(--sans); letter-spacing:.02em; text-align:center}
.anuncio #fecha-top{color:#fff}

/* Menú flotante en cápsula */
.navwrap{padding:14px max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px)); position:sticky; top:0; z-index:20}
.pill{max-width:1240px; margin-inline:auto; display:flex; align-items:center; gap:8px 18px; padding:8px 12px 8px 22px; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--ink); border-radius:999px}
.pill .marca{display:flex; margin-right:auto; text-decoration:none}
.pill ul{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.pill ul a{font:500 .92rem/1 var(--sans); text-decoration:none; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent}
.pill ul a:hover{border-bottom-color:var(--ink)}
.pill ul a.act{border-bottom-color:var(--ink); font-weight:700}
.btn-n{display:inline-flex; align-items:center; background:var(--ink); color:#fff; border-radius:999px; padding:12px 22px; font:600 .9rem/1 var(--sans); text-decoration:none; border:0; cursor:pointer}
.btn-n:hover{color:#fff; opacity:.86; text-decoration:none}
.pill .lang{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--ink); border-radius:50%; font:500 .85rem/1 var(--sans)}
@media (max-width:760px){.pill ul{display:none} .pill{padding-left:16px}}

/* Título: serif liviana con palabra en cursiva y degradado, como el hero del home */
.masthead{font:400 clamp(3rem,9.6vw,7rem)/1 var(--serif); letter-spacing:-.025em; padding:44px 0 6px; text-wrap:balance}
.masthead em{font-style:italic; color:#B06AB3; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-right:.06em}
.tagline{font:400 clamp(1.05rem,2vw,1.3rem)/1.45 var(--sans); color:var(--ink-2); margin:6px 0 4px}

/* Cápsulas y círculos de la marca en lugar de la banda plana */
.formas{height:46px; gap:0; justify-content:center; max-width:420px; margin:18px auto 22px; align-items:center}
.formas i{flex:none; height:46px; margin-left:-14px; border-radius:999px}
.formas i:first-child{margin-left:0}
.formas i{flex:none!important}
.formas i:nth-child(1){width:46px; background:#FFC314} .formas i:nth-child(2){width:120px; background:#3E89FF} .formas i:nth-child(3){width:46px; background:#FF634E} .formas i:nth-child(4){width:84px; background:#0CA172} .formas i:nth-child(5){width:46px; background:#2ED874} .formas i:nth-child(6){display:none}

/* Controles redondeados */
.controls{border-bottom:1px solid var(--line); gap:10px 14px}
.controls label{color:var(--ink-3)}
.controls select{border:1px solid var(--ink); border-radius:999px; padding:10px 38px 10px 18px; background:#fff; font-weight:600}
.controls button.limpiar{background:var(--ink); color:#fff; border:0; border-radius:999px; padding:10px 18px; font-weight:600}
.controls button.limpiar:hover{color:#fff; opacity:.86}
.ticker{border-radius:0; border-top:1px solid var(--ink); margin-top:8px}

/* Índice como la lista de servicios del home: serif cursiva, filete fino, flecha */
.indice{border-bottom:1px solid var(--ink); gap:0 28px}
.indice li{border:0; border-top:1px solid var(--ink); padding:16px 0 14px}
.indice li::before,.indice li::after{display:none}
.indice .w{font:italic 400 clamp(1.3rem,2.6vw,1.65rem)/1.15 var(--serif); letter-spacing:-.01em; padding-bottom:6px}
.indice .w::after{content:'\2197'; font-style:normal; font-size:.8em; color:var(--ink)}
.indice li.activo .w{font-weight:700}
.indice a.sub{font-size:.9rem}

/* Panel de lectura claro y redondeado */
.resumen-n{border-radius:28px; padding:26px 30px 10px; margin-top:6px}
.grid.cols{background:#fff; border:1px solid var(--line); border-radius:28px; padding:8px 36px 6px; margin-top:14px; column-gap:48px; column-rule:1px dashed var(--line)}
@media (max-width:759px){.grid.cols{padding:4px 20px}}
.kicker{border-top-width:2px}
.fecha-h{border-top:0; padding:10px 0 12px; margin-top:36px}
.fecha-h h2{font:italic 400 clamp(1.5rem,3vw,2rem)/1.1 var(--serif)}
.vista-head{font:italic 400 clamp(2rem,5vw,3.2rem)/1.05 var(--serif); text-transform:none; letter-spacing:-.02em}

/* Cierre y pie */
.cta{margin-top:56px; text-align:center; padding-block:12px}
.cta h2{margin:0 auto 22px; max-width:22ch; font:400 clamp(1.8rem,4.6vw,3rem)/1.12 var(--serif); letter-spacing:-.02em}
footer{margin-top:44px}

/* ===== Ajustes: Baskerville solo en cursiva, selector compacto ===== */
.masthead{font:italic 400 clamp(3rem,9.6vw,7rem)/1.05 var(--serif); letter-spacing:-.02em}
.masthead em{font-style:italic}
.formas{margin-bottom:18px}
.controls .estado{display:none}
.controls{padding-top:10px}

/* Categorías: selector pequeño, todas visibles */
.indice{display:flex; flex-wrap:wrap; gap:2px 22px; padding:14px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); counter-reset:none}
.indice li{border:0; padding:0; margin:0}
.indice .w{display:inline-block; width:auto; padding:3px 0; font:italic 400 1.05rem/1.3 var(--serif); letter-spacing:0; border-bottom:2px solid transparent; color:var(--ink)}
.indice .w::after{display:none}
.indice .w:hover{border-bottom-color:var(--ink); color:var(--ink)}
.indice li.activo .w{font-weight:400; border-bottom-color:var(--ink)}
.indice li.vacio .w{color:var(--ink)}

/* Títulos de nota en Manrope; Baskerville queda solo en cursiva */
.titular{font:700 1.45rem/1.2 var(--sans); letter-spacing:-.02em}
.rn-a{font:700 1.15rem/1.25 var(--sans)}
.cta h2{font-style:italic; font-weight:400}
footer .lema{font-weight:400; font-style:italic}

/* Categorías en pastillas, como los botones del home */
.indice{gap:8px; padding:16px 0}
.indice .w{padding:8px 16px; font:600 .82rem/1 var(--sans); letter-spacing:0; border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; transition:background .15s,color .15s}
.indice .w:hover{background:var(--ink); color:#fff; border-bottom-color:var(--ink)}
.indice li.activo .w{background:var(--ink); color:#fff; font-weight:600; border-bottom-color:var(--ink)}