/* Portada — secciones agregadas 2026-08-18 siguiendo el patrón de unad.edu.co:
   sedes con mapa, calendario académico, próximos eventos, noticias. El catálogo de
   programas/cursos ya no vive aquí (se movió a oferta-academica.html), así que estas
   secciones ocupan su lugar en la página de inicio. */

/* Carrusel del hero (2026-08-25, a pedido del usuario, patrón unad.edu.co) — ver
   hero-carousel.js. La 1ª diapositiva reutiliza las reglas .hero/.hero::before/
   .hero::after ya existentes (foto isométrica con "contain", ver comentario largo en
   main.css) SIN tocarlas; las siguientes (noticias/eventos) usan las reglas nuevas de
   abajo, con foto normal a pantalla completa ("cover") porque son fotos reales, no un
   diorama recortado. */
.hero-carousel {
  position: relative; overflow: hidden;
}
.hero-carousel__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__track { transition: none; }
}
.hero-carousel__slide {
  flex: 0 0 100%; width: 100%; min-width: 0;
}

.hero-carousel__slide--news {
  position: relative;
  color: #fff; padding: 4rem 1.5rem 3rem;
  min-height: clamp(560px, 42vw, 720px); display: flex; align-items: center;
  background-color: var(--funprotec-navy-dark);
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
.hero-carousel__slide--news::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(100deg, rgba(10,30,56,0.88) 0%, rgba(10,30,56,0.6) 55%, rgba(10,30,56,0.22) 100%);
}
.hero-carousel__slide--news .inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.hero-carousel__slide--news h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; margin: 0.6rem 0 1rem; max-width: 680px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.hero-carousel__slide--news .lead {
  color: #d7deea; max-width: 560px; margin: 0 0 1.25rem; font-size: 1.02rem; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.hero-carousel__slide-facts {
  display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.75rem;
  font-size: 0.92rem; text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
@media (max-width: 700px) {
  .hero-carousel__slide--news::after {
    background-image: linear-gradient(100deg, rgba(10,30,56,0.92) 0%, rgba(10,30,56,0.88) 85%, rgba(10,30,56,0.8) 100%);
  }
}

/* Flechas prev/next — círculo semitransparente sobre la foto, patrón estándar de carrusel. */
.hero-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(10,30,56,0.5); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.hero-carousel__arrow:hover { background: rgba(10,30,56,0.85); }
.hero-carousel__arrow--prev { left: 0.85rem; }
.hero-carousel__arrow--next { right: 0.85rem; }
.hero-carousel__arrow[hidden] { display: none; }

/* Botón de pausa + puntos de navegación directa — anclados junto a la flecha derecha, en
   el centro vertical del hero (NO en la franja inferior). Los 3 rincones inferiores del
   viewport ya están ocupados sitio-completo por widgets fijos (♿ .a11y-float izquierda,
   .view-switch centro, 💬🗂️ .fab-stack derecha, todos en main.css) — cualquier barra
   pegada al fondo del hero, que casi siempre coincide con el fondo visible del viewport en
   pantallas típicas, queda tapada detrás de alguno de los tres. Anclarla al centro vertical
   del hero (relativo al propio carrusel, no al viewport) evita el choque sin importar el
   alto de pantalla. */
.hero-carousel__controls {
  position: absolute; z-index: 2; top: calc(50% + 46px); right: 1rem;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
}
.hero-carousel__controls[hidden] { display: none; }
.hero-carousel__playpause {
  display: inline-flex; align-items: center; gap: 0.4rem; border: none; border-radius: 999px;
  background: rgba(10,30,56,0.5); color: #fff; padding: 0.4rem 0.9rem; font-size: 0.82rem;
  cursor: pointer; transition: background 0.15s ease;
}
.hero-carousel__playpause:hover { background: rgba(10,30,56,0.85); }
.hero-carousel__dots { display: flex; align-items: center; gap: 0.5rem; }
.hero-carousel__dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.45); cursor: pointer; transition: background 0.15s ease, width 0.15s ease;
}
.hero-carousel__dot:hover { background: rgba(255,255,255,0.75); }
.hero-carousel__dot[aria-current="true"] { background: #fff; width: 22px; border-radius: 5px; }

@media (max-width: 560px) {
  .hero-carousel__arrow { width: 36px; height: 36px; font-size: 1.3rem; }
  .hero-carousel__playpause span { display: none; } /* deja solo el ícono ⏸/▶ para no apretar la barra */
}

.sedes-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;
}
.sede-card {
  background: #fff; border-radius: var(--funprotec-radius); box-shadow: var(--funprotec-shadow);
  padding: 1.25rem; overflow: hidden;
}
.sede-card h3 { margin: 0 0 0.35rem; color: var(--funprotec-navy); font-size: 1.1rem; }
.sede-card p { margin: 0 0 1rem; color: var(--card-text-muted); font-size: 0.88rem; }
.sede-card__mapa {
  position: relative; width: 100%; padding-top: 62%; border-radius: 8px; overflow: hidden;
}
.sede-card__mapa iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.calendario-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem;
}
.calendario-card {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  background: #fff; border-radius: var(--funprotec-radius); box-shadow: var(--funprotec-shadow);
  padding: 1.25rem; color: var(--card-text); border-left: 4px solid var(--funprotec-orange);
  transition: transform 0.15s ease;
}
.calendario-card:hover { transform: translateY(-3px); }
.calendario-card__ico { font-size: 1.8rem; flex-shrink: 0; }
.calendario-card strong { color: var(--funprotec-navy); }
.calendario-card small { color: var(--card-text-muted); }

