/*
 * tarjeta-proyecto.css — plan-segmentacion.md §2.6. Usada en `inicio` (6 tarjetas) y `proyectos`
 * (6 tarjetas). Foto de fondo a toda la tarjeta + overlay degradado oscuro en el 295px inferior
 * (confirmado como imagen/máscara en el PDF, acá implementado con gradiente CSS — no hay opacidad
 * exacta que leer del vector) + badge de categoría arriba a la izquierda + caption + divisoria +
 * link "Ver proyecto", estos 3 últimos centrados y dentro de la banda oscura (por eso van en
 * beige: es texto claro sobre fondo oscuro, aunque la sección en sí sea de fondo beige).
 *
 * Medidas: _dev/registro-decisiones.md, 2026-08-14. Alto/gap normalizados por P15
 * (690px / 50px), ver plan-segmentacion.md §2.6.
 */

.gyo-tarjeta-proyecto {
  position: relative;
  /* La tarjeta vive DENTRO de un `<div class="col-12 col-lg-4">` (columna de Bootstrap), no es la
     columna en sí misma — corregido 2026-08-18: `.gyo-tarjeta-proyecto__foto`/`__overlay`/`__pie`
     son `position:absolute` con `inset`/offsets, que se posicionan contra el padding-box del
     ancestro posicionado más cercano. Si la tarjeta misma fuera la columna (con el padding del
     gutter de Bootstrap), esos hijos absolutos ignorarían ese padding y taparían el gap completo
     entre tarjetas (bug real, confirmado por CDP: gap medido 0px entre fotos). Con un wrapper sin
     padding en el medio, `width:100%` acá vuelve a significar "llenar el content-box del
     wrapper", igual que en el resto del sitio. */
  width: 100%;
  height: var(--gyo-tarjeta-proyecto-height-9);
  overflow: hidden;
  display: block;
  color: var(--color-beige);
}

.gyo-tarjeta-proyecto__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.gyo-tarjeta-proyecto__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 295px; /* medido */
  background: linear-gradient(to bottom, rgba(29, 29, 29, 0) 0%, rgba(29, 29, 29, 0.85) 55%);
  z-index: 1;
}

.gyo-tarjeta-proyecto__badge {
  position: absolute;
  top: 36px;   /* medido: 1336-1300 */
  left: 32px;  /* medido: 126.3-94 */
  z-index: 2;
  background-color: var(--color-cafe-claro);
  color: var(--color-beige);
  font-size: 18px;
  padding: 8px 18px; /* aprox. a partir de la caja medida 139.2×35 para "Residencial" */
}

.gyo-tarjeta-proyecto__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px; /* medido: card bottom(1994) - link bottom(1965) ≈ 29, + margen propio del texto */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gyo-space-3);
}

.gyo-tarjeta-proyecto__caption {
  font-size: 17px;
  margin: 0;
}

.gyo-tarjeta-proyecto__divider {
  width: 100%;
  max-width: var(--gyo-tarjeta-proyecto-divider-1); /* Fase 3 (2026-08-18): `max-width` en vez de
    `width` fijo — a columna única y angosta (375px) el ancho fijo de 466px desbordaba la tarjeta;
    con `max-width` sigue midiendo 466px exacto en el ancho de referencia (la tarjeta ahí es más
    ancha que eso) y cede en tarjetas angostas. */
  height: 1px;
  background-color: var(--color-beige);
  border: none;
  margin: 0;
}

.gyo-tarjeta-proyecto__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gyo-space-2);
  font-size: 18px;
  color: var(--color-beige);
}

.gyo-tarjeta-proyecto__link svg {
  width: 12px;
  height: 12px;
}