/* =========================================================
   DB Project — Nosotros
   La página más corta del sitio, y sin una sola imagen. Eso es una decisión,
   no una carencia: lo que sostiene el bloque es el aire y el movimiento, así
   que acá el espaciado es más generoso que en el resto y la medida de línea
   más corta, para que dos párrafos largos no se lean como un muro.
   ========================================================= */

/* ── Lo que se fue ────────────────────────────────────────────────────────────
   .nosotros__titular y .nosotros-bloques quedaron huérfanas: el marcado dejó de
   usarlas hace rondas (el h1 vive en .ap-silencio__titulo, css/aperturas.css) y
   arrastraban 60 líneas de reglas y comentarios que describían una página que
   ya no existía. Verificado con grep sobre las nueve páginas: cero usos. */

.nosotros__bajada { max-width: 58ch; margin-top: var(--space-4); }

/* ═════════════════════════════════════════════════════════════════════════════
   EL RELATO — una sola lectura, no dos bloques

   Eran dos artículos con su propio h2 entrando desde lados opuestos: "De dónde
   viene esto" y "Lo que más hacemos es escuchar". Como dos secciones separadas
   se leían como dos temas, cuando son uno: de dónde salió el trabajo y en qué
   consiste. Ahora es una columna de prosa continua y la frase que era el
   segundo título es la cita que parte el texto — sigue siendo lo más fuerte de
   la página y ya no corta la lectura en dos.
   ═══════════════════════════════════════════════════════════════════════════ */
/* La caja NO lleva también la clase .container: .container trae
   margin-inline:auto, y con un max-width de 62ch eso centraba la columna en la
   página —medido: margen izquierdo de 402px a 1440— mientras el recorrido de
   abajo arranca contra el borde del contenedor. Las dos mitades de la página
   quedaban desalineadas entre sí. Va anidada adentro del container. */
.relato__caja { max-width: 62ch; }
.relato__titulo { margin: 0 0 var(--space-4); }
.relato__p {
  margin: 0;
  max-width: none;
  font-size: var(--db-fs-lead);
  line-height: 1.65;
  color: var(--db-gris-claro);
}

/* La cita. Es la única frase de la página que va en escala de titular sin ser
   un encabezado: no nombra una sección, la afirma. Sin comillas dibujadas — el
   tamaño y el filete ya dicen que es una cita, y unas comillas grandes son
   ornamento de plantilla. */
.relato__cita {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--db-acento);
}
.relato__cita p {
  margin: 0;
  max-width: none;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--db-texto-sobre-oscuro);
}

/* ═════════════════════════════════════════════════════════════════════════════
   EL RECORRIDO — cómo trabajamos, sobre qué, y con qué te quedás

   La página terminaba en los dos bloques de prosa: no decía nada de cómo se
   trabaja ni sobre qué, que es lo que alguien viene a averiguar acá. Las tres
   bandas no traen información nueva —son las cinco etapas de Proceso, los tres
   formatos de Servicios y la regla de propiedad que ya está en las dos— en su
   versión corta y con el link a donde está entero.

   Cada banda tiene cabecera propia y su contenido debajo, separadas por un
   filete: es el ritmo que la página no tenía. Ninguna es una tarjeta.
   ═══════════════════════════════════════════════════════════════════════════ */
.recorrido__banda {
  padding-block: var(--space-6);
  border-top: 1px solid var(--db-linea);
}
.recorrido__banda:first-child { border-top: 0; padding-top: 0; }
.recorrido__cab { margin-bottom: var(--space-5); }
.recorrido__cab h2 { margin: 0; max-width: 20ch; }
.recorrido__eti {
  margin: 0 0 var(--space-2);
  font-size: var(--db-fs-eti);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--db-acento);
}
.recorrido__linea {
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  color: var(--db-gris-medio);
}

/* Las cinco etapas. Números grandes en fila, no una lista con viñetas: es la
   versión corta de una secuencia, y lo que hay que poder seguir con la vista es
   el orden. */
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
}
.etapas li {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--db-linea-fuerte);
  min-width: 0;
}
.etapas__n {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--db-acento);
}
.etapas__q {
  font-size: var(--db-fs-small);
  line-height: 1.4;
  color: var(--db-gris-claro);
  text-wrap: pretty;
}
.recorrido__ir { margin: var(--space-5) 0 0; max-width: none; }

/* Los tres formatos. Fila por formato, el nombre a la izquierda y la línea a la
   derecha: es una lista de definiciones, no tres tarjetas. Tarjetas ya hay en
   el Inicio y en Servicios; repetirlas acá sería la tercera vez. */
.quehacemos { list-style: none; margin: 0; padding: 0; }
.quehacemos li + li { border-top: 1px solid var(--db-linea); }
.quehacemos a {
  display: grid;
  gap: var(--space-1) var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 760px) {
  .quehacemos a { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); }
}
.quehacemos a:hover, .quehacemos a:focus-visible { padding-left: var(--space-3); }
.quehacemos a:focus-visible { outline: 2px solid var(--db-acento); outline-offset: 4px; }
.quehacemos__q {
  font-size: var(--db-fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--db-texto-sobre-oscuro);
}
.quehacemos__d {
  font-size: var(--db-fs-cuerpo);
  line-height: 1.55;
  color: var(--db-gris-medio);
}

/* El remate. Dos columnas: la afirmación de un lado, lo que la sostiene del
   otro. Es la única banda con entrada cruzada, que es lo que la marca como
   final del recorrido. */
.recorrido__banda--remate { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .recorrido__banda--remate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-7);
    align-items: start;
  }
  .recorrido__banda--remate .recorrido__cab { margin-bottom: 0; }
}
.recorrido__remate p { margin: 0 0 var(--space-3); font-size: var(--db-fs-lead); color: var(--db-gris-claro); }
.recorrido__remate-nota {
  margin-bottom: 0 !important;
  padding-left: var(--space-3);
  border-left: 2px solid var(--db-acento);
  font-size: var(--db-fs-cuerpo) !important;
  color: var(--db-texto-sobre-oscuro) !important;
}

@media (prefers-reduced-motion: reduce) {
  .quehacemos a { transition: none; }
}