/** * common/cta-box — Caja de conversión. * Handle: pf_pfuture_component_cta_box * * Variantes: --section (bloque ancho de cierre) y --sticky (lateral fija en * escritorio, barra inferior en móvil). Tonos: --tone-default, --tone-invert, * --tone-soft. Estados: --has-form, --has-image, .is-pinned (sticky fijada), * .is-released (sticky desfijada al llegar al pie). * * Tokens: solo los canónicos de style.css (issue #60), sin literales de respaldo. * `--pf-sticky-cta-height` la publica script.js en mientras la barra móvil * está fijada: el documento reserva ese hueco al pie y nada queda tapado. Se * publica SOLO en la cara de barra: en escritorio la caja sigue en flujo y no hay * hueco que reservar, y el único consumidor de fuera —`common/floating-contact`, * que se la suma a su margen inferior— mide una barra, no una caja lateral. * * `--pf-cta-bar` dice cuál de las dos caras está activa a este ancho (ver más * abajo): es el contrato entre esta hoja y `script.js` para el issue #94. * * Dirección «Expediente» (issue #112): el panel se lee por su BORDE de 1 px, no * por el tinte —`brand-soft` sobre la página da 1,13:1 y sin borde no se ve—; el * botón primario es el naranja de conversión (`accent` / `on-accent`, hover * `accent-hover`) y el secundario un borde de 2 px navy; el tono `invert` cuelga * de `bg-ink` con `on-ink` encima, que cambian solos de modo, así que no queda * ningún bloque de modo oscuro. Sombra solo en la barra móvil, que flota. */ .pf-cta-box { --pf-cta-bg: var(--pf-color-brand-soft); --pf-cta-text: var(--pf-color-text); --pf-cta-title: var(--pf-color-heading); --pf-cta-border: var(--pf-color-border); --pf-cta-button-bg: var(--pf-color-accent); --pf-cta-button-text: var(--pf-color-on-accent); --pf-cta-button-hover: var(--pf-color-accent-hover); --pf-cta-secondary: var(--pf-color-brand); --pf-cta-secondary-hover-text: var(--pf-color-text-invert); --pf-cta-offset: calc(var(--pf-header-height, 0px) + var(--pf-space-md)); width: 100%; color: var(--pf-cta-text); } .pf-cta-box--tone-soft { --pf-cta-bg: var(--pf-color-bg-alt); } /* Navy en claro, navy más profundo en oscuro; el texto encima es `on-ink`, NUNCA * `text-invert` (sobre `bg-ink` da 1,03:1 en oscuro, medido en #111). El botón * sigue naranja: 5,16:1 en claro y 5,63:1 en oscuro sobre `bg-ink`. */ .pf-cta-box--tone-invert { --pf-cta-bg: var(--pf-color-bg-ink); --pf-cta-text: var(--pf-color-on-ink); --pf-cta-title: var(--pf-color-on-ink); --pf-cta-border: var(--pf-color-bg-ink); --pf-cta-secondary: var(--pf-color-on-ink); --pf-cta-secondary-hover-text: var(--pf-color-bg-ink); } .pf-cta-box__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-space-md) var(--pf-space-lg); border: 1px solid var(--pf-cta-border); border-radius: var(--pf-radius-card); background: var(--pf-cta-bg); } /* Las 20rem son una base del eje HORIZONTAL: reparten el ancho entre texto y * botones en `--section` y en la barra móvil. Donde el eje se vuelca a columna * dejan de significar eso y pasan a ser un suelo de alto, así que la variante * sticky de escritorio las neutraliza (issue #82, ver línea ~236). */ .pf-cta-box__body { flex: 1 1 20rem; min-width: 0; } .pf-cta-box__title { margin: 0 0 var(--pf-space-2xs); color: var(--pf-cta-title); font-size: var(--pf-text-xl); font-weight: var(--pf-weight-bold); line-height: var(--pf-leading-tight); text-wrap: balance; } .pf-cta-box__text { font-size: var(--pf-text-base); line-height: var(--pf-leading-normal); } .pf-cta-box__text > :first-child { margin-top: 0; } .pf-cta-box__text > :last-child { margin-bottom: 0; } /* `flex-shrink: 0` es una promesa de que siempre habrá sitio, y aquí no la hay: * el rótulo del botón es la meta `cta` del servicio y 5 de los 22 traen 49 y 85 * caracteres. Con `0 0 auto` este bloque se dimensionaba al max-content de su * hijo —735px— y se salía de la columna lateral de 20rem y de la barra de móvil. * Con `0 1 auto` encoge hasta lo que le den, y `min-width: 0` es lo que se lo * permite: sin él un item flex no baja de su min-content (issue #99). * Misma familia que el #82 (DEC-039): un valor de `flex` escrito pensando en un * contenedor deja de valer cuando la variante cambia de contenedor. */ .pf-cta-box__actions { display: flex; flex-wrap: wrap; gap: var(--pf-space-xs); flex: 0 1 auto; min-width: 0; } /* Botones: mismo radio y misma altura en primario y secundario; el borde de 2 px * es transparente en el primario y de color en el secundario, para que los dos * midan lo mismo uno al lado del otro (regla de bordes de DISENO-EXPEDIENTE.md). */ .pf-cta-box__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: var(--pf-space-xs) var(--pf-space-lg); border: 2px solid transparent; border-radius: var(--pf-radius-control); font-weight: var(--pf-weight-bold); line-height: 1.2; text-decoration: none; transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition); } /* Primario: el naranja de conversión. El hover se queda en la familia del acento * (`accent-hover` mantiene 4,7:1 con `on-accent`), así que el texto no cambia. */ .pf-cta-box__cta--primary { background: var(--pf-cta-button-bg); color: var(--pf-cta-button-text); } .pf-cta-box__cta--primary:hover, .pf-cta-box__cta--primary:focus-visible { background: var(--pf-cta-button-hover); color: var(--pf-cta-button-text); } /* Secundario: transparente con borde y texto navy; el hover invierte. Sobre el * tono `invert` los dos tokens pasan a `on-ink`. */ .pf-cta-box__cta--secondary { background: transparent; border-color: var(--pf-cta-secondary); color: var(--pf-cta-secondary); } .pf-cta-box__cta--secondary:hover, .pf-cta-box__cta--secondary:focus-visible { background: var(--pf-cta-secondary); color: var(--pf-cta-secondary-hover-text); } .pf-cta-box__cta--ghost { padding-inline: var(--pf-space-xs); background: transparent; color: var(--pf-cta-title); text-decoration: underline; text-underline-offset: 0.2em; } .pf-cta-box__media { flex: 0 0 auto; width: 9rem; aspect-ratio: 3 / 2; border-radius: var(--pf-radius-md); overflow: hidden; } .pf-cta-box__image { display: block; width: 100%; height: 100%; object-fit: cover; } .pf-cta-box__dismiss { position: absolute; top: var(--pf-space-2xs); right: var(--pf-space-2xs); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--pf-radius-pill); background: transparent; color: inherit; font-size: var(--pf-text-lg); line-height: 1; } .pf-cta-box__dismiss:hover, .pf-cta-box__dismiss:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); } /* Formulario embebido: ocupa todo el ancho bajo el texto. */ .pf-cta-box__form { flex-basis: 100%; min-width: 0; } .pf-cta-box--has-form .pf-cta-box__body { flex-basis: 100%; } /* ------------------------------------------------------------------------- * Variante de sección. * ---------------------------------------------------------------------- */ .pf-cta-box--section { padding-inline: var(--pf-gutter); } .pf-cta-box--section .pf-cta-box__inner { max-width: var(--pf-container); margin-inline: auto; padding: var(--pf-space-xl) var(--pf-space-lg); } @media (max-width: 600px) { .pf-cta-box--section .pf-cta-box__inner { padding: var(--pf-space-lg) var(--pf-space-md); } .pf-cta-box__cta { width: 100%; } } /* ------------------------------------------------------------------------- * Variante sticky — columna lateral en escritorio. * ---------------------------------------------------------------------- */ /* Qué cara tiene la variante sticky a este ancho: 0 = caja fija de columna * lateral, 1 = barra inferior. Lo lee `script.js` para elegir el criterio de * fijado, que NO es el mismo en las dos caras (issue #94). Existe para que el * breakpoint se escriba una sola vez y en CSS, que es quien manda sobre la * presentación: si cambia el `@media` de abajo, el JavaScript le sigue solo. */ .pf-cta-box--sticky { --pf-cta-bar: 0; } @media (min-width: 1024px) { .pf-cta-box--sticky { position: sticky; top: var(--pf-cta-offset); } /* Sin sombra: la caja lateral va en flujo y ya tiene su borde de 1 px. La única * sombra de este componente es la de la barra móvil, que sí flota. */ .pf-cta-box--sticky .pf-cta-box__inner { flex-direction: column; align-items: stretch; padding: var(--pf-space-md); } /* El `flex-direction: column` de arriba vuelca el eje principal, así que la * base de 20rem de `__body` deja de medir ancho y mide ALTO: era un suelo de * 320px que, con `flex-grow: 1`, descolgaba el botón al fondo de la caja * (issue #82: 184-261px de hueco en las 22 fichas de servicio). El cuerpo * ocupa lo que ocupe su texto y el `gap` del `__inner` hace el resto. */ .pf-cta-box--sticky .pf-cta-box__body { flex: 0 1 auto; } .pf-cta-box--sticky .pf-cta-box__actions { flex-direction: column; } .pf-cta-box--sticky .pf-cta-box__title { font-size: var(--pf-text-lg); } .pf-cta-box--sticky .pf-cta-box__media { display: none; } } /* ------------------------------------------------------------------------- * Variante sticky — barra inferior en móvil. * ---------------------------------------------------------------------- */ @media (max-width: 1023px) { .pf-cta-box--sticky { --pf-cta-bar: 1; } .pf-cta-box--sticky.is-pinned { position: fixed; inset-inline: 0; bottom: 0; /* Por DEBAJO del velo del menú móvil y del cajón: una llamada a la acción no * debe quedar sobre un diálogo abierto. Medido con el menú abierto, el botón * salía pulsable encima del cajón en 6 de 9 sondeos; no se veía porque hasta * el #94 esta barra no llegaba a fijarse nunca. * * Y tiene que ser MENOR que `--pf-z-header`, no igual: `.pf-header` es * `position: relative` con `z-index: var(--pf-z-header)`, así que es un * contexto de apilado y los 500 del velo y los 1000 del cajón valen solo * dentro de él. Fuera, la cabecera entera compite a 100. A 100 esta barra * empataba y ganaba por orden en el DOM, que es lo que la dejaba encima del * cajón aun estando «por debajo» sobre el papel. */ z-index: calc(var(--pf-z-header) - 1); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--pf-cta-bg); box-shadow: var(--pf-shadow-lg); } .pf-cta-box--sticky.is-pinned .pf-cta-box__inner { flex-wrap: nowrap; gap: var(--pf-space-sm); padding: var(--pf-space-xs) var(--pf-gutter); border-radius: 0; border: 0; } .pf-cta-box--sticky.is-pinned .pf-cta-box__text, .pf-cta-box--sticky.is-pinned .pf-cta-box__media { display: none; } /* El `__inner` de la barra va `nowrap`, así que el título es el que tiene que * ceder ancho cuando el rótulo del botón es largo. Sin `min-width: 0` no baja * de su min-content y el que se sale es el botón. */ .pf-cta-box--sticky.is-pinned .pf-cta-box__body { min-width: 0; } .pf-cta-box--sticky.is-pinned .pf-cta-box__title { margin: 0; font-size: var(--pf-text-sm); } /* El rótulo se parte en varias líneas y la barra crece. NO lleva `nowrap`, y * queda escrito por qué: con `nowrap` un rótulo de 49 caracteres mide 375px en * una barra de 400 y se salía 15px de la ventana (#99); y acotarlo sin dejarlo * partir solo cambia el desbordamiento por un recorte, o sea por una llamada a * la acción que dice «Comienza a disfr…». Una barra más alta se reserva sola, * porque `--pf-sticky-cta-height` la publica el ResizeObserver de script.js. */ .pf-cta-box--sticky.is-pinned .pf-cta-box__cta { min-height: 2.5rem; padding-inline: var(--pf-space-md); font-size: var(--pf-text-sm); } .pf-cta-box--sticky.is-pinned .pf-cta-box__dismiss { position: static; } /* El documento reserva la altura de la barra: no tapa el pie ni el último párrafo. */ body.pf-has-sticky-cta { padding-bottom: var(--pf-sticky-cta-height, 0px); } } /* Al llegar al pie de página la barra se retira. */ .pf-cta-box--sticky.is-released { position: static; }