/**
 * Header y Logo - Ajustes de Altura y Tamaño
 * Design System: "Quiet Luxury"
 *
 * IMPORTANTE: Este archivo debe ser compatible con menu-premium.css
 * NO usar min-height fijo que interfiera con la transición del header
 */

/* ============================================
   OCULTAR TÍTULO DEL SITIO (el logo ya lo incluye)
   ============================================ */

/* Ocultar el título del sitio cuando hay logo */
.site-branding .site-title,
.site-header .site-title {
    display: none !important;
}

/* Ocultar descripción del sitio si está visible */
.site-branding .site-description,
.site-header .site-description {
    display: none !important;
}

/* ============================================
   AJUSTES DE ALTURA DEL HEADER
   NOTA: El header usa padding dinámico desde menu-premium.css
   NO sobrescribir min-height ni padding aquí
   ============================================ */

/* Altura base del header - REMOVIDO min-height fijo para permitir transición */
/* Los estilos de padding y altura se manejan en menu-premium.css */

/* Ajuste del contenedor del logo - sin min-height fijo */
.site-branding {
    display: flex !important;
    align-items: center !important;
    /* min-height REMOVIDO - ahora es dinámico */
}

/* ============================================
   LOGO: Tamaños para el diseño premium
   Basado en referencia-wellness-hero.html
   ============================================ */

/* Logo container - compatible con logo-effect.css */
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
    /* Removemos max-width/max-height para que logo-effect.css controle el tamaño */
}

/* Logo original de Kadence - OCULTO cuando hay logos personalizados */
/* Los logos .logo-transparent y .logo-colored se manejan en logo-effect.css */
.site-branding .custom-logo:not(.logo-transparent):not(.logo-colored) {
    /* Solo mostrar si no hay logos personalizados */
}

/* ============================================
   RESPONSIVE: Tablet
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Los ajustes responsive se manejan en menu-premium.css y logo-effect.css */
}

/* ============================================
   RESPONSIVE: Mobile
   ============================================ */

@media screen and (max-width: 768px) {
    /* Los ajustes responsive se manejan en menu-premium.css y logo-effect.css */
}

/* ============================================
   ALINEACIÓN Y ESPACIADO
   ============================================ */

/* Asegurar alineación vertical del logo */
.site-header .site-branding,
.site-header .main-navigation {
    display: flex !important;
    align-items: center !important;
}

/* Espaciado entre logo y menú - compatible con menu-premium.css */
.site-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
}

/* ============================================
   MEJORAS DE VISUALIZACIÓN
   ============================================ */

/* Transición suave - compatible con menu-premium.css */
.site-header {
    transition: all 0.3s ease !important;
}

/* Asegurar que el logo mantenga su proporción y no se distorsione */
.custom-logo {
    object-fit: contain !important;
}
/**
 * Menú Premium - Kenkatsu
 * Estilos premium para el menú principal, clonados de referencia-wellness-hero.html
 * 
 * @package KenkatsuTheme
 * @version 1.0
 */

/* ============================================
   HEADER PREMIUM (Transparente → Blanco al scroll)
   ============================================ */

/* Header Premium - Máxima prioridad z-index */
.site-header,
.header-navigation,
#masthead,
.site-header-wrap,
.header-wrap,
body .site-header,
html body .site-header {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important; /* Por encima del admin bar de WordPress (99999) */
    transition: all 0.3s ease;
    background: transparent !important;
    padding: 1.5rem 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   CONTENEDORES KADENCE - ESTRUCTURA COMPLETA
   Aplicar flex + align-items: center a TODOS los niveles
   Basado en estructura real: #masthead > #main-header > .site-header-inner-wrap > etc.
   ============================================ */

/* Nivel 1: #main-header.site-header-wrap */
/* NOTA: display controlado por header-fix.css para responsive móvil/tablet */
#masthead #main-header.site-header-wrap,
html body #masthead #main-header.site-header-wrap,
html body .site-header .site-header-wrap,
.site-header .site-header-wrap {
    /* display: block - REMOVIDO, controlado por header-fix.css */
    width: 100% !important;
}

/* Nivel 2: .site-header-inner-wrap */
#masthead .site-header-inner-wrap,
html body #masthead .site-header-inner-wrap,
html body .site-header .site-header-inner-wrap,
.site-header .site-header-inner-wrap {
    display: block !important;
    width: 100% !important;
}

/* Nivel 3-4: Contenedores upper */
#masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
html body #masthead .site-header-upper-wrap,
html body #masthead .site-header-upper-inner-wrap,
html body .site-header .site-header-upper-wrap,
html body .site-header .site-header-upper-inner-wrap,
.site-header .site-header-upper-wrap,
.site-header .site-header-upper-inner-wrap {
    display: block !important;
    width: 100% !important;
}

/* Nivel 5: .site-main-header-wrap.site-header-row-container - CRÍTICO */
#masthead .site-main-header-wrap,
#masthead .site-header-row-container,
html body #masthead .site-main-header-wrap,
html body #masthead .site-header-row-container,
html body .site-header .site-main-header-wrap,
.site-header .site-main-header-wrap {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
}

/* Nivel 6–9: Layout del header. +100px izquierda para cuadrar transparente con scrolled. */
#masthead .site-header-row-container-inner,
html body #masthead .site-header-row-container-inner,
html body .site-header .site-header-row-container-inner,
.site-header .site-header-row-container-inner {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    padding-left: calc(min(6vw, 5.5rem) + 6.25rem) !important;
    padding-right: min(6vw, 5.5rem) !important;
}

#masthead .site-container,
html body #masthead .site-container,
html body .site-header .site-container,
.site-header .site-container {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}

#masthead .site-main-header-inner-wrap,
#masthead .site-header-row,
#masthead .site-header-row-has-sides,
html body #masthead .site-main-header-inner-wrap,
html body #masthead .site-header-row,
html body .site-header .site-main-header-inner-wrap,
.site-header .site-main-header-inner-wrap,
.site-header .site-header-row {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
}

#masthead .site-header-main-section-left,
#masthead .site-header-section-left,
html body #masthead .site-header-main-section-left,
.site-header .site-header-main-section-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    height: auto !important;
}

#masthead .site-header-main-section-right,
#masthead .site-header-section-right,
html body #masthead .site-header-main-section-right,
.site-header .site-header-main-section-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: auto !important;
    height: auto !important;
}

/* Clase genérica .site-header-section */
#masthead .site-header-section,
html body #masthead .site-header-section,
.site-header .site-header-section {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
}

/* Wrappers del header: alineación básica sin forzar ancho para respetar configuración Kadence */
.site-header-inner,
.site-header-row,
.site-header-main-inner,
.header-inner,
#masthead .site-header-wrap,
.site-header .site-header-wrap {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Top por defecto (sin admin bar) */
.site-header,
.header-navigation,
#masthead,
.site-header-wrap,
.header-wrap {
    top: 0 !important;
}

/* Ajuste cuando hay admin bar de WordPress - Mayor especificidad */
body.admin-bar .site-header,
body.admin-bar .header-navigation,
body.admin-bar #masthead,
body.admin-bar .site-header-wrap,
body.admin-bar .header-wrap,
html body.admin-bar .site-header,
html body.admin-bar .header-navigation,
html body.admin-bar #masthead,
html body.admin-bar .site-header-wrap,
html body.admin-bar .header-wrap {
    top: 32px !important; /* Altura del admin bar */
}

/* Responsive: admin bar más alto en móvil */
@media screen and (max-width: 782px) {
    body.admin-bar .site-header,
    body.admin-bar .header-navigation,
    body.admin-bar #masthead,
    body.admin-bar .site-header-wrap,
    body.admin-bar .header-wrap,
    html body.admin-bar .site-header,
    html body.admin-bar .header-navigation,
    html body.admin-bar #masthead,
    html body.admin-bar .site-header-wrap,
    html body.admin-bar .header-wrap {
        top: 46px !important; /* Altura del admin bar en móvil */
    }
}

/* Transiciones suaves: fondo y sombra al pasar a scrolled (posición ya alineada) */
#masthead,
#masthead.scrolled,
.site-header,
.site-header.scrolled {
    transition: background 0.35s ease, box-shadow 0.35s ease !important;
}

.site-header.scrolled,
.header-navigation.scrolled,
#masthead.scrolled,
.site-header-wrap.scrolled,
.header-wrap.scrolled,
body .site-header.scrolled {
    background: #FFFFFF !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: calc(min(6vw, 5.5rem) + 6.25rem) !important; /* +100px para alinear logo con header transparente */
    padding-right: min(6vw, 5.5rem) !important;
    min-height: auto !important;
}

/* ============================================
   ESTADO SCROLLED - TODOS LOS CONTENEDORES KADENCE
   Selectores con #masthead para máxima especificidad
   ============================================ */

/* Nivel 1-2: Wrappers principales en scrolled */
/* NOTA: display controlado por header-fix.css para responsive móvil/tablet */
#masthead.scrolled #main-header.site-header-wrap,
#masthead.scrolled .site-header-inner-wrap,
html body #masthead.scrolled .site-header-wrap,
html body #masthead.scrolled .site-header-inner-wrap,
html body .site-header.scrolled .site-header-wrap,
html body .site-header.scrolled .site-header-inner-wrap,
.site-header.scrolled .site-header-wrap,
.site-header.scrolled .site-header-inner-wrap {
    /* display: block - REMOVIDO, controlado por header-fix.css */
    width: 100% !important;
    background: transparent !important;
}

/* Nivel 3-4: Upper wrappers en scrolled */
#masthead.scrolled .site-header-upper-wrap,
#masthead.scrolled .site-header-upper-inner-wrap,
html body #masthead.scrolled .site-header-upper-wrap,
html body #masthead.scrolled .site-header-upper-inner-wrap,
html body .site-header.scrolled .site-header-upper-wrap,
html body .site-header.scrolled .site-header-upper-inner-wrap,
.site-header.scrolled .site-header-upper-wrap,
.site-header.scrolled .site-header-upper-inner-wrap {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
}

/* Nivel 5: Main header wrap en scrolled - mismo layout que normal (logo izq, menú centro, derecha) */
#masthead.scrolled .site-main-header-wrap,
#masthead.scrolled .site-header-row-container,
html body #masthead.scrolled .site-main-header-wrap,
html body #masthead.scrolled .site-header-row-container,
html body .site-header.scrolled .site-main-header-wrap,
.site-header.scrolled .site-main-header-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-height: auto !important;
    background: transparent !important;
}

#masthead .site-header-row-container-inner,
#masthead.scrolled .site-header-row-container-inner,
.site-header .site-header-row-container-inner,
.site-header.scrolled .site-header-row-container-inner {
    transition: background 0.35s ease !important;
}
#masthead.scrolled .site-header-row-container-inner,
.site-header.scrolled .site-header-row-container-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: auto !important;
    background: transparent !important;
    box-sizing: border-box !important;
    /* Sin padding horizontal aquí: el #masthead.scrolled ya lleva el mismo padding para igualar al transparente */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#masthead.scrolled .site-container,
