/* ============================================================================
   VARIANTES VISUALES POR SITIO — portada (layout) + estado de carga (loader).

   Se activan con dos clases en el <body>, elegidas por sitio en el JSON de
   identidad (campo "diseno"):  layout-<x>  loader-<y>
   Ver scripts/sites/lib/render.js (token LAYOUT_CLASS).

   Layouts:  clasico | revista | rail | cinematico | compacto | listado
   Loaders:  shimmer | pulso | onda | barras | destello | escaneo | diagonal | flotar
             | latido | gotas | bloques | radial | zigzag | espejo | deriva | chispa
             | cortina | orbe | marea | vaiven   (20 — una única por sitio)

   Reglas de este archivo:
   - Solo pinta dentro de body.layout-* / body.loader-*: un sitio sin clases
     (body limpio) se ve EXACTAMENTE como antes de este archivo.
   - Sin colores literales: todo sale de las variables de theme.css, así que
     la paleta de cada identidad manda.
   - No debe contener llaves dobles de token: los .css se copian en crudo.
   ========================================================================= */

/* ==========================================================================
   1. ESQUELETOS DE CARGA (markup en index.html y articulo/index.html)
   ========================================================================== */

/* El JS oculta cada bloque con el atributo `hidden` al terminar de cargar.
   Sin `:not([hidden])` la regla de display le ganaba al [hidden] del navegador
   y el esqueleto (con su animación) se quedaba encima del artículo para siempre. */
.loading-skeleton:not([hidden]) { display: block; }
.loading-skeleton[hidden],
.estado-carga[hidden] { display: none !important; }

.loading-skeleton .sk-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sk-line,
.sk-thumb,
.sk-hero,
.sk-media,
.sk-title {
    background-color: var(--cbn-primary-a12);
    position: relative;
    overflow: hidden;
}

.sk-line { height: 12px; border-radius: 6px; margin: 10px 0; }
.sk-line.sk-w90 { width: 90%; }
.sk-line.sk-w70 { width: 70%; }
.sk-line.sk-w50 { width: 50%; }

/* — Portada: bloque esqueleto del área destacada — */
.loading-skeleton .sk-hero {
    height: 300px;
    border-radius: var(--radius-lg);
}

