/* =======================================================
   UTEGRA — Menú Global
   Archivo exclusivo para header + navbar + responsive
======================================================= */

/* Paleta institucional sincronizada con index.css */
:root{
  --azul:       #273375;
  --azul-cta:   #3282B4;
  --azul-osc:   #1F2C45;
  --azul-claro: #5FA6CC;
  --gris:       #ABABAD;
  --gris-borde: #C1C1C3;
  --chip:       #D8D9DA;
  --verde:      #23ca60;
  --verde-osc:  #20b356;
  --naranja:    #ff7a00;
  --negro:      #000000;
  --blanco:     #FFFFFF;
  --beige:      #F5F5DC;
}
/* ===== HEADER ===== morado institucional (como el footer) */
.main-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 82px;
  background: var(--azul) !important;       /* navy violáceo institucional */
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  z-index: 3000;
  backdrop-filter: none !important;
}

.main-header .container {
  max-width: 1200px; margin: auto; width: 100%; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  display: inline-block;
  height: 68px;
  overflow: visible;          /* deja salir el logo escalado sin recortar */
  position: relative;
  z-index: 2;
}
.logo img {
  max-height: 68px;
  width: auto;
  display: block;
  transform: scale(0.9);           /* reducido a 0.9 a pedido del usuario */
  transform-origin: left center;
}

/* ===== NAV DESKTOP ===== */
.navbar { display: flex; }
.navbar ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.navbar a {
  position: relative;
  color: rgba(255,255,255,.92); font-weight: 500;
  text-decoration: none;
  transition: color .25s;
  padding: 6px 0;
}
.navbar a:hover { color: var(--azul-cta); }

/* ==== Línea azul animada en menú principal ==== */
.navbar > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0%; height: 2px;
  background: var(--azul-cta);
  transition: width 0.3s ease;
}
.navbar > ul > li > a:hover::after {
  width: 100%;
}

/* Dropdown (desktop) */
.navbar .has-sub { position: relative; }
.navbar .submenu {
  position: absolute;
  top: calc(100% + 8px);          /* pequeño gap visual con el header */
  left: -10px;                     /* alineado con el inicio del texto del padre */
  min-width: 240px;
  background: #fff;
  border: 1px solid #e8eaef;
  border-radius: 10px;
  padding: 6px 0;
  display: none;
  box-shadow: 0 18px 36px rgba(39,51,117,.18), 0 4px 10px rgba(0,0,0,.06);
  z-index: 1200;
  overflow: hidden;
}
/* Puente invisible entre el menú padre y el submenu para que no se cierre al pasar el cursor */
.navbar .has-sub::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 10px;
}
.navbar .has-sub:hover > .submenu { display: block; }

/* Items del submenú — coordinados con el padre */
.navbar .submenu li {
  width: 100%;
  border: 0;
}
.navbar .submenu a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: var(--azul-osc) !important;     /* mismo tono institucional en todos */
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  border-bottom: 1px solid #eef0f5;
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.navbar .submenu li:last-child a { border-bottom: none; }
.navbar .submenu a i {
  color: var(--azul-cta);
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.95rem;
}
.navbar .submenu a:hover {
  background: #f5f7fb;
  color: var(--azul) !important;
  padding-left: 22px;                    /* sutil indent al hover para feedback */
}
.navbar .submenu a::after { display: none !important; }


/* ===== Botón "Llamar" en header (solo móvil) ===== */
.header-call {
  display: none;            /* oculto en desktop */
  align-items: center;
  gap: 7px;
  margin-left: auto;        /* empuja hacia la derecha */
  margin-right: 12px;
  padding: 7px 13px;
  background: var(--azul-cta);
  color: #fff;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(50,130,180,.35);
  transition: background .2s, transform .2s;
}
.header-call:hover,
.header-call:active {
  background: #2879a3;
  transform: scale(1.04);
  color: #fff;
}
.header-call i { font-size: 0.85rem; }
.header-call span { line-height: 1; }

/* ===== Botón hamburguesa ===== */
.menu-toggle {
  display: none; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  position: relative;
  z-index: 4000;     /* siempre encima del navbar abierto */
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle span {
  position: absolute; left: 8px; right: 8px; height: 3px;
  background: #fff; border-radius: 3px;       /* blanco para contrastar con navy */
  transition: all .35s ease;
}
.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 28px; }
.menu-toggle.active span:nth-child(1){transform:rotate(45deg);top:20px;}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg);top:20px;}
/* X (menú abierto): el navbar de fondo es blanco, así que las líneas
   blancas se perderían. Las cambiamos a azul oscuro institucional. */
