/* ============================================================
   MilNits · hoja de estilos compartida (sistema de diseño)
   La cargan todas las páginas. Cada página añade solo su CSS propio.
   ============================================================ */

/* ---------- Tokens de color (tema claro / oscuro / manual) ---------- */
:root{
  --bg:#0a0a0a; --panel:#111418; --panel-2:#1c1f26; --ink:#eef2fb; --muted:#8a93a8;
  --line:#2a2e37; --accent:#00e5ff; --accent-ink:#7cf0ff; --on-accent:#04222a;
  --best:#ffcf5c; --best-bg:#2a2110; --gold:#ffcf5c; --gold-bg:#2a2110;
  --good:#37d29b; --bad:#ff6b6b; --chip:#1a2030;
  --oled:#111827; --qdoled:#3b1d5e; --miniled:#1e3a5f;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0a0a0a; --panel:#111418; --panel-2:#1c1f26; --ink:#eef2fb; --muted:#8a93a8;
  --line:#2a2e37; --accent:#00e5ff; --accent-ink:#7cf0ff; --on-accent:#04222a;
  --best:#ffcf5c; --best-bg:#2a2110; --gold:#ffcf5c; --gold-bg:#2a2110;
  --good:#37d29b; --bad:#ff6b6b; --chip:#1a2030;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5);
}}
:root[data-theme="light"]{--bg:#f4f6fb;--panel:#fff;--panel-2:#eef1f8;--ink:#0d1220;--muted:#586074;--line:#dde2ee;--accent:#3b6bff;--accent-ink:#2b4fc4;--on-accent:#ffffff;--best:#c47800;--best-bg:#fff4dd;--gold:#c47800;--gold-bg:#fff4dd;--good:#0f9d6b;--bad:#d9534f;--chip:#eef1f8;--shadow:0 1px 2px rgba(16,24,40,.06),0 10px 30px rgba(16,24,40,.07)}
:root[data-theme="dark"]{--bg:#0a0a0a;--panel:#111418;--panel-2:#1c1f26;--ink:#eef2fb;--muted:#8a93a8;--line:#2a2e37;--accent:#00e5ff;--accent-ink:#7cf0ff;--on-accent:#04222a;--best:#ffcf5c;--best-bg:#2a2110;--gold:#ffcf5c;--gold-bg:#2a2110;--good:#37d29b;--bad:#ff6b6b;--chip:#1a2030;--shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5)}

/* ---------- Reset base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* ---------- Menú de navegación (común a todas las páginas) ---------- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.nav-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:800;font-size:1.06rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.nav-brand .nb-logo{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#8a2be2));color:#fff;font-size:.9rem;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 40%,transparent)}
.nav-links{display:flex;gap:6px}
.nav-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--muted);font-weight:700;font-size:.88rem;padding:8px 13px;border-radius:10px;transition:.12s;white-space:nowrap}
.nav-link:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.nav-link.active{color:#fff;background:var(--accent)}
.nav-link.soon{opacity:.5;cursor:default}
@media (max-width:520px){
  .nav-brand span.t{display:none}
  .nav-links{gap:3px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-link{padding:7px 9px;font-size:.82rem;white-space:nowrap;flex:0 0 auto}
}

/* ---------- Pie de página (común) ---------- */
footer{border-top:1px solid var(--line);padding:26px 0 44px;color:var(--muted);font-size:.82rem;text-align:center}
footer nav{justify-content:center;gap:10px 20px!important}
footer nav a{color:var(--accent-ink);text-decoration:none;transition:.12s}
footer nav a:hover{color:var(--ink)}

/* ---------- Cabecera de artículo + tipografía de las guías ---------- */
header.art{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(900px 300px at 85% -30%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),var(--panel)}
header.art .wrap{position:relative;z-index:2;padding:30px 20px 26px}
header.art h1{position:relative;z-index:2}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--muted);text-decoration:none}
.meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);font-weight:600}
.entradilla{margin:16px 0 0;font-size:1.08rem;color:var(--ink)}

