/* ==========================================================================
   NOSOTROS.CSS — solo para nosotros.html
   Requiere que base.css esté cargado antes.
   ========================================================================== */

/* --- Hero con foto + tarjeta de texto flotante ---
   En vez de un velo plano sobre toda la foto, el texto vive en una tarjeta
   clara con sombra (el mismo lenguaje visual que el resto del sitio: tarjetas
   de servicio, de unidades, de rutas, etc.). La foto se tiñe con un navy muy
   sutil para darle unidad de color con la marca, y la tarjeta blanca es lo
   que realmente le da contraste al texto maroon. */
.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding-block: 40px;
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 33, 48, 0.35) 0%, rgba(10, 33, 48, 0.55) 100%);
}
.about-hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  padding: 56px 48px;
  box-shadow: 0 24px 60px rgba(6, 20, 30, 0.35);
  text-align: center;
}
.about-hero h1 {
  color: var(--maroon);
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  margin-bottom: 36px;
}
.about-hero-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  text-align: center;
}
.about-hero-columns p {
  color: var(--maroon);
  font-weight: 500;
  margin: 0;
}

/* --- Misión / Visión / Valores --- */
.mvv {
  background: var(--bg-page);
  padding-block: 64px 72px;
}
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.mvv-col h3 {
  color: var(--navy);
  font-size: 1.4rem;
  margin-bottom: 24px;
}
.mvv-col p {
  color: var(--navy);
  margin: 0;
}
.mvv-list {
  text-align: center;
  color: var(--navy);
}
.mvv-list li {
  margin-bottom: 14px;
  list-style: none;
}
.mvv-list li::before {
  content: "• ";
}

/* --- Certificaciones y Seguros --- */
.certs {
  background: var(--bg-white);
  padding-block: 72px 88px;
}
.certs-inner {
  text-align: center;
}
.certs h2 {
  color: var(--maroon);
  font-size: 2rem;
  margin-bottom: 24px;
}
.certs-intro {
  color: var(--maroon);
  max-width: 68ch;
  margin: 0 auto 48px;
}
.certs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  text-align: center;
}
.certs-item {
  color: var(--maroon);
  margin: 0;
  max-width: 46ch;
  margin-inline: auto;
}
.certs-item strong { font-weight: 700; }

/* ==========================================================================
   RESPONSIVE — Nosotros
   ========================================================================== */
@media (max-width: 880px) {
  .about-hero-columns { grid-template-columns: 1fr; gap: 24px; }
  .about-hero-content { padding: 40px 28px; border-radius: 22px; }
  .about-hero { min-height: 0; padding-block: 32px; }
  .mvv-grid { grid-template-columns: 1fr; gap: 40px; }
  .certs-grid { grid-template-columns: 1fr; }
}