.loading-skeleton .sk-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.loading-skeleton .sk-item {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    background: var(--cbn-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.loading-skeleton .sk-thumb {
    flex: none;
    width: 96px;
    height: 72px;
    border-radius: var(--radius-md);
}

.loading-skeleton .sk-lines { flex: 1; min-width: 0; }

/* — Portada: tarjetas esqueleto del grid de noticias — */
#news-container .sk-card {
    background: var(--cbn-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin: 0;
}

#news-container .sk-card .sk-thumb {
    width: auto;
    height: 150px;
    border-radius: 0;
}

#news-container .sk-card .sk-lines { padding: var(--space-md); }

/* — Artículo: bloque esqueleto — */
.loading-skeleton .sk-title {
    height: 36px;
    width: 72%;
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.loading-skeleton .sk-media {
    height: 360px;
    border-radius: var(--radius-lg);
    margin-top: var(--space-lg);
}

/* Esqueleto de portada alineado a cada layout */
body.layout-rail .loading-skeleton .sk-rail { grid-template-columns: 1fr; }
body.layout-compacto .loading-skeleton .sk-rail,
body.layout-listado .loading-skeleton .sk-rail {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
body.layout-compacto .loading-skeleton .sk-item,
body.layout-listado .loading-skeleton .sk-item { flex: 1; min-width: 0; }

@media (max-width: 900px) {
    .loading-skeleton .sk-rail { grid-template-columns: 1fr; }
    .loading-skeleton .sk-hero { height: 220px; }
    .loading-skeleton .sk-media { height: 240px; }
}

/* ==========================================================================
   2. LOADERS — una animación única por sitio (esqueletos)
   20 loaders = 20 sitios, sin repetir: shimmer · pulso · onda · barras ·
   destello · escaneo · diagonal · flotar · latido · gotas · bloques · radial ·
   zigzag · espejo · deriva · chispa · cortina · orbe · marea · vaiven.
   Se activan con body.loader-<x> (render.js: token LAYOUT_CLASS).
   ========================================================================== */

/* ── 2a. ESQUELETOS DE CONTENIDO (.loading-skeleton) ─────────────────────── */

/* — shimmer: barrido de brillo — */
body.loader-shimmer .sk-line,
body.loader-shimmer .sk-thumb,
body.loader-shimmer .sk-hero,
body.loader-shimmer .sk-media,
body.loader-shimmer .sk-title {
    background-image: linear-gradient(
        90deg,
        var(--cbn-primary-a08) 0%,
        var(--cbn-primary-a30) 50%,
        var(--cbn-primary-a08) 100%
    );
    background-size: 200% 100%;
    animation: sk-shimmer 1.8s linear infinite;
}

@keyframes sk-shimmer {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

/* — pulso: respiración de opacidad — */
body.loader-pulso .sk-line,
body.loader-pulso .sk-thumb,
body.loader-pulso .sk-hero,
body.loader-pulso .sk-media,
body.loader-pulso .sk-title {
    animation: sk-pulso 1.6s ease-in-out infinite;
}

@keyframes sk-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* — onda: degradado que sube y baja — */
body.loader-onda .sk-line,
body.loader-onda .sk-thumb,
body.loader-onda .sk-hero,
body.loader-onda .sk-media,
body.loader-onda .sk-title {
    background-image: linear-gradient(
        180deg,
        var(--cbn-accent-a20) 0%,
        var(--cbn-primary-a12) 45%,
        var(--cbn-accent-a12) 100%
    );
    background-size: 100% 300%;
    animation: sk-onda 2.4s ease-in-out infinite;
}

@keyframes sk-onda {
    0%, 100% { background-position: 50% 0%; }
    50% { background-position: 50% 100%; }
}

/* — barras: diagonal rayada en movimiento — */
body.loader-barras .sk-line,
body.loader-barras .sk-thumb,
body.loader-barras .sk-hero,
body.loader-barras .sk-media,
body.loader-barras .sk-title {
    background-image: repeating-linear-gradient(
        45deg,
        var(--cbn-primary-a12) 0 14px,
        var(--cbn-accent-a12) 14px 28px
    );
    animation: sk-barras 1.5s linear infinite;
}

@keyframes sk-barras {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}

/* — destello: resplandor que cruza y regresa — */
body.loader-destello .sk-line,
body.loader-destello .sk-thumb,
body.loader-destello .sk-hero,
body.loader-destello .sk-media,
body.loader-destello .sk-title {
    background-image: radial-gradient(
        circle at 50% 50%,
        var(--cbn-accent-a40) 0%,
        var(--cbn-primary-a30) 42%,
        var(--cbn-primary-a12) 72%
    );
    background-size: 250% 250%;
    animation: sk-destello 2.4s ease-in-out infinite;
}

@keyframes sk-destello {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* — escaneo: línea fina que barre de izquierda a derecha — */
body.loader-escaneo .sk-line,
body.loader-escaneo .sk-thumb,
body.loader-escaneo .sk-hero,
body.loader-escaneo .sk-media,
body.loader-escaneo .sk-title {
    background-image: linear-gradient(
        90deg,
        var(--cbn-primary-a12) 0 46%,
        var(--cbn-accent-a40) 50%,
        var(--cbn-primary-a12) 54% 100%
    );
    background-size: 300% 100%;
    animation: sk-escaneo 2s linear infinite;
}

@keyframes sk-escaneo {
    0% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

/* — diagonal: brillo sesgado que cruza en 135° — */
body.loader-diagonal .sk-line,
body.loader-diagonal .sk-thumb,
body.loader-diagonal .sk-hero,
body.loader-diagonal .sk-media,
body.loader-diagonal .sk-title {
    background-image: linear-gradient(
        135deg,
        var(--cbn-primary-a12) 0%,
        var(--cbn-primary-a30) 45%,
        var(--cbn-accent-a30) 50%,
        var(--cbn-primary-a12) 56% 100%
    );
    background-size: 300% 300%;
    animation: sk-diagonal 2.8s linear infinite;
}

@keyframes sk-diagonal {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* — flotar: las piezas se mecen hacia arriba — */
body.loader-flotar .sk-line,
body.loader-flotar .sk-thumb,
body.loader-flotar .sk-hero,
body.loader-flotar .sk-media,
body.loader-flotar .sk-title {
    animation: sk-flotar 3s ease-in-out infinite;
}

@keyframes sk-flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* — latido: doble pulso de corazón — */
body.loader-latido .sk-line,
body.loader-latido .sk-thumb,
body.loader-latido .sk-hero,
body.loader-latido .sk-media,
body.loader-latido .sk-title {
    animation: sk-latido 2.4s ease-in-out infinite;
}

@keyframes sk-latido {
    0% { transform: scale(1); }
    12% { transform: scale(1.03); }
    24% { transform: scale(1); }
    36% { transform: scale(1.03); }
    60%, 100% { transform: scale(1); }
}

/* — gotas: goterones que caen — */
body.loader-gotas .sk-line,
body.loader-gotas .sk-thumb,
body.loader-gotas .sk-hero,
body.loader-gotas .sk-media,
body.loader-gotas .sk-title {
    background-image:
        radial-gradient(circle 5px at 30% 6%, var(--cbn-accent-a30) 42%, transparent 62%),
        radial-gradient(circle 4px at 68% 12%, var(--cbn-accent-a20) 42%, transparent 62%);
    background-size: 100% 45%;
    background-repeat: no-repeat;
    animation: sk-gotas 2.8s linear infinite;
}

@keyframes sk-gotas {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}

/* — bloques: desplazamiento a saltos — */
body.loader-bloques .sk-line,
body.loader-bloques .sk-thumb,
body.loader-bloques .sk-hero,
body.loader-bloques .sk-media,
body.loader-bloques .sk-title {
    background-image: linear-gradient(
        90deg,
        var(--cbn-primary-a12) 0 25%,
        var(--cbn-accent-a20) 25% 50%,
        var(--cbn-primary-a12) 50% 75%,
        var(--cbn-accent-a12) 75% 100%
    );
    background-size: 300% 100%;
    animation: sk-bloques 2.6s steps(10) infinite;
}

@keyframes sk-bloques {
    0% { background-position: 0 0; }
    100% { background-position: -150% 0; }
}

/* — radial: respiración desde el centro — */
body.loader-radial .sk-line,
body.loader-radial .sk-thumb,
body.loader-radial .sk-hero,
body.loader-radial .sk-media,
body.loader-radial .sk-title {
    background-image: radial-gradient(circle, var(--cbn-accent-a30) 0%, var(--cbn-primary-a12) 58%);
    background-size: 100% 100%;
    background-position: 50% 50%;
    animation: sk-radial 2.6s ease-in-out infinite;
}

@keyframes sk-radial {
    0%, 100% { background-size: 100% 100%; }
    50% { background-size: 180% 180%; }
}

/* — zigzag: vaivén sesgado que rebota — */
body.loader-zigzag .sk-line,
body.loader-zigzag .sk-thumb,
body.loader-zigzag .sk-hero,
body.loader-zigzag .sk-media,
body.loader-zigzag .sk-title {
    background-image: linear-gradient(
        60deg,
        var(--cbn-primary-a12) 0%,
        var(--cbn-accent-a30) 50%,
        var(--cbn-primary-a12) 100%
    );
    background-size: 250% 100%;
    animation: sk-zigzag 2.4s ease-in-out infinite alternate;
}

@keyframes sk-zigzag {
    0% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

/* — espejo: el barrido, al revés — */
body.loader-espejo .sk-line,
body.loader-espejo .sk-thumb,
body.loader-espejo .sk-hero,
body.loader-espejo .sk-media,
body.loader-espejo .sk-title {
    background-image: linear-gradient(
        270deg,
        var(--cbn-primary-a08) 0%,
        var(--cbn-primary-a30) 50%,
        var(--cbn-primary-a08) 100%
    );
    background-size: 200% 100%;
    animation: sk-espejo 2.2s linear infinite;
}

@keyframes sk-espejo {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

/* — deriva: deriva lenta diagonal — */
body.loader-deriva .sk-line,
body.loader-deriva .sk-thumb,
body.loader-deriva .sk-hero,
body.loader-deriva .sk-media,
body.loader-deriva .sk-title {
    background-image: linear-gradient(
        120deg,
        var(--cbn-accent-a12) 0%,
        var(--cbn-primary-a12) 60%,
        var(--cbn-accent-a12) 100%
    );
    background-size: 300% 300%;
    animation: sk-deriva 8s ease-in-out infinite alternate;
}

@keyframes sk-deriva {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* — chispa: punto que salta de izquierda a derecha — */
body.loader-chispa .sk-line,
body.loader-chispa .sk-thumb,
body.loader-chispa .sk-hero,
body.loader-chispa .sk-media,
body.loader-chispa .sk-title {
    background-image: radial-gradient(circle 4px at 50% 50%, var(--cbn-light-a90) 30%, transparent 64%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    animation: sk-chispa 2s steps(6) infinite;
}

@keyframes sk-chispa {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* — cortina: bandas que suben y bajan — */
body.loader-cortina .sk-line,
body.loader-cortina .sk-thumb,
body.loader-cortina .sk-hero,
body.loader-cortina .sk-media,
body.loader-cortina .sk-title {
    background-image: linear-gradient(
        180deg,
        var(--cbn-white-a18) 0%,
        var(--cbn-primary-a12) 30%,
        var(--cbn-primary-a12) 70%,
        var(--cbn-white-a18) 100%
    );
    background-size: 100% 260%;
    animation: sk-cortina 3.6s ease-in-out infinite;
}

@keyframes sk-cortina {
    0%, 100% { background-position: 50% 0%; }
    50% { background-position: 50% 100%; }
}

/* — orbe: resplandor que orbita las esquinas — */
body.loader-orbe .sk-line,
body.loader-orbe .sk-thumb,
body.loader-orbe .sk-hero,
body.loader-orbe .sk-media,
body.loader-orbe .sk-title {
    background-image: radial-gradient(circle 22px at 50% 50%, var(--cbn-accent-a30) 0%, transparent 70%);
    background-size: 170% 170%;
    background-repeat: no-repeat;
    animation: sk-orbe 7s linear infinite;
}

@keyframes sk-orbe {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* — marea: oleaje suave — */
body.loader-marea .sk-line,
body.loader-marea .sk-thumb,
body.loader-marea .sk-hero,
body.loader-marea .sk-media,
body.loader-marea .sk-title {
    background-image: linear-gradient(
        90deg,
        var(--cbn-primary-a12) 0%,
        var(--cbn-accent-a20) 50%,
        var(--cbn-primary-a12) 100%
    );
    background-size: 200% 100%;
    animation: sk-marea 3.6s ease-in-out infinite alternate;
}

@keyframes sk-marea {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

/* — vaiven: vaivén lateral — */
body.loader-vaiven .sk-line,
body.loader-vaiven .sk-thumb,
body.loader-vaiven .sk-hero,
body.loader-vaiven .sk-media,
body.loader-vaiven .sk-title {
    animation: sk-vaiven 3.2s ease-in-out infinite;
}

@keyframes sk-vaiven {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(3px); }
    70% { transform: translateX(-3px); }
}

/* ==========================================================================
   2b. NUEVOS LOADERS POR SITIO (uno a uno)
   Sustituyen el esqueleto de contenido por un spinner propio del sitio.
   Se activan con body.loader-<x> (diseno.loader del JSON de identidad).
   El color sale SIEMPRE de la paleta (theme.css): sin literales.
   ========================================================================== */

/* — l32: cuadrícula de 9 puntos (capitaldelrio) — */
body.loader-l32 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l32 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l32 #news-container .sk-card { display: none; }
body.loader-l32 .estado-carga > .estado-texto { display: none; }
body.loader-l32 .estado-carga > .carga-loader { display: flex; }

body.loader-l32 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l32 .carga-loader .loader {
    display: block;
    box-sizing: border-box;
    width: 45px;
    height: 45px;
    background:
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0),
        no-repeat linear-gradient(var(--cbn-accent) 0 0);
    background-size: 16px 16px;
    animation: l32-1 1s infinite, l32-2 1s infinite;
}

@keyframes l32-1 {
    0%, 100% { width: 45px; height: 45px; }
    35%, 65% { width: 65px; height: 65px; }
}

@keyframes l32-2 {
    0%, 40% {
        background-position: 0 0, 0 50%, 0 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0, 50% 0, 50% 50%;
    }
    60%, 100% {
        background-position: 0 50%, 0 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0, 50% 0, 0 0, 50% 50%;
    }
}

/* — l16: anillo doble girando (contrapuntoqro) — */
body.loader-l16 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l16 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l16 #news-container .sk-card { display: none; }
body.loader-l16 .estado-carga > .estado-texto { display: none; }
body.loader-l16 .estado-carga > .carga-loader { display: flex; }

body.loader-l16 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l16 .carga-loader .loader {
    display: grid;
    width: 50px;
    aspect-ratio: 1;
    border: 4px solid transparent;
    border-radius: 50%;
    border-color: var(--cbn-primary-a30) transparent;
    animation: l16 1s infinite linear;
}

body.loader-l16 .carga-loader .loader::before,
body.loader-l16 .carga-loader .loader::after {
    content: "";
    grid-area: 1 / 1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
}

body.loader-l16 .carga-loader .loader::before {
    border-color: var(--cbn-accent) transparent;
    animation: inherit;
    animation-duration: .5s;
    animation-direction: reverse;
}

body.loader-l16 .carga-loader .loader::after {
    margin: 8px;
}

@keyframes l16 {
    100% { transform: rotate(1turn); }
}

/* — l8: puntos + barrido cónico girando (corregidora360) — */
body.loader-l8 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l8 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l8 #news-container .sk-card { display: none; }
body.loader-l8 .estado-carga > .estado-texto { display: none; }
body.loader-l8 .estado-carga > .carga-loader { display: flex; }

body.loader-l8 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l8 .carga-loader .loader {
    width: 50px;
    aspect-ratio: 1;
    color: var(--cbn-primary);
    background:
        no-repeat radial-gradient(farthest-side, currentColor 92%, transparent) 50% 0 / 12px 12px,
        no-repeat radial-gradient(farthest-side, currentColor 92%, transparent) 50% 100% / 12px 12px,
        no-repeat radial-gradient(farthest-side, currentColor 92%, transparent) 100% 50% / 12px 12px,
        no-repeat radial-gradient(farthest-side, currentColor 92%, transparent) 0 50% / 12px 12px,
        no-repeat radial-gradient(farthest-side, currentColor 92%, transparent) 50% 50% / 12px 12px,
        conic-gradient(from 90deg at 4px 4px, transparent 90deg, currentColor 0) -4px -4px / calc(50% + 2px) calc(50% + 2px);
    animation: l8 1s infinite linear;
}

@keyframes l8 {
    to { transform: rotate(.5turn); }
}

/* — l16b: tres cuadros cónicos girando (ejequeretano) — */
body.loader-l16b .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l16b .loading-skeleton > .carga-loader { display: flex; }
body.loader-l16b #news-container .sk-card { display: none; }
body.loader-l16b .estado-carga > .estado-texto { display: none; }
body.loader-l16b .estado-carga > .carga-loader { display: flex; }

body.loader-l16b .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l16b .carga-loader .loader {
    width: 60px;
    aspect-ratio: 1;
    background:
        conic-gradient(from -90deg at 10px 10px, var(--cbn-primary) 90deg, transparent 0),
        conic-gradient(from -90deg at 10px 10px, var(--cbn-primary) 90deg, transparent 0),
        conic-gradient(from -90deg at 10px 10px, var(--cbn-primary) 90deg, transparent 0);
    background-size: 50% 50%;
    animation: l16b 1s infinite;
}

@keyframes l16b {
    0%   { background-position: 0 0, 10px 10px, 20px 20px; }
    50%  { background-position: 0 20px, 10px 10px, 20px 0; }
    100% { background-position: 20px 20px, 10px 10px, 0 0; }
}

/* — l11: olas de puntos (elpulsoqueretano) — */
body.loader-l11 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l11 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l11 #news-container .sk-card { display: none; }
body.loader-l11 .estado-carga > .estado-texto { display: none; }
body.loader-l11 .estado-carga > .carga-loader { display: flex; }

body.loader-l11 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l11 .carga-loader .loader {
    width: 90px;
    height: 14px;
    background:
        radial-gradient(circle 7px at bottom, var(--cbn-primary) 92%, transparent) 0 0,
        radial-gradient(circle 7px at top, var(--cbn-primary) 92%, transparent) 0 100%;
    background-size: calc(100% / 4) 50%;
    background-repeat: repeat-x;
    animation: l11 1s infinite;
}

@keyframes l11 {
    80%, 100% { background-position: calc(100% / 3) 0, calc(100% - 3px) 100%; }
}

/* — l12: gooey blur/contrast (estadodeverdad) — */
body.loader-l12 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l12 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l12 #news-container .sk-card { display: none; }
body.loader-l12 .estado-carga > .estado-texto { display: none; }
body.loader-l12 .estado-carga > .carga-loader { display: flex; }

body.loader-l12 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l12 .carga-loader .loader {
    display: inline-grid;
    padding: 5px;
    background: var(--cbn-bg);
    filter: blur(4px) contrast(12);
}

body.loader-l12 .carga-loader .loader::before {
    content: "";
    height: 40px;
    aspect-ratio: 3;
    background:
        radial-gradient(35% 146% at 50% 159%, transparent 64%, var(--cbn-primary) 66% 98%, transparent 101%) 0 0,
        radial-gradient(35% 146% at 50% -59%, transparent 64%, var(--cbn-primary) 66% 98%, transparent 101%) 100% 100%;
    background-size: calc(200% / 3) 50%;
    background-repeat: repeat-x;
    -webkit-mask: repeating-linear-gradient(90deg, black 0 10%, transparent 0 20%);
    mask: repeating-linear-gradient(90deg, black 0 10%, transparent 0 20%);
    animation: l12 .8s infinite linear;
}

@keyframes l12 {
    to { background-position: -200% 0, -100% 100%; }
}

/* — l13: puntos en ola (faroqueretano) — */
body.loader-l13 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l13 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l13 #news-container .sk-card { display: none; }
body.loader-l13 .estado-carga > .estado-texto { display: none; }
body.loader-l13 .estado-carga > .carga-loader { display: flex; }

body.loader-l13 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l13 .carga-loader .loader {
    width: 64px;
    aspect-ratio: 2;
    background:
        radial-gradient(farthest-side at bottom, var(--cbn-accent) 90%, transparent) 0 calc(50% - 4px),
        radial-gradient(farthest-side at top, var(--cbn-accent) 90%, transparent) 0 calc(50% + 4px),
        radial-gradient(farthest-side at bottom, var(--cbn-accent) 90%, transparent) 50% calc(50% - 4px),
        radial-gradient(farthest-side at top, var(--cbn-accent) 90%, transparent) 50% calc(50% + 4px),
        radial-gradient(farthest-side at bottom, var(--cbn-accent) 90%, transparent) 100% calc(50% - 4px),
        radial-gradient(farthest-side at top, var(--cbn-accent) 90%, transparent) 100% calc(50% + 4px);
    background-size: 25% 25%;
    background-repeat: no-repeat;
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    16.67% { background-position: 0 0, 0 100%, 50% calc(50% - 8px), 50% calc(50% + 4px), 100% calc(50% - 4px), 100% calc(50% + 4px); }
    33.33% { background-position: 0 0, 0 100%, 50% 0, 50% 100%, 100% calc(50% - 4px), 100% calc(50% + 4px); }
    50%    { background-position: 0 0, 0 100%, 50% 0, 50% 100%, 100% 0, 100% 100%; }
    66.67% { background-position: 0 calc(50% - 4px), 0 calc(50% + 4px), 50% 0, 50% 100%, 100% 0, 100% 100%; }
    83.33% { background-position: 0 calc(50% - 4px), 0 calc(50% + 4px), 50% calc(50% - 4px), 50% calc(50% + 4px), 100% 0, 100% 100%; }
}

/* — l10: líneas cruzadas (laplazaqueretana) — */
body.loader-l10 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l10 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l10 #news-container .sk-card { display: none; }
body.loader-l10 .estado-carga > .estado-texto { display: none; }
body.loader-l10 .estado-carga > .carga-loader { display: flex; }

body.loader-l10 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l10 .carga-loader .loader {
    height: 45px;
    aspect-ratio: 1.2;
    background:
        repeating-linear-gradient(90deg, var(--cbn-primary) 0 20%, transparent 0 40%) 50% 0,
        repeating-linear-gradient(90deg, var(--cbn-primary) 0 20%, transparent 0 40%) 50% 100%;
    background-size: calc(500% / 6) 50%;
    background-repeat: no-repeat;
    animation: l10 1s infinite linear;
}

@keyframes l10 {
    33%  { background-position: 0 0, 100% 100%; }
    66%  { background-position: 0 100%, 100% 0; }
    100% { background-position: 50% 100%, 50% 0; }
}

/* — l26: cuatro franjas (larepublicaq) — */
body.loader-l26 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l26 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l26 #news-container .sk-card { display: none; }
body.loader-l26 .estado-carga > .estado-texto { display: none; }
body.loader-l26 .estado-carga > .carga-loader { display: flex; }

body.loader-l26 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l26 .carga-loader .loader {
    width: 45px;
    aspect-ratio: 1;
    background:
        repeating-linear-gradient(90deg, var(--cbn-primary) 0 14.3%, transparent 0 28.6%),
        repeating-linear-gradient(90deg, var(--cbn-primary) 0 14.3%, transparent 0 28.6%),
        repeating-linear-gradient(90deg, var(--cbn-primary) 0 14.3%, transparent 0 28.6%),
        repeating-linear-gradient(90deg, var(--cbn-primary) 0 14.3%, transparent 0 28.6%);
    background-size: 140% 26%;
    animation: l26 .75s infinite linear;
}

@keyframes l26 {
    0%, 5%    { background-position: 0 0%, 0 33.33%, 0 66.67%, 0 100%; }
    20%       { background-position: 50% 0%, 0 33.33%, 0 66.67%, 0 100%; }
    40%       { background-position: 100% 0%, 50% 33.33%, 0 66.67%, 0 100%; }
    60%       { background-position: 100% 0%, 100% 33.33%, 50% 66.67%, 0 100%; }
    80%       { background-position: 100% 0%, 100% 33.33%, 100% 66.67%, 50% 100%; }
    95%, 100% { background-position: 100% 0%, 100% 33.33%, 100% 66.67%, 100% 100%; }
}

/* — l33: tres barras que crecen y giran (marquespublico) — */
body.loader-l33 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l33 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l33 #news-container .sk-card { display: none; }
body.loader-l33 .estado-carga > .estado-texto { display: none; }
body.loader-l33 .estado-carga > .carga-loader { display: flex; }

body.loader-l33 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l33 .carga-loader .loader {
    height: 45px;
    background:
        no-repeat linear-gradient(var(--cbn-primary) 0 0) left,
        no-repeat linear-gradient(var(--cbn-primary) 0 0) center,
        no-repeat linear-gradient(var(--cbn-primary) 0 0) right;
    background-size: 16px 100%;
    animation: l33-1 1.5s infinite, l33-2 1.5s infinite;
}

@keyframes l33-1 {
    0%, 100% { width: 45px; }
    35%, 65% { width: 65px; }
}

@keyframes l33-2 {
    0%, 40% { transform: rotate(0); }
    60%, 100% { transform: rotate(90deg); }
}

/* — l3: píldora rebotando (nexoqueretaro) — */
body.loader-l3 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l3 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l3 #news-container .sk-card { display: none; }
body.loader-l3 .estado-carga > .estado-texto { display: none; }
body.loader-l3 .estado-carga > .carga-loader { display: flex; }

body.loader-l3 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l3 .carga-loader .loader {
    width: 120px;
    height: 22px;
    border-radius: 40px;
    color: var(--cbn-primary);
    border: 2px solid;
    position: relative;
}

body.loader-l3 .carga-loader .loader::before {
    content: "";
    position: absolute;
    margin: 2px;
    width: 25%;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: currentColor;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    50% { left: 100%; transform: translateX(calc(-100% - 4px)); }
}

/* — l10b: espiral con máscara (poderenclaro) — */
body.loader-l10b .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l10b .loading-skeleton > .carga-loader { display: flex; }
body.loader-l10b #news-container .sk-card { display: none; }
body.loader-l10b .estado-carga > .estado-texto { display: none; }
body.loader-l10b .estado-carga > .carga-loader { display: flex; }

body.loader-l10b .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l10b .carga-loader .loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
}

body.loader-l10b .carga-loader .loader::before,
body.loader-l10b .carga-loader .loader::after {
    content: "";
    grid-area: 1 / 1;
    border-radius: 50%;
    background: repeating-conic-gradient(transparent, var(--cbn-accent) 1deg 18deg, transparent 20deg 36deg);
    -webkit-mask: repeating-radial-gradient(farthest-side, black 0 10%, transparent 0 20%);
    mask: repeating-radial-gradient(farthest-side, black 0 10%, transparent 0 20%);
    animation: l10b 4s infinite linear;
}

body.loader-l10b .carga-loader .loader::after {
    -webkit-mask: repeating-radial-gradient(farthest-side, transparent 0 10%, black 0 20%);
    mask: repeating-radial-gradient(farthest-side, transparent 0 10%, black 0 20%);
    animation-direction: reverse;
}

@keyframes l10b {
    100% { transform: rotate(.5turn); }
}

/* — l19: radial con máscara (puntodeencuentroqro) — */
body.loader-l19 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l19 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l19 #news-container .sk-card { display: none; }
body.loader-l19 .estado-carga > .estado-texto { display: none; }
body.loader-l19 .estado-carga > .carga-loader { display: flex; }

body.loader-l19 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l19 .carga-loader .loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
}

body.loader-l19 .carga-loader .loader::before,
body.loader-l19 .carga-loader .loader::after {
    content: "";
    grid-area: 1 / 1;
    border-radius: 50%;
    background: repeating-radial-gradient(farthest-side, transparent 0%, var(--cbn-accent) 1% 10%, transparent 11% 30%);
    -webkit-mask: repeating-conic-gradient(black 0 36deg, transparent 0 72deg);
    mask: repeating-conic-gradient(black 0 36deg, transparent 0 72deg);
    animation: l19 4s infinite linear;
}

body.loader-l19 .carga-loader .loader::after {
    -webkit-mask: repeating-conic-gradient(transparent 0 36deg, black 0 72deg);
    mask: repeating-conic-gradient(transparent 0 36deg, black 0 72deg);
    animation-direction: reverse;
}

@keyframes l19 {
    100% { transform: rotate(1turn); }
}

/* — classic: 12 barras que se desvanecen (puntoqueretaro) — */
body.loader-classic .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-classic .loading-skeleton > .carga-loader { display: flex; }
body.loader-classic #news-container .sk-card { display: none; }
body.loader-classic .estado-carga > .estado-texto { display: none; }
body.loader-classic .estado-carga > .carga-loader { display: flex; }

body.loader-classic .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-classic .carga-loader .loader {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    color: var(--cbn-primary);
}

body.loader-classic .carga-loader .loader .spoke {
    position: absolute;
    top: calc(50% - 3.9%);
    left: calc(50% - 10%);
    display: block;
    height: 8%;
    width: 24%;
    border-radius: 2px;
    background: currentColor;
    animation: lc-fade 1.2s linear infinite;
}

@keyframes lc-fade {
    0% { opacity: 1; }
    100% { opacity: 0.15; }
}

/* — l4: haz luminoso que barre (qrocentral) — */
body.loader-l4 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l4 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l4 #news-container .sk-card { display: none; }
body.loader-l4 .estado-carga > .estado-texto { display: none; }
body.loader-l4 .estado-carga > .carga-loader { display: flex; }

body.loader-l4 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l4 .carga-loader .loader {
    width: 20px;
    aspect-ratio: 1;
    background: var(--cbn-accent);
    box-shadow: 0 0 60px 15px var(--cbn-accent);
    transform: translate(-80px);
    clip-path: inset(0);
    animation: l4-1 .5s ease-in-out infinite alternate, l4-2 1s ease-in-out infinite;
}

@keyframes l4-1 {
    100% { transform: translateX(80px); }
}

@keyframes l4-2 {
    33% { clip-path: inset(0 0 0 -100px); }
    50% { clip-path: inset(0 0 0 0); }
    83% { clip-path: inset(0 -100px 0 0); }
}

/* — l19b: seis barras que saltan (quorumqueretaro) — */
body.loader-l19b .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l19b .loading-skeleton > .carga-loader { display: flex; }
body.loader-l19b #news-container .sk-card { display: none; }
body.loader-l19b .estado-carga > .estado-texto { display: none; }
body.loader-l19b .estado-carga > .carga-loader { display: flex; }

body.loader-l19b .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l19b .carga-loader .loader {
    height: 30px;
    aspect-ratio: 3;
    background:
        no-repeat linear-gradient(var(--cbn-accent) 0 0) calc(0*100%/5) 50%,
        no-repeat linear-gradient(var(--cbn-accent) 0 0) calc(1*100%/5) 50%,
        no-repeat linear-gradient(var(--cbn-accent) 0 0) calc(2*100%/5) 50%,
        no-repeat linear-gradient(var(--cbn-accent) 0 0) calc(3*100%/5) 50%,
        no-repeat linear-gradient(var(--cbn-accent) 0 0) calc(4*100%/5) 50%,
        no-repeat linear-gradient(var(--cbn-accent) 0 0) calc(5*100%/5) 50%;
    background-size: calc(100%/6 + 1px) 50%;
    animation: l19b 1s infinite cubic-bezier(0.5, 170, 0.5, -170);
}

@keyframes l19b {
    14.28% { background-position: calc(0*100%/5) 51%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%; }
    28.57% { background-position: calc(0*100%/5) 50%, calc(1*100%/5) 51%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%; }
    42.85% { background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 51%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%; }
    57.14% { background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 51%, calc(4*100%/5) 50%, calc(5*100%/5) 50%; }
    71.42% { background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 51%, calc(5*100%/5) 50%; }
    85.71% { background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 51%; }
}

/* — l20: dos cuadros cónicos en diagonal (rioabiertonoticias) — */
body.loader-l20 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l20 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l20 #news-container .sk-card { display: none; }
body.loader-l20 .estado-carga > .estado-texto { display: none; }
body.loader-l20 .estado-carga > .carga-loader { display: flex; }

body.loader-l20 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l20 .carga-loader .loader {
    width: 45px;
    aspect-ratio: 1;
    background:
        conic-gradient(from -90deg, var(--cbn-primary) 90deg, transparent 0),
        conic-gradient(from -90deg, var(--cbn-primary) 90deg, transparent 0);
    background-size: 40% 40%;
    animation: l20 1.5s infinite;
}

@keyframes l20 {
    0%, 20% { background-position: 0 0, 0 calc(100%/3); }
    33% { background-position: 0 0, calc(100%/3) calc(100%/3); }
    66% { background-position: 0 calc(100%/3), calc(100%/3) 0; }
    80%, 100% { background-position: 0 calc(100%/3), 0 0; }
}

/* — l35: puntos que se separan (territoriopublico) — */
body.loader-l35 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l35 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l35 #news-container .sk-card { display: none; }
body.loader-l35 .estado-carga > .estado-texto { display: none; }
body.loader-l35 .estado-carga > .carga-loader { display: flex; }

body.loader-l35 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l35 .carga-loader .loader {
    height: 15px;
    aspect-ratio: 5;
    display: grid;
}

body.loader-l35 .carga-loader .loader::before,
body.loader-l35 .carga-loader .loader::after {
    content: "";
    grid-area: 1 / 1;
    height: inherit;
    background:
        no-repeat radial-gradient(farthest-side, var(--cbn-primary) 94%, transparent) left,
        no-repeat radial-gradient(farthest-side, var(--cbn-primary) 94%, transparent) right;
    background-size: 15px 100%;
    background-repeat: no-repeat;
    animation: l35 1s infinite linear;
}

body.loader-l35 .carga-loader .loader::after {
    margin-left: auto;
    animation-name: l35b;
}

@keyframes l35 {
    0% { transform: translateY(0); aspect-ratio: 2.3; }
    33% { transform: translateY(8px); aspect-ratio: 2.3; }
    66% { transform: translateY(8px); aspect-ratio: 3.7; }
    100% { transform: translateY(0); aspect-ratio: 3.7; }
}

@keyframes l35b {
    0% { transform: translateY(0); aspect-ratio: 2.3; }
    33% { transform: translateY(-8px); aspect-ratio: 2.3; }
    66% { transform: translateY(-8px); aspect-ratio: 3.7; }
    100% { transform: translateY(0); aspect-ratio: 3.7; }
}

/* — l10c: párpados espejo (testigoqueretaro) — */
body.loader-l10c .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l10c .loading-skeleton > .carga-loader { display: flex; }
body.loader-l10c #news-container .sk-card { display: none; }
body.loader-l10c .estado-carga > .estado-texto { display: none; }
body.loader-l10c .estado-carga > .carga-loader { display: flex; }

body.loader-l10c .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l10c .carga-loader .loader {
    display: inline-grid;
}

body.loader-l10c .carga-loader .loader::before,
body.loader-l10c .carga-loader .loader::after {
    content: "";
    grid-area: 1 / 1;
    height: 30px;
    aspect-ratio: 6;
    background:
        radial-gradient(35% 146% at 50% 159%, transparent 64%, var(--cbn-accent) 66% 98%, transparent 101%) 0 0,
        radial-gradient(35% 146% at 50% -59%, transparent 64%, var(--cbn-accent) 66% 98%, transparent 101%) 25% 100%;
    background-size: calc(100% / 3) 50%;
    background-repeat: repeat-x;
    clip-path: inset(0 100% 0 0);
    animation: l10c 1.5s infinite linear;
}

body.loader-l10c .carga-loader .loader::after {
    scale: -1;
}

@keyframes l10c {
    50% { clip-path: inset(0); }
    to { clip-path: inset(0 0 0 100%); }
}

/* — l14: serpiente en píldora (vertice40) — */
body.loader-l14 .loading-skeleton > *:not(.carga-loader):not(.sk-status) { display: none; }
body.loader-l14 .loading-skeleton > .carga-loader { display: flex; }
body.loader-l14 #news-container .sk-card { display: none; }
body.loader-l14 .estado-carga > .estado-texto { display: none; }
body.loader-l14 .estado-carga > .carga-loader { display: flex; }

body.loader-l14 .carga-loader {
    justify-content: center;
    align-items: center;
    padding: 64px 0;
}

body.loader-l14 .carga-loader .loader {
    width: 120px;
    height: 22px;
    border-radius: 40px;
    color: var(--cbn-primary);
    border: 2px solid;
    position: relative;
    overflow: hidden;
}

body.loader-l14 .carga-loader .loader::before {
    content: "";
    position: absolute;
    margin: 2px;
    width: 14px;
    top: 0;
    bottom: 0;
    left: -20px;
    border-radius: inherit;
    background: currentColor;
    box-shadow: -10px 0 12px 3px currentColor;
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%, -30px 50%);
    animation: l14 1s infinite linear;
}

@keyframes l14 {
    100% { left: calc(100% + 20px); }
}

/* ==========================================================================
   4. MENÚ NAV-02 (dropdowns CSS) — solo sitios con body.nav-menu02
   Basado en el diseño nav-02 (CodeFronts, MIT), adaptado a noticias:
   «Secciones» = panel ancho con las categorías del sitio (icono + descripción),
   «Nosotros» = páginas legales, acciones = redes sociales. Sin JS.
   ========================================================================== */

body.nav-menu02 .header {
    background: var(--cbn-surface);
    border-bottom: 1px solid var(--cbn-border);
    box-shadow: 0 2px 16px var(--cbn-primary-a12);
}

body.nav-menu02 .header-container {
    min-height: 68px;
    padding: 8px 28px;
    gap: 18px;
}

body.nav-menu02 .nav-02__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

body.nav-menu02 .nav-02__logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cbn-primary), var(--cbn-primary-mid));
    display: grid;
    place-items: center;
    overflow: hidden;
}

body.nav-menu02 .nav-02__logo-mark img {
    width: 27px;
    height: 27px;
    object-fit: contain;
    display: block;
}

/* — links de primer nivel — */
body.nav-menu02 .nav-02__links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

body.nav-menu02 .nav-02__links > li {
    position: relative;
}

/* puente invisible para no perder el hover al bajar al panel */
body.nav-menu02 .nav-02__links > li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

body.nav-menu02 .nav-02__links > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    color: var(--cbn-text-muted);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 7px;
    transition: color 0.18s, background 0.18s;
    white-space: nowrap;
}

body.nav-menu02 .nav-02__links > li > a:hover,
body.nav-menu02 .nav-02__links > li:hover > a,
body.nav-menu02 .nav-02__links > li > a.is-active {
    color: var(--cbn-text);
    background: var(--cbn-bg);
}

body.nav-menu02 .nav-02__links > li > a:focus-visible {
    outline: 2px solid var(--cbn-accent);
    outline-offset: 2px;
}

body.nav-menu02 .nav-02__caret {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    transition: transform 0.22s ease;
}

body.nav-menu02 .nav-02__links > li:hover > a .nav-02__caret {
    transform: rotate(180deg);
}

/* — panel desplegable — */
body.nav-menu02 .nav-02__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--cbn-surface);
    border: 1px solid var(--cbn-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px var(--cbn-primary-a12);
    padding: 8px;
    min-width: 220px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.2s ease, visibility 0.18s;
    z-index: 200;
}

body.nav-menu02 .nav-02__links > li:hover .nav-02__dropdown,
body.nav-menu02 .nav-02__links > li:focus-within .nav-02__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

body.nav-menu02 .nav-02__dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--cbn-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 7px;
    transition: background 0.15s, color 0.15s;
}

body.nav-menu02 .nav-02__dropdown li a:hover {
    background: var(--cbn-bg);
    color: var(--cbn-text);
}

body.nav-menu02 .nav-02__dropdown-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--cbn-bg);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.nav-menu02 .nav-02__dropdown-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--cbn-accent);
    fill: none;
    stroke-width: 2;
}