/* ---------- Componentes de contenido reutilizables ---------- */
.tldr{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:18px 0 8px}
.tldr h2{margin:0 0 8px;font-size:1.05rem}
.tldr ul,.tldr ol{margin:0;padding-left:20px}
.tldr li{margin:6px 0}
.tldr a{font-weight:700}

.callout{border-left:4px solid var(--accent);background:var(--panel-2);border-radius:0 12px 12px 0;padding:14px 16px;margin:22px 0;font-size:.96rem}
.hl{border-left:4px solid var(--gold);background:var(--gold-bg);border-radius:0 12px 12px 0;padding:14px 16px;margin:22px 0;font-size:.96rem}

.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 15px;margin:9px 0}
.faq summary{cursor:pointer;font-weight:700;padding:13px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.25rem;color:var(--accent-ink);font-weight:800}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{padding:12px 0;margin:0;color:var(--muted)}

.verpc{display:inline-flex;align-items:center;gap:7px;font-weight:800;text-decoration:none;color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:11px;padding:11px 16px;margin-top:6px}

/* ============================================================
   Capa "moderna": gradientes vivos, movimiento y microinteracciones
   ============================================================ */
:root{ --grad:linear-gradient(135deg,#5b8cff 0%,#8b5cf6 45%,#ec4899 100%); --grad-soft:linear-gradient(135deg,#5b8cff33,#8b5cf633,#ec489933); }

/* Texto con degradado (para titulares y marca) */
.gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 200%;animation:gradmove 8s ease infinite}
@keyframes gradmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Pastilla/eyebrow glass */
.pill-glass{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);padding:6px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  backdrop-filter:blur(6px)}

/* Menú: subrayado con degradado en la activa */
.nav-link.active{background:var(--grad);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.nav-brand .nb-logo{background:var(--grad)}

/* Aparición al hacer scroll (lo activa pixelpro-ui.js añadiendo .in) */
.reveal{opacity:0;transform:translateY(30px) scale(.96);transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Barra de progreso de scroll (arriba del todo) */
.pp-progress{position:fixed;top:0;left:0;right:0;height:3px;transform-origin:0 50%;transform:scaleX(0);z-index:1000;
  background:var(--grad);background-size:200% 100%;animation:gradmove 6s ease infinite;
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}

/* Tarjetas con inclinación 3D (lo mueve el ratón vía JS) */
.card,.gcard,.cat,.wcard,.pcard,.ccard,.fighter,.pick{transform-style:preserve-3d;will-change:transform}
.vs-badge{animation:vspulse 2.2s ease-in-out infinite}
@keyframes vspulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent)}}

/* Malla de color animada (fondos de cabecera) */
.mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(50% 60% at 50% 40%,color-mix(in srgb,#8b5cf6 30%,transparent),transparent 70%)}
.mesh::before,.mesh::after{content:"";position:absolute;width:62vw;height:62vw;border-radius:50%;filter:blur(64px);opacity:.72;mix-blend-mode:screen}
.mesh::before{background:radial-gradient(circle,#5b8cff,transparent 62%);top:-22%;left:-12%;animation:blob1 16s ease-in-out infinite}
.mesh::after{background:radial-gradient(circle,#ec4899,transparent 62%);bottom:-28%;right:-12%;animation:blob2 20s ease-in-out infinite}
.mesh::before{animation-duration:11s}
.mesh::after{animation-duration:14s}
@keyframes blob1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(16%,12%) scale(1.2)}66%{transform:translate(6%,-8%) scale(1.05)}}
@keyframes blob2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-14%,-6%) scale(1.25)}66%{transform:translate(-4%,10%) scale(1.1)}}

/* Botón moderno con glow */
.btn-glow{display:inline-flex;align-items:center;gap:9px;font-weight:800;text-decoration:none;color:#fff;
  background:var(--grad);background-size:150% 150%;padding:13px 22px;border-radius:14px;
  box-shadow:0 10px 26px -6px color-mix(in srgb,var(--accent) 60%,transparent);transition:.18s;animation:gradmove 8s ease infinite}
.btn-glow:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 38px -6px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn-glow .arrow{transition:.18s}
.btn-glow:hover .arrow{transform:translateX(5px)}
.btn-glow{position:relative;overflow:hidden}
.btn-glow::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-120%}80%,100%{left:130%}}

