/* ═══════════════════════════════════════════════════════════
   MENTIDERO — Estilos públicos
   Hero · Urgencia · Cartelera · Filtros · Single evento
   ═══════════════════════════════════════════════════════════ */

/* ============================================================
   DESIGN TOKENS (rediseño 2026 — handoff Claude Design)
   Puente entre el prototipo y el código real. Tema y plugin
   consumen las mismas variables.
   Fuentes cargadas vía @import en style.css.
   ============================================================ */
:root {
    /* ---- Color: superficies (negro cálido) ---- */
    --mb-bg:        #14100E;
    --mb-bg-2:      #1E1714;
    --mb-bg-3:      #2A201B;
    --mb-bg-4:      #352824;

    /* ---- Color: texto ---- */
    --mb-text:       #F5EEE8;
    --mb-text-mute:  rgba(245,238,232,0.64);
    --mb-text-faint: rgba(245,238,232,0.40);

    /* ---- Color: líneas / bordes ---- */
    --mb-line:      rgba(244,236,231,0.12);
    --mb-line-soft: rgba(244,236,231,0.07);

    /* ---- Color: marca (rojo) ---- */
    --mb-red:        #E0241B;
    --mb-red-bright: #F5362B;
    --mb-red-dim:    rgba(224,36,27,0.16);
    --mb-red-shadow: rgba(224,36,27,0.32);

    /* ---- Color: neutro cálido (sand/dorado) ---- */
    --mb-sand:      #C9A84B; /* dorado de marca (mismo que /staff) */
    --mb-sand-real: #C9A98C; /* sand del prototipo */

    /* ---- Color: estados semánticos ---- */
    --mb-ok:        #5BD08A;
    --mb-ok-dim:    rgba(91,208,138,0.14);

    /* ---- Color: zonas del mapa de asientos ---- */
    --mb-zone-vip:  #E0241B;
    --mb-zone-pref: #C9A98C;
    --mb-zone-gen:  #6E7B8A;

    /* ---- Tipografía ---- */
    --mb-font-serif: 'DM Serif Display', Georgia, serif;
    --mb-font-sans:  'Archivo', system-ui, -apple-system, sans-serif;
    --mb-font-mono:  'Spline Sans Mono', ui-monospace, monospace;

    /* Escala tipográfica (móvil) */
    --mb-fs-display: 44px;
    --mb-fs-h1:      38px;
    --mb-fs-h2:      26px;
    --mb-fs-h3:      20px;
    --mb-fs-body:    15px;
    --mb-fs-meta:    13px;
    --mb-fs-mono:    10.5px;

    /* ---- Radios ---- */
    --mb-r-sm:   9px;
    --mb-r-md:   13px;
    --mb-r-lg:   16px;
    --mb-r-xl:   18px;
    --mb-r-pill: 999px;

    /* ---- Espaciado ---- */
    --mb-pad-screen:  18px;
    --mb-gap-section: 34px;

    /* ---- Alturas táctiles ---- */
    --mb-btn-h:    50px;
    --mb-btn-h-lg: 58px;
    --mb-input-h:  52px;
    --mb-tap-min:  44px;

    /* ---- Sombras ---- */
    --mb-shadow-cta:  0 6px 20px var(--mb-red-shadow);
    --mb-shadow-card: 0 10px 26px rgba(0,0,0,0.4);

    /* ---- Aliases auxiliares usados en F4-F6 ---- */
    --mb-red-2:   #B81C14;          /* hover del rojo */
    --mb-gold:    var(--mb-sand);
    --mb-gold-2:  #B59138;          /* hover del dorado */
    --mb-text-2:  var(--mb-text-mute);
    --mb-text-3:  var(--mb-text-faint);
}
/* ════════════════════════════════════════════════════════ */

/* ── Páginas sin título ──────────────────────────────────── */
.mb-sin-titulo .wp-block-post-title { display: none !important; }

/* ── Reset global TwentyTwentyFive ──────────────────────── */

/* 0. Bloquear overflow horizontal (evita zoom-out involuntario) */
html, body {
    overflow-x: clip;
    max-width: 100%;
}
.wp-site-blocks,
main.wp-block-group.alignfull {
    overflow-x: clip;
    max-width: 100%;
}

/* 1. Neutralizar block-gap entre bloques */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }

.wp-block-group,
.wp-block-shortcode,
.wp-block-html {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Alineación horizontal global para contenedores CTA */
[class*="__ctas"],
[class*="__actions"],
[class*="__buttons"] {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

/* 3. Sin margen ni padding-top en secciones mb-* */
[class^="mb-"],
[class*=" mb-"] {
    margin-top: 0;
}

/* ── Variables legacy (aliases hacia tokens canónicos) ─── */
:root {
    --mb-rojo:     var(--mb-red);
    --mb-rojo-dk:  var(--mb-red-2);
    --mb-dorado:   var(--mb-sand);
    --mb-negro:    var(--mb-bg);
    --mb-carbon:   var(--mb-bg-2);
    --mb-borde:    var(--mb-line);
    --mb-gris:     var(--mb-text-mute);
    --mb-blanco:   var(--mb-text);
    --mb-trans: 0.22s ease;
}

/* ══════════════════════════════════════════════════════════
   HEADER — LOGO
   ══════════════════════════════════════════════════════════ */
.mb-header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.mb-header-logo {
    height: 41px;
    width: auto;
    display: block;
}

/* BOTONES GLOBALES — definidos en F6 (legacy eliminado 2026-06-21). */
.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
}

/* HERO TEATRAL v0 + .mb-ver-cartelera-link — eliminados 2026-06-21
   (F3.A cubre .mb-hero completo) */
.wp-block-shortcode:has(.mb-hero) {
    margin-block-start: 0 !important;
}

/* URGENCIA, FILTROS, CARTELERA-GRID v0 — eliminados 2026-06-21
   (shortcodes mb_urgencia/mb_cartelera_publica huérfanos en templates) */


/* RESEÑAS v0 + QUIETECITA v0 + MANYCHAT v0 + CLUB v0 + IDENTIDAD v0 + CARTELERA-hero v0
   eliminados 2026-06-21 — cubiertos por F3.A-D más abajo */

/* ══════════════════════════════════════════════════════════
   CARRUSEL HORIZONTAL DE EVENTOS (Cartelera home)
   Prototipo: cards 168×9:16, video vertical, badge categoría,
   título serif 21px, fecha mono, precio + "Boletos →"
   ══════════════════════════════════════════════════════════ */
.mb-carrusel-h {
    background: var(--mb-bg);
    padding: 0 0 4px;
    overflow: hidden;
    position: relative;
}

/* Encabezado "Cartelera" — opcional, prototipo lo precede pero el
   tema no emite Head desde el shortcode; quien quiera añadirlo
   debe meter un heading antes del [mb_carrusel_horizontal]. */

/* Track scroll horizontal */
.mb-carrusel-h__track {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding: 0 20px 4px;
    scroll-snap-type: x mandatory;
}
.mb-carrusel-h__track::-webkit-scrollbar { display: none; }
.mb-carrusel-h__track:focus { outline: none; }
.mb-carrusel-h__track.is-dragging { cursor: grabbing; }
.mb-carrusel-h__card:focus { outline: none; }

/* Card vertical */
.mb-carrusel-h__card {
    flex: 0 0 168px;
    width: 168px;
    height: auto;
    scroll-snap-align: start;
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: transform 0.25s ease;
}

.mb-carrusel-h__card:hover {
    transform: translateY(-3px);
}

/* Imagen 9:16 con play delineado al centro */
.mb-carrusel-h__imagen {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 9 / 16;
    background-size: cover;
    background-position: center;
    background-color: var(--mb-bg-2);
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
    transition: transform 0.4s ease;
}
.mb-carrusel-h__card:hover .mb-carrusel-h__imagen {
    transform: scale(1.02);
}

/* Play button delineado (sólo si activa, sin video autoplay) */
.mb-carrusel-h__imagen::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 1.5px solid rgba(245,238,232,0.85);
    background: rgba(13,11,10,0.25);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23f5eee8'><path d='M8 5v14l11-7z'/></svg>");
    background-repeat: no-repeat;
    background-position: 56% 50%;
    pointer-events: none;
    opacity: 0.92;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mb-carrusel-h__card:hover .mb-carrusel-h__imagen::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
}

/* Tag categoría (badge) — absoluto arriba-izquierda */
.mb-carrusel-h__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    font-family: var(--mb-font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245,238,232,0.20);
    background: rgba(20,16,14,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1;
}

/* Overlay — ocultar (era para texto encima, ya no se usa) */
.mb-carrusel-h__overlay { display: none; }

/* Card activa — sin borde dorado; el prototipo no lo tiene */
.mb-carrusel-h__card--activa .mb-carrusel-h__imagen {
    box-shadow: 0 0 0 2px var(--mb-red), 0 8px 22px rgba(224,36,27,0.25);
}

/* Bloque de texto debajo del cartel */
.mb-carrusel-h__info {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    z-index: auto;
}

.mb-carrusel-h__nombre {
    display: block;
    font-family: var(--mb-font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 1.05;
    color: var(--mb-text);
    margin: 12px 0 4px;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mb-carrusel-h__subtitulo {
    display: none;
}

.mb-carrusel-h__fecha {
    display: block;
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--mb-text-mute);
    margin: 0;
    white-space: nowrap;
}

/* Pie: precio izquierda + "Boletos →" derecha */
.mb-carrusel-h__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 8px;
}

.mb-carrusel-h__precio {
    font-family: var(--mb-font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--mb-text);
    letter-spacing: 0;
}

.mb-carrusel-h__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mb-red-bright);
    letter-spacing: 0;
    white-space: nowrap;
}

/* Sin fade derecho en versión rediseñada (limpio) */
.mb-carrusel-h::after { content: none; }

/* Variantes por tipo: ajuste fino del tag */
.mb-carrusel-h__card--reservacion .mb-carrusel-h__tag,
.mb-carrusel-h__card--gratuito .mb-carrusel-h__tag {
    color: var(--mb-sand-real);
}

/* Header de la sección Cartelera (home) — match con Opiniones etc. */
.mb-cartelera-home-head {
    padding: 34px 20px 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.mb-cartelera-home-head__titulo {
    font-family: var(--mb-font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 27px;
    line-height: 1;
    color: var(--mb-text);
    margin: 0;
    letter-spacing: 0;
}
.mb-cartelera-home-head__accion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mb-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--mb-text-mute);
    text-decoration: none;
}
.mb-cartelera-home-head__accion:hover { color: var(--mb-text); }
.mb-cartelera-home-head__accion svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   CARTELERA HOME — Videos verticales 9:16 (mb_videos_eventos)
   Prototipo: cards 168×9:16, badge, título serif 21, fecha mono,
   precio + "Boletos →"
   ══════════════════════════════════════════════════════════ */
.mb-videos-eventos {
    background: var(--mb-bg);
    padding: 0;
    overflow: hidden;
}

.mb-vevento-galeria {
    position: relative;
    overflow: hidden;
}

.mb-vevento-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding: 0 20px 4px;
    justify-content: flex-start;
}
.mb-vevento-track::-webkit-scrollbar { display: none; }
.mb-vevento-galeria--carousel .mb-vevento-track { cursor: grab; }
.mb-vevento-galeria--carousel .mb-vevento-track:active { cursor: grabbing; }

.mb-vevento-item {
    flex: 0 0 168px;
    width: 168px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    gap: 0;
    scroll-snap-align: start;
    background: transparent;
    text-decoration: none;
    color: inherit;
}

/* Panel = imagen vertical 9:16 */
.mb-vevento-panel {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    border: none;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background: var(--mb-bg-2);
    transition: transform 0.25s ease;
}
.mb-vevento-item:hover .mb-vevento-panel {
    transform: translateY(-3px);
}

.mb-vevento-panel video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay sutil sobre el video (mejora contraste del badge) */
.mb-vevento-panel__overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(13,11,10,0.35) 0%,
        rgba(13,11,10,0.00) 30%,
        rgba(13,11,10,0.00) 100%);
    pointer-events: none;
}

/* Badge categoría — absoluto arriba-izquierda */
.mb-vevento-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    font-family: var(--mb-font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245,238,232,0.20);
    background: rgba(20,16,14,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1;
}

/* Neutraliza <p> que wpautop pueda inyectar */
.mb-vevento-item > p { display: contents; }

/* Título serif 21 abajo del cartel */
.mb-vevento-nombre {
    display: -webkit-box;
    font-family: var(--mb-font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.05;
    color: var(--mb-text);
    text-align: left;
    margin: 12px 0 4px;
    letter-spacing: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Subtítulo oculto (prototipo no lo muestra en cartelera card) */
.mb-vevento-subtitulo { display: none; }

/* Fecha mono 10.5 */
.mb-vevento-fecha {
    display: block;
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--mb-text-mute);
    margin: 0;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Pie: precio izq + "Boletos →" der */
.mb-vevento-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 8px;
}

.mb-vevento-precio {
    font-family: var(--mb-font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--mb-text);
    text-align: left;
    line-height: 1;
}
.mb-vevento-precio--ph { visibility: hidden; }

.mb-vevento-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mb-red-bright);
    text-decoration: none;
    white-space: nowrap;
}
.mb-vevento-cta:hover { color: var(--mb-red); }

/* Ocultar el botón ancho legacy si existe en el DOM */
.mb-vevento-btn { display: none !important; }

/* Botones de navegación del carrusel (existing JS) */
.mb-vevento-galeria--carousel .mb-qt-btn {
    position: absolute;
    top: calc(50% - 60px); /* centra sobre la fila de cards */
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(20,16,14,0.75);
    border: 1px solid var(--mb-line);
    color: var(--mb-text);
    cursor: pointer;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s ease;
}
.mb-vevento-galeria--carousel .mb-qt-btn:hover { background: rgba(20,16,14,0.92); }
.mb-vevento-galeria--carousel .mb-qt-btn--prev { left: 8px; }
.mb-vevento-galeria--carousel .mb-qt-btn--next { right: 8px; }