body.nav-menu02 .nav-02__dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.nav-menu02 .nav-02__dropdown-text span {
    font-size: 0.75rem;
    color: var(--cbn-text-muted);
    font-weight: 400;
}

/* — panel ancho (categorías) — */
body.nav-menu02 .nav-02__dropdown--wide {
    min-width: 520px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    left: 50%;
}

body.nav-menu02 .nav-02__cta-wrap {
    grid-column: 1 / -1;
}

body.nav-menu02 .nav-02__dropdown-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--cbn-primary-a08);
    border-radius: 8px;
    padding: 11px 14px;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--cbn-primary);
    font-weight: 700;
    text-decoration: none;
}

body.nav-menu02 .nav-02__dropdown-cta:hover {
    background: var(--cbn-primary-a12);
}

/* — acciones (redes) — */
body.nav-menu02 .nav-02__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

body.nav-menu02 .nav-02__btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--cbn-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cbn-primary);
    background: transparent;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

body.nav-menu02 .nav-02__btn:hover {
    background: var(--cbn-primary);
    color: var(--cbn-white);
    border-color: var(--cbn-primary);
}

@media (max-width: 768px) {
    body.nav-menu02 .header-container { position: relative; padding: 8px 16px; }

    body.nav-menu02 .nav-02__actions { display: none; }

    body.nav-menu02 .nav-02__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        background: var(--cbn-surface);
        border-top: 1px solid var(--cbn-border);
        box-shadow: 0 18px 30px var(--cbn-primary-a12);
        padding: 6px 16px 14px !important;
    }

    body.nav-menu02 .header.header-nav-open .nav-02__links {
        display: flex;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    body.nav-menu02 .nav-02__links > li::after { display: none; }

    body.nav-menu02 .nav-02__links > li > a {
        padding: 12px 4px;
        border-bottom: 1px solid var(--cbn-border-soft);
        border-radius: 0;
    }

    body.nav-menu02 .nav-02__caret { display: none; }

    body.nav-menu02 .nav-02__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: 0;
        background: transparent;
        padding: 0 0 8px 6px;
        min-width: 0;
    }

    body.nav-menu02 .nav-02__dropdown--wide {
        display: block;
        min-width: 0;
    }

    body.nav-menu02 .nav-02__dropdown-icon {
        width: 26px;
        height: 26px;
    }

    body.nav-menu02 .nav-02__dropdown li a { padding: 8px 4px; }

    body.nav-menu02 .nav-02__cta-wrap { display: none; }
}

