@charset "UTF-8";
/*
 * CABECERA NUEVA DE LA WEB PÚBLICA (11_Cabecera, fase 1).
 * Plan: _code_docs/trabajos/Mejoras_ASP_2026/11_Cabecera/plan.md
 *
 * Todas las reglas cuelgan de header.cabn, la cabecera de comun/_cabecera.asp (activa para
 * todos desde el 12/10/2026; durante la revisión estuvo detrás del interruptor ?cab=nueva). Se
 * carga después de piel_oro.css (la imprime comun/_piel.asp) y usa sus variables de color.
 * Contrato: _code_docs/construccion/cabecera.md.
 *
 * Estructura: barra negra (logo a la izquierda; Mi fiesta y cuenta a la derecha) y, debajo,
 * el menú de Codex (#mainNav, comun/_webmenu_superior.asp) sobre negro, cerrado por una
 * línea fina de oro. La cabecera es fija, con una altura conocida (--cabn-alto), y el
 * primer elemento que la sigue recibe ese margen, en lugar de los márgenes que cada familia
 * de páginas tenía calculados para la cabecera antigua.
 *
 * Ronda 1.1: escritorio y tablet (≥768 px, decisión del usuario: tablet como escritorio).
 * El móvil solo queda correcto, sin rematar; se diseña en la ronda 1.3.
 */

:root {
    --cabn-barra: 72px;      /* barra del logo */
    --cabn-menu: 44px;       /* fila del menú */
    --cabn-linea: 3px;       /* línea de oro inferior */
    --cabn-alto: calc(var(--cabn-barra) + var(--cabn-menu) + var(--cabn-linea));
}


/* ===== Contenedor fijo ===== */
/* Bootstrap le da a .navbar margen inferior, borde y altura mínima: fuera. Va por encima del
   contenido (z-index de las barras fijas de Bootstrap) y ocupa todo el ancho. */
header.cabn {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    margin: 0;
    border: 0;
    border-radius: 0;
    min-height: 0;
    background: #000;
    border-bottom: var(--cabn-linea) solid var(--oro);
}
/* El hero de la portada y la página de resultados reservaban con min-height la altura de la
   cabecera antigua (buscador.css); con esta, el hueco lo da el margen de abajo. */
body.index > header.navbar.cabn,
body.buscar > header.navbar.cabn { min-height: 0; }

/* El bloque con el que arranca cada página empieza justo debajo de la cabecera: el hero (home),
   el main de resultados (buscar) o el .wrapper (las demás). Sustituye a los margin-top fijos de
   martine.css (160/120/85/70 px según el ancho, algunos con !important).
   Ronda 1.4: antes era «header.cabn + *», pero en varias plantillas lo que sigue al header no es
   ese bloque sino un <input type="hidden"> (servicios, packs) o un <style> (contactar), que se
   llevaban el margen mientras el .wrapper conservaba el de la cabecera antigua. Lo detectó la
   medición de la distancia cabecera-título en las 13 plantillas. */
header.cabn ~ #home-hero,
header.cabn ~ .me-busca-resultados,
header.cabn ~ .wrapper { margin-top: var(--cabn-alto) !important; }


/* ===== Ancho del contenido (mini-corrección 2) =====
 * El .container de Bootstrap 3 tiene ancho fijo por tramos (750 px de 768 a 991, 970 de 992 a 1199,
 * 1170 desde 1200) y es fluido por debajo de 768. En los dos tramos intermedios el logo, los iconos y
 * el menú quedaban encajonados con márgenes grandes y cambiantes. Dentro de la cabecera, el contenedor
 * es fluido hasta 1170 px y a partir de ahí se queda en 1170 centrado: escritorio y móvil no cambian.
 * Afecta a la barra del logo y al contenedor del menú de Codex.
 */
header.cabn .container { width: auto; max-width: 1170px; }

/* ===== Barra del logo ===== */
/* --cabn-barra-act es la altura real de la barra: igual a --cabn-barra, salvo con la cabecera compacta
   (ronda 1.4). El margen de la página sigue usando --cabn-alto, la altura completa, para que el
   contenido no salte al compactarse: al bajar, simplemente pasa por debajo. */