.site-header.scrolled .site-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}

#masthead.scrolled .site-main-header-inner-wrap,
#masthead.scrolled .site-header-row,
.site-header.scrolled .site-main-header-inner-wrap,
.site-header.scrolled .site-header-row {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

#masthead.scrolled .site-header-main-section-left,
.site-header.scrolled .site-header-main-section-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

/* Centro (menú): ocupa espacio intermedio y centra el menú como en estado normal */
#masthead.scrolled .site-header-main-section-left-center,
#masthead.scrolled .site-header-main-section-center,
.site-header.scrolled .site-header-main-section-left-center,
.site-header.scrolled .site-header-main-section-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: auto !important;
}

#masthead.scrolled .site-header-main-section-right,
.site-header.scrolled .site-header-main-section-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

#masthead.scrolled .site-header-section,
.site-header.scrolled .site-header-section {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
}

.site-header.scrolled .site-header-inner,
.site-header.scrolled .site-main-header-inner-wrap {
    background: transparent !important;
    align-items: center !important;
    display: flex !important;
    min-height: auto !important;
    padding: 0 !important;
}

/* ============================================
   MENÚ PRINCIPAL - ENLACES
   ============================================ */

/* Contenedor del menú - NO debe ser fixed, debe estar dentro del header */
/* SOLO menú DESKTOP - Excluir móvil/drawer explícitamente */
#main-header .main-navigation,
#main-header .primary-navigation,
#main-header .nav-menu,
#main-header .menu-primary-container,
#main-header .menu-primary,
#main-header #site-navigation,
#main-header .site-navigation,
#main-header .header-navigation,
#main-header .header-menu,
#main-header nav[role="navigation"],
#main-header ul.menu,
#main-header ul.nav-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    z-index: auto !important;
    flex-shrink: 0 !important;
    height: auto !important;
}

/* Asegurar que el menú mantenga la misma estructura cuando está scrolled */
.site-header.scrolled .main-navigation,
.site-header.scrolled .primary-navigation,
.site-header.scrolled .nav-menu,
.site-header.scrolled #site-navigation,
.site-header.scrolled ul.menu,
.site-header.scrolled ul.nav-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Enlaces del menú principal - EXCLUYENDO submenús */
.main-navigation > ul > li > a,
.primary-navigation > ul > li > a,
.nav-menu > li > a,
.menu-primary > li > a,
#site-navigation > ul > li > a,
.site-navigation > ul > li > a,
.header-navigation > ul > li > a,
.header-menu > ul > li > a,
nav[role="navigation"] > ul > li > a,
ul.menu > li > a,
ul.nav-menu > li > a,
.site-header .main-navigation .menu-item:not(.sub-menu .menu-item) > a,
.site-header .primary-navigation .menu-item:not(.sub-menu .menu-item) > a {
    display: inline-flex !important; /* Para alinear texto + icono */
    align-items: center !important;
    white-space: nowrap !important; /* Evitar que el texto salte a otra línea */
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Header scrolled - enlaces oscuros - MANTENER MISMO TAMAÑO */
/* EXCLUIR botón menu-reservar que debe mantener texto blanco */
.site-header.scrolled .main-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
.site-header.scrolled .primary-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
.site-header.scrolled .nav-menu a:not(.menu-reservar):not([class*="menu-reservar"]),
.site-header.scrolled .menu-primary a:not(.menu-reservar):not([class*="menu-reservar"]),
.site-header.scrolled .menu-item:not(.menu-reservar) > a,
.site-header.scrolled #site-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
.site-header.scrolled .header-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
.header-navigation.scrolled .main-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
.header-navigation.scrolled a:not(.menu-reservar):not([class*="menu-reservar"]),
#masthead.scrolled .main-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
#masthead.scrolled a:not(.menu-reservar):not([class*="menu-reservar"]),
.scrolled .main-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
.scrolled .primary-navigation a:not(.menu-reservar):not([class*="menu-reservar"]),
.scrolled .nav-menu a:not(.menu-reservar):not([class*="menu-reservar"]),
.scrolled .menu-primary a:not(.menu-reservar):not([class*="menu-reservar"]),
.scrolled .menu-item:not(.menu-reservar) > a,
.site-header.scrolled ul.menu > li:not(.menu-reservar) > a,
.site-header.scrolled ul.nav-menu > li:not(.menu-reservar) > a,
.site-header.scrolled .main-navigation .menu-item:not(.menu-reservar):not(.sub-menu .menu-item) > a,
.site-header.scrolled .primary-navigation .menu-item:not(.menu-reservar):not(.sub-menu .menu-item) > a {
    color: var(--kenkatsu-dark) !important;
    text-shadow: none !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    padding: 0.2rem 0.45rem !important;
    transition: color 0.3s ease, background 0.3s ease !important;
}

/* Hover en enlaces */
.main-navigation a:hover,
.primary-navigation a:hover,
.nav-menu a:hover,
.menu-primary a:hover,
.menu-item a:hover,
#site-navigation a:hover,
.site-navigation a:hover,
.header-navigation a:hover,
.header-menu a:hover,
nav[role="navigation"] a:hover,
ul.menu a:hover,
ul.nav-menu a:hover,
li.menu-item > a:hover {
    color: #5eead4 !important; /* teal-200 */
    text-decoration: none !important;
}

.site-header.scrolled .main-navigation a:hover,
.site-header.scrolled .primary-navigation a:hover,
.site-header.scrolled .nav-menu a:hover,
.site-header.scrolled .menu-primary a:hover,
.site-header.scrolled .menu-item a:hover,
.site-header.scrolled #site-navigation a:hover,
.site-header.scrolled .header-navigation a:hover,
.scrolled .main-navigation a:hover,
.scrolled .primary-navigation a:hover,
.scrolled .nav-menu a:hover,
.scrolled .menu-primary a:hover,
.scrolled .menu-item a:hover {
    color: var(--kenkatsu-teal) !important;
}

/* ============================================
   DROPDOWNS PREMIUM
   ============================================ */

/* Contenedor del dropdown */
.menu-item-has-children {
    position: relative;
}

/* Submenú (dropdown) - Transición idéntica a la página de referencia */
.sub-menu,
.children,
.menu-item-has-children .sub-menu,
.menu-item-has-children .children,
li.menu-item-has-children > ul,
li.menu-item-has-children > .sub-menu {
    position: absolute !important;
    top: calc(100% + 0.25rem) !important; /* Muy cerca del item, casi sin gap */
    left: 0 !important;
    min-width: 12rem !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important; /* Empieza 10px más arriba */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Transición suave con easing mejorado */
    z-index: 1000 !important;
    margin-top: 0 !important; /* Sin margen extra para evitar gaps */
    list-style: none !important;
    margin-left: 0 !important;
    pointer-events: none !important; /* Evitar interacciones cuando está oculto */
    will-change: opacity, transform !important; /* Optimización para la animación */
}

/* Mostrar dropdown al hover - MANTENER ABIERTO cuando el cursor está sobre el item O sobre el dropdown */
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:hover > .children,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children:focus-within > .children,
.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:hover .children,
.menu-item-has-children > .sub-menu:hover,
.menu-item-has-children > .children:hover,
.menu-item-has-children .sub-menu:hover,
.menu-item-has-children .children:hover,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:hover > .sub-menu,
li.menu-item-has-children:hover .sub-menu,
li.menu-item-has-children > ul:hover,
li.menu-item-has-children > .sub-menu:hover,
li.menu-item-has-children .sub-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: auto !important; /* Permitir interacciones cuando está visible */
}