.menu-toggle.active span{ background: var(--azul) !important; }

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .menu-toggle { display: block; }
  .header-call { display: inline-flex; }   /* visible en móvil */

  /* Header más compacto en móvil */
  .main-header { height: 68px; }
  .logo img { transform: scale(0.78); }

  /* Hamburguesa más chica */
  .menu-toggle { width: 38px; height: 38px; }
  .menu-toggle span { left: 6px; right: 6px; height: 2.5px; }
  .menu-toggle span:nth-child(1) { top: 11px; }
  .menu-toggle span:nth-child(2) { top: 18px; }
  .menu-toggle span:nth-child(3) { top: 25px; }
  .menu-toggle.active span:nth-child(1){ transform: rotate(45deg); top: 18px; }
  .menu-toggle.active span:nth-child(3){ transform: rotate(-45deg); top: 18px; }

  /* === Navbar lateral mobile === */
  .navbar {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: -340px;
    left: auto !important;
    bottom: auto !important;
    height: 100vh !important;
    width: 300px !important;
    max-width: 84vw !important;
    background: #fff !important;
    box-sizing: border-box;
    padding: 68px 0 20px !important;
    transition: right .4s cubic-bezier(0.7,0,0.3,1);
    box-shadow: -6px 0 24px rgba(0,0,0,0.25);
    overflow-y: auto;
    z-index: 3500;
    backdrop-filter: none !important;
  }
  .navbar.show { right: 0 !important; }

  /* Overlay oscuro detrás del navbar — opaco solo cuando el menú está abierto */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2900;                 /* sobre el contenido, debajo del header (3000) y navbar (3500) */
    pointer-events: none;          /* evita bloquear el cierre por fuera */
  }
  /* Bloquea scroll del body cuando el menú está abierto */
  body.menu-open { overflow: hidden; }

  .navbar ul {
    display: flex;
    flex-direction: column;
    gap: 0;                        /* sin gap, separamos con border-bottom */
    padding: 0; margin: 0;
    align-items: stretch;
    list-style: none;
  }
  .navbar ul > li { width: 100%; }

  /* Items principales del menú */
  .navbar a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 22px;
    color: var(--azul) !important;
    font-size: 0.98rem;
    font-weight: 600;
    border-bottom: 1px solid #eef0f5;
    line-height: 1.2;
  }
  .navbar > ul > li:last-child > a { border-bottom: none; }
  .navbar a:hover,
  .navbar a:active { color: var(--azul-cta) !important; background: #f5f7fb; }
  .navbar a::after { display: none; }
  .navbar a i {
    color: var(--azul-cta);
    width: 22px;                    /* ancho fijo para alinear textos */
    flex-shrink: 0;
    text-align: center;
    font-size: 1rem;
  }

  /* Padre con submenú: chevron a la derecha */
  .navbar .has-sub { position: static; }
  .navbar .has-sub > a::after {
    content: "\f107"; font-family: "FontAwesome";
    margin-left: auto;
    font-weight: normal;
    color: var(--azul-cta);
    transition: transform .25s;
    display: inline !important;     /* anula el "display:none" del padre .navbar a::after */
  }
  .navbar .has-sub.open > a::after {
    transform: rotate(180deg);
  }

  /* Submenú anidado — usa max-height para animar y evitar GHOST CLICKS.
     Display:block siempre (no display:none) y se contrae con max-height:0.
     Cuando se abre con .open, anima suave hasta 600px. El layout se modifica
     poco a poco, así el dedo no aterriza por accidente en un item de abajo. */
  .navbar .submenu {
    position: static !important;
    display: block !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    background: #f9fafc !important;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .28s cubic-bezier(.4,0,.2,1), visibility 0s .28s;
  }
  .navbar .has-sub.open > .submenu {
    max-height: 600px;
    visibility: visible;
    transition: max-height .32s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  }
  .navbar .submenu li { width: 100%; border: 0; }

  /* Mata la línea-underline del menú principal en móvil; en mobile no aplica.
     El ::after de los items con submenú ya está sobrescrito como chevron. */
  .navbar > ul > li:not(.has-sub) > a::after { display: none !important; }

  /* Evita el doble-tap zoom y reduce delays de iOS */
  .navbar a { touch-action: manipulation; }

  /* Items del submenú: alineados visualmente con el padre */
  .navbar .submenu a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 22px 12px 54px;   /* 22 base + 32 de indentación */
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--azul-osc) !important;
    border-bottom: 1px solid #eef0f5;
    line-height: 1.2;
  }
  .navbar .submenu li:last-child a { border-bottom: none; }
  .navbar .submenu a i {
    color: var(--azul-cta);
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.9rem;
  }
  .navbar .submenu a:hover { background: #eef0f5; color: var(--azul-cta) !important; }
  .navbar .submenu a::before { content: none !important; }
}

