/* ============================================
   PALETA DE COLORES INSTITUCIONALES
============================================= */
:root {
    --navy: #081a40;
    --indigo: #134582;
    --aqua: #6fc8cc;
    --soft-gray: #efefef;
    --white: #ffffff;
}

/* ============================================
   CONFIGURACIÓN GENERAL DE TIPOGRAFÍA
============================================= */
body, nav, ul, li, a {
    font-family: 'Montserrat', sans-serif;
}

/* ============================================
   HEADER (estructura base)
============================================= */
.usam-header {
    position: relative;
    overflow: visible;  /* ← necesario para que el submenu no se recorte */
    z-index: 10;
}

header .container {
    width: 90%;
}

.usam-header nav {
    background: var(--navy);
    height: 80px;
    line-height: 80px;
    border-radius: 0 0 55px 55px; /* curvas laterales inferiores */
}

/* Logo escritorio */
.usam-nav .brand-logo {
    position: absolute;
    left: 0;
    top: 0;
}

.usam-nav .brand-logo img {
    height: 58px;
    margin-top: 10px;
}

/* ============================================
   BARRA DE NAVEGACIÓN - MENÚ DESKTOP
============================================= */
.usam-menu > li > a {
    color: var(--white);
    font-size: 15px;
    padding: 0 12px;
    position: relative; /* necesario para la línea roja */
    display: inline-block;
    height: 80px;
    line-height: 80px;
}

/* Espaciado entre ítems */
.usam-menu > li {
    margin: 0 2px;
}

/* ============================================
   SUBMENÚ DESKTOP
============================================= */
.submenu-container {
    position: relative;
}

/* Contenedor del submenu */
.submenu {
    position: absolute;
    top: 54px;       /* debajo del menú */
    left: 13px;      /* alineación con el texto */
    width: 260px;
    background: var(--aqua);
    padding: 10px 0;
    border-radius: 2px;
    display: none;
    z-index: 99999 !important;
}

/* Mostrar submenu */
.submenu-container:hover .submenu {
    display: block;
}

/* Items internos */
.submenu li {
    display: block;
    width: 100%;
}

.submenu li a {
    display: flex;
    align-items: center;
    padding: 6px 18px;
    color: #000;
    font-size: 15px;
    line-height: 1.2;
    white-space: normal; /* permite salto de línea */
}

/* Flecha del submenu */
.submenu li a::before {
    content: "chevron_right";
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    display: inline-block;
    line-height: 1;
    margin-right: 8px;
    opacity: .9;
}

/* Hover */
.submenu li:hover {
    background: rgba(0,0,0,0.07);
}

/* ============================================
   INDICADOR ROJO (página activa)
============================================= */
.usam-menu > li.active > a::after {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-282%);
    width: calc(100% - 90px);
    height: 3px;
    background: #9b242d;
    border-radius: 2px;
}

/* ============================================
   IDIOMAS (Desktop)
============================================= */
.lang-item a {
    padding: 0 4px !important;
}

.lang-separator {
    color: #ffffff;
    opacity: 0.7;
    padding: 0 2px;
    line-height: 80px;
}

.search-icon {
    font-size: 22px;
    margin-top: 4px;
}

/* ============================================
   HEADER MÓVIL (estructura principal)
============================================= */
.header-mobile {
    display: none;
}

.header-mobile .nav-wrapper {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 12px;
}

/* Centro: hamburguesa + logo */
.mobile-center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    height: 80px;
}

/* hamburguesa */
.mobile-menu-btn i {
    font-size: 32px;
    color: white;
}

/* Logo móvil */
.mobile-logo img {
    height: 48px;
    margin-top: 31px;
}

/* Reset de Materialize */
.sidenav-trigger {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* ============================================
   SIDENAV MÓVIL
============================================= */
.usam-sidenav {
    background: var(--navy) !important;
    width: 280px;
    left: 0;
    padding-top: 15px;
}

.sidenav-header img {
    width: 140px;
    margin: 10px auto 20px;
    display: block;
}

/* Texto largo en submenu móvil */
.sidenav .collapsible-body ul li a {
    white-space: normal !important;
    line-height: 1.4 !important;
    overflow-wrap: break-word !important;
    padding-right: 20px !important;
}

.sidenav a {
    color: #fff !important;
    font-size: 16px;
}

/* Encabezados del menu móvil */
.collapsible-header {
    font-size: 17px;
    font-weight: 600;
    padding: 14px 20px !important;
    color: white !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.collapsible-body {
    background: #0d2b5a !important;
}

.collapsible-body ul li a {
    padding: 10px 30px !important;
}

/* Idiomas móviles */
.mobile-lang {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    font-size: 16px;
    color: white;
}

.lang-divider {
    opacity: .7;
}

/* ============================================
   BOTÓN DE CERRAR (mobile)
============================================= */
.mobile-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mobile-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-top: -25px;
    margin-right: 10px;
}

.mobile-close-btn i {
    font-size: 32px;
    color: #ffffff;
}

.sidenav-overlay {
    z-index: 9;
}

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

/* Mostrar menú móvil hasta 992px */
@media(max-width: 992px) {
    .header-desktop { display: none; }
    .header-mobile { display: block; }

    .usam-nav .brand-logo img {
        height: 48px;
        margin-top: 12px;
    }
}

/* Ocultar header móvil en desktop */
@media(min-width: 993px) {
    .header-mobile { display: none; }
}

/* ============================================
   FIX: Vista intermedia (Tablet horizontal)
   Rango: 1024px → 993px
   Evita que el logo se monte sobre el menú
============================================= */
@media (max-width: 1024px) and (min-width: 993px) {

    /* Reducimos tamaño del logo para que no invada el menú */
    .usam-nav .brand-logo img {
        height: 48px;
        margin-top: 14px;
    }

    /* Reducimos el padding de los ítems del menú */
    .usam-menu > li > a {
        padding: 0 10px;
        font-size: 14px;
    }

    /* Espaciado entre los LI */
    .usam-menu > li {
        margin: 0 1px;
    }

    /* Ajustamos el container para dar más aire */
    header .container {
        width: 95%; /* más ancho, más espacio disponible */
    }
}

/* RESET DEFINITIVO DE LISTAS DEL MENÚ */
.usam-menu,
.usam-menu ul,
.submenu,
.submenu li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}


