/* ==========================================================================
   Ostadar S.K.T. — Sistema de diseño
   Paleta corporativa heredada del escudo / web actual:
     - Rojo Ostadar     #a73233
     - Amarillo/dorado  #f5be3b
     - Negro suave      #242424
     - Gris medio       #949494
   ========================================================================== */

:root {
    /* Paleta institucional Ostadar SKT: azul + negro. */
    --ostadar-blue: #0056AB;
    --ostadar-blue-dark: #003F7F;
    --ostadar-blue-light: #1E7BD6;
    --ostadar-ink: #0A0200;        /* casi negro del logo */
    --ostadar-ink-soft: #1a1a1a;
    --ostadar-gray: #6c6c6c;
    --ostadar-gray-light: #f1f3f6;
    --ostadar-gray-bg: #f7f9fc;
    --ostadar-white: #ffffff;

    --ostadar-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
    --ostadar-shadow-md: 0 6px 24px rgba(10, 30, 60, .10);
    --ostadar-shadow-lg: 0 14px 40px rgba(10, 30, 60, .15);

    --ostadar-radius: .75rem;

    /* Bootstrap overrides -> primario azul Ostadar. */
    --bs-primary: var(--ostadar-blue);
    --bs-primary-rgb: 0, 86, 171;
    --bs-link-color: var(--ostadar-blue);
    --bs-link-hover-color: var(--ostadar-blue-dark);
    --bs-body-color: var(--ostadar-ink-soft);
    --bs-body-bg: var(--ostadar-white);
    --bs-border-color: #e3e7ee;
    --bs-border-radius: var(--ostadar-radius);
}

/* ---------- Tipografía -------------------------------------------------- */
html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ostadar-ink-soft);
    background-color: var(--ostadar-white);
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ostadar-ink);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

.text-uppercase-wide {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    font-size: .8rem;
}

/* ---------- Header banner ----------------------------------------------- */
.header-banner {
    width: 100%;
    height: 24px;
    background-image: url('https://www.ostadarskt.eus/wp-content/themes/ostadar/images/header.png');
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto 100%;
}

/* ---------- Navbar ------------------------------------------------------ */
body > header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar.ostadar-navbar {
    background: var(--ostadar-ink) !important;
    padding: .65rem 0;
    box-shadow: var(--ostadar-shadow-sm);
}

.ostadar-navbar .navbar-brand {
    color: var(--ostadar-white) !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .1rem 0;
}

.ostadar-navbar .navbar-brand img {
    height: 44px;
    width: auto;
    display: block;
}

.ostadar-navbar .nav-link {
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 600;
    padding: .5rem .8rem !important;
    position: relative;
    transition: color .2s ease;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
}

.ostadar-navbar .nav-link:hover,
.ostadar-navbar .nav-link.active {
    color: #fff !important;
}

.ostadar-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: .8rem; right: .8rem; bottom: .25rem;
    height: 2px;
    background: var(--ostadar-blue-light);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
}
.ostadar-navbar .nav-link:hover::after,
.ostadar-navbar .nav-link.active::after { transform: scaleX(1); }

/* ── Caret separado del enlace principal ───────────────────────────────── */
.ostadar-dropdown-caret {
    background: none;
    border: none;
    padding: 0 .3rem;
    color: rgba(255, 255, 255, .6);
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;
    position: relative;
}
.ostadar-dropdown-caret::after {
    content: "▾";
}
.ostadar-dropdown-caret:hover { color: #fff; }

.ostadar-dropdown-toggle::after {
    content: " ▾";
    font-size: .65rem;
    opacity: .7;
    vertical-align: middle;
    /* anula el caret por defecto de Bootstrap */
    border: none;
    display: inline;
    margin-left: .2rem;
}
.ostadar-dropdown-toggle.show::after,
.ostadar-dropdown-toggle:hover::after {
    opacity: 1;
}

/* ── Hover-open en desktop ─────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .ostadar-hover-dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    /* Evita parpadeo entre enlace y menú */
    .ostadar-hover-dropdown > .dropdown-menu {
        margin-top: 0;
    }
    /* Submenús anidados: aparecen a la derecha */
    .dropdown-submenu { position: relative; }
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -4px;
        margin-left: 1px;
        display: none;
    }
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
    .dropdown-submenu > a.dropdown-toggle::after { margin-left: .5em; }
}

