/* =========================================
   1. VARIABLES GLOBALES Y FONDO BASE
   ========================================= */

:root {
  --color-naranja: #F36F3A;
  --color-azul-oscuro: #212045;
  --color-base: #F7F1EA;
  --fuente-base: 'Source Code Variable', monospace;
}

body {
  background-color: var(--color-base);
  color: var(--color-azul-oscuro);
  overflow-x: hidden;
}

/* =========================================
   2. LIMPIEZA DE PLANTILLA Y ESTRUCTURA GLOBAL
   ========================================= */
.header,
.page-header {
    display: none !important;
}

.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    grid-column: 1 / -1 !important;
}

.container-top-a > div,
.container-top-a > .grid-child,
.container-top-b > div,
.container-top-b > .grid-child,
.container-bottom-a > div,
.container-bottom-a > .grid-child,
.container-bottom-b > div,
.container-bottom-b > .grid-child {
    width: 100% !important;
    max-width: none !important;
    grid-column: 1 / -1 !important; 
    margin: 0 0 3rem 0 !important; 
}

.container-top-a > div:last-child,
.container-top-b > div:last-child,
.container-bottom-a > div:last-child,
.container-bottom-b > div:last-child {
    margin-bottom: 0 !important;
}

.container-banner {
    margin: 0 !important;
}

.pt-5 {
    padding-top: 0 !important;
}

.com-contact__container h2,
.com-contact h2,
.contact h2 {
    display: none !important;
}

/* =========================================
   3. ELEMENTOS GLOBALES FLOTANTES Y NAVEGACIÓN
   ========================================= */
#back-top.custom-top-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent !important; 
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    right: 20px;
    bottom: 23px;
    text-decoration: none;
    z-index: 9999;
}

.top-flecha {
    color: var(--color-azul-oscuro);
    font-family: var(--fuente-base);
    font-size: 3rem;
    font-weight: 700;
    line-height: 0.5;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.top-marco-cangrejo {
    padding: 8px;
    margin-bottom: 5px;
}

.top-img-cangrejo {
    width: 45px; 
    height: auto;
    display: block;
}

.top-texto {
    color: var(--color-azul-oscuro);
    font-family: var(--fuente-base);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 2px;
}

#back-top.custom-top-btn:hover .top-flecha {
    transform: translateY(-5px);
    color: var(--color-naranja);
}

.back-to-top-link {
    border: none !important;
}

.hero-top-icons {
    transition: all 0.3s ease-in-out; 
}

.hero-top-icons.menu-scrolleando {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    padding-top: 15px !important;    
    padding-bottom: 15px !important;
    z-index: 9999 !important;        
}

.hero-texto-lateral {
    position: fixed !important;
    z-index: 9998;
    top: 55%;
    font-size: 1.3rem;
    font-weight: 700;
}

.lateral-izq { left: 4%; }
.lateral-der { right: 4%; }

.enlace-reservas-fijo {
    position: fixed !important;
    bottom: 40px !important;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 9998;
}

.hero-texto-lateral a,
.enlace-reservas-fijo a {
    color: var(--color-naranja) !important;
    transition: color 0.3s ease-in-out;     
}

.hero-texto-lateral a:hover,
.enlace-reservas-fijo a:hover {
    color: var(--color-azul-oscuro) !important;
    text-decoration: none;
}

.btn-hamburguesa {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    z-index: 1006;
}