@media (max-width: 480px) {
    .mb-vevento-galeria--carousel .mb-qt-btn { display: none; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER — MAPA GOOGLE
   ══════════════════════════════════════════════════════════ */
.mb-footer-mapa {
    grid-column: 1 / -1;
    margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

.mb-footer-mapa__wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    line-height: 0;
}

.mb-footer-mapa__wrap iframe {
    width: 100%;
    height: 180px;
    display: block;
    filter: grayscale(80%) invert(90%) contrast(90%);
    pointer-events: none;
}

.mb-footer-mapa__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 8px 10px;
    background: linear-gradient(to top, rgba(34,31,31,.7) 0%, transparent 55%);
    text-decoration: none;
}

.mb-footer-mapa__cta {
    font-size: 0.68rem;
    color: rgba(240,236,227,.75);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.mb-footer-mapa__overlay:hover .mb-footer-mapa__cta { color: var(--mb-dorado, #C9A84C); }

/* CARTELERA — estilos en bloque F4 (más abajo). Legacy v2 eliminado 2026-06-21. */

/* Botón WA en copyright bar: solo visible en móvil */
.mb-footer-wa-mobile { display: none; }
@media (max-width: 767px) {
    .mb-footer-wa-mobile { display: inline-flex !important; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER MÓVIL — ocultar columnas + mapa, dejar solo copyright
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Oculta la sección central (4 columnas + mapa); conserva el
       separador rojo (primer hijo) y la barra de copyright (último) */
    footer.wp-block-group.alignfull > .wp-block-group:not(:first-child):not(:last-child) {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   MENÚ HAMBURGUESA MÓVIL — panel oscuro 50% desde la derecha
   (aplica en todas las páginas)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 50vw !important;
        z-index: 10001 !important;
        overflow-y: auto !important;
        background: #111 !important;
    }

    .wp-block-navigation__responsive-container-overlay-content {
        position: relative !important;
        z-index: 10001 !important;
        width: 100% !important;
        min-height: 100% !important;
        background: #111 !important;
        color: #fff !important;
    }

    /* Texto blanco en links, botones y botón de cierre */
    .wp-block-navigation__responsive-container.is-menu-open a,
    .wp-block-navigation__responsive-container.is-menu-open button,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container-close {
        color: #fff !important;
    }

    /* "Compañía Teatral del Norte" — alineado a la derecha */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child a,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
        text-align: right !important;
        justify-content: flex-end !important;
        width: 100% !important;
        display: block !important;
    }
}

/* HEADER MÓVIL v0 + CARTELERA MÓVIL v0 — eliminados 2026-06-21
   (F7 oculta header en móvil, F4 redefine cartelera) */

/* Utility móvil global */
@media (max-width: 600px) {
    body { overflow-x: hidden; }
}

/* Ocultar título de página WordPress en la tienda */
body.page-tienda .wp-block-post-title,
body.page-tienda h1.entry-title {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   ═══  REDISEÑO 2026 — F3.A · HERO HOME                   ═══
   ═══  Handoff Claude Design. Usa tokens del bloque       ═══
   ═══  :root al inicio de este archivo.                   ═══
   ════════════════════════════════════════════════════════════ */

/* ── Hero: altura fija 506px móvil / 70vh desktop ─────────── */
.mb-hero {
    position: relative;
    height: 506px;
    background-color: var(--mb-bg);
    background-size: cover;
    background-position: center 28%;
    color: var(--mb-text);
    overflow: hidden;
    padding: 0;
    margin: 0;
}
@media (min-width: 768px) {
    .mb-hero {
        height: clamp(560px, 72vh, 760px);
    }
}

/* Video de fondo */
.mb-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    z-index: 0;
}

/* Overlay inferior — gradient hasta rgba(20,16,14,0.66) abajo */
.mb-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20,16,14,0.00) 0%,
        rgba(20,16,14,0.10) 40%,
        rgba(20,16,14,0.55) 75%,
        rgba(20,16,14,0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Contenido pegado abajo */
.mb-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 20px 22px;
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .mb-hero__content {
        padding: 0 clamp(28px, 5vw, 80px) 36px;
        max-width: 840px;
    }
}

/* Overline mono roja con ● */
.mb-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-family: var(--mb-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-red-bright);
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 10px;
}
.mb-hero__tag::before {
    content: '●';
    font-size: 11px;
    line-height: 1;
}

/* Título: DM Serif 44px / 0.98 — escala en desktop */
.mb-hero__titulo {
    font-family: var(--mb-font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 44px;
    line-height: 0.98;
    letter-spacing: -0.01em;
    color: var(--mb-text);
    margin: 0;
}
@media (min-width: 768px) {
    .mb-hero__titulo { font-size: clamp(60px, 8vw, 96px); }
}

/* Subtítulo: serif itálica 17.5px */
.mb-hero__subtitulo {
    font-family: var(--mb-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 17.5px;
    line-height: 1.3;
    color: rgba(245,238,232,0.86);
    margin: 10px 0 0;
}

/* Extracto OCULTO en hero — prototipo sólo muestra subtítulo */
.mb-hero__extracto { display: none !important; }

/* Meta (fecha · precio) con iconos sand 14.5px sans */
.mb-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 14px 0 18px;
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
}
.mb-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mb-text);
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
    letter-spacing: 0;
}
.mb-hero__meta-item svg {
    width: 16px;
    height: 16px;
    color: var(--mb-sand-real);
    stroke: var(--mb-sand-real);
    flex-shrink: 0;
}
.mb-hero__precio {
    font-family: var(--mb-font-sans);
    font-weight: 700;
    color: var(--mb-text);
}

/* CTAs: rojo grande con shadow + vidrio */
.mb-hero__ctas {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    margin-top: 4px;
}
.mb-hero .mb-btn,
.mb-hero .mb-hero__ctas > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    height: 58px !important;
    padding: 0 22px !important;
    border-radius: 13px !important;
    font-family: var(--mb-font-sans) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease, border-color .15s ease;
    line-height: 1 !important;
}
/* Primario (todos los tipos no-outline) ocupa flex:1 */
.mb-hero .mb-btn--primario,
.mb-hero .mb-btn--reserva,
.mb-hero .mb-btn--libre {
    flex: 1 !important;
    background: var(--mb-red) !important;
    color: #fff !important;
    border-color: var(--mb-red) !important;
    box-shadow: var(--mb-shadow-cta) !important;
}
.mb-hero .mb-btn--primario:hover,
.mb-hero .mb-btn--reserva:hover,
.mb-hero .mb-btn--libre:hover {
    background: var(--mb-red-bright) !important;
    border-color: var(--mb-red-bright) !important;
}

/* "Saber más" — vidrio */
.mb-hero .mb-btn--outline {
    background: rgba(245,238,232,0.08) !important;
    color: var(--mb-text) !important;
    border: 1px solid var(--mb-line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex: 0 0 auto !important;
}
.mb-hero .mb-btn--outline:hover {
    background: rgba(245,238,232,0.14) !important;
    border-color: rgba(245,238,232,0.22) !important;
}

/* Dots: 6x6 normal, activo 18x6 píldora */
.mb-hero__dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
}
.mb-hero__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(245,238,232,0.30);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}
.mb-hero__dot--activo {
    background: var(--mb-text);
    width: 18px;
}
.mb-hero__dot:hover:not(.mb-hero__dot--activo) {
    background: rgba(245,238,232,0.55);
}

/* ── Tipografía uniforme de títulos de sección (h2/h3) ──── */
/* Aplica a todas las secciones de la home y otras páginas para
   empatar con el handoff. Los hardcodes a Cormorant en otras reglas
   no se borran todavía; éstas ganan por orden de cascada. */
section.mb-resenas h2,
section.mb-quietecita-info h2,
section.mb-manychat h2,
section.mb-club h2,
section.mb-identidad-v2 h2,
.mb-section-title,
.mb-manychat__titulo,
.mb-club__titulo,
.mb-quietecita__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    color: var(--mb-text) !important;
    letter-spacing: -0.01em;
}

/* Overlines en mono uppercase (eyebrows) */
.mb-manychat__eyebrow,
.mb-club__eyebrow,
.mb-resenas__eyebrow,
.mb-quietecita-info__eyebrow {
    font-family: var(--mb-font-mono) !important;
    font-size: var(--mb-fs-mono) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--mb-sand-real) !important;
}

/* ════════════════════════════════════════════════════════════
   ═══  /F3.A — HERO HOME                                  ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  REDISEÑO 2026 — F3.B                               ═══
   ═══  Carrusel obras · Reseñas · Quietecita · Compañía   ═══
   ═══  Sólo CSS, sin tocar markup.                        ═══
   ════════════════════════════════════════════════════════════ */

/* ── Helpers de sección ──────────────────────────────────── */
.mb-carrusel-h,
.mb-resenas,
.mb-quietecita-info,
.mb-club,
.mb-identidad-v2 {
    background-color: var(--mb-bg);
    color: var(--mb-text);
}

/* ── Carrusel horizontal de obras (cartelera home) ──────── */
.mb-carrusel-h {
    padding: var(--mb-gap-section) 0;
}
.mb-carrusel-h__track {
    gap: 16px;
    padding: 6px var(--mb-pad-screen);
}
.mb-vevento-item,
.mb-carrusel-h__item {
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: var(--mb-r-xl);
    overflow: hidden;
    box-shadow: var(--mb-shadow-card);
    transition: border-color .2s ease, transform .2s ease;
}
.mb-vevento-item:hover,
.mb-carrusel-h__item:hover {
    border-color: var(--mb-line);
    transform: translateY(-2px);
}
.mb-carrusel-h__imagen {
    aspect-ratio: 16 / 9;
    background: #0a0807 center / cover no-repeat;
}
.mb-carrusel-h__overlay,
.mb-vevento-panel__overlay {
    background: linear-gradient(
        to bottom,
        rgba(20,16,14,0) 0%,
        rgba(20,16,14,0.20) 45%,
        rgba(20,16,14,0.90) 100%
    );
}
.mb-carrusel-h__info {
    padding: 16px 18px 18px;
}
.mb-carrusel-h__fecha,
.mb-vevento-fecha {
    font-family: var(--mb-font-mono);
    font-size: var(--mb-fs-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
    margin-bottom: 6px;
}
.mb-carrusel-h__nombre,
.mb-vevento-nombre {
    font-family: var(--mb-font-serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.05;
    color: var(--mb-text);
    letter-spacing: -0.005em;
    margin: 0 0 6px;
}
.mb-carrusel-h__subtitulo,
.mb-vevento-subtitulo {
    font-family: var(--mb-font-serif);
    font-style: italic;
    font-size: 14px;
    line-height: 1.3;
    color: var(--mb-text-mute);
    margin: 0 0 12px;
}
.mb-vevento-precio {
    font-family: var(--mb-font-mono);
    font-size: var(--mb-fs-meta);
    color: var(--mb-text);
    letter-spacing: 0.04em;
}

/* Botón de play delineado (video cartel) — defensivo si lo emite el JS */
.mb-vevento-item .mb-play-btn,
.mb-carrusel-h__item .mb-play-btn,
.mb-play-outline {
    width: 56px; height: 56px;
    border-radius: var(--mb-r-pill);
    background: transparent;
    border: 1.5px solid rgba(245,238,232,0.85);
    color: rgba(245,238,232,0.95);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Reseñas (Google) — prototipo: card 256, bg-2, radius 16 ── */
.mb-resenas {
    padding: 34px 0 0;
    background: var(--mb-bg);
}
.mb-resenas__inner { max-width: none; margin: 0; padding: 0; }

/* Header de la sección */
.mb-resenas__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin: 0 0 14px;
    padding: 0 20px;
}
.mb-resenas__eyebrow {
    font-family: var(--mb-font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--mb-sand-real) !important;
    display: block;
}
.mb-resenas__header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.mb-resenas__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 27px !important;
    line-height: 1 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}
.mb-resenas__rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mb-font-sans);
    font-size: 14px;
    color: var(--mb-text);
}
.mb-resenas__rating .mb-resenas__estrellas {
    display: inline-flex;
    color: var(--mb-sand-real);
    font-family: var(--mb-font-sans);
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1;
}
.mb-resenas__promedio {
    font-weight: 700;
    font-family: var(--mb-font-sans) !important;
    font-size: 14px !important;
    color: var(--mb-text) !important;
    letter-spacing: 0 !important;
}
.mb-resenas__total {
    color: var(--mb-text-mute);
    font-family: var(--mb-font-sans);
    font-size: 14px;
}

/* Carrusel horizontal */
.mb-resenas__carousel { position: relative; }
.mb-resenas__track,
.mb-resenas__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 20px 4px;
}
.mb-resenas__track::-webkit-scrollbar,
.mb-resenas__grid::-webkit-scrollbar { display: none; }

/* Card individual 256px */
.mb-resena-card {
    flex: 0 0 256px;
    width: 256px;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: 16px;
    padding: 16px;
    box-shadow: none;
    color: var(--mb-text);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header de card: avatar | name+date | "G" */
.mb-resena-card__header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}
.mb-resena-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--mb-bg-4) !important;
    color: var(--mb-sand-real);
    font-family: var(--mb-font-serif);
    font-size: 17px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.mb-resena-card__id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mb-resena-card__nombre {
    font-family: var(--mb-font-sans);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--mb-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-resena-card__fecha {
    font-family: var(--mb-font-sans);
    font-size: 11.5px;
    letter-spacing: 0;
    color: var(--mb-text-faint);
    text-transform: none;
    line-height: 1.2;
}
.mb-resena-card__google {
    font-family: var(--mb-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--mb-text-faint);
    flex-shrink: 0;
    line-height: 1;
}

/* Estrellas debajo del header */
.mb-resena-card__rating-row {
    color: var(--mb-sand-real);
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    margin: 0;
}
.mb-resena-card__stars {
    color: var(--mb-sand-real);
    font-family: var(--mb-font-sans);
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1;
}

/* Texto de la reseña */
.mb-resena-card__texto {
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mb-text-mute);
    margin: 10px 0 0;
}

/* CTA "Leer más en Google" */
.mb-resenas__mas {
    padding: 18px 20px 0;
    display: flex;
    justify-content: center;
}
.mb-resenas__mas-btn,
.mb-resenas__mas a {
    background: rgba(245,238,232,0.06);
    color: var(--mb-text);
    border: 1px solid var(--mb-line);
    border-radius: var(--mb-r-md);
    padding: 0 22px;
    height: var(--mb-btn-h);
    font-family: var(--mb-font-sans);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}
.mb-resenas__mas-btn:hover { background: rgba(245,238,232,0.10); }

/* Nav buttons (si carrusel los emite) */
.mb-resenas__nav {
    position: absolute;
    top: -54px;
    right: 20px;
    display: flex;
    gap: 6px;
}
.mb-resenas__nav button {
    width: 32px;
    height: 32px;
    background: var(--mb-bg-3);
    border: 1px solid var(--mb-line);
    color: var(--mb-text);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}
.mb-resenas__nav button:hover { background: var(--mb-bg-4); }

/* ── La Quietecita — prototipo: card 1 col (media + texto + btns) ── */
.mb-quietecita-v2 {
    padding: 34px 0 0;
    background: var(--mb-bg);
}

/* Header (eyebrow + título) — mismo patrón que Opiniones */
.mb-quietecita-head {
    padding: 0 20px;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mb-quietecita-head__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
}
.mb-quietecita-head__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 27px !important;
    line-height: 1 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

/* Card contenedora */
.mb-quietecita-card {
    margin: 0 20px;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: 18px;
    overflow: hidden;
}

/* Media superior — el fader rota slides. Alto subido a 200px (Paulo 17 jul). */
.mb-qt-media {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--mb-bg-3);
}
.mb-qt-media .mb-qt-fader {
    position: relative;
    width: 100%;
    height: 100%;
}
.mb-qt-media .mb-qt-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.mb-qt-media .mb-qt-slide--active { opacity: 1; }
.mb-qt-media img,
.mb-qt-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body con texto + botones */
.mb-qt-body {
    padding: 16px 18px 18px;
}
.mb-qt-texto {
    margin: 0 0 14px;
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mb-text-mute);
}
.mb-qt-strong {
    color: var(--mb-text);
}

/* Botones */
.mb-qt-btns {
    display: flex;
    gap: 10px;
}
.mb-qt-btn {
    flex: 1;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    font-family: var(--mb-font-sans);
    font-size: 15.5px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s ease, transform 0.1s ease;
    line-height: 1;
}
.mb-qt-btn--carta {
    background: var(--mb-bg-3);
    color: var(--mb-text);
    border: 1px solid var(--mb-line);
    font-weight: 600;
}
.mb-qt-btn--carta:hover {
    background: var(--mb-bg-4);
}
.mb-qt-btn--carta svg {
    color: var(--mb-sand-real);
    flex-shrink: 0;
}
.mb-qt-btn--reservar {
    background: var(--mb-red);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(224,36,27,0.3);
}
.mb-qt-btn--reservar:hover {
    background: var(--mb-red-bright);
    transform: translateY(-1px);
}

/* Legacy info-3col — ocultar (sustituido por card de arriba) */
.mb-quietecita-3col,
.mb-quietecita-info {
    display: none !important;
}

/* ── Compañía Teatral del Norte — prototipo: card horizontal compacta ── */
.mb-cia {
    background: var(--mb-bg);
    padding: 34px 0 0;
}

.mb-cia-head {
    padding: 0 20px;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mb-cia-head__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
}
.mb-cia-head__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 27px !important;
    line-height: 1.05 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

/* Card horizontal: foto 96 + body */
.mb-cia-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 20px;
    padding: 14px;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: 18px;
    text-decoration: none;
    color: var(--mb-text);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mb-cia-card:hover {
    background: var(--mb-bg-3);
    border-color: rgba(245,238,232,0.18);
}

.mb-cia-card__foto {
    display: block;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 12px;
    background-color: var(--mb-bg-3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mb-cia-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mb-cia-card__texto {
    display: block;
    margin: 0;
    font-family: var(--mb-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mb-text-mute);
}

.mb-cia-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mb-font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--mb-red-bright);
    line-height: 1;
}
.mb-cia-card__cta svg { flex-shrink: 0; }
.mb-cia-card:hover .mb-cia-card__cta { color: var(--mb-red); }

/* Legacy identidad-v2 — ocultar (sustituido por mb-cia) */
.mb-identidad-v2 { display: none !important; }

/* ManyChat (mb-manychat) eliminado 2026-06-21 — sección removida del front-page */

/* ── Carrusel de videos verticales (mb-videos-eventos) ──── */
/* Las clases las emite el JS; defensivas. */
.mb-videos-eventos,
.mb-videos-cont {
    background: var(--mb-bg);
    padding: var(--mb-gap-section) 0;
}
.mb-videos-card,
.mb-video-card {
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: var(--mb-r-xl);
    overflow: hidden;
    box-shadow: var(--mb-shadow-card);
}

/* ════════════════════════════════════════════════════════════
   ═══  /F3.B                                              ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  REDISEÑO 2026 — F3.C · CLUB MENTIDERO              ═══
   ═══  Card con gradient rojo→bg, textura de líneas,      ═══
   ═══  logo M, overline mono, CTA outline.                ═══
   ════════════════════════════════════════════════════════════ */

/* ── Club Mentidero — prototipo: gradiente 145° + textura líneas ── */
.mb-club-sec {
    background: var(--mb-bg);
    padding: 34px 0 0;
}

/* Header (kicker + título) — mismo patrón que resto de secciones */
.mb-club-head {
    padding: 0 20px;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mb-club-head__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
}
.mb-club-head__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 27px !important;
    line-height: 1 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

/* Card del Club */
.mb-club {
    position: relative;
    margin: 0 20px;
    padding: 20px 20px 22px;
    border-radius: 18px;
    overflow: hidden;
    text-align: left;
    color: var(--mb-text);
    background: linear-gradient(145deg, #3A1714 0%, #1E1714 55%);
    border: 1px solid rgba(224,36,27,0.35);
    box-shadow: none;
    max-width: none;
}
.mb-club::before { content: none; }

/* Textura líneas diagonales 115° */
.mb-club__textura {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(245,238,232,0.04) 0 1px, transparent 1px 13px);
    pointer-events: none;
}