.ostadar-navbar .dropdown-menu {
    border: none;
    border-top: 3px solid var(--ostadar-blue);
    border-radius: 0 0 var(--ostadar-radius) var(--ostadar-radius);
    box-shadow: var(--ostadar-shadow-md);
    padding: .35rem 0;
    background: #1c1a1a;
}
.ostadar-navbar .dropdown-item {
    font-weight: 500;
    font-size: .78rem;
    padding: .5rem 1.15rem;
    color: rgba(255, 255, 255, .78);
    letter-spacing: .03em;
}
.ostadar-navbar .dropdown-item:hover,
.ostadar-navbar .dropdown-item:focus {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.ostadar-navbar .dropdown-divider {
    border-color: rgba(255, 255, 255, .1);
}

.ostadar-navbar .nav-link.lang-switch {
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: .2rem .7rem !important;
    margin-left: .35rem;
    font-size: .75rem;
    letter-spacing: .1em;
}
.ostadar-navbar .nav-link.lang-switch::after { display: none; }

.ostadar-navbar .nav-link.lang-switch.active {
    background: var(--ostadar-blue);
    border-color: var(--ostadar-blue);
    color: #fff !important;
}

.ostadar-navbar .navbar-toggler {
    border-color: rgba(255,255,255,.25);
}
.ostadar-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Botones de acción (login/logout/admin) a la derecha */
.nav-action-btn {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .6rem !important;
}
.nav-action-btn::after { display: none !important; }

.nav-username {
    font-size: .65rem !important;
    color: rgba(255,255,255,.6) !important;
    padding: .4rem .4rem !important;
    text-transform: lowercase !important;
}

.nav-divider {
    color: rgba(255,255,255,.2);
    font-size: 1.1rem;
    padding: .4rem .25rem;
    user-select: none;
}

/* Estilos "botón" para los items del menú principal */
.ostadar-navbar .nav-link.nav-btn {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: 4px;
    padding: .38rem .7rem !important;
    transition: background .18s ease, color .18s ease;
}
.ostadar-navbar .nav-link.nav-btn:hover,
.ostadar-navbar .nav-link.nav-btn.active {
    background: rgba(255,255,255,.1);
    color: #fff !important;
}
.ostadar-navbar .nav-link.nav-btn::after { display: none; }

/* ---------- Hero -------------------------------------------------------- */
.ostadar-hero {
    position: relative;
    color: #fff;
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
    background:
        radial-gradient(circle at 80% 15%, rgba(255,255,255,.10) 0%, transparent 55%),
        linear-gradient(135deg, #001E3F 0%, var(--ostadar-blue-dark) 45%, var(--ostadar-blue) 100%);
    overflow: hidden;
    border-bottom: 4px solid var(--ostadar-ink);
}
.ostadar-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: linear-gradient(120deg, transparent 55%, rgba(0,0,0,.20) 100%);
    pointer-events: none;
}
.ostadar-hero h1 {
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.30);
}
.ostadar-hero .lead { color: rgba(255,255,255,.92); font-size: 1.25rem; max-width: 38rem; }
.ostadar-hero .hero-eyebrow {
    display: inline-block;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 1rem;
    border-left: 3px solid #fff;
    padding-left: .65rem;
}