/* ==========================================================================
   5. MENÚ NAV-04 — hamburguesa + drawer (CodeFronts, MIT)
   ========================================================================== */
body.nav-nav04 #mobile-hamburger { display: none !important; }
body.nav-nav04 .nav-04__toggle { display: none; }

body.nav-nav04 .header {
    background: var(--cbn-surface);
    border-bottom: 2px solid var(--cbn-border);
    box-shadow: 0 2px 16px var(--cbn-primary-a12);
}

body.nav-nav04 .nav-04__bar {
    min-height: 64px;
    padding: 8px 24px;
}

body.nav-nav04 .nav-04__logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cbn-primary), var(--cbn-primary-mid));
    display: grid;
    place-items: center;
    overflow: hidden;
}

body.nav-nav04 .nav-04__logo-mark img {
    width: 27px;
    height: 27px;
    object-fit: contain;
    display: block;
}

body.nav-nav04 .nav-04__ham {
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
    transition: background 0.18s;
    user-select: none;
}

body.nav-nav04 .nav-04__ham:hover { background: var(--cbn-bg); }

body.nav-nav04 .nav-04__ham span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cbn-text);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s, width 0.3s;
    transform-origin: center;
}

body.nav-nav04 #nav-04-toggle:checked ~ .header .nav-04__ham span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-nav04 #nav-04-toggle:checked ~ .header .nav-04__ham span:nth-child(2) { opacity: 0; width: 0; }
body.nav-nav04 #nav-04-toggle:checked ~ .header .nav-04__ham span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nav-nav04 .nav-04__overlay {
    position: fixed;
    inset: 0;
    z-index: 9001;
    background: transparent;
    pointer-events: none;
    transition: background 0.35s ease;
}