/* Marca con degradado + nav más presente */
.nav-brand{font-size:1.14rem}
.nav-brand span.t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;animation:gradmove 8s ease infinite}

/* Glow de color al pasar el ratón por cualquier tarjeta (toda la web) */
.card,.gcard,.pcard,.wcard,.scard,.rev,.ccard,.fighter,.pick{transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover,.gcard:hover,.pcard:hover,.wcard:hover,.scard:hover,.rev:hover,.ccard:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 46px -16px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* modelos anunciados pero aún no a la venta */
.price .num.soon{font-size:.92rem;color:var(--accent-ink);font-weight:800}
/* isotipo de marca en el menú (sustituye al recuadro con degradado) */
.nav-brand img.nb-logo{width:26px;height:26px;border-radius:8px;object-fit:contain;
  background:none;box-shadow:0 4px 12px rgba(0,0,0,.35)}

/* ================= CABECERA (rediseño) =================
   El menú se había quedado pequeño frente a la tipografía del resto de la web.
   Se sube la escala y el logotipo va dentro de un marco que reacciona al ratón.
   Selectores con especificidad alta para ganar a los estilos de cada página. */
.nav .nav-in{padding:13px 20px;gap:20px}
.nav .nav-links{gap:3px}
.nav .nav-links .nav-link{font-size:.96rem;padding:11px 16px;border-radius:12px}
.nav .nav-links .nav-link.active{box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent)}

/* marco del logotipo */
.nav .nav-brand{gap:0;padding:7px 14px;border:1px solid var(--line);border-radius:15px;
  background:color-mix(in srgb,var(--panel-2) 70%,transparent);position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,box-shadow .22s}
.nav .nav-brand::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--accent) 32%,transparent),transparent);
  transform:skewX(-18deg);opacity:0;transition:opacity .2s}
.nav .nav-brand:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 85%,transparent)}
.nav .nav-brand:hover::before{opacity:1;animation:brillo 1.1s ease}
@keyframes brillo{from{left:-60%}to{left:120%}}

