/**
* Step.css — port del `StepBox` / `Step` / `Card` de
* `mx-cms/src/sections/generic-sections/Steps/styles.ts`.
*
* Casi todos los valores que el legacy calculaba con
* `getStyleValues(isSmallCard, …)` llegan acá como custom properties que setea
* `Steps`: `--card-max`, `--step-card-padding`, `--step-card-mb`,
* `--step-title-height`, `--step-number-display`, y los dos de los conectores.
* Ver el comentario largo en `Steps.jsx` para el por qué.
*
* Breakpoint del cambio de eje: `media.up('6xl')` = **1280px**.
*/
/* Paridad de render de texto con el legacy: el sitio viejo setea
* -webkit-font-smoothing: antialiased global, que en macOS renderiza la
* tipografía más liviana. Los Code Components viven en shadow roots aislados,
* así que hay que declararlo por componente en :host para que herede al shadow
* tree — la propiedad NO cruza el límite.
*
* ⚠️ NO agregar `display: block` acá. Este paso adopta el contrato --card-*, y
* con el host en `display: contents` (el default de Webflow) el flex item es la
* raíz del paso, donde vive el `flex-basis`. Con `display: block` el flex item
* pasa a ser el host y el contrato queda inerte. El audit lo verifica.
* Ver components/QUIRKS_SWEEP.md, hallazgo 1. */
:host {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.step {
font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
display: flex;
box-sizing: border-box;
/* Contrato --card-*. Los defaults son los de card grande, así que standalone
se ve como en el sitio actual. */
flex-grow: var(--card-grow, 1);
flex-shrink: var(--card-shrink, 1);
flex-basis: var(--card-basis, auto);
max-width: var(--card-max, 307px);
min-width: 0;
/* En modo columna `Steps` pasa `--step-width: 100%` para que todos los pasos
midan lo mismo y el tramo vertical de línea no zigzaguee; desde 1280 lo
vuelve a `auto` y manda el flex de la fila. El `max-width` de arriba lo
acota igual. Ver el comentario en `Steps.css`. */
width: var(--step-width, auto);
/* media.up('6xl') = 1280px — el conector pasa de vertical a horizontal, así que
el paso deja de ser fila y se vuelve columna. */
@media (min-width: 1280px) {
flex-direction: column;
}
/* Step: el conector. Vertical hasta 1280px, horizontal desde ahí. */
.rail {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 24px;
@media (min-width: 1280px) {
flex-direction: row;
margin-right: 0;
margin-bottom: 40px;
height: 40px;
}
}
/* Los dos tramos de línea. El color por default es el verde; el padre lo pisa a
`transparent` en el primero y el último paso vía --step-dash-first/-last, que
es cómo se resuelve "soy el primero" sin que el hijo sepa su índice. */
.dash {
width: 2px;
background-color: #8edb00; /* primary[40] */
@media (min-width: 1280px) {
width: 100%;
height: 2px;
}
}
/* El legacy: `.first-dash { height: 60% }` y `.last-dash { height: 100% }`.
La asimetría es real: el tramo de arriba es más corto. */
.dash-first {
height: 60%;
background-color: var(--step-dash-first, #8edb00);
@media (min-width: 1280px) {
height: 2px;
}
}
.dash-last {
height: 100%;
background-color: var(--step-dash-last, #8edb00);
@media (min-width: 1280px) {
height: 2px;
}
}
.dot {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #8edb00; /* primary[40] */
min-width: 40px;
min-height: 40px;
flex: 0 0 auto;
}
/* Typography variant="bodyLgBold" color="neutral.90"
body.lg = 18px · ls xs 0.3 · lh lg 26px · bold 700 */
.number {
display: var(--step-number-display, inline);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.3px;
line-height: 26px;
color: #292929; /* neutral[90] */
}
/* Card */
.card {
display: flex;
flex-direction: column;
flex-grow: 1;
box-sizing: border-box;
padding: var(--step-card-padding, 24px);
margin-bottom: var(--step-card-mb, 56px);
/* La separación entre pasos de la fila: media a cada lado de cada card, no
como `gap` del contenedor.
Con gap, la línea quedaba cortada en cada borde de paso, porque el tramo
de línea es parte del paso. Con el margen repartido simétrico, los pasos
quedan pegados —línea continua—, todas las cards miden lo mismo y el punto
queda centrado sobre su card. Ver el comentario en `Steps.css`. */
margin-inline: var(--step-card-mx, 0px);
border-radius: 24px;
background-color: #ffffff; /* neutral[0] */
box-shadow: 0px 28px 64px rgba(31, 45, 39, 0.16); /* shadow.lg */
color: #292929; /* la card es blanca en todo fondo */
}
/* El legacy lo tinta con `card.iconColor ?? primary[40]`; sobre un ![]()
eso no
se puede replicar, así que el SVG tiene que venir ya del color correcto.
⚠️ El legacy solo renderiza el icono con cards GRANDES
(`!isSmallCard ? getIconComponent(...) : null`). Se replica, así que estos
24px son en la práctica los de la card grande — con card chica el icono no
se renderiza (ver `--step-icon-display` abajo).
⚠️ 24px es una divergencia deliberada del legacy, a pedido: ahí era
`GlobalIcons size="medium"` = 32px. */
.icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
object-fit: contain;
}
/* El cuerpo de la card.
Hasta acá `.body` no declaraba tamaño, así que el texto PLANO heredaba el del
sitio — 14px/20px medido en staging — mientras que el mismo texto cargado
como RichText salía a 18px, porque a ese sí lo estila `./richText.js`. O sea
que el tamaño dependía de en cuál de los dos campos estuviera escrito.
Estos valores son los mismos que usa `./richText.js` para el rich text, así
que ahora los dos caminos coinciden. Los publica `Steps` por variante. */
.body {
font-size: var(--step-body-size, 18px);
line-height: var(--step-body-lh, 26px);
/* Con card grande hereda el color de la card (#292929); con card chica
`Steps` lo baja a #52605a. Es el mismo valor que `./richText.js` ya le
daba al rich text, así que el texto plano y el formateado coinciden. */
color: var(--step-body-color, inherit);
}
}
/* Typography variant="bodyXlBold" marginTop="32px" marginBottom="12px"
color="neutral.100" — el HEADING_3 de `cardsOptions`.
body.xl = 20px · ls sm 0.5 · lh xl 28px · bold 700
Con card chica es `bodyMdMedium` 16/500 y sin márgenes.
* ────────────────────────────────────────────────────────────────────────────
* ⚠️ POR QUÉ ESTO VA POR VARIABLES Y NO POR UN SELECTOR DE ANCESTRO
*
* Lo natural sería escribir:
*
* [data-card-size='small'] .step .title { font-size: 16px }
*
* y NO funciona. El atributo `data-card-size` está en el `` de `Steps`,
* que vive en el shadow root del PADRE; `.title` vive en el shadow root de este
* componente. Un selector no puede cruzar el límite hacia arriba para matchear un
* ancestro que está en otro shadow tree.
*
* Los custom properties SÍ cruzan, porque heredan. Es la misma razón por la que
* el contrato `--card-*` existe. Así que la sección publica cada valor que cambia
* entre variantes y acá se adoptan.
*
* (El único lugar donde `[data-card-size]` sí sirve es la hoja a nivel documento
* de `./richText.js`, porque ahí el atributo está estampado en el HOST de `Steps`
* y el rich text slotteado es su descendiente en el LIGHT DOM.)
* ──────────────────────────────────────────────────────────────────────────── */
.step .title {
margin: var(--step-title-margin, 32px 0 12px);
font-size: var(--step-title-size, 20px);
font-weight: var(--step-title-weight, 700);
letter-spacing: var(--step-title-ls, 0.5px);
line-height: var(--step-title-lh, 28px);
color: #292929; /* neutral[100] */
height: var(--step-title-height, auto);
}
/* Con card chica el legacy no renderiza el icono
(`!isSmallCard ? getIconComponent(...) : null`). La sección lo apaga. */
.step .icon {
display: var(--step-icon-display, block);
}
/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
adentro del shadow root, así que cada componente declara el suyo. */
.step,
.step *,
.step *::before,
.step *::after {
box-sizing: border-box;
}