/* En móviles muy pequeños, solo el ícono del "Llamar" */
@media (max-width: 380px) {
  .header-call { padding: 8px 10px; }
  .header-call span { display: none; }
}

/* ===== Variación sutil del header al abrir menú móvil ===== */
body.menu-open .main-header {
  background: var(--azul-osc) !important;     /* navy aún más oscuro */
  transition: background 0.3s ease;
}

/* ======================================================= 
   FOOTER INSTITUCIONAL — UTEGRA (Versión PRO - 2 Bloques Simétricos)
======================================================= */
footer {
    /* Fondo azul profundo y sólido, más limpio que el degradado en 2 bloques */
    background: var(--azul); 
    color: var(--blanco);
    font-family: 'Poppins', sans-serif;
    padding: 60px 20px 40px; /* Más padding para airear */
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.2); /* Sombra pro superior */
}

/* Contenedor principal */
.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

/* === Bloque de Contacto (.footer-info) === */
.footer-info {
    /* Ya no necesita ancho fijo, se basa en contenido */
    max-width: 400px; 
}
.footer-info h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem; /* Título más prominente */
    color: var(--blanco);
    font-weight: 800;
    margin-bottom: 15px;
    /* Línea de resalte debajo del título */
    border-bottom: 2px solid var(--azul-cta); 
    padding-bottom: 5px;
}

.footer-info p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 4px 0;
}

.footer-mail {
    color: var(--azul-cta);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease;
    font-size: 1.05rem;
    display: inline-block; /* Asegura que no se rompa el bloque */
    margin-bottom: 15px;
}

.footer-mail:hover {
    color: var(--blanco);
    text-decoration: underline;
}

.footer-phones p {
    margin: 6px 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
}

.footer-phones i {
    color: var(--azul-cta);
    margin-right: 8px; /* Más separación */
}

/* === Bloque Redes + Derechos (.footer-social) === */
.footer-social {
    /* Eliminamos flex: 1; para evitar que el bloque se estire innecesariamente */
    text-align: center; 
    align-self: flex-end; /* Alinea este bloque a la base del footer */
    /* Añadimos un margen a la izquierda para empujar el bloque hacia la derecha */
    margin-left: auto;
}

.footer-social h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: var(--azul-cta); /* Título de redes en CTA */
    font-weight: 700;
    margin-bottom: 15px;
    /* Aseguramos que el título de redes esté alineado a la izquierda del bloque */
    text-align: left; 
}

.social-icons {
    display: flex;
    justify-content: flex-start; /* Alineamos a la izquierda del bloque social */
    gap: 12px; /* Menor gap */
    margin-bottom: 20px;
}

.social-icons a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Diseño moderno de íconos: borde sutil y fondo transparente */
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.25s ease;
}

.social-icons a:hover {
    background: var(--azul-cta);
    border-color: var(--azul-cta);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(50, 130, 180, 0.4);
}

/* Derechos reservados */
.footer-rights {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: left;
    display: block;
}

/* Acceso administrativo — link discreto */
.footer-sep {
  color: rgba(255, 255, 255, 0.35);
  margin: 0 4px;
}
.footer-admin {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.footer-admin:hover {
  color: var(--azul-cta);
  text-decoration: underline;
}
.footer-admin i {
  font-size: 0.75rem;
}

/* === Responsive (Ajuste para centrar en móvil) === */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center; /* Centra los bloques */
        text-align: center;
    }
    .footer-info, .footer-social {
        width: 100%;
        max-width: 400px;
        margin: 0;
        text-align: center;
    }

    .footer-info h2 {
        border-bottom: none; /* Quitamos la línea de separación en móvil */
        padding-bottom: 0;
    }
    
    .footer-info, .footer-social {
        margin-bottom: 20px;
    }

    .footer-social h3, .footer-rights {
        text-align: center; /* Centramos el texto social */
    }

    .social-icons {
        justify-content: center; /* Centramos los íconos */
    }
}