body.nav-nav04 #nav-04-toggle:checked ~ .nav-04__overlay {
    background: color-mix(in srgb, var(--cbn-black) 45%, transparent);
    pointer-events: auto;
}

body.nav-nav04 .nav-04__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 86vw;
    z-index: 9002;
    background: var(--cbn-dark);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

body.nav-nav04 #nav-04-toggle:checked ~ .nav-04__drawer { transform: translateX(0); }

body.nav-nav04 .nav-04__drawer-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--cbn-white-a08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.nav-nav04 .nav-04__drawer-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

body.nav-nav04 .nav-04__close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--cbn-white-a08);
    cursor: pointer;
}

body.nav-nav04 .nav-04__close svg {
    width: 18px;
    height: 18px;
    stroke: var(--cbn-white);
    fill: none;
}

body.nav-nav04 .nav-04__drawer-links {
    padding: 14px;
    flex: 1;
    list-style: none;
    margin: 0;
}

body.nav-nav04 .nav-04__drawer-links li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--cbn-white-a85);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 10px;
    transition: background 0.18s, color 0.18s;
}

body.nav-nav04 .nav-04__drawer-links li a:hover {
    background: var(--cbn-white-a08);
    color: var(--cbn-white);
}

body.nav-nav04 .nav-04__drawer-links li a svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
    opacity: 0.6;
}