/* ---------- Botones ----------------------------------------------------- */
.btn-primary {
    background-color: var(--ostadar-blue);
    border-color: var(--ostadar-blue);
    font-weight: 600;
    padding: .55rem 1.25rem;
    border-radius: 999px;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ostadar-blue-dark);
    border-color: var(--ostadar-blue-dark);
}
.btn-outline-primary {
    color: var(--ostadar-blue);
    border-color: var(--ostadar-blue);
    border-radius: 999px;
    font-weight: 600;
}
.btn-outline-primary:hover {
    background-color: var(--ostadar-blue);
    border-color: var(--ostadar-blue);
    color: #fff;
}
.btn-dark, .btn-ostadar-dark {
    background-color: var(--ostadar-ink);
    border-color: var(--ostadar-ink);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: .55rem 1.25rem;
}
.btn-dark:hover, .btn-ostadar-dark:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* ---------- Sección genérica ------------------------------------------- */
.section {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.section.section-alt { background: var(--ostadar-gray-bg); }

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.section-title h2 {
    margin: 0;
    position: relative;
    padding-left: 1rem;
}
.section-title h2::before {
    content: "";
    position: absolute;
    left: 0; top: .35em; bottom: .25em;
    width: 6px;
    background: var(--ostadar-blue);
    border-radius: 3px;
}

/* ---------- Tarjetas de secciones deportivas --------------------------- */
.section-card {
    display: block;
    border-radius: var(--ostadar-radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    text-decoration: none;
    color: var(--ostadar-ink);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
    position: relative;
}
.section-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--ostadar-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
}
.section-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ostadar-shadow-md);
    border-color: transparent;
}
.section-card:hover::after { transform: scaleX(1); }

.section-card .section-card-img {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    background: var(--ostadar-gray-light);
}
.section-card .section-card-body {
    padding: 1rem 1.1rem 1.2rem;
}
.section-card h3 {
    font-size: 1.05rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Icono dentro de la tarjeta de sección: tamaño fijo para que no dependa
   de un max-height% sobre un padre con aspect-ratio */
.section-card .section-card-img .section-icon {
    width: 160px;
    height: 160px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ---------- Lista vertical de subsecciones (dentro del hero) ----------- */
.subsection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.subsection-list-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    border-radius: var(--ostadar-radius);
    color: var(--ostadar-blue-dark);
    text-decoration: none;
    font-size: .9rem;
    transition: background .2s ease, color .2s ease;
}
.subsection-list-item:hover {
    background: var(--ostadar-blue);
    color: #fff;
}
.subsection-list-item.active {
    background: var(--ostadar-blue-dark);
    color: #fff;
    font-weight: 600;
    pointer-events: none;
}
.subsection-list-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Sidebar sticky en KirolakSection --------------------------- */
.kirolak-sidebar {
    position: sticky;
    top: 90px;   /* altura aproximada del navbar */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
}
.kirolak-sidebar-block {
    background: var(--ostadar-light, #f8f9fa);
    border-radius: var(--ostadar-radius);
    padding: 1rem;
}

/* ── Tabla sets voleibol ───────────────────────────────────────────────── */
.kirolak-sets-table { width:100%; border-collapse:collapse; font-size:.7rem!important; }
.kirolak-sets-table td, .kirolak-sets-table th { padding:.15rem .25rem; text-align:center; vertical-align:middle; }
.kirolak-sets-table .ks-team { text-align:left!important; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem!important; }
.kirolak-sets-table .ks-sets-won { font-weight:700; font-size:.8rem!important; color:var(--ostadar-blue-dark); background:#e8f0fe; border-radius:3px; width:22px; }
.kirolak-sets-table .ks-set { color:#555; width:20px; background:#f5f5f5; border-radius:2px; }
.kirolak-sets-table .ks-set-win { font-weight:600; color:#155724; background:#d1e7dd; }
.kirolak-sets-table .ks-sep td { padding:0; height:3px; }
.kirolak-sets-table .ks-header th { font-size:.6rem!important; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#888; border-bottom:1px solid #e0e0e0; }

/* ---------- Redes sociales en hero de sección deportiva ---------------- */
.hero-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ostadar-blue-dark, #1a2e5a);
    background: rgba(0, 0, 0, .07);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    transition: background .2s ease, color .2s ease;
    text-decoration: none;
}
.hero-social-link:hover {
    color: var(--ostadar-blue, #1a56db);
    background: rgba(0, 0, 0, .13);
}

.post-card {
    height: 100%;
    border-radius: var(--ostadar-radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ostadar-shadow-md);
}
.post-card .post-card-img-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ostadar-gray-light);
    overflow: hidden;
}
.post-card .post-card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.post-card:hover .post-card-img-wrap img { transform: scale(1.04); }

.post-card .badge-section {
    position: absolute;
    top: .8rem; left: .8rem;
    background: var(--ostadar-blue);
    color: #fff;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.post-card .post-card-body {
    padding: 1.1rem 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}
.post-card .post-meta {
    color: var(--ostadar-gray);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
}
.post-card h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0;
}
.post-card h3 a {
    color: var(--ostadar-ink);
    transition: color .2s ease;
}
.post-card h3 a:hover {
    color: var(--ostadar-blue);
}
.post-card p { color: #555; margin: 0; }

/* ---------- Detalle del post ------------------------------------------- */
.blog-detail {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) 0;
}
.blog-detail header { margin-bottom: 1.75rem; }
.blog-detail h1 { margin-top: .25rem; }
.blog-detail .post-meta {
    color: var(--ostadar-gray);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.blog-detail .featured-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ostadar-radius);
    margin-bottom: 1.75rem;
    box-shadow: var(--ostadar-shadow-md);
    cursor: zoom-in;
}
.blog-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #2c2c2c;
}
.blog-content p { margin-bottom: 1.15rem; }
.blog-content h2, .blog-content h3 { margin-top: 2rem; }
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ostadar-radius);
    margin: 1.25rem 0;
}
.blog-content a { color: var(--ostadar-blue); text-decoration: underline; text-underline-offset: 3px; }
.blog-content blockquote {
    border-left: 4px solid var(--ostadar-blue);
    padding: .25rem 0 .25rem 1rem;
    color: #444;
    font-style: italic;
}
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: .97rem;
}
.blog-content table th,
.blog-content table td {
    border: 1px solid #dee2e6;
    padding: .45rem .75rem;
    vertical-align: top;
}
.blog-content table thead th {
    background: var(--ostadar-blue);
    color: #fff;
    font-weight: 600;
}
.blog-content table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