.btn-hamburguesa span {
    display: block;
    width: 33px;
    height: 3px;
    background-color: var(--color-naranja);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.btn-hamburguesa.abierto span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.btn-hamburguesa.abierto span:nth-child(2) {
    opacity: 0;
}

.btn-hamburguesa.abierto span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.overlay-menu-movil {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-azul-oscuro);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.overlay-menu-movil.abierto {
    opacity: 1;
    visibility: visible;
}

.menu-movil-enlaces {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    text-align: center;
}

.menu-movil-enlaces a {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-naranja);
    font-family: var(--fuente-base);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.menu-movil-enlaces a:hover,
.menu-movil-enlaces a:active {
    color: var(--color-naranja);
}

.btn-globo-idioma {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-globo-idioma:hover {
    transform: scale(1.1);
}

.caja-desplegable-banderas {
    position: absolute;
    top: 108%;
    right: -2px;
    background: #f36f3a8a;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: max-content;
    z-index: 9999;
}

.caja-desplegable-banderas.mostrar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.caja-desplegable-banderas .gtranslate_wrapper {
    position: static !important;
    display: block !important;
}

.caja-desplegable-banderas .gt_switcher_wrapper {
    position: static !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    gap: 12px !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 7px !important;
}

.caja-desplegable-banderas .gt_switcher_wrapper a.glink {
    display: block !important;
    user-select: none !important; 
    -webkit-user-drag: none !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
    filter: grayscale(40%);
}

.caja-desplegable-banderas .gt_switcher_wrapper a.glink:hover,
.caja-desplegable-banderas .gt_switcher_wrapper a.glink.gt-current-lang {
    transform: scale(1.15) !important;
    filter: grayscale(0%) !important;
}

@media (max-width: 768px) {
    .lateral-izq, .lateral-der { display: none; }
}

/* =========================================
   4. PÁGINA DE INICIO - HERO BANNER
   ========================================= */
.hero-andarica-wrapper {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: 100vw !important;
    font-family: var(--fuente-base);
}

.topbar-andarica {
    background-color: var(--color-azul-oscuro);
    color: #ffffff;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 350;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .topbar-andarica {
        flex-direction: column;
        text-align: center;
        padding: 10px !important;
    }
    .topbar-der span { 
        display: block; 
        margin-top: 5px; 
    }
}

.hero-banner-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background-image: linear-gradient(rgb(230 230 230 / 4%), rgb(230 230 230 / 38%)), url(/images/foto_home.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-titulo, .hero-subtitulo, .hero-datos, .hero-texto-naranja {
    color: var(--color-naranja);
    font-style: italic;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.hero-texto-naranja:hover {
    opacity: 0.7;
    color: var(--color-naranja);
}

.hero-titulo {
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 3px;
    margin-bottom: 0;
}

.hero-subtitulo {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0;
}

.hero-datos {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
}

.hero-content-center {
    z-index: 10;
    position: relative;
}

.hero-top-icons { 
    z-index: 10; 
}

.hero-logo-a {
    transition: transform 0.2s ease;
}

.hero-logo-a:hover {
    cursor: crosshair;
    animation: movimiento-extrano 0.3s infinite alternate ease-in-out;
}

@keyframes movimiento-extrano {
    0% { transform: scale(1) rotate(0deg) skew(0deg, 0deg); }
    25% { transform: scale(1.15) rotate(-10deg) skew(5deg, -2deg); }
    50% { transform: scale(0.85) rotate(10deg) skew(-5deg, 5deg); }
    75% { transform: scale(1.1) rotate(-5deg) skew(2deg, -5deg); }
    100% { transform: scale(1.05) rotate(5deg) skew(-2deg, 2deg); }
}

@media (max-width: 768px) {
    .hero-titulo { font-size: 1.5rem; }
    .hero-datos { font-size: 0.95rem; }
}

/* =========================================
   5. PÁGINA DE INICIO - INTRODUCCIÓN Y GALERÍAS
   ========================================= */
.intro-editorial {
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
    overflow: hidden;
    background-color: var(--color-base);
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: 100vw !important;
}

.titulo-fino-azul {
    font-weight: 300;
    font-size: 1.8rem;
    letter-spacing: 3px;
}

.texto-parrafo-naranja {
    color: var(--color-naranja);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.caja-trama-naranja {
    background-color: #F8D9B4; 
    background-image: url('/images/imagen9.jpg');
    background-size: cover;
    background-position: center;
    padding: 3rem 2.5rem;
    min-height: 870px;
    font-style: italic;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.5;
}

.numero-gigante {
    font-size: 4rem;
    color: var(--color-naranja);
    font-weight: 400;
    font-style: italic;
    float: left;
    margin-right: 15px;
    line-height: 0.8;
}

.numero-gigante-49 {
    color: var(--color-naranja);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 0.8;
    font-style: italic;
    display: block;
    margin-top: -13px;
}

.texto-justificado-azul {
    color: var(--color-azul-oscuro);
    text-align-last: left;
    font-style: italic;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.5;
}

.texto-justificado-naranja {
    text-align-last: left;
    font-style: italic;
}

.resalte-azul {
    color: var(--color-azul-oscuro);
    font-weight: bold;
}

.contenedor-codigos-overlap {
    position: absolute;
    top: 32%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20; 
    pointer-events: none;
}

.linea-roja-cruzada {
    position: absolute;
    top: 70%; 
    left: -10%;
    width: 110%;
    height: 1.5px;
    background-color: #D3432B; 
    z-index: 1;
}

.texto-codigos-gigante {
    font-size: 6.5rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-azul-oscuro);
    letter-spacing: 5px;
    transition: all 0.3s ease;
    pointer-events: auto;
    background-color: transparent;
    padding: 0 10px;
    font-weight: 850;
    font-style: italic;
}

.texto-codigos-gigante:hover {
    -webkit-text-stroke: 1.5px var(--color-naranja);
}

.logo-a-rotado {
    width: 55px;
    transform: rotate(15deg);
}

.texto-lateral-rojo {
    color: #D3432B;
    font-size: 0.8rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
}

.marco-doble-naranja {
    position: relative;
    display: inline-block;
    margin-top: 50px;
    margin-left: 30px;
}

.marco-doble-naranja::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 20px;
    width: 140px;
    height: 75px;
    border: 2px solid var(--color-naranja);
    z-index: 4; 
    pointer-events: none;
}

.marco-doble-naranja::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -25px;
    right: -25px;
    bottom: 30px;
    border: 2px solid var(--color-naranja);
    z-index: 4; 
    pointer-events: none;
}

.caja-texto-borde-azul {
    position: absolute; 
    top: 25%; 
    left: 55%; 
    background-color: #F3E2D0; 
    padding: 25px 30px;
    width: 320px; 
    z-index: 10; 
}

.caja-texto-borde-azul::after {
    content: '';
    position: absolute;
    top: -11px; 
    left: 45px; 
    width: 145%; 
    height: 115%; 
    border: 3.5px solid var(--color-azul-oscuro);
    z-index: -1; 
    pointer-events: none;
}

.caja-texto-borde-azul .texto-parrafo-naranja {
    position: relative;
    z-index: 2;
    font-size: 0.75rem; 
    font-weight: 800;
}

.contenedor-marco-desfasado {
    z-index: 10;
}

.marco-azul-estirado {
    top: 1.5rem; 
    left: 2rem; 
    width: 140%;
    height: 100%;
    border: 2px solid var(--color-azul-oscuro);
    z-index: 1;
    pointer-events: none;
}

.caja-beige-texto {
    background-color: var(--color-base);
    z-index: 2;
    transform: translate(-1.5rem, -2rem);
    width: 95%;
}

.contenedor-foto-barra {
    position: relative;
    margin-top: 2rem; 
}

@media (min-width: 992px) {
    .contenedor-foto-barra {
        margin-top: -180px !important; 
    }
}

.banner-azul-reserva {
    position: absolute;
    top: 0%; 
    left: -150px; 
    background-color: var(--color-azul-oscuro);
    color: #fff;
    padding: 6px 15px;
    font-weight: 700;
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 2px;
    z-index: 15;
    white-space: nowrap;
}

.marquesina-contenedor {
    background-color: var(--color-naranja);
    color: #fff;
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.marquesina-texto {
    display: inline-block;
    animation: scroll-marquesina 40s linear infinite;
}

@keyframes scroll-marquesina {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 991px) {
    .banner-azul-reserva { 
        left: 0; 
        top: 0; 
        position: relative; 
        white-space: normal; 
        text-align: center; 
    }
    
    .caja-texto-borde-azul { 
        position: relative; 
        top: 0; 
        left: 0; 
        width: 100%; 
        max-width: 100%; 
        margin-top: 3rem; 
    }
    
    .caja-texto-borde-azul::after { 
        width: 100%; 
        left: 15px; 
        height: 105%; 
    } 
    
    .texto-codigos-gigante { 
        font-size: 3rem; 
    }

    .marco-azul-estirado {
        width: 110%;
        left: 1rem;
    }
    .caja-beige-texto {
        transform: translate(-0.5rem, -1rem);
        width: 100%;
    }
}

/* =========================================
   6. PÁGINA DE INICIO - CARTA Y COLLAGES
   ========================================= */
.decoracion-pluses {
    color: var(--color-naranja);
    font-size: 1.8rem;
}

.decoracion-pluses-logo {
    color: var(--color-azul-oscuro);
    font-size: 1.8rem;
    vertical-align: middle;
}

.texto-outline-andarica {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-naranja);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 3px;
    vertical-align: middle;
}

.intro-carta p {
    font-family: var(--fuente-base);
    font-style: italic;
    font-weight: 350;
    color: var(--color-azul-oscuro);
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 1px;
}

.modulo-carta {
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.titulo-seccion-carta {
    font-family: var(--fuente-base); 
    font-weight: 350;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--color-azul-oscuro);
    margin-bottom: 5px;
    text-align: left;
}

.caja-carta-borde-azul {
    border: 2px solid var(--color-azul-oscuro);
    padding: 2.5rem 2rem;
    background-color: var(--color-base);
}

.caja-carta-borde-azul {
    max-width: 900px; 
    margin: 0 auto;   
    
}
.menu-editable-cliente .bloque-categoria {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.menu-editable-cliente h4 {
    text-orientation: upright;
    font-family: var(--fuente-base);
    font-size: 0.85rem;
    font-weight: 350;
    line-height: 1.2;
    text-align: center;
    margin-right: 1.5rem;
    margin-bottom: 0;
    color: var(--color-azul-oscuro);
    letter-spacing: -6px;
}

.menu-editable-cliente .platos {
    flex-grow: 1;
    width: 100%;
}

.menu-editable-cliente p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-family: var(--fuente-base);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-azul-oscuro);
    border-bottom: 1px dashed transparent; 
}

