/* ============================================================================
   CIERRE DE PÁGINA · variante «fondo claro»
   ----------------------------------------------------------------------------
   El cierre —«cuando sientas que es momento de pedir ayuda, estamos aquí»—
   es una sección `cmp cmp--primary c-close`: azul, texto crema. El estilo de
   bloque «Cierre · fondo claro» (inc/block-styles.php) pone `is-style-fondo-
   claro` en el grupo y esta hoja lo pasa a crema con texto azul, sin tocar el
   marcado ni las clases del contenido.

   ⚠️ TODO VA CON `.c-close.is-style-fondo-claro` DELANTE, a propósito: hay
   que ganar a las reglas de sección azul de cds/color.css, que llegan a
   (0,4,0) en los botones. Los botones cambian de papel:
     lima         → igual (azul oscuro sobre lima)
     fondo claro  → azul (crema sobre crema sería invisible)
     principal    → azul de serie (en azul iba invertido)
     contorno     → azul (en azul iba crema)
   Vale en la web (clases c-btn) y en el editor (puente :not(.c-btn)).
   ========================================================================== */

.c-close.is-style-fondo-claro {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary);
}

.c-close.is-style-fondo-claro :is(h1, h2, h3, h4, p, li, dt, dd),
.c-close.is-style-fondo-claro .c-close__text,
.c-close.is-style-fondo-claro .c-close__sign {
  color: var(--wp--preset--color--primary);
}

.c-close.is-style-fondo-claro .c-shout,
.c-close.is-style-fondo-claro .c-shout--on-primary {
  color: var(--wp--preset--color--primary);
}

.c-close.is-style-fondo-claro a:not(.c-btn, .wp-block-button__link) {
  color: var(--wp--preset--color--primary);
}

/* Botones · web (con clases de la librería) */
.cmp.c-close.is-style-fondo-claro .c-btn.c-btn--on-primary,
.cmp.c-close.is-style-fondo-claro .c-btn.c-btn--primary {
  background-color: var(--wp--preset--color--primary);
  border-color: transparent;
  color: var(--wp--preset--color--on-primary);
}

.cmp.c-close.is-style-fondo-claro .c-btn.c-btn--on-primary:hover,
.cmp.c-close.is-style-fondo-claro .c-btn.c-btn--primary:hover {
  background-color: var(--wp--preset--color--primary-hover);
  color: var(--wp--preset--color--on-primary);
}

.cmp.c-close.is-style-fondo-claro .c-btn.c-btn--ghost {
  background-color: transparent;
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

.cmp.c-close.is-style-fondo-claro .c-btn.c-btn--ghost:hover,
.cmp.c-close.is-style-fondo-claro .c-btn.c-btn--ghost:focus-visible {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
}

/* Botones · editor (sin clases de la librería) */
.cmp.c-close.is-style-fondo-claro .is-style-claro .wp-block-button__link:not(.c-btn),
.cmp.c-close.is-style-fondo-claro .is-style-azul .wp-block-button__link:not(.c-btn) {
  background-color: var(--wp--preset--color--primary);
  border-color: transparent;
  color: var(--wp--preset--color--on-primary);
}

.cmp.c-close.is-style-fondo-claro .is-style-contorno .wp-block-button__link:not(.c-btn) {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

/* Cierre unificado (feedback 18-09-2026, pág. 38): tres tarjetas —primera
   cita, presencial, online— y un botón de WhatsApp centrado debajo. El mismo
   módulo en todas las páginas; las tarjetas son las de la librería. */
.c-close__tarjetas {
  width: 100%;
  margin-top: var(--wp--preset--spacing--50);
}
.c-close__wa {
  margin-top: var(--wp--preset--spacing--50);
}

/* ============================================================================
   CIERRE · «Dibujos Calma» en las tres tarjetas (8 oct 2026)
   ----------------------------------------------------------------------------
   Las tarjetas son el patrón sincronizado «Cierre · tres caminos» (wp_block,
   tools/cierre-tarjetas.php): cambiarlo en Patrones llega a las 14 páginas.

   La tarjeta es blanca, como en «Necesidades» de la portada: `multiply` funde
   el fondo blanco roto del dibujo sin placa. Caja 4:3 con contain, porque los
   dibujos llegan en 4:3 y en 1:1 y así los títulos arrancan a la misma altura.
   ========================================================================== */
/* Flex, flex: none y min-height: 0 por lo mismo que .c-need__icon
   (overrides.css): .c-card es un flex en columna, y sin esto un dibujo 1:1
   impone su alto (192px) en vez de caber en la caja 4:3 (144px). */
.c-card__dibujo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: min(100%, 12rem);
  aspect-ratio: 4 / 3;
}

/* El dibujo sigue la alineación del texto de la tarjeta: a la izquierda en
   las tarjetas normales (como la marca a la que sustituye) y centrado en las
   del cierre, que llevan el texto centrado. Va con más peso porque
   `.cmp .wp-block-image { margin: 0 }` (overrides.css, que carga la última)
   ganaba al `margin: 0 auto`. */
.c-card figure.c-card__dibujo {
  margin-inline: 0;
}

.c-close__tarjetas .c-card figure.c-card__dibujo {
  margin-inline: auto;
}

.c-card__dibujo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Los tres botones al pie de la tarjeta y centrados, como el texto: así los
   tres quedan a la misma altura aunque los textos midan distinto. */
.c-close__tarjetas .c-card > .wp-block-buttons {
  justify-content: center;
  margin-top: auto;
}