/*
 * tarjeta-servicio.css — plan-segmentacion.md §2.9 "tarjeta-de-servicio-numerada". Solo en
 * `servicios`, ×4 (Arquitectura/Construcción/Diseño Interior/Remodelaciones). Layout alternado
 * imagen-izq/texto-der (impares) y texto-izq/imagen-der (pares, fondo beige). Geometría exacta:
 * _dev/registro-decisiones.md, 2026-08-17.
 */

.gyo-tarjeta-servicio {
  background-color: #FFFFFF;
}

.gyo-tarjeta-servicio--espejo {
  background-color: var(--color-beige);
}

/* Convertido a `.row` + `.col-lg-5` (imagen) + `.col-lg` (contenido, ancho flexible)
   (auditoría 2026-08-18, hallazgo 5 — el checklist interno desbordaba desde 1200px: la imagen
   fija de 763px no cedía y, aunque `.gyo-tarjeta-servicio__contenido` sí tenía `min-width:0`, no
   le quedaba ancho suficiente al lado de la imagen rígida). El gap sigue siendo la propiedad
   `gap` de CSS (no `--bs-gutter-x`): el gutter de Bootstrap se implementa con `padding` en cada
   columna, y como la imagen es un `<img>` usado directamente como columna, ese padding comprime
   el contenido real de la imagen en vez de crear espacio entre columnas — a diferencia de un
   `padding`/`margin` direccional, `gap` no depende de qué lado es "izquierda": funciona igual con
   `flex-direction:row-reverse` (variante `--espejo`, sin cambios). `--bs-gutter-x:0` para que
   ninguna columna reciba ese padding. Por debajo de `lg` (992px) imagen y contenido apilan a
   ancho completo en vez de competir por el mismo espacio angosto. */
.gyo-tarjeta-servicio__fila {
  --bs-gutter-x: 0;
  gap: var(--gyo-tarjeta-servicio-gap-6);
  align-items: flex-start;
  padding-top: var(--gyo-tarjeta-servicio-padding-top-6);
}

.gyo-tarjeta-servicio--espejo .gyo-tarjeta-servicio__fila {
  flex-direction: row-reverse;
}

.gyo-tarjeta-servicio__imagen {
  width: 100%; /* proporcional a la columna por debajo del ancho de referencia */
  height: var(--gyo-tarjeta-servicio-imagen-h-9);
  object-fit: cover;
}

.gyo-tarjeta-servicio__contenido {
  min-width: 0;
}

/* Ancho de referencia del PDF: fuerza el ancho exacto medido de la imagen por encima de la
   columna aproximada de Bootstrap (mismo umbral ya auditado el 2026-08-17 para el footer). */
@media (min-width: 1830px) {
  .gyo-tarjeta-servicio__imagen {
    width: var(--gyo-tarjeta-servicio-imagen-w-9);
  }
}

.gyo-tarjeta-servicio__numero-fila {
  display: flex;
  align-items: center;
  gap: 7px; /* medido: dash arranca 7px después del número */
}

.gyo-tarjeta-servicio__numero {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-cafe-claro);
}

.gyo-tarjeta-servicio__guion {
  display: inline-block;
  width: 48px;
  height: 1px;
  background-color: var(--color-cafe-claro);
}

.gyo-tarjeta-servicio__titulo {
  margin: var(--gyo-tarjeta-servicio-numero-titulo-gap-4) 0 0 0;
  font-size: var(--gyo-font-size-h2); /* 48→28, Fase 3 */
  font-weight: 600;
  color: var(--color-negro-texto);
}

.gyo-tarjeta-servicio__parrafo {
  max-width: 900px;
  margin: var(--gyo-tarjeta-servicio-titulo-parrafo-gap-4) 0 0 0;
  font-size: var(--gyo-font-size-parrafo); /* 22→16, Fase 3 */
  line-height: 1.9091; /* 42/22, múltiplo en vez de px fijo — mismo criterio que sobre-gyo (inicio.css) */
  color: var(--color-negro-texto);
}

.gyo-tarjeta-servicio__pie {
  display: flex;
  flex-wrap: wrap; /* CLAUDE.md §0: por debajo del ancho de referencia ningún componente puede
    producir overflow horizontal. El botón "Cotizar servicio" no puede achicarse (su texto no
    hace wrap, ver boton-flecha.css) y a columnas de contenido angostas (ej. servicios.html a
    1366px, columna de texto ~315px) no entraba junto al checklist en la misma fila — encontrado
    en la auditoría de márgenes del 2026-08-17. Con flex-wrap el botón baja a su propia línea en
    vez de desbordar; a 1923px (ancho de referencia) sigue en una sola fila, sin cambios. */
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gyo-space-4);
}