/* Asegurar que el dropdown se mantiene abierto cuando el cursor está sobre cualquier parte del item padre */
.menu-item-has-children:hover,
li.menu-item-has-children:hover {
    position: relative !important;
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:hover .children,
li.menu-item-has-children:hover .sub-menu,
li.menu-item-has-children:hover ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Enlaces del submenú - Máxima especificidad para sobrescribir Kadence, buen contraste */
html body .site-header .main-navigation .sub-menu a,
html body .site-header .main-navigation .children a,
html body .site-header .primary-navigation .sub-menu a,
html body .site-header .primary-navigation .children a,
html body .site-header .nav-menu .sub-menu a,
html body .site-header .nav-menu .children a,
html body .site-header .menu-item-has-children .sub-menu a,
html body .site-header .menu-item-has-children .children a,
html body .site-header li.menu-item-has-children > ul a,
html body .site-header li.menu-item-has-children > .sub-menu a,
html body .sub-menu a,
html body .children a,
html body .menu-item .sub-menu a,
html body .menu-item .children a {
    display: block !important;
    padding: 0.6rem 1.2rem !important;
    background: #FFFFFF !important;
    color: var(--kenkatsu-dark) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important; /* MAYÚSCULAS como la referencia */
    letter-spacing: 0.05em !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

/* Asegurar que los submenús tengan MAYÚSCULAS */
html body .menu-item-has-children .sub-menu,
html body .menu-item-has-children .children,
html body li.menu-item-has-children > ul,
html body li.menu-item-has-children > .sub-menu,
html body .sub-menu,
html body .children {
    text-transform: uppercase !important;
}

.sub-menu a:hover,
.children a:hover {
    background-color: #f0fdfa !important; /* teal-50 */
    color: var(--kenkatsu-teal-dark) !important;
}

/* Cuando la cabecera es transparente (no scrolled), usar el verde corporativo oscuro
   para el texto de los elementos del dropdown, para máximo contraste con el fondo blanco */
.site-header:not(.scrolled) .sub-menu a,
.site-header:not(.scrolled) .children a {
    color: var(--kenkatsu-teal-dark) !important;
}

.site-header:not(.scrolled) .sub-menu a:hover,
.site-header:not(.scrolled) .children a:hover {
    background-color: #e0f2f1 !important;
    color: var(--kenkatsu-teal-darker, #0f766e) !important;
}

/* Indicador de dropdown (flecha) */
.menu-item-has-children > a::after,
li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

/* Para que los elementos SIN submenú se alineen igual que los que tienen flecha,
   añadimos un pseudo-elemento transparente con el mismo ancho. */
.menu-item:not(.menu-item-has-children) > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid transparent; /* invisible */
    margin-left: 0.25rem;
}

.menu-item-has-children:hover > a::after,
.menu-item-has-children:focus-within > a::after,
li.menu-item-has-children:hover > a::after,
li.menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}

/* Ocultar los toggles propios de Kadence para que no haya dos iconos de dropdown */
.site-header .dropdown-nav-toggle,
.site-header .dropdown-nav-toggle-icon,
.site-header .menu-item-has-children > button,
.site-header .menu-item-has-children .nav-drop-toggle {
    display: none !important;
}

/* ============================================
   BOTÓN RESERVAR PREMIUM
   ============================================ */

/* Buscar el botón de reserva en el menú */
.menu-item a.button,
.menu-item a.btn-reservar,
.menu-item .reservar-button,
.menu-item button {
    background-color: var(--kenkatsu-teal) !important;
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer;
}

.menu-item a.button:hover,
.menu-item a.btn-reservar:hover,
.menu-item .reservar-button:hover,
.menu-item button:hover {
    background-color: var(--kenkatsu-teal-dark) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
}

/* Si el botón está fuera del menú, añadir clase .kenkatsu-reservar-btn */
.kenkatsu-reservar-btn {
    background-color: var(--kenkatsu-teal) !important;
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
}

.kenkatsu-reservar-btn:hover {
    background-color: var(--kenkatsu-teal-dark) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

/* ============================================
   BOTÓN RESERVAR - FORZAR TEXTO BLANCO SIEMPRE
   Sobrescribir reglas generales del menú scrolled
   ============================================ */

/* Estado normal (header transparente) */
#masthead:not(.scrolled) #primary-menu > li.menu-reservar > a,
#masthead:not(.scrolled) .menu-item.menu-reservar > a,
.site-header:not(.scrolled) .menu-item.menu-reservar > a,
html body #masthead:not(.scrolled) #primary-menu > li.menu-reservar > a,
html body #masthead:not(.scrolled) .menu-item.menu-reservar > a {
    background-color: #0d9488 !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Estado scrolled (header blanco) - FORZAR TEXTO BLANCO */
#masthead.scrolled #primary-menu > li.menu-reservar > a,
#masthead.scrolled .menu-item.menu-reservar > a,
.site-header.scrolled .menu-item.menu-reservar > a,
.site-header.scrolled #primary-menu > li.menu-reservar > a,
html body #masthead.scrolled #primary-menu > li.menu-reservar > a,
html body #masthead.scrolled .menu-item.menu-reservar > a,
html body .site-header.scrolled #primary-menu > li.menu-reservar > a,
html body .site-header.scrolled .menu-item.menu-reservar > a,
.scrolled #primary-menu > li.menu-reservar > a,
.scrolled .menu-item.menu-reservar > a,
body #masthead.scrolled #primary-menu > li.menu-reservar > a,
body #masthead.scrolled .menu-item.menu-reservar > a,
body .site-header.scrolled #primary-menu > li.menu-reservar > a,
body .site-header.scrolled .menu-item.menu-reservar > a {
    background-color: #0d9488 !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    /* Forzar color blanco con máxima especificidad */
    --kenkatsu-text-color: #FFFFFF !important;
}

/* Hover del botón - siempre texto blanco */
#masthead #primary-menu > li.menu-reservar > a:hover,
#masthead .menu-item.menu-reservar > a:hover,
#masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
#masthead.scrolled .menu-item.menu-reservar > a:hover,
.site-header.scrolled .menu-item.menu-reservar > a:hover,
html body #masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
html body #masthead.scrolled .menu-item.menu-reservar > a:hover,
body #masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
body #masthead.scrolled .menu-item.menu-reservar > a:hover,
body .site-header.scrolled #primary-menu > li.menu-reservar > a:hover,
body .site-header.scrolled .menu-item.menu-reservar > a:hover {
    background-color: #0f766e !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    /* Forzar color blanco con máxima especificidad */
    --kenkatsu-text-color: #FFFFFF !important;
}

/* ============================================
   MENÚ MÓVIL PREMIUM
   ============================================ */

/* Botón hamburguesa */
.menu-toggle,
.mobile-menu-toggle {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 0.5rem !important;
    cursor: pointer;
    z-index: 10000;
}

.site-header.scrolled .menu-toggle,
.site-header.scrolled .mobile-menu-toggle {
    color: var(--kenkatsu-dark) !important;
}

/* Menú móvil overlay - EXCLUIR drawer de Kadence */
/* NO aplicar a #mobile-drawer que tiene su propia estructura */
.mobile-navigation:not(#mobile-drawer .mobile-navigation),
.mobile-menu:not(#mobile-drawer .mobile-menu):not(#mobile-menu) {
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 5rem 1rem;
    overflow-y: auto;
}

.mobile-navigation.active:not(#mobile-drawer .mobile-navigation),
.mobile-menu.active:not(#mobile-drawer .mobile-menu):not(#mobile-menu) {
    opacity: 1;
    visibility: visible;
}

/* Enlaces del menú móvil - EXCLUIR drawer de Kadence */
.mobile-navigation:not(#mobile-drawer .mobile-navigation) a,
.mobile-menu:not(#mobile-drawer .mobile-menu):not(#mobile-menu) a {
    font-size: 1.5rem !important;
    font-family: 'Lora', 'Playfair Display', Georgia, serif !important;
    color: var(--kenkatsu-dark) !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease;
}

.mobile-navigation:not(#mobile-drawer .mobile-navigation) a:hover,
.mobile-menu:not(#mobile-drawer .mobile-menu):not(#mobile-menu) a:hover {
    color: var(--kenkatsu-teal) !important;
}

/* ============================================
   AJUSTES ESPECÍFICOS KADENCE
   ============================================ */

/* Override estilos de Kadence */
.kadence-navigation,
.kadence-menu-primary,
.header-navigation-wrap,
.header-navigation,
#site-navigation,
.site-header .header-navigation,
.site-header .main-navigation {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

/* Override estilos de Kadence - SOLO menú principal, NO submenús */
.kadence-navigation > ul > li > a,
.kadence-menu-primary > ul > li > a,
.header-navigation-wrap > ul > li > a,
.header-navigation > ul > li > a,
#site-navigation > ul > li > a,
.site-header .header-navigation > ul > li > a,
.site-header .main-navigation > ul > li > a,
.kadence-navigation .menu-item:not(.sub-menu .menu-item) > a,
.kadence-menu-primary .menu-item:not(.sub-menu .menu-item) > a,
.header-navigation .menu-item:not(.sub-menu .menu-item) > a,
.site-header .main-navigation .menu-item:not(.sub-menu .menu-item) > a {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Selectores más específicos para asegurar que se apliquen - EXCLUYENDO submenús */
body .site-header .main-navigation > ul > li > a,
body .site-header .primary-navigation > ul > li > a,
body .site-header .header-navigation > ul > li > a,
body .site-header #site-navigation > ul > li > a,
body .site-header .main-navigation .menu-item:not(.sub-menu .menu-item) > a,
body .site-header .primary-navigation .menu-item:not(.sub-menu .menu-item) > a,
body .site-header .header-navigation .menu-item:not(.sub-menu .menu-item) > a {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body .site-header.scrolled .main-navigation a,
body .site-header.scrolled .primary-navigation a,
body .site-header.scrolled .header-navigation a,
body .site-header.scrolled #site-navigation a {
    color: var(--kenkatsu-dark) !important;
    text-shadow: none !important;
}

/* Asegurar color oscuro también para las clases específicas de Kadence en modo scrolled */
.site-header.scrolled .kadence-navigation a,
.site-header.scrolled .kadence-menu-primary a,
.site-header.scrolled .header-navigation-wrap a,
.site-header.scrolled .header-navigation a,
.site-header.scrolled #site-navigation a {
    color: var(--kenkatsu-dark) !important;
    text-shadow: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .main-navigation,
    .primary-navigation,
    .nav-menu {
        display: none;
    }
    
    .menu-toggle,
    .mobile-menu-toggle {
        display: block;
    }
}

@media (min-width: 769px) {
    .menu-toggle,
    .mobile-menu-toggle {
        display: none;
    }
    
    .main-navigation,
    .primary-navigation,
    .nav-menu {
        display: flex;
    }
}

/* ============================================
   UTILIDADES
   ============================================ */

/* Espaciado entre items del menú */
.menu-item {
    margin: 0 !important;
}

/* Asegurar que el menú no se rompe */
.main-navigation ul,
.primary-navigation ul,
.nav-menu ul {
    display: flex;
    flex-wrap: nowrap; /* Una sola fila como en la referencia */
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li,
.primary-navigation li,
.nav-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================
   OVERRIDES FINALES PARA SUBMENÚ (COLOR Y CONTRASTE)
   ============================================ */

/* Forzar color y sombra correctos en todos los submenús, por encima de cualquier
   regla anterior (Kadence o nuestra propia) que ponga el texto en blanco. */
html body ul.sub-menu li a,
html body ul.children li a {
    color: var(--kenkatsu-teal-dark) !important; /* verde corporativo oscuro por defecto */
    text-shadow: none !important;
}

/* En modo header blanco (scrolled), usar color oscuro neutro para integrarlo mejor */
html body .site-header.scrolled ul.sub-menu li a,
html body .site-header.scrolled ul.children li a {
    color: var(--kenkatsu-dark) !important;
    text-shadow: none !important;
}

/* Overrides aún más específicos para ganar a
   body .site-header .main-navigation a { color:#fff !important; ... } de Kadence */
html body .site-header .main-navigation ul.sub-menu li > a,
html body .site-header .primary-navigation ul.sub-menu li > a,
html body .site-header .nav-menu ul.sub-menu li > a {
    color: var(--kenkatsu-teal-dark) !important;
    text-shadow: none !important;
}

html body .site-header.scrolled .main-navigation ul.sub-menu li > a,
html body .site-header.scrolled .primary-navigation ul.sub-menu li > a,
html body .site-header.scrolled .nav-menu ul.sub-menu li > a {
    color: var(--kenkatsu-dark) !important;
    text-shadow: none !important;
}

/* ============================================
   PREVENCIÓN DE DESAJUSTES EN TRANSICIÓN
   ============================================ */

/* Asegurar que NINGÚN contenedor cambie de tamaño durante transición */
#masthead,
#masthead.scrolled,
.site-header,
.site-header.scrolled {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Contenedores Kadence - prevenir cambios de altura/layout */
#masthead .site-header-wrap,
#masthead .site-header-inner-wrap,
#masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .site-main-header-wrap,
#masthead .site-header-row-container-inner,
#masthead .site-container,
#masthead .site-main-header-inner-wrap,
#masthead .site-header-row,
#masthead .site-header-main-section-left,
#masthead .site-header-main-section-right,
#masthead.scrolled .site-header-wrap,
#masthead.scrolled .site-header-inner-wrap,
#masthead.scrolled .site-header-upper-wrap,
#masthead.scrolled .site-header-upper-inner-wrap,
#masthead.scrolled .site-main-header-wrap,
#masthead.scrolled .site-header-row-container-inner,
#masthead.scrolled .site-container,
#masthead.scrolled .site-main-header-inner-wrap,
#masthead.scrolled .site-header-row,
#masthead.scrolled .site-header-main-section-left,
#masthead.scrolled .site-header-main-section-right,
.site-header .site-header-wrap,
.site-header .site-header-inner-wrap,
.site-header .site-header-upper-wrap,
.site-header .site-header-upper-inner-wrap,
.site-header .site-main-header-wrap,
.site-header .site-header-row-container-inner,
.site-header .site-container,
.site-header .site-main-header-inner-wrap,
.site-header .site-header-row,
.site-header .site-header-main-section-left,
.site-header .site-header-main-section-right,
.site-header.scrolled .site-header-wrap,
.site-header.scrolled .site-header-inner-wrap,
.site-header.scrolled .site-header-upper-wrap,
.site-header.scrolled .site-header-upper-inner-wrap,
.site-header.scrolled .site-main-header-wrap,
.site-header.scrolled .site-header-row-container-inner,
.site-header.scrolled .site-container,
.site-header.scrolled .site-main-header-inner-wrap,
.site-header.scrolled .site-header-row,
.site-header.scrolled .site-header-main-section-left,
.site-header.scrolled .site-header-main-section-right {
    height: auto !important;
    min-height: auto !important;
    line-height: normal !important;
    vertical-align: middle !important;
}

/* ============================================
   ELEMENTOS ESPECÍFICOS DE KADENCE
   ============================================ */

/* Fix para el nav-item de Kadence - .site-header-item */
#masthead .site-header-item,
#masthead .site-header-focus-item,
#masthead.scrolled .site-header-item,
#masthead.scrolled .site-header-focus-item,
.site-header .site-header-item,
.site-header .site-header-focus-item,
.site-header.scrolled .site-header-item,
.site-header.scrolled .site-header-focus-item {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

/* Navegación principal de Kadence */
#masthead .main-navigation,
#masthead .header-navigation,
#masthead #site-navigation,
#masthead.scrolled .main-navigation,
#masthead.scrolled .header-navigation,
#masthead.scrolled #site-navigation,
.site-header .header-menu-container,
.site-header .primary-menu-container,
.site-header .header-navigation,
.site-header .navigation,
.site-header.scrolled .header-menu-container,
.site-header.scrolled .primary-menu-container,
.site-header.scrolled .header-navigation,
.site-header.scrolled .navigation {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
}

/* Contenedor del menú primario */
#masthead .primary-menu-container,
#masthead .header-menu-container,
#masthead.scrolled .primary-menu-container,
#masthead.scrolled .header-menu-container {
    display: flex !important;
    align-items: center !important;
}

/* Lista del menú ul#primary-menu */
#masthead #primary-menu,
#masthead ul.menu,
#masthead.scrolled #primary-menu,
#masthead.scrolled ul.menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Items del menú */
#masthead #primary-menu > li.menu-item,
#masthead ul.menu > li.menu-item,
#masthead.scrolled #primary-menu > li.menu-item,
#masthead.scrolled ul.menu > li.menu-item {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Kadence navigation items - .nav-drop-title-wrap */
#masthead .nav-drop-title-wrap,
#masthead .menu-item-inner,
#masthead.scrolled .nav-drop-title-wrap,
#masthead.scrolled .menu-item-inner,
.site-header .nav-drop-title-wrap,
.site-header .menu-item-inner,
.site-header.scrolled .nav-drop-title-wrap,
.site-header.scrolled .menu-item-inner {
    display: inline-flex !important;
    align-items: center !important;
}

/* Kadence dropdown toggle icon */
#masthead .dropdown-nav-toggle,
#masthead.scrolled .dropdown-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 0.25rem !important;
}

/* Site branding / logo container - mantener dimensiones consistentes */
#masthead .site-branding,
#masthead .custom-logo-link,
#masthead .brand,
#masthead.scrolled .site-branding,
#masthead.scrolled .custom-logo-link,
#masthead.scrolled .brand,
.site-header .site-branding,
.site-header .custom-logo-link,
.site-header.scrolled .site-branding,
.site-header.scrolled .custom-logo-link {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
}

/* Header navigation layout: menú alineado a la izquierda del centro (no a la derecha) */
#masthead .header-navigation-layout-stretch-false,
#masthead .header-navigation-style-standard,
#masthead.scrolled .header-navigation-layout-stretch-false,
#masthead.scrolled .header-navigation-style-standard {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* ============================================
   REGLA FINAL - FORZAR TEXTO BLANCO BOTÓN RESERVAR SCROLLED
   Máxima especificidad para sobrescribir cualquier regla
   ============================================ */
html body #masthead.scrolled #primary-menu > li.menu-reservar > a,
html body #masthead.scrolled .menu-item.menu-reservar > a,
html body .site-header.scrolled #primary-menu > li.menu-reservar > a,
html body .site-header.scrolled .menu-item.menu-reservar > a,
body #masthead.scrolled #primary-menu > li.menu-reservar > a,
body #masthead.scrolled .menu-item.menu-reservar > a,
body .site-header.scrolled #primary-menu > li.menu-reservar > a,
body .site-header.scrolled .menu-item.menu-reservar > a,
#masthead.scrolled #primary-menu > li.menu-reservar > a,
#masthead.scrolled .menu-item.menu-reservar > a,
.site-header.scrolled #primary-menu > li.menu-reservar > a,
.site-header.scrolled .menu-item.menu-reservar > a {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/* Hover - también forzar texto blanco */
html body #masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
html body #masthead.scrolled .menu-item.menu-reservar > a:hover,
html body .site-header.scrolled #primary-menu > li.menu-reservar > a:hover,
html body .site-header.scrolled .menu-item.menu-reservar > a:hover,
body #masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
body #masthead.scrolled .menu-item.menu-reservar > a:hover,
body .site-header.scrolled #primary-menu > li.menu-reservar > a:hover,
body .site-header.scrolled .menu-item.menu-reservar > a:hover,
#masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
#masthead.scrolled .menu-item.menu-reservar > a:hover,
.site-header.scrolled #primary-menu > li.menu-reservar > a:hover,
.site-header.scrolled .menu-item.menu-reservar > a:hover {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/**
 * Logo Effect - Kenkatsu
 * VERSIÓN SIMPLIFICADA - Solo CSS
 * 
 * Usa el logo original de Kadence (.custom-logo)
 * Aplica filter: brightness(0) invert(1) para hacerlo blanco
 * Cuando hay .scrolled, quita el filtro para mostrar colores originales
 * 
 * @package KenkatsuTheme
 * @version 2.0
 */

/* ============================================
   CONTENEDOR DEL LOGO
   ============================================ */

.site-branding,
.site-branding a.brand,
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* ============================================
   LOGO - ESTADO INICIAL (Header transparente)
   Logo en BLANCO sobre fondo oscuro
   ============================================ */

/* Logo transparente: misma altura que scrolled (variable única), filtro blanco */
.site-header:not(.scrolled) .custom-logo,
.site-header:not(.scrolled) .site-branding img,
#masthead:not(.scrolled) .custom-logo,
#masthead:not(.scrolled) .site-branding img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: brightness(0) invert(1) !important;
    height: var(--kenkatsu-logo-height, 5.4rem) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    background: transparent !important;
    transition: filter 0.35s ease, opacity 0.35s ease !important;
}

@media (min-width: 768px) {
    .site-header:not(.scrolled) .custom-logo,
    .site-header:not(.scrolled) .site-branding img,
    #masthead:not(.scrolled) .custom-logo,
    #masthead:not(.scrolled) .site-branding img {
        height: var(--kenkatsu-logo-height, 5.4rem) !important;
    }
}

/* ============================================
   LOGO - ESTADO SCROLLED (Header blanco)
   Logo con COLORES originales
   ============================================ */

/* Logo scrolled: misma altura que transparente (--kenkatsu-logo-height), solo cambia el filtro */
.site-header.scrolled .custom-logo,
.site-header.scrolled .site-branding img,
#masthead.scrolled .custom-logo,
#masthead.scrolled .site-branding img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    height: var(--kenkatsu-logo-height, 5.4rem) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    background: transparent !important;
    transition: filter 0.35s ease, opacity 0.35s ease !important;
}

@media (min-width: 768px) {
    .site-header.scrolled .custom-logo,
    .site-header.scrolled .site-branding img,
    #masthead.scrolled .custom-logo,
    #masthead.scrolled .site-branding img {
        height: var(--kenkatsu-logo-height, 5.4rem) !important;
    }
}

/* ============================================
   LIMPIAR ELEMENTOS ANTIGUOS (por si quedaron)
   ============================================ */

.logo-transparent,
.logo-colored,
.logo-wrapper {
    display: none !important;
}

/* ============================================
   ASEGURAR FONDO TRANSPARENTE
   ============================================ */

.site-branding img,
.custom-logo-link img,
.custom-logo,
a.brand img {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                                                                           ║
 * ║     🔒 HEADER PREMIUM - KENKATSU - ARCHIVO BLOQUEADO 🔒                   ║
 * ║                                                                           ║
 * ║     ⚠️  NO MODIFICAR ESTE ARCHIVO SIN AUTORIZACIÓN ⚠️                     ║
 * ║                                                                           ║
 * ║     Este archivo contiene los estilos DEFINITIVOS del header.             ║
 * ║     Ha sido probado y optimizado exhaustivamente.                         ║
 * ║                                                                           ║
 * ║     Fecha de bloqueo: Diciembre 2024                                      ║
 * ║     Versión: 2.0 FINAL                                                    ║
 * ║                                                                           ║
 * ║     SI NECESITAS CAMBIOS EN EL HEADER:                                    ║
 * ║     1. Documenta el cambio necesario                                      ║
 * ║     2. Consulta con el equipo de desarrollo                               ║
 * ║     3. Haz backup antes de cualquier modificación                         ║
 * ║                                                                           ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 * 
 * @package KenkatsuTheme
 * @version 2.0 FINAL
 * @locked true
 * @tested Desktop, Tablet, Mobile
 */


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 1: RESET ESTRUCTURAL                      ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * PROPÓSITO: Quitar position:fixed de contenedores internos.
 * Solo #masthead debe ser fixed para evitar conflictos de posicionamiento.
 * PROBADO: ✓ Desktop ✓ Tablet ✓ Móvil
 */
#main-header,
#main-header.site-header-wrap,
.site-header-wrap,
.site-header-inner-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 2: HEADER PRINCIPAL                       ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * PROPÓSITO: Definir el header como elemento fijo con transiciones suaves.
 * CRÍTICO: z-index 999999 es necesario para estar sobre todo el contenido.
 * PROBADO: ✓ Desktop ✓ Tablet ✓ Móvil
 */
#masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0.6rem 0 !important;
    transition: none !important;
}

/* Forzar transparencia incluso si Kadence aplica estilos inline */
/* MÁXIMA ESPECIFICIDAD para sobrescribir estilos inline de Kadence */
html body #masthead[style*="background"],
html body #masthead[style*="background-color"],
html body #masthead[style*="rgb(255"],
html body #masthead[style*="rgb(255, 255, 255)"],
html body #masthead .kadence-sticky-header,
html body #masthead .kadence-sticky-header[style*="background"],
html body #masthead .kadence-sticky-header .site-header-row-container-inner,
html body #masthead .kadence-sticky-header .site-header-row-container-inner[style*="background"],
html body #masthead .site-header-row-container-inner,
html body #masthead .site-header-row-container-inner[style*="background"],
body #masthead[style*="background"],
body #masthead[style*="background-color"],
body #masthead .kadence-sticky-header,
body #masthead .kadence-sticky-header .site-header-row-container-inner,
body #masthead .site-header-row-container-inner,
#masthead[style*="background"],
#masthead[style*="background-color"],
#masthead .kadence-sticky-header,
#masthead .kadence-sticky-header .site-header-row-container-inner,
#masthead .site-header-row-container-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Forzar transparencia en todos los contenedores internos de Kadence cuando NO está scrolled */
html body #masthead:not(.scrolled) .kadence-sticky-header,
html body #masthead:not(.scrolled) .site-header-row-container,
html body #masthead:not(.scrolled) .site-header-row-container-inner,
html body #masthead:not(.scrolled) .site-header-row-container-inner > *,
html body #masthead:not(.scrolled) .site-header-row-container-inner[style*="background"],
html body #masthead:not(.scrolled) .site-header-row-container-inner[style*="rgb(255"],
html body #masthead:not(.scrolled) .site-header-row-container-inner[style*="rgb(255, 255, 255)"],
body #masthead:not(.scrolled) .kadence-sticky-header,
body #masthead:not(.scrolled) .site-header-row-container,
body #masthead:not(.scrolled) .site-header-row-container-inner,
body #masthead:not(.scrolled) .site-header-row-container-inner > *,
#masthead:not(.scrolled) .kadence-sticky-header,
#masthead:not(.scrolled) .site-header-row-container,
#masthead:not(.scrolled) .site-header-row-container-inner,
#masthead:not(.scrolled) .site-header-row-container-inner > * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* REGLA ULTRA ESPECÍFICA: Forzar transparencia en .site-header-row-container-inner con TODAS las combinaciones posibles */
html body #masthead:not(.scrolled) .kadence-sticky-header.item-is-stuck.item-at-start .site-header-row-container-inner,
html body #masthead:not(.scrolled) .kadence-sticky-header.item-is-stuck .site-header-row-container-inner,
html body #masthead:not(.scrolled) .kadence-sticky-header .site-header-row-container-inner,
html body #masthead:not(.scrolled) .site-header-row-container-inner,
html body #masthead:not(.scrolled) .site-header-row-container .site-header-row-container-inner,
body #masthead:not(.scrolled) .kadence-sticky-header.item-is-stuck.item-at-start .site-header-row-container-inner,
body #masthead:not(.scrolled) .kadence-sticky-header.item-is-stuck .site-header-row-container-inner,
body #masthead:not(.scrolled) .kadence-sticky-header .site-header-row-container-inner,
body #masthead:not(.scrolled) .site-header-row-container-inner,
#masthead:not(.scrolled) .kadence-sticky-header.item-is-stuck.item-at-start .site-header-row-container-inner,
#masthead:not(.scrolled) .kadence-sticky-header.item-is-stuck .site-header-row-container-inner,
#masthead:not(.scrolled) .kadence-sticky-header .site-header-row-container-inner,
#masthead:not(.scrolled) .site-header-row-container-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/*
 * PROPÓSITO: Ajuste para WordPress Admin Bar.
 * CRÍTICO: Sin esto el header queda detrás de la barra de admin.
 */
body.admin-bar #masthead {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar #masthead {
        top: 46px !important;
    }
}

/*
 * PROPÓSITO: Estado después de hacer scroll - header compacto blanco.
 * EFECTO: Fondo blanco con sombra sutil.
 * CRÍTICO: Solo cuando tiene clase .scrolled debe ser opaco
 */
#masthead.scrolled {
    background: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 0.4rem 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 3: LAYOUT FLEXBOX                         ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fila del header: ancho completo, sin max-width que deje espacio vacío a la derecha */
#masthead .site-main-header-inner-wrap,
#masthead .site-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1rem !important;
}

/*
 * PROPÓSITO: Secciones izquierda (logo) y derecha (menú).
 */
#masthead .site-header-main-section-left {
    display: flex !important;
    align-items: center !important;
}

#masthead .site-header-main-section-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 4: LOGO                                   ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * PROPÓSITO: Contenedor del logo alineado verticalmente.
 */
#masthead .site-branding {
    display: flex !important;
    align-items: center !important;
}

#masthead .site-branding a.brand {
    display: flex !important;
    align-items: center !important;
}

