/* ═══════════════════════════════════════════════════════════════
   fiubags-header.css  — Header Rediseñado Fiubags 2026
   Diseño blanco: fondo blanco (top + nav), línea teal de acento, nav featured teal
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────── */
:root {
    --fiu-teal:       #6eaba5;   /* teal marca principal        */
    --fiu-teal-mid:   #5a9f99;   /* teal hover / acento (más oscuro) */
    --fiu-teal-light: #e8f5f3;   /* teal muy claro (fondos)     */
    --fiu-teal-muted: #8ec4bf;   /* teal suave (borders, badges) */
    --fiu-white:      #ffffff;
    --fiu-nav-bg:     #ffffff;
    --fiu-nav-text:   #1a3532;   /* texto del nav (oscuro)      */
    --fiu-nav-hover:  #6eaba5;   /* texto hover nav             */
    --fiu-shadow:     0 4px 20px rgba(0, 0, 0, 0.10);
    --fiu-analogous:     #355E5A; /* para generar paletas complementarias */
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP HEADER
   ══════════════════════════════════════════════════════════════ */

/* ── Wrapper general del header desktop — fijo en el top ─────── */
.header-section.d-none.d-md-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

/* Compensar el espacio del header fijo en desktop */
@media (min-width: 768px) {
    .wrapper {
        padding-top: 60px;
    }
}

/* ── Top bar ──────────────── */
.fiu-top-bar-wrap {
    background: var(--fiu-teal-mid);
}

.fiu-header-top {
    display: grid;
    grid-template-columns: 1fr minmax(100px, 740px) 1fr;
    align-items: center;
    padding: 12px 20px;
    gap: 24px;
}

/* ── Logo ─────────────────────────────────────────────────────── */
.fiu-logo-wrap {
    display: flex;
    align-items: center;
    justify-self: start;
    min-width: max-content;
}

.fiu-logo-wrap a {
    display: block;
    line-height: 0;
    transition: opacity 0.2s;
}

.fiu-logo-wrap a:hover {
    opacity: 0.88;
}

.fiu-logo-wrap img {
    height: 48px;
    width: auto;
}

/* ── Buscador ─────────────────────────────────────────────────── */
.fiu-search-wrap {
    min-width: 0;
}

.fiu-search-wrap .header-global-search {
    max-width: 100%;
    width: 100%;
}

.fiu-search-wrap .header-global-search-form {
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    height: 40px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}

.fiu-search-wrap .header-global-search-form:focus-within,
.fiu-search-wrap .header-global-search-form.active {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.fiu-search-wrap .header-global-search-input {
    background: transparent !important;
    padding-left: 16px;
    font-size: 14px;
    color: #ffffff !important;
    border-radius: 4px 0 0 4px;
    transition: color 0.25s ease;
}

.fiu-search-wrap .header-global-search-form:focus-within .header-global-search-input,
.fiu-search-wrap .header-global-search-form.active .header-global-search-input {
    color: #333 !important;
}

.fiu-search-wrap .header-global-search-input::placeholder {
    color: #ffffff !important;
}

.fiu-search-wrap .header-global-search-form:focus-within .header-global-search-input::placeholder,
.fiu-search-wrap .header-global-search-form.active .header-global-search-input::placeholder {
    color: #9c9c9c !important;
}

.fiu-search-wrap .header-global-search-button {
    border-radius: 0;
    min-width: 40px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.2s, color 0.2s;
}

.fiu-search-wrap .header-global-search-form:focus-within .header-global-search-button,
.fiu-search-wrap .header-global-search-form.active .header-global-search-button {
    background: var(--fiu-analogous);
    color: var(--fiu-white);
    border-left-color: transparent;
}

.fiu-search-wrap .header-global-search-form .header-global-search-button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--fiu-white);
}

/* ── Redes sociales + Contacto ─────────────────── */
.fiu-links-wrap {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 4px;
}

.fiu-social-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fiu-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--fiu-nav-bg) !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: color 0.18s, background 0.18s;
}

.fiu-social-icon:hover {
    background: #f0f0f0;
    color: #1a3532 !important;
    text-decoration: none !important;
}

.fiu-links-divider {
    width: 1px;
    height: 22px;
    background: #e0e0e0;
    margin: 0 10px;
    flex-shrink: 0;
}

.fiu-contact-btn,
.fiu-contact-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fiu-nav-bg) !important;
    text-decoration: none !important;
    padding: 7px 14px;
    border: 1.5px solid #d0d0d0;
    border-radius: 4px;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    white-space: nowrap;
}

.fiu-contact-btn:hover {
    border-color: #6eaba5;
    color: #6eaba5 !important;
    background: #f0f8f7;
    text-decoration: none !important;
}

/* ── Línea de acento teal (firma de marca) ── */
.fiu-accent-line {
    height: 1px;
    background: var(--fiu-teal);
    transition: background-color 0.45s ease;
}

.fiu-header-scrolled .fiu-accent-line {
    background: var(--fiu-nav-bg);
}

