/* ==========================================================================
   ASODIB
   Archivo: assets/css/home.css
   Estilos exclusivos de la página principal del Portal Web.
   Dependencias:
   - variables.css
   - estilo.css
   - componentes.css
   - Bootstrap 5
   Responsabilidades:
   - Secciones del Home.
   - Banner principal.
   - Publicación destacada.
   - Paneles del Home.
   - Grids del Home.
   - Tarjetas del Home.
   - Estadísticas del Home.
   - Widgets del Home.
   - Títulos del Home.
   - Animaciones exclusivas del Home.
   - Responsive del Home.
   No contiene:
   - Variables globales.
   - Componentes reutilizables.
   - Estilos específicos de módulos.
   ========================================================================== */
/* ==========================================================================
   SECCIONES DEL HOME
   ========================================================================== */
.home-seccion {
  margin-bottom: var(--espacio-7);
}
.home-seccion:last-child {
  margin-bottom: 0;
}
.home-seccion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-5) var(--espacio-6);
  color: var(--color-blanco);
  background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
}
.home-seccion-header h2,
.home-seccion-header h3,
.home-seccion-header h4 {
  margin: 0;
  font-size: var(--titulo-h4);
  font-weight: var(--peso-negrita);
  line-height: var(--linea-titulos);
}
.home-seccion-header p {
  margin: var(--espacio-2) 0 0;
  opacity: 0.9;
}
.home-seccion-body {
  padding: var(--espacio-6);
}
/* ==========================================================================
   BANNER PRINCIPAL
   ========================================================================== */
.banner-principal {
  position: relative;
  overflow: hidden;
  min-height: var(--altura-banner);
  margin-bottom: var(--espacio-7);
  border-radius: var(--radio-xl);
  background: var(--color-primario);
  box-shadow: var(--sombra-lg);
}
.banner-imagen {
  display: block;
  width: 100%;
  height: var(--altura-banner);
  object-fit: cover;
  transition: transform 0.8s ease;
}
.banner-principal:hover .banner-imagen {
  transform: scale(1.04);
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.08) 100%
  );
}
.banner-contenido {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--espacio-7);
  color: var(--color-blanco);
}
.banner-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-4);
  margin-bottom: var(--espacio-5);
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}
.banner-titulo {
  max-width: 760px;
  margin-bottom: var(--espacio-4);
  font-size: 3rem;
  font-weight: var(--peso-negrita);
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.banner-subtitulo {
  max-width: 700px;
  margin-bottom: var(--espacio-6);
  font-size: var(--texto-xl);
  line-height: var(--linea-relajada);
  opacity: 0.96;
}
.banner-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
}
.banner-botones .btn {
  padding: 0.9rem 1.8rem;
}
.banner-botones .btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
}
.banner-indicadores {
  position: absolute;
  right: var(--espacio-6);
  bottom: var(--espacio-6);
  z-index: 5;
  display: flex;
  gap: var(--espacio-2);
}
.banner-indicador {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: var(--transicion-suave);
}
.banner-indicador.activo {
  background: var(--color-blanco);
  transform: scale(1.3);
}
.banner-estadisticas {
  display: flex;
  gap: var(--espacio-6);
  margin-top: var(--espacio-7);
}
.banner-estadistica {
  text-align: center;
}
.banner-estadistica h3 {
  margin: 0;
  color: var(--color-acento);
  font-size: 2rem;
  font-weight: var(--peso-negrita);
}
.banner-estadistica span {
  display: block;
  margin-top: var(--espacio-2);
  font-size: var(--texto-sm);
  opacity: 0.9;
}
.banner-scroll {
  position: absolute;
  bottom: 25px;
  left: 50%;
  z-index: 4;
  color: var(--color-blanco);
  font-size: 1.6rem;
  transform: translateX(-50%);
  animation: bannerScroll 2s infinite;
}
.banner-principal::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.banner-principal::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
/* ==========================================================================
   PUBLICACIÓN DESTACADA
   ========================================================================== */