/*
 * PROPÓSITO: Logo en estado inicial (sobre fondo oscuro/imagen).
 * EFECTO: Filtro brightness(0) invert(1) hace el logo blanco.
 * CRÍTICO: height 4rem es el tamaño base móvil.
 */
#masthead:not(.scrolled) .custom-logo {
    display: block !important;
    height: 4rem !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease, height 0.3s ease !important;
}

/*
 * PROPÓSITO: Logo después de scroll (fondo blanco, logo en colores).
 * EFECTO: Sin filtro muestra colores originales del logo.
 */
#masthead.scrolled .custom-logo {
    display: block !important;
    height: 3.5rem !important;
    width: auto !important;
    filter: none !important;
    transition: filter 0.3s ease, height 0.3s ease !important;
}

/*
 * PROPÓSITO: Logo más grande en desktop (≥768px).
 */
@media (min-width: 768px) {
    #masthead:not(.scrolled) .custom-logo {
        height: 5rem !important;
    }
    #masthead.scrolled .custom-logo {
        height: 4rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 5: MENÚ PRINCIPAL                         ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * PROPÓSITO: Contenedor de navegación con flexbox.
 */
#masthead .main-navigation,
#masthead #site-navigation {
    display: flex !important;
    align-items: center !important;
}

#masthead .primary-menu-container,
#masthead .header-menu-container {
    display: flex !important;
    align-items: center !important;
}