/* ══════════════════════════════════════════════════════════════
   NAV BAR — Fondo blanco con texto oscuro
   ══════════════════════════════════════════════════════════════ */
.fiu-nav-bar {
    background: var(--fiu-teal) !important;
    border-top: none !important;
}

/* Texto del nav: oscuro para fondo blanco */
.fiu-nav-bar .menu-text {
    color: var(--fiu-nav-bg) !important;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s;
}

.fiu-nav-bar .site-main-menu > ul > li > a {
    position: relative;
    padding: 14px 18px !important;
    transition: background 0.2s, color 0.2s;
    text-decoration: none !important;
}

.fiu-nav-bar .site-main-menu > ul > li > a:hover {
    text-decoration: none !important;
}

/* Desactivar ambas líneas decorativas */
.fiu-nav-bar .site-main-menu > ul > li > a > .menu-text::after {
    display: none !important;
}

.fiu-nav-bar .site-main-menu > ul > li > a::after {
    display: none !important;
}

/* Hover: recuadro teal igual que el ítem Catálogo */
.fiu-nav-bar .site-main-menu > ul > li:hover > a,
.fiu-nav-bar .site-main-menu > ul > li.active > a {
    background: var(--fiu-nav-bg) !important;
}

.fiu-nav-bar .site-main-menu > ul > li:hover > a .menu-text,
.fiu-nav-bar .site-main-menu > ul > li.active > a .menu-text {
    color: var(--fiu-nav-text) !important;
}

/* Flechas del dropdown */
.fiu-nav-bar .site-main-menu > ul > li.has-children > a > .menu-toggle::before,
.fiu-nav-bar .site-main-menu > ul > li.has-children > a > .menu-toggle i {
    color: var(--fiu-nav-text) !important;
    transition: color 0.2s;
}

.fiu-nav-bar .site-main-menu > ul > li.has-children:hover > a > .menu-toggle::before,
.fiu-nav-bar .site-main-menu > ul > li.has-children:hover > a > .menu-toggle i {
    color: #ffffff !important;
}

/* Ítem Catálogo: sin fondo permanente, mismo comportamiento que el resto */
.fiu-nav-bar .site-main-menu > ul > li.fiu-nav-featured > a {
    background: transparent;
    padding: 14px 18px !important;
    margin-right: 0;
}

.fiu-nav-bar .site-main-menu > ul > li.fiu-nav-featured > a .menu-text {
    color: var(--fiu-nav-bg) !important;
}

.fiu-nav-bar .site-main-menu > ul > li.fiu-nav-featured > a::after {
    display: none !important;
}

.fiu-nav-bar .site-main-menu > ul > li.fiu-nav-featured:hover > a {
    background: var(--fiu-nav-bg) !important;
}

.fiu-nav-bar .site-main-menu > ul > li.fiu-nav-featured:hover > a .menu-text {
    color: var(--fiu-nav-text) !important;
}

/* ══════════════════════════════════════════════════════════════
   MEGA-MENU — Centrado en pantalla
   ══════════════════════════════════════════════════════════════ */

/* El <li> se desposiciona para que el mega-menu suba al bloque contenedor
   .header-section (position:relative, full-width), permitiendo centrarlo */
.fiu-nav-bar .site-main-menu > ul > li:has(> .sub-menu.mega-menu) {
    position: static;
}

.fiu-nav-bar .sub-menu.mega-menu {
    left: calc(50% - 585px); /* 585px = mitad del ancho fijo 1170px */
    right: auto;
    transform: none;
}

/* ── Mega-menu responsive: 3 columnas en pantallas medianas ──── */
@media (min-width: 768px) and (max-width: 1199px) {
    .fiu-nav-bar .sub-menu.mega-menu {
        width: min(900px, 95vw);
        left: calc(50% - min(450px, 47.5vw));
    }

    .fiu-nav-bar .sub-menu.mega-menu > li {
        flex: 1 0 33.333% !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   SUBMENÚ — Títulos de sección vs enlaces
   ══════════════════════════════════════════════════════════════ */

/* Títulos de sección del megamenú */
.fiu-nav-bar .sub-menu a.mega-menu-title .menu-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--fiu-teal) !important;
}

.fiu-nav-bar .sub-menu a.mega-menu-title {
    padding-bottom: 6px !important;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 4px;
    display: block;
}

/* Enlaces normales del submenú */
.fiu-nav-bar .sub-menu li > a:not(.mega-menu-title) .menu-text {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #444 !important;
}