body.nav-nav04 .nav-04__drawer-links li.is-active a {
    color: var(--cbn-white);
    background: var(--cbn-accent-a12);
}

body.nav-nav04 .nav-04__drawer-links li.is-active a svg {
    color: var(--cbn-accent);
    opacity: 1;
}

body.nav-nav04 .nav-04__drawer-divider {
    height: 1px;
    background: var(--cbn-white-a08);
    margin: 8px 14px;
}

body.nav-nav04 .nav-04__drawer-footer {
    padding: 18px 14px;
    border-top: 1px solid var(--cbn-white-a08);
}

body.nav-nav04 .nav-04__drawer-cta {
    display: block;
    padding: 12px;
    background: var(--cbn-accent);
    color: var(--cbn-white);
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ==========================================================================
   6. MENÚ NAV-05 — overlay de pantalla completa (CodeFronts, MIT)
   ========================================================================== */
body.nav-nav05 #mobile-hamburger { display: none !important; }
body.nav-nav05 .nav-05__toggle { display: none; }

body.nav-nav05 .header {
    background: var(--cbn-surface);
    border-bottom: 1px solid var(--cbn-border);
    box-shadow: 0 2px 16px var(--cbn-primary-a12);
    z-index: 9100;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

body.nav-nav05 .nav-05__bar {
    min-height: 64px;
    padding: 8px 24px;
}

body.nav-nav05 .nav-05__logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cbn-primary), var(--cbn-primary-mid));
    display: grid;
    place-items: center;
    overflow: hidden;
}

body.nav-nav05 .nav-05__logo-mark img {
    width: 27px;
    height: 27px;
    object-fit: contain;
    display: block;
}