.mb-club__contenido {
    position: relative;
    z-index: 1;
}

/* Row: logo M + PROGRAMA DE LEALTAD */
.mb-club__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.mb-club__logo {
    width: 30px;
    height: 30px;
    display: block;
}
.mb-club__eyebrow {
    display: inline-block;
    font-family: var(--mb-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--mb-sand-real) !important;
    margin: 0 !important;
    line-height: 1;
}

/* Título serif grande */
.mb-club__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 28px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    color: var(--mb-text) !important;
    margin: 0 0 8px !important;
}

/* Descripción */
.mb-club__descripcion {
    font-family: var(--mb-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mb-text-mute);
    margin: 0 0 16px;
    max-width: none;
}

/* CTA rojo con shadow + flecha */
.mb-club__cta,
#mb-club-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 22px !important;
    background: var(--mb-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 13px !important;
    font-family: var(--mb-font-sans) !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(224,36,27,0.3) !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    line-height: 1 !important;
}
.mb-club__cta:hover,
#mb-club-cta:hover {
    background: var(--mb-red-bright) !important;
    transform: translateY(-1px);
}
.mb-club__cta svg {
    flex-shrink: 0;
    color: #fff;
}

/* ── Modal del Club (lista de espera) ────────────────────── */
.mb-cmodal {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mb-cmodal[hidden] { display: none; }
.mb-cmodal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(20,16,14,0.82);
    backdrop-filter: blur(6px);
}
.mb-cmodal__caja {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: var(--mb-r-xl);
    color: var(--mb-text);
    box-shadow: var(--mb-shadow-card);
    padding: 30px 26px;
}
.mb-cmodal__cerrar {
    background: transparent;
    border: 0;
    color: var(--mb-text-mute);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}
.mb-cmodal__cerrar:hover { color: var(--mb-text); }
.mb-cmodal__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: var(--mb-fs-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-red-bright);
}
.mb-cmodal__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-size: var(--mb-fs-h2) !important;
    line-height: 1.1;
    color: var(--mb-text) !important;
    margin: 10px 0 8px !important;
}
.mb-cmodal__desc {
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mb-text-mute);
    margin: 0 0 18px;
}
.mb-cmodal__form { display: flex; flex-direction: column; gap: 14px; }
.mb-cmodal__campo { display: flex; flex-direction: column; gap: 6px; }
.mb-cmodal__campo label {
    font-family: var(--mb-font-mono);
    font-size: var(--mb-fs-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mb-text-mute);
}
.mb-cmodal__campo input {
    height: var(--mb-input-h);
    padding: 0 16px;
    background: var(--mb-bg-3);
    color: var(--mb-text);
    border: 1px solid var(--mb-line);
    border-radius: var(--mb-r-md);
    font-family: var(--mb-font-sans);
    font-size: 15px;
}
.mb-cmodal__campo input:focus {
    outline: none;
    border-color: var(--mb-red);
    background: var(--mb-bg-4);
}
.mb-cmodal__check {
    display: flex; gap: 10px;
    font-family: var(--mb-font-sans);
    font-size: 13px;
    color: var(--mb-text-mute);
    line-height: 1.4;
    cursor: pointer;
}
.mb-cmodal__check input[type="checkbox"] {
    accent-color: var(--mb-red);
    margin-top: 2px;
}
.mb-cmodal__msg {
    font-family: var(--mb-font-sans);
    font-size: 13px;
    border-radius: var(--mb-r-md);
    padding: 10px 14px;
    margin-top: 4px;
}
.mb-cmodal__msg.is-error {
    color: var(--mb-red-bright);
    background: var(--mb-red-dim);
    border: 1px solid rgba(224,36,27,0.25);
}
.mb-cmodal__msg.is-ok,
.mb-cmodal__msg.is-success {
    color: var(--mb-ok);
    background: var(--mb-ok-dim);
    border: 1px solid rgba(91,208,138,0.3);
}
.mb-cmodal__submit {
    background: var(--mb-red);
    color: #fff;
    height: var(--mb-btn-h-lg);
    border: 0;
    border-radius: var(--mb-r-md);
    font-family: var(--mb-font-sans);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: var(--mb-shadow-cta);
    transition: background .15s ease;
}
.mb-cmodal__submit:hover { background: var(--mb-red-bright); }

/* ════════════════════════════════════════════════════════════
   ═══  /F3.C                                              ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  REDISEÑO 2026 — F3.D · FOOTER (v2)                 ═══
   ════════════════════════════════════════════════════════════ */

.mb-footer-v2 {
    background: var(--mb-bg-2) !important;
    border-top: 2px solid var(--mb-red) !important;
    margin-top: 36px !important;
    padding: 0 !important;
    color: var(--mb-text-mute);
    font-family: var(--mb-font-sans);
}

.mb-foot__inner {
    padding: 26px 20px 30px;
    max-width: none;
    margin: 0;
}

.mb-foot__logo {
    display: inline-flex;
    text-decoration: none;
}
.mb-foot__logo img {
    width: 38px;
    height: 38px;
    display: block;
}

.mb-foot__bajada {
    margin: 14px 0 0;
    font-family: var(--mb-font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--mb-text-mute);
    max-width: 320px;
}

.mb-foot__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.mb-foot__col-h {
    display: block;
    font-family: var(--mb-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
    margin-bottom: 12px;
    line-height: 1;
}

.mb-foot__col-links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.mb-foot__col-links a {
    font-family: var(--mb-font-sans);
    font-size: 14px;
    color: var(--mb-text-mute);
    text-decoration: none;
    line-height: 1.3;
    transition: color .15s ease;
}
.mb-foot__col-links a:hover { color: var(--mb-text); }

.mb-foot__visit {
    margin-top: 26px;
}

.mb-foot__dir {
    margin: 0;
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mb-text-mute);
}

.mb-foot__mail {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    color: var(--mb-text);
    text-decoration: none;
    transition: color .15s ease;
}
.mb-foot__mail:hover { color: var(--mb-red-bright); }

.mb-foot__horario {
    margin: 10px 0 0;
    font-family: var(--mb-font-sans);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--mb-text-faint);
}

.mb-foot__social {
    display: flex;
    gap: 18px;
    margin-top: 22px;
}
.mb-foot__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mb-text-mute);
    text-decoration: none;
    transition: color .15s ease;
}
.mb-foot__social a:hover { color: var(--mb-text); }

.mb-foot__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--mb-line);
}
.mb-foot__copy {
    font-family: var(--mb-font-sans);
    font-size: 11.5px;
    color: var(--mb-text-faint);
}
.mb-foot__legal {
    font-family: var(--mb-font-sans);
    font-size: 11.5px;
    color: var(--mb-text-faint);
    text-decoration: none;
    transition: color .15s ease;
}
.mb-foot__legal:hover { color: var(--mb-text-mute); }

/* Desktop: ampliar a 4 columnas como en prototipo desktop */
@media (min-width: 768px) {
    .mb-foot__inner {
        padding: 40px 40px 36px;
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
        grid-template-areas:
            "logo    cols1 cols2 visit"
            "bajada  cols1 cols2 visit"
            "social  bar   bar   bar";
        gap: 28px 36px;
        max-width: 1200px;
        margin: 0 auto;
    }
    .mb-foot__logo    { grid-area: logo; }
    .mb-foot__bajada  { grid-area: bajada; max-width: none; margin-top: 0; }
    .mb-foot__cols    {
        display: contents;
    }
    .mb-foot__cols > :nth-child(1) { grid-area: cols1; }
    .mb-foot__cols > :nth-child(2) { grid-area: cols2; }
    .mb-foot__visit   { grid-area: visit; margin-top: 0; }
    .mb-foot__social  { grid-area: social; margin-top: 0; align-self: end; }
    .mb-foot__bar     { grid-area: bar; margin-top: 0; padding-top: 18px; }
}

/* Mapa Google embed (sigue como utility por si lo usan en otro lado) */
.mb-footer-mapa {
    border-radius: var(--mb-r-lg);
    overflow: hidden;
    border: 1px solid var(--mb-line);
    background: var(--mb-bg-2);
    margin-top: 24px;
}
.mb-footer-mapa iframe {
    border: 0;
    display: block;
    filter: grayscale(0.6) brightness(0.85);
}
.mb-footer-mapa__cta {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(20,16,14,0.85);
    color: var(--mb-text);
    backdrop-filter: blur(4px);
    padding: 8px 14px;
    border-radius: var(--mb-r-md);
    border: 1px solid var(--mb-line);
}

/* ════════════════════════════════════════════════════════════
   ═══  /F3.D                                              ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  REDISEÑO 2026 — F3.E                               ═══
   ═══  Barra inferior fija · Menú lateral · Amenidades ·  ═══
   ═══  En YouTube · Contacto                              ═══
   ════════════════════════════════════════════════════════════ */

/* ── Barra inferior fija (global) ────────────────────────── */
.mb-bnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(20,16,14,0.92);
    border-top: 1px solid var(--mb-line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--mb-font-sans);
}
.mb-bnav__item {
    background: transparent;
    border: 0;
    color: var(--mb-text-mute);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: var(--mb-r-md);
    min-height: var(--mb-tap-min);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    font-family: var(--mb-font-sans);
}
.mb-bnav__item:hover,
.mb-bnav__item:focus-visible {
    color: var(--mb-text);
    outline: none;
}
.mb-bnav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    position: relative;
}
.mb-bnav__icon svg { display: block; }
.mb-bnav__lbl {
    font-size: 10.5px;
    letter-spacing: 0.03em;
    font-weight: 500;
    line-height: 1;
}
/* Item primario "Boletos" — destacado en rojo */
.mb-bnav__item--primario {
    color: var(--mb-text);
}
.mb-bnav__item--primario .mb-bnav__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--mb-r-pill);
    background: var(--mb-red);
    color: #fff;
    box-shadow: 0 4px 14px var(--mb-red-shadow);
    transform: translateY(-6px);
}
.mb-bnav__item--primario:hover .mb-bnav__icon { background: var(--mb-red-bright); }

/* Toggle de los dos iconos del botón menú (menú ↔ ×) */
.mb-bnav__menu-btn .mb-bnav__icon-close { display: none; }
.mb-bnav__menu-btn[aria-expanded="true"] .mb-bnav__icon-menu { display: none; }
.mb-bnav__menu-btn[aria-expanded="true"] .mb-bnav__icon-close { display: block; }
.mb-bnav__menu-btn[aria-expanded="true"] { color: var(--mb-text); }

/* Desktop: barra fija sigue, pero más estrecha y centrada */
@media (min-width: 768px) {
    /* En escritorio manda el nav superior (header): se oculta el dock flotante
       móvil, que se veía redundante y flotando sobre el contenido. (17 jul 2026) */
    .mb-bnav { display: none !important; }
    .mb-mhead { display: none !important; }
}

/* Compensar el espacio para que la barra no tape el contenido (sólo móvil,
   donde el dock existe). */
body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
    body { padding-bottom: 0; }
}

/* ── Panel lateral del menú hamburguesa ──────────────────── */
.mb-side {
    position: fixed;
    inset: 0;
    z-index: 990;
}
.mb-side[hidden] { display: none; }
.mb-side__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,8,7,0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s ease;
}
.mb-side.is-open .mb-side__overlay { opacity: 1; }

.mb-side__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(86%, 360px);
    background: var(--mb-bg-2);
    border-left: 1px solid var(--mb-line);
    box-shadow: -16px 0 40px rgba(0,0,0,0.5);
    padding: 24px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    transform: translateX(105%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-family: var(--mb-font-sans);
}
.mb-side.is-open .mb-side__panel { transform: translateX(0); }

.mb-side__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mb-line);
}
.mb-side__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: var(--mb-fs-mono);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
}
.mb-side__close {
    width: 36px; height: 36px;
    border-radius: var(--mb-r-pill);
    background: rgba(245,238,232,0.06);
    border: 1px solid var(--mb-line);
    color: var(--mb-text-mute);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s ease, background .15s ease;
}
.mb-side__close:hover {
    color: var(--mb-text);
    background: rgba(245,238,232,0.10);
}

.mb-side__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mb-side__list a {
    display: block;
    padding: 14px 8px;
    color: var(--mb-text);
    text-decoration: none;
    font-family: var(--mb-font-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    border-bottom: 1px solid var(--mb-line-soft);
    transition: color .15s ease, padding-left .15s ease;
}
.mb-side__list a:hover {
    color: var(--mb-red-bright);
    padding-left: 14px;
}

.mb-side__redes {
    display: flex; gap: 10px;
    margin-top: auto;
}
.mb-side__redes a {
    width: 40px; height: 40px;
    border-radius: var(--mb-r-pill);
    background: rgba(245,238,232,0.04);
    border: 1px solid var(--mb-line);
    color: var(--mb-text-mute);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.mb-side__redes a:hover {
    color: var(--mb-red-bright);
    border-color: var(--mb-red);
    transform: translateY(-1px);
}

body.mb-side-locked { overflow: hidden; }

/* ── Amenidades — prototipo: grid 2col, check rojo en cuadro dim ── */
.mb-amenidades {
    background: var(--mb-bg);
    padding: 34px 0 0;
}
.mb-amenidades__head {
    padding: 0 20px;
    margin: 0 0 14px;
}
.mb-amenidades__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 27px !important;
    line-height: 1 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}
.mb-amenidades__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    list-style: none;
    margin: 0;
    padding: 0 20px;
}
.mb-amen-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.mb-amen-item::before { content: none; }
.mb-amen-item__check {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--mb-red-dim);
    color: var(--mb-red-bright);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
}
.mb-amen-item__lbl {
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
    font-weight: 400;
    color: var(--mb-text);
    line-height: 1.3;
}

/* ── En YouTube — prototipo: card vertical (media 172 + body) ── */
.mb-yt {
    background: var(--mb-bg);
    padding: 34px 0 0;
}

/* Header (kicker + título + acción "Suscríbete →") */
.mb-yt-head {
    padding: 0 20px;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mb-yt-head__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
}
.mb-yt-head__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.mb-yt-head__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 27px !important;
    line-height: 1 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}
.mb-yt-head__accion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mb-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--mb-text-mute);
    text-decoration: none;
}
.mb-yt-head__accion:hover { color: var(--mb-text); }
.mb-yt-head__accion svg { flex-shrink: 0; }

/* Card */
.mb-yt-card {
    margin: 0 20px;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: 18px;
    overflow: hidden;
}

/* Media: 172px alto con bg-3 + diagonal stripes + play centrado */
.mb-yt-media {
    display: block;
    position: relative;
    height: 172px;
    background-color: var(--mb-bg-3);
    background-image: repeating-linear-gradient(135deg, rgba(244,236,231,0.07) 0 1px, transparent 1px 11px);
    border-bottom: 1px solid var(--mb-line);
    text-decoration: none;
    overflow: hidden;
}
/* Miniatura del video, si hay uno configurado. Si no carga, queda el rayado. */
.mb-yt-media__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.72);
}
.mb-yt-media__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: var(--mb-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(224,36,27,0.42);
    transition: background 0.15s ease, transform 0.15s ease;
}
.mb-yt-media:hover .mb-yt-media__play {
    background: var(--mb-red-bright);
    transform: translate(-50%, -50%) scale(1.05);
}
.mb-yt-media__play svg {
    margin-left: 3px;
}
.mb-yt-media__pill {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-family: var(--mb-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mb-text-faint);
    border: 1px solid var(--mb-line);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(20,16,14,0.5);
    line-height: 1;
}

/* Body */
.mb-yt-body {
    padding: 16px 18px 18px;
}
.mb-yt-body__texto {
    margin: 0 0 14px;
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mb-text-mute);
}
.mb-yt-body__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 20px;
    background: var(--mb-red);
    color: #fff;
    border: none;
    border-radius: 13px;
    font-family: var(--mb-font-sans);
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(224,36,27,0.3);
    transition: background 0.15s ease, transform 0.1s ease;
    line-height: 1;
}
.mb-yt-body__cta:hover {
    background: var(--mb-red-bright);
    transform: translateY(-1px);
}
.mb-yt-body__cta svg { flex-shrink: 0; }

/* ── Contacto — prototipo: header + banda roja 86px + grid 3 ── */
.mb-contacto {
    background: var(--mb-bg);
    padding: 34px 0 18px;
    max-width: none;
    margin: 0;
}

.mb-contacto__head {
    padding: 0 20px;
    margin: 0 0 14px;
}
.mb-contacto__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 27px !important;
    line-height: 1 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

/* Banda roja 86px */
.mb-contacto__banda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 86px;
    margin: 0 20px 12px;
    padding: 0 20px;
    background: var(--mb-red);
    color: #fff;
    border-radius: 18px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(224,36,27,0.30);
    transition: background .15s ease, transform .1s ease;
}
.mb-contacto__banda:hover {
    background: var(--mb-red-bright);
    transform: translateY(-1px);
}

