/*
 * cta-cierre.css — plan-segmentacion.md §2.4. Foto de fondo + heading 2 líneas (beige, 70px) +
 * párrafo (beige, 26px) + botón outline con flecha, todo centrado. Alto 552px en las páginas
 * interiores; en `inicio` mide ~720px con más aire arriba/abajo (medido: _dev/registro-decisiones.md,
 * 2026-08-14) — se implementa con el alto real de cada uso, no forzado a 552 en todos lados.
 * Variante de color siempre la "oscura" (beige + ícono negro), confirmada en `inicio` (P12/P13) y
 * en las 6 páginas interiores.
 */

.gyo-cta-cierre {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-beige);
  height: 552px; /* medido: alto estándar en las 6 páginas interiores. `inicio` es la excepción
    (720px exactos, confirmado 2026-08-14) — ver .gyo-cta-cierre--inicio */
}

/* Fase 3 (2026-08-18): por debajo de `lg` (992px) el alto fijo deja de ser seguro — con
   `--gyo-font-size-cta-titulo` en `clamp()` el texto puede necesitar más líneas/alto del que el
   552px (o 720px de `inicio`) mide a 1920px, y `overflow:hidden` lo recortaría en vez de mostrarlo
   completo. `min-height` en vez de `height` fijo: a igual o por encima del ancho de referencia no
   cambia nada (el contenido ya mide igual o menos), y a mobile la sección crece para hacerle
   lugar al texto en vez de cortarlo — mismo criterio ya usado en `.gyo-checklist li`
   (checklist-icono-circular.css, 2026-08-17). */
@media (max-width: 991.98px) {
  .gyo-cta-cierre {
    height: auto;
    min-height: 552px;
    padding-block: var(--gyo-space-5);
  }
}

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

.gyo-cta-cierre__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(29, 29, 29, 0.45); /* PROVISIONAL, igual que .gyo-hero__overlay */
  z-index: 1;
}

/* Consolidación 2026-08-17 (auditoría de márgenes, hallazgo Clase B): el centrado horizontal de
   `__contenido` ya no depende de `justify-content:center` en `.gyo-cta-cierre` — ahora vive
   dentro de un `.gyo-container` como el resto del sitio (mismo dueño del margen de 94px, ver
   `CLAUDE.md` §2 "un solo mecanismo, un solo dueño"), y se centra con `margin-inline:auto`
   puertas adentro. No cambia el render: `__contenido` sigue siendo más angosto que el margen del
   container en las 6 páginas, esto es limpieza de arquitectura, no una corrección visual.
   Actualizado 2026-08-18: el `width:100%` que vivía acá ahora lo pone `.container-fluid` de
   Bootstrap directamente (ver base.css) — quitarlo de acá evita un segundo dueño del mismo
   valor. */

.gyo-cta-cierre__contenido {
  position: relative;
  z-index: 2;
  max-width: 910px; /* medido: la línea más ancha del heading mide 765.9px + aire a los costados */
  margin-inline: auto;
  padding-inline: var(--gyo-space-4);
}

.gyo-cta-cierre__titulo {
  font-size: var(--gyo-font-size-cta-titulo); /* 70→36, Fase 3 */
  font-weight: 600; /* SemiBold, mismo criterio PROVISIONAL que el H1 de hero-inicio */
  line-height: 1.1714; /* 82/70, Fase 3: múltiplo en vez de px fijo, ver nota en hero-inicio
    (inicio.css) — reproduce el mismo 82px exacto a 1920px, escala proporcional abajo */
  margin: 0 0 var(--gyo-space-4) 0;
}

.gyo-cta-cierre__parrafo {
  font-size: var(--gyo-font-size-cta-parrafo); /* 26→18, Fase 3 */
  font-weight: 400;
  line-height: 1.6154; /* 42/26, mismo criterio */
  margin: 0 0 var(--gyo-space-4) 0;
}

.gyo-cta-cierre .gyo-boton-flecha {
  margin-inline: auto;
}