/*
Theme Name: Consejo Superior USACH
Author: Tu Nombre
Description: Tema a medida para el Consejo Superior.
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito+Sans:wght@400;700&display=swap');

/* =========================================
   Variables y Reset
   ========================================= */
:root {
  --color-dark: #394049;
  --color-primary: #00A499;
  --color-white: #FFFFFF;
  --font-body: 'Nunito Sans', sans-serif;
  --font-title: 'Bebas Neue', sans-serif; /* <-- Cambiamos 'cursive' por 'sans-serif' por seguridad */
}

/* ... resto de tu CSS intacto ... */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-dark);
}

/* =========================================
   Header / Navbar
   ========================================= */
.site-header {
  background: var(--color-white);
  padding: 15px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* --- SOLUCIONES NUEVAS --- */
  flex-wrap: wrap; /* Permite que el menú baje a una nueva línea si crece mucho por el zoom */
  gap: 30px; /* Mantiene una distancia segura entre el logo y el menú */
  position: relative; /* Necesario para que funcione el z-index */
  z-index: 9999; /* Forzamos a que todo el header esté siempre por encima de la página, incluso con filtros activos */
  
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo-usach img,
.custom-logo {
  max-height: 90px; /* Usamos max-height para que no crezca más de 90px */
  width: auto;
  display: block;
}

.brand-separator {
  height: 70px;
  width: 2px;
  background-color: #F37A3E; /* El color naranja de la línea en tu imagen */
}

.site-title {
  font-family: var(--font-title);
  color: var(--color-primary);
  font-size: 28px;
  line-height: 1.1;
  text-transform: uppercase;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: 60px; /* Separación entre links */
}

.main-navigation a {
  text-decoration: none;
  color: var(--color-dark);
  font-weight: 700;
  font-size: 18px;
  transition: color 0.3s ease;
  position: relative; /* <-- Necesario para colocar la línea naranja */
  padding-bottom: 5px; /* <-- Da un respiro entre la letra y la línea */
}

.main-navigation a:hover {
  color: var(--color-primary);
}

.main-navigation li {
  position: relative; /* Crucial: el sub-menú tomará esto como punto de referencia */
}

/* Ocultar y estilizar el sub-menú (WordPress le pone la clase .sub-menu) */
.main-navigation ul ul.sub-menu,
.main-navigation ul ul {
  display: none; /* Oculto por defecto */
  position: absolute;
  top: 100%; /* Aparece justo debajo del botón padre */
  left: 0;
  background-color: var(--color-white);

  min-width: 250px;
  z-index: 999; /* Asegura que flote sobre el resto del contenido */
  
  /* Resetear las reglas heredadas del menú principal */
  flex-direction: column;
  gap: 0;
}

/* Mostrar el sub-menú al pasar el mouse sobre el li padre */
.main-navigation li:hover > ul.sub-menu,
.main-navigation li:hover > ul {
  display: flex;
}

/* Estilos de los enlaces que están dentro del sub-menú */
.main-navigation ul ul a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400; /* En el boceto no están en negrita */
  color: var(--color-dark);
}

/* Efecto hover ligero para los sub-botones */
.main-navigation ul ul a:hover {
  background-color: #f5f5f5; 
  color: var(--color-primary);
}

/* =========================================
   ESTADO ACTIVO DEL MENÚ (Verde y subrayado)
   ========================================= */
/* Pinta de verde el botón de la página actual (y también el padre si estás en un submenú) */
.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-parent > a,
.main-navigation li.current-menu-ancestor > a,
.main-navigation li.current-page-ancestor > a {
  color: var(--color-primary);
}

/* Dibuja la línea naranja justo debajo del texto */
.main-navigation li.current-menu-item > a::after,
.main-navigation li.current-menu-parent > a::after,
.main-navigation li.current-menu-ancestor > a::after,
.main-navigation li.current-page-ancestor > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EA7600; /* Naranja institucional */
}

/* Quitamos la línea naranja de los enlaces del sub-menú (desplegable) para que no se vea raro */
.main-navigation ul ul li.current-menu-item > a::after {
  display: none;
}

/* =========================================
   Footer
   ========================================= */
.site-footer {
  background: var(--color-dark);
  padding: 40px 60px 20px 60px;
  color: var(--color-white);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 30px;
}

.footer-logo-usach img,
.footer-logo-direccion img {
  max-height: 90px; /* <-- Aumentado de 70px a 100px para darles mayor protagonismo */
  width: auto;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.footer-bottom span {
  font-size: 16px;
}

.footer-logo-citiaps img {
  height: 45px; /* <-- Lo subí un poquito (de 40 a 45) para compensar */
  width: auto;
}

/* Texto central opcional del Footer */
.footer-texto-central {
    text-align: center;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8); /* Blanco ligeramente transparente */
    max-width: 450px;
    padding: 20px;
}

/* =========================================
   Contenido Principal (Para el Index)
   ========================================= */
.site-content {
  min-height: 60vh; 
  padding: 10px 0; /* <-- CAMBIO: 0 en los lados para permitir ancho completo */
  text-align: center;
}

/* =========================================
   Página de Inicio (Index) / Carrusel
   ========================================= */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Separación entre la imagen y los textos */
    padding: 20px 0 60px 0;
}

/* --- Carrusel --- */
/* --- Carrusel --- */
.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%; /* <-- CAMBIO: Sin límite de ancho en pantallas gigantes */
    position: relative; 
}