.menu-editable-cliente p:last-child {
    margin-bottom: 0;
}

.menu-editable-cliente p .info {
    flex-grow: 1;
    line-height: 1.3;
}

.menu-editable-cliente p i {
    display: block;
    font-family: var(--fuente-base);
    font-size: 0.65rem;
    font-style: italic;
    text-transform: none;
    color: var(--color-azul-oscuro);
    margin-top: 3px;
    letter-spacing: 0;
}

.menu-editable-cliente p > span:last-child {
    white-space: nowrap;
    text-align: right;
    min-width: 70px;
    margin-left: 15px;
}

.menu-editable-cliente p .etiqueta-brasa {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: transparent;
    -webkit-text-stroke: 0.5px var(--color-naranja);
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-left: 15px;
    margin-right: 15px;
}

.menu-editable-cliente p.naranja,
.menu-editable-cliente p.naranja span,
.menu-editable-cliente p.naranja i {
    color: var(--color-naranja) !important;
}

.texto-naranja { color: var(--color-naranja) !important; }
.texto-azul { color: var(--color-azul-oscuro) !important; }

.menu-editable-cliente .titulo-centrado {
    font-family: var(--fuente-base);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-azul-oscuro);
    letter-spacing: 2px;
    margin-bottom: 2rem;
    margin-top: 1rem;
    writing-mode: horizontal-tb; 
    text-orientation: mixed;
    text-align: center !important;
    display: block;
    width: 100%;
}

.collage-brasa, .collage-brasa-izq {
    position: relative;
    padding-top: 1rem;
}

.foto-collage-wrapper {
    position: relative;
    display: inline-block;
}

.foto-collage-wrapper img {
    position: relative;
    z-index: 2;
}

.foto-collage-wrapper::after {
    content: '';
    position: absolute;
    border: 2px solid var(--color-naranja);
    z-index: 7;
    pointer-events: none;
}

.collage-1 { width: 60%; margin-left: 10%; }
.collage-1::after {top: 10px;left: -15px;right: 15px;bottom: -14px;}

.collage-2 { width: 50%; margin-left: 50%; margin-top: -10%; z-index: 5; }
.collage-2::after { top: 15px; left: 15px; right: -15px; bottom: -15px; z-index: 6; }

.collage-3 { width: 65%; margin-left: 15%; margin-top: -5%; }
.collage-3::after { top: 15px; left: 15px; right: -15px; bottom: -15px; }

.collage-izq-1 { width: 60%; margin-left: 5%; }
.collage-izq-1::after { top: -15px; left: -15px; right: 15px; bottom: 15px; }

.collage-izq-2 { width: 50%; margin-left: 45%; margin-top: -15%; z-index: 5; }
.collage-izq-2::after { top: 15px; left: 15px; right: -15px; bottom: -15px; z-index: 6; }

.collage-izq-3 { width: 60%; margin-left: 10%; margin-top: -10%; }
.collage-izq-3::after { top: 15px; left: -15px; right: 15px; bottom: -15px; }

.texto-brasa-outline, .texto-brasa-outline-izq {
    position: absolute;
    top: 50%;
    font-size: 4rem;
    letter-spacing: 5px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-naranja);
    z-index: 4;
    transform: translateY(-50%);
}

.texto-brasa-outline { left: 8%; }
.texto-brasa-outline-izq { top: 52%;  }

@media (max-width: 991px) {
    .collage-brasa, .collage-brasa-izq { 
        margin-top: 3rem; 
        margin-bottom: 3rem; 
    }
    .texto-brasa-outline { left: 10%; font-size: 3rem; }
    .texto-brasa-outline-izq { left: 5%; font-size: 3rem; }
    
    .menu-editable-cliente.dos-columnas { column-count: 1; }
    
    .menu-editable-cliente p { font-size: 0.75rem; }
    .menu-editable-cliente .bloque-categoria { flex-direction: column; }
    .menu-editable-cliente h4 { 
        writing-mode: horizontal-tb; 
        width: 100%; 
        text-align: left; 
        margin-bottom: 1rem; 
    }
}

/* =========================================
   7. PÁGINA DE CÓDIGOS (GLOSARIO)
   ========================================= */
.hero-codigos-wrapper {
    position: relative;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: 100vw !important;
    height: 70vh; 
    min-height: 500px;
    background-color: var(--color-base);
    font-family: var(--fuente-base);
    overflow: visible !important; 
}

.hero-titulo-pequeno {
    color: var(--color-naranja);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 0;
}

.hero-centro-absoluto {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 1. ESTADO BASE (Antes de hacer scroll) */
.texto-gigante-azul {
    font-size: clamp(4rem, 12vw, 12rem);
    color: var(--color-azul-oscuro);
    font-weight: 400; /* 👈 Grosor normal o fino al principio */
    letter-spacing: 5px;
    line-height: 1;
    font-style: italic;
}

/* 2. EL COMPORTAMIENTO (Animaciones) */
#palabra-magica {
    display: inline-block;
    /* 👈 Añadimos font-weight a la transición para que "engorde" suavemente */
    transition: color 0.4s ease, -webkit-text-stroke 0.4s ease, font-weight 0.4s ease; 
    transform-origin: center center;
    will-change: transform;
}

