/* =========================================================
   home.css — Estilos específicos de Inicio (index.html)
   ========================================================= */

/* ---------- Hero ---------- */
#hero {
  padding-top: var(--spacing-lg);
  background: linear-gradient(
    90deg,
    #ffffff 30%,
    #ffffff 50%,
    #0B2340 50%
  );
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--spacing-lg);
}

.hero-subtitulo {
  font-family: var(--font-titulos);
  font-size: 1.3rem;
  color: var(--gold);
  margin: var(--spacing-sm) 0 var(--spacing-sm);
}

.hero-descripcion {
  max-width: 46ch;
  color: var(--gray-500);
  margin-bottom: var(--spacing-md);
}

.hero-ctas { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

.hero-grafico svg { width: 100%; height: auto; }

/* ---------- Pilares ---------- */
#pilares h2 { max-width: 20ch; margin-bottom: var(--spacing-lg); }

.pilares-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.pilar {
  display: block;
  position: relative;  
  height: 260px;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  overflow: hidden;
}

.pilar-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}
.pilar-flecha {
  color: var(--gold);
  font-size: 1.3rem;
  transition: transform 0.25s ease;
}

.pilar-resumen { color: var(--gray-500); margin-bottom: var(--spacing-sm); }

.pilar-detalle {
  position: absolute;       /* NUEVO: sale del flujo, ya no empuja nada */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  padding: var(--spacing-md);
  transform: translateY(100%); /* NUEVO: escondido debajo, fuera de vista */
  transition: transform 0.35s ease;
}

.pilar-detalle li {
  padding: 8px 0;
  border-top: 1px solid var(--gray-100);
  font-size: 0.92rem;
  color: var(--navy);
}
.pilar-detalle li:first-child { border-top: none; }

.pilar:hover,
.pilar:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  background-color: var(--white);
}
.pilar:hover .pilar-flecha { transform: rotate(45deg); }
.pilar:hover .pilar-detalle {
  transform: translateY(0);
}

/* ---------- Prueba social ---------- */
#prueba-social {
  background-color: var(--navy);
  color: var(--white);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  text-align: center;
  padding: 0 var(--spacing-sm);
  border-left: 1px solid rgba(255,255,255,0.15);
}
.stat:first-child { border-left: none; }
.stat-numero {
  display: block;
  font-family: var(--font-titulos);
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--gold-light);
  font-weight: 700;
}
.stat p { color: var(--gray-100); margin-top: 6px; font-size: 0.9rem; }

.stats-nota {
  text-align: center;
  color: var(--gray-300);
  font-size: 0.78rem;
  margin-top: var(--spacing-md);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-grafico { max-width: 280px; }
  .pilares-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: var(--spacing-md); }
  .stat:nth-child(3) { border-left: none; }

  /* Hero sin fondo ni imagen, solo en móvil */
  #hero {
    background: none;
  }
  .hero-imagen {
    display: none;
  }

  /* Pilares: en móvil no hay hover, así que el detalle debe verse siempre */
  .pilar {
    height: auto;
  }
  .pilar-detalle {
    position: static;
    transform: none;
    padding: 0;
    background-color: transparent;
  }
  .pilar:hover,
  .pilar:focus-visible {
    transform: none;
  }
}