/*
 * estudio.css — estilos propios de la página `estudio`, secciones que no son componentes
 * compartidos. Geometría exacta: _dev/registro-decisiones.md, 2026-08-17.
 */

.gyo-hero-estudio {
  height: 693px; /* medido: y55→748 — movido acá desde un `style` inline en el HTML (2026-08-18,
    Fase 3), mismo criterio que `.gyo-hero-inicio` en inicio.css. */
}

@media (max-width: 991.98px) {
  .gyo-hero-estudio {
    height: auto;
    min-height: 400px; /* alto de trabajo, sin dato del PDF para este ancho (Fase 3) */
  }
}

/* --- nuestra-historia --- */
.gyo-nuestra-historia {
  background-color: #FFFFFF;
  padding-block: 111px;
}

.gyo-nuestra-historia .gyo-encabezado {
  max-width: 900px;
  margin-inline: auto;
}

.gyo-nuestra-historia__parrafo {
  max-width: 1450px;
  margin: 35px auto 0 auto; /* medido: 1094-1059 */
  text-align: center;
  font-size: 19px; /* Fase 3: sin clamp — ya es un tamaño "bajada" chico, cerca de su piso legible;
    ver _dev/plan-segmentacion.md tabla de tokens */
  line-height: 27px; /* medido: mismo leading corto que otros bloques centrados de esta página */
  color: var(--color-gris-bajadas);
}

/* --- por-que-elegirnos: 2 columnas, texto+checklist a la izquierda, grid de fotos a la derecha --- */
.gyo-por-que-elegirnos {
  background-color: var(--color-beige);
  padding-block: 183px 54px; /* medido: 183px arriba (eyebrow-sección); abajo, sección(1188) -
    183 - alto de la columna más alta (grid de fotos, 951) = 54px */
}

.gyo-por-que-elegirnos__grid {
  display: flex;
  gap: 46px;
  align-items: flex-start;
}

.gyo-por-que-elegirnos__col-texto {
  flex: 0 0 613px; /* medido: ancho de la divisoria bajo el párrafo */
}

.gyo-por-que-elegirnos__parrafo {
  font-size: var(--gyo-font-size-parrafo); /* 22→16, Fase 3 */
  line-height: 1.2273; /* 27/22, múltiplo en vez de px fijo — mismo criterio que hero-inicio */
  color: var(--color-negro-texto);
  margin: 70px 0 0 0; /* medido: 1606-1536.2 (fin del título hasta el párrafo) */
}

/* Fase 3 (2026-08-18): hallazgo 4 de la auditoría de grid (Clase C, deferido a esta fase) —
   `.gyo-por-que-elegirnos__col-texto` tiene un ancho fijo de 613px que no cede; por debajo de
   `lg` apila texto y grid de fotos en 1 columna (pedido explícito: "todo a una sola columna en
   375/768"). */
@media (max-width: 991.98px) {
  .gyo-por-que-elegirnos__grid {
    flex-direction: column;
  }

  .gyo-por-que-elegirnos__col-texto {
    flex-basis: auto;
    width: 100%;
  }
}

.gyo-por-que-elegirnos__divisor {
  border: none;
  border-top: 1px solid var(--color-cafe-claro);
  margin: 58px 0 60px 0; /* medido: 1675(fin párrafo)→1733(línea) y 1734(línea)→1793(checklist) */
  width: 100%;
  max-width: 613px; /* Fase 3 (2026-08-18): `max-width` en vez de `width` fijo — a columna única
    (`.gyo-por-que-elegirnos__col-texto` ya pasa a `width:100%` por debajo de `lg`, ver arriba) el
    ancho fijo desbordaba. Sigue midiendo 613px exacto en el ancho de referencia. */
}

/* Grid asimétrico de 4 fotos — anchos de columna invertidos entre filas (medido 2026-08-17,
   directo del render, no del catálogo aproximado de Fase 0). */
.gyo-grid-fotos {
  flex: 1;
  min-width: 0; /* mismo motivo que en .gyo-grid-fotos__fila img */
  display: flex;
  flex-direction: column;
  gap: 27px; /* gap vertical medido */
}

.gyo-grid-fotos__fila {
  display: flex;
  gap: 32px; /* gap horizontal medido en la fila 2; la fila 1 medía ~46px, tratado como la misma
    tolerancia de exportación ya aceptada en otros componentes (P15/P22) */
  height: 462px; /* medido, igual en ambas filas */
}

.gyo-grid-fotos__fila img {
  height: 100%;
  min-width: 0; /* un <img> dentro de un flex item no se achica bajo su ancho intrínseco por
    defecto (min-width:auto) — sin esto, la foto de mayor resolución fuerza overflow horizontal
    en toda la fila. Encontrado con el scrollbar horizontal del render, 2026-08-17. */
  object-fit: cover;
}

.gyo-grid-fotos__fila--1 img:first-child { width: 431px; }
.gyo-grid-fotos__fila--1 img:last-child  { flex: 1; }
.gyo-grid-fotos__fila--2 img:first-child { flex: 1; }
.gyo-grid-fotos__fila--2 img:last-child  { width: 445px; }

/* Fase 3 (2026-08-18): "todo a una sola columna en 375/768" — las 4 fotos (2 filas de 2) pasan a
   1 sola columna de 4, en vez de 2 filas de 2 fotos angostas. */
@media (max-width: 991.98px) {
  .gyo-grid-fotos__fila {
    flex-direction: column;
    height: auto;
  }

  .gyo-grid-fotos__fila img,
  .gyo-grid-fotos__fila--1 img:first-child,
  .gyo-grid-fotos__fila--1 img:last-child,
  .gyo-grid-fotos__fila--2 img:first-child,
  .gyo-grid-fotos__fila--2 img:last-child {
    /* misma especificidad que las reglas de ancho fijo de arriba (que ya no representan nada a
       columna única) — gana por orden de cascada, sin necesitar `!important` */
    width: 100%;
    height: 300px; /* alto de trabajo, sin dato del PDF para este ancho (Fase 3) */
    flex: none;
  }
}

/* --- procesos-de-trabajo --- */
.gyo-procesos-de-trabajo {
  background-color: #FFFFFF;
  padding-block: 112px 143px; /* medido: 112px arriba (eyebrow-sección); abajo, calculado desde
    el alto total de la sección (874) menos el contenido */
}

.gyo-procesos-de-trabajo .gyo-encabezado {
  max-width: 900px;
  margin-inline: auto;
}

.gyo-procesos-de-trabajo__subtitulo {
  max-width: 1000px;
  margin: 50px auto 0 auto; /* medido: 2799-2749 */
  text-align: center;
  font-size: var(--gyo-font-size-parrafo); /* 22→16, Fase 3 */
  color: var(--color-negro-texto);
}

.gyo-procesos-de-trabajo .gyo-stepper {
  margin-top: 124px; /* medido: 2950(círculos)-2826(fin subtítulo) */
}