/* =====================================================================
   Theme OnlyRadio — styles
   Layout de DOS COLUMNAS:
     · .or-shell   → rejilla `var(--or-side-w,350px) 1fr`
     · .or-sidebar → columna izquierda fija (100vh) con marca, menú,
                     widgets y el crédito anclado al fondo.
     · .or-main    → columna derecha (1fr): hero a pantalla completa en la
                     portada, y debajo las secciones y las tarjetas.
   ===================================================================== */

/* ------------------------------------------------------------ reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: #0b0f14;
    color: var(--or-main-text, #1b1f24);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--or-main-link, #0b57d0);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: var(--or-main-link-hover, #0842a0);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--or-main-h, #101418);
    line-height: 1.25;
    margin: 0 0 .6em;
}

figure {
    margin: 0;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------- skip link ---- */
.or-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100000;
    background: #fff;
    color: #000;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
}

.or-skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------- shell ---- */
.or-shell {
    display: grid;
    grid-template-columns: var(--or-side-w, 350px) 1fr;
    min-height: 100vh;
    background: var(--or-main-bg, #ffffff);
}

/* ======================================================= SIDEBAR ==== */
.or-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--or-side-bg, #0e1116);
    color: var(--or-side-text, #e7ebf0);
    border-right: 1px solid var(--or-side-border, #1c232c);
}

/* Marca (logo + nombre) */
.or-brand {
    padding: 28px 24px 8px;
    text-align: center;
    flex: none;
}

.or-brand-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    color: inherit;
}

.or-brand-link:hover {
    color: inherit;
}

.or-logo {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

.or-site-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--or-side-text, #e7ebf0);
}

/* Zona scrolleable: menú + widgets (el crédito queda fijo abajo) */
.or-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Menú */
.or-nav {
    padding: 12px 18px;
}

.or-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.or-menu li {
    margin: 0;
}

.or-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
    color: var(--or-side-link, #cfd6df);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.or-menu a:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
    color: var(--or-side-link-hover, #ffffff);
}

.or-menu .current-menu-item>a,
.or-menu .current_page_item>a,
.or-menu a[aria-current="page"] {
    background: rgba(34, 197, 94, .14);
    border-color: rgba(34, 197, 94, .38);
    color: var(--or-side-active, #22c55e);
}

.or-ic {
    flex: none;
    width: 20px;
    height: 20px;
}

.or-menu-label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Widgets de la barra */
.or-sidebar-widgets {
    padding: 8px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.or-sidebar-widgets .widget {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--or-side-text, #e7ebf0);
}

.or-sidebar-widgets .widget-title,
.or-sidebar-widgets .wp-block-heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--or-side-text, #e7ebf0);
    margin: 0 0 10px;
}

.or-sidebar-widgets a {
    color: var(--or-side-link, #cfd6df);
}

.or-sidebar-widgets a:hover {
    color: var(--or-side-link-hover, #fff);
}

/* Crédito anclado al fondo de la barra */
.or-credit {
    flex: none;
    padding: 18px 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--or-side-text, #e7ebf0);
    opacity: .65;
    border-top: 1px solid var(--or-side-border, #1c232c);
}

.or-credit a {
    color: inherit;
}

/* Toggle del menú (solo móvil) */
.or-nav-toggle {
    display: none;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 60;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
}

.or-nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--or-side-text, #e7ebf0);
}

/* ========================================================== MAIN ==== */
.or-main {
    min-width: 0;
    background: var(--or-main-bg, #ffffff);
    color: var(--or-main-text, #1b1f24);
}

/* ===================== COLUMNAS PÁGINAS INTERNAS (derecha) ======== */
/* Envoltorio de 2 columnas: contenido (1fr) + columna derecha (300px).
   Sin widgets en right_sidebar, .or-2col queda en 1 columna (sin cambios). */
.or-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.or-2col--side {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    column-gap: 28px;
}

/* El artículo llena su columna (quita el max-width:95% que deja hueco) */
.or-2col--side .or-article {
    max-width: 100%;
}

/* La sección cede su padding derecho al gap de la rejilla */
.or-2col--side>.or-2col-main>.or-single,
.or-2col--side>.or-2col-main>.or-page,
.or-2col--side>.or-2col-main>.or-listing,
.or-2col--side>.or-2col-main>.or-404 {
    padding-right: 0;
}

/* Columna derecha: sticky con sus widgets */
.or-2col-side {
    position: sticky;
    top: 0;
    align-self: start;
    padding: 40px 40px 40px 0;
}

.or-2col-side .widget-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.or-2col-side .widget {
    margin: 0;
    background: var(--or-card-bg, #f7f8fa);
    border: 1px solid var(--or-card-border, #e5e8ec);
    border-radius: 14px;
    padding: 18px;
}

.or-2col-side .widget-title,
.or-2col-side .widget h2,
.or-2col-side .widget h3 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--or-card-border, #e5e8ec);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
}

.or-2col-side .widget p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--or-card-excerpt, #5b636d);
}

.or-2col-side .widget p:last-child {
    margin-bottom: 0;
}

.or-2col-side .widget img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.or-2col-side .widget a {
    color: var(--or-main-link, #0b57d0);
    font-weight: 600;
}

/* ========================================================== HERO ==== */
.or-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* background-color (NO el shorthand `background`): así no borra el
       background-image que inyecta header.php para «Imagen de fondo del hero». */
    background-color: #0b0f14;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

/* El widget del reproductor ocupa todo el hero */
.or-hero .widget-area,
.or-hero .widget {
    margin: 0;
    width: 100%;
}

/* Radio / Player Luna: el hero llena la pantalla en desktop */
.or-hero .pr-player,
.or-hero .pluna-wrap {
    min-height: 100vh;
    height: 100vh;
    border-radius: 0;
}

/* Player Luna: el alto configurado cede ante el hero a pantalla completa */
.or-hero .pluna-wrap {
    --pluna-h: 100vh !important;
}

/* TV Player: el hero se AJUSTA al vídeo 16:9 (sin bandas vacías) */
.or-hero--tvplayer {
    min-height: 0;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.or-hero--tvplayer .tvplayer {
    min-height: 0;
    height: auto;
    width: min(100%, calc(92vh * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
}

/* Player Luna / Radio: sin desbordar el hero */
.or-hero--player-luna .pluna-wrap,
.or-hero--playerradio .pr-player {
    overflow: hidden;
    max-width: 100%;
}

/* Panel vacío del hero (sin widget de reproductor) */
.or-hero-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 40px 24px;
    color: #fff;
}

.or-hero-empty-title {
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.or-hero-empty-text {
    font-size: 17px;
    opacity: .85;
    margin: 0;
}

.or-hero-empty-hint {
    margin-top: 16px;
    font-size: 13px;
    opacity: .55;
    background: rgba(255, 255, 255, .08);
    padding: 8px 14px;
    border-radius: 999px;
}

/* =========================================== DEBAJO DEL HERO ======= */
.or-below {
    padding: 34px 40px;
    background: var(--or-main-bg, #fff);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.or-below .widget {
    margin: 0 0 18px;
}

.or-below .widget:last-child {
    margin-bottom: 0;
}

/* ======================================== ÚLTIMAS PUBLICACIONES ==== */
.or-latest {
    padding: 40px;
}

.or-latest-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    margin: 0 0 24px;
    color: var(--or-card-title, #101418);
}

/* Rejilla de tarjetas */
.or-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Tarjeta */
.or-card {
    display: flex;
    flex-direction: column;
    background: var(--or-card-bg, #ffffff);
    border: 1px solid var(--or-card-border, #e5e8ec);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.or-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.or-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef1f4;
}

.or-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.or-card:hover .or-card-image {
    transform: scale(1.04);
}

.or-card-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.or-card-meta {
    display: flex;
    gap: 8px;
}

.or-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--or-main-link, #0b57d0);
    background: rgba(11, 87, 208, .08);
    padding: 3px 10px;
    border-radius: 999px;
}

.or-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--or-card-title, #101418);
}

.or-card-title a {
    color: inherit;
}

.or-card-title a:hover {
    color: var(--or-main-link, #0b57d0);
}

.or-card-excerpt {
    font-size: 14px;
    color: var(--or-card-excerpt, #5b636d);
    margin: 0;
    flex: 1;
}

.or-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    background: var(--or-main-link, #0b57d0);
    color: #fff;
    transition: filter .15s ease, transform .15s ease;
}

.or-btn:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Sin publicaciones */
.or-no-posts {
    padding: 30px;
    text-align: center;
    color: var(--or-card-meta, #8a929c);
    background: var(--or-card-bg, #fff);
    border: 1px dashed var(--or-card-border, #e5e8ec);
    border-radius: 14px;
}

/* ================================================ LISTADOS ======== */
.or-listing, .or-single, .or-page {
    padding: 40px;
}

.or-listing-header {
    margin-bottom: 26px;
}

.or-listing-title {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 800;
    margin: 0 0 6px;
}

.or-listing-title em {
    font-style: normal;
    color: var(--or-main-link, #0b57d0);
}

.or-listing-count {
    font-size: 14px;
    color: var(--or-card-meta, #8a929c);
    margin: 0;
}

.or-pagination {
    margin-top: 28px;
}

/* ================================================== ARTICLE ======== */
.or-article {
    max-width: 95%;
}

.or-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--or-card-meta, #8a929c);
    margin-bottom: 16px;
}

.or-breadcrumb a {
    color: var(--or-card-meta, #8a929c);
}

.or-breadcrumb a:hover {
    color: var(--or-main-link, #0b57d0);
}

.or-crumb-current {
    color: var(--or-main-text, #1b1f24);
    font-weight: 600;
}

.or-article-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    margin: 0 0 12px;
}

.or-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
    color: var(--or-card-meta, #8a929c);
    margin-bottom: 22px;
}

.or-article-meta a {
    color: var(--or-main-link, #0b57d0);
    font-weight: 600;
}

.or-article-cover {
    margin: 0 0 24px;
    border-radius: 14px;
    overflow: hidden;
}

.or-article-image {
    width: 100%;
    height: auto;
}

.or-article-content {
    font-size: 17px;
}

.or-article-content>*+* {
    margin-top: 1.1em;
}

.or-article-content img {
    border-radius: 10px;
}

.or-article-content h2 {
    font-size: 26px;
    margin-top: 1.6em;
}

.or-article-content h3 {
    font-size: 22px;
    margin-top: 1.4em;
}

/* Caja del autor */
.or-author-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 34px 0;
    padding: 20px;
    background: var(--or-card-bg, #fff);
    border: 1px solid var(--or-card-border, #e5e8ec);
    border-radius: 14px;
}

.or-author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.or-author-name {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--or-card-title, #101418);
}

.or-author-bio {
    font-size: 14px;
    color: var(--or-card-excerpt, #5b636d);
    margin: 0;
}

/* Relacionados */
.or-related {
    margin-top: 40px;
}

.or-related-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 20px;
}

/* Widgets después del contenido */
.or-after-widgets {
    margin-top: 34px;
}

/* ==================================================== 404 ========== */
.or-404 {
    padding: 60px 40px;
}

.or-404-inner {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.or-404-code {
    font-size: 96px;
    font-weight: 900;
    line-height: 1;
    color: var(--or-card-border, #e5e8ec);
}

.or-404-title {
    font-size: 30px;
    font-weight: 800;
    margin: 10px 0;
}

.or-404-text {
    color: var(--or-card-excerpt, #5b636d);
    margin: 0 0 22px;
}

/* ================================================== FOOTER ========= */
.or-footer {
    background: var(--or-ftr-bg, #0e1116);
    color: var(--or-ftr-text, #cfd6df);
    border-top: 1px solid var(--or-side-border, #1c232c);
}

.or-footer-inner {
    padding: 10px 10px;
}

.or-footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 26px;
    margin-bottom: 22px;
}

.or-footer-widgets .widget {
    margin: 0;
}

.or-footer-widgets .widget-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 12px;
    color: var(--or-ftr-text, #cfd6df);
}

.or-footer a {
    color: var(--or-ftr-text, #cfd6df);
}

.or-footer a:hover {
    color: #fff;
}

/* El pie mantiene enlaces planos: anula el estilo "botón" del menú lateral */
.or-menu-footer {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.or-menu-footer a {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    font-size: inherit;
}

.or-menu-footer .or-ic {
    display: none;
}

.or-footer-text {
    text-align: center;
    font-size: 13px;
    opacity: .7;
    margin: 0;
}

/* ================================================== WIDGETS gen ==== */
.widget {
    margin: 0 0 22px;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget img {
    border-radius: 8px;
}

/* ====================================== HOME FULL (shortcode page) === */
/* Ancho completo: SIN título y SIN barra lateral derecha. */
.or-home-full {
    width: 100%;
    min-height: 50vh;
    padding: 24px 32px 48px;
    background: var(--or-main-bg, #ffffff);
}

.or-home-full-article {
    max-width: 1200px;
    margin: 0 auto;
}

.or-home-full-content > *:first-child {
    margin-top: 0;
}

.or-home-full-content > *:last-child {
    margin-bottom: 0;
}

/* Players dentro de Home Full */
.or-home-full-content .pluna-wrap,
.or-home-full-content .tvplayer,
.or-home-full-content .pr-player {
    border-radius: 12px;
}

/* Shortcode [latest_posts] */
.site-latest {
    margin: 28px 0;
}

.site-latest-title {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    margin: 0 0 18px;
    color: var(--or-card-title, #101418);
}

.site-latest-grid {
    display: grid;
    gap: 18px;
}

.site-latest--1 .site-latest-grid { grid-template-columns: 1fr; }
.site-latest--2 .site-latest-grid { grid-template-columns: repeat(2, 1fr); }
.site-latest--3 .site-latest-grid { grid-template-columns: repeat(3, 1fr); }
.site-latest--4 .site-latest-grid { grid-template-columns: repeat(4, 1fr); }

.site-latest-card {
    display: flex;
    flex-direction: column;
    background: var(--or-card-bg, #ffffff);
    border: 1px solid var(--or-card-border, #e5e8ec);
    border-radius: 12px;
    overflow: hidden;
}

.site-latest-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef1f4;
}

.site-latest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-latest-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.site-latest-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--or-card-title, #101418);
}

.site-latest-card-title a {
    color: inherit;
    text-decoration: none;
}

.site-latest-card-title a:hover {
    color: var(--or-side-active, #22c55e);
}

.site-latest-excerpt {
    margin: 0;
    font-size: 14px;
    color: var(--or-card-excerpt, #5b636d);
    line-height: 1.5;
}

.site-latest-more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--or-side-active, #22c55e);
    text-decoration: none;
}

.site-latest-empty {
    color: var(--or-card-excerpt, #5b636d);
    font-size: 14px;
}

@media (max-width: 900px) {
    .site-latest--3 .site-latest-grid,
    .site-latest--4 .site-latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .or-home-full {
        padding: 20px 16px 36px;
    }

    .site-latest--2 .site-latest-grid,
    .site-latest--3 .site-latest-grid,
    .site-latest--4 .site-latest-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================= RESPONSIVE ====== */
/* La columna derecha baja debajo del contenido antes de que se estreche */
@media (max-width: 1100px) {
    .or-2col--side {
        grid-template-columns: minmax(0, 1fr);
    }

    .or-2col-side {
        position: static;
        padding: 0 40px 32px;
        border-top: 1px solid var(--or-card-border, #e5e8ec);
        margin-top: 8px;
    }

    .or-2col--side>.or-2col-main>.or-single,
    .or-2col--side>.or-2col-main>.or-page,
    .or-2col--side>.or-2col-main>.or-listing,
    .or-2col--side>.or-2col-main>.or-404 {
        padding-right: 40px;
    }
}

@media (max-width: 1180px) {
    .or-posts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}



@media (max-width: 900px) {
    .or-shell {
        grid-template-columns: 1fr;
    }

    /* La barra pasa a cajón off-canvas; un botón hamburguesa la abre */
    .or-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99990;
        width: min(84vw, 340px);
        height: 100vh;
        transform: translateX(-102%);
        transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    }

    body.or-nav-open .or-sidebar {
        transform: translateX(0);
    }

    .or-nav-toggle {
        display: flex;
    }

    /* Hamburguesa visible flotando sobre el contenido (en el main) */
    .or-main {
        position: relative;
    }

    .or-main::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: rgba(14, 17, 22, .92);
        backdrop-filter: blur(6px);
        z-index: 99980;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    /* Botón hamburguesa real: se reposiciona arriba a la izquierda */
    .or-nav-toggle {
        position: fixed;
        top: 8px;
        left: 10px;
        display: flex;
        z-index: 99995;
    }

    .or-hero {
        margin-top: 60px;
        min-height: 0;
        height: auto;
    }

    /* Radio Player: alto razonable en móvil */
    .or-hero .pr-player {
        min-height: 420px;
        height: min(72vh, 520px) !important;
        margin-top: 0;
    }

    /* Player Luna: llena el hero (su CSS controla el alto) */
    .or-hero .pluna-wrap {
        margin-top: 0;
        min-height: calc(100vh - 60px);
        height: calc(100vh - 60px) !important;
        --pluna-h: calc(100vh - 60px) !important;
    }

    /* TV Player: el hero sigue al vídeo (16:9), sin espacio sobrante */
    .or-hero--tvplayer {
        min-height: 0;
        height: auto;
    }

    .or-hero--tvplayer .tvplayer {
        min-height: 0;
        height: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .or-below, .or-latest, .or-listing, .or-single, .or-page, .or-404, .or-footer-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .or-latest, .or-listing, .or-single, .or-page {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .or-2col-side {
        padding: 0 20px 28px;
    }

    .or-2col--side>.or-2col-main>.or-single,
    .or-2col--side>.or-2col-main>.or-page,
    .or-2col--side>.or-2col-main>.or-listing,
    .or-2col--side>.or-2col-main>.or-404 {
        padding-right: 20px;
    }

    .or-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 560px) {
    .or-posts-grid {
        grid-template-columns: 1fr;
    }

    .or-brand {
        padding-top: 22px;
    }

    .or-logo {
        width: 140px;
        height: 140px;
    }

    .or-article-content {
        font-size: 16px;
    }

    .or-author-box {
        flex-direction: column;
    }
}

/* Fondo detrás del cajón (mobile) */
body.or-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99985;
}
/* Columnas de «Últimas publicaciones» (personalizador: 2, 3 o 4) */
.or-posts-grid.or-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.or-posts-grid.or-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.or-posts-grid.or-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .or-posts-grid.or-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .or-posts-grid.or-cols-3,
    .or-posts-grid.or-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .or-posts-grid.or-cols-2,
    .or-posts-grid.or-cols-3,
    .or-posts-grid.or-cols-4 { grid-template-columns: 1fr; }
}
/* Botones de las tarjetas: fondo, fondo hover y texto configurables
   (personalizador → Portada → «Botón · …»). */
.or-btn {
    background: var(--or-btn-bg, var(--or-main-link, #0b57d0));
    color: var(--or-btn-text, #ffffff);
}
.or-btn:hover {
    background: var(--or-btn-bg-hover, var(--or-btn-bg, var(--or-main-link, #0b57d0)));
    color: var(--or-btn-text, #ffffff);
    filter: brightness(1.05);
}
/* Color del título de tarjeta: debe ganar a la regla genérica de enlaces del motor
   (`#site-main a:not(.btn):not(.skip-link)`), que tiene id y por eso pesa más. */
.or-card-title a,
.or-card-title a:visited {
    color: var(--or-card-title, #101418) !important;
}
.or-card-title a:hover,
.or-card-title a:focus {
    color: var(--or-main-link, #0b57d0) !important;
}
/* ===== Colores de la PORTADA, acotados a .or-card--home =====
   Las variables se emiten en `.or-latest` (sección de últimas publicaciones),
   así la barra lateral, «Te puede interesar», el autor, el 404, etc. NO cambian. */
.or-card--home {
    background: var(--or-card-bg, #ffffff);
    border-color: var(--or-card-border, #e5e8ec);
}
.or-card--home .or-card-title,
.or-card--home .or-card-title a,
.or-card--home .or-card-title a:visited {
    color: var(--or-card-title, #101418) !important;
}
.or-card--home .or-card-title a:hover,
.or-card--home .or-card-title a:focus {
    color: var(--or-main-link, #0b57d0) !important;
}
.or-card--home .or-card-excerpt {
    color: var(--or-card-excerpt, #5b636d);
}
.or-card--home .or-chip {
    color: var(--or-card-meta, var(--or-main-link, #0b57d0));
}
.or-card--home .or-btn {
    background: var(--or-btn-bg, var(--or-main-link, #0b57d0));
    color: var(--or-btn-text, #ffffff);
}
.or-card--home .or-btn:hover {
    background: var(--or-btn-bg-hover, var(--or-btn-bg, var(--or-main-link, #0b57d0)));
    color: var(--or-btn-text, #ffffff);
}
/* Color del texto del botón de portada: debe ganar a la regla genérica de enlaces
   del motor (`#site-main a:not(.btn):not(.skip-link)`), que pesa más por el id. */
.or-card--home .or-btn,
.or-card--home .or-btn:visited {
    color: var(--or-btn-text, #ffffff) !important;
}
.or-card--home .or-btn:hover,
.or-card--home .or-btn:focus {
    background: var(--or-btn-bg-hover, var(--or-btn-bg, var(--or-main-link, #0b57d0)));
    color: var(--or-btn-text, #ffffff) !important;
}
/* ===== Hero a pantalla completa SOLO en escritorio (en móvil manda el vídeo) ===== */
@media (min-width: 901px) {
/* ===== Hero SIEMPRE a pantalla completa (sin hueco debajo) =====
   El reproductor trae su alto en `--pluna-h` (p. ej. 550px) y otros plugins su
   propio CSS; aquí se fuerza a llenar el hero. `svh` evita el hueco de la barra
   del navegador en móvil (con `vh` de respaldo). */
.or-hero {
    min-height: 100vh;
    min-height: 100svh;
}
.or-hero .pluna-wrap,
.or-hero .pr-player {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    --pluna-h: 100vh !important;
}
@supports (height: 100svh) {
    .or-hero .pluna-wrap,
    .or-hero .pr-player { --pluna-h: 100svh !important; }
}
}

/* Crédito en el PIE, alineado a la derecha (antes iba en la barra lateral) */
.or-footer-credit {
    margin-top: 1px;
    padding-top: 2px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--or-ftr-text, #cfd6df);
    opacity: .7;
}
.or-footer-credit a { color: inherit; text-decoration: none; }
.or-footer-credit a:hover { text-decoration: underline; }
/* Si el pie solo lleva el crédito, sin línea ni margen extra */
.or-footer-inner > .or-footer-credit:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
/* ===== Pie centrado: menú horizontal centrado y crédito debajo, centrado ===== */
.or-footer-inner { text-align: center; }
.or-footer-main { text-align: center; }
.or-footer-menu { text-align: center; }
.or-footer-menu .or-nav { padding: 0; }
.or-footer-menu .or-menu,
.or-footer-menu .or-menu-footer {
    justify-content: center;
    text-align: center;
}
.or-footer-widgets { text-align: left; }   /* los widgets conservan su alineación */
.or-footer-credit {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 12px;
    margin-top: 18px;
}
/* ===== Pie sin espacio antes del menú =====
   Antes `.or-footer-inner` tenía 34px arriba (y el crédito 18px de margen):
   el menú quedaba «flotando». Ahora el menú va pegado arriba y el crédito
   queda separado solo por su línea fina. */
.or-footer-inner { padding: 10px 40px 10px; }
.or-footer-credit { margin-top: 0; padding: 8px 0 0; }
/* ===== Colores del pie configurables (Personalizar → Footer) ===== */
.or-footer a {
    color: var(--or-ftr-link, var(--or-ftr-text, #cfd6df)) !important;
}
.or-footer a:hover,
.or-footer a:focus {
    color: var(--or-ftr-link-hover, #ffffff) !important;
}
.or-footer-menu a,
.or-menu-footer a {
    color: var(--or-ftr-link, var(--or-ftr-text, #cfd6df)) !important;
}
.or-footer-menu a:hover,
.or-footer-menu a:focus,
.or-menu-footer a:hover,
.or-menu-footer a:focus {
    color: var(--or-ftr-link-hover, #ffffff) !important;
}
/* ===== Menú de la BARRA LATERAL configurable (Personalizar → Barra lateral) =====
   Vacío = se mantiene el estilo actual (rgba suaves). El icono (.or-ic) usa
   currentColor, así que su color propio va en su regla. */
.or-menu a {
    background: var(--or-menu-bg, rgba(255, 255, 255, .05));
    border-color: var(--or-menu-border, rgba(255, 255, 255, .08));
    color: var(--or-menu-text, var(--or-side-link, #cfd6df)) !important;
}
.or-menu a:hover,
.or-menu a:focus {
    background: var(--or-menu-bg-hover, rgba(255, 255, 255, .1));
    border-color: var(--or-menu-border-hover, rgba(255, 255, 255, .18));
    color: var(--or-menu-text-hover, var(--or-side-link-hover, #ffffff)) !important;
}
.or-menu a .or-ic {
    color: var(--or-menu-icon, currentColor);
}
.or-menu a:hover .or-ic,
.or-menu a:focus .or-ic {
    color: var(--or-menu-icon-hover, currentColor);
}
/* El elemento activo conserva su color propio (gana por especificidad) */
.or-menu .current-menu-item>a,
.or-menu .current_page_item>a,
.or-menu a[aria-current="page"] {
    color: var(--or-side-active, #22c55e) !important;
}
/* Logo de la barra lateral: sin sombra ni caja/borde alrededor */
.or-brand .or-logo {
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* ===== ENTRADA: elementos propios (Personalizar → Entrada) ===== */
.or-single .or-article-title { color: var(--or-single-title, inherit) !important; }
.or-single .or-article-meta,
.or-single .or-article-meta a,
.or-single .or-chip { color: var(--or-single-meta, inherit) !important; }
.or-single .or-author-box {
    background: var(--or-single-author-bg, #f7f8fa);
}
.or-single .or-author-name { color: var(--or-single-author-title, inherit) !important; }
.or-single .or-author-bio { color: var(--or-single-author-text, inherit) !important; }
.or-single .or-related-title { color: var(--or-single-related-title, inherit) !important; }
/* ===== Tarjetas de «Te puede interesar» (Personalizar → Entrada → Te puede interesar) ===== */
.or-related .or-card {
    background: var(--or-related-card-bg, #ffffff);
    border-color: var(--or-related-card-border, #e5e8ec);
}
.or-related .or-card-title,
.or-related .or-card-title a,
.or-related .or-card-title a:visited {
    color: var(--or-related-card-title, #101418) !important;
}
.or-related .or-card-excerpt {
    color: var(--or-related-card-excerpt, #5b636d);
}
.or-related .or-btn {
    background: var(--or-related-btn-bg, var(--or-main-link, #0b57d0));
    color: var(--or-related-btn-text, #ffffff) !important;
}
.or-related .or-btn:hover,
.or-related .or-btn:focus {
    background: var(--or-related-btn-bg-hover, var(--or-related-btn-bg, var(--or-main-link, #0b57d0)));
    color: var(--or-related-btn-text, #ffffff) !important;
}
/* Columnas de las tarjetas de «Te puede interesar» (1 · 2 · 3) */
.or-related-grid.or-related-cols-1 { grid-template-columns: 1fr; }
.or-related-grid.or-related-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.or-related-grid.or-related-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .or-related-grid.or-related-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .or-related-grid.or-related-cols-2,
    .or-related-grid.or-related-cols-3 { grid-template-columns: 1fr; }
}
/* ===== Barra DERECHA · widgets (Personalizar → Barra derecha) ===== */
.or-2col-side .widget {
    background: var(--or-rside-widget-bg, #f7f8fa);
    border-color: var(--or-rside-widget-border, #e5e8ec);
}
.or-2col-side .widget-title,
.or-2col-side .widget h2,
.or-2col-side .widget h3 {
    color: var(--or-rside-title, inherit) !important;
    border-bottom-color: var(--or-rside-title-border, #e5e8ec);
}
.or-2col-side { color: var(--or-rside-text, inherit); }
.or-2col-side a:not(.btn) { color: var(--or-rside-link, inherit) !important; }
.or-2col-side a:not(.btn):hover,
.or-2col-side a:not(.btn):focus { color: var(--or-rside-link-hover, inherit) !important; }
/* Texto de los widgets de la barra derecha (los widgets no siempre usan <p>) */
.or-2col-side .widget,
.or-2col-side .widget li,
.or-2col-side .widget p,
.or-2col-side .widget span { color: var(--or-rside-text, inherit); }
/* ===== Widget ??ltimas publicaciones?: imagen a la IZQUIERDA y texto a la derecha ===== */
.widget-latest-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.widget-latest-post { margin: 0; }
.widget-latest-post-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.widget-latest-post-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    background: rgba(0, 0, 0, .06);
}
.widget-latest-post-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
.widget-latest-post-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.widget-latest-post-date {
    font-size: 11.5px;
    opacity: .7;
}
.widget-latest-post-link:hover .widget-latest-post-title {
    color: var(--or-main-link, #0b57d0);
}
/* ===== LISTADOS (categoría · archivo · autor · búsqueda) ===== */
.or-listing .or-listing-title { color: var(--or-list-title, inherit) !important; }
.or-listing .or-listing-count,
.or-listing .or-breadcrumb,
.or-listing .or-breadcrumb a { color: var(--or-list-count, inherit) !important; }
.or-listing .or-card {
    background: var(--or-list-card-bg, #ffffff);
    border-color: var(--or-list-card-border, #e5e8ec);
}
.or-listing .or-card-title,
.or-listing .or-card-title a,
.or-listing .or-card-title a:visited { color: var(--or-list-card-title, #101418) !important; }
.or-listing .or-card-excerpt { color: var(--or-list-card-excerpt, #5b636d); }
.or-listing .or-btn {
    background: var(--or-list-btn-bg, var(--or-main-link, #0b57d0));
    color: var(--or-list-btn-text, #ffffff) !important;
}
.or-listing .or-btn:hover,
.or-listing .or-btn:focus {
    background: var(--or-list-btn-bg-hover, var(--or-list-btn-bg, var(--or-main-link, #0b57d0)));
    color: var(--or-list-btn-text, #ffffff) !important;
}
.or-posts-grid.or-list-cols-1 { grid-template-columns: 1fr; }
.or-posts-grid.or-list-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.or-posts-grid.or-list-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .or-posts-grid.or-list-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .or-posts-grid.or-list-cols-2,
    .or-posts-grid.or-list-cols-3 { grid-template-columns: 1fr; }
}
/* Portada · «Últimas publicaciones» a 1 columna */
.or-posts-grid.or-cols-1 { grid-template-columns: 1fr; }
/* ===== BARRA MÓVIL (≤900px): hamburguesa + nombre del sitio, en el flujo ===== */
.or-mobilebar { display: none; }

@media (max-width: 900px) {
    .or-mobilebar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 99970;
        padding: 8px 12px;
        background: var(--or-side-bg, #0e1116);
        color: var(--or-side-text, #e7ebf0);
        border-bottom: 1px solid var(--or-side-border, #1c232c);
    }
    .or-mobilebar .or-nav-toggle {
        position: static;
        top: auto;
        left: auto;
        display: flex;
        flex: none;
        z-index: auto;
    }
    .or-mobilebar-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        color: inherit;
        text-decoration: none;
    }
    .or-mobilebar-logo {
        width: 30px;
        height: 30px;
        object-fit: contain;
        flex: none;
    }
    .or-mobilebar-name {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* La barra real sustituye a la pseudo-barra y al hueco que dejaba */
    .or-main::before { display: none; }
    .or-hero { margin-top: 0; }
}
/* Barra móvil: nombre a la izquierda y menú a la derecha (sin logo) */
@media (max-width: 900px) {
    .or-mobilebar { justify-content: space-between; }
    .or-mobilebar-brand { flex: 1 1 auto; }
    .or-mobilebar .or-nav-toggle { margin-left: auto; }
    .or-mobilebar-logo { display: none; }
}
/* ===== Móvil: el TV player manda (sin aire arriba/abajo) ===== */
@media (max-width: 900px) {
    .or-hero--tvplayer {
        display: block;
        min-height: 0 !important;
        height: auto !important;
    }
    .or-hero--tvplayer .tvplayer,
    .or-hero--tvplayer .tvplayer iframe,
    .or-hero--tvplayer video {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
        display: block;
    }
    .or-hero--tvplayer .tvplayer {
        max-height: none;
    }
}
/* ===== Enlaces del PIE sin ?fondo de bot?n? =====
   `.or-menu a` (men? de la barra lateral) pinta fondo/borde/relleno, y el pie
   usa .or-menu-footer: aqu? se anula para que queden como enlaces planos. */
.or-footer .or-menu-footer a,
.or-footer .or-footer-menu a,
.or-footer .or-nav-footer a {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: inline !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}
.or-footer .or-menu-footer a:hover,
.or-footer .or-menu-footer a:focus,
.or-footer .or-footer-menu a:hover,
.or-footer .or-nav-footer a:hover {
    background: none !important;
    border: 0 !important;
    text-decoration: underline;
}
.or-footer .or-menu-footer,
.or-footer .or-footer-menu .or-nav {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
/* ===== Pie pegado al fondo de la columna =====
   `.or-shell` tiene min-height:100vh y fondo blanco (.or-main): cuando la p?gina
   era corta, debajo del pie quedaba una FRANJA del fondo de .or-main. Con la
   columna en flex y `margin-top:auto` el pie se pega al fondo real. */
.or-main {
    display: flex;
    flex-direction: column;
}
.or-main > .or-footer {
    margin-top: auto;
}
/* Bloque libre debajo del hero (shortcodes / HTML desde Personalizar → Portada) */
.or-below-html > :first-child { margin-top: 0; }
.or-below-html > :last-child { margin-bottom: 0; }
.or-below-html .widget { margin: 0; }
/* ===== Comentarios (Disqus) en la entrada: debajo del autor y antes de ?Te puede interesar? ===== */
.or-single .disqus-block,
.or-page .disqus-block,
.post-comments.disqus-block {
    margin: 30px 0;
}
.or-single .disqus-block iframe,
.post-comments.disqus-block iframe {
    width: 100%;
}