/* =====================================================================
   wwwroot/css/institucional.css — únicamente lo que una sola de las tres
   páginas institucionales (Quiénes Somos, Servicios, Contacto) necesita.
   Todo lo que se reutiliza entre páginas —franja, tarjeta, pilares,
   datos, fila-servicio, grilla-vm, boton— vive en layout.css y
   componentes.css: acá no se repite ni una sola de esas reglas, y todo
   valor sale de los tokens de tokens.css, ninguno literal.
   ===================================================================== */

/* --- /quienes-somos: relato institucional. Grid 7/12 texto + 5/12 figura,
   invertido respecto de la sección equivalente de Inicio (que pone la
   figura a la izquierda) para que ninguna de las dos páginas se lea como
   el mismo componente repetido. --- */
.relato__grid {
  display: grid;
  gap: var(--espacio-8);
}

@media (min-width: 1024px) {
  .relato__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--canaleta);
    align-items: start;
  }
}

/* Sin fotografía del cliente: bloque de color con relación de aspecto fija,
   para que la foto real entre después sin generar salto de layout. */
.relato__figura {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-sutil);
  background-image: linear-gradient(145deg, var(--color-superficie-inversa), var(--color-acento));
}

/* --- /servicios: bajada de la introducción, el único párrafo suelto de la
   página sin un componente propio en el vocabulario compartido. --- */
.entrada {
  max-width: var(--ancho-estrecho);
  margin-inline: auto;
  text-align: center;
  font-size: var(--texto-lg);
  color: var(--color-texto-suave);
}

/* --- /contacto: la única grilla asimétrica de la página. --- */
.contacto-grid {
  display: grid;
  gap: var(--espacio-8);
}

@media (min-width: 1024px) {
  .contacto-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--canaleta);
    align-items: start;
  }
}

/* La tarjeta de Acceso a Propietarios y el bloque de horarios van apilados
   en la misma columna lateral: necesitan su propio ritmo vertical. */
.contacto-grid__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}