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

/* ---------- Hero ---------- */

#hero .hero-texto {
  margin: 0 !important;        /* quita el centrado */
  max-width: 720px;
  padding-left: 60px;          /* separación del borde, ajústala */
  text-align: left;
}

/* Las 3 líneas alineadas con el texto */
#hero .hero-lineas {
  margin: 0 !important;
  padding-left: 60px;
  max-width: none;
}

#hero .eyebrow,
#hero .hero-texto .eyebrow {
  color: #c9a24a !important;   /* dorado */
  font-weight: bold;
}

#hero h1,
#hero .hero-texto h1 {
  color: #ffffff !important;   /* blanco */
  font-weight: bold;
}

#hero .hero-subtitulo,
#hero .hero-texto .hero-subtitulo {
  color: #c9a24a !important;   /* dorado */
  font-weight: bold;
}

#hero .hero-descripcion,
#hero .hero-texto .hero-descripcion {
  color: #e6e9f0 !important;   /* gris claro */
  font-weight: bold;
}

#hero .btn-primario {
  background: #c9a24a !important;
  color: #0b1b3a !important;
  border-color: #c9a24a !important;
}
#hero .btn-secundario {
  background: #0b1b3a !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

#hero {
  position: relative;
  min-height: 520px;
  padding: 88px 0 56px; /* antes 104px arriba y abajo (heredado de section) */
  display: flex;
  align-items: center;
  color: #fff;
  background: #0b1b3a;
  overflow: hidden;
}


/* Capa oscura para que el texto se lea */
.hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 48, 0.75);   /* azul marino al 65% */
}


/* Texto encima */
.hero-texto { position: relative; z-index: 2; max-width: 720px; }

/* Botones del hero: separados y que bajen de línea en móvil */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--spacing-sm); }

/* Las 3 líneas */
.hero-lineas {
  position: absolute;
  top: 40px; left: 0; right: 0;
  z-index: 2;
  display: flex;
  gap: 10px;
}


/* --- Flechas --- */
.hero-flechas {
  position: absolute;
  bottom: 8%;
  left: 0; right: 0;
  display: flex;
  gap: 12px;
  z-index: 3;
}
.hero-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.hero-btn:hover { background: #fff; color: #0b1b3a; }

#hero input { display: none; }

/* Imágenes */
.hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .8s ease;
}
#h1:checked ~ .img-1,
#h2:checked ~ .img-2,
#h3:checked ~ .img-3 { opacity: 1; }

/* Líneas */
.hero-lineas {
  position: absolute;
  top: 40px; left: 0; right: 0;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-lineas label {
  width: 55px;
  height: 20px;                      /* zona de clic cómoda */
  cursor: pointer;
  position: relative;
}
.hero-lineas label::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  background: rgba(255,255,255,.35);
  transform: translateY(-50%);
  transition: background .3s;
}
.hero-lineas label:hover::before { background: rgba(255,255,255,.7); }

/* Línea activa */
#h1:checked ~ .hero-lineas label:nth-child(1)::before,
#h2:checked ~ .hero-lineas label:nth-child(2)::before,
#h3:checked ~ .hero-lineas label:nth-child(3)::before { background: #fff; }


@media (max-width: 640px) {
  #hero { min-height: 0; padding: 64px 0 36px; }
  #hero .hero-texto,
  #hero .hero-lineas { padding-left: 20px; padding-right: 20px; }
  .hero-lineas { top: 28px; }
  .hero-lineas label { width: 40px; }
  #hero h1 { font-size: 1.9rem; }
  #hero .hero-descripcion { font-size: 0.95rem; }
  .hero-ctas .btn { flex: 1 1 100%; }
}
/* ---------- Pilares ---------- */
#pilares h2 { max-width: 20ch; margin-bottom: var(--spacing-md); }

.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) {
  .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; }

  /* 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;
  }
}

/* ---------- Pilares ---------- */
#pilares h2 {
  font-family: var(--font-titulos);
  text-align: center;         /* Centra el texto */
  text-transform: uppercase;   /* Todo en mayúsculas */
  letter-spacing: 0.08em;     /* Espaciado elegante estilo corporativo */
  max-width: 800px;           /* Limita el ancho para que no se rompa mal */
  margin-left: auto;          /* Centra el bloque en la pantalla */
  margin-right: auto;
  margin-bottom: var(--spacing-md);
}
@media (max-width: 600px) {
  #pilares h2 { letter-spacing: 0.04em; }
  .pilares-grid { gap: var(--spacing-sm); }
  .pilar { padding: var(--spacing-sm) var(--spacing-md); }
  .stats-grid { row-gap: var(--spacing-sm); }
  .stat { padding: 0 8px; }
}