header.cabn { --cabn-barra-act: var(--cabn-barra); --cabn-logo-alto: 54px; }
header.cabn .cabn-barra { height: var(--cabn-barra-act); background: #000; transition: height .2s ease; }
header.cabn .cabn-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
/* Los clearfix de Bootstrap en .container serían elementos de la fila flex. */
header.cabn .cabn-fila::before,
header.cabn .cabn-fila::after { display: none; }
header.cabn .cabn-logo { display: block; flex: 0 0 auto; }
header.cabn .cabn-logo img {
    display: block;
    height: var(--cabn-logo-alto);   /* 54 px ≈ 133 px de ancho con la proporción del SVG */
    width: auto;
    transition: height .2s ease;
}

/* Mi fiesta y la cuenta, alineados a la derecha. */
header.cabn .cabn-acciones { display: flex; align-items: center; gap: 22px; }
/* Mismo aspecto para el enlace del carrito y el botón de la cuenta. martine.css y la piel
   ponen estilos a todo «header a / header button / header p»: se fijan aquí los propios. */
header.cabn .cabn-accion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--oro);
    font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    line-height: 1;
}
header.cabn .cabn-accion:hover,
header.cabn .cabn-accion:focus,
header.cabn .open > .cabn-accion { color: #fff; text-decoration: none; outline: none; }
header.cabn .cabn-accion:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
header.cabn .cabn-accion .fa { font-size: 20px; }
header.cabn .cabn-accion .caret { margin-left: 2px; }
/* El nombre puede ser largo: se recorta para no empujar al logo. */
header.cabn .cabn-nombre {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}
/* Burbuja del número de Mi fiesta. */
header.cabn .cabn-num {
    display: inline-block;
    min-width: 22px;
    padding: 3px 6px;
    border-radius: 11px;
    background: var(--oro);
    color: var(--texto-sobre-oro);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
}


/* ===== Desplegables de la cuenta ===== */
/* Panel blanco anclado a la derecha, bajo el botón. Bootstrap 3 no lo cierra al pulsar dentro
   de un <form>, así que se puede escribir en él. */
header.cabn .cabn-cuenta .dropdown-menu {
    /* martine.css pone a «header .dropdown-menu» position:inherit y width:100% hasta 991 px (era el
       desplegable de la cabecera antigua, que se abría dentro de ella): aquí tiene que flotar. */
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 14px;
    border: 0;
    border-top: var(--cabn-linea) solid var(--oro);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    background: #fff;
}
/* Formulario de acceso. */
header.cabn .cabn-acceso { width: 300px; padding: 18px 20px 14px; }
header.cabn .cabn-acceso label {
    display: block;
    margin: 0 0 4px;
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}
header.cabn .cabn-acceso .form-control {
    width: 100%;
    height: 38px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #000;
    background: #fff;
    box-sizing: border-box;   /* el Bootstrap del sitio no lo pone de forma global */
}
header.cabn .cabn-acceso .form-control:focus { border-color: var(--oro); box-shadow: none; }
header.cabn .cabn-entrar { margin: 4px 0 10px; color: #000; text-align: left; }
header.cabn .cabn-boton {
    display: block;
    padding: 10px;
    border-radius: 3px;
    background: var(--oro);
    color: var(--texto-sobre-oro);
    font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}
header.cabn .cabn-boton:hover,
header.cabn .cabn-boton:focus { background: var(--oro-hover); color: var(--texto-sobre-oro); text-decoration: none; }
header.cabn .cabn-enlaces {
    margin: 0;
    color: #666;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    text-transform: none;
    text-align: center;
}
header.cabn .cabn-enlaces a { color: var(--oro-texto); text-transform: none; font-family: inherit; }
/* Aviso de error de la respuesta (opc.asp lo muestra con style.display). */
header.cabn .cabn-acceso .alert { position: static; width: auto; margin: 0 0 10px; padding: 8px 30px 8px 10px; font-size: 13px; }

/* Opciones con sesión. */
header.cabn .cabn-menu { min-width: 200px; padding: 6px 0; }
header.cabn .cabn-menu > li > a {
    padding: 10px 18px;
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    text-transform: none;
}
header.cabn .cabn-menu > li > a .fa { width: 18px; color: var(--oro-texto); }
header.cabn .cabn-menu > li > a:hover,
header.cabn .cabn-menu > li > a:focus { background: var(--oro); color: var(--texto-sobre-oro); }
header.cabn .cabn-menu > li > a:hover .fa,
header.cabn .cabn-menu > li > a:focus .fa { color: var(--texto-sobre-oro); }


/* ===== Fila del menú (el #mainNav de Codex) ===== */
/* Dentro de la cabecera fija deja de ser una barra fija por su cuenta (martine.css la pone a
   150/120/90 px del borde) y pasa a ir en el flujo, debajo del logo. La piel le da el degradado
   dorado y texto negro: aquí, fondo negro y texto en oro; la línea de oro es el borde inferior
   de la cabecera. */
header.cabn .contentbarramenu { position: static; }
header.cabn #mainNav.navbar-custom {
    position: static !important;      /* martine.css usa top con !important en algunos anchos */
    top: auto !important;
    margin: 0;
    padding: 0;
    min-height: var(--cabn-menu);
    border: 0;
    background: #000;
    background-image: none;
    box-shadow: none;
}
header.cabn #mainNav.wm-superior .navbar-nav > li > a,
header.cabn #mainNav.wm-superior .wm-grupo,
header.cabn #mainNav.wm-superior .wm-grupo:hover,
header.cabn #mainNav.wm-superior .open > .wm-grupo,
header.cabn #mainNav.navbar-custom .navbar-toggle { color: var(--oro); }
header.cabn #mainNav.wm-superior .navbar-nav > li > a:hover,
header.cabn #mainNav.wm-superior .navbar-nav > li > a:focus,
header.cabn #mainNav.wm-superior .wm-grupo:hover,
header.cabn #mainNav.wm-superior .open > .wm-grupo { color: #fff; text-decoration: none; }
header.cabn #mainNav.wm-superior a:focus,
header.cabn #mainNav.wm-superior .wm-grupo:focus { outline-color: var(--oro); }
@media (min-width: 768px) {
    /* La fila del menú ocupa exactamente su altura; los enlaces se alinean a la izquierda,
       bajo el logo. */
    header.cabn #mainNav.wm-superior .navbar-nav { min-height: var(--cabn-menu); }
    header.cabn #mainNav.wm-superior .navbar-nav > li > a,
    header.cabn #mainNav.wm-superior .navbar-nav > li > .wm-grupo { padding-left: 0; padding-right: 28px; }
    /* Cada elemento ocupa toda la altura de la fila (webmenu.css los centra y quedaban más bajos que ella):
       así el desplegable, que cuelga del elemento, empieza en el borde de la fila y no tapa la línea de oro. */
    header.cabn #mainNav.wm-superior .navbar-nav > li { align-self: stretch; }
    /* Desplegables de los grupos: bajo la línea de oro. */
    header.cabn #mainNav.wm-superior .dropdown-menu { margin-top: var(--cabn-linea); }
}


/* ===== Móvil (<768 px, ronda 1.3) =====
 * Una sola barra negra: logo, carrito con su número, cuenta (solo icono) y ☰. El menú y la
 * cuenta se abren como paneles bajo la barra, sin cambiar la altura de la cabecera; nunca los
 * dos a la vez (lo coordina el script de comun/_cabecera.asp). La fila del menú de Codex
 * desaparece: su botón se sustituye por el ☰ de la barra, que abre el mismo panel.
 */
/* El ☰ de la barra solo existe en móvil. */
header.cabn .cabn-hamburguesa { display: none; }

@media (max-width: 767px) {
    :root { --cabn-barra: 60px; --cabn-menu: 0px; }
    header.cabn { --cabn-logo-alto: 42px; }
    /* Mini-corrección 1: los iconos se veían algo altos respecto al logo, cuyo peso visual queda algo
       por debajo del centro de su caja («MARTÍN» arriba, «ESPECTÁCULOS» abajo). Se bajan 3 px. */
    header.cabn .cabn-acciones { gap: 4px; margin-right: -10px; position: relative; top: 3px; }

    /* Iconos de al menos 44×44 px, para el dedo; sin textos ni flecha. */
    header.cabn .cabn-accion {
        justify-content: center;
        min-width: 44px;
        height: 44px;
        padding: 0 6px;
        gap: 4px;
    }
    header.cabn .cabn-accion .fa { font-size: 22px; }
    header.cabn .cabn-texto,
    header.cabn .cabn-cuenta .caret { display: none; }
    header.cabn .cabn-hamburguesa { display: inline-flex; }
    /* El número del carrito, como burbuja pegada al icono. */
    header.cabn .cabn-carrito { position: relative; }
    header.cabn .cabn-carrito .cabn-num {
        position: absolute;
        top: 4px;
        right: 0;
        min-width: 18px;
        padding: 2px 4px;
        border-radius: 9px;
        font-size: 11px;
    }
    /* Punto dorado sobre el icono de la cuenta cuando hay sesión (aquí no se ve el nombre). */
    header.cabn .cabn-con-sesion { position: relative; }
    header.cabn .cabn-con-sesion::after {
        content: "";
        position: absolute;
        top: 9px;
        right: 8px;
        width: 9px;
        height: 9px;
        border: 2px solid #000;
        border-radius: 50%;
        background: var(--oro-brillo);
    }

    /* Panel de la cuenta: a todo el ancho, justo bajo la barra y su línea de oro. */
    header.cabn .cabn-cuenta { position: static; }
    header.cabn .cabn-cuenta .dropdown-menu {
        position: fixed;
        top: calc(var(--cabn-barra-act) + var(--cabn-linea));
        left: 0;
        right: 0;
        width: auto;
        max-height: calc(100vh - var(--cabn-barra-act) - var(--cabn-linea));
        overflow-y: auto;
        margin: 0;
        border-top: 0;
    }
    header.cabn .cabn-acceso { width: auto; padding: 20px 16px 16px; }
    header.cabn .cabn-acceso .form-control { height: 44px; font-size: 16px; }  /* 16 px: iOS no hace zoom al escribir */
    header.cabn .cabn-boton { padding: 13px; font-size: 16px; }
    header.cabn .cabn-enlaces { font-size: 14px; line-height: 2; }
    header.cabn .cabn-menu > li > a { padding: 14px 18px; font-size: 16px; }

    /* Menú de Codex: sin su fila propia; el panel se abre bajo la barra y se desplaza si no cabe. */
    header.cabn #mainNav.wm-superior { min-height: 0; }
    header.cabn #mainNav.wm-superior .navbar-header { display: none; }
    header.cabn #mainNav .container { padding: 0; }
    header.cabn #mainNav.wm-superior .navbar-collapse {
        max-height: calc(100vh - var(--cabn-barra-act) - var(--cabn-linea));
        margin: 0;
        padding: 0;
        border: 0;
        overflow-y: auto;
        box-shadow: none;
    }
    header.cabn #mainNav.wm-superior .navbar-nav { margin: 0; }
    /* martine.css da a cada «.nav>li» 15 px arriba y abajo y una línea blanca (era el menú móvil
       antiguo): fuera, las filas las dan los propios enlaces. */
    header.cabn #mainNav.wm-superior .navbar-nav > li { padding: 0; border-bottom: 0; }
    /* Filas grandes, fáciles de pulsar, separadas por una línea tenue. */
    header.cabn #mainNav.wm-superior .navbar-nav > li > a,
    header.cabn #mainNav.wm-superior .navbar-nav > li > .wm-grupo {
        display: block;
        width: 100%;
        padding: 15px 18px;
        border-bottom: 1px solid rgba(215, 165, 71, .25);
        font-size: 16px;
        line-height: 18px;
        text-align: left;
    }
    /* Subopciones de un grupo: algo sangradas, sobre un negro un poco más claro. */
    header.cabn #mainNav.wm-superior .dropdown-menu { background: #111; padding: 0; }
    header.cabn #mainNav.wm-superior .dropdown-menu > li > a {
        padding: 13px 18px 13px 34px;
        border-bottom: 1px solid rgba(215, 165, 71, .12);
        font-size: 15px;
    }
}