.carousel-track-container {
    width: 100%; /* <-- CAMBIO: Ahora la imagen ocupa el 100% del espacio, no el 90% */
    overflow: hidden; 
    position: relative;
}

.carousel-track {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    display: flex;
    justify-content: center;
}

.carousel-slide img {
    width: 100%;
    height: 400px; 
    object-fit: cover; 
    display: block;
}

/* Botones (Flechas) Flotantes */
.carousel-btn {
    background: rgba(255, 255, 255, 0.7); /* Fondo blanco semitransparente para resaltar sobre la foto */
    border: 1px solid var(--color-dark);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-dark);
    transition: all 0.3s ease;
    
    /* --- MAGIA FLOTANTE --- */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical perfecto */
    z-index: 10; /* Se asegura de estar por encima de la imagen */
    opacity: 0.5; /* Un poco invisibles por defecto para no tapar la foto */
}

/* Posiciones individuales de las flechas */
.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* Efecto al pasar el mouse */
.carousel-btn:hover {
    background: var(--color-dark);
    color: var(--color-white);
    opacity: 1; /* Se vuelven 100% visibles */
}

/* --- Textos del Figma --- */
.hero-text-container {
    text-align: center;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto; /* Mantiene el texto centrado */
    padding: 0 20px; /* <-- CAMBIO: Margen seguro lateral para el texto */
}

.hero-main-text {
    font-family: var(--font-body);
    font-weight: 400; /* Modificado según mockup */
    font-size: 18px; /* Modificado según mockup */
    line-height: 25px; /* Modificado según mockup */
    color: #000000;
}

.hero-sub-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 22px;
    color: #000000;
}

/* =========================================
   Adaptabilidad Móvil (Responsive Design)
   ========================================= */

/* Por defecto, el botón hamburguesa está oculto en PC */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 5px;
}

/* --- Pantallas medianas y tablets (hasta 992px) --- */
@media (max-width: 992px) {
  
  /* HEADER MÓVIL */
  .site-header {
    padding: 15px 20px; /* Reducimos los bordes */
    flex-wrap: wrap; /* Permitimos que el menú baje de línea */
  }

  /* Achicamos un poco los logos para que no desborden */
  .logo-usach img, .custom-logo { max-height: 60px; }
  .brand-separator { height: 50px; }
  .site-title { font-size: 22px; }
  .header-brand { gap: 15px; }

  /* Mostramos el botón hamburguesa */
  .menu-toggle {
    display: block; 
  }

  /* Ocultamos el menú principal por defecto */
  .main-navigation {
    display: none; 
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #EEEEEE;
    padding-top: 20px;
  }

  /* Esta es la clase que se activa con JS al hacer clic */
  .main-navigation.toggled {
    display: block;
  }

  /* Hacemos que los enlaces se apilen en una columna */
  .main-navigation ul {
    flex-direction: column;
    gap: 20px;
    padding-left: 10px; /* Un poco de sangría para que no pegue con el borde */
  }

  /* Quitamos la línea naranja inferior en celular para que no se vea sobrecargado */
  .main-navigation li.current-menu-item > a::after,
  .main-navigation li.current-menu-parent > a::after,
  .main-navigation li.current-menu-ancestor > a::after,
  .main-navigation li.current-page-ancestor > a::after {
    display: none;
  }

  /* Arreglamos los Sub-menús (Misión, Visión...) para que empujen el texto hacia abajo en celular */
  .main-navigation ul ul.sub-menu,
  .main-navigation ul ul {
    position: static; /* Ya no flota encima */
    min-width: 100%;
    box-shadow: none;
    border-left: 2px solid var(--color-primary); /* Línea verde a la izq para notar que es submenú */
    padding-left: 20px;
    margin-top: 15px;
    display: flex; /* <-- ¡ESTE ES EL CAMBIO CLAVE! (Antes decía none) */
  }
}

/* --- Pantallas pequeñas de Celular (hasta 768px) --- */
@media (max-width: 768px) {
  
  /* CARRUSEL MÓVIL: Reducimos la altura para no ocupar toda la pantalla */
  .carousel-slide img {
    height: 250px; /* La mitad de la altura original */
  }

  .hero-section {
    gap: 15px; /* <-- Menos espacio entre la imagen y el texto */
    padding: 0 0 40px 0; /* <-- Quitamos el padding superior para subir la imagen */
  }

  /* FOOTER MÓVIL (Columna vertical) */
  .site-footer {
    padding: 40px 20px 20px 20px;
  }

  .footer-top {
    flex-direction: column; /* Cambia de Fila a Columna */
    align-items: center;
    text-align: center;
    gap: 40px; /* Separación vertical entre logos */
  }

  .footer-logo-usach img,
  .footer-logo-direccion img {
    max-height: 90px; /* Achicamos un poco los logos en celular */
  }

  .footer-bottom {
    flex-direction: column; /* Colaboradores también en columna */
    gap: 20px;
  }

  /* Ajuste de flechas en celular */
  .carousel-btn {
    width: 35px; /* Flechas más pequeñas */
    height: 35px;
    opacity: 0.8; /* Como no hay "hover" en el celular, las dejamos más visibles por defecto */
  }

  .prev-btn { left: 10px; } /* Más pegadas al borde */
  .next-btn { right: 10px; }
}