.mb-contacto__banda-izq {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.mb-contacto__banda-icon {
    color: #fff;
    flex-shrink: 0;
}
.mb-contacto__banda-textos {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mb-contacto__banda-eyebrow {
    display: block;
    font-family: var(--mb-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.80);
    line-height: 1;
}
.mb-contacto__banda-lbl {
    display: block;
    font-family: var(--mb-font-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.05;
    color: #fff;
}

.mb-contacto__banda-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    color: #fff;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.mb-contacto__banda:hover .mb-contacto__banda-flecha {
    background: transparent;
    transform: translateX(3px);
}

/* Grid 3-col de acciones */
.mb-contacto__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 0 20px;
}
.mb-contacto__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 64px;
    padding: 0;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: 13px;
    color: var(--mb-text);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.mb-contacto__btn:hover {
    background: var(--mb-bg-3);
    border-color: rgba(245,238,232,0.18);
}
.mb-contacto__btn-icon {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    color: var(--mb-sand-real);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mb-contacto__btn-icon svg { display: block; width: 21px; height: 21px; }
.mb-contacto__btn-lbl {
    font-family: var(--mb-font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--mb-text);
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   ═══  /F3.E                                              ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  F4 — Cartelera completa (rediseño 2026)            ═══
   ════════════════════════════════════════════════════════════
   Convierte la cartelera de cards horizontales a grid 2 col
   con media vertical 9:16, tag arriba-izq, footer con precio
   + flecha. Hereda tokens del :root global.
*/

.mb-cartelera-v2 {
    background: var(--mb-bg) !important;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem) !important;
}

.mb-cv2-encabezado {
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem) !important;
    max-width: 920px !important;
}

.mb-cv2-eyebrow {
    font-family: var(--mb-font-mono) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--mb-text-2) !important;
    text-transform: uppercase !important;
}

.mb-cv2-headline {
    font-family: var(--mb-font-serif) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    color: var(--mb-text) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.05 !important;
    margin: 0.25rem 0 0 !important;
}

/* Grid 2 cols, gap 14px */
.mb-cv2-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    max-width: 920px !important;
    margin: 0 auto !important;
}

/* ── Card vertical ── */
.mb-cv2-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: var(--mb-bg-2) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-md, 10px) !important;
    overflow: hidden !important;
    zoom: 1 !important;
    transition: border-color 0.25s ease, transform 0.25s ease;
    position: relative;
    text-decoration: none !important;
    color: inherit !important;
}

.mb-cv2-card:hover {
    border-color: rgba(245,238,232,0.18) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}

/* ── Media 9:16 ── */
.mb-cv2-card .mb-cv2-media {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    flex-shrink: 0 !important;
    background: #0a0807 !important;
    position: relative;
    overflow: hidden;
}

.mb-cv2-card .mb-cv2-media img,
.mb-cv2-card .mb-cv2-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Placeholder centrado */
.mb-cv2-card .mb-cv2-media-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: rgba(245,238,232,0.12);
}