/*
 * PROPÓSITO: Lista del menú horizontal con gap consistente.
 */
#masthead #primary-menu,
#masthead ul.menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#masthead #primary-menu > li {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/*
 * PROPÓSITO: Estilos de enlaces del menú principal.
 * font-size: 0.9rem es el tamaño premium ajustado.
 */
#masthead #primary-menu > li > a,
#masthead .main-navigation > ul > li > a,
body #masthead .main-navigation .menu-item:not(.sub-menu .menu-item) > a,
body #masthead .primary-navigation .menu-item:not(.sub-menu .menu-item) > a,
body .site-header#masthead .main-navigation .menu-item > a,
#masthead #site-navigation .menu-item > a {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

/*
 * PROPÓSITO: Color blanco con sombra sobre fondo hero.
 */
#masthead:not(.scrolled) #primary-menu > li > a {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/*
 * PROPÓSITO: Color más claro y suave sobre fondo blanco después de scroll.
 * IMPORTANTE: Excluir el botón menu-reservar que debe mantener texto blanco.
 * NOTA: Esta regla ha sido comentada porque estaba interfiriendo con el botón de reservas.
 * Los colores del menú scrolled se manejan ahora en menu-premium.css con mayor especificidad.
 */
/* 
#masthead.scrolled #primary-menu > li > a:not(.menu-reservar):not([class*="menu-reservar"]),
#masthead.scrolled #primary-menu > li:not(.menu-reservar) > a {
    color: #4a5568 !important;
    text-shadow: none !important;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 6: DROPDOWNS/SUBMENÚS                     ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * PROPÓSITO: Posicionamiento relativo para dropdowns.
 */
#masthead .menu-item-has-children {
    position: relative !important;
}

/*
 * PROPÓSITO: Ocultar iconos duplicados de Kadence.
 */
#masthead .dropdown-nav-special-toggle,
#masthead .menu-item-has-children > button:not(.dropdown-nav-toggle) {
    display: none !important;
}

#masthead .menu-item-has-children > a::after,
#masthead li.menu-item-has-children > a::after,
#masthead .menu-item:not(.menu-item-has-children) > a::after {
    display: none !important;
    content: none !important;
}

/*
 * PROPÓSITO: Submenú cerrado por defecto con animación de entrada.
 * ANIMACIÓN: translateY(-10px) + opacity 0 → translateY(0) + opacity 1
 */
#masthead #primary-menu .sub-menu,
#masthead .menu-item-has-children > .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 180px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    margin-top: 0 !important;
    z-index: 1000 !important;
    list-style: none !important;
    /* Estado CERRADO */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
    /* Transición de CIERRE */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0s linear 0.3s !important;
}

/*
 * PROPÓSITO: Anular :hover nativo de Kadence - JS controla apertura.
 * CRÍTICO: Sin esto el hover nativo interfiere con nuestra animación.
 */
#masthead #primary-menu .menu-item-has-children:hover > .sub-menu,
#masthead #primary-menu li.menu-item-has-children:hover > .sub-menu,
#masthead .menu-item-has-children:hover > .sub-menu,
#masthead .menu-item-has-children:focus-within > .sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
}

/*
 * PROPÓSITO: Zona puente invisible entre menú y submenú.
 * CRÍTICO: Permite mover el cursor al submenú sin que se cierre.
 */
#masthead .menu-item-has-children::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -5px;
    right: -5px;
    height: 10px;
    background: transparent;
    pointer-events: auto;
}

/*
 * PROPÓSITO: Estilos de elementos del submenú.
 */
#masthead .sub-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * PROPÓSITO: Enlaces del submenú con MAYÚSCULAS como la referencia.
 * font-size: 1.05rem = tamaño 20% más grande que el menú principal.
 */
#masthead .sub-menu a,
#masthead .sub-menu li a,
#masthead #primary-menu .sub-menu a,
body #masthead .sub-menu a {
    display: block !important;
    padding: 12px 20px !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

/*
 * PROPÓSITO: Hover en enlaces del submenú - fondo gris, texto teal.
 */
#masthead .sub-menu a:hover,
#masthead .sub-menu li a:hover,
#masthead #primary-menu .sub-menu a:hover,
body #masthead .sub-menu a:hover {
    background-color: #f3f4f6 !important;
    color: #0d9488 !important;
    text-transform: uppercase !important;
}

/*
 * PROPÓSITO: Estado ABIERTO del dropdown (controlado por JS).
 * CLASE: .dropdown-open aplicada por dropdown-smooth.js
 */
#masthead #primary-menu .menu-item-has-children.dropdown-open > .sub-menu,
#masthead #primary-menu li.menu-item-has-children.dropdown-open > .sub-menu,
#masthead .menu-item-has-children.dropdown-open > .sub-menu,
#masthead #primary-menu .menu-item-has-children.dropdown-open:hover > .sub-menu,
#masthead .menu-item-has-children.dropdown-open:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    /* Transición de APERTURA - visibility inmediata */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0s linear 0s !important;
}