/* =====================
   FOOTER
===================== */
.footer {
    background:linear-gradient(90deg,#081a40,#0b2e5a);
    color:#fff;
    margin-top: 25px;
}

.footer-main {
    max-width:1300px;
    margin:auto;
    padding:60px 20px;
    display:grid;
    grid-template-columns:1fr 3fr 1.4fr;
    gap:40px;
}

.footer-logo img {
    width:150px;
}

/* LINKS */
.footer-links {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.footer-links h5 {
    color:#6fd3db;
    font-size:15px;
    font-weight:700;
    margin-bottom:10px;
}

.footer-links a {
    display:block;
    font-size:13px;
    margin-bottom:6px;
    color: white;
}

/* CONTACTO */
.footer-contact h5 {
    color:#6fd3db;
    font-size:15px;
    margin-bottom:10px;
}

.footer-contact p {
    font-size:13px;
    line-height:1.5;
}

.socials span {
    display:inline-block;
    width:26px;
    height:26px;
    border-radius:50%;
    margin-right:6px;
}

.lang {
    margin-top:15px;
    font-size:13px;
}

/* BOTTOM */
.footer-bottom {
    background:#fff;
    color:#000;
    text-align:center;
    font-size:13px;
    padding:12px 0;
}

/* ===============================
   BOTÓN SCROLL TO TOP
================================ */
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: #9B242D; /* rojo institucional */
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 9999;
}

#scrollTopBtn i {
    font-size: 26px;
}

/* visible */
#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* hover */
#scrollTopBtn:hover {
    background: #0B3257; /* navy USAM */
}

@media (max-width: 600px) {
    #scrollTopBtn {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}

/* ============ SLIDER GENERAL ============ */
.usam-slider {
    width: 100%;
    height: 750px;
    position: relative;
    overflow: hidden;
    background: #000;
    top: -49px;
}

/* CONTENEDOR DE SLIDES */
.slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

/* SLIDE */
.usam-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s ease;
}

/* SLIDE ACTIVO */
.usam-slider .slide.active {
    opacity: 1;
    z-index: 2;
}

/* ======== FLECHAS SIN CÍRCULO ======== */

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;   /* SIN FONDO */
    border: none !important;       /* SIN BORDE */
    box-shadow: none !important;   /* SIN SOMBRA */
    cursor: pointer;
    z-index: 9;
    padding: 0;                    /* SIN PADDING EXTRA */
}

/* ÍCONO DE LA FLECHA */
.slider-arrow i {
    color: #ffffff;                /* flecha blanca */
    font-size: 46px;               /* más grande para mejor visibilidad */
    transition: opacity .25s ease;
}

/* HOVER: solo baja un poco la opacidad, sin fondo */
.slider-arrow:hover i {
    opacity: 0.7;
}

/* Flecha izquierda centrada dentro del área segura */
.slider-arrow.left {
    left: max(20px, calc((100vw - 1440px) / 2));
}

/* Flecha derecha centrada dentro del área segura */
.slider-arrow.right {
    right: max(20px, calc((100vw - 1440px) / 2));
}


/*
Explicación:
- Si el viewport es mayor a 1440, las flechas se “frenan”
  para no irse a los extremos.
- En pantallas chicas, nunca estarán a menos de 20px del borde.
*/

/* ============ RESPONSIVE HEIGHT ============ */
@media(max-width: 992px) {
    .usam-slider {
        height: 380px;
    }
}

@media(max-width: 600px) {
    .usam-slider {
        height: 260px;
    }
}


.seo-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Loader overlay */
.page-loader{
  position: fixed;
  inset: 0;
  background: #081a40;              /* navy */
  display: grid;
  place-items: center;
  z-index: 999999;                  /* arriba de todo */
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility .25s ease;
}

/* Estado oculto */
.page-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Spinner circular */
.page-loader .spinner{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: #6fc8cc;        /* aqua */
  animation: spin .8s linear infinite;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* Mientras carga: evita scroll y “flash” */
html.is-loading,
html.is-loading body{
  overflow: hidden;
}


/* ===============================
   REVEAL ON SCROLL
================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}