/* Play overlay (delineado, sólo si la card está activa) */
.mb-cv2-card .mb-cv2-media::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid rgba(245,238,232,0.85);
    background: rgba(13,11,10,0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23f5eee8'><path d='M8 5v14l11-7z'/></svg>");
    background-repeat: no-repeat;
    background-position: 54% 50%;
    pointer-events: none;
    opacity: 0.92;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mb-cv2-card:hover .mb-cv2-media::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

/* Sin botón de play en NINGUNA card (Paulo, 17 jul 2026: "desaparece el
   botón de play en todo, a menos que te lo indique"). Se dejan las
   definiciones del ::after arriba intactas; para reactivarlo, borrar este
   override. Aplica a cartelera-v2 (video o imagen) y al carrusel horizontal. */
.mb-cv2-card .mb-cv2-media::after,
.mb-carrusel-h__imagen::after {
    display: none !important;
}

/* Tag categoría absolute arriba-izq sobre media */
.mb-cv2-card .mb-cv2-tags {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 2;
    justify-content: flex-start !important;
    gap: 4px !important;
}

.mb-cv2-card .mb-cv2-tag {
    font-family: var(--mb-font-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    padding: 4px 9px !important;
    border-radius: var(--mb-r-pill, 999px) !important;
    background: rgba(13,11,10,0.78) !important;
    color: var(--mb-text) !important;
    border: 1px solid rgba(245,238,232,0.18) !important;
    backdrop-filter: blur(6px);
}

.mb-cv2-card .mb-cv2-tag--clas {
    background: rgba(13,11,10,0.78) !important;
    color: var(--mb-gold, #C9A84C) !important;
    border-color: rgba(201,168,76,0.35) !important;
}

.mb-cv2-card .mb-cv2-tag--disc {
    background: rgba(13,11,10,0.78) !important;
    color: var(--mb-text) !important;
}

/* ── Info column ── */
.mb-cv2-card .mb-cv2-info {
    padding: 12px 14px 14px !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
}

/* Mover los tags absolutos no necesita gap propio */
.mb-cv2-card .mb-cv2-info > .mb-cv2-tags {
    display: none !important;
}

/* Re-mostrar el contenedor que sí está sobre la media */
.mb-cv2-card > .mb-cv2-tags,
.mb-cv2-card .mb-cv2-media > .mb-cv2-tags {
    display: flex !important;
}

/* Título serif 17.5px */
.mb-cv2-card .mb-cv2-titulo {
    font-family: var(--mb-font-serif) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 17.5px !important;
    line-height: 1.2 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    text-align: left !important;
    letter-spacing: -0.005em !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ocultar subtítulo / sinopsis / detalles en card de cartelera */
.mb-cv2-card .mb-cv2-subtitulo,
.mb-cv2-card .mb-cv2-sinopsis,
.mb-cv2-card .mb-cv2-detalles {
    display: none !important;
}

/* Footer: fecha+precio izq, flecha der */
.mb-cv2-card .mb-cv2-footer {
    border-top: none !important;
    padding-top: 4px !important;
    margin-top: 2px !important;
    gap: 8px !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
}

.mb-cv2-card .mb-cv2-meta {
    flex: 1 1 auto;
    gap: 2px !important;
}

.mb-cv2-card .mb-cv2-fecha {
    display: inline-flex !important;
    font-family: var(--mb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    color: var(--mb-text-2) !important;
    text-transform: uppercase;
}

.mb-cv2-card .mb-cv2-fecha svg { display: none; }

.mb-cv2-card .mb-cv2-precio {
    font-family: var(--mb-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mb-text) !important;
    letter-spacing: 0 !important;
}

/* Flecha minimalista (prototipo: solo icono, no pill) */
.mb-cv2-card .mb-cv2-btn {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--mb-red-bright) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease;
    text-decoration: none !important;
}

.mb-cv2-card .mb-cv2-btn::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5362B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    display: block;
}

.mb-cv2-card:hover .mb-cv2-btn {
    transform: translateX(3px);
}

/* ── Estados: agotada / finalizada ── */
.mb-cv2-card.is-agotada .mb-cv2-media::before,
.mb-cv2-card.is-finalizada .mb-cv2-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13,11,10,0.55);
    z-index: 1;
}

.mb-cv2-card.is-agotada .mb-cv2-media::after,
.mb-cv2-card.is-finalizada .mb-cv2-media::after {
    display: none;
}

.mb-cv2-card.is-agotada .mb-cv2-media,
.mb-cv2-card.is-finalizada .mb-cv2-media {
    position: relative;
}

/* Pill de estado sobre media (centrado) */
.mb-cv2-card.is-agotada .mb-cv2-media::after,
.mb-cv2-card.is-finalizada .mb-cv2-media::after {
    content: 'AGOTADA';
    display: flex !important;
    width: auto;
    height: auto;
    padding: 6px 14px;
    border-radius: var(--mb-r-pill, 999px);
    background: rgba(13,11,10,0.85) !important;
    border: 1px solid rgba(245,238,232,0.30);
    background-image: none;
    font-family: var(--mb-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--mb-text);
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
}

.mb-cv2-card.is-finalizada .mb-cv2-media::after {
    content: 'FINALIZADA';
}

.mb-cv2-card.is-agotada .mb-cv2-precio,
.mb-cv2-card.is-finalizada .mb-cv2-precio {
    color: var(--mb-text-3, rgba(245,238,232,0.45)) !important;
}

.mb-cv2-card.is-agotada .mb-cv2-titulo,
.mb-cv2-card.is-finalizada .mb-cv2-titulo {
    color: rgba(245,238,232,0.75) !important;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    /* Full-bleed: la Cartelera usa todo el ancho del teléfono (el tema mete 48px
       de padding a cada lado); así las tarjetas/videos crecen. (Paulo, 23 jul 2026) */
    .mb-cartelera-v2 {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .mb-cv2-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        max-width: none !important;
    }
    .mb-cv2-card .mb-cv2-titulo { font-size: 17px !important; line-height: 1.15 !important; word-break: break-word; }
    .mb-cv2-card .mb-cv2-info { padding: 8px 9px 10px !important; }
    .mb-cv2-card .mb-cv2-subtitulo,
    .mb-cv2-card .mb-cv2-sinopsis,
    .mb-cv2-card .mb-cv2-detalles { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   ═══  /F4                                                ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  F5 — Detalle de evento (rediseño 2026)             ═══
   ════════════════════════════════════════════════════════════
   Re-estiliza single-evento.html (wp:cover hero) + el shortcode
   [mb_evento_detalle] (sinopsis / créditos / fechas / CTA).
   Solo capa visual — no se toca la plantilla ni el shortcode.
*/

/* ── Hero 16:9 (prototipo variante A) ── */
.single-evento .wp-block-cover.alignfull,
body.single-evento .wp-block-cover.alignfull {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    background-color: var(--mb-bg) !important;
    position: relative;
}
@media (min-width: 900px) {
    .single-evento .wp-block-cover.alignfull {
        aspect-ratio: auto;
        min-height: 60vh !important;
        max-height: 70vh;
    }
}

.single-evento .wp-block-cover.alignfull .wp-block-cover__background {
    background: linear-gradient(180deg,
        rgba(13,11,10,0.10) 0%,
        rgba(13,11,10,0.35) 60%,
        rgba(13,11,10,0.92) 100%) !important;
    opacity: 1 !important;
}

.single-evento .wp-block-cover.alignfull .wp-block-cover__inner-container {
    padding: 0 20px 20px;
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    align-self: flex-end;
}

/* Eyebrow (post-terms categoría) */
.single-evento .mb-hero__tag,
.single-evento .wp-block-post-terms.mb-hero__tag {
    font-family: var(--mb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--mb-text-2) !important;
    display: block;
    text-align: center;
    margin-bottom: 0.6rem !important;
}

.single-evento .mb-hero__tag a,
.single-evento .wp-block-post-terms.mb-hero__tag a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Título — serif grande */
.single-evento .wp-block-cover .wp-block-post-title {
    font-family: var(--mb-font-serif) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: clamp(2.6rem, 7vw, 5.4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ── Main del detalle ── */
.single-evento main.wp-block-group.alignfull {
    background: var(--mb-bg) !important;
}

.single-evento .mb-evento-detalle {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.2rem);
    max-width: 760px;
    margin: 0 auto;
}

/* Eyebrow de cada sección */
.single-evento .mb-evento-seccion-titulo {
    font-family: var(--mb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--mb-text-2) !important;
    margin: 0 0 0.85rem !important;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--mb-line);
}

/* Cuerpo de texto (sinopsis + créditos) */
.single-evento .mb-evento-sinopsis p,
.single-evento .mb-evento-creditos-texto {
    font-family: var(--mb-font-sans) !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
}

.single-evento .mb-evento-creditos-texto {
    color: var(--mb-text-2) !important;
    font-size: 14px !important;
}

/* ── Grid de fechas ── */
.single-evento .mb-evento-fechas-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
    gap: 10px !important;
}

.single-evento .mb-fecha-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    background: var(--mb-bg-2) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-md, 10px) !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
    min-width: 0 !important;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.single-evento .mb-fecha-card:hover {
    border-color: rgba(245,238,232,0.30) !important;
    background: var(--mb-bg-3) !important;
    transform: translateY(-2px);
}

.single-evento .mb-fecha-card__dia {
    font-family: var(--mb-font-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--mb-text-2) !important;
}

.single-evento .mb-fecha-card__num {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-size: 36px !important;
    line-height: 1 !important;
    color: var(--mb-text) !important;
    letter-spacing: -0.02em !important;
    margin: 2px 0;
}

.single-evento .mb-fecha-card__mes {
    font-family: var(--mb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--mb-text-2) !important;
}

.single-evento .mb-fecha-card__hora {
    font-family: var(--mb-font-mono) !important;
    font-size: 11px !important;
    color: var(--mb-text-2) !important;
    margin-top: 6px !important;
    letter-spacing: 0.08em;
}

.single-evento .mb-fecha-card__precio {
    font-family: var(--mb-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mb-text) !important;
    margin-top: 8px !important;
    padding-top: 8px;
    border-top: 1px solid var(--mb-line);
    width: 100%;
}

.single-evento .mb-fecha-card__precio--gratis {
    color: var(--mb-gold, #C9A84C) !important;
}

/* Sin funciones */
.single-evento .mb-sin-funciones {
    font-family: var(--mb-font-sans) !important;
    font-size: 14px !important;
    color: var(--mb-text-2) !important;
    padding: 1.25rem 1.5rem !important;
    background: var(--mb-bg-2) !important;
    border: 1px solid var(--mb-line) !important;
    border-radius: var(--mb-r-md, 10px) !important;
    margin: 0 !important;
}

/* ── CTA STICKY al fondo del viewport (prototipo ActionBar) ── */
.single-evento .mb-evento-cta-fija {
    position: sticky !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 20 !important;
    padding: 14px 18px 18px !important;
    margin: 0 -20px -20px !important;
    border-top: 1px solid var(--mb-line) !important;
    background: rgba(20,16,14,0.90) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex !important;
    justify-content: center;
}

.single-evento .mb-evento-cta-fija .mb-btn,
.single-evento .mb-evento-cta-fija .mb-btn--grande {
    font-family: var(--mb-font-sans) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: var(--mb-red) !important;
    color: #fff !important;
    height: 58px !important;
    padding: 0 24px !important;
    border-radius: 13px !important;
    border: none !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.1s ease;
    width: 100%;
    max-width: 480px;
    text-align: center;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(224,36,27,0.32) !important;
}

.single-evento .mb-evento-cta-fija .mb-btn:hover {
    background: var(--mb-red-bright) !important;
    transform: translateY(-1px);
}

/* Padding-bottom para que CTA sticky no tape contenido */
.single-evento .mb-evento-detalle {
    padding-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 540px) {
    .single-evento .wp-block-cover.alignfull {
        min-height: 52vh !important;
    }
    .single-evento .mb-evento-fechas-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
    }
    .single-evento .mb-fecha-card__num { font-size: 30px !important; }
}

/* ════════════════════════════════════════════════════════════
   ═══  /F5                                                ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  F6 — Variantes por tipo (reservación + gratuito)   ═══
   ════════════════════════════════════════════════════════════
   1) Re-define .mb-btn--{primario,reserva,libre,outline} con
      tokens nuevos (mb-red, mb-gold, mb-text…), override del
      sistema legacy (--mb-rojo/--mb-dorado).
   2) Variantes visuales para cards de cartelera según tipo,
      usando :has() para detectar el botón interno.
   3) Estados visuales para cards del carrusel horizontal
      (que ya traen .mb-carrusel-h__card--reservacion etc.).
*/

/* ── F6.1 — Botones globales con tokens nuevos ── */
.mb-btn {
    font-family: var(--mb-font-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    padding: 11px 22px !important;
    border-radius: var(--mb-r-pill, 999px) !important;
    border: 1px solid transparent !important;
    line-height: 1 !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mb-btn--primario {
    background: var(--mb-red, #C8302E) !important;
    color: var(--mb-text, #f5eee8) !important;
    border-color: var(--mb-red, #C8302E) !important;
}
.mb-btn--primario:hover {
    background: var(--mb-red-2, #A82624) !important;
    border-color: var(--mb-red-2, #A82624) !important;
    transform: translateY(-1px);
}

.mb-btn--reserva {
    background: var(--mb-gold, #C9A84C) !important;
    color: var(--mb-bg, #0d0b0a) !important;
    border-color: var(--mb-gold, #C9A84C) !important;
}
.mb-btn--reserva:hover {
    background: var(--mb-gold-2, #B59138) !important;
    border-color: var(--mb-gold-2, #B59138) !important;
    transform: translateY(-1px);
}

.mb-btn--libre {
    background: transparent !important;
    color: var(--mb-text, #f5eee8) !important;
    border-color: rgba(245,238,232,0.60) !important;
}
.mb-btn--libre:hover {
    background: var(--mb-text, #f5eee8) !important;
    color: var(--mb-bg, #0d0b0a) !important;
    border-color: var(--mb-text, #f5eee8) !important;
}

.mb-btn--outline {
    background: transparent !important;
    color: var(--mb-text, #f5eee8) !important;
    border-color: rgba(245,238,232,0.40) !important;
}
.mb-btn--outline:hover {
    background: rgba(245,238,232,0.08) !important;
    border-color: rgba(245,238,232,0.90) !important;
}

.mb-btn--grande {
    padding: 14px 32px !important;
    font-size: 13.5px !important;
}

/* ── F6.2 — Cartelera card por tipo (vía :has del btn interno) ── */
/* RESERVACIÓN — acento dorado */
.mb-cv2-card:has(.mb-btn--reserva) {
    border-color: rgba(201,168,76,0.22) !important;
}
.mb-cv2-card:has(.mb-btn--reserva):hover {
    border-color: rgba(201,168,76,0.55) !important;
}
.mb-cv2-card:has(.mb-btn--reserva) .mb-cv2-precio {
    color: var(--mb-sand-real) !important;
}
.mb-cv2-card:has(.mb-btn--reserva) .mb-cv2-btn::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A98C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") !important;
}

/* GRATUITO — acento mute */
.mb-cv2-card:has(.mb-btn--libre) .mb-cv2-precio {
    color: var(--mb-text) !important;
    font-style: italic;
}
.mb-cv2-card:has(.mb-btn--libre) .mb-cv2-btn::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EEE8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") !important;
}

/* ── F6.3 — Carrusel horizontal: pill de tipo en variantes ── */
.mb-carrusel-h__card--reservacion .mb-carrusel-h__nombre,
.mb-carrusel-h__card--gratuito .mb-carrusel-h__nombre {
    position: relative;
}
.mb-carrusel-h__card--reservacion .mb-carrusel-h__info::after {
    content: 'RESERVACIÓN';
    display: inline-block;
    font-family: var(--mb-font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--mb-gold, #C9A84C);
    background: rgba(13,11,10,0.55);
    padding: 3px 8px;
    border-radius: var(--mb-r-pill, 999px);
    border: 1px solid rgba(201,168,76,0.45);
    align-self: flex-start;
    margin-top: 4px;
}
.mb-carrusel-h__card--gratuito .mb-carrusel-h__info::after {
    content: 'ENTRADA LIBRE';
    display: inline-block;
    font-family: var(--mb-font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--mb-text, #f5eee8);
    background: rgba(13,11,10,0.55);
    padding: 3px 8px;
    border-radius: var(--mb-r-pill, 999px);
    border: 1px solid rgba(245,238,232,0.50);
    align-self: flex-start;
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   ═══  /F6                                                ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  F7 — Móvil: header oculto, mini-header + barra     ═══
   ════════════════════════════════════════════════════════════
   En ≤767px se retira el header WP (alto, oscuro) y se usa
   .mb-mhead (mini flotante con logo + redes) arriba, y
   .mb-bnav (5 accesos) abajo. El menú completo queda en el
   botón "Menú" de la barra inferior.
*/

/* ── Mini-header móvil (oculto en desktop) ── */
.mb-mhead { display: none; }

@media (max-width: 767px) {
    /* Ocultar el header WP estándar */
    body > header.wp-block-template-part,
    .wp-site-blocks > header.wp-block-template-part,
    header.wp-block-group.alignfull {
        display: none !important;
    }

    /* Mostrar mini-header flotante */
    .mb-mhead {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 950;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        background: linear-gradient(180deg,
            rgba(13,11,10,0.72) 0%,
            rgba(13,11,10,0.45) 60%,
            rgba(13,11,10,0)   100%);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .mb-mhead__logo {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        flex-shrink: 0;
    }
    .mb-mhead__logo img {
        height: 32px;
        width: auto;
        display: block;
    }

    .mb-mhead__social {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mb-mhead__social a {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--mb-r-pill, 999px);
        background: rgba(245,238,232,0.10);
        border: 1px solid rgba(245,238,232,0.14);
        color: var(--mb-text);
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .mb-mhead__social a:active {
        background: rgba(245,238,232,0.18);
        transform: scale(0.94);
    }
}

/* ════════════════════════════════════════════════════════════
   ═══  /F7                                                ═══
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ═══  CARTELERA HOME (mb-vevento-*) — TARJETAS PAREJAS     ═══
   ═══  + AIRE INTERIOR                                       ═══
   ════════════════════════════════════════════════════════════
   Va al FINAL a propósito: las reglas base están en ~450 y los overrides
   del rediseño en ~1042. Aquí nada las puede pisar.

   1) ALTURAS DISPARES: el markup omite .mb-vevento-fecha cuando la obra no
      tiene fecha próxima, y .mb-vevento-item traía `align-self: flex-start`,
      así que cada tarjeta medía lo de su contenido: la que sí tiene fecha
      crecía y el pie "Boletos →" quedaba a distinta altura.
      Solución: estirar todas + anclar el pie abajo. Cubre además los títulos
      de 2 líneas y los subtítulos de largo distinto, no sólo la fecha.

   2) TEXTO PEGADO AL BORDE: en ~1042 .mb-vevento-item recibe fondo, borde y
      border-radius (es la "postal"), pero NUNCA padding. El título de 21px
      chocaba contra la línea de la tarjeta. Se le da aire al texto sin tocar
      el video (que es position:absolute; inset:0 y llena el recuadro). */

.mb-vevento-track {
    align-items: stretch;
}

.mb-vevento-item {
    align-self: stretch;        /* antes flex-start → alturas dispares */
    padding-bottom: 14px;
}

/* El video conserva su proporción; no se aplasta al estirar la tarjeta */
.mb-vevento-panel {
    flex: 0 0 auto;
}

/* Aire lateral sólo para el texto: la postal respira */
.mb-vevento-nombre,
.mb-vevento-fecha,
.mb-vevento-pie {
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}

/* Título un punto más chico: 21px era demasiado para una tarjeta de 168px */
.mb-vevento-nombre {
    font-size: 18px;
    line-height: 1.12;
    margin: 12px 0 5px;
}

.mb-vevento-fecha {
    font-size: 10px;
    letter-spacing: 0.1em;
}

/* Pie pegado abajo en TODAS las tarjetas → los "Boletos →" alinean */
.mb-vevento-pie {
    margin-top: auto;
    padding-top: 10px;   /* margin-top:auto colapsaría el margen original a 0 */
}

/* ══════════════════════════════════════════════════════════════════════
   Página /club-mentidero — el Club en construcción (16 jul 2026)
   La pinta [mb_club_pagina] (includes/club-lista.php).
   El CTA reusa #mb-club-cta, así que hereda el botón rojo de la sección
   del home; aquí no se re-estiliza.
   ══════════════════════════════════════════════════════════════════════ */

.mb-clubp {
    background: var(--mb-bg);
    padding: 28px 0 40px;
    color: var(--mb-text);
}

/* En móvil el header .mb-mhead es position:fixed (z-950) y tapa el inicio del
   contenido: está pensado para flotar sobre el hero del home, que es una imagen
   a sangre. Una página de texto como ésta tiene que librarlo a mano. Arriba de
   767px el header vuelve a ser estático y no hace falta. */
@media (max-width: 767px) {
    .mb-clubp {
        padding-top: calc(76px + env(safe-area-inset-top, 0px));
    }
}

/* ── Encabezado ── */
.mb-clubp__head {
    padding: 0 20px;
    margin: 0 0 20px;
}
.mb-clubp__estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
    border: 1px solid var(--mb-line);
    border-radius: 999px;
    padding: 5px 11px 5px 9px;
    line-height: 1;
    margin: 0 0 12px;
}
.mb-clubp__estado-punto {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--mb-sand-real);
    flex-shrink: 0;
    animation: mb-clubp-latido 2s ease-in-out infinite;
}
@keyframes mb-clubp-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .mb-clubp__estado-punto { animation: none; }
}
.mb-clubp__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 34px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    color: var(--mb-text) !important;
    margin: 0 0 10px !important;
}
.mb-clubp__entrada {
    font-family: var(--mb-font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--mb-text-mute);
    margin: 0;
}

/* ── Aviso de "en construcción" ── */
.mb-clubp__aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 20px 30px;
    padding: 14px 16px;
    border-radius: 13px;
    background: var(--mb-red-dim);
    border: 1px solid rgba(224,36,27,0.35);
}
.mb-clubp__aviso svg {
    flex-shrink: 0;
    color: var(--mb-red-bright);
    margin-top: 1px;
}
.mb-clubp__aviso p {
    margin: 0;
    font-family: var(--mb-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mb-text-mute);
}
.mb-clubp__aviso strong {
    color: var(--mb-text);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

/* ── Lista de beneficios ── */
.mb-clubp__subtitulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 23px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    color: var(--mb-text) !important;
    margin: 0 20px 14px !important;
}
.mb-clubp__lista {
    list-style: none;
    margin: 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mb-clubp__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 16px;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: 14px;
}
.mb-clubp__num {
    font-family: var(--mb-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--mb-red-bright);
    flex-shrink: 0;
    line-height: 1.5;
}
.mb-clubp__item-txt { min-width: 0; }
.mb-clubp__item-titulo {
    font-family: var(--mb-font-sans) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    color: var(--mb-text) !important;
    margin: 0 0 4px !important;
    letter-spacing: 0 !important;
}
.mb-clubp__item-desc {
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mb-text-mute);
    margin: 0;
}
.mb-clubp__nota {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--mb-text-faint);
    margin: 12px 20px 0;
    line-height: 1.5;
}

/* ── Cierre + CTA ── */
.mb-clubp__cierre {
    margin: 32px 20px 0;
    padding: 24px 20px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(145deg, #3A1714 0%, #1E1714 55%);
    border: 1px solid rgba(224,36,27,0.35);
}
.mb-clubp__cierre-titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    color: var(--mb-text) !important;
    margin: 0 0 8px !important;
}
.mb-clubp__cierre-txt {
    font-family: var(--mb-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mb-text-mute);
    margin: 0 0 18px;
}
/* El CTA hereda height:50px de #mb-club-cta, así que el texto NO puede partirse
   en dos líneas: se sale de la caja. */
.mb-clubp__cta {
    white-space: nowrap;
}

/* Escritorio: la columna no debe estirarse a lo ancho de la pantalla */
@media (min-width: 768px) {
    .mb-clubp__head,
    .mb-clubp__aviso,
    .mb-clubp__lista,
    .mb-clubp__cierre {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }
    .mb-clubp__subtitulo,
    .mb-clubp__nota {
        max-width: 680px !important;
        margin-left: auto !important;    /* vence el !important de la regla base (si no, se sale a la izquierda) */
        margin-right: auto !important;
    }
    .mb-clubp__titulo { font-size: 42px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Compañía Teatral del Norte + Repertorio (17 jul 2026)
   Lo pinta [mb_ctn] (includes/repertorio.php). Tokens del bloque :root.
   El look es el de la web nueva (negro cálido + rojo), NO el morado del
   sitio viejo.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.mb-ctn-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end;
    background: var(--mb-bg-2); overflow: hidden; }
.mb-ctn-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) brightness(0.5); }
.mb-ctn-hero__velo { position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,16,14,.55) 0%, rgba(20,16,14,.2) 40%, var(--mb-bg) 100%); }
.mb-ctn-hero__cont { position: relative; z-index: 2; padding: 0 20px 30px; width: 100%; }
.mb-ctn-hero__logo { width: min(300px, 78%); height: auto; display: block; margin: 0 0 14px; }
.mb-ctn-hero__sub { font-family: var(--mb-font-sans); font-size: 14.5px; line-height: 1.5;
    color: var(--mb-text-mute); margin: 0; max-width: 34ch; }

/* ── Visión / Misión / Objetivos ── */
.mb-ctn-txt { padding: 30px 20px 8px; }
.mb-ctn-txt__eyebrow { font-family: var(--mb-font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--mb-sand-real); display: block; margin-bottom: 10px; }
.mb-ctn-txt__titulo { font-family: var(--mb-font-serif) !important; font-weight: 400 !important;
    font-style: normal !important; font-size: 28px !important; line-height: 1.05 !important;
    letter-spacing: 0 !important; color: var(--mb-text) !important; margin: 26px 0 10px !important; }
.mb-ctn-txt__eyebrow + .mb-ctn-txt__titulo { margin-top: 0 !important; }
.mb-ctn-txt__p { font-family: var(--mb-font-sans); font-size: 15px; line-height: 1.62;
    color: var(--mb-text-mute); margin: 0; }

.mb-ctn-obj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mb-ctn-obj__i { display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px;
    background: var(--mb-bg-2); border: 1px solid var(--mb-line); border-radius: 14px;
    font-family: var(--mb-font-sans); font-size: 14px; line-height: 1.55; color: var(--mb-text-mute); }
.mb-ctn-obj__n { font-family: var(--mb-font-mono); font-size: 11px; color: var(--mb-red-bright);
    flex-shrink: 0; line-height: 1.6; }
.mb-ctn-tray { margin: 22px 0 0; padding: 16px; border-radius: 13px; background: var(--mb-red-dim);
    border: 1px solid rgba(224,36,27,.3); font-family: var(--mb-font-sans); font-size: 14.5px;
    line-height: 1.55; color: var(--mb-text-mute); }
.mb-ctn-tray b { color: var(--mb-text); }

/* ── Repertorio: lista ── */
.mb-rep { padding: 34px 0 10px; }
.mb-rep__head { padding: 0 20px; margin-bottom: 16px; }
.mb-rep__eyebrow { font-family: var(--mb-font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--mb-sand-real); display: block; margin-bottom: 7px; }
.mb-rep__titulo { font-family: var(--mb-font-serif) !important; font-weight: 400 !important;
    font-style: normal !important; font-size: 32px !important; line-height: 1 !important;
    letter-spacing: 0 !important; color: var(--mb-text) !important; margin: 0 0 6px !important; }
.mb-rep__sub { font-family: var(--mb-font-sans); font-size: 14.5px; color: var(--mb-text-mute); margin: 0; }
.mb-rep__vacio { padding: 0 20px; color: var(--mb-text-faint); font-size: 14px; }

.mb-rep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px; }
.mb-rep-card { background: var(--mb-bg-2); border: 1px solid var(--mb-line); border-radius: 14px;
    overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
    transition: border-color .15s ease, transform .1s ease; }
.mb-rep-card:hover { border-color: rgba(224,36,27,.5); transform: translateY(-2px); }
.mb-rep-card__img { position: relative; aspect-ratio: 4/5; display: block;
    background-color: var(--mb-bg-3);
    background-image: repeating-linear-gradient(135deg, rgba(244,236,231,.07) 0 1px, transparent 1px 11px); }
.mb-rep-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-rep-card__col, .mb-rep-card__temp { position: absolute; top: 9px; font-family: var(--mb-font-mono);
    font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; }
.mb-rep-card__col { left: 9px; background: rgba(20,16,14,.78); border: 1px solid var(--mb-line);
    color: var(--mb-sand-real); }
.mb-rep-card__temp { right: 9px; background: var(--mb-red); color: #fff; font-weight: 500; }
.mb-rep-card__b { padding: 11px 12px 13px; }
.mb-rep-card__t { font-family: var(--mb-font-serif); font-size: 16.5px; line-height: 1.12;
    color: var(--mb-text); display: block; margin-bottom: 5px; }
.mb-rep-card__m { font-family: var(--mb-font-mono); font-size: 9.5px; letter-spacing: .08em;
    color: var(--mb-text-faint); text-transform: uppercase; line-height: 1.5; display: block; }

/* ── Repertorio: ficha ── */
.mb-repf__volver { display: inline-block; margin: 14px 20px 0; font-family: var(--mb-font-mono);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-text-mute);
    text-decoration: none; }
.mb-repf__volver:hover { color: var(--mb-text); }
.mb-repf__hero { height: 230px; margin: 12px 0 0; background: var(--mb-bg-3); overflow: hidden; }
.mb-repf__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-repf__cuerpo { padding: 18px 20px 40px; }
.mb-repf__eyebrow { font-family: var(--mb-font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--mb-sand-real); display: block; margin-bottom: 8px; }
.mb-repf__titulo { font-family: var(--mb-font-serif) !important; font-weight: 400 !important;
    font-style: normal !important; font-size: 31px !important; line-height: 1.02 !important;
    letter-spacing: 0 !important; color: var(--mb-text) !important; margin: 0 0 8px !important; }
.mb-repf__cred { font-family: var(--mb-font-sans); font-size: 13px; line-height: 1.5;
    color: var(--mb-sand-real); margin: 0 0 13px; }
.mb-repf__pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.mb-repf__pill { font-family: var(--mb-font-mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; border: 1px solid var(--mb-line); border-radius: 6px; padding: 5px 8px;
    color: var(--mb-text-mute); }

.mb-repf__temp { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 13px;
    margin: 0 0 18px; background: var(--mb-red-dim); border: 1px solid rgba(224,36,27,.4); text-decoration: none; }
.mb-repf__temp-pt { width: 8px; height: 8px; border-radius: 999px; background: var(--mb-red-bright);
    flex-shrink: 0; box-shadow: 0 0 0 4px rgba(224,36,27,.22); animation: mb-repf-lat 2s ease-in-out infinite; }
@keyframes mb-repf-lat { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .mb-repf__temp-pt { animation: none } }
.mb-repf__temp-t { flex: 1; min-width: 0; }
.mb-repf__temp-t b { display: block; font-family: var(--mb-font-mono); font-size: 9.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--mb-red-bright); margin-bottom: 3px; }
.mb-repf__temp-t span { font-family: var(--mb-font-sans); font-size: 13.5px; color: var(--mb-text); }
.mb-repf__temp-go { color: var(--mb-red-bright); font-size: 18px; flex-shrink: 0; }

.mb-repf__syn p { font-family: var(--mb-font-sans); font-size: 14.5px; line-height: 1.62;
    color: var(--mb-text-mute); margin: 0 0 10px; }
.mb-repf__ficha { border: 1px solid var(--mb-line); border-radius: 13px; overflow: hidden; margin: 16px 0 18px; }
.mb-repf__fr { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px;
    border-bottom: 1px solid var(--mb-line-soft); }
.mb-repf__fr:last-child { border-bottom: none; }
.mb-repf__fr span { font-family: var(--mb-font-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mb-text-faint); }
.mb-repf__fr b { font-family: var(--mb-font-sans); font-size: 13.5px; font-weight: 500;
    color: var(--mb-text); text-align: right; }
.mb-repf__prog { display: flex; align-items: center; justify-content: center; height: 50px;
    border: 1px solid var(--mb-line); border-radius: 13px; color: var(--mb-text); text-decoration: none;
    font-family: var(--mb-font-sans); font-weight: 700; font-size: 14.5px; }

.mb-repf__enc { margin: 18px 0 0; padding: 18px 16px; border-radius: 14px; background: var(--mb-bg-2);
    border: 1px solid var(--mb-line); }
.mb-repf__enc-k { font-family: var(--mb-font-mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--mb-sand-real); display: block; margin-bottom: 7px; }
.mb-repf__enc-t { font-family: var(--mb-font-serif) !important; font-weight: 400 !important;
    font-size: 21px !important; line-height: 1.15 !important; color: var(--mb-text) !important;
    margin: 0 0 7px !important; }
.mb-repf__enc-d { font-family: var(--mb-font-sans); font-size: 13.5px; line-height: 1.5;
    color: var(--mb-text-mute); margin: 0 0 13px; }
.mb-repf__enc-cta { display: flex; align-items: center; justify-content: center; height: 50px;
    background: var(--mb-red); color: #fff; border-radius: 13px; text-decoration: none;
    font-family: var(--mb-font-sans); font-weight: 700; font-size: 15px;
    box-shadow: 0 6px 18px rgba(224,36,27,.3); }

.mb-repf__h2 { font-family: var(--mb-font-serif) !important; font-weight: 400 !important;
    font-size: 22px !important; line-height: 1.1 !important; color: var(--mb-text) !important;
    margin: 26px 0 11px !important; }
.mb-repf__gal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mb-repf__gi { margin: 0; }
.mb-repf__gi img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.mb-repf__gi figcaption { font-family: var(--mb-font-mono); font-size: 9.5px; line-height: 1.4;
    color: var(--mb-text-faint); margin-top: 5px; }
.mb-repf__creditos p { font-family: var(--mb-font-sans); font-size: 13.5px; line-height: 1.6;
    color: var(--mb-text-mute); margin: 0 0 8px; white-space: pre-line; }

/* En móvil el header .mb-mhead es fixed y tapa el inicio; el hero es imagen a
   sangre, así que sólo la ficha (que empieza con texto) necesita librarlo. */
@media (max-width: 767px) {
    .mb-repf__volver { margin-top: calc(70px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 768px) {
    .mb-ctn-txt, .mb-rep__head, .mb-repf__cuerpo { max-width: 680px; margin-left: auto; margin-right: auto; }
    /* El logo/subtítulo del hero alineados con la columna de texto (misma
       caja de 680 centrada) → dejan de quedar pegados a la izquierda. (19 jul) */
    .mb-ctn-hero__cont { max-width: 680px; margin-left: auto; margin-right: auto; }
    .mb-rep__grid { max-width: 680px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); }
    .mb-ctn-hero__logo { width: min(420px, 60%); }
}

/* Repertorio — chips de filtro por género */
.mb-rep__chips { display: flex; gap: 7px; overflow-x: auto; padding: 0 20px 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mb-rep__chips::-webkit-scrollbar { display: none; }
.mb-rep__chip { flex: 0 0 auto; font-family: var(--mb-font-mono); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; padding: 8px 13px; border-radius: 999px;
    border: 1px solid var(--mb-line); background: transparent; color: var(--mb-text-mute);
    white-space: nowrap; cursor: pointer; min-height: 34px; }
.mb-rep__chip--on { background: var(--mb-red); border-color: var(--mb-red); color: #fff; }
.mb-rep-card[hidden] { display: none; }

/* Anclas del menú desplegable (#repertorio, #contacto).
   El header .mb-mhead es fixed en móvil y tapaba el rótulo de la sección al
   saltar: el navegador paraba en top:0, justo debajo de la barra.
   scroll-margin-top le dice dónde detenerse de verdad. */
#repertorio, #contacto {
    scroll-margin-top: 76px;
}
@media (min-width: 768px) {
    /* Arriba de 767px el header vuelve a ser estático y no tapa nada. */
    #repertorio, #contacto { scroll-margin-top: 16px; }
}

/* Hero de respaldo — la marca cuando no hay ningún evento visible (17 jul 2026).
   Lo pinta mb_hero_respaldo(). Reusa .mb-hero y su overlay; sólo cambia el
   contenido: logo centrado + frase, sin datos de evento ni botones. */
.mb-hero--respaldo {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* El velo del hero normal es un degradado que sólo oscurece ABAJO (ahí va el
   texto del evento). Aquí el logo va al CENTRO, donde ese velo es transparente
   → logo rojo sobre fondo rojo, ilegible. Este velo oscurece el centro. */
.mb-hero--respaldo .mb-hero__overlay {
    background: radial-gradient(ellipse at center,
        rgba(20,16,14,.74) 0%,
        rgba(20,16,14,.58) 55%,
        rgba(20,16,14,.88) 100%);
}
.mb-hero__content--respaldo {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
}
.mb-hero__logo-respaldo {
    width: min(300px, 74vw);
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.5));
}
.mb-hero__frase-respaldo {
    font-family: var(--mb-font-serif);
    font-size: 20px;
    line-height: 1.25;
    color: var(--mb-text);
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
    max-width: 22ch;
}
@media (min-width: 768px) {
    .mb-hero__logo-respaldo { width: min(420px, 40vw); }
    .mb-hero__frase-respaldo { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════
   ═══  PÁGINA DE CONTACTO  (/contacto)  — Paulo 17 jul 2026  ═══
   ══════════════════════════════════════════════════════════ */
.mb-contactop {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px 90px;
    color: var(--mb-text);
    font-family: var(--mb-font-sans);
}
@media (max-width: 767px) {
    /* Header móvil fixed (60px): que el título no arranque debajo. */
    .mb-contactop { padding-top: calc(76px + env(safe-area-inset-top)); }
}
.mb-contactop__head { margin-bottom: 26px; }
.mb-contactop__eyebrow {
    display: inline-block; font-family: var(--mb-font-mono);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mb-red); margin-bottom: 10px;
}
.mb-contactop__titulo {
    font-family: var(--mb-font-serif); font-size: clamp(32px, 9vw, 44px);
    line-height: 1.05; margin: 0 0 12px; color: var(--mb-text);
}
.mb-contactop__intro {
    font-size: 15.5px; line-height: 1.6; color: var(--mb-text-mute);
    margin: 0; max-width: 42ch;
}
.mb-contactop__cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.mb-contactop__card {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    border: 1px solid var(--mb-line); border-radius: var(--mb-r-lg);
    background: var(--mb-bg-2); color: var(--mb-text); text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.mb-contactop__card:hover { border-color: var(--mb-red); background: var(--mb-bg-3); transform: translateY(-2px); }
.mb-contactop__ic {
    flex-shrink: 0; width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(224,36,27,0.10); color: var(--mb-red);
}
.mb-contactop__card--wa .mb-contactop__ic { background: rgba(91,208,138,0.12); color: var(--mb-ok); }
.mb-contactop__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mb-contactop__txt b { font-size: 15.5px; font-weight: 600; }
.mb-contactop__txt small { font-size: 13px; color: var(--mb-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-contactop__fl { flex-shrink: 0; color: var(--mb-text-faint); font-size: 20px; }
.mb-contactop__card:hover .mb-contactop__fl { color: var(--mb-red); }
.mb-contactop__horario {
    padding: 16px 18px; border: 1px dashed var(--mb-line);
    border-radius: var(--mb-r-lg); margin-bottom: 28px;
}
.mb-contactop__horario-lbl {
    display: block; font-family: var(--mb-font-mono); font-size: 10.5px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-sand); margin-bottom: 6px;
}
.mb-contactop__horario-txt { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mb-text-mute); }
.mb-contactop__redes { text-align: center; }
.mb-contactop__redes-lbl {
    display: block; font-family: var(--mb-font-mono); font-size: 10.5px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-text-faint); margin-bottom: 12px;
}
.mb-contactop__redes-row { display: flex; justify-content: center; gap: 12px; }
.mb-contactop__redes-row a {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--mb-line); background: var(--mb-bg-2);
    color: var(--mb-text-mute); transition: color .18s ease, border-color .18s ease;
}
.mb-contactop__redes-row a:hover { color: var(--mb-red); border-color: var(--mb-red); }

/* ══════════════════════════════════════════════════════════
   ═══  LEGAL — landing /legal + documentos  — Paulo 17 jul 2026  ═══
   ══════════════════════════════════════════════════════════ */
/* Landing (casillas, mismo lenguaje que /contacto) */
.mb-legalp {
    max-width: 640px; margin: 0 auto; padding: 40px 20px 90px;
    color: var(--mb-text); font-family: var(--mb-font-sans);
}
@media (max-width: 767px) { .mb-legalp { padding-top: calc(76px + env(safe-area-inset-top)); } }
.mb-legalp__head { margin-bottom: 26px; }
.mb-legalp__eyebrow {
    display: inline-block; font-family: var(--mb-font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--mb-red); margin-bottom: 10px;
}
.mb-legalp__titulo {
    font-family: var(--mb-font-serif); font-size: clamp(30px, 8vw, 42px);
    line-height: 1.05; margin: 0 0 12px; color: var(--mb-text);
}
.mb-legalp__intro { font-size: 15.5px; line-height: 1.6; color: var(--mb-text-mute); margin: 0; }
.mb-legalp__cards { display: flex; flex-direction: column; gap: 12px; }
.mb-legalp__card {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    border: 1px solid var(--mb-line); border-radius: var(--mb-r-lg);
    background: var(--mb-bg-2); color: var(--mb-text); text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.mb-legalp__card:hover { border-color: var(--mb-red); background: var(--mb-bg-3); transform: translateY(-2px); }
.mb-legalp__ic {
    flex-shrink: 0; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(224,36,27,0.10); color: var(--mb-red);
}
.mb-legalp__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mb-legalp__txt b { font-size: 15px; font-weight: 600; }
.mb-legalp__txt small { font-size: 12.5px; color: var(--mb-text-mute); }
.mb-legalp__fl { flex-shrink: 0; color: var(--mb-text-faint); font-size: 20px; }
.mb-legalp__card:hover .mb-legalp__fl { color: var(--mb-red); }

/* Documento legal (privacidad / términos / taquilla) */
.mb-legaldoc {
    max-width: 720px; margin: 0 auto; padding: 30px 20px 90px;
    color: var(--mb-text); font-family: var(--mb-font-sans);
}
@media (max-width: 767px) { .mb-legaldoc { padding-top: calc(76px + env(safe-area-inset-top)); } }
.mb-legaldoc__volver {
    display: inline-block; margin-bottom: 18px; font-family: var(--mb-font-mono);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mb-text-mute); text-decoration: none;
}
.mb-legaldoc__volver:hover { color: var(--mb-red); }
.mb-legaldoc .wp-block-post-title,
.mb-legaldoc > h1 {
    font-family: var(--mb-font-serif); font-size: clamp(28px, 7vw, 40px);
    line-height: 1.1; margin: 0 0 18px; color: var(--mb-text);
}
.mb-legaldoc h2 { font-family: var(--mb-font-serif); font-size: 21px; margin: 30px 0 10px; color: var(--mb-text); }
.mb-legaldoc h3, .mb-legaldoc h4 { font-size: 14px; font-weight: 700; margin: 22px 0 8px; color: var(--mb-text); text-transform: uppercase; letter-spacing: 0.04em; }
.mb-legaldoc p, .mb-legaldoc li { font-size: 15px; line-height: 1.7; color: var(--mb-text-mute); }
.mb-legaldoc p { margin: 0 0 14px; }
.mb-legaldoc ul, .mb-legaldoc ol { margin: 0 0 16px; padding-left: 20px; }
.mb-legaldoc li { margin-bottom: 6px; }
.mb-legaldoc a { color: var(--mb-red); text-decoration: underline; }
.mb-legaldoc strong { color: var(--mb-text); font-weight: 600; }
.mb-legaldoc hr { border: 0; border-top: 1px solid var(--mb-line); margin: 24px 0; }

/* Footer: fila de enlaces legales (privacidad/términos/taquilla) — Paulo 17 jul 2026 */
.mb-foot__legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; }
.mb-foot__legal-links a {
    font-family: var(--mb-font-sans); font-size: 11.5px; color: var(--mb-text-faint);
    text-decoration: none; transition: color .15s ease;
}
.mb-foot__legal-links a:hover { color: var(--mb-text-mute); }
@media (max-width: 520px) {
    .mb-foot__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .mb-foot__legal-links { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   ═══  FAQ  (/preguntas)  — Paulo 17 jul 2026  ═══
   ══════════════════════════════════════════════════════════ */
.mb-faq { max-width: 680px; margin: 0 auto; padding: 40px 20px 90px; color: var(--mb-text); font-family: var(--mb-font-sans); }
@media (max-width: 767px) { .mb-faq { padding-top: calc(76px + env(safe-area-inset-top)); } }
.mb-faq__head { margin-bottom: 30px; }
.mb-faq__eyebrow { display: inline-block; font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mb-red); margin-bottom: 10px; }
.mb-faq__titulo { font-family: var(--mb-font-serif); font-size: clamp(24px, 6vw, 34px); line-height: 1.14; margin: 0; color: var(--mb-text); }
.mb-faq__grupo { margin-bottom: 30px; }
.mb-faq__cat { font-family: var(--mb-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-sand); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--mb-line); }
.mb-faq__item { border-bottom: 1px solid var(--mb-line-soft); }
.mb-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 2px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; color: var(--mb-text); }
.mb-faq__q::-webkit-details-marker { display: none; }
.mb-faq__ico { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.mb-faq__ico::before, .mb-faq__ico::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--mb-red); transition: opacity .2s ease, transform .2s ease; }
.mb-faq__ico::before { width: 16px; height: 2px; }
.mb-faq__ico::after { width: 2px; height: 16px; }
.mb-faq__item[open] .mb-faq__ico::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.mb-faq__a { padding: 0 2px 16px; font-size: 15px; line-height: 1.65; color: var(--mb-text-mute); }
.mb-faq__a a { color: var(--mb-red); text-decoration: underline; }
.mb-faq__cta { text-align: center; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--mb-line); }
.mb-faq__cta p { margin: 0 0 12px; color: var(--mb-text-mute); font-size: 15px; }
.mb-faq__cta-btn { display: inline-flex; align-items: center; height: var(--mb-btn-h); padding: 0 22px; border-radius: var(--mb-r-pill); background: var(--mb-red); color: #fff; font-weight: 600; text-decoration: none; font-size: 14.5px; transition: background .15s ease; }
.mb-faq__cta-btn:hover { background: var(--mb-red-2); }

/* ══════════════════════════════════════════════════════════
   ═══  LA QUIETECITA  (/laquietecita)  — oscuro + acentos verdes
   ═══  Identidad propia (verdes salvia). Paulo 17 jul 2026.  ═══
   ══════════════════════════════════════════════════════════ */
.mb-qtp {
    --qt-green: #6E9A63;       /* helecho aclarado, contrasta sobre oscuro */
    --qt-green-h: #7EAE72;
    --qt-sage: #A3B18A;        /* salvia — eyebrows y acentos */
    --qt-gold: #E7BE63;        /* dorado barra */
    color: var(--mb-text);
    font-family: var(--mb-font-sans);
}
/* Hero */
.mb-qtp__hero {
    text-align: center;
    padding: 60px 20px 44px;
    background: radial-gradient(120% 85% at 50% 0%, rgba(88,129,87,0.22), transparent 70%), var(--mb-bg);
    border-bottom: 1px solid var(--mb-line);
}
@media (max-width: 767px) { .mb-qtp__hero { padding-top: calc(84px + env(safe-area-inset-top)); } }
.mb-qtp__logo { width: min(280px, 74%); height: auto; margin: 0 auto 22px; display: block; opacity: 0.95; }
.mb-qtp__tagline {
    max-width: 36ch; margin: 0 auto; font-family: var(--mb-font-sans); font-weight: 400;
    font-size: clamp(15px, 4vw, 18px); line-height: 1.55; font-style: italic; color: var(--qt-sage);
}
/* Secciones */
.mb-qtp__sec { max-width: 620px; margin: 0 auto; padding: 34px 20px; }
.mb-qtp__sec + .mb-qtp__sec { border-top: 1px solid var(--mb-line-soft); }
.mb-qtp__eyebrow {
    display: block; font-family: var(--mb-font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--qt-sage); margin-bottom: 12px;
}
.mb-qtp__lead { font-family: var(--mb-font-serif); font-size: clamp(19px, 5vw, 25px); line-height: 1.45; color: var(--mb-text); margin: 0; }
/* Galería de postales */
.mb-qtp__galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 620px; margin: 6px auto 0; padding: 0 20px; }
@media (min-width: 560px) { .mb-qtp__galeria { grid-template-columns: repeat(3, 1fr); } }
.mb-qtp__postal { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--mb-bg-2); }
.mb-qtp__postal img, .mb-qtp__postal video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Textos */
.mb-qtp__carta-txt, .mb-qtp__reservar-txt { font-size: 15.5px; line-height: 1.7; color: var(--mb-text-mute); margin: 0 0 18px; }
.mb-qtp__horario-txt {
    margin: 0; font-family: var(--mb-font-serif); font-size: 18px; line-height: 1.6; color: var(--mb-text);
    padding: 16px 18px; border: 1px solid rgba(163,177,138,0.28); border-left: 3px solid var(--qt-green); border-radius: var(--mb-r-md); background: rgba(88,129,87,0.06);
}
/* Botones verdes */
.mb-qtp__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.mb-qtp__btn {
    display: inline-flex; align-items: center; gap: 8px; height: var(--mb-btn-h); padding: 0 22px;
    border-radius: var(--mb-r-pill); background: var(--qt-green); color: #12160F; font-weight: 600;
    text-decoration: none; font-size: 14.5px; transition: background .15s ease, transform .15s ease;
}
.mb-qtp__btn:hover { background: var(--qt-green-h); transform: translateY(-1px); }
.mb-qtp__btn--ghost { background: transparent; border: 1px solid var(--qt-green); color: var(--qt-sage); }
.mb-qtp__btn--ghost:hover { background: rgba(110,154,99,0.12); transform: translateY(-1px); }
/* La Quietecita: línea de oferta (ligera, sin bold) — Paulo 17 jul 2026 */
.mb-qtp__oferta { font-family: var(--mb-font-sans); font-weight: 400; font-size: clamp(18px, 4.8vw, 22px); line-height: 1.45; color: var(--mb-text); margin: 0 0 22px; }

/* ══════════════════════════════════════════════════════════
   ═══  CARTA DE LA QUIETECITA  (/carta)  — HTML, no PDF.  ═══
   ═══  Oscuro + verde/dorado. Paulo 17 jul 2026.           ═══
   ══════════════════════════════════════════════════════════ */
.mb-carta {
    --qt-green: #8FB57F; --qt-gold: #E7BE63; --qt-sage: #A3B18A;
    max-width: 640px; margin: 0 auto; padding: 0 0 90px; color: var(--mb-text); font-family: var(--mb-font-sans);
}
.mb-carta__head { padding: 30px 20px 0; }
@media (max-width: 767px) { .mb-carta__head { padding-top: calc(76px + env(safe-area-inset-top)); } }
.mb-carta__volver { display: inline-block; margin-bottom: 14px; font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-text-mute); text-decoration: none; }
.mb-carta__volver:hover { color: var(--qt-gold); }
.mb-carta__titulo { font-family: var(--mb-font-serif); font-size: clamp(30px, 8vw, 42px); margin: 0 0 16px; color: var(--mb-text); }
/* Nav de secciones (sticky) */
.mb-carta__nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px; margin: 0; background: rgba(20,16,14,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--mb-line); scrollbar-width: none; }
.mb-carta__nav::-webkit-scrollbar { display: none; }
.mb-carta__nav a { flex: 0 0 auto; font-family: var(--mb-font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--qt-sage); text-decoration: none; padding: 7px 14px; border: 1px solid rgba(163,177,138,0.30); border-radius: 999px; white-space: nowrap; }
.mb-carta__nav a:hover { background: rgba(143,181,127,0.14); color: var(--mb-text); }
@media (max-width: 767px) { .mb-carta__nav { top: 60px; } }
/* Bloques y categorías */
.mb-carta__bloque { padding: 34px 20px 8px; scroll-margin-top: 64px; }
@media (max-width: 767px) { .mb-carta__bloque { scroll-margin-top: 118px; } }
.mb-carta__bloque-head { margin-bottom: 6px; }
.mb-carta__bloque-head h2 { font-family: var(--mb-font-serif); font-size: 26px; margin: 0; color: var(--mb-text); }
.mb-carta__bloque-head span { display: block; font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qt-gold); margin-top: 4px; }
.mb-carta__cat { font-family: var(--mb-font-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qt-green); margin: 26px 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mb-carta__cat-nota { font-size: 10.5px; letter-spacing: 0.03em; color: var(--mb-text-faint); text-transform: none; }
/* Producto */
.mb-carta__item { padding: 9px 0; border-bottom: 1px solid var(--mb-line-soft); }
.mb-carta__linea { display: flex; align-items: baseline; gap: 6px; }
.mb-carta__nom { font-size: 15.5px; font-weight: 600; color: var(--mb-text); }
.mb-carta__dots { flex: 1 1 auto; border-bottom: 1px dotted rgba(245,238,232,0.22); transform: translateY(-3px); min-width: 12px; }
.mb-carta__precio { font-family: var(--mb-font-mono); font-size: 14px; font-weight: 600; color: var(--qt-gold); white-space: nowrap; }
.mb-carta__precio2 { color: var(--qt-sage); }
.mb-carta__precio2::before { content: "· "; color: var(--mb-text-faint); }
.mb-carta__desc { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--mb-text-mute); }
.mb-carta__fina { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; font-style: italic; color: var(--mb-text-faint); }

/* ══════════════════════════════════════════════════════════
   ═══  ESPACIOS  (/espacios)  — mockup — Paulo 17 jul 2026  ═══
   ══════════════════════════════════════════════════════════ */
.mb-espacios { max-width: 720px; margin: 0 auto; padding: 40px 20px 90px; color: var(--mb-text); font-family: var(--mb-font-sans); }
@media (max-width: 767px) { .mb-espacios { padding-top: calc(76px + env(safe-area-inset-top)); } }
.mb-espacios__head { margin-bottom: 26px; }
.mb-espacios__eyebrow { display: inline-block; font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mb-red); margin-bottom: 10px; }
.mb-espacios__titulo { font-family: var(--mb-font-serif); font-size: clamp(30px, 8vw, 44px); line-height: 1.05; margin: 0 0 12px; }
.mb-espacios__intro { font-size: 15.5px; line-height: 1.6; color: var(--mb-text-mute); margin: 0; max-width: 46ch; }
.mb-espacios__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .mb-espacios__grid { grid-template-columns: 1fr 1fr; } }
.mb-espacios__card { display: flex; flex-direction: column; border: 1px solid var(--mb-line); border-radius: var(--mb-r-lg); overflow: hidden; background: var(--mb-bg-2); text-decoration: none; color: var(--mb-text); transition: border-color .18s ease, transform .18s ease; }
.mb-espacios__card:hover { border-color: var(--mb-red); transform: translateY(-3px); }
.mb-espacios__media { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 20%, var(--mb-bg-4), var(--mb-bg-2)); border-bottom: 1px solid var(--mb-line); }
.mb-espacios__aforo { display: flex; flex-direction: column; align-items: center; }
.mb-espacios__aforo b { font-family: var(--mb-font-serif); font-size: 40px; line-height: 1; }
.mb-espacios__aforo small { font-family: var(--mb-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-text-mute); margin-top: 4px; }
.mb-espacios__info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.mb-espacios__tipo { font-family: var(--mb-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-sand); }
.mb-espacios__nombre { font-family: var(--mb-font-serif); font-size: 19px; line-height: 1.15; }
.mb-espacios__corto { font-size: 13.5px; line-height: 1.5; color: var(--mb-text-mute); }
.mb-espacios__mas { margin-top: 6px; font-family: var(--mb-font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--mb-red); }
/* Ficha de espacio */
.mb-espacio-ficha { max-width: 640px; margin: 0 auto; padding: 30px 20px 90px; color: var(--mb-text); font-family: var(--mb-font-sans); }
@media (max-width: 767px) { .mb-espacio-ficha { padding-top: calc(76px + env(safe-area-inset-top)); } }
.mb-espacio-ficha__volver { display: inline-block; margin-bottom: 16px; font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-text-mute); text-decoration: none; }
.mb-espacio-ficha__volver:hover { color: var(--mb-red); }
.mb-espacio-ficha__hero { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mb-r-lg); overflow: hidden; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 20%, var(--mb-bg-4), var(--mb-bg-2)); border: 1px solid var(--mb-line); }
.mb-espacio-ficha__aforo { display: flex; flex-direction: column; align-items: center; }
.mb-espacio-ficha__aforo b { font-family: var(--mb-font-serif); font-size: 54px; line-height: 1; }
.mb-espacio-ficha__aforo small { font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-text-mute); margin-top: 5px; }
.mb-espacio-ficha__ph { position: absolute; bottom: 10px; right: 12px; font-family: var(--mb-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-text-faint); }
.mb-espacio-ficha__tipo { font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-sand); }
.mb-espacio-ficha__nombre { font-family: var(--mb-font-serif); font-size: clamp(26px, 7vw, 36px); line-height: 1.1; margin: 6px 0 14px; }
.mb-espacio-ficha__desc { font-size: 15.5px; line-height: 1.7; color: var(--mb-text-mute); margin: 0 0 20px; }
.mb-espacio-ficha__meta { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.mb-espacio-ficha__dato { flex: 1 1 140px; padding: 12px 14px; border: 1px solid var(--mb-line); border-radius: var(--mb-r-md); background: var(--mb-bg-2); }
.mb-espacio-ficha__dato span { display: block; font-family: var(--mb-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-text-faint); margin-bottom: 4px; }
.mb-espacio-ficha__dato b { font-size: 15px; }
.mb-espacio-ficha__cta { text-align: center; padding-top: 22px; border-top: 1px solid var(--mb-line); }
.mb-espacio-ficha__cta p { margin: 0 0 12px; color: var(--mb-text-mute); font-size: 15px; }
.mb-espacio-ficha__btn { display: inline-flex; align-items: center; height: var(--mb-btn-h); padding: 0 22px; border-radius: var(--mb-r-pill); background: var(--mb-red); color: #fff; font-weight: 600; text-decoration: none; font-size: 14.5px; margin: 4px; }
.mb-espacio-ficha__btn:hover { background: var(--mb-red-2); }
.mb-espacio-ficha__btn--ghost { background: transparent; border: 1px solid var(--mb-line); color: var(--mb-text); }
.mb-espacio-ficha__btn--ghost:hover { border-color: var(--mb-red); }
/* Servicios y equipamiento en la ficha de espacio — Paulo 17 jul 2026 */
.mb-espacio-ficha__serv { margin-bottom: 26px; }
.mb-espacio-ficha__serv-lbl { display: block; font-family: var(--mb-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-text-faint); margin-bottom: 10px; }
.mb-espacio-ficha__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-espacio-ficha__chip { font-size: 13px; padding: 6px 12px; border-radius: var(--mb-r-pill); border: 1px solid var(--mb-line); background: var(--mb-bg-2); color: var(--mb-text); }
/* Espacios con foto real (desde ms_prod_adjuntos) — Paulo 17 jul 2026 */
.mb-espacios__media--foto { background-size: cover; background-position: center; }
.mb-espacios__aforo-badge { position: absolute; top: 10px; left: 10px; font-family: var(--mb-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mb-text); background: rgba(13,11,10,0.72); border: 1px solid rgba(245,238,232,0.18); border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(4px); }
.mb-espacio-ficha__hero--foto { background: none; }
.mb-espacio-ficha__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-espacio-ficha__aforo-badge { position: absolute; bottom: 10px; left: 12px; z-index: 2; font-family: var(--mb-font-mono); font-size: 12px; color: var(--mb-text); background: rgba(13,11,10,0.72); border: 1px solid rgba(245,238,232,0.2); border-radius: 999px; padding: 5px 12px; backdrop-filter: blur(4px); }
.mb-espacio-ficha__gal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 26px; }
.mb-espacio-ficha__gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.mb-espacios__vacio { color: var(--mb-text-mute); font-size: 15px; padding: 20px 0; }
.mb-espacios__vacio a { color: var(--mb-red); }

/* Correcciones 17 jul 2026 (Paulo): logo CTN en tarjeta compañía + Quietecita del home clicable */
.mb-cia-card__foto--logo {
    background-size: 78%;                 /* logo contenido, no recortado */
    background-color: var(--mb-bg-4);
}
.mb-quietecita-head__link { color: inherit; text-decoration: none; transition: color .15s ease; }
.mb-quietecita-head__link:hover { color: var(--mb-red); }
.mb-qt-media--link { display: block; cursor: pointer; }
.mb-qt-postales3 { display: none; }   /* móvil: manda el fader; las 3 postales sólo en escritorio */

/* ══════════════════════════════════════════════════════════
   ═══  ESCRITORIO: rejillas a 3 columnas en pantallas anchas  ═══
   ═══  (17 jul 2026 — pasada de adaptación a escritorio)       ═══
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    /* Cartelera: 2 tarjetas gigantes → 3 por fila */
    .mb-cv2-grid { grid-template-columns: repeat(auto-fill, 185px) !important; max-width: 1100px !important; justify-content: center !important; }
    /* Espacios: contenedor más ancho + 3 por fila */
    .mb-espacios { max-width: 1040px; }
    .mb-espacios__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   ═══  ESCRITORIO: tarjetas del home NO se estiran a lo ancho ═══
   ═══  (18 jul 2026) Se acota+centra el contenido de cada       ═══
   ═══  sección; La Quietecita pasa a foto|texto lado a lado.    ═══
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Cap + centrado del contenido de cada sección */
    /* YouTube y Compañía ya NO se acotan aquí: viven dentro de .mb-trio */
    .mb-quietecita-head, .mb-quietecita-card,
    .mb-resenas__inner,
    .mb-amenidades__head, .mb-amenidades__grid,
    .mb-contacto__head, .mb-contacto__banda {
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* La Quietecita (rediseño 19 jul): 3 postales en fila + texto debajo */
    .mb-quietecita-card { display: block !important; }
    .mb-quietecita-card .mb-qt-media,
    .mb-quietecita-card .mb-qt-media--link { display: none !important; } /* fader fuera en escritorio */
    .mb-qt-postales3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 18px;
    }
    .mb-qt-postal3 {
        display: block;
        aspect-ratio: 4 / 3;
        border-radius: 12px;
        overflow: hidden;
    }
    .mb-qt-postal3 img,
    .mb-qt-postal3 video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mb-qt-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
    }
    .mb-qt-texto { margin: 0; max-width: 62ch; }
    .mb-qt-btns { flex-shrink: 0; margin-top: 0; }
    /* Botones: que no se aprieten ni salten de línea (texto pegado al borde) */
    .mb-qt-btns .mb-qt-btn { flex: 0 0 auto; padding: 0 24px; white-space: nowrap; }
    /* Contacto: banda + botones acotados y centrados */
    .mb-contacto__grid {
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Compañía: la card (logo|texto) acotada */
    .mb-cia-card { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
    /* YouTube: si la card es media+texto en columna, acotar el media a algo sensato */
    .mb-yt-media, .mb-yt-media__thumb { max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════════════════════════
   ═══  ESCRITORIO — Home rediseño (19 jul 2026, aprobado)     ═══
   ═══  Parte 1: CARTELERA = postales HORIZONTALES pegadas al  ═══
   ═══  hero (imagen_horizontal). Móvil sigue con video 9:16.  ═══
   ══════════════════════════════════════════════════════════ */
.mb-vevento-horiz { display: none; }   /* móvil: no se usa (manda el video vertical) */
@media (min-width: 900px) {
    .mb-videos-eventos { padding-top: 4px; }                 /* pegada al hero */
    .mb-cartelera-home-head { max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
    .mb-vevento-galeria { max-width: 1160px; margin: 0 auto; padding: 0 24px; overflow: visible; position: relative; }
    /* auto-fit + minmax con tope: con pocos eventos se centran y no se estiran;
       con muchos, se acomodan en filas de hasta 4. (Paulo, 19 jul 2026) */
    .mb-vevento-track { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 18px; overflow-x: auto; transform: none !important; scroll-snap-type: x proximity; scrollbar-width: none; }
    .mb-vevento-item { flex: 0 0 300px; width: 300px; scroll-snap-align: start; }
    .mb-vevento-panel { aspect-ratio: 16 / 9; }
    .mb-vevento-vert { display: none !important; }           /* escritorio: fuera el video vertical */
    .mb-vevento-horiz { display: block; position: absolute; inset: 0; }
    .mb-vevento-horiz img, .mb-vevento-horiz video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mb-vevento-galeria--carousel .mb-qt-btn { display: flex !important; }   /* flechas del carrusel en una línea (Paulo 23jul) */
    .mb-vevento-track::-webkit-scrollbar { display: none; }
}

/* Escritorio — Parte 2: amenidades 3-col + un poco menos de separación (19 jul 2026) */
@media (min-width: 900px) {
    .mb-amenidades__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
    /* Amenidades como el mockup: cada una en su tarjeta con caja e icono */
    .mb-amenidades__grid .mb-amen-item {
        background: var(--mb-bg-2);
        border: 1px solid var(--mb-line);
        border-radius: 12px;
        padding: 16px 18px;
        gap: 13px;
    }
    .mb-amenidades__grid .mb-amen-item__check { width: 36px; height: 36px; border-radius: 10px; }
    .mb-amenidades__grid .mb-amen-item__lbl { font-size: 15px; font-weight: 500; }
    /* Menos aire vertical entre secciones en escritorio */
    .mb-resenas { padding-top: 26px !important; }
    .mb-amenidades { padding-top: 26px !important; padding-bottom: 26px !important; }
    .mb-quietecita-v2, .mb-contacto { padding-top: 30px !important; padding-bottom: 30px !important; }
}

/* Escritorio — Parte 3: Opiniones SIGUEN siendo carrusel (3 visibles + flechas).
   El JS de reseñas maneja el avance; el bloque ya se centra vía .mb-resenas__inner
   (regla de unificación a 1160). No se toca el riel para no romper el cálculo. (19 jul) */

/* Escritorio — Parte 4: Trío YouTube + Club + Compañía en una fila (19 jul 2026) */
.mb-trio { display: contents; }   /* móvil: como si el wrapper no existiera (secciones apiladas) */
@media (min-width: 900px) {
    .mb-trio {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        align-items: stretch;
        max-width: 1160px;
        margin: 0 auto;
        padding: 14px 24px 34px;
    }
    .mb-trio > section {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    /* Encabezados de cada columna: sin caps heredados, compactos y de MISMA
       altura → así el título largo de "Compañía Teatral del Norte" no encoge
       su tarjeta respecto a las otras dos. */
    .mb-trio .mb-yt-head,
    .mb-trio .mb-club-head,
    .mb-trio .mb-cia-head {
        max-width: none !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        min-height: 74px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    /* Títulos del trío al mismo tamaño (más chico para que el largo no descuadre) */
    .mb-trio .mb-yt-head__titulo,
    .mb-trio .mb-club-head__titulo,
    .mb-trio .mb-cia-head__titulo {
        font-size: 21px !important;
        line-height: 1.08 !important;
    }
    /* La tarjeta visual llena el resto de la columna → 3 columnas de igual alto */
    .mb-trio .mb-yt-card,
    .mb-trio .mb-club,
    .mb-trio .mb-cia-card {
        max-width: none !important;
        margin: 0 !important;
        width: auto !important;         /* que el stretch del flex lo ajuste a la columna */
        box-sizing: border-box !important;
        flex: 1 1 auto;
    }
    /* Todo lo que viva dentro de una columna respeta el ancho (nada se desborda) */
    .mb-trio > section * { box-sizing: border-box; max-width: 100%; }
    /* YouTube dentro de la columna: media + texto apilados, sin tope de ancho */
    .mb-trio .mb-yt-card { display: flex; flex-direction: column; }
    .mb-trio .mb-yt-media,
    .mb-trio .mb-yt-media__thumb { max-width: none !important; margin: 0 !important; }
}

/* Escritorio — Parte 5: Contacto = "Comprar boletos" como un botón más en la
   misma fila que WhatsApp / DM / Cómo llegar (19 jul 2026). */
.mb-contacto__grid--4 { grid-template-columns: repeat(2, 1fr); }   /* móvil: 2x2 */
.mb-contacto__btn--comprar { background: var(--mb-red); border-color: transparent; }
.mb-contacto__btn--comprar .mb-contacto__btn-icon,
.mb-contacto__btn--comprar .mb-contacto__btn-lbl { color: #fff; }
.mb-contacto__btn--comprar:hover { background: #B81C14; border-color: transparent; }
@media (min-width: 900px) {
    .mb-contacto__grid--4 {
        grid-template-columns: repeat(5, 1fr) !important;
        max-width: 980px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════
   ═══  BLOG (19 jul 2026) — listado, entrada y bloque home  ═══
   ═══  Lo pinta includes/blog.php. Tokens del :root global.  ═══
   ══════════════════════════════════════════════════════════ */

/* ── Cabecera del listado ── */
.mb-blog { padding: 26px 0 40px; background: var(--mb-bg); }
.mb-blog__head { padding: 0 20px; margin-bottom: 20px; }
.mb-blog__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
    display: block;
    margin-bottom: 7px;
}
.mb-blog__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
    color: var(--mb-text) !important;
    margin: 0 0 10px !important;
}
.mb-blog__entrada {
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mb-text-mute);
    margin: 0;
    max-width: 60ch;
}
.mb-blog__vacio { color: var(--mb-text-mute); padding: 0 20px; }

/* ── Retícula de tarjetas ── */
.mb-blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 20px;
}
.mb-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .12s ease;
}
.mb-blog-card:hover { border-color: rgba(245,238,232,0.20); transform: translateY(-2px); }
.mb-blog-card__img {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--mb-bg-3);
    overflow: hidden;
}
.mb-blog-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-blog-card__img--vacia {
    background: linear-gradient(135deg, var(--mb-bg-3), var(--mb-bg-2));
}
.mb-blog-card__body { display: block; padding: 14px 16px 17px; }
.mb-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}
.mb-blog-card__cat {
    font-family: var(--mb-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
}
.mb-blog-card__fecha {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    color: var(--mb-text-faint);
}
.mb-blog-card__titulo {
    display: block;
    font-family: var(--mb-font-serif);
    font-size: 19px;
    line-height: 1.2;
    color: var(--mb-text);
    margin-bottom: 6px;
}
.mb-blog-card__extracto {
    display: block;
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mb-text-mute);
}

/* ── Paginación ── */
.mb-blog__pag { padding: 26px 20px 0; }
.mb-blog__pag ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; justify-content: center; }
.mb-blog__pag a, .mb-blog__pag span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--mb-line);
    background: var(--mb-bg-2);
    color: var(--mb-text-mute);
    font-family: var(--mb-font-mono);
    font-size: 12.5px;
    text-decoration: none;
}
.mb-blog__pag a:hover { color: var(--mb-text); border-color: rgba(245,238,232,0.20); }
.mb-blog__pag .current { background: var(--mb-red); border-color: transparent; color: #fff; }

/* ── Entrada individual ── */
.mb-post { padding: 26px 0 44px; background: var(--mb-bg); }
.mb-post__head { padding: 0 20px; margin-bottom: 16px; }
.mb-post__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mb-post__cat {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
}
.mb-post__fecha { font-family: var(--mb-font-mono); font-size: 11px; color: var(--mb-text-faint); }
.mb-post__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-size: 31px !important;
    line-height: 1.08 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
}
.mb-post__foto { padding: 0 20px; margin-bottom: 22px; }
.mb-post__foto img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    border: 1px solid var(--mb-line);
}
/* Cuerpo: columna de lectura cómoda */
.mb-post__cuerpo {
    padding: 0 20px;
    font-family: var(--mb-font-sans);
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--mb-text-mute);
}
.mb-post__cuerpo p { margin: 0 0 17px; }
.mb-post__cuerpo h2, .mb-post__cuerpo h3, .mb-post__cuerpo h4 {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    color: var(--mb-text) !important;
    line-height: 1.15 !important;
    margin: 30px 0 12px !important;
}
.mb-post__cuerpo h2 { font-size: 25px !important; }
.mb-post__cuerpo h3 { font-size: 21px !important; }
.mb-post__cuerpo h4 { font-size: 18px !important; }
.mb-post__cuerpo a { color: var(--mb-red-bright); text-decoration: underline; text-underline-offset: 2px; }
.mb-post__cuerpo img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 20px auto; }
.mb-post__cuerpo figure { margin: 20px 0; }
.mb-post__cuerpo figcaption {
    font-family: var(--mb-font-mono);
    font-size: 11px;
    color: var(--mb-text-faint);
    text-align: center;
    margin-top: 7px;
}
.mb-post__cuerpo blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--mb-red);
    font-family: var(--mb-font-serif);
    font-size: 18px;
    line-height: 1.4;
    color: var(--mb-text);
}
.mb-post__cuerpo ul, .mb-post__cuerpo ol { margin: 0 0 17px; padding-left: 22px; }
.mb-post__cuerpo li { margin-bottom: 7px; }
.mb-post__cuerpo iframe { max-width: 100%; border-radius: 12px; }
.mb-post__pie { padding: 28px 20px 0; }
.mb-post__volver {
    font-family: var(--mb-font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mb-text-mute);
    text-decoration: none;
    border: 1px solid var(--mb-line);
    border-radius: 999px;
    padding: 9px 18px;
    display: inline-block;
}
.mb-post__volver:hover { color: var(--mb-text); border-color: var(--mb-red); }