.destacada {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--espacio-7);
  border-radius: var(--radio-xl);
  background: var(--color-blanco);
  box-shadow: var(--sombra-lg);
  animation: destacadaEntrada 0.8s ease;
  transition: var(--transicion-suave);
}
.destacada:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-xl);
}
.destacada::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--color-primario),
    var(--color-secundario)
  );
}
.destacada-contenido {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: var(--altura-banner);
}
.destacada-imagen {
  position: relative;
  overflow: hidden;
  background: var(--color-gris-100);
}
.destacada-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.destacada:hover .destacada-imagen img {
  transform: scale(1.05);
}
.destacada-etiqueta {
  position: absolute;
  top: var(--espacio-4);
  left: var(--espacio-4);
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radio-pill);
  background: rgba(10, 78, 155, 0.85);
  color: var(--color-blanco);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.destacada-info {
  display: flex;
  flex-direction: column;
  padding: var(--espacio-7);
}
.destacada-tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-4);
  color: var(--color-primario);
  font-size: var(--texto-sm);
  font-weight: var(--peso-negrita);
  text-transform: uppercase;
}
.destacada-titulo {
  margin-bottom: var(--espacio-5);
  color: var(--color-texto);
  font-size: var(--titulo-h2);
  font-weight: var(--peso-negrita);
  line-height: 1.25;
}
.destacada-titulo a {
  color: inherit;
  text-decoration: none;
}
.destacada-titulo a:hover {
  color: var(--color-primario);
}
.destacada-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-5);
  margin-bottom: var(--espacio-6);
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}
.destacada-meta span {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.destacada-resumen {
  flex: 1;
  margin-bottom: var(--espacio-6);
  color: var(--color-gris-700);
  font-size: var(--texto-md);
  line-height: var(--linea-relajada);
}
.destacada-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  margin-top: auto;
}
.destacada-footer .btn {
  padding: 0.85rem 1.7rem;
}
/* ==========================================================================
   PANELES DEL HOME
   ========================================================================== */
.home-panel {
  overflow: hidden;
  border-radius: var(--radio-xl);
  background: var(--color-blanco);
  box-shadow: var(--sombra-md);
  transition: var(--transicion-suave);
}
.home-panel:hover {
  box-shadow: var(--sombra-lg);
}
.home-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-5) var(--espacio-6);
  color: var(--color-blanco);
}
.home-panel.noticias .home-panel-header {
  background: linear-gradient(
    135deg,
    var(--color-primario),
    var(--color-primario-hover)
  );
}
.home-panel.comunicados .home-panel-header {
  background: linear-gradient(
    135deg,
    var(--color-exito),
    #146c43
  );
}
.home-panel.eventos .home-panel-header {
  background: linear-gradient(
    135deg,
    var(--color-advertencia),
    #e0a800
  );
  color: var(--color-gris-900);
}
.home-panel.documentos .home-panel-header {
  background: linear-gradient(
    135deg,
    var(--color-secundario),
    var(--color-primario)
  );
}
.home-panel.galerias .home-panel-header {
  background: linear-gradient(
    135deg,
    var(--color-info),
    #0aa2c0
  );
  color: var(--color-gris-900);
}
.home-panel.videos .home-panel-header {
  background: linear-gradient(
    135deg,
    var(--color-peligro),
    #b02a37
  );
}
.home-panel.foro .home-panel-header {
  background: linear-gradient(
    135deg,
    var(--color-acento),
    #d99f00
  );
  color: var(--color-gris-900);
}
.home-panel-titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.home-panel-titulo i {
  font-size: 1.8rem;
}
.home-panel-titulo h2 {
  margin: 0;
  font-size: var(--titulo-h4);
  font-weight: var(--peso-negrita);
  line-height: var(--linea-titulos);
}
.home-panel-titulo p {
  margin: var(--espacio-2) 0 0;
  font-size: var(--texto-sm);
  opacity: 0.9;
}
.home-panel-header .btn {
  padding: 0.55rem 1.3rem;
  border-radius: var(--radio-boton-pill);
}
.home-panel-header .btn:hover {
  transform: translateY(-2px);
}
.home-panel-body {
  padding: var(--espacio-6);
}
.home-panel-footer {
  padding: var(--espacio-4) var(--espacio-6);
  border-top: var(--ancho-borde) solid var(--color-borde);
  background: var(--color-gris-50);
  text-align: right;
}
.home-panel-footer a {
  font-weight: var(--peso-semibold);
  text-decoration: none;
}
.home-panel-footer a:hover {
  text-decoration: underline;
}
.home-panel-total {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
}
/* ==========================================================================
   GRIDS DEL HOME
   ========================================================================== */