/* Próximos Eventos — caja de fecha estilo "AGO/25", igual patrón visual que unad.edu.co. */
.eventos-lista { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.5rem 0; max-width: 760px; }
.evento-item {
  display: flex; gap: 1rem; align-items: center; text-decoration: none; color: var(--card-text);
  background: #fff; border-radius: var(--funprotec-radius); box-shadow: var(--funprotec-shadow);
  padding: 0.85rem 1.1rem; transition: transform 0.15s ease;
}
.evento-item:hover { transform: translateY(-2px); }
.evento-item__fecha {
  flex: 0 0 64px; height: 64px; border-radius: 8px; background: var(--funprotec-navy); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.evento-item__fecha span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.evento-item__fecha strong { font-size: 1.4rem; }
.evento-item__body { display: flex; flex-direction: column; gap: 0.2rem; }
.evento-item__body strong { font-size: 0.95rem; }
.evento-item__lugar { font-size: 0.8rem; color: var(--card-text-muted); }

/* ===== Contador en vivo (2026-09-24, a pedido del usuario: "anclado, dinámico, visible, llamativo,
   colores vibrantes, aura fucsia y verde fosforescente") =====
   Fijo abajo al centro: las esquinas inferiores ya las ocupan ♿/tema (izquierda) y WhatsApp/CRM
   (derecha). Datos: contadores.js + contadores.php. Oculto (hidden) hasta que el servidor responde. */
.contador-vivo {
  --fucsia: #ff1f8f; --verde: #39ff14;
  position: fixed; left: 50%; bottom: 1rem; z-index: 190; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 9rem);
  padding: 0.55rem 1.1rem 0.55rem 0.9rem; border-radius: 999px; color: #fff;
  border: 2px solid transparent;
  background: linear-gradient(#0b0f19, #0b0f19) padding-box,
              linear-gradient(90deg, var(--fucsia), var(--verde), var(--fucsia)) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: contador-borde 4s linear infinite, contador-aura 2.4s ease-in-out infinite alternate;
  font-family: var(--font-body); white-space: nowrap;
}
.contador-vivo[hidden] { display: none; }
.contador-vivo__vivo {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.14em; color: var(--verde);
}
.contador-vivo__punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 8px var(--verde), 0 0 16px var(--verde);
  animation: contador-latido 1.1s ease-in-out infinite;
}
.contador-vivo__item { display: inline-flex; align-items: baseline; gap: 0.4rem; border-radius: 8px; padding: 0 0.2rem; }
.contador-vivo__num {
  font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  color: var(--verde); text-shadow: 0 0 10px rgba(57, 255, 20, 0.75);
}
.contador-vivo__item:last-child .contador-vivo__num { color: #ff5cb0; text-shadow: 0 0 10px rgba(255, 31, 143, 0.85); }
.contador-vivo__etq { font-size: 0.78rem; font-weight: 700; color: #e5e7eb; }
.contador-vivo__sep { width: 2px; align-self: stretch; margin: 0.2rem 0; background: linear-gradient(var(--fucsia), var(--verde)); border-radius: 2px; }
.contador-vivo__item--sube { animation: contador-destello 0.9s ease-out; }

@keyframes contador-borde { to { background-position: 0 0, 200% 0; } }
@keyframes contador-aura {
  from { box-shadow: 0 0 14px 2px rgba(255, 31, 143, 0.75), 0 0 30px 6px rgba(57, 255, 20, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45); }
  to   { box-shadow: 0 0 22px 5px rgba(57, 255, 20, 0.8), 0 0 42px 10px rgba(255, 31, 143, 0.45), 0 8px 24px rgba(0, 0, 0, 0.45); }
}
@keyframes contador-latido { 50% { transform: scale(0.6); opacity: 0.5; } }
@keyframes contador-destello { 0% { background: rgba(57, 255, 20, 0.35); transform: scale(1.12); } 100% { background: transparent; transform: none; } }

@media (max-width: 560px) {
  .contador-vivo { gap: 0.55rem; padding: 0.45rem 0.8rem 0.45rem 0.7rem; bottom: 0.75rem; max-width: calc(100vw - 8rem); }
  .contador-vivo__vivo span:last-child { display: none; } /* en celular queda solo el punto "en vivo" */
  .contador-vivo__num { font-size: 1.05rem; }
  .contador-vivo__etq { font-size: 0.66rem; white-space: normal; line-height: 1.1; max-width: 5.5rem; }
}
body.vista-forzada .contador-vivo { position: absolute; }

/* main.css apaga toda animación con "reducir movimiento" (activo en el PC del usuario): se reponen. */
@media (prefers-reduced-motion: reduce) {
  .contador-vivo { animation-duration: 4s, 2.4s !important; animation-iteration-count: infinite, infinite !important; }
  .contador-vivo__punto { animation-duration: 1.1s !important; animation-iteration-count: infinite !important; }
  .contador-vivo__item--sube { animation-duration: 0.9s !important; }
}