/* ========== ministerios.css ========== */

/* RESET ligero (opcional, si ya tienes uno evita duplicar) */
* { box-sizing: border-box; }

/* ====== Intro ====== */
.intro-container {
  margin: 2% 8%;
  text-align: center; /* CAMBIADO: de left a center */
  max-width: 1200px; /* NUEVO: limita el ancho */
  margin-left: auto; /* NUEVO: centra el contenedor */
  margin-right: auto; /* NUEVO: centra el contenedor */
}
.intro-container h4 {
  font-weight: 700;
  margin-bottom: 20px; /* CAMBIADO: de 12px a 20px */
  color: #111;
}
.intro-text {
  display: flex;
  gap: 30px; /* CAMBIADO: de 20px a 30px para mejor separación */
  flex-wrap: wrap;
  justify-content: center; /* NUEVO: centra las columnas */
  margin-bottom: 10px; /* NUEVO: reduce espacio antes del botón */
}
.intro-text p {
  flex: 1 1 320px;
  max-width: 500px; /* NUEVO: limita ancho de cada columna */
  margin: 0;
  line-height: 1.6; /* CAMBIADO: de 1.45 a 1.6 para mejor legibilidad */
  text-align: left; /* NUEVO: texto alineado a la izquierda dentro de las columnas */
}
.btn-conocenos {
  display: inline-block;
  margin-top: 20px; /* aumentado para dar espacio */
  margin-bottom: 2px; /* nuevo: compensa el movimiento */
  background-color: #cd2411;
  color: #fff;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  transition: background-color .25s ease, transform .25s ease;
}
.btn-conocenos:hover { 
  background-color: #c0392b; 
  transform: translateY(-2px);
}

/* ====== Sección Ministerios ====== */
.ministerios-section {
  background-color: #f2f2f2;
  padding: 5% 6%;
}
.ministerios-section > h4 {
  font-weight: 800;
  color: #111;
  margin-bottom: 22px;
}

/* Grid responsivo de tarjetas */
.ministerios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  align-items: stretch;
}

/* Card general - SIN cursor pointer */
.ministerio-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: all .4s cubic-bezier(.2,.9,.25,1) !important;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* cursor: pointer; */ /* ELIMINADO: ya no es clickeable */
  position: relative;
  will-change: transform;
}

/* Imagen: ocupa la parte superior - CENTRADA */
.ministerio-card img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px 14px 0 0;
  transition: transform .4s ease;
}

/* Cuerpo de la tarjeta: ocupa todo el espacio restante */
.ministerio-card .card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

/* Titulos y texto */
.ministerio-card h5 {
  margin: 0;
  font-size: 1.05rem;
  color: #111;
  font-weight: 700;
}
.ministerio-card .lead {
  margin: 0;
  color: #444;
  font-size: .975rem;
}
.ministerio-card .desc {
  margin-top: 6px;
  color: #555;
  line-height: 1.45;
  font-size: .95rem;
}

/* ===== SOLUCIÓN: Sobrescribir AOS y aplicar zoom ===== */
.ministerio-card[data-aos] {
  transition: all .4s cubic-bezier(.2,.9,.25,1) !important;
}

.ministerio-card[data-aos].aos-animate {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
}

/* Hover: efecto de zoom en toda la tarjeta */
.ministerio-card:hover,
.ministerio-card[data-aos]:hover,
.ministerio-card[data-aos].aos-animate:hover {
  transform: scale(1.08) translate3d(0, 0, 0) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25) !important;
  z-index: 100 !important;
}

.ministerio-card:hover img {
  transform: scale(1.05);
}

/* ===== Responsividad y ajustes ===== */
@media (max-width: 1024px) {
  .intro-container { 
    margin: 3% 6%; 
  }
  .ministerios-section { padding: 5% 4%; }
}

@media (max-width: 700px) {
  .intro-container { 
    margin: 4% 4%; 
  }
  .intro-text {
    gap: 20px;
  }
  .intro-text p {
    text-align: center; /* NUEVO: en móvil centra el texto */
  }
  .ministerio-card img { height: 200px; }
  .ministerios-grid { gap: 20px; }
  
  /* Zoom más sutil en móvil */
  .ministerio-card:hover,
  .ministerio-card[data-aos]:hover,
  .ministerio-card[data-aos].aos-animate:hover {
    transform: scale(1.05) translate3d(0, 0, 0) !important;
  }
}

@media (max-width: 420px) {
  .ministerio-card img { height: 180px; }
  .btn-conocenos { width: 100%; text-align: center; padding: 12px 16px; }
}