.home-grid {
  display: grid;
  gap: var(--espacio-5);
}
.home-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.home-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.home-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.home-divider {
  width: 100%;
  height: var(--ancho-borde);
  margin: var(--espacio-6) 0;
  background: var(--color-borde);
}
/* ==========================================================================
   TARJETAS DEL HOME
   ========================================================================== */
.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radio-card);
  background: var(--color-blanco);
  box-shadow: var(--sombra-md);
  animation: cardFade 0.6s ease;
  transition: var(--transicion-suave);
}
.home-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-lg);
}
.home-card-imagen {
  position: relative;
  height: var(--altura-imagen-card);
  overflow: hidden;
  background: var(--color-gris-100);
}
.home-card-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.home-card:hover .home-card-imagen img {
  transform: scale(1.08);
}
.home-card-badge {
  position: absolute;
  top: var(--espacio-4);
  left: var(--espacio-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radio-pill);
  font-size: var(--texto-xs);
  font-weight: var(--peso-negrita);
  text-transform: uppercase;
}
.home-card-badge.badge-noticia {
  background: var(--color-primario);
  color: var(--color-blanco);
}
.home-card-badge.badge-comunicado {
  background: var(--color-exito);
  color: var(--color-blanco);
}
.home-card-badge.badge-evento {
  background: var(--color-advertencia);
  color: var(--color-gris-900);
}
.home-card-badge.badge-documento {
  background: var(--color-secundario);
  color: var(--color-blanco);
}
.home-card-badge.badge-video {
  background: var(--color-peligro);
  color: var(--color-blanco);
}
.home-card-badge.badge-galeria {
  background: var(--color-info);
  color: var(--color-gris-900);
}
.home-card-badge.badge-foro {
  background: var(--color-acento);
  color: var(--color-gris-900);
}
.home-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--espacio-5);
}
.home-card-titulo {
  margin-bottom: var(--espacio-3);
  font-size: var(--texto-xl);
  font-weight: var(--peso-negrita);
  line-height: var(--linea-titulos);
}
.home-card-titulo a {
  color: var(--color-texto);
  text-decoration: none;
  transition: color var(--transicion-rapida);
}
.home-card-titulo a:hover {
  color: var(--color-primario);
}
.home-card-resumen {
  flex: 1;
  margin-bottom: var(--espacio-5);
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: var(--linea-relajada);
}
.home-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-5);
  color: var(--color-texto-secundario);
  font-size: var(--texto-xs);
}
.home-card-meta span {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.home-card-footer {
  margin-top: auto;
  padding-top: var(--espacio-4);
  border-top: var(--ancho-borde) solid var(--color-borde);
}
.home-card-footer .btn {
  padding: 0.6rem 1.15rem;
}
/* ==========================================================================
   ESTADÍSTICAS DEL HOME
   ========================================================================== */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-5);
}
.home-stat {
  padding: var(--espacio-6);
  border-radius: var(--radio-xl);
  background: var(--color-blanco);
  box-shadow: var(--sombra-md);
  text-align: center;
  transition: var(--transicion-suave);
}
.home-stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-lg);
}
.home-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto var(--espacio-4);
  border-radius: 50%;
  background: var(--color-primario-claro);
  color: var(--color-primario);
  font-size: 2rem;
}
.home-stat-number {
  color: var(--color-primario);
  font-size: 2.4rem;
  font-weight: var(--peso-negrita);
}
.home-stat-label {
  margin-top: var(--espacio-2);
  color: var(--color-texto-secundario);
  font-size: var(--texto-sm);
}
/* ==========================================================================
   WIDGETS DEL HOME
   ========================================================================== */
