/*
 * checklist-icono-circular.css — plan-segmentacion.md §2.10. Ícono café-claro circular de 28×28px
 * + texto. Mismo componente en `estudio` ("Por qué elegirnos", 8 ítems) y en cada tarjeta de
 * servicio numerada de `servicios` (4 ítems) — solo cambia la cantidad y el espaciado vertical.
 */

.gyo-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gyo-checklist li {
  display: flex;
  align-items: center;
  min-height: 28px; /* = alto del ícono; el pitch medido (69/76px) es de tope-a-tope de ícono, no
    un margin "extra" — con la fila fijada a 28px, el margin-top de cada variante es
    (pitch - 28), ver abajo. Corregido 2026-08-17: sin esto, el pitch real salía ~28px más
    grande que lo medido (se sumaba el alto de la fila anterior al margin).
    `min-height`, no `height` fijo — corregido de nuevo 2026-08-17 (auditoría de márgenes): a
    columnas angostas por debajo del ancho de referencia el texto puede envolver a 2 líneas: con
    `height:28px` fijo, la 2ª línea se dibujaba encima del ítem siguiente (texto superpuesto, no
    overflow horizontal pero igual de ilegible). Con `min-height` el pitch exacto de 1923px no
    cambia (el texto de una sola línea ya mide ~28px), y a anchos angostos la fila crece para
    hacerle lugar a la 2ª línea en vez de superponerla. */
  gap: var(--gyo-space-3);
  font-size: 24px;
  color: var(--color-negro-texto);
}

.gyo-checklist__icono {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-cafe-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.gyo-checklist__icono svg {
  width: 14px;
  height: 14px;
}

/* Pitch vertical de "Por qué elegirnos" (estudio): 76/69/69/69/69/69/76px — medido exacto, no
   una escala regular. Se registra tal cual, sin forzarlo a un valor único (CLAUDE.md: no se
   inventan valores para "llenar" una escala). */
.gyo-checklist--estudio li + li {
  margin-top: 41px; /* pitch 69px - 28px de alto de fila */
}

.gyo-checklist--estudio li:nth-child(2),
.gyo-checklist--estudio li:last-child {
  margin-top: 48px; /* pitch 76px - 28px de alto de fila */
}

/* Variante `servicios` (tarjeta-de-servicio-numerada, 4 ítems, plan-segmentacion.md §2.10):
   pitch 48px exacto y uniforme (no la mezcla 69/76 de `estudio`), fuente 21px en vez de 24px,
   margin-top del primer ítem medido desde el párrafo — dos valores porque el párrafo de
   "Remodelaciones" es de 2 líneas en vez de 3 y el checklist está anclado al título, no al
   párrafo (offset título→checklist ~200-203px constante en las 4 tarjetas, medido 2026-08-17). */
.gyo-checklist--servicio {
  font-size: 21px;
  margin-top: 48px;
}

.gyo-checklist--servicio-corto {
  margin-top: 86px; /* "Remodelaciones": párrafo de 2 líneas, mismo anclaje al título */
}

.gyo-checklist--servicio li + li {
  margin-top: 20px; /* pitch 48px - 28px de alto de fila */
}