/* ── Bloque del blog en la portada ── */
.mb-blog-home { padding: 26px 0; background: var(--mb-bg); }
.mb-blog-home__head { padding: 0 20px; margin-bottom: 14px; }
.mb-blog-home__eyebrow {
    font-family: var(--mb-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-sand-real);
    display: block;
    margin-bottom: 6px;
}
.mb-blog-home__head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mb-blog-home__titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    color: var(--mb-text) !important;
    margin: 0 !important;
}
.mb-blog-home__accion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mb-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mb-text-mute);
    text-decoration: none;
    flex-shrink: 0;
}
.mb-blog-home__accion:hover { color: var(--mb-text); }

/* ── Escritorio ── */
@media (min-width: 768px) {
    .mb-blog__head, .mb-blog__grid, .mb-blog__pag,
    .mb-blog-home__head, .mb-blog-home .mb-blog__grid {
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
    .mb-blog__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .mb-blog__titulo { font-size: 44px !important; }
    /* La entrada se lee en columna angosta, como el resto del sitio */
    .mb-post__head, .mb-post__foto, .mb-post__cuerpo, .mb-post__pie {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }
    .mb-post__titulo { font-size: 42px !important; }
    .mb-post__cuerpo { font-size: 16.5px; }
}

/* ══════════════════════════════════════════════════════════
   ═══  BLOG v2 (19 jul 2026) — aire de periódico            ═══
   ═══  Jerarquía: destacada → 2 secundarias → lista de notas ═══
   ══════════════════════════════════════════════════════════ */

/* ── Nota destacada ── */
.mb-blog-dest {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0 20px;
    margin-bottom: 26px;
}
.mb-blog-dest__img {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mb-bg-3);
    border: 1px solid var(--mb-line);
    margin-bottom: 13px;
}
.mb-blog-dest__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-blog-dest__body { display: block; }
.mb-blog-dest__titulo {
    display: block;
    font-family: var(--mb-font-serif);
    font-size: 27px;
    line-height: 1.12;
    color: var(--mb-text);
    margin: 3px 0 9px;
    transition: color .15s ease;
}
.mb-blog-dest:hover .mb-blog-dest__titulo { color: var(--mb-red-bright); }
.mb-blog-dest__extracto {
    display: block;
    font-family: var(--mb-font-sans);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--mb-text-mute);
    margin-bottom: 11px;
}
.mb-blog-dest__mas {
    font-family: var(--mb-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mb-red-bright);
}

