/* =========================================================
   NOSOTROS
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Dos columnas: texto a la izquierda, dos cards desplegables a la
   derecha (el componente vive en css/base/cards.css). La etiqueta
   "▪ Nosotros" es hija directa de la <section> y se posiciona sola desde
   layout.css, para que quede en el mismo lugar en todas las secciones.
   ========================================================= */
/* Las dos columnas centradas verticalmente entre sí, así el bloque de
   texto y el de cards quedan centrados en el espacio que va de la
   etiqueta al final de la sección. */
.nosotros .grid-2col {
  align-items: center;
}

/* --- Columna de texto --- */
.nosotros__title {
  font-size: clamp(1.7rem, 2.6vw, 3.1rem);
  line-height: 1.12;
  max-width: none;
}
.nosotros__title .is-dark { color: var(--color-text-dark); }
.nosotros__title .is-pink { color: var(--color-5); }

/* Cortes de línea: en desktop cada línea es un bloque, así los cortes son
   exactamente los del Figma. En mobile vuelven a inline y el texto se
   acomoda solo — un <br> fijo ahí dejaría líneas huérfanas o desbordadas. */
.nosotros__title-line { display: inline; }
@media (min-width: 1025px) {
  .nosotros__title-line { display: block; }
}

.nosotros__text p {
  margin-top: var(--space-4);
  font-size: 18px;
  line-height: 1.5;
  max-width: 52ch;
}

/* --- Columna de cards ---
   Dos cards al lado con la segunda corrida hacia abajo, como en el
   Figma. El gap acá es más chico que --gap-columns a propósito:
   --gap-columns separa las dos COLUMNAS grandes del sitio, no los
   elementos internos de una. */
/* align-items: center (no stretch): cada card crece SOLO cuando se abre
   su propio desplegable, y al crecer una la otra queda centrada contra
   ella en vez de pegada arriba.
   Con el desplegable cerrado las dos miden igual porque el título reserva
   3 líneas (ver .card__title en css/base/cards.css). Con stretch, en
   cambio, abrir una estiraba también a la otra y le dejaba un hueco. */
.nosotros__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
}

/* Las dos fotos son PNG de 400x400 con el sujeto centrado, así que no
   necesitan encuadre distinto: usan los valores del componente. */

/* --- Responsive --- */
@media (max-width: 1024px) {
  .nosotros__title { max-width: none; }
  .nosotros__cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}