/*
 * PROPÓSITO: Icono de flecha único para dropdowns.
 */
#masthead .menu-item-has-children > a .dropdown-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 0.25rem !important;
}

#masthead .menu-item-has-children > a .dropdown-nav-toggle .kadence-svg-icon {
    width: 12px !important;
    height: 12px !important;
    transition: transform 0.2s ease !important;
}

/*
 * PROPÓSITO: Rotar flecha 180° cuando dropdown está abierto.
 */
#masthead .menu-item-has-children.dropdown-open > a .dropdown-nav-toggle .kadence-svg-icon {
    transform: rotate(180deg) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 7: BOTÓN RESERVAR                         ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * PROPÓSITO: Botón CTA "RESERVAR TU EXPERIENCIA" premium.
 * USO: Añadir clase CSS "menu-reservar" al item de menú en WordPress.
 */
#masthead #primary-menu > li.menu-reservar > a,
#masthead .menu-item.menu-reservar > a,
#masthead .kenkatsu-reservar-btn,
#masthead a.kenkatsu-reservar-btn {
    background-color: #0d9488 !important;
    color: #FFFFFF !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.875rem 2rem !important;
    border-radius: 0.375rem !important;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 1rem !important;
}

#masthead #primary-menu > li.menu-reservar > a:hover,
#masthead .menu-item.menu-reservar > a:hover,
#masthead .kenkatsu-reservar-btn:hover,
#masthead a.kenkatsu-reservar-btn:hover {
    background-color: #0f766e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4) !important;
}

/* Botón RESERVAR - Mayor especificidad para sobrescribir regla general del menú scrolled */
#masthead.scrolled #primary-menu > li.menu-reservar > a,
#masthead.scrolled .menu-item.menu-reservar > a,
html body #masthead.scrolled #primary-menu > li.menu-reservar > a,
html body #masthead.scrolled .menu-item.menu-reservar > a,
body #masthead.scrolled #primary-menu > li.menu-reservar > a,
body #masthead.scrolled .menu-item.menu-reservar > a,
body .site-header.scrolled #primary-menu > li.menu-reservar > a,
body .site-header.scrolled .menu-item.menu-reservar > a {
    background-color: #0d9488 !important;
    color: #FFFFFF !important;
    /* FORZAR color blanco - sobrescribir cualquier regla general del menú */
    text-shadow: none !important;
}

/* Hover del botón cuando header scrolled */
#masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
#masthead.scrolled .menu-item.menu-reservar > a:hover,
html body #masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
html body #masthead.scrolled .menu-item.menu-reservar > a:hover,
body #masthead.scrolled #primary-menu > li.menu-reservar > a:hover,
body #masthead.scrolled .menu-item.menu-reservar > a:hover,
body .site-header.scrolled #primary-menu > li.menu-reservar > a:hover,
body .site-header.scrolled .menu-item.menu-reservar > a:hover {
    background-color: #0f766e !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/*
 * Botón más grande en desktop para mayor visibilidad
 */
@media (min-width: 992px) {
    #masthead #primary-menu > li.menu-reservar > a,
    #masthead .menu-item.menu-reservar > a,
    #masthead .kenkatsu-reservar-btn,
    #masthead a.kenkatsu-reservar-btn {
        font-size: 0.9375rem !important;
        padding: 1rem 2.25rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 8: CONTROL HEADER DESKTOP/MÓVIL           ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * PROPÓSITO: Kadence genera DOS headers: #main-header (desktop) y #mobile-header (móvil).
 * Debemos asegurarnos de que SOLO uno se muestre según el breakpoint.
 * CRÍTICO: Sin esto aparecen AMBOS headers y logos duplicados.
 */

/* Por defecto: mostrar desktop, ocultar móvil */
#masthead #main-header {
    display: block !important;
}

#masthead #mobile-header {
    display: none !important;
}

/*
 * PROPÓSITO: Ocultar elementos creados por JavaScript antiguo.
 */
.logo-transparent,
.logo-colored,
.logo-wrapper {
    display: none !important;
}

/*
 * PROPÓSITO: En el header móvil de Kadence, hay DOS elementos de branding
 * (uno en top-header y otro en main-header). Solo mostrar UNO.
 * CRÍTICO: Esto soluciona el problema del logo duplicado en móvil.
 */

/* Ocultar el logo de la fila superior del header móvil */
#masthead #mobile-header .site-top-header-wrap .site-branding,
#masthead #mobile-header .site-header-upper-wrap > .site-header-upper-inner-wrap > .site-top-header-wrap .site-branding,
#masthead .site-header-upper-wrap .site-top-header-wrap .site-branding {
    display: none !important;
}

/* Asegurar que solo el branding de la fila principal sea visible */
#masthead #mobile-header .site-main-header-wrap .site-branding,
#masthead #mobile-header .site-header-upper-wrap .site-main-header-wrap .site-branding {
    display: flex !important;
}

/* Si hay múltiples site-branding en el mismo nivel, ocultar todos menos el primero */
#masthead #mobile-header .site-branding ~ .site-branding {
    display: none !important;
}

/* Ocultar branding duplicado en cualquier row que no sea la principal */
#masthead #mobile-header .site-header-row:not(.site-main-header-inner-wrap) .site-branding:nth-of-type(n+2) {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 9: RESPONSIVE - TABLET                    ██
   ██                    (768px - 1024px)                                  ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
    /*
     * TABLET: Mostrar header móvil de Kadence
     * Esto proporciona mejor UX con menú hamburguesa
     * NOTA: Selectores con .site-header-wrap para ganar especificidad a menu-premium.css
     */
    #masthead #main-header,
    #masthead #main-header.site-header-wrap,
    html body #masthead #main-header,
    html body #masthead #main-header.site-header-wrap {
        display: none !important;
    }
    
    #masthead #mobile-header,
    #masthead #mobile-header.site-mobile-header-wrap,
    html body #masthead #mobile-header {
        display: block !important;
    }
    
    /*
     * Header más compacto en tablet
     */
    #masthead {
        padding: 0.5rem 0 !important;
    }
    
    #masthead.scrolled {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        padding-left: calc(min(5vw, 4rem) + 6.25rem) !important;
        padding-right: min(5vw, 4rem) !important;
    }
    
    /*
     * Tablet: logo a la izquierda, menú hamburguesa a la derecha
     * Forzar ancho completo del contenedor para que space-between funcione
     */
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner .site-container {
        max-width: none !important;
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-header-row,
    #masthead #mobile-header .site-main-header-wrap .site-main-header-inner-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    #masthead #mobile-header .site-header-main-section-center {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Forzar logo a la izquierda y hamburguesa a la derecha */
    #masthead #mobile-header .site-main-header-wrap .site-branding,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding {
        margin-right: auto !important;
        flex-shrink: 0 !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-header-item-navgation-popup-toggle,
    #masthead #mobile-header .site-main-header-wrap .site-header-item .drawer-toggle.menu-toggle-open,
    #masthead #mobile-header .site-main-header-wrap [data-section="kadence_customizer_mobile_trigger"] {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    #masthead #mobile-header .site-header-main-section-left,
    #masthead #mobile-header .site-header-main-section-right {
        flex-shrink: 0 !important;
    }
    
    /*
     * Logo un poco más pequeño
     */
    #masthead:not(.scrolled) .custom-logo {
        height: 4rem !important;
    }
    
    #masthead.scrolled .custom-logo {
        height: 3.2rem !important;
    }
    
    /*
     * Estilos para toggle hamburguesa en tablet
     */
    #masthead .menu-toggle-open,
    #masthead .mobile-toggle-open,
    #masthead .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    #masthead:not(.scrolled) .menu-toggle-open,
    #masthead:not(.scrolled) .mobile-toggle-open,
    #masthead:not(.scrolled) .menu-toggle {
        color: #FFFFFF !important;
    }
    
    #masthead:not(.scrolled) .menu-toggle svg,
    #masthead:not(.scrolled) .menu-toggle-open svg,
    #masthead:not(.scrolled) .mobile-toggle-open svg {
        fill: #FFFFFF !important;
    }
    
    #masthead.scrolled .menu-toggle-open,
    #masthead.scrolled .mobile-toggle-open,
    #masthead.scrolled .menu-toggle {
        color: #1a1a1a !important;
    }
    
    #masthead.scrolled .menu-toggle svg,
    #masthead.scrolled .menu-toggle-open svg,
    #masthead.scrolled .mobile-toggle-open svg {
        fill: #1a1a1a !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 10: RESPONSIVE - MÓVIL                    ██
   ██                    (< 768px)                                         ██
   ██                    🔒 NO MODIFICAR 🔒                                 ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /*
     * MÓVIL: Mostrar header móvil de Kadence
     * NOTA: Selectores con .site-header-wrap para ganar especificidad a menu-premium.css
     */
    #masthead #main-header,
    #masthead #main-header.site-header-wrap,
    html body #masthead #main-header,
    html body #masthead #main-header.site-header-wrap {
        display: none !important;
    }
    
    #masthead #mobile-header,
    #masthead #mobile-header.site-mobile-header-wrap,
    html body #masthead #mobile-header {
        display: block !important;
    }
    
    /*
     * Header compacto móvil
     */
    #masthead {
        padding: 0.4rem 0 !important;
    }
    
    #masthead.scrolled {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: calc(min(4vw, 3rem) + 5rem) !important;
        padding-right: min(4vw, 3rem) !important;
    }
    
    /*
     * Móvil: logo izquierda, menú derecha (transparente y scrolled).
     * Anular justify-content: center que aplica .site-main-header-wrap en scrolled.
     */
    #masthead #mobile-header .site-main-header-wrap,
    #masthead.scrolled #mobile-header .site-main-header-wrap,
    #masthead:not(.scrolled) #mobile-header .site-main-header-wrap {
        justify-content: flex-start !important;
        width: 100% !important;
    }
    /* Padre: no centrar al hijo site-header-row-container-inner (anula justify-content: center del scrolled) */
    #masthead #mobile-header .site-main-header-wrap,
    #masthead #mobile-header .site-header-row-container,
    #masthead.scrolled #mobile-header .site-main-header-wrap,
    #masthead.scrolled #mobile-header .site-header-row-container {
        justify-content: flex-start !important;
    }
    /* Contenedor y .site-container: no centrar el contenido (logo a la izquierda) */
    #masthead #mobile-header .site-header-row-container-inner,
    #masthead.scrolled #mobile-header .site-header-row-container-inner {
        justify-content: flex-start !important;
        width: 100% !important;
    }
    /* .site-container: anular max-width de Kadence (var(--global-content-width)) y ocupar todo el ancho */
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner .site-container,
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner .site-container,
    html body #masthead #mobile-header .site-header-row-container-inner .site-container {
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    #masthead #mobile-header .site-header-row-container-inner {
        max-width: none !important;
    }
    
    /*
     * Móvil: logo a la izquierda, menú hamburguesa a la derecha
     * Contenedor a ancho completo para que space-between separe logo y menú
     */
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner .site-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-header-row,
    #masthead #mobile-header .site-main-header-wrap .site-main-header-inner-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    #masthead #mobile-header .site-header-main-section-center {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Anular centrado del logo que aplica Kadence en .site-header-section-center */
    #masthead #mobile-header .site-header-main-section-center .site-branding,
    #masthead #mobile-header .site-header-section-center .site-branding {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    #masthead #mobile-header .site-header-main-section-center .site-branding a.brand,
    #masthead #mobile-header .site-header-section-center .site-branding a.brand {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    /* Forzar logo a la izquierda y hamburguesa a la derecha (transparente y scrolled) */
    #masthead #mobile-header .site-main-header-wrap .site-branding,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding,
    #masthead:not(.scrolled) #mobile-header .site-main-header-wrap .site-branding,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding {
        margin-right: auto !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: auto !important;
        max-width: none !important;
        justify-content: flex-start !important;
        text-align: left !important;
        align-self: flex-start !important;
    }
    /* Contenedor del logo (enlace .brand): alinear contenido a la izquierda (anula center de Kadence) */
    #masthead #mobile-header .site-main-header-wrap .site-branding a.brand,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding a.brand {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    /* La imagen del logo no debe centrarse por margin auto (anula reglas de Kadence/Customizer) */
    #masthead #mobile-header .site-main-header-wrap .custom-logo,
    #masthead #mobile-header .site-main-header-wrap .site-branding img,
    #masthead #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    html body #masthead #mobile-header .site-main-header-wrap .custom-logo,
    html body #masthead #mobile-header .site-main-header-wrap .site-branding img,
    html body #masthead #mobile-header .site-main-header-wrap .site-branding .custom-logo {
        margin-left: 0 !important;
        margin-right: auto !important;
        display: block !important;
    }
    /* Menú hamburguesa a la derecha (transparente y scrolled) */
    #masthead #mobile-header .site-main-header-wrap .site-header-item-navgation-popup-toggle,
    #masthead #mobile-header .site-main-header-wrap .site-header-item .drawer-toggle.menu-toggle-open,
    #masthead #mobile-header .site-main-header-wrap [data-section="kadence_customizer_mobile_trigger"],
    #masthead:not(.scrolled) #mobile-header .site-main-header-wrap .site-header-item-navgation-popup-toggle,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-item-navgation-popup-toggle {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    #masthead #mobile-header .site-header-main-section-left,
    #masthead #mobile-header .site-header-main-section-right {
        flex-shrink: 0 !important;
    }
    
    /*
     * Logo más pequeño en móvil
     */
    #masthead:not(.scrolled) .custom-logo {
        height: 3rem !important;
    }
    
    #masthead.scrolled .custom-logo {
        height: 2.5rem !important;
    }
    
    /*
     * Estilos para toggle hamburguesa
     */
    #masthead .menu-toggle-open,
    #masthead .mobile-toggle-open,
    #masthead .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    #masthead:not(.scrolled) .menu-toggle-open,
    #masthead:not(.scrolled) .mobile-toggle-open,
    #masthead:not(.scrolled) .menu-toggle {
        color: #FFFFFF !important;
    }
    
    #masthead:not(.scrolled) .menu-toggle svg,
    #masthead:not(.scrolled) .menu-toggle-open svg,
    #masthead:not(.scrolled) .mobile-toggle-open svg {
        fill: #FFFFFF !important;
    }
    
    #masthead.scrolled .menu-toggle-open,
    #masthead.scrolled .mobile-toggle-open,
    #masthead.scrolled .menu-toggle {
        color: #1a1a1a !important;
    }
    
    #masthead.scrolled .menu-toggle svg,
    #masthead.scrolled .menu-toggle-open svg,
    #masthead.scrolled .mobile-toggle-open svg {
        fill: #1a1a1a !important;
    }
    
    /* Última regla móvil: logo siempre a la izquierda (máxima especificidad para ganar a Kadence/Customizer) */
    html body #masthead #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    html body #masthead #mobile-header .site-main-header-wrap .site-branding a.brand img,
    html body #masthead #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo,
    html body #masthead #mobile-header .site-main-header-wrap .mobile-site-branding img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    SECCIÓN 11: MENÚ MÓVIL                            ██
   ██                    Estilos Simples para Kadence                      ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ENFOQUE: Trabajar CON Kadence, no contra él.
 * Solo estilizar elementos internos, no cambiar estructura del drawer.
 */