/* ── Las dos secundarias ── */
.mb-blog__secundarias {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 20px;
    margin-bottom: 30px;
}

/* ── Lista de notas (miniatura + titular) ── */
.mb-blog__lista { padding: 0 20px; }
.mb-blog__lista-titulo {
    font-family: var(--mb-font-serif) !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    color: var(--mb-text) !important;
    margin: 0 0 6px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mb-line);
}
.mb-blog-row {
    display: flex;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid var(--mb-line);
    text-decoration: none;
    color: inherit;
}
.mb-blog-row:last-child { border-bottom: none; }
.mb-blog-row:hover .mb-blog-row__titulo { color: var(--mb-red-bright); }
.mb-blog-row__img {
    flex: 0 0 104px;
    width: 104px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mb-bg-3);
}
.mb-blog-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-blog-row__body { flex: 1; min-width: 0; }
.mb-blog-row__titulo {
    display: block;
    font-family: var(--mb-font-serif);
    font-size: 16.5px;
    line-height: 1.25;
    color: var(--mb-text);
    margin: 3px 0 4px;
    transition: color .15s ease;
}
.mb-blog-row__extracto { display: none; }   /* en móvil estorba; se muestra en escritorio */

/* ── Portada: el bloque del blog es CARRUSEL horizontal en móvil ── */
@media (max-width: 767px) {
    .mb-blog__grid--home {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .mb-blog__grid--home::-webkit-scrollbar { display: none; }
    .mb-blog__grid--home .mb-blog-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* ── Escritorio del blog v2 ── */
@media (min-width: 768px) {
    .mb-blog-dest, .mb-blog__secundarias, .mb-blog__lista {
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
    /* Destacada a dos columnas: foto grande | titular */
    .mb-blog-dest {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 28px;
        align-items: center;
        margin-bottom: 36px;
    }
    .mb-blog-dest__img { margin-bottom: 0; aspect-ratio: 16 / 10; }
    .mb-blog-dest__titulo { font-size: 38px; }
    .mb-blog-dest__extracto { font-size: 15.5px; }
    .mb-blog__secundarias { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 42px; }
    .mb-blog__lista-titulo { font-size: 23px !important; }
    .mb-blog-row { padding: 17px 0; gap: 18px; }
    .mb-blog-row__img { flex: 0 0 168px; width: 168px; }
    .mb-blog-row__titulo { font-size: 20px; }
    .mb-blog-row__extracto {
        display: block;
        font-family: var(--mb-font-sans);
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--mb-text-mute);
    }
}

/* ══════════════════════════════════════════════════════════
   ═══  Aviso "en construcción" (Tienda) — 19 jul 2026        ═══
   ══════════════════════════════════════════════════════════ */
.mb-construccion {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 20px 22px;
    padding: 15px 17px;
    background: var(--mb-bg-2);
    border: 1px solid var(--mb-line);
    border-left: 3px solid var(--mb-sand-real);
    border-radius: 14px;
}
.mb-construccion__icono { color: var(--mb-sand-real); flex-shrink: 0; display: inline-flex; }
.mb-construccion__titulo {
    display: block;
    font-family: var(--mb-font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--mb-text);
    margin-bottom: 3px;
}
.mb-construccion__sub {
    display: block;
    font-family: var(--mb-font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mb-text-mute);
}
@media (min-width: 768px) {
    .mb-construccion { max-width: 1160px; margin-left: auto; margin-right: auto; }
}

/* La foto principal de la nota no debe comerse la pantalla: se recorta a un
   formato apaisado y con tope de alto, para que el titular y el arranque del
   texto se alcancen a ver sin hacer scroll. (Paulo, 19 jul 2026) */
.mb-post__foto img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-height: 38vh;
}
@media (min-width: 768px) {
    .mb-post__foto img { max-height: 42vh; }
}

/* Botón de descarga del boleto en la pantalla de confirmación (19 jul 2026).
   Estaba sólo en el correo; Paulo lo pidió también en la web. */
.mb-conf-acciones { text-align: center; margin: 18px 20px 6px; }
.mb-conf-pdf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 999px;
    background: var(--mb-red);
    color: #fff;
    font-family: var(--mb-font-sans);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(224,36,27,0.28);
}
.mb-conf-pdf:hover { background: #B81C14; color: #fff; }


/* Ocultar el titulo por defecto que WP inyecta en las paginas (Paulo 23 jul 2026) */
.page .wp-block-post-title,
.page .entry-title,
.page h1.page-title,
.page-title.wp-block-post-title { display: none !important; }


/* Hero: flechas de navegación grandes (escritorio) + swipe en móvil + puntitos más grandes (Paulo 23 jul 2026) */
.mb-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(20, 16, 14, 0.5);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.mb-hero__nav:hover { background: rgba(234, 32, 39, 0.9); }
.mb-hero__nav--prev { left: 18px; }
.mb-hero__nav--next { right: 18px; }
.mb-hero__dot { width: 11px; height: 11px; }
@media (max-width: 640px) {
    .mb-hero__nav { display: none; }   /* en móvil manda el swipe */
}


/* Capa que se desliza al hacer swipe/flechas en el hero (Paulo 23 jul 2026) */
.mb-hero__slidecap {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center 28%;
    pointer-events: none;
    will-change: transform;
}
.mb-hero__slidecap--left  { animation: mb-hero-slide-left  0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.mb-hero__slidecap--right { animation: mb-hero-slide-right 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes mb-hero-slide-left  { to { transform: translateX(-105%); } }
@keyframes mb-hero-slide-right { to { transform: translateX(105%); } }

.mb-hero__slidecap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}