/* ==================
   NUEVO: Estilos Página "Nosotros"
   ================== */

/* 1. Banner Superior */
.page-header-nosotros {
  padding: 120px 0;
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}
.page-header-nosotros::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.7); /* Overlay oscuro Prizma */
}
.page-header-nosotros .container {
  position: relative;
  z-index: 2;
}
.page-header-nosotros h1 {
  font-family: 'Abel', sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  text-transform: uppercase;
}

/* 2. Sección Misión, Visión, Valores */
.section-mvv {
  padding: 80px 0;
}
.mvv-card {
  background: #fff;
  padding: 30px;
  height: 100%;
  border-radius: 0; /* Estilo cuadrado */
  box-shadow: var(--shadow);
}
.mvv-card:hover {
  /* Hacemos la tarjeta un 5% más grande */
  transform: scale(1.05);
  
  /* Sombra más pronunciada para que "flote" */
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2); 
}

.mvv-card .section-title {
  font-family: 'Abel', sans-serif;
  font-size: 2rem;
  color: var(--pzm-primary);
}
.mvv-card p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: var(--pzm-muted);
  line-height: 1.7;
}
.mvv-card p strong {
  font-weight: 700;
  color: var(--pzm-dark);
}

/* 3. Sección Historia (reutiliza los estilos de .section-metrics-solmex) */
/* (Ya no se necesita CSS nuevo aquí, reutilizamos la sección de métricas que ya tienes) */

/* ==================
   NUEVO: Estilos Banner CTA "Contáctanos"
   ================== */

.section-cta-banner {
  position: relative;
  padding: 80px 0;
  background-size: cover;
  background-position: center;
  color: #fff;
}

/* Capa oscura (usando tu color primario) */
.section-cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.8); /* Tu azul pizarra con 80% opacidad */
  z-index: 1;
}

/* Contenido (debe ir sobre la capa oscura) */
.section-cta-banner .container {
  position: relative;
  z-index: 2;
}

.section-cta-banner .section-title {
  color: #fff;
  font-family: 'Abel', sans-serif;
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}

.section-cta-banner .lead {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  margin-bottom: 0;
}


.section-cta-banner  a {
 background-color: rgba(31, 58, 95, 0.8) !important; /* Azul semi-transparente */
  color: #fff !important; /* Texto blanco */
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0.9rem 2rem !important;
  border-radius: 0 !important; /* Esquinas cuadradas */
  border: 1px solid rgba(255,255,255, 0.5) !important; /* Borde sutil */
  transition: all 0.3s ease !important;
}


.section-cta-banner   a:hover {
  background-color: var(--pzm-accent) !important;
  color: var(--pzm-dark) !important;
  border-color: var(--pzm-accent) !important;
}