/* el logotipo, en dos capas de máscara: cian = acento, claro = color de texto */
.nav .nav-brand .brand-logo{position:relative;display:block;height:34px;width:148px;flex:0 0 auto;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.nav .nav-brand:hover .brand-logo{transform:scale(1.04)}
.nav .nav-brand .brand-logo::before,.nav .nav-brand .brand-logo::after{content:"";position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:left center;mask-position:left center}
.nav .nav-brand .brand-logo::before{background:var(--ink);-webkit-mask-image:url(/nav-b.svg?v=7bbb968c);mask-image:url(/nav-b.svg?v=7bbb968c)}
.nav .nav-brand .brand-logo::after{background:var(--accent);-webkit-mask-image:url(/nav-a.svg?v=52df0c23);mask-image:url(/nav-a.svg?v=52df0c23)}

@media (max-width:640px){
  .nav .nav-in{padding:10px 14px;gap:12px}
  .nav .nav-brand{padding:5px 10px;border-radius:12px}
  .nav .nav-brand .brand-logo{height:26px;width:113px}
  .nav .nav-links .nav-link{font-size:.86rem;padding:9px 11px}
}
@media (prefers-reduced-motion:reduce){
  .nav .nav-brand,.nav .nav-brand .brand-logo{transition:none}
  .nav .nav-brand:hover::before{animation:none}
}

/* --- el marco del logotipo asoma por debajo de la barra --- */
.nav{overflow:visible}
.nav .nav-brand{padding:10px 18px;border-radius:17px;margin-bottom:-24px;z-index:3;
  background:var(--panel);border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:0 16px 30px -16px rgba(0,0,0,.75)}
.nav .nav-brand .brand-logo{height:42px;width:183px}
.nav .nav-brand:hover{transform:translateY(-3px)}
@media (max-width:640px){
  .nav .nav-brand{padding:7px 12px;border-radius:13px;margin-bottom:-14px}
  .nav .nav-brand .brand-logo{height:29px;width:126px}
}

/* --- cabecera: ancho unificado, menú centrado y eslogan como texto real --- */
.nav .nav-in{max-width:1180px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav .nav-brand{justify-self:start;flex-direction:column;align-items:center;gap:5px;padding:11px 20px 12px}
.nav .nav-links{justify-self:center}
.nav .nav-links .nav-link{font-size:1.02rem;padding:12px 18px}
.brand-tag{font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;line-height:1;display:flex;align-items:center;gap:8px}
.brand-tag::before,.brand-tag::after{content:"";height:1px;width:14px;background:var(--accent);opacity:.75}
@media (max-width:900px){
  .nav .nav-in{grid-template-columns:auto 1fr;gap:10px}
  .nav .nav-links{justify-self:end}
  .brand-tag{display:none}
  .nav .nav-brand{flex-direction:row}
}

/* --- centrado del menú sin que el marco del logo lo tape --- */
.nav .nav-in{display:flex;justify-content:space-between;position:relative;gap:12px}
.nav .nav-brand{flex:0 0 auto}
.nav .nav-links{justify-self:auto}
@media (min-width:1240px){                 /* sitio de sobra: menú centrado de verdad */
  .nav .nav-links{position:absolute;left:50%;transform:translateX(-50%)}
}
@media (max-width:1239px){                 /* si no cabe, el menú se va a la derecha */
  .brand-tag{display:none}
  .nav .nav-brand{flex-direction:row;padding:9px 15px}
  .nav .nav-brand .brand-logo{height:34px;width:148px}
  .nav .nav-links .nav-link{font-size:.95rem;padding:10px 13px}
}

/* --- el marco del logo, pegado al borde y algo mayor --- */
.nav .nav-in{padding-left:8px}
.nav .nav-brand{padding:12px 22px 13px}
.nav .nav-brand .brand-logo{height:46px;width:200px}
@media (min-width:1240px){.nav .nav-links{left:auto;right:0;transform:none}}
@media (max-width:1239px){.nav .nav-brand .brand-logo{height:36px;width:157px}}
@media (max-width:640px){.nav .nav-in{padding-left:6px}.nav .nav-brand .brand-logo{height:29px;width:126px}}

/* --- menú equilibrado: centrado en el hueco que deja el logo --- */
@media (min-width:1240px){.nav .nav-links{position:static;transform:none;margin:0 auto}}

/* --- un único tamaño de titular en toda la web (había cuatro escalas) --- */
header h1{font-size:clamp(1.95rem,3.8vw,2.55rem);line-height:1.06;letter-spacing:-.02em}

/* ===== cabecera alineada con la rejilla + menú con la misma cápsula del logo ===== */
.nav .nav-in{padding:13px 20px}                 /* mismo margen que .wrap: todo cuadra */
@media (min-width:1240px){
  .nav .nav-links{position:static;transform:none;margin:0 0 0 auto}   /* pegado al borde derecho */
}
.nav .nav-links{padding:5px;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--panel-2) 72%,transparent);gap:2px;align-items:center}
.nav .nav-links .nav-link{border-radius:11px;padding:10px 14px;font-size:.95rem}
.nav .nav-links .nav-link.active{box-shadow:0 6px 16px -7px color-mix(in srgb,var(--accent) 75%,transparent)}
@media (max-width:640px){
  .nav .nav-links{padding:3px;border-radius:12px}
  .nav .nav-links .nav-link{padding:8px 10px;font-size:.84rem}
}