/* 3. EL ESTADO AL HACER SCROLL (Gigante y hueco) */
.modo-hueco-parallax {
    color: transparent !important;
    -webkit-text-stroke: 2px var(--color-azul-oscuro);
    font-weight: 800 !important; /* 👈 Solo se vuelve extra gruesa aquí, cuando salta el efecto */
}

@media (max-width: 768px) {
    .hero-centro-absoluto { top: 50%; }
}

.seccion-glosario {
    position: relative;
    background-color: var(--color-base);
    font-family: var(--fuente-base);
    overflow: hidden; 
    padding-top: 5rem;
    padding-bottom: 10rem;
}

.glosario-item {
    max-width: 280px; 
    margin-bottom: 5rem;
    position: relative;
    z-index: 2;
}

.glosario-titulo {
    color: var(--color-azul-oscuro);
    font-weight: 400;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.glosario-texto {
    color: var(--color-naranja);
    font-weight: 450;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.contenedor-scroll-codigos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.texto-gigante-scroll {
    font-size: clamp(6rem, 20vw, 25rem);
    font-weight: 400;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-azul-oscuro);
    white-space: nowrap;
    letter-spacing: 5px;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    will-change: transform;
}

.logo-codigos {
    max-width: 400px; 
    height: auto;
}

@media (max-width: 768px) {
    .glosario-item { max-width: 100%; margin-bottom: 3rem; }
}

/* =========================================
   8. PÁGINA DE RESERVAS Y PLANO
   ========================================= */
.hero-banner-reservas {
    height: 120vh !important; 
    min-height: 850px;
}

.reservas-section,
.seccion-reservas-info {
    background-color: var(--color-base);
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
}

.reservas-textos {
    max-width: 800px;
    font-family: var(--fuente-base); 
    color: var(--color-azul-oscuro);
    font-weight: 700;
    font-style: italic;
    line-height: 1.6;
}

.reserva-titulo {
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.reserva-titulo-azul {
    font-size: 1.1rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reserva-titulo-principal {
    font-family: var(--fuente-base);
    font-size: 1.4rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1px;
    color: var(--color-azul-oscuro);
}

.reserva-subtitulo,
.reserva-horario {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.reserva-descripcion p {
    font-weight: 300;
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
    line-height: 1.5;
}

.reserva-texto-azul {
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
}
}

.enlaces-fantasmas a {
    color: rgba(29, 39, 71, 0.15); 
    font-family: var(--fuente-base);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.enlaces-fantasmas a:hover {
    color: var(--color-naranja);
}

.btn-reservar-lineas {
    display: inline-block;
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 30px;
    border-bottom: 1.5px solid var(--color-azul-oscuro);
    transition: all 0.3s ease;
}

.btn-reservar-lineas:hover {
    background-color: var(--color-azul-oscuro);
    color: var(--color-base);
}

.reservas-imagen-marco {
    border: 2px solid var(--color-naranja);
    padding: 15px; 
    max-width: 1100px;
    background-color: transparent;
}

.contenedor-motor-reservas {
    max-width: 900px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
    border: 1px solid rgba(0,0,0,0.05);
}

.contenedor-motor-reservas select,
.contenedor-motor-reservas input,
.motor-select {
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 8px 12px;
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
}

.contenedor-motor-reservas select:focus,
.contenedor-motor-reservas input:focus {
    outline: none;
    border-color: var(--color-naranja);
    box-shadow: 0 0 0 1px var(--color-naranja);
}

.motor-btn-principal {
    background-color: transparent;
    border: 1.5px solid var(--color-azul-oscuro);
    color: var(--color-azul-oscuro);
    font-weight: 700;
    font-family: var(--fuente-base);
    padding: 10px;
    border-radius: 0;
    transition: all 0.3s ease;
}

.motor-btn-principal:hover {
    background-color: var(--color-azul-oscuro);
    color: #fff;
}

.motor-btn-secundario {
    background-color: transparent;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px;
    font-size: 0.85rem;
    border-radius: 0;
    transition: all 0.3s ease;
}

.motor-btn-secundario:hover {
    border-color: var(--color-naranja);
    color: var(--color-naranja);
}

.contenedor-plano-marco {
    position: relative;
    padding: 12px; 
    max-width: 1000px;
    margin: 0 auto;
}

.contenedor-plano-marco::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 4px solid var(--color-naranja); 
    z-index: 1;
    pointer-events: none;
}

.contenedor-plano-marco::after {
    content: '';
    position: absolute;
    top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1px solid var(--color-naranja); 
    z-index: 2;
    pointer-events: none;
}

.plano-fondo-azul {
    background-color: #0f0335;
    padding: 60px 40px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.plano-texto-izq {
    position: absolute;
    top: 50px;
    left: 50px;
    color: var(--color-naranja);
    font-family: var(--fuente-base);
	font-style: italic;
    font-size: 0.75rem;
    max-width: 250px;
    text-align: left;
    z-index: 5;
    line-height: 1.4;
	font-weight: 300;
}

.plano-texto-izq .texto-blanco {
    color: #ffffff; 
}

.plano-texto-der {
    position: absolute;
    bottom: 50px;
    right: 50px;
    color: var(--color-base); 
    font-family: var(--fuente-base);
    font-size: 1rem;
    font-style: italic;
    font-weight: 700;
    text-align: right;
    z-index: 5;
    letter-spacing: 1px;
}

.collage-tres-fotos {
    max-width: 1000px;
    margin: 0 auto;
}

.posicion-izq {
    margin-right: -5%; 
    z-index: 1;
    margin-top: 3rem; 
}

.posicion-centro {
    z-index: 3; 
    transform: scale(1.05); 
}

.posicion-der {
    margin-left: -5%; 
    z-index: 1;
    margin-top: 3rem;
}

.marco-simple-desplazado {
    position: relative;
    display: block;
}

.marco-simple-desplazado img {
    position: relative;
    z-index: 2;
}

.marco-simple-desplazado::after {
    content: '';
    position: absolute;
    border: 1.5px solid var(--color-naranja);
    z-index: 3;
    pointer-events: none;
}

.marco-izq-abajo::after {
    top: 20px; bottom: -20px; left: -20px; right: 20px;
}

.marco-centro-arriba::after {
    top: -30px; bottom: 20px; left: -15px; right: 15px; 
}

.marco-der-abajo::after {
    top: 20px; bottom: -20px; left: 20px; right: -20px;
}

.texto-codigos-outline {
    font-size: 3.5rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-azul-oscuro);
    letter-spacing: 5px;
    font-family: var(--fuente-base);
    font-style: italic;
    font-weight: 800;
}

@media (max-width: 991px) {
    .enlaces-fantasmas a { font-size: 1rem; }
    .posicion-izq, .posicion-der {
        margin: 0;
        margin-bottom: 3rem;
        width: 80%; 
    }
    .posicion-centro {
        width: 90%;
        margin-bottom: 3rem;
        transform: none;
    }
    .plano-fondo-azul {
        padding: 20px;
    }
    .texto-codigos-outline {
        font-size: 3.5rem;
    }
}

/* =========================================
   9. PÁGINA DE CONTACTO Y FORMULARIO
   ========================================= */
.com-contact__info,
.form-andarica label { 
    display: none !important;
}

.decoracion-cruces-huecas {
    font-family: var(--fuente-base);
    font-size: 4.5rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-naranja);
    letter-spacing: 15px;
    text-align: center;
    margin: 0; 
}

.separador-cruces-peq {
    color: var(--color-naranja);
    letter-spacing: 2px;
    font-size: 1.8rem;
}

.decoracion-bottom-andarica .cruces-naranjas {
    color: var(--color-naranja);
    letter-spacing: 2px;
    font-size: 1.8rem;
}

.decoracion-bottom-andarica .texto-andarica-naranja {
    color: var(--color-naranja);

    font-size: 1.2rem;
    letter-spacing: 1px;
}
.decoracion-bottom-andarica .texto-andarica-naranja {
    color: var(--color-naranja);
    font-weight: 900;
 
    -webkit-text-stroke: 1px var(--color-naranja); /* 👈 Esto engordará la letra. Sube a 1.5px si quieres más */
}

.contacto-datos-texto p, 
.direccion-top p, 
.texto-intro-form, 
.texto-obligatorio,
.form-andarica input,
.form-andarica textarea,
.form-andarica .form-check-label {
    font-family: var(--fuente-base);
    font-size: 1.1rem;
    font-weight: 350;
    font-style: italic;
    color: var(--color-azul-oscuro);
    line-height: 1.4;
}

.contacto-datos-texto p {
    margin-bottom: 0; 
}

.texto-naranja-contacto {
    font-family: var(--fuente-base);
    font-style: italic;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--color-naranja) !important;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

a.enlace-naranja {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a.enlace-naranja:hover {
    opacity: 0.7;
}

.imagen-marco-naranja {
    border: 3px solid var(--color-naranja);
    padding: 6px; 
    background-color: transparent;
}

.imagen-marco-naranja img {
    width: 100%;
    display: block;
}

.form-andarica input[type="text"],
.form-andarica input[type="email"],
.form-andarica input[type="tel"],
.form-andarica textarea {
    width: 100%;
    border: 2px solid var(--color-naranja) !important;
    background: transparent !important;
    padding: 12px 15px;
    border-radius: 0; 
    box-shadow: none !important;
    outline: none !important;
}

.form-andarica input::placeholder,
.form-andarica textarea::placeholder {
    color: #555555 !important; 
    font-family: var(--fuente-base) !important;
    font-style: italic !important;
    font-size: 0.95rem;
    opacity: 1 !important; 
}

.form-andarica textarea {
    min-height: 160px;
    resize: vertical;
}

.form-andarica input[type="checkbox"] {
    accent-color: var(--color-naranja); 
    margin-right: 10px;
    transform: scale(1.2);
}

.btn-enviar-naranja {
    background-color: var(--color-naranja);
    color: #fff;
    border: none;
    padding: 6px 30px;
    font-family: var(--fuente-base);
    font-style: italic;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 2px;
    transition: opacity 0.3s ease;
}

.btn-enviar-naranja:hover {
    opacity: 0.8;
}

.titulo-contacto-hueco {
    font-family: var(--fuente-base);
    font-size: clamp(4rem, 10vw, 9rem); 
    color: transparent; 
    -webkit-text-stroke: 2px var(--color-azul-oscuro); 
    font-style: italic; 
    font-weight: 400; 
    letter-spacing: 8px; 
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .decoracion-cruces-huecas {
        text-align: center;
        margin-left: 0;
    }
}

/* =========================================
   10. NEWSLETTER Y FOOTER GLOBAL
   ========================================= */
.newsletter-section {
    background-color: var(--color-base);
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
}

.titulo-newsletter {
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

.correo-newsletter {
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.logo-newsletter {
    width: 60px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.text-naranja-cruces {
    color: var(--color-naranja);
    font-weight: 300;
    font-size: 1.8rem;        
    font-family: var(--fuente-base);   
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
}

.caja-cruces-top, 
.caja-cruces-bottom {
    line-height: 0.8;
    letter-spacing: -7.5px;
    margin: 0;
}
.caja-cruces-content {
    padding: 3rem 4rem !important; 
}

.cruz-izq, 
.cruz-der {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.4;         
    letter-spacing: 0;
}

.cruz-izq { left: 8px; }
.cruz-der { right: 8px; }

.input-andarica {
    background: transparent;
    border: 1px solid var(--color-azul-oscuro);
    padding: 12px 15px;
    font-family: var(--fuente-base);
    font-style: italic;
    font-weight: 300; 
    color: var(--color-azul-oscuro);
    outline: none;
    border-radius: 0;
    width: 100%;
}

.input-andarica::placeholder {
    color: var(--color-azul-oscuro);
    font-style: italic;
}

.input-andarica:focus {
    border-color: var(--color-naranja);
}

.btn-andarica-outline {
    background: transparent;
    border: 1px solid var(--color-naranja);
    color: var(--color-naranja);
    padding: 12px 25px;
    font-family: var(--fuente-base);
    font-style: italic;
    font-weight: 300; 
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-andarica-outline:hover {
    background: var(--color-naranja);
    color: #ffffff;
}

.container-footer,
.footer {
    background-image: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

body footer.footer.full-width > .grid-child {
    max-width: none !important;
    width: 100vw !important;
    display: block !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
}

.container-footer .grid-child,
.footer .grid-child {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-info {
    width: 100% !important;
    background-color: var(--color-base) !important;
    margin: 0 !important;
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
}

.cruces {
    color: var(--color-naranja);
    font-size: 1.8rem;
}

.titulo-naranja {
    color: var(--color-naranja);
    font-size: 1.4rem;
}

.divisor-vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    width: auto !important; 
    padding: 0 !important;
    color: var(--color-naranja);
    font-size: 0.8rem;
    line-height: 1.2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.divisor-izq { left: 33.33%; transform: translateX(-50%); }
.divisor-der { left: 66.66%; transform: translateX(-50%); }

.footer-oscuro {
    width: 100% !important;
    background-color: var(--color-azul-oscuro) !important;
    margin: 0 !important;
    font-family: var(--fuente-base);
    color: #ffffff;
}

.enlace-blanco {
    color: #ffffff;
    text-decoration: none;
    font-style: italic;
    font-size: 1rem;
    transition: opacity 0.3s ease;
}

.enlace-blanco:hover {
    opacity: 0.6;
    color: #ffffff;
}

.logo-footer-mini {
    width: 50px;
    height: auto;
}

.texto-pequeno {
    font-size: 0.75rem;
    font-style: italic;
    color: #ffffff;
}

@media (min-width: 768px) {
    .footer-oscuro .row > div:last-child {
        min-height: 120px;
    }
}

/* --- 10.5 FOOTER (INFORMACIÓN SUPERIOR) --- */
.footer-info {
    width: 100% !important;
    background-color: var(--color-base) !important;
    margin: 0 !important;
    font-family: var(--fuente-base);
    color: var(--color-azul-oscuro);
}

/* Títulos naranjas (Contacto, Dirección, Horario) */
.footer-info .texto-naranja {
    font-style: italic;
    font-weight: 600; /* Un poco más de grosor para que destaque */
    letter-spacing: 2px;
}

/* Textos azules (Teléfono, dirección, horas) */
.footer-info p {
    font-style: italic;
    font-weight: 300; /* Letra muy fina y elegante */
    font-size: 1.05rem;
    letter-spacing: 1px;
}

.cruces {
    color: var(--color-naranja);
    font-size: 1.8rem;
}

.titulo-naranja {
    color: var(--color-naranja);
    font-size: 1.4rem;
}

.divisor-vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    width: auto !important; 
    padding: 0 !important;
    color: var(--color-naranja);
    font-size: 0.8rem;
    line-height: 1.2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.divisor-izq { left: 33.33%; transform: translateX(-50%); }
.divisor-der { left: 66.66%; transform: translateX(-50%); }


/* --- 10.6 FOOTER (ZONA OSCURA INFERIOR) --- */
.footer-oscuro {
    width: 100% !important;
    background-color: var(--color-azul-oscuro) !important;
    margin: 0 !important;
    font-family: var(--fuente-base);
    color: #ffffff;
}

.enlace-blanco {
    color: #ffffff;
    text-decoration: none;
    font-style: italic;
    font-weight: 300; /* Aseguramos que sea fina */
    font-size: 1rem;
    letter-spacing: 1px; /* Separamos un poco las letras */
    transition: opacity 0.3s ease;
}

.enlace-blanco:hover {
    opacity: 0.6;
    color: #ffffff;
}

.logo-footer-mini {
    width: 50px;
    height: auto;
}

.texto-pequeno {
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 300; /* Letra fina para el copyright y aviso legal */
    letter-spacing: 1px;
    color: #ffffff;
}

@media (min-width: 768px) {
    .footer-oscuro .row > div:last-child {
        min-height: 120px;
    }
}
/* =========================================
   11. ESTILOS PARA EL AVISO DE COOKIES CK
   ========================================= */
#cookiesck, 
.cookiesck-container {
    font-family: var(--fuente-base) !important;
}

#cookiesck .cookiesck-button,
#cookiesck a.cookiesck-btn {
    font-family: var(--fuente-base) !important;
    font-style: italic !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
}
/* =========================================
   AJUSTES RESPONSIVE (MÓVILES) - CARTA Y FOOTER
   ========================================= */

@media (max-width: 991px) {
    
    /* --- 1. ARREGLOS DE LA CARTA EN MÓVIL --- */
    
    /* Reducimos los márgenes gigantes del marco azul para ganar espacio real */
    .caja-carta-borde-azul {
        padding: 1.5rem 1rem !important; 
    }

    /* Forzamos a que las categorías pasen a una sola columna */
    .menu-editable-cliente .bloque-categoria {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 2.5rem !important;
    }
    
    /* Los títulos pasan de vertical a horizontal */
    .menu-editable-cliente h4 {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        width: 100% !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        letter-spacing: 2px !important;
        line-height: 1.4 !important;
    }

    /* Ajustamos los platos para que quepan los precios largos sin salirse */
    .menu-editable-cliente p {
        align-items: flex-end !important; /* Si el texto hace 2 líneas, el precio se queda abajo */
        font-size: 0.75rem !important;
    }

    /* Le damos menos margen a los precios en móvil */
    .menu-editable-cliente p > span:last-child,
    .menu-editable-cliente p .precio {
        min-width: auto !important;
        margin-left: 10px !important; 
        font-size: 0.75rem !important;
    }
    
    /* Hacemos la etiqueta vertical "BRASA" un poco más fina */
    .menu-editable-cliente p .etiqueta-brasa {
        margin-left: 8px !important;
        margin-right: 8px !important;
        font-size: 0.55rem !important;
    }

    /* --- 2. ARREGLOS DEL FOOTER EN MÓVIL --- */
    
    /* Evitamos que la línea de +++++++++ desborde y cree scroll horizontal */
    .separador-marquesina {
        width: 100% !important;
    }
    
    /* Hacemos que las cruces se "corten" solas si no caben en la pantalla */
    .separador-marquesina .cruces {
        flex: 1 !important;     /* Ocupa solo el espacio sobrante */
        min-width: 0 !important;/* Permite que se encoja */
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }
    
    /* Reducimos un pelín el título ANDARICA del footer para que respire */
    .separador-marquesina .titulo-naranja {
        font-size: 1.2rem !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    /* Centramos bien los textos superiores del footer */
    .footer-info .col-12 {
        text-align: center !important;
    }
    
    /* Ajustamos el tamaño de los enlaces inferiores */
    .footer-oscuro .enlace-blanco {
        font-size: 0.95rem !important;
    }
}
/* =========================================================================
   1. ESTILOS GLOBALES (ESCRITORIO Y MÓVIL)
   ========================================================================= */

/* Enlaces Fantasmas (Versión "Nuclear" Blindada) */
.enlaces-fantasmas a {
    color: #E6E6E8 !important; 
    font-family: var(--fuente-base) !important;
    font-size: 1.5rem !important;
    font-style: italic !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    transition: color 0.3s ease !important;
}

.enlaces-fantasmas a:hover {
    color: var(--color-naranja) !important;
}


/* =========================================================================
   2. AJUSTES RESPONSIVE: TABLETS Y MÓVILES (max-width: 991px)
   ========================================================================= */

@media (max-width: 991px) {

    .site-grid {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .hero-andarica-wrapper, 
    .intro-editorial {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .grid-child .row,
    .menu-editable-cliente.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }


    .separador-marquesina .cruces {
        display: inline-block !important;
        max-width: 25vw !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        vertical-align: middle !important;
    }

    .caja-cruces-top, 
    .caja-cruces-bottom,
    .newsletter-wrapper,
    .separador-cruces-peq {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .marquesina-contenedor {
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .decoracion-bottom-andarica {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .decoracion-bottom-andarica .cruces-naranjas {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }
    .decoracion-bottom-andarica .texto-andarica-naranja {
        margin-left: 10px !important;
        margin-right: 10px !important;
        font-size: 1.1rem !important;
    }

    
    .topbar-andarica {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px !important;
        gap: 8px !important;
    }
    .topbar-der span {
        display: block !important;
        margin-left: 0 !important;
    }
    .topbar-izq, 
    .topbar-der {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.65rem !important;
        line-height: 1.4 !important;
    }


    
    .numero-gigante-49 {
        font-size: 2.8rem !important;
        margin-top: 0 !important;
    }

    .intro-editorial .col-12.col-lg-6.pt-lg-4 .d-flex {
        flex-direction: column !important;
        align-items: center !important;
    }
    .intro-editorial .col-12.col-lg-6.pt-lg-4 .text-start {
        margin-right: 0 !important;
        margin-bottom: 2rem !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .intro-editorial .texto-justificado-naranja {
        text-align: center !important;
        text-align-last: center !important;
    }
    .intro-editorial .col-12.col-lg-6.pt-lg-4 .d-flex > span {
        display: none !important; 
    }

    .marco-azul-estirado {
        width: 100% !important;
        height: 100% !important;
        left: 10px !important;
        top: 10px !important;
    }
    .caja-beige-texto {
        transform: translate(0, 0) !important;
        width: 100% !important;
    }

    .banner-azul-reserva {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
        display: block !important;
        margin-bottom: 1rem !important;
    }

    .intro-editorial .col-12.col-lg-6.p-0 img.h-100 {
        height: 93% !important; 
        max-height: 60vh !important; 
    }
    .intro-editorial .col-12.col-lg-6.p-0 {
        padding-bottom: 2rem !important; 
    }

    
    .caja-carta-borde-azul {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .collage-brasa, 
    .collage-brasa-izq {
        max-width: 100% !important;
        overflow-x: hidden !important; 
        padding-right: 20px !important;
        padding-left: 10px !important;
        box-sizing: border-box !important;
    }
    .collage-2, 
    .collage-izq-2 {
        width: 45% !important;       
        margin-left: 40% !important;
    }
    .collage-1,
    .collage-izq-1,
    .collage-3,
    .collage-izq-3 {
        width: 60% !important;
        margin-left: 15% !important;
    }
    .texto-brasa-outline, 
    .texto-brasa-outline-izq {
        font-size: 2.5rem !important; 
        letter-spacing: 2px !important;
        left: 0% !important;
    }


    .enlaces-fantasmas {
        flex-direction: column !important; 
        gap: 15px !important;              
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .enlaces-fantasmas a {
        font-size: 1.1rem !important;      
        white-space: normal !important;    
        word-break: break-word !important; 
    }
	
    .texto-codigos-outline {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        letter-spacing: 2px !important; 
        -webkit-text-stroke: 1px var(--color-azul-oscuro) !important;
        display: inline-block !important;
        max-width: 100% !important;
    }
}

/* =========================================================================
   3. AJUSTES RESPONSIVE: SOLO MÓVILES PEQUEÑOS (max-width: 768px)
   ========================================================================= */

@media (max-width: 768px) {

    .texto-gigante-azul {
        font-size: clamp(2rem, 10vw, 4rem) !important; 
        letter-spacing: 2px !important; 
    }
    .modo-hueco-parallax {
        -webkit-text-stroke: 1px var(--color-azul-oscuro) !important; 
    }

    .titulo-contacto-hueco {
        font-size: clamp(2.2rem, 10vw, 4rem) !important; 
        letter-spacing: 3px !important; 
        -webkit-text-stroke: 1px var(--color-azul-oscuro) !important; 
    }
}
/* =========================================
   CHECKBOX PERSONALIZADO (POLÍTICA PRIVACIDAD)
   ========================================= */

.checkmark-naranja {
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-naranja); 
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background-color: transparent;
}

.contenedor-checkbox input[type="checkbox"]:checked + .checkmark-naranja::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid var(--color-naranja);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.texto-checkbox {
    font-family: var(--fuente-base);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-azul-oscuro);
}

.texto-checkbox a {
    color: var(--color-azul-oscuro);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.texto-checkbox a:hover {
    color: var(--color-naranja);
}
/* =========================================
   EXCEPCIÓN: MOSTRAR EL LABEL DEL CHECKBOX
   ========================================= */
label.contenedor-checkbox {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================
   COMPORTAMIENTO DINÁMICO BOTÓN TOP
   ========================================= */
#back-top.custom-top-btn {
    bottom: 20px !important; 
    transition: bottom 0.1s ease-out !important; 
}

/* =========================================
   AJUSTE FOTO BARRA OSTRAS (SUBIR HACIA ARRIBA)
   ========================================= */
@media (min-width: 992px) {
    .subir-foto-barra {
        margin-top: -420px !important; 
    }
}
.banner-azul-reserva {
    position: absolute;
    top: 310px; 
    left: -150px;
    background-color: var(--color-azul-oscuro);
    color: rgb(255, 255, 255);
}
/* =========================================
   CAJA DE TEXTO FLOTANTE (SECCIÓN CÓDIGOS)
   ========================================= */
@media (min-width: 992px) {
    .flotar-texto-derecha {
        position: absolute !important;
        top: 100px; 
        left: 380px; 
        width: 380px;
        z-index: 20; 
    }
    .marco-azul-estirado {
        border: 2px solid var(--color-azul-oscuro);
        top: -90px;
        left: 60px;
        width: 120%; 
        height: 140%;
        z-index: 1;
    }
}
@media (min-width: 992px) {
    .flotar-texto-segundo {
        position: absolute !important;
        top: 2px; 
        left: 0px; 
        width: 180px; 
        z-index: 0; 
    }
}
/* =========================================
   AJUSTE LOGO TEXTO (HERO BANNER)
   ========================================= */

/* Sube el logo hacia arriba */
.hero-titulo {
    margin-top: -50px; 
}

.hero-logo-texto {
    max-width: 126px; 
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .hero-titulo {
        margin-top: -20px; 
    }
    .hero-logo-texto {
        max-width: 280px; 
    }
}
.hero-titulo {
    margin-top: -60px; 
    margin-bottom: 200px; 
}
/* =========================================
   SEPARACIÓN TEXTO "CÓDIGOS" (RESERVAS)
   ========================================= */
.bajar-codigos {
    margin-top: 150px; 
}
@media (max-width: 768px) {
    .bajar-codigos {
        margin-top: 80px; 
    }
}
/* =========================================
   TÍTULOS DE CARTA VERTICALES DIVIDIDOS
   ========================================= */
.titulo-vertical-dividido {
    display: inline-flex;
    gap: 8px; 
    line-height: 1.1; 
    text-align: center;
}

.titulo-vertical-dividido .col-der {
    margin-top: 2.2rem; 
}
/* =========================================
   ESTRUCTURA CARTA: TÍTULO LATERAL Y PLATOS
   ========================================= */

.bloque-categoria {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem; 
    margin-bottom: 4rem;
}

.bloque-categoria h4 {
    margin: 0;
    flex-shrink: 0;
    min-width: 35px;
}

.bloque-categoria .platos {
    flex-grow: 1;
    position: relative; 
    width: 100%;
}

/* 4. MARCA DE AGUA "BRASA" VERTICAL */
.marca-brasa-vertical {
    position: absolute;
    right: 157px;
    top: 85px;
    font-size: 1.5rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 0.5px var(--color-naranja);
    text-align: center;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .bloque-categoria {
        gap: 1rem;
    }
    .marca-brasa-vertical {
        right: 80px; 
    }
}
/* =========================================
   CONTROL DE CAPAS (Z-INDEX) PARA MENÚ MÓVIL
   ========================================= */

#back-top,
#cookiesck,
#cookiesck_options {
    z-index: 990 !important;
}

#overlay-menu-movil {
    z-index: 1000 !important;
}
/* =========================================
   BOTÓN GLOBO IDIOMAS (DESACTIVADO TEMPORALMENTE)
   ========================================= */
#btn-globo-idioma {
    pointer-events: none !important;
    cursor: default !important;
}
/* =========================================
   AJUSTES DE TAMAÑO Y REFINAMIENTO (CARTA)
   ========================================= */

.menu-editable-cliente .platos p {
    font-size: 0.85rem !important; 
    margin-bottom: 0.7rem; 
}

.titulo-vertical-dividido {
    font-size: 0.95rem !important;
}


.titulo-seccion-carta {
    font-size: 2.2rem !important; 
}
/* =========================================
   TÍTULOS HORIZONTALES EXCLUSIVOS PARA MÓVIL
   ========================================= */

@media (max-width: 767px) {

    .bloque-categoria {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 3rem !important;
    }

    .titulo-horizontal-movil {
        font-size: 1.2rem;
        letter-spacing: 3px;
        color: var(--color-azul-oscuro);
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--color-azul-oscuro); 
        padding-bottom: 5px;
    }
}
/* =========================================
   AJUSTES DE TAMAÑO Y GROSOR (CONTACTO)
   ========================================= */

.contacto-datos-texto p,
.texto-intro-form {
    font-size: 0.9rem !important; 
    font-weight: 350 !important; 
    line-height: 1.6;
}

.texto-naranja-contacto {
    font-size: 1.1rem !important; 
    font-weight: 500 !important;
    letter-spacing: 1px;
}

.form-andarica input,
.form-andarica textarea,
.texto-checkbox {
    font-size: 0.85rem !important;
    font-weight: 350 !important;
}
/* =========================================
   TÍTULOS DEL FOOTER (H4)
   ========================================= */
.footer-info h4.texto-naranja {
    font-size: 1.1rem !important;
}
/* ==============================================
   CÓDIGO CAJABOX (LIGHTBOX NATIVO)               
   ============================================== */
#miLightbox {
    display: none; 
    position: fixed; 
    z-index: 999999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.95); 
    align-items: center; 
    justify-content: center;
    flex-direction: column;
}
#imagenLightbox {
    max-width: 90%; 
    max-height: 85%; 
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.cerrar-lightbox {
    position: absolute; 
    top: 20px; 
    right: 40px; 
    color: white; 
    font-size: 50px; 
    font-weight: 300; 
    cursor: pointer;
    transition: 0.3s;
}
.cerrar-lightbox:hover {
    color: var(--color-naranja, #FF6B00);
}
.imagen-clicable {
    cursor: zoom-in;
    transition: opacity 0.3s ease;
}
.imagen-clicable:hover {
    opacity: 0.9;
}

/* =========================================
   FLECHAS DEL LIGHTBOX
   ========================================= */
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 2.5rem;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 99999; 
    transition: background 0.3s ease;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background: var(--color-naranja); 
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}
/* =========================================
   EFECTO SUAVE (FADE) PARA LAS GALERÍAS
   ========================================= */
.intro-editorial .carousel-inner .carousel-item {
    display: block !important; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out !important;
    z-index: 1;
}

.intro-editorial .carousel-inner .carousel-item.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.collage-tres-fotos {
    margin-top: 120px !important; 
}
/* =========================================
   CENTRAR TÍTULOS VERTICALES
   ========================================= */
.bloque-categoria h4.titulo-vertical-dividido {
    align-self: center;
}