/* =========================================================
   REDISEÑO 2026 — EPJA / Plan FINES  (v3)
   Se carga DESPUÉS de styles.css y navbar.css.

   Paleta: uso el verde institucional REAL que ya usa el sitio
   (#0e9102, de styles.css) en vez de uno inventado, para que
   todo quede consistente con lo que ya existe.
   ========================================================= */

:root{
  --verde: #0e9102;
  --verde-oscuro: #123a12;
  --verde-hover: #0a7102;
  --verde-claro: #e7f4e9;
  --amarillo: #f9ae06;
  --blanco: #FFFFFF;
  --gris-fondo: #F6F7F5;
  --gris-texto: #444444;
  --gris-suave: #767676;
  --borde: #e4e8e3;
  --radio: 10px;
  --sombra: 0 4px 18px rgba(0,0,0,.08);
}

/* =========================================================
   FIX 0 — SCROLL HORIZONTAL EN MÓVIL (SAMSUNG A55, ETC.)

   Causa real: styles.css no tiene un reset global de
   box-sizing: border-box. Sin eso, elementos con max-width +
   padding (ej. .noticias-slider-container: max-width:1200px
   + padding:0 50px) terminan ocupando más ancho que su propio
   contenedor, empujando toda la página hacia el costado en
   pantallas angostas.
   ========================================================= */

*,
*::before,
*::after{
  box-sizing: border-box !important;
}

html, body{
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ---------- FIX: portada-membrete usaba una captura de pantalla
   como fondo ("Captura de pantalla 2025-01-27...png"), probablemente
   quedó puesta sin querer. La reemplazo por un fondo sólido.
   Si en realidad era intencional, borrá este bloque. ---------- */
.portada-membrete{
  background-image: none !important;
  background: var(--verde-oscuro) !important;
  margin-top: 72px !important;
}

/* ---------- HERO NUEVO ---------- */
.hero-nuevo{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(18,58,18,.93), rgba(18,58,18,.55)),
    repeating-linear-gradient(135deg, #1f5c2a 0 40px, #1a4a24 40px 80px);
  color: #fff;
  padding: 0 6vw;
  margin-top: 72px !important;
}
.hero-nuevo-inner{ max-width: 640px; padding: 56px 0; }
.hero-badge{
  display: inline-block;
  background: rgba(249,174,6,.18);
  border: 1px solid rgba(249,174,6,.5);
  color: var(--amarillo);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.hero-titulo{
  font-size: 38px;
  line-height: 1.18;
  margin: 0 0 16px;
  font-weight: 700;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}
.hero-titulo span{ color: var(--amarillo); }
.hero-bajada{
  font-size: 16px;
  line-height: 1.6;
  color: #e7ede8;
  margin: 0 0 28px;
  max-width: 500px;
}
.hero-botones{ display: flex; gap: 14px; flex-wrap: wrap; }
.hero-btn-primario{
  background: var(--amarillo);
  color: #1c1c1c;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14.5px;
}
.hero-btn-secundario{
  border: 1.5px solid rgba(255,255,255,.6);
  color: #fff;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
}
@media (max-width: 768px){
  .hero-titulo{ font-size: 28px; }
  .hero-nuevo{ 
    min-height: auto; 
    padding: 40px 6vw;
    margin-top: 64px !important; /* NUEVO: Compensa el tamaño reducido de la barra en celulares */
  }
  .portada-membrete {
    margin-top: 64px !important; /* NUEVO: Compensa el tamaño reducido de la barra en celulares */
  }
}

/* ---------- ACCESOS RÁPIDOS (ex círculos) ---------- */
#normativas::before,
#aula-virtual::before,
#inscripciones::before,
#consultas::before,
#mapas::before,
#asistencias-tecnicas::before{
  content: none !important;
}

.section-circular{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 18px !important;
  max-width: 1200px;
  margin: 40px auto !important;
  padding: 0 24px;
  width: 100% !important;
}
.card.circular{
  width: auto !important;
  height: auto !important;
  border-radius: var(--radio) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--sombra) !important;
  border-top: 4px solid var(--verde) !important;
  padding: 26px 16px !important;
  min-height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}
.card.circular:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
}
.card.circular h2{
  color: #1c1c1c !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  margin: 0 !important;
}
#aula-virtual{ border-top-color: #3B82C4 !important; }
#consultas{ border-top-color: #8B5CF6 !important; }
#mapas{ border-top-color: #E0574C !important; }
#asistencias-tecnicas{ border-top-color: var(--amarillo) !important; }