body.nav-nav05 .nav-05__btn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--cbn-primary-a08);
    border: 1px solid var(--cbn-border);
    border-radius: 10px;
    transition: background 0.18s, border-color 0.18s;
    user-select: none;
}

body.nav-nav05 .nav-05__btn span {
    display: block;
    border-radius: 2px;
    background: var(--cbn-text);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s, width 0.35s, background 0.3s;
}

body.nav-nav05 .nav-05__btn span:nth-child(1) { width: 24px; height: 2px; }
body.nav-nav05 .nav-05__btn span:nth-child(2) { width: 16px; height: 2px; }
body.nav-nav05 .nav-05__btn span:nth-child(3) { width: 20px; height: 2px; }

body.nav-nav05 #nav-05-toggle:checked ~ .header { background: transparent; border-color: transparent; box-shadow: none; }
body.nav-nav05 #nav-05-toggle:checked ~ .header .nav-05__btn { background: var(--cbn-white-a08); border-color: var(--cbn-white-a18); }
body.nav-nav05 #nav-05-toggle:checked ~ .header .nav-05__btn span { background: var(--cbn-white); }
body.nav-nav05 #nav-05-toggle:checked ~ .header .nav-05__btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 24px; }
body.nav-nav05 #nav-05-toggle:checked ~ .header .nav-05__btn span:nth-child(2) { opacity: 0; width: 0; }
body.nav-nav05 #nav-05-toggle:checked ~ .header .nav-05__btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 24px; }

body.nav-nav05 .nav-05__overlay {
    position: fixed;
    inset: 0;
    z-index: 9005;
    background: var(--cbn-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 60px 50px;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.5s;
    overflow: auto;
}

body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay {
    transform: translateY(0);
    visibility: visible;
}

body.nav-nav05 .nav-05__nav-list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}

body.nav-nav05 .nav-05__nav-list li { overflow: hidden; }

body.nav-nav05 .nav-05__nav-list li a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-primary);
    font-size: clamp(1.9rem, 5vw, 3.6rem);
    font-weight: 800;
    color: var(--cbn-white-a18);
    text-decoration: none;
    letter-spacing: -0.03em;
    line-height: 1.15;
    transition: color 0.2s ease;
    padding: 3px 0;
}

body.nav-nav05 .nav-05__nav-list li a:hover { color: var(--cbn-white); }

body.nav-nav05 .nav-05__num {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cbn-accent);
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 0.2s;
}

body.nav-nav05 .nav-05__nav-list li a:hover .nav-05__num { opacity: 1; }

body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li {
    animation: nav05-in 0.5s both;
}
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(1) { animation-delay: 0.05s; }
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(2) { animation-delay: 0.1s; }
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(3) { animation-delay: 0.15s; }
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(4) { animation-delay: 0.2s; }
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(5) { animation-delay: 0.25s; }
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(6) { animation-delay: 0.3s; }
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(7) { animation-delay: 0.35s; }
body.nav-nav05 #nav-05-toggle:checked ~ .nav-05__overlay .nav-05__nav-list li:nth-child(8) { animation-delay: 0.4s; }

@keyframes nav05-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

body.nav-nav05 .nav-05__overlay-footer {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

body.nav-nav05 .nav-05__overlay-social {
    display: flex;
    gap: 16px;
}

body.nav-nav05 .nav-05__overlay-social a {
    font-size: 0.875rem;
    color: var(--cbn-white-a85);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s;
}

body.nav-nav05 .nav-05__overlay-social a:hover { color: var(--cbn-white); }

body.nav-nav05 .nav-05__overlay-cta {
    padding: 12px 28px;
    background: var(--cbn-accent);
    color: var(--cbn-white);
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9375rem;
    transition: opacity 0.18s;
}

body.nav-nav05 .nav-05__overlay-cta:hover { opacity: 0.85; }

/* ==========================================================================
   7. MENÚ NAV-10 — barra de vidrio (glassmorphism) (CodeFronts, MIT)
   ========================================================================== */
body.nav-nav10 #mobile-hamburger { display: none !important; }

body.nav-nav10 .header {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.nav-nav10 .nav-10__bar {
    width: calc(100% - 36px);
    max-width: 1200px;
    margin: 10px auto 0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: color-mix(in srgb, var(--cbn-surface) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--cbn-border) 70%, transparent);
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--cbn-primary-a12);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

body.nav-nav10 .nav-10__logo-glyph {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--cbn-primary), var(--cbn-primary-mid));
    border: 1px solid transparent;
    display: grid;
    place-items: center;
    overflow: hidden;
}

body.nav-nav10 .nav-10__logo-glyph img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

body.nav-nav10 .nav-10__links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.nav-nav10 .nav-10__links a {
    display: inline-block;
    padding: 8px 13px;
    color: var(--cbn-text-muted);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

body.nav-nav10 .nav-10__links a:hover {
    background: color-mix(in srgb, var(--cbn-primary) 8%, transparent);
    color: var(--cbn-text);
}

body.nav-nav10 .nav-10__links a.nav-10__active {
    background: color-mix(in srgb, var(--cbn-primary) 12%, transparent);
    color: var(--cbn-text);
}

body.nav-nav10 .nav-10__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

body.nav-nav10 .nav-10__btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cbn-primary);
    border: 1px solid var(--cbn-border);
    background: transparent;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.18s, color 0.18s;
}

body.nav-nav10 .nav-10__btn:hover {
    background: var(--cbn-primary);
    color: var(--cbn-white);
}

@media (max-width: 900px) {
    body.nav-nav10 .nav-10__links {
        overflow-x: auto;
        scrollbar-width: none;
    }
    body.nav-nav10 .nav-10__links::-webkit-scrollbar { display: none; }
    body.nav-nav10 .nav-10__links li { flex: 0 0 auto; }
}

@media (max-width: 600px) {
    body.nav-nav10 .nav-10__actions { display: none; }
    body.nav-nav10 .nav-10__bar { width: calc(100% - 24px); margin-top: 8px; padding: 8px 12px; }
}

/* ==========================================================================
   8. MENÚ SN-08 — transparente arriba, sólido al hacer scroll (CodeFronts, MIT)
   ========================================================================== */
body.nav-sn08 #mobile-hamburger { display: none !important; }

body.nav-sn08 .header {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

body.nav-sn08 .header[data-stuck="true"] {
    background: color-mix(in srgb, var(--cbn-surface) 90%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--cbn-border);
    box-shadow: 0 10px 30px -22px var(--cbn-primary-a30);
}

body.nav-sn08 .sn-08__sentinel {
    height: 1px;
    margin-block-end: -1px;
}

body.nav-sn08 .sn-08__inner {
    min-height: 64px;
    padding: 8px 24px;
    gap: 16px;
}

body.nav-sn08 .sn-08__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--cbn-text);
    text-decoration: none;
    white-space: nowrap;
}

body.nav-sn08 .sn-08__logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cbn-primary), var(--cbn-primary-mid));
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}

body.nav-sn08 .sn-08__logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

body.nav-sn08 .sn-08__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
    overflow-x: auto;
    scrollbar-width: none;
}

body.nav-sn08 .sn-08__nav::-webkit-scrollbar { display: none; }

body.nav-sn08 .sn-08__link {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    font-family: var(--font-secondary);
    font-size: 13.6px;
    font-weight: 600;
    color: var(--cbn-text);
    opacity: 0.86;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.18s ease, background 0.18s ease;
}

body.nav-sn08 .sn-08__link:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--cbn-text) 10%, transparent);
}

body.nav-sn08 .sn-08__link[aria-current="page"] {
    opacity: 1;
    font-weight: 700;
}

body.nav-sn08 .sn-08__cta {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 99px;
    font-size: 13.4px;
    font-weight: 700;
    color: var(--cbn-text);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--cbn-text) 45%, transparent);
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

body.nav-sn08 .sn-08__cta:hover {
    background: var(--cbn-text);
    color: var(--cbn-surface);
}

