/* =========================================================
   PÁGINA: Nosotros — nosotros.html
   Header (.header--light), Footer, botones (.btn) y el
   componente de descarga de PDF (.btn-pdf-download) son
   transversales y viven en global.css. Acá solo van los
   estilos propios de esta vista.
   ========================================================= */

/* ============ HISTORIA Y PRESENTACIÓN (Foto-Texto cruzado) ============ */
/* El Header (.header--light) queda absolute + transparente flotando
   encima de la primera sección: compensamos con padding-top propio
   (mismo patrón que .security-hero / .service-hero). */
.about-intro {
  padding: clamp(180px, 15vw, 230px) 0 20px;
}

.about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(32px, 5vw, 64px);
  padding: 40px 0;
}
.about-row > * { min-width: 0; }

.about-row__media {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 719 / 886;
}
.about-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-row__content h1 {
  margin-bottom: 28px;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}


.about-row__content p {
  margin-bottom: 20px;
  line-height: 1.65;
}
.about-row__content p:last-of-type { margin-bottom: 0; }

/* Posición del botón de descarga (.btn-pdf-download vive en global.css) dentro de esta vista */
.about-row__content .btn-pdf-download { margin-top: 28px; }

/* ============ VISIÓN Y MISIÓN ============ */
.mission-vision { padding: 30px 0 100px; }

.mission-vision__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
}

.mission-vision__grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
}
.mission-vision__grid > * { min-width: 0; }

.mission-vision__col h2 {
  margin-bottom: 24px;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}
.mission-vision__col p {
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.mission-vision__col .btn { margin-top: 32px; }

.mission-vision__brush {
  flex-shrink: 0;
  width: clamp(254px, 8vw, 110px);
}
.mission-vision__brush img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  /* Centrado del contenido de "Quiénes somos" en mobile: títulos,
     párrafos, botón de PDF e imágenes quedan alineados al centro en
     vez de a la izquierda (que es como se ven en desktop). */
  .about-row { grid-template-columns: 1fr; gap: 28px; padding: 28px 0 28px; text-align: center; }
  /* Fix Safari iOS: en este rango (y en mobile L) Safari colapsaba la
     grilla contra los bordes del viewport, sin el padding lateral del
     .container ni centrado — bug clásico de min-width:auto en items de
     grid/flex anidados. Forzamos min-width:0 + ancho contenido y un
     padding lateral propio como red de seguridad, sin depender de que
     Safari respete el padding heredado del .container. */
  .about-row, .about-row__content, .about-row__media {
    min-width: 0;
    width: 100%;
    flex-shrink: 1;
  }
  .about-row__media { margin: 0 auto; }
  .about-row__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .about-row__content .btn-pdf-download { margin-left: auto; margin-right: auto; }

  .mission-vision__grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .mission-vision__brush { display: none; }
  .about-row:first-child .about-row__content {
  order: 1;
}

.about-row:first-child .about-row__media {
  order: 2;
}
}