/* ---------- Footer ----------------------------------------------------- */
.ostadar-footer {
    background: var(--ostadar-ink);
    color: #d8d8d8;
    padding: 2.5rem 0 1.25rem;
    border-top: 4px solid var(--ostadar-blue);
    margin-top: 3rem;
}
.ostadar-footer h5 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .95rem;
    margin-bottom: .75rem;
}
.ostadar-footer a { color: #d8d8d8; }
.ostadar-footer a:hover { color: var(--ostadar-blue-light); }
.ostadar-footer .footer-brand img { height: 64px; margin-bottom: .85rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.ostadar-footer .footer-sponsors-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: .25rem;
}
.ostadar-footer .footer-sponsors-logos a,
.ostadar-footer .footer-sponsors-logos div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    opacity: .9;
}
.ostadar-footer .footer-sponsors-logos a:hover,
.ostadar-footer .footer-sponsors-logos a:focus {
    opacity: 1;
}
.ostadar-footer .footer-sponsor-logo {
    max-height: 120px;
    max-width: 320px;
    object-fit: contain;
    display: block;
}
.ostadar-footer .footer-sponsor-name {
    font-size: .9rem;
    color: #d8d8d8;
}
.ostadar-footer .copyright {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 1.75rem;
    padding-top: 1rem;
    font-size: .85rem;
    color: var(--ostadar-gray);
}

/* ---------- Misceláneos ------------------------------------------------ */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--ostadar-blue);
    border-color: var(--ostadar-blue);
}

/* ---------- Iconos redes sociales en navbar ----------------------------- */
.nav-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.nav-social-link:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}

/* ---------- Barra de redes sociales (todas las páginas) ----------------- */
.site-social-bar {
    background: #0A0200 !important;
    padding: .3rem 0 .45rem 0;
}
.site-social-bar .container-fluid {
    padding-left: 1rem;
}
.home-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #ffffff;
    background: transparent;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.home-social-link:hover {
    background: var(--ostadar-blue);
    color: #fff;
}

/* ---------- Iconos redes sociales en footer ----------------------------- */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.1);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.footer-social-link:hover {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* ---------- Kirolak – títulos de bloque --------------------------------- */
.kirolak-sidebar-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ostadar-blue-dark);
    margin-bottom: .4rem;
}
.kirolak-season-badge {
    font-size: .65rem;
    font-weight: 400;
    color: #888;
    background: #f0f0f0;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: .4rem;
    vertical-align: middle;
}

