/*nav
{
    background-color: rgba(0, 0, 0, 0.5)!important;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}*/
nav.bg-light
{
    background-color: #fff !important;
}
.navbar-brand
{
    height: auto;
    display: block;
}

/* ========================================
   LOGO STYLES - Estado inicial y scroll
   ======================================== */

/* Logo blanco visible por defecto */
.logo-white
{
    opacity: 0;
    visibility: none;
    display: none!important;
}

/* Logo oscuro oculto por defecto */
.logo-oscuro
{
    opacity: 1;
    visibility: block!important;
    display: block!important;
}

/* Cuando hay scroll: mostrar logo oscuro */
.nav-scrolled .logo-oscuro
{
    max-width: 220px;
}

.mega-menu-link
{
    color: #000!important;
	border-radius: 5px!important;
    font-weight: 400;
    font-family: 'Nunito', sans-serif!important;
    font-size: 1rem!important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link
{
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* ========================================
   NAV SCROLLED - Estilos cuando se hace scroll
   ======================================== */

nav .mega-current-menu-item a
{
	background-color: #FFF !important;
	font-weight: 600 !important;
    text-decoration: 4px #8E2C3B underline!important;
}

.nav-scrolled 
{
	background-color: #fff !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-scrolled .mega-menu-link
{
	color: #000 !important;
	text-shadow: none !important;
}

.nav-scrolled .mega-menu-link:hover
{
	color: #000 !important;
}

.nav-scrolled .custom-logo-link img
{
	width: 220px !important;
}

/* Updated styles for SVG logos when scrolled */
.nav-scrolled .logo-link
{
	height: 75px;
    display: block;
}

/* Cabecera fija: sticky falla con overflow-x:clip en body y transform en el wrapper */
#wrapper-navbar
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

#theme-main
{
	padding-top: var(--pmc-header-stack-bottom, 72px);
}

#wrapper-navbar .navbar,
#wrapper-navbar .navbar.fixed-top,
#wrapper-navbar nav.navbar
{
	position: relative !important;
	top: auto !important;
	width: 100%;
	left: auto !important;
	right: auto !important;
}

nav.navbar.fixed-top
{
	position: relative !important;
	top: auto !important;
}

/* Asegurar que el mega menu wrap sea visible */
#mega-menu-wrap-primary
{
    display: block !important;
    visibility: visible !important;
	width: 100% !important;
}

/* Asegurar que el toggle del mega menu sea visible en móvil */
@media (max-width: 768px)
{
    #mega-menu-wrap-primary .mega-menu-toggle
    {
        display: flex !important;
        visibility: visible !important;
    }
    
    #mega-menu-wrap-primary
    {
        display: block !important;
        visibility: visible !important;
    }
}

@media (max-width: 1500px) and (min-width: 769px)
{
    a.mega-menu-link
    {
        font-size: 0.8rem!important;
        padding: 0 10px!important;
    }
    .logo-link img,
    .custom-logo-link img
    {
        max-width: 220px!important;
        width: 220px!important;
    }
}

/* Bootstrap gap-lg-5 (5rem) apreta el menú en desktop estrecho y medio */
@media (min-width: 992px) and (max-width: 1499.98px)
{
    #wrapper-navbar .navbar .container-fluid.gap-lg-5
    {
        gap: 1rem !important;
    }
}

/* ========================================
   HEADER DARK STYLE - Encabezado Oscuro
   ======================================== */

/* Cuando body tiene la clase header-dark-style, aplicar estilos oscuros desde el inicio */
body.header-dark-style #wrapper-navbar
{
	background-color: #000 !important;
}

/* Logo: ocultar blanco y mostrar gris/negro desde el inicio */

/* body.header-dark-style .logo-oscuro
{
	opacity: 1;
	visibility: visible;
}
 */
/* Texto del menú en blanco desde el inicio */
body.header-dark-style .mega-menu-link
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

body.header-dark-style .mega-menu-link:hover
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	opacity: 0.8;
}

/* Item activo del menú */
body.header-dark-style .mega-current-menu-item a
{
	background-color: rgba(176, 150, 83, 0.18) !important;
	border: 1px solid rgba(176, 150, 83, 0.35) !important;
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Topbar con fondo gris oscuro y texto blanco */
body.header-dark-style #wrapper-topbar
{
	background-color: #333 !important;
	color: #fff !important;
	transition: background-color 0.4s ease;
}

body.header-dark-style #wrapper-topbar,
body.header-dark-style #wrapper-topbar *,
body.header-dark-style #topbar-content,
body.header-dark-style #topbar-content *
{
	color: #fff !important;
}

body.header-dark-style #wrapper-topbar a
{
	color: #fff !important;
	text-decoration: none !important;
}

body.header-dark-style #wrapper-topbar a:hover
{
	color: #fff !important;
	opacity: 0.8;
	text-decoration: none !important;
}

/* Iconos de la topbar en blanco */
body.header-dark-style .topbar-icon
{
	color: #fff !important;
}

body.header-dark-style .topbar-icon:hover
{
	color: #fff !important;
	opacity: 0.8;
}

/* Navbar dark: fondo negro por defecto, transición suave */
body.header-dark-style #wrapper-navbar .navbar
{
	background-color: #731326 !important;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Navbar dark con scroll: fondo blanco */
body.header-dark-style .nav-scrolled .navbar,
body.header-dark-style .nav-scrolled#wrapper-navbar .navbar
{
	background-color: #fff !important;
}

/* Cuando se hace scroll en modo dark: transición a blanco */
body.header-dark-style .nav-scrolled
{
	background-color: #fff !important;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

body.header-dark-style .nav-scrolled .logo-white
{
	opacity: 0;
	visibility: hidden;
	display: none !important;
}

body.header-dark-style .nav-scrolled .logo-oscuro
{
	opacity: 1;
	visibility: visible;
	display: block !important;
	max-width: 220px;
}

body.header-dark-style .nav-scrolled .mega-menu-link
{
	color: #1a1a1a !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: color 0.3s ease, background-color 0.3s ease;
}

body.header-dark-style .nav-scrolled .mega-menu-link:hover
{
	color: #8E2C3B !important;
	opacity: 1;
	background-color: rgba(176, 150, 83, 0.08) !important;
}

body.header-dark-style .nav-scrolled .mega-current-menu-item a
{
	background-color: rgba(176, 150, 83, 0.12) !important;
	border: 1px solid rgba(176, 150, 83, 0.3) !important;
	color: #8E2C3B !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

body.header-dark-style #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link
{
	padding-left: 0.85rem !important;
	padding-right: 0.85rem !important;
}

/* Asegurar que los submenús funcionen correctamente con header-dark-style */
body.header-dark-style #wrapper-navbar
{
	overflow: visible !important;
}

body.header-dark-style .mega-sub-menu
{
	background-color: #000;
	color: #fff;
}

body.header-dark-style .mega-sub-menu a
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

body.header-dark-style .mega-sub-menu a:hover
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	opacity: 0.8;
}

/* Submenús cuando hay scroll en dark: fondo blanco */
body.header-dark-style .nav-scrolled .mega-sub-menu
{
	background-color: #fff;
	color: #1a1a1a;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
}

body.header-dark-style .nav-scrolled .mega-sub-menu a
{
	color: #1a1a1a !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: color 0.2s ease;
}

body.header-dark-style .nav-scrolled .mega-sub-menu a:hover
{
	color: #8E2C3B !important;
	opacity: 1;
}

/* ========================================
   SELECTOR DE IDIOMAS (POLYLANG) - ESTILOS DROPDOWN
   ======================================== */

/* Dropdown del selector de idiomas - fondo blanco y ancho ajustado */
.mega-pll-parent-menu-item .mega-sub-menu,
.pll-parent-menu-item .mega-sub-menu
{
    background-color: #fff !important;
    min-width: unset !important;
    width: auto !important;
    padding: 0.5rem !important;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Items del selector de idiomas */
.mega-pll-parent-menu-item .mega-sub-menu .mega-menu-item,
.pll-parent-menu-item .mega-sub-menu .mega-menu-item,
.mega-lang-item
{
    width: auto !important;
    display: block !important;
    padding: 0.25rem 0 !important;
}

/* Enlaces del selector de idiomas */
.mega-pll-parent-menu-item .mega-sub-menu .mega-menu-link,
.pll-parent-menu-item .mega-sub-menu .mega-menu-link,
.mega-lang-item .mega-menu-link
{
    padding: 0.25rem 0.5rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Hover en items del selector de idiomas */
.mega-pll-parent-menu-item .mega-sub-menu .mega-menu-item:hover,
.pll-parent-menu-item .mega-sub-menu .mega-menu-item:hover,
.mega-lang-item:hover
{
    background-color: rgba(176, 150, 83, 0.1) !important;
    border-radius: 3px;
}

/* Imágenes de banderas en el dropdown */
.mega-pll-parent-menu-item .mega-sub-menu img,
.pll-parent-menu-item .mega-sub-menu img,
.mega-sub-menu .mega-lang-item img
{
    width: 24px !important;
    height: 16px !important;
    display: block;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Banderas en el item principal (cerrado) */
.mega-pll-parent-menu-item > a.mega-menu-link > img,
.pll-parent-menu-item > a.mega-menu-link > img
{
    width: 24px !important;
    height: 16px !important;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========================================
   NAV ESTÁTICA CLARA (404 y páginas similares)
   ======================================== */

body.pmc-nav-static-light #wrapper-navbar,
body.pmc-nav-static-light #wrapper-navbar .navbar
{
	background-color: #fff !important;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

body.pmc-nav-static-light .logo-white
{
	opacity: 0;
	visibility: hidden;
	display: none !important;
}

body.pmc-nav-static-light .logo-oscuro
{
	opacity: 1;
	visibility: visible;
	display: block !important;
	max-width: 220px;
}

body.pmc-nav-static-light .mega-menu-link
{
	color: #1a1a1a !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

body.pmc-nav-static-light .mega-menu-link:hover
{
	color: #8E2C3B !important;
	opacity: 1;
	background-color: rgba(176, 150, 83, 0.08) !important;
}

body.pmc-nav-static-light .mega-current-menu-item a
{
	background-color: rgba(176, 150, 83, 0.12) !important;
	border: 1px solid rgba(176, 150, 83, 0.3) !important;
	color: #8E2C3B !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

body.pmc-nav-static-light #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link
{
	color: #1a1a1a !important;
}

body.pmc-nav-static-light .mega-sub-menu
{
	background-color: #fff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

body.pmc-nav-static-light .mega-sub-menu a
{
	color: #1a1a1a !important;
}

body.pmc-nav-static-light .mega-sub-menu a:hover
{
	color: #8E2C3B !important;
}

/* ========================================
   MEDIA QUERIES - Desktop
   ======================================== */
@media (min-width: 1500px)
{
    .logo-link img
    {
        max-width: 260px;
    }
}

/* ========================================
   MEDIA QUERIES - Tablets y móviles (≤992px)
   Panel off-canvas: fondo blanco, texto oscuro, estilo limpio
   ======================================== */
@media (max-width: 992px)
{
    .navbar .container-xxl.container-fluid
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    #logo-tagline-wrap
    {
        flex: 0 1 auto;
    }

    #mega-menu-wrap-primary
    {
        width: auto !important;
        margin-left: auto;
        flex: 0 0 auto;
    }

    #mega-menu-wrap-primary .mega-menu-toggle
    {
        display: flex !important;
        justify-content: flex-end;
    }

    .nav-scrolled .logo-link
    {
        display: block;
    }
    .logo-link img
    {
        max-width: 180px;
    }

    /* Panel off-canvas: fondo blanco */
    #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary
    {
        background-color: #fff !important;
        padding: 1rem 0 !important;
    }

    /* Cada item del menú ocupa todo el ancho */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item
    {
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:last-child
    {
        border-bottom: none;
    }

    /* Links del menú: texto oscuro sobre fondo blanco */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link
    {
        color: #1a1a1a !important;
        background: transparent !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 12px 20px !important;
        line-height: 1.4 !important;
        height: auto !important;
        border: none !important;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* Hover en links del menú móvil */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus
    {
        background-color: rgba(176, 150, 83, 0.08) !important;
        color: #8E2C3B !important;
    }

    /* Item activo/seleccionado: acento dorado */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link
    {
        color: #8E2C3B !important;
        background-color: rgba(176, 150, 83, 0.08) !important;
        font-weight: 600 !important;
        border-left: 3px solid #8E2C3B !important;
    }

    /* Item con toggle abierto (submenú abierto) */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link
    {
        color: #8E2C3B !important;
        background-color: rgba(176, 150, 83, 0.06) !important;
    }

    /* Submenú flyout en móvil: fondo claro */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu
    {
        background-color: #fafafa !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link
    {
        background-color: transparent !important;
        color: #333 !important;
        padding: 10px 20px 10px 30px !important;
        line-height: 1.4 !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover
    {
        color: #8E2C3B !important;
        background-color: rgba(176, 150, 83, 0.06) !important;
    }

    /* Indicador (flecha) en color oscuro */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator
    {
        color: #999 !important;
    }

    /* Selector de idiomas en móvil */
    .mega-pll-parent-menu-item .mega-sub-menu,
    .pll-parent-menu-item .mega-sub-menu
    {
        background-color: #fafafa !important;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 10px 20px !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100% !important;
    }
    .mega-pll-parent-menu-item .mega-sub-menu .mega-menu-item,
    .pll-parent-menu-item .mega-sub-menu .mega-menu-item,
    .mega-lang-item
    {
        display: inline-block !important;
        width: auto !important;
        padding: 4px !important;
    }
    .mega-pll-parent-menu-item .mega-sub-menu .mega-menu-link,
    .mega-lang-item .mega-menu-link
    {
        padding: 4px 6px !important;
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }
    .mega-lang-item:hover,
    .mega-lang-item .mega-menu-link:hover
    {
        background-color: rgba(176, 150, 83, 0.12) !important;
    }
    .mega-lang-item.mega-current-lang
    {
        border: 2px solid #8E2C3B;
        border-radius: 4px;
    }

    /* Banderas en el dropdown móvil */
    .mega-pll-parent-menu-item .mega-sub-menu img,
    .mega-sub-menu .mega-lang-item img
    {
        width: 28px !important;
        height: 19px !important;
        display: block;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    /* Botón cerrar (X) del off-canvas: fondo oscuro */
    #mega-menu-wrap-primary .mega-menu-toggle ~ button.mega-close:before
    {
        color: #333 !important;
        font-size: 20px !important;
    }

    /* Ocultar topbar en móviles */
    #wrapper-topbar
    {
        display: none !important;
    }
}

/* ========================================
   MEDIA QUERIES - Móviles (≤768px)
   ======================================== */
@media (max-width: 768px)
{
    .nav-scrolled .logo-link
    {
        height: auto;
        width: 150px;
    }

    .nav-scrolled .logo-oscuro,
    .nav-scrolled .custom-logo-link img
    {
        max-width: 150px !important;
        width: 150px !important;
    }

    .nav-scrolled .logo-white
    {
        display: none !important;
    }
}

/* ========================================
   MEDIA QUERIES - Móviles pequeños (≤580px)
   ======================================== */
@media (max-width: 580px)
{
    .logo-link
    {
        width: 180px;
    }

    .nav-scrolled .logo-link
    {
        width: 150px;
    }
    .topbar-msg
    {
        width: 100%;
        justify-content: center;
        font-size: 0.75rem;
    }
    .topbar-menu
    {
        position: relative;
        width: 100%;
        justify-content: center;
        font-size: 0.75rem;
        right: inherit;
        padding: 0;
    }
}