@media (max-width: 900px){
  .section-circular{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* FIX: las tarjetas (Aula Virtual, Normativas, Sedes, etc.) no
   estaban forzadas a ocupar el ancho exacto de su celda de la
   grilla — si el texto era un poco más largo, la tarjeta se
   estiraba más allá de su columna y obligaba a scrollear de
   costado para verla completa. */
@media (max-width: 768px){
  .section-circular{
    gap: 14px !important;
    padding: 0 16px !important;
  }
  .card-container{
    width: 100% !important;
    max-width: 100% !important;
  }
  .card.circular{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100px !important;
    padding: 18px 10px !important;
  }
  .card.circular h2{
    font-size: 13px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* En celulares muy angostos, una sola columna es más cómoda */
@media (max-width: 420px){
  .section-circular{
    grid-template-columns: 1fr !important;
  }
}

/* ---------- GALERÍA ---------- */
.image-carousel-container{
  border-radius: var(--radio) !important;
  box-shadow: var(--sombra) !important;
}
.image-carousel-section{
  width: 90% !important;
  max-width: 1200px !important;
  margin: 20px auto 70px !important;
  padding: 0 !important;
}

/* ---------- FOOTER ---------- */
.footer{
  background: var(--verde-oscuro) !important;
}
.footer-section h3::after{
  background: var(--amarillo) !important;
}
.footer-links a:hover,
.developer-info a:hover{
  color: var(--amarillo) !important;
}
.social-icons a:hover{
  background: var(--verde) !important;
}

/* ---------- CHATBOT: alinear tamaño con el resto del sitio ---------- */
#chat-button{
  width: 54px !important;
  height: 54px !important;
}
#chat-icon{
  width: 90px !important;
  height: 90px !important;
}

/* ---------- Ritmo de espaciado entre secciones ---------- */
.noticias-carrusel{ padding: 70px 0 !important; }
.noticias-slider-container{
  max-width: 1200px !important;
  padding: 0 50px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.promo-programas{ margin: 70px auto !important; }
.section-primary{ margin: 70px auto !important; }
.section-circular{ margin: 20px auto 70px !important; }

.seccion-titulo::after{
  background: linear-gradient(to right, var(--verde), var(--amarillo)) !important;
}

.portada-membrete .portada-titulo .bold,
.portada-membrete .portada-titulo .regular{
  animation: slideIn 1.5s ease-out !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,.6) !important;
}

.dropdown-content{
  border-radius: var(--radio) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  overflow: hidden;
  background: var(--verde-oscuro) !important;
}
.dropdown-content a:hover{
  background: rgba(255,255,255,.08) !important;
}

.main-button{
  letter-spacing: .3px;
}

.dropdown-button:hover .main-button{
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}


/* NAVBAR: el diseño de la barra de navegación vive ahora en navbar.css */

/* =========================================================
   FIX — LA TARJETA "AULA VIRTUAL" SE VE MÁS CHICA QUE LAS DEMÁS

   El contenedor de Aula Virtual todavía tiene la clase vieja
   "dropdown-button" (de cuando tenía un submenú desplegable, ya
   sacado). Esa clase en styles.css trae min-width:300px y sobre
   todo max-width:48%, pensados para el layout viejo de dos
   columnas (DEPJA/ECE) — y ese max-width nunca quedó neutralizado,
   así que seguía topando el ancho de la tarjeta aunque el resto
   de las reglas de .card-container ya la estiraban a 100%.
   ========================================================= */

.section-circular .card-container.dropdown-button{
  flex: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  z-index: 1 !important;
}

/* =========================================================
   HERO CON CARRUSEL DE IMÁGENES
   El verde queda como degradado sobre las fotos: fuerte a la
   izquierda (donde va el texto, para que se lea bien) y casi
   transparente a la derecha (donde se ven las fotos).
   ========================================================= */
.hero-nuevo{
  overflow: hidden;
  background: #123a12; /* respaldo mientras cargan las fotos */
}
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity:0;
  transform: scale(1.06);
  transition: opacity 1.2s ease-in-out, transform 7s ease-out;
}
.hero-slide.activo{ opacity:1; transform: scale(1); }
.hero-nuevo::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg,
    rgba(18,58,18,.96) 0%,
    rgba(18,58,18,.85) 38%,
    rgba(18,58,18,.35) 70%,
    rgba(18,58,18,.15) 100%);
}
.hero-nuevo-inner{ position:relative; z-index:2; }
.hero-titulo{ text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero-dots{
  position:absolute; z-index:3;
  right: 6vw; bottom: 22px;
  display:flex; gap:10px;
}
.hero-dots button{
  width:11px; height:11px; padding:0;
  border-radius:50%;
  border:1.5px solid #fff;
  background: transparent;
  cursor:pointer;
  transition: background .25s, width .25s;
}
.hero-dots button.activo{ background: var(--amarillo); border-color: var(--amarillo); width:28px; border-radius:6px; }
@media (max-width: 768px){
  .hero-nuevo::before{
    background: linear-gradient(180deg, rgba(18,58,18,.92), rgba(18,58,18,.78));
  }
  .hero-dots{ right:50%; transform:translateX(50%); bottom:14px; }
  .hero-nuevo{ padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition: opacity .3s; transform:none; }
}