/* =====================================================================
   wwwroot/css/inicio.css — composición exclusiva de la portada (/).

   Todo lo que se comparte entre páginas (franjas, botones, tarjetas,
   .grilla-servicios, .celda-servicio, .pilares, .grilla-vm, .hero) vive
   en layout.css y componentes.css: esta hoja se carga solo en Inicio, así
   que acá va únicamente lo que ninguna otra página repite — el bloque
   asimétrico del extracto de Quiénes Somos y su imagen marcadora.
   ===================================================================== */

/* Mobile-first: una columna apilada. La asimetría 5/12 + 7/12 entra recién
   en escritorio porque dos columnas angostas en un celular vuelven a
   partir el texto en un renglón por palabra. */
.nosotros {
  display: grid;
  gap: var(--espacio-8);
  margin-bottom: var(--espacio-8);
}

/* Sin fotografía del cliente: el mismo aspect-ratio que va a tener la
   imagen real, para que sustituirla por --imagen-hero no mueva ni un
   píxel del layout de alrededor (CLS 0). */
.nosotros__figura {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-sutil);
  background-image: var(--imagen-hero);
  background-size: cover;
  background-position: center;
}

.nosotros__contenido .prosa {
  margin-block: var(--espacio-5);
}

.nosotros__contenido .boton {
  margin-top: var(--espacio-2);
}

@media (min-width: 1024px) {
  .nosotros {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
}