/* =============================================
   NAVBAR
   ============================================= */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
/* La cabecera no usa el ancho normal del .container: en el original la caja
   mide 1180px justos y sin relleno lateral, de modo que el logo empieza en
   x=383 (por su propio padding de 20px) y el menu termina pegado al borde
   derecho de esa caja, en x=1543. */
.navbar__inner {
    display: flex; align-items: stretch; justify-content: space-between;
    min-height: 87px;   /* +1px del borde inferior = 88px, igual que el original */
    max-width: 1180px;
    padding: 0;
}

/* Mismo relleno que el .site-logo del original: 18px arriba, 20px a los lados */
.navbar__logo {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: 18px 20px;
}
.navbar__logo img { width: 270px; height: auto; } /* DIMENSIONES DE LOGO EN HEADER */
.navbar__logo-text {
    font-family: var(--font-heading); font-weight: 400; font-size: 1.4rem;
    color: var(--navy); letter-spacing: -.02em;
}
.navbar__logo-text strong { color: var(--sky); }

.navbar__menu { display: flex; align-items: stretch; }
.navbar__menu ul { display: flex; align-items: stretch; margin: 0; gap: 0; }
.navbar__menu ul li { position: relative; display: flex; align-items: stretch; }
.navbar__menu ul li a {
    display: flex; align-items: center; justify-content: center;
    padding: 0 15px;    /* la altura la fija .navbar__inner */
    font-family: var(--font-heading); font-size: .875rem; font-weight: 400;
    color: #000000; letter-spacing: normal;
    text-transform: uppercase;
    background: var(--nav-active-bg);
    border-radius: 0;
    border-right: 1px solid #5c84ac;
    transition: var(--transition); white-space: nowrap;
    border-bottom: none;
}
.navbar__menu ul li:last-child a { border-right: none; }
.navbar__menu ul li a:hover { color: #020202; background: var(--sky); }
.navbar__menu ul li a.active {
    background: var(--sky);
    color: #020202;
    border-bottom-color: transparent;
}
.navbar__menu ul li a i { font-size: .65rem; margin-left: .3rem; }

/* =============================================
   DESPLEGABLE DE SERVICIOS — medidas del menu original
     paneles de 240px, fondo #b41e18, enlaces Oswald 14px/20px
     blancos con padding 15px 20px y filete inferior #353535
     hover: fondo #50adef con texto negro
     el nivel 3 sale a la derecha (left:100%, top:0)
     triangulo de 20px bajo el item del menu al pasar el mouse
   ============================================= */
.has-dropdown { position: relative; }

/* Triangulo que apunta hacia arriba, pegado al borde inferior del item.
   Aparece al pasar el mouse por CUALQUIER item del menu (en el original
   solo se ve en SERVICIOS, que es el unico con desplegable). */
.navbar__menu > ul > li::after {
    content: '';
    position: absolute;
    left: 50%; margin-left: -10px;
    top: calc(100% - 20px);
    width: 0; height: 0;
    border: 10px solid transparent;
    border-bottom-color: #b41e18;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
    z-index: 101;
}
.navbar__menu > ul > li:hover::after { opacity: 1; }

.has-dropdown .dropdown {
    display: none;
    position: absolute; top: 100%; left: 0;
    width: 240px;
    background: transparent;
    box-shadow: var(--shadow-md);
    z-index: 100;
}
.has-dropdown:hover > .dropdown { display: block; }

.navbar__menu .dropdown li {
    display: block;
    position: relative;
    background: #b41e18;
    padding: 0;
    border: none;
}
.navbar__menu .dropdown li a {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: 15px 20px;
    font-family: var(--font-heading);
    font-size: 14px; line-height: 20px; font-weight: 400;
    text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid #353535; border-right: none;
    background: transparent;
    color: var(--white);
    white-space: normal;
}
/* En el original TODOS los items llevan la linea inferior, tambien el ultimo */
/* Azul al pasar el mouse y tambien en la pagina que se esta viendo y en su
   padre, tal cual el original (current-menu-item / current-menu-ancestor). */
.navbar__menu .dropdown li a:hover,
.navbar__menu .dropdown li a.current { background: #50adef; color: #000; }

/* Marca de submenu y tercer nivel */
.navbar__menu .dropdown .has-submenu > a::after {
    content: '\203A';
    font-size: 16px;
    line-height: 1;
    opacity: .8;
}
.navbar__menu .dropdown--sub {
    display: none;
    position: absolute;
    left: 100%; top: 0;
    width: 240px;
}
.navbar__menu .dropdown .has-submenu:hover > .dropdown--sub { display: block; }

/* Hamburger */
.navbar__toggle {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; background: none; border: none; padding: .5rem;
    align-self: center;
}
.navbar__toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--navy); border-radius: 2px; transition: var(--transition);
}