@media (max-width: 768px) {
    body.nav-sn08 .sn-08__cta { display: none; }
    body.nav-sn08 .sn-08__link { padding: 0 9px; font-size: 12.8px; }
    body.nav-sn08 .sn-08__inner { padding: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-line,
    .sk-thumb,
    .sk-hero,
    .sk-media,
    .sk-title { animation: none; }
}

/* ==========================================================================
   3. LAYOUTS — estructura de la portada
   ========================================================================== */

/* — revista: hero panorámico + 3 tarjetas en rejilla + grid magazine — */
body.layout-revista .hero-horizontal { margin-bottom: var(--space-xl); }
body.layout-revista .hero-horizontal img { aspect-ratio: 21/9; }
body.layout-revista .hero-overlay { padding: 48px; }
body.layout-revista .hero-title { font-size: clamp(1.7rem, 3.2vw, 2.8rem); max-width: 860px; }
body.layout-revista .hero-excerpt { max-width: 640px; }

body.layout-revista .horizontal-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: none;
    margin: 0;
}
body.layout-revista .horizontal-list .horizontal-card-content {
    padding: var(--space-md);
    justify-content: flex-start;
}
body.layout-revista .horizontal-list .horizontal-card-content h3 { font-size: 1rem; }
body.layout-revista .horizontal-list .horizontal-card-content p { display: none; }

body.layout-revista #news-container.card-grid { grid-template-columns: repeat(3, 1fr); }
body.layout-revista #news-container .article-card:first-child { grid-column: span 2; }
body.layout-revista #news-container .article-card:first-child .card-title { font-size: 1.22rem; }

@media (max-width: 900px) {
    body.layout-revista .horizontal-list { grid-template-columns: repeat(2, 1fr); }
    body.layout-revista #news-container.card-grid { grid-template-columns: repeat(2, 1fr); }
    body.layout-revista #news-container .article-card:first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
    body.layout-revista .hero-overlay { padding: 24px; }
    body.layout-revista .horizontal-list { grid-template-columns: 1fr; }
    body.layout-revista #news-container.card-grid { grid-template-columns: 1fr; }
    body.layout-revista #news-container .article-card:first-child { grid-column: auto; }
}

/* — rail: hero + panel LO ÚLTIMO — patron de la flota desplegada del canonico
   (radiocinconoticias / nodoinformativo / mexicoinformado / noticiasobjetivo):
   lista lateral con cabecera de color, miniatura 95x80, badge y fecha — */
body.layout-rail #featured-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-lg);
    align-items: start;
}
body.layout-rail .hero-horizontal { margin-bottom: 0; }
body.layout-rail .hero-horizontal img { aspect-ratio: 16/10; }

body.layout-rail .horizontal-list {
    max-width: none;
    margin: 0;
    gap: 0;
    background: var(--cbn-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
body.layout-rail .horizontal-list::before {
    content: "LO ÚLTIMO";
    display: block;
    background: var(--cbn-primary);
    color: var(--cbn-on-primary);
    font-family: var(--font-secondary);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 18px;
}
body.layout-rail .horizontal-list .article-card {
    flex-direction: row;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border-width: 0;
    border-bottom: 1px solid var(--cbn-border-soft);
}
body.layout-rail .horizontal-list .article-card:last-child { border-bottom: 0; }
body.layout-rail .horizontal-list .article-card:hover {
    transform: none;
    background: var(--cbn-primary-a08);
    border-color: transparent;
    box-shadow: none;
}
body.layout-rail .horizontal-list .article-card > a {
    flex: 0 0 95px;
    width: 95px;
    height: 80px;
    aspect-ratio: auto;
    align-self: center;
}
body.layout-rail .horizontal-list .article-card > a img { height: 100%; object-fit: cover; }
body.layout-rail .horizontal-list .horizontal-card-content {
    padding: 12px 14px;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}
body.layout-rail .horizontal-list .horizontal-card-content h3 { font-size: 0.85rem; line-height: 1.3; margin: 2px 0; }
body.layout-rail .horizontal-list .horizontal-card-content p { display: none; }
body.layout-rail .horizontal-list .card-meta { font-size: 0.78rem; }

body.layout-rail #news-container.card-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1000px) {
    body.layout-rail #featured-container { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    body.layout-rail #news-container.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    body.layout-rail #news-container.card-grid { grid-template-columns: 1fr; }
}

/* — cinematico: hero full-bleed + 3 secundarias — patron de la flota desplegada
   del canonico ("Cinematic hero" de tvmexico; hero grande de verticenoticias) — */
body.layout-cinematico { overflow-x: hidden; }
body.layout-cinematico .featured-section { padding-top: 0; }
body.layout-cinematico .hero-horizontal {
    margin-left: calc(50% - 50vw);
    width: 100vw;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: var(--space-xl);
}
body.layout-cinematico .hero-horizontal img { aspect-ratio: 21/9; }
body.layout-cinematico .hero-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px var(--space-lg);
}
body.layout-cinematico .hero-overlay > * { width: 100%; max-width: var(--ancho-max); }
body.layout-cinematico .hero-title { font-size: clamp(1.8rem, 3.2vw, 2.9rem); max-width: 900px; }

body.layout-cinematico .horizontal-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: none;
    margin: 0;
}
body.layout-cinematico .horizontal-list .article-card > a { aspect-ratio: 16/10; }
body.layout-cinematico .horizontal-list .horizontal-card-content {
    padding: var(--space-md);
    justify-content: flex-start;
}
body.layout-cinematico .horizontal-list .horizontal-card-content h3 { font-size: 1rem; }
body.layout-cinematico .horizontal-list .horizontal-card-content p { display: none; }

body.layout-cinematico #news-container.card-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    body.layout-cinematico .hero-horizontal img { aspect-ratio: 16/9; }
    body.layout-cinematico .hero-overlay { padding: 24px var(--space-md); }
    body.layout-cinematico .horizontal-list { grid-template-columns: 1fr; }
    body.layout-cinematico #news-container.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    body.layout-cinematico #news-container.card-grid { grid-template-columns: 1fr; }
}

/* — compacto: hero franja + chips en carrusel + grid denso — */
body.layout-compacto .hero-horizontal { margin-bottom: var(--space-xl); }
body.layout-compacto .hero-horizontal img { aspect-ratio: 3/1; }
body.layout-compacto .hero-overlay { padding: 20px 28px; }
body.layout-compacto .hero-title { font-size: clamp(1.1rem, 1.9vw, 1.55rem); margin: 6px 0; }
body.layout-compacto .hero-excerpt { display: none; }

body.layout-compacto .horizontal-list {
    flex-direction: row;
    gap: var(--space-md);
    max-width: none;
    margin: 0;
    overflow-x: auto;
    padding-bottom: var(--space-sm);
}
body.layout-compacto .horizontal-list .article-card { flex: 0 0 250px; }
body.layout-compacto .horizontal-list .horizontal-card-content {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    justify-content: flex-start;
}
body.layout-compacto .horizontal-list .horizontal-card-content h3 { font-size: 0.92rem; }
body.layout-compacto .horizontal-list .horizontal-card-content p { display: none; }
body.layout-compacto .horizontal-list .card-meta { font-size: 0.75rem; }

body.layout-compacto #news-container.card-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }
body.layout-compacto #news-container .card-content { padding: 14px; }
body.layout-compacto #news-container .card-title { font-size: 0.98rem; }

@media (max-width: 1200px) {
    body.layout-compacto #news-container.card-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    body.layout-compacto #news-container.card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    body.layout-compacto #news-container.card-grid { grid-template-columns: 1fr; }
}

/* — listado: hero + tarjetas apaisadas (imagen a la izquierda) — */
body.layout-listado .hero-horizontal { margin-bottom: var(--space-xl); }

body.layout-listado .horizontal-list { max-width: 1040px; gap: var(--space-md); }
body.layout-listado .horizontal-list .article-card { flex-direction: row; }
body.layout-listado .horizontal-list .article-card > a {
    flex: 0 0 44%;
    width: 44%;
    aspect-ratio: auto;
    min-height: 170px;
}
body.layout-listado .horizontal-list .article-card > a img { height: 100%; }
body.layout-listado .horizontal-list .horizontal-card-content {
    padding: var(--space-md) var(--space-lg);
}
body.layout-listado .horizontal-list .horizontal-card-content p {
    overflow: hidden;
    max-height: 3.2em;
}

body.layout-listado #news-container.card-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }

@media (max-width: 900px) {
    body.layout-listado #news-container.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    body.layout-listado .horizontal-list .article-card { flex-direction: column; }
    body.layout-listado .horizontal-list .article-card > a {
        width: 100%;
        flex: none;
        aspect-ratio: 16/9;
        min-height: 0;
    }
    body.layout-listado .horizontal-list .article-card > a img { height: 100%; }
}
@media (max-width: 600px) {
    body.layout-listado #news-container.card-grid { grid-template-columns: 1fr; }
}