/* ===== Cabecera compacta al bajar (ronda 1.4) =====
 * Decisión del usuario: fija y compacta. El script de comun/_cabecera.asp añade .cabn-compacta
 * pasados 60 px de scroll y la quita por debajo de 20 px (la diferencia evita parpadeos en el
 * límite). Solo se reduce la barra del logo; el menú y la línea de oro no cambian.
 */
/* Mini-corrección 1 (usuario, 12/10/2026): al compactar, el logo se reduce lo mínimo y ocupa casi
   toda la barra (antes bajaba a 38 px en escritorio y a 34 px en móvil). Escritorio: 48 px en una barra
   de 52 (2 px arriba y abajo). Móvil: 42 px, el mismo tamaño que sin compactar, en una barra de 50. */
header.cabn.cabn-compacta { --cabn-barra-act: 52px; --cabn-logo-alto: 48px; }
@media (max-width: 767px) {
    header.cabn.cabn-compacta { --cabn-barra-act: 50px; --cabn-logo-alto: 42px; }
}
/* Quien prefiere menos movimiento en su sistema no ve la transición. */
@media (prefers-reduced-motion: reduce) {
    header.cabn .cabn-barra,
    header.cabn .cabn-logo img { transition: none; }
}


/* ===== Número de Mi fiesta (ronda 1.5) =====
 * La burbuja solo aparece si hay algo en Mi fiesta (como proponía el análisis de partida): con 0 o
 * vacío queda el icono, y en escritorio el texto «Mi fiesta». El script de comun/_cabecera.asp
 * mantiene data-n al día cuando opc.asp reescribe el contador al añadir al carrito.
 */
header.cabn .cabn-num[data-n="0"],
header.cabn .cabn-num[data-n=""] { display: none; }

/* Cache versionada (Plan 13): al editar esta hoja, subir su version en comun/_piel.asp.
   Marca de sustitucion real para verificar la descarga con URL nueva: 20261014-cache1. */