/* --- portada: titular en dos líneas equilibradas --- */
.hero h1{text-wrap:balance}
/* --- logotipo más grande en la cabecera --- */
.nav .nav-brand .brand-logo{height:56px;width:243px}
.nav .nav-brand{padding:13px 24px 14px}
@media (max-width:1239px){.nav .nav-brand .brand-logo{height:40px;width:174px}}
@media (max-width:640px){.nav .nav-brand .brand-logo{height:30px;width:130px}}

/* --- menú centrado en el hueco libre (escritorio) --- */
@media (min-width:1240px){.nav .nav-links{margin:0 auto}}

/* --- tablet: cabecera en dos filas, que el menú no se salga --- */
@media (max-width:1100px){
  .nav{overflow:hidden}
  .nav .nav-in{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .nav .nav-brand{margin-bottom:0}          /* deja de asomar para no pisar el menú */
  .nav .nav-links{margin:0;max-width:100%;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav .nav-links::-webkit-scrollbar{display:none}
  .nav .nav-links .nav-link{flex:0 0 auto}
}

/* ================= PIE DE PÁGINA ================= */
footer{border-top:1px solid var(--line);padding:34px 0 44px;color:var(--muted);font-size:.85rem;background:var(--panel)}
.pie-top{display:grid;grid-template-columns:1.2fr 2fr;gap:32px;align-items:start}
.pie-marca .brand-logo{position:relative;display:block;height:34px;width:148px;margin-bottom:12px}
.pie-marca .brand-logo::before,.pie-marca .brand-logo::after{content:"";position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:left center;mask-position:left center}
.pie-marca .brand-logo::before{background:var(--ink);-webkit-mask-image:url(/nav-b.svg?v=7bbb968c);mask-image:url(/nav-b.svg?v=7bbb968c)}
.pie-marca .brand-logo::after{background:var(--accent);-webkit-mask-image:url(/nav-a.svg?v=52df0c23);mask-image:url(/nav-a.svg?v=52df0c23)}
.pie-marca p{margin:0;max-width:34ch;line-height:1.6}
.pie-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pie-cols h3{margin:0 0 10px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pie-cols a{display:block;color:var(--muted);text-decoration:none;padding:4px 0;transition:.13s}
.pie-cols a:hover{color:var(--accent-ink);transform:translateX(3px)}
.pie-afiliacion{margin:28px 0 0;padding:14px 16px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;line-height:1.6;font-size:.83rem}
.pie-afiliacion a{color:var(--accent-ink)}
.pie-fin{margin:16px 0 0;font-size:.8rem;opacity:.8}
@media (max-width:820px){
  .pie-top{grid-template-columns:1fr;gap:26px}
  .pie-cols{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:520px){.pie-cols{grid-template-columns:1fr 1fr}}
/* el pie no hereda el centrado de las portadas */
footer .pie-top,footer .pie-marca,footer .pie-cols{text-align:left}

/* El texto sobre el color de acento se oscurece o aclara según lo claro que
   sea ese color. Necesario desde que el acento por defecto es el cian de
   marca: blanco sobre cian claro no se lee. Lo calcula milnits-ui.js. */
.nav .nav-links .nav-link.active{color:var(--on-accent,#fff)}

/* ===== Estados activos "de contorno" =====
   El cian de marca luce como trazo y resplandor, no como relleno con texto
   encima. Así que lo activo va con fondo tenue, borde y texto del acento —
   igual que el botón EXPLORAR de la guía de marca. Funciona con cualquier
   color del selector, no solo con el cian. */
.nav .nav-links .nav-link.active{
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),
             0 0 20px -8px var(--accent)}
.toolbar .chip[aria-pressed="true"]{
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  color:var(--accent-ink);
  box-shadow:0 0 18px -8px var(--accent)}