.fiu-nav-bar .sub-menu li > a:not(.mega-menu-title):hover .menu-text {
    color: var(--fiu-teal) !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE HEADER
   ══════════════════════════════════════════════════════════════ */

/* Compensar header fijo en mobile desde el primer paint (sin flash).
   El script en layout.blade.php corrige este valor dinámicamente
   en caso de cambio de viewport; este CSS evita el layout shift inicial. */
@media (max-width: 767px) {
    body {
        padding-top: 110px;
    }
}

.fiu-mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: none !important;
    background-color: rgba(90, 159, 153, 0) !important;
    border-bottom: none;
    transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

/* Glass effect en scroll — igual que desktop */
.fiu-mobile-header.fiu-header-scrolled {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.16'/%3E%3C/svg%3E") !important;
    background-color: rgba(0, 0, 0, 0.507) !important;
    backdrop-filter: blur(7px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.19);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

/* Texto/links en header mobile */
.fiu-mobile-header .fiu-mobile-top a {
    color: var(--fiu-white) !important;
}

/* ── Fila superior: logo (izq) | hamburger (der) ─────────────── */
.fiu-mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: rgba(90, 159, 153, 1);
    transition: background-color 0.45s ease;
}

.fiu-mobile-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.fiu-mobile-logo img {
    height: 36px;
    width: auto;
}

.fiu-mobile-hamburger {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
}

.fiu-mobile-hamburger .mobile-menu-toggle {
    line-height: 0;
}

/* SVG hamburger blanco */
.fiu-mobile-header .mobile-menu-toggle a svg path {
    stroke: var(--fiu-white);
}

.fiu-mobile-header .mobile-menu-toggle a {
    display: flex;
    align-items: center;
}

/* ── Fila buscador mobile ─────────────────────────────────────── */
.fiu-mobile-search-row {
    padding: 8px 12px 10px;
    background-color: rgba(110, 171, 165, 1);
    transition: background-color 0.45s ease;
}

.fiu-mobile-search-row .header-global-search {
    width: 100%;
    max-width: 100%;
}

.fiu-mobile-search-row .header-global-search-form {
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    height: 40px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}

.fiu-mobile-search-row .header-global-search-form:focus-within,
.fiu-mobile-search-row .header-global-search-form.active {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.fiu-mobile-search-row .header-global-search-input {
    background: transparent !important;
    padding-left: 16px;
    font-size: 14px;
    color: #ffffff !important;
    border-radius: 4px 0 0 4px;
    transition: color 0.25s ease;
}

.fiu-mobile-search-row .header-global-search-input::placeholder {
    color: #ffffff !important;
}

.fiu-mobile-search-row .header-global-search-form:focus-within .header-global-search-input,
.fiu-mobile-search-row .header-global-search-form.active .header-global-search-input {
    color: #333 !important;
}

.fiu-mobile-search-row .header-global-search-form:focus-within .header-global-search-input::placeholder,
.fiu-mobile-search-row .header-global-search-form.active .header-global-search-input::placeholder {
    color: #9c9c9c !important;
}

.fiu-mobile-search-row .header-global-search-button {
    border-radius: 0;
    min-width: 40px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.2s, color 0.2s;
}

.fiu-mobile-search-row .header-global-search-form:focus-within .header-global-search-button,
.fiu-mobile-search-row .header-global-search-form.active .header-global-search-button {
    background: var(--fiu-analogous);
    color: var(--fiu-white);
    border-left-color: transparent;
}

.fiu-mobile-search-row .header-global-search-form .header-global-search-button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--fiu-white);
}

/* Resultados del buscador en mobile */
.fiu-mobile-search-row .header-global-search-results {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    top: auto;
    z-index: 1000;
}

/* ── Hijos mobile: rgba(color,0) al hacer scroll — sin flash blanco */
.fiu-mobile-header.fiu-header-scrolled .fiu-mobile-top {
    background-color: rgba(90, 159, 153, 0);
}

.fiu-mobile-header.fiu-header-scrolled .fiu-mobile-search-row {
    background-color: rgba(110, 171, 165, 0);
}

/* ── Sticky mobile: oculto — reemplazado por glass effect en .fiu-mobile-header */
.mobile-header.sticky-header,
.fiu-mobile-sticky {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   EFECTO VIDRIO AL HACER SCROLL — Desktop header
   ══════════════════════════════════════════════════════════════ */

/* Base: se ancla background-color en rgba teal-0 para que la transición
   nunca pase por blanco (transparent = rgba(0,0,0,0) causaría el flash) */
.header-section.d-none.d-md-block {
    background-color: rgba(90, 159, 153, 0);
    transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

/* Misma duración en hijos para que todo se mueva sincronizado */
.fiu-top-bar-wrap {
    transition: background-color 0.45s ease;
}

.fiu-nav-bar {
    transition: background-color 0.45s ease !important;
}

/* Estado scrolled: efecto vidrio teal con ruido de textura */
.header-section.d-none.d-md-block.fiu-header-scrolled {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.16'/%3E%3C/svg%3E");
    background-color: rgba(0, 0, 0, 0.507);
    backdrop-filter: blur(7px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.19);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

/* Hijos: rgba(color, 0) en lugar de "transparent" — mantiene el tono teal
   en toda la transición y elimina el flash blanco */
.fiu-header-scrolled .fiu-top-bar-wrap {
    background-color: rgba(90, 159, 153, 0) !important;
}

.fiu-header-scrolled .fiu-nav-bar {
    background-color: rgba(110, 171, 165, 0) !important;
}