/* ============================================
   DRAWER MÓVIL: cabecera – botón de cierre a la derecha
   ============================================ */
#mobile-drawer .drawer-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
#mobile-drawer .drawer-header .drawer-toggle.menu-toggle-close {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   DRAWER MÓVIL: Cuenta, Carrito y Selector de idiomas
   Aparecen al inicio del menú hamburguesa (tablet y móvil).
   Colores oscuros para ser visibles sobre fondo claro del drawer.
   ============================================ */
#mobile-drawer .kenkatsu-drawer-utilities {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem 0 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#mobile-drawer .kenkatsu-drawer-woo-icons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
#mobile-drawer .kenkatsu-drawer-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    color: #1a1a1a !important;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.35rem 0;
    transition: color 0.2s ease, opacity 0.2s ease;
}
#mobile-drawer .kenkatsu-drawer-link:hover {
    color: #111827 !important;
    opacity: 0.9;
}
#mobile-drawer .kenkatsu-drawer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #1a1a1a;
}
#mobile-drawer .kenkatsu-drawer-icon .kenkatsu-drawer-svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    shape-rendering: geometricPrecision;
}
#mobile-drawer .kenkatsu-drawer-icon .kenkatsu-drawer-svg-fill {
    fill: currentColor;
}
#mobile-drawer .kenkatsu-drawer-icon .kadence-svg-icon {
    fill: currentColor;
}
#mobile-drawer .kenkatsu-drawer-icon-cart .kenkatsu-drawer-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--global-palette-btn, #2563eb);
    border-radius: 999px;
}
#mobile-drawer .kenkatsu-drawer-lang-wrap {
    display: flex;
    align-items: center;
}
#mobile-drawer .kenkatsu-drawer-lang-wrap .kenkatsu-lang-switcher {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.5rem !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 9999px !important;
}
#mobile-drawer .kenkatsu-drawer-lang-wrap .kenkatsu-lang-name {
    display: inline !important;
}
#mobile-drawer .kenkatsu-drawer-lang-wrap .kenkatsu-lang-link,
#mobile-drawer .kenkatsu-drawer-lang-wrap .kenkatsu-lang-current {
    color: #1a1a1a !important;
}
#mobile-drawer .kenkatsu-drawer-lang-wrap .kenkatsu-lang-flag {
    opacity: 1;
}
#mobile-drawer .kenkatsu-drawer-lang-wrap a.kenkatsu-lang-link:hover {
    color: #111827 !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   RESET MENU-PREMIUM.CSS PARA MÓVIL
   NO tocar la estructura del drawer - solo contenido
   ============================================ */

/* Reset elementos INTERNOS (NO el drawer ni drawer-inner) */
#mobile-drawer .mobile-navigation,
#mobile-drawer .drawer-navigation,
#mobile-drawer .mobile-menu-container,
#mobile-drawer .drawer-menu-container,
#mobile-drawer #mobile-menu,
#mobile-drawer ul.menu:not(.sub-menu),
#mobile-drawer .menu:not(.sub-menu) {
    position: static !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#mobile-drawer .mobile-navigation,
#mobile-drawer .drawer-navigation,
#mobile-drawer #mobile-site-navigation {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
}

/* FORZAR layout VERTICAL en el menú móvil */
#mobile-drawer #mobile-menu,
#mobile-drawer ul.menu:not(.sub-menu),
#mobile-drawer .menu:not(.sub-menu) {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Cada item del menú en bloque */
#mobile-drawer #mobile-menu > li,
#mobile-drawer ul.menu > li,
#mobile-drawer .menu > li,
#mobile-drawer > .drawer-inner .menu-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

/* ============================================
   DRAWER - FULLSCREEN EN MÓVIL
   ============================================ */

/* Forzar fullscreen con z-index correcto */
#mobile-drawer.popup-drawer {
    width: 100% !important;
    max-width: 100% !important;
    z-index: 9999999 !important; /* Por encima de masthead */
}

#mobile-drawer .drawer-inner {
    width: 100% !important;
    max-width: 100% !important;
    background: #FFFFFF !important;
}

/* Ocultar overlay oscuro */
#mobile-drawer .drawer-overlay {
    display: none !important;
}

#mobile-drawer .drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #FFFFFF !important;
}

#mobile-drawer .menu-toggle-close {
    background: #f5f5f5 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #374151 !important;
    cursor: pointer !important;
}

#mobile-drawer .menu-toggle-close:hover {
    background: #e5e5e5 !important;
}

#mobile-drawer .drawer-content {
    padding: 0 !important;
    background: #FFFFFF !important;
}

/* ============================================
   MENÚ - ESTILOS LIMPIOS
   ============================================ */
#mobile-drawer #mobile-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#mobile-drawer #mobile-menu > .menu-item {
    border-bottom: 1px solid #e5e7eb !important;
}

#mobile-drawer .drawer-nav-drop-wrap {
    display: flex !important;
    align-items: stretch !important;
}

#mobile-drawer #mobile-menu > .menu-item > a,
#mobile-drawer .drawer-nav-drop-wrap > a {
    flex: 1 !important;
    display: block !important;
    padding: 1rem 1.25rem !important;
    color: #1f2937 !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    background: transparent !important;
}

#mobile-drawer #mobile-menu > .menu-item > a:hover {
    color: #0d9488 !important;
    background: #f9fafb !important;
}

/* ============================================
   TOGGLE SUBMENÚ
   ============================================ */
#mobile-drawer .drawer-sub-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid #e5e7eb !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#mobile-drawer .drawer-sub-toggle:hover {
    color: #0d9488 !important;
    background: #f9fafb !important;
}

#mobile-drawer .drawer-sub-toggle svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.2s ease !important;
}

#mobile-drawer .drawer-sub-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg) !important;
}

#mobile-drawer .drawer-sub-toggle .screen-reader-text {
    position: absolute !important;
    clip: rect(0,0,0,0) !important;
}

/* ============================================
   SUBMENÚS
   ============================================ */
#mobile-drawer .sub-menu {
    position: static !important;
    max-height: 0 !important;
    overflow: hidden !important;
    background: #f9fafb !important;
    transition: max-height 0.3s ease !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#mobile-drawer .sub-menu.active,