/* ---------- Kirolak – lista de partidos --------------------------------- */
.kirolak-match-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kirolak-match-item {
    padding: .35rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .72rem !important;
    line-height: 1.3;
}
.kirolak-match-item:last-child {
    border-bottom: none;
}
.kirolak-match-ostadar {
    font-weight: 700;
}
.kirolak-match-date {
    font-size: .62rem !important;
    color: #888;
    margin-bottom: .15rem;
}
.kirolak-match-teams {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.kirolak-match-venue {
    font-size: .66rem;
    color: #aaa;
    margin-top: .1rem;
}

/* ---------- Kirolak – marcador ----------------------------------------- */
.kirolak-score {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--ostadar-blue-dark);
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.kirolak-score--pending {
    background: #bbb;
    font-weight: 400;
}

/* ---------- Kirolak – tabla clasificación ------------------------------- */
.kirolak-table {
    font-size: .65rem !important;
    margin-bottom: 0;
}
.kirolak-table thead th {
    font-size: .6rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #555;
    background: #f8f8f8;
    border-bottom: 2px solid #e0e0e0;
    padding: .25rem .35rem;
    white-space: nowrap;
}
.kirolak-table tbody td {
    padding: .22rem .35rem;
    vertical-align: middle;
    font-size: .65rem !important;
}
.kirolak-table tbody tr.table-active td {
    font-weight: 700;
    background: rgba(var(--bs-primary-rgb), .08);
}

/* ---------- Kirolak – enlace fuente ------------------------------------ */
.kirolak-source-link {
    font-size: .65rem;
    color: #aaa;
    text-decoration: none;
}
.kirolak-source-link:hover {
    color: var(--ostadar-blue);
    text-decoration: underline;
}

/* ---------- Nav – submenú anidado (Bootstrap 5) ------------------------ */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -4px;
    margin-left: 0;
    display: none;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.show > .dropdown-menu {
    display: block;
}
.dropdown-submenu > .dropdown-item::after {
    content: " ▸";
    float: right;
    font-size: .7em;
    line-height: 1.8;
    opacity: .6;
    border: 0;
}

.form-control:focus { border-color: var(--ostadar-blue); }

::selection { background: var(--ostadar-blue); color: #fff; }

/* ---------- Imágenes responsivas en columnas gdlr ---------------------- */
.page-content img,
.page-content [class*="col"] img,
.page-content [style*="width"] img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- Tablas en contenido de páginas ----------------------------- */
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    border: 2px solid #adb5bd;
}
.page-content table th,
.page-content table td {
    border: 1px solid #adb5bd;
    padding: .4rem .65rem;
    vertical-align: top;
}
.page-content table thead th {
    background-color: #f1f3f5;
    font-weight: 600;
}

/* <p><br></p> migrado desde WP: actúa como separador de media línea,
   no como párrafo completo, para evitar exceso de espacio vertical. */
.page-content p:not(:last-child):has(> br:only-child) {
    margin-bottom: 0;
    line-height: 0.6;
}

/* ---------- gdlr_quote ------------------------------------------------- */
.gdlr-quote-wrap {
    margin: 2.5rem auto;
    max-width: 780px;
    padding: 0 1rem;
}

.gdlr-quote {
    position: relative;
    border: none;
    padding: 2.25rem 2.5rem 2.25rem 2.5rem;
    background: var(--ostadar-gray-light);
    border-left: 5px solid var(--ostadar-blue);
    border-radius: var(--ostadar-radius);
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ostadar-ink);
}

.gdlr-quote::before {
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--ostadar-blue);
    opacity: .35;
    position: absolute;
    top: .1rem;
    left: 1rem;
    font-style: normal;
}

.gdlr-quote p {
    margin: 0;
    padding-left: 2rem;
}

/* ── Sticky Cards ─────────────────────────────────────────────────────── */

.sticky-cards-bar {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    overflow: hidden;
}