.home-widget {
  margin-bottom: var(--espacio-6);
  overflow: hidden;
  border-radius: var(--radio-lg);
  background: var(--color-blanco);
  box-shadow: var(--sombra-md);
}
.home-widget-header {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-4) var(--espacio-5);
  background: linear-gradient(
    135deg,
    var(--color-primario),
    var(--color-primario-hover)
  );
  color: var(--color-blanco);
}
.home-widget-header i {
  font-size: 1.35rem;
}
.home-widget-header h3 {
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-negrita);
}
.home-widget-body {
  padding: var(--espacio-5);
}
.home-widget-footer {
  padding: var(--espacio-4) var(--espacio-5);
  border-top: var(--ancho-borde) solid var(--color-borde);
  background: var(--color-gris-50);
}
.home-widget-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-widget-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espacio-3) 0;
  border-bottom: var(--ancho-borde) solid var(--color-borde);
}
.home-widget-list li:last-child {
  border-bottom: none;
}
.home-widget-list a {
  color: var(--color-texto);
  text-decoration: none;
  transition: color var(--transicion-rapida);
}
.home-widget-list a:hover {
  color: var(--color-primario);
}
/* ==========================================================================
   TÍTULOS DEL HOME
   ========================================================================== */
.home-title {
  margin-bottom: var(--espacio-6);
}
.home-title h2 {
  margin-bottom: var(--espacio-2);
  font-weight: var(--peso-negrita);
}
.home-title p {
  margin: 0;
  color: var(--color-texto-secundario);
}
/* ==========================================================================
   ANIMACIONES EXCLUSIVAS DEL HOME
   ========================================================================== */
@keyframes bannerScroll {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 10px);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@keyframes destacadaEntrada {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cardFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .home-grid-4,
  .home-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 992px) {
  .banner-contenido {
    padding: var(--espacio-6);
  }
  .banner-titulo {
    font-size: 2.5rem;
  }
  .destacada-contenido {
    grid-template-columns: 1fr;
  }
  .destacada-imagen {
    min-height: 300px;
  }
  .home-grid-3,
  .home-grid-4,
  .home-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .banner-principal {
    min-height: 480px;
  }
  .banner-imagen {
    height: 480px;
  }
  .banner-contenido {
    padding: var(--espacio-5);
  }
  .banner-titulo {
    font-size: 2rem;
  }
  .banner-subtitulo {
    font-size: var(--texto-md);
  }
  .banner-estadisticas {
    gap: var(--espacio-4);
  }
  .home-seccion-header,
  .home-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .home-panel-body,
  .home-seccion-body {
    padding: var(--espacio-5);
  }
  .home-grid-2,
  .home-grid-3,
  .home-grid-4,
  .home-stats {
    grid-template-columns: 1fr;
  }
  .destacada-info {
    padding: var(--espacio-5);
  }
}
@media (max-width: 576px) {
  .banner-principal {
    min-height: 520px;
    border-radius: var(--radio-lg);
  }
  .banner-imagen {
    height: 520px;
  }
  .banner-titulo {
    font-size: 1.75rem;
  }
  .banner-estadisticas {
    flex-wrap: wrap;
    gap: var(--espacio-3);
  }
  .banner-indicadores {
    right: var(--espacio-4);
    bottom: var(--espacio-4);
  }
  .destacada-titulo {
    font-size: var(--texto-xxl);
  }
  .home-card-imagen {
    height: 200px;
  }
}
/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .banner-imagen,
  .destacada,
  .destacada-imagen img,
  .home-card,
  .home-card-imagen img,
  .banner-indicador {
    transition: none;
  }
  .banner-scroll,
  .destacada,
  .home-card {
    animation: none;
  }
}