#mobile-drawer .sub-menu.show-drawer {
    max-height: 500px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#mobile-drawer .sub-menu .menu-item {
    border-bottom: 1px solid #e5e7eb !important;
}

#mobile-drawer .sub-menu .menu-item:last-child {
    border-bottom: none !important;
}

#mobile-drawer .sub-menu a {
    display: block !important;
    padding: 0.875rem 1.25rem 0.875rem 2rem !important;
    color: #4b5563 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
}

#mobile-drawer .sub-menu a:hover {
    color: #0d9488 !important;
    background: #f3f4f6 !important;
}

/* ============================================
   BOTÓN RESERVAR
   ============================================ */
#mobile-drawer #mobile-menu > .menu-item:last-child {
    padding: 1rem !important;
    border-bottom: none !important;
}

#mobile-drawer #mobile-menu > .menu-item:last-child > a {
    display: block !important;
    background: #0d9488 !important;
    color: #FFFFFF !important;
    padding: 0.875rem 1.5rem !important;
    text-align: center !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

#mobile-drawer #mobile-menu > .menu-item:last-child > a:hover {
    background: #0f766e !important;
}

/* ============================================
   LOGO EN EL DRAWER
   ============================================ */

#mobile-drawer .drawer-header .site-branding {
    display: flex !important;
    align-items: center !important;
}

#mobile-drawer .drawer-header .custom-logo {
    height: 3rem !important;
    width: auto !important;
    filter: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████
   ██                                                                      ██
   ██                    FIN DEL ARCHIVO                                   ██
   ██                                                                      ██
   ██            🔒 ESTE ARCHIVO ESTÁ BLOQUEADO - NO MODIFICAR 🔒          ██
   ██                                                                      ██
   ██████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════ */
/**
 * Header Quiet Luxury Refactor
 * Ajustes de compactación, centrado y escala visual.
 */

/* Slim header: menos altura, mismo aire elegante */
#masthead {
    padding: 0.35rem 0 !important;
}

#masthead.scrolled {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: calc(min(6vw, 5.5rem) + 6.25rem) !important;
    padding-right: min(6vw, 5.5rem) !important;
}

/* Fila del header: ocupa todo el ancho disponible (ya con padding en row-container-inner) */
#masthead .site-container,
#masthead .site-main-header-inner-wrap,
#masthead .site-header-row {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 1rem !important;
    box-sizing: border-box !important;
}
/* Secciones del header: alineación básica, layout lo controla Kadence */
#masthead .site-header-main-section-left {
    flex-shrink: 0 !important;
}
#masthead .site-header-main-section-center,
#masthead .site-header-section-center {
    display: flex !important;
    align-items: center !important;
}
/* right_center (carrito, mi cuenta): espacio compacto para no empujar el menú */
#masthead .site-header-main-section-right-center,
#masthead .site-header-section-right-center {
    flex-shrink: 0 !important;
    gap: 0.35rem !important;
}

/* Menú principal: aire horizontal más premium */
#masthead #primary-menu,
#masthead ul.menu,
#masthead.scrolled #primary-menu,
#masthead.scrolled ul.menu {
    gap: 0.7rem !important;
}

#masthead #primary-menu > li > a,
#masthead .main-navigation > ul > li > a,
#masthead #site-navigation .menu-item > a,
#masthead.scrolled #primary-menu > li > a,
#masthead.scrolled .main-navigation > ul > li > a {
    padding: 0.2rem 0.45rem !important;
}

/* Dropdowns: más respiración y sombra suave */
#masthead #primary-menu .sub-menu,
#masthead .menu-item-has-children > .sub-menu,
#masthead.scrolled #primary-menu .sub-menu,
#masthead.scrolled .menu-item-has-children > .sub-menu {
    padding: 0.6rem 0.75rem !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12) !important;
}

#masthead .sub-menu a,
#masthead .sub-menu li a,
#masthead #primary-menu .sub-menu a,
body #masthead .sub-menu a {
    padding: 0.85rem 1.35rem !important;
}

/* Logo: más grande para que "Kenkatsu" sea legible en ambos headers */
#masthead {
    --kenkatsu-logo-height: 3.85rem;
}

@media (min-width: 768px) {
    #masthead {
        --kenkatsu-logo-height: 5.15rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #masthead {
        --kenkatsu-logo-height: 4.5rem;
    }
}

/* CTA compacto, mismo tamaño en transparente y scrolled */
#masthead #primary-menu > li.menu-reservar > a,
#masthead .menu-item.menu-reservar > a,
#masthead .kenkatsu-reservar-btn,
#masthead a.kenkatsu-reservar-btn,
#masthead.scrolled #primary-menu > li.menu-reservar > a,
#masthead.scrolled .menu-item.menu-reservar > a {
    font-size: 0.75rem !important;
    padding: 0.45rem 1rem !important;
    margin-left: 0.5rem !important;
}

@media (min-width: 992px) {
    #masthead #primary-menu > li.menu-reservar > a,
    #masthead .menu-item.menu-reservar > a,
    #masthead .kenkatsu-reservar-btn,
    #masthead a.kenkatsu-reservar-btn,
    #masthead.scrolled #primary-menu > li.menu-reservar > a,
    #masthead.scrolled .menu-item.menu-reservar > a {
        font-size: 0.8rem !important;
        padding: 0.5rem 1.2rem !important;
    }
}

/* Menú móvil: drawer más elegante y ajustado al contenido */
@media (max-width: 767px) {
    #mobile-drawer.popup-drawer {
        padding: 1.25rem 1rem !important;
        background: rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    #mobile-drawer .drawer-inner {
        max-width: 94vw !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-self: flex-start !important;
    }
    
    /* Forzar que el drawer no estire el drawer-inner */
    #mobile-drawer.popup-drawer {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 1.25rem !important;
    }

    #mobile-drawer .drawer-content {
        padding: 0.25rem 0 0 !important;
        flex: 0 0 auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    #mobile-drawer .drawer-header {
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 16px 16px 0 0 !important;
        flex: 0 0 auto !important;
    }

    /* Eliminar todo espacio inferior tras el CTA */
    #mobile-drawer #mobile-menu {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #mobile-drawer #mobile-menu > .menu-item:last-child {
        padding: 0.5rem 1rem !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
        padding-bottom: 0.5rem !important;
    }

    #mobile-drawer #mobile-menu > .menu-item:last-child > a {
        margin-bottom: 0 !important;
        padding-bottom: 0.875rem !important;
    }

    /* Asegurar que no haya padding extra en ningún contenedor */
    #mobile-drawer .drawer-inner > *:last-child {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Forzar que el drawer-content se ajuste al contenido */
    #mobile-drawer .drawer-content {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* Eliminar líneas entre items - diseño más elegante */
    #mobile-drawer #mobile-menu > .menu-item {
        border-bottom: none !important;
        border-top: none !important;
        margin-bottom: 0.25rem !important;
    }

    #mobile-drawer #mobile-menu > .menu-item:first-child {
        margin-top: 0.5rem !important;
    }

    /* Enlaces del menú con más aire y sin borders */
    #mobile-drawer #mobile-menu > .menu-item > a,
    #mobile-drawer .drawer-nav-drop-wrap > a {
        padding: 1rem 1.25rem !important;
        border-radius: 8px !important;
        margin: 0 0.5rem !important;
        transition: all 0.2s ease !important;
    }

    #mobile-drawer #mobile-menu > .menu-item > a:hover {
        background: #f9fafb !important;
        transform: translateX(4px) !important;
    }

    /* Icono de cerrar sin recuadro - más elegante */
    #mobile-drawer .menu-toggle-close {
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }

    #mobile-drawer .menu-toggle-close:hover {
        background: #f5f5f5 !important;
        transform: rotate(90deg) !important;
    }

    /* Iconos de dropdown sin recuadro */
    #mobile-drawer .drawer-sub-toggle {
        background: transparent !important;
        border: none !important;
        border-left: none !important;
        width: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }

    #mobile-drawer .drawer-sub-toggle:hover {
        background: transparent !important;
        color: #0d9488 !important;
    }

    #mobile-drawer .drawer-sub-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Header del drawer más sutil */
    #mobile-drawer .drawer-header {
        border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
        padding: 1rem 1.25rem !important;
    }

    /* Botón CTA con más espacio y sin border superior */
    #mobile-drawer #mobile-menu > .menu-item:last-child {
        margin-top: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }

    #mobile-drawer #mobile-menu > .menu-item:last-child > a {
        border-radius: 10px !important;
        margin: 0 0.5rem !important;
        box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2) !important;
        transition: all 0.3s ease !important;
    }

    #mobile-drawer #mobile-menu > .menu-item:last-child > a:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
    }
}

/* ============================================
   POLYLANG – LANGUAGE SWITCHER (posición fija)
   Flota en la esquina superior derecha; solo visible en desktop.
   En tablet/móvil se oculta y se muestra dentro del menú hamburguesa.
   ============================================ */
.kenkatsu-lang-switcher-fixed {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 9999999 !important;
    pointer-events: auto !important;
}
/* Ocultar banderas fijas en tablet y móvil para evitar superposición con el header */
@media (max-width: 1024px) {
    .kenkatsu-lang-switcher-desktop-only {
        display: none !important;
    }
}
.kenkatsu-lang-switcher-fixed a,
.kenkatsu-lang-switcher-fixed .kenkatsu-lang-switcher {
    pointer-events: auto !important;
}
body.admin-bar .kenkatsu-lang-switcher-fixed {
    top: 2.5rem !important;
}
@media (max-width: 782px) {
    body.admin-bar .kenkatsu-lang-switcher-fixed {
        top: 2.9rem !important;
    }
}
.kenkatsu-lang-switcher-fixed .kenkatsu-lang-switcher {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 0.6rem !important;
    background: rgba(17, 24, 39, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}
.kenkatsu-lang-switcher-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.kenkatsu-lang-item {
    margin: 0;
}
.kenkatsu-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* Enlaces clicables: cursor pointer */
a.kenkatsu-lang-link {
    cursor: pointer !important;
}
/* Hover suave: solo fondo y ligera elevación, sin mostrar texto (evita aparición brusca) */
a.kenkatsu-lang-link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
a.kenkatsu-lang-link:active {
    transform: scale(0.98);
}
/* Idioma actual: no es enlace */
.kenkatsu-lang-current {
    font-weight: 600;
    color: #fff !important;
    cursor: default !important;
}
/* Solo banderas en desktop; el nombre se ve en tooltip (title) al pasar el ratón */
.kenkatsu-lang-name {
    display: none !important;
}
@media (min-width: 1025px) {
    .kenkatsu-lang-name {
        display: none !important;
    }
}
.kenkatsu-lang-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    pointer-events: none;
}
@media (max-width: 768px) {
    .kenkatsu-lang-flag {
        width: 18px;
        height: 12px;
    }
}