/* Contenedor principal: centra 1-2 stickies y permite carrusel horizontal para 3+ */
.sticky-cards-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: .75rem;
    justify-content: center;
    align-items: stretch;
    padding: .75rem 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #adb5bd transparent;
    box-sizing: border-box;
}

/* Slot con ancho estable para que entren varias tarjetas según viewport */
.sticky-card-slot {
    display: flex;
    flex: 0 0 clamp(260px, 30vw, 420px);
    width: clamp(260px, 30vw, 420px);
    box-sizing: border-box;
}

/* 1 sticky centrada */
.sticky-cards-scroll[data-count="1"] .sticky-card-slot {
    flex-basis: min(100%, 560px);
    width: min(100%, 560px);
}
.sticky-cards-scroll[data-count="1"] .sticky-card-slot--banner.sticky-card-slot--banner-porra {
    flex-basis: min(100%, 560px);
    width: min(100%, 560px);
}

/* 2 stickies centradas */
.sticky-cards-scroll[data-count="2"] .sticky-card-slot {
    flex-basis: clamp(260px, 35vw, 520px);
    width: clamp(260px, 35vw, 520px);
}
.sticky-cards-scroll[data-count="2"] .sticky-card-slot--banner.sticky-card-slot--banner-porra {
    flex-basis: clamp(260px, 35vw, 520px);
    width: clamp(260px, 35vw, 520px);
}

/* 3 stickies: centradas */
.sticky-cards-scroll[data-count="3"] {
    justify-content: center;
}

/* 4+ stickies: alineadas al inicio con scroll horizontal */
.sticky-cards-scroll:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) {
    justify-content: flex-start;
}

@media (max-width: 767.98px) {
    .sticky-cards-bar {
        overflow: visible;
    }
    .sticky-cards-scroll,
    .sticky-cards-scroll[data-count="1"],
    .sticky-cards-scroll[data-count="2"],
    .sticky-cards-scroll[data-count="3"] {
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        scroll-padding-left: .75rem;
        -webkit-overflow-scrolling: touch;
        padding: .5rem .75rem;
    }
    .sticky-cards-scroll .sticky-card-slot {
        flex: 0 0 min(82vw, 360px) !important;
        width: min(82vw, 360px) !important;
        scroll-snap-align: start;
    }

    .sticky-cards-scroll .sticky-card-slot--banner {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .sticky-cards-scroll .sticky-card-slot--banner.sticky-card-slot--banner-porra {
        flex: 0 0 min(82vw, 360px) !important;
        width: min(82vw, 360px) !important;
    }
}

.sticky-cards-scroll::-webkit-scrollbar {
    height: 4px;
}

.sticky-cards-scroll::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 2px;
}

/* ── Card base: ocupa todo el slot, centra el inner horizontalmente ── */
.sticky-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    background: #fff;
    border-left: 4px solid;
    transition: box-shadow .2s;
}

/* Inner: ocupa todo el ancho de la tarjeta */
.sticky-card__inner {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: .5rem .75rem;
    box-sizing: border-box;
}

/* Slot/carta con banner: ancho automático según imagen */
.sticky-card-slot--banner {
    flex: 0 0 auto;
    width: auto;
}

.sticky-card-slot--banner .sticky-card {
    flex: 0 0 auto;
    width: 100%;
}

/* Boleto online (porra): mismo ancho que el resto de slots, sin forzar auto */
.sticky-card-slot--banner.sticky-card-slot--banner-porra {
    flex: 0 0 clamp(260px, 30vw, 420px);
    width: clamp(260px, 30vw, 420px);
}

.sticky-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

/* ── Card con banner: layout vertical, banner a todo el ancho ── */
.sticky-card--with-banner {
    align-items: stretch;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    border-left: none;
    border-top: 4px solid;
    background: var(--ostadar-blue);
}

.sticky-card--with-banner .sticky-card__banner {
    width: 100%;
    height: 154px;
    max-height: 154px;
    flex: none;
    overflow: hidden;
}

.sticky-card--with-banner .sticky-card__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Card sin banner: layout horizontal, miniatura lateral ── */
.sticky-card:not(.sticky-card--with-banner) .sticky-card__banner {
    flex: 0 0 72px;
    width: 72px;
    overflow: hidden;
}

