body {
    overflow-x: hidden;
    /* Evita el scroll horizontal */

}

/* Contenedor de la imagen de portada */
.portada-container {
    position: relative;
    width: 100vw;
    height: 515px;
    margin-top: 60px; /* Si tienes una barra de navegación fija */
    overflow: hidden;
}

/* Imagen estirada completamente */
.portada-container img {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    display: block;
}

.texto-en-portada {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%) scaleX(1.05); /* mueve al centro */
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 51px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
    z-index: 10;
}

/* Adaptación en pantallas pequeñas */
@media screen and (max-width: 768px) {
    .texto-en-portada {
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%) scaleX(1.05);
        width: 90%;
        text-align: center;
        font-size: 40px;
    }
}


/* ===== SECCIÓN: QUIÉNES SOMOS ===== */
.quienes-somos {
  padding: 60px 20px;
}

.qs-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.qs-texto {
  flex: 1 1 500px;
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
  text-align: justify;
}

.qs-texto p {
  margin-bottom: 1rem;
}

.qs-imagen {
  flex: 1 1 350px;
  text-align: center;

  /* Estilos para la animación de entrada */
  opacity: 0;
  transform: translateX(-100px); /* Desplazamiento más largo para que se note */
  transition: opacity 1s ease-out, transform 1s ease-out;
}


.qs-imagen img {
  max-width: 100%;
  transition: transform 0.3s ease;
}

.qs-imagen.visible {
  opacity: 1;
  transform: translateX(0);
}


/* ===== SECCIÓN MVVS: Fondo y estructura general ===== */
.mvvs-section {
  position: relative;
  padding: 40px 10px; /* Reducido */
  background: #f4f6f9;
  color: #1f2d3a;
  overflow: hidden;
}

.mvvs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mvvs-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.mvvs-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.mvvs-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: auto;
  padding-top: 10px;
}

/* ===== Contenedor de Tarjetas MVVS ===== */
.mvvs-cards {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 0;
}

/* ===== Tarjeta Individual ===== */
.mvvs-card {
  background: rgba(255, 255, 255, 0.96);
  padding: 24px 20px;
  border-radius: 12px;
  width: 250px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-direction: column;
  justify-content: space-between;
}

.mvvs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15);
}

/* ===== Encabezado (Icono + Título) ===== */
.mvvs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.mvvs-icon {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mvvs-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.mvvs-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #EC9D2E;
}

/* ===== Texto Común en Tarjetas ===== */
.mvvs-text,
.mision-text,
.vision-text {
  margin-top: auto;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #333;
}

.mvvs-text {
  text-align: center;
  flex-direction: column;
}

.mvvs-text p {
  margin: 4px 0;
}

/* ===== Estilo específico para misión y visión ===== */
.mision-text,
.vision-text {
  text-align: justify;
  padding-top: 10px;
}

/* ===== UNIDADES DE NEGOCIO ===== */
.business-units {
  text-align: center;
  color: #fff;
}

.business-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #fff;
  padding-top: 30px; /* Puedes aumentar este valor según lo que necesites */
}

.business-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}

.business-card {
  background-color: #EC9D2E;
  border-radius: 10px;
  padding: 20px 30px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.business-card:hover {
  transform: translateY(-4px);
  background-color: #EC9D2E;
}


/*-----Responsive---------*/

@media (max-width: 768px) {
  .mvvs-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 10px;
  }

  .mvvs-text {
    text-align: center;
    padding-left: 10px;
  }

  .mvvs-cards {
    display: flex;             /* Cambia de grid a flex */
    flex-direction: column;    /* Apila verticalmente */
    align-items: center;       /* Centra horizontalmente */
    gap: 20px;
    padding-left: 0;           /* Elimina padding lateral para centrar mejor */
  }

  .mvvs-card {
    width: 75%;                /* Ajusta el ancho de las tarjetas */
    max-width: 320px;
  }

  .business-cards {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .business-card {
    max-width: 300px;
    margin: 0 auto;
  }
}