.sticky-card:not(.sticky-card--with-banner) .sticky-card__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sticky-card--primary   { border-color: var(--bs-primary); }
.sticky-card--success   { border-color: var(--bs-success); }
.sticky-card--warning   { border-color: var(--bs-warning); }
.sticky-card--danger    { border-color: var(--bs-danger); }
.sticky-card--info      { border-color: var(--bs-info); }
.sticky-card--secondary { border-color: var(--bs-secondary); }
.sticky-card--dark      { border-color: var(--bs-dark); }

.sticky-card__body {
    padding: .5rem .75rem;
    flex: 1;
    min-width: 0;
    background: var(--ostadar-blue);
    color: #fff;
}

.sticky-card--db {
    background: var(--ostadar-blue);
    color: #fff;
}

.sticky-card--db .sticky-card__inner {
    padding: 0;
}

.sticky-card__badge {
    font-size: .65rem;
    letter-spacing: .05em;
    margin-bottom: .25rem;
    display: inline-block;
}

.sticky-card__title {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.sticky-card__desc {
    font-size: .75rem;
    color: rgba(255,255,255,.8);
    margin-top: .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sticky-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Egutegia sticky layout ────────────────────────────────────────────── */
.sticky-card--egutegia {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-left: none;
    border-top: none;
    padding: 0;
    background: var(--ostadar-blue);
    color: #fff;
}

.sticky-card__eg-header {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    gap: .4rem;
    background: var(--ostadar-ink);
    color: #fff;
}

.sticky-card__eg-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #fff;
}

.sticky-card__eg-list {
    list-style: none;
    margin: 0;
    padding: .25rem .5rem .4rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sticky-card__eg-item {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    font-size: .78rem;
    color: #fff;
}

.sticky-card__eg-icon {
    flex: 0 0 auto;
    padding-top: .05em;
}

.sticky-card__eg-content {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.sticky-card__eg-desc {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-card__eg-time {
    flex: 0 0 auto;
    font-size: .72rem;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}

.sticky-card__eg-date {
    flex: 0 0 auto;
    font-size: .72rem;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}

.sticky-card__eg-category {
    font-size: .7rem;
    color: rgba(255,255,255,.7);
    margin-bottom: .15rem;
    display: block;
}

.sticky-card__eg-match-teams {
    font-size: .78rem;
    line-height: 1.2;
}

.sticky-card__eg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: baseline;
    font-size: .72rem;
    color: rgba(255,255,255,.8);
}

.sticky-card__eg-venue {
    flex: 0 0 auto;
    font-size: .7rem;
    white-space: nowrap;
    color: rgba(255,255,255,.75);
}

/* ── Porra-etapa sticky layout ─────────────────────────────────────────── */
.sticky-card--porra-etapa {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-left: none;
    border-top: none;
    padding: 0;
    background: var(--ostadar-blue);
    color: #fff;
}

.sticky-card__pe-etapa {
    padding: .35rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    background: rgba(255,255,255,.08);
    color: #fff;
}

.sticky-card__pe-section {
    padding: .3rem .75rem .45rem;
}

.sticky-card__pe-subtitle {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    margin-bottom: .15rem;
}

.sticky-card__pe-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sticky-card__pe-item {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .78rem;
    color: #fff;
}

.sticky-card__pe-pos {
    flex: 0 0 auto;
    font-weight: 700;
    min-width: 1.8rem;
    color: rgba(255,255,255,.85);
}

.sticky-card__pe-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-card__pe-pts {
    flex: 0 0 auto;
    font-weight: 700;
    color: #fff;
}

.sticky-card__pe-item--more {
    justify-content: center;
    color: rgba(255,255,255,.7);
    font-weight: 700;
    letter-spacing: .15em;
}


/* ── Share bar (Detail) ──────────────────────────────────────────────────── */
.btn-share {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 6px;
    padding: .3rem .75rem;
    text-decoration: none;
    transition: opacity .15s;
}
.btn-share:hover { opacity: .85; text-decoration: none; }
.btn-share-x  { background: #000; color: #fff; border: none; }
.btn-share-fb { background: #1877f2; color: #fff; border: none; }