/* ============================================================================
   inloff — «Cómo funciona la personalización» (página 3625)
   ----------------------------------------------------------------------------
   Capa visual de la página. La estructura vive en el contenido (UX Builder) con
   elementos NATIVOS del constructor, para que se pueda reordenar y editar sin
   tocar código; aquí solo se estiliza por clase.

   Reglas que se respetan a propósito:
   - Mobile-first: todo se escribe para móvil y se amplía en 550px y 850px, los
     dos breakpoints reales de Flatsome.
   - Contraste AA: el heart (#C5A184) NUNCA lleva texto blanco (2,4:1) ni se usa
     como texto sobre crema. Va de fondo con texto navy (6,4:1) o de filete.
   - Los plazos no se escriben aquí ni en el contenido: van con fichas
     ({produccion}, {envio}, {entrega}) que rellena el motor de envíos.

   @see inc/inloff-ux-builder.php (relleno de fichas + elementos del builder)
   @see assets/css/inloff-tokens.css
   ========================================================================= */

/* — Lienzo de la página ---------------------------------------------------- */

.inloff-pag-como-funciona .inloff-cf {
	background: var(--inloff-cream-light);
	color: var(--inloff-ink);
}

/* Alternancia de fondos: bandas cálidas que marcan el ritmo de lectura.
   La alternancia tiene que ser ESTRICTA (sin dos secciones seguidas del mismo
   color) porque es lo único que marca dónde acaba una sección y empieza la
   siguiente: no hay filetes ni cambios de ancho. «¿Y si algo sale mal?» se
   quedó en cream-light como la sección de antes, y las dos se encadenaban sin
   costura: los 144 px de padding de la junta (72 + 72) se leían como un hueco
   por error, no como un cambio de tema. */
.inloff-pag-como-funciona .inloff-cf-hero,
.inloff-pag-como-funciona .inloff-cf-plazos,
.inloff-pag-como-funciona .inloff-cf-garantias,
.inloff-pag-como-funciona .inloff-cf-tecnicas {
	background: var(--inloff-cream-warm);
}

.inloff-pag-como-funciona .inloff-cf-taller,
.inloff-pag-como-funciona .inloff-cf-cierre {
	background: var(--inloff-navy);
	color: var(--inloff-on-navy);
	/* A todo el ancho: dentro del contenedor se leían como cajas azules
	   flotando en una página blanca, no como bandas. Misma técnica que la
	   portada (inloff-home.css). El guard de overflow está más abajo. */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Sin esto, el 100vw de las bandas crea scroll horizontal. */
body.inloff-pag-como-funciona {
	overflow-x: hidden;
}

/* El fondo va a todo el ancho, el contenido no. El contenido de la banda tiene
   que caer EXACTAMENTE en la misma columna que el resto de la página: medido en
   producción a 1440 px, el texto de una sección normal arranca en x=148, y con
   `--inloff-max + 60` (1230) la banda arrancaba en x=98. Cincuenta píxeles de
   escalón que no se ven cuando el contenido de la banda va centrado, y que
   cantan en cuanto va alineado a la izquierda. Con 1160 + 15 de padding a cada
   lado el contenido mide 1130 y las dos columnas coinciden. */
body.inloff-pag-como-funciona .inloff-cf-taller > .section-content,
body.inloff-pag-como-funciona .inloff-cf-cierre > .section-content {
	max-width: calc(var(--inloff-max) - 10px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Flatsome deja 30 px de padding-bottom en la columna que envuelve TODA la
   página. Al final del documento eso es una franja blanca entre la banda navy
   de cierre y el pie: la página no remataba, parecía que se hubiera caído algo
   entre medias. Aquí no separa nada de nada —la última sección ya trae sus
   72 px— así que se retira y las dos bandas de color se tocan. */
body.inloff-pag-como-funciona .row-main > .col {
	padding-bottom: 0;
}

/* Aquí vivía un `padding-bottom: 24px` para la banda del taller. No hacía nada:
   el padding vertical de una sección lo escribe el constructor en un <style> por
   ID (#section_632917744, 1-0-0) y una cadena de clases no le gana. Medido: los
   72 px de arriba y de abajo salen de ahí. Si hay que bajarlo, se baja en el
   campo de esa sección en UX Builder, que además es lo que queremos: que quien
   lleva la tienda pueda tocarlo sin desplegar. */

body.inloff-pag-como-funciona .inloff-cf-tira .col {
	padding-bottom: 0;
}

/* — Tipografía de la página ------------------------------------------------ */

/* Medida de línea única para todo el cuerpo de texto de la página.
   Por qué en `em` y no en `ch`: `ch` mide el glifo «0», que en Outfit es mucho
   más ancho que la letra media del castellano. Sondeado sobre esta misma página
   con un canvas y un párrafo real: el carácter medio pesa 0,42em y el «0»
   0,657em, o sea que 1ch vale 1,56 caracteres de verdad — por eso los topes de
   `70ch` dejaban pasar líneas de 109 caracteres, muy por encima del rango
   editorial de 45-75.
   En `em` la medida escala con el tamaño del propio texto, así que un único
   número sirve para los tres cuerpos de la página: 30em da 570 px a 19 px,
   480 px a 16 px y 450 px a 15 px, y en los tres casos caben ~71 caracteres.
   Si se toca este valor, la página entera se reencuadra a la vez. */
.inloff-pag-como-funciona .inloff-cf {
	--cf-medida: 30em;
}

.inloff-pag-como-funciona .inloff-cf-eyebrow {
	margin: 0 0 10px;
	font-family: var(--inloff-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Bronce y no heart-dark: en texto pequeño sobre crema, el heart se queda
	   en 2,9:1 y no pasa AA (lo cantó Lighthouse). El bronce da 5,2:1. */
	color: var(--inloff-bronze);
}

.inloff-pag-como-funciona .inloff-cf-taller .inloff-cf-eyebrow,
.inloff-pag-como-funciona .inloff-cf-cierre .inloff-cf-eyebrow {
	color: var(--inloff-heart-light);
}

.inloff-pag-como-funciona .inloff-cf-h1 {
	margin: 0 0 16px;
	font-family: var(--inloff-font-serif);
	font-weight: 600;
	font-size: clamp(2rem, 7vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-h2 {
	margin: 0 0 14px;
	font-family: var(--inloff-font-serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 5vw, 2.35rem);
	line-height: 1.15;
	color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-taller .inloff-cf-h2,
.inloff-pag-como-funciona .inloff-cf-cierre .inloff-cf-h2 {
	color: var(--inloff-on-navy);
}

.inloff-pag-como-funciona .inloff-cf-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
	/* Era 62ch = 774 px = 97 caracteres. Ver `--cf-medida`. */
	max-width: var(--cf-medida);
}

.inloff-pag-como-funciona .inloff-cf-sub {
	/* `margin: 0` dejaba el párrafo pegado al borde izquierdo de su caja en
	   cuanto ésta era más ancha que el `max-width`: en el bloque de cierre el
	   titular y el botón salían centrados y la línea del medio 44,6 px a la
	   izquierda. `auto` lo centra en todos los contextos y hace redundante el
	   parche que había más abajo solo para las cabeceras de sección. */
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--inloff-muted-warm);
	/* El paso de 60ch a 41em conservó el ancho en píxeles (656 px), que es
	   justo lo que había que corregir: seguían cabiendo 97 caracteres y el
	   subtítulo del cierre se leía en UNA sola línea de 92. Con la medida
	   común son 480 px y ~71 caracteres. */
	max-width: var(--cf-medida);
}

.inloff-pag-como-funciona .inloff-cf-taller .inloff-cf-sub,
.inloff-pag-como-funciona .inloff-cf-cierre .inloff-cf-sub {
	/* Sobre navy, el gris cálido del subtítulo se queda en 2,1:1. */
	color: var(--inloff-on-navy-soft);
}

/* El centrado de las columnas con ancho máximo vive ahora en
   `inloff-tokens.css` («Compatibilidad con Flatsome»), para las seis páginas
   editoriales a la vez. Aquí quedaba en `.inloff-cf-secthead`, que cuelga del
   `.col` —ya al 100 % de la fila, donde `auto` no reparte nada— y no del
   `.col-inner`, que es el que Flatsome empuja. */

.inloff-pag-como-funciona .inloff-cf-secthead .inloff-cf-sub {
	margin-inline: auto;
}

/* El párrafo de «Dónde se hace» es el único cuerpo de texto de la página que
   no lleva clase: se quedaba sin tope y ocupaba los 760 px de su columna, con
   líneas de 106 caracteres de capacidad. Centrado y a 510 px se lee como el
   resto. `:not([class])` para no cazar al antetítulo, que también es un <p>. */
.inloff-pag-como-funciona .inloff-cf-taller .inloff-cf-secthead p:not([class]) {
	max-width: var(--cf-medida);
	margin-inline: auto;
}

/* El párrafo de cierre llevaba `margin: 0` de la regla de arriba y dejaba el
   botón pegado, a 0 px. El resto de la página deja 22 px entre párrafo y
   botón. */
.inloff-pag-como-funciona .inloff-cf-cierre .inloff-cf-sub {
	margin-bottom: 24px;
}

/* El acordeón va en una columna `large-10` anclada al borde izquierdo de una
   fila de 1160: su centro cae en x=616 y el de la página en x=712. */
.inloff-pag-como-funciona .inloff-cf-faq__col {
	margin-left: auto;
	margin-right: auto;
}

/* Base de párrafo con :where() para que NO gane a las clases de componente:
   sin esto, `.inloff-cf p` (más específico) pisaba el tamaño del número de paso
   y del antetítulo. */
:where(.inloff-pag-como-funciona .inloff-cf) p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
}

:where(.inloff-pag-como-funciona .inloff-cf-taller) p,
:where(.inloff-pag-como-funciona .inloff-cf-cierre) p {
	color: var(--inloff-on-navy-soft);
}

/* Un enlace dentro de un párrafo no se distingue solo por color (WCAG 1.4.1). */
.inloff-pag-como-funciona .inloff-cf p a,
.inloff-pag-como-funciona .inloff-cf li a,
.inloff-pag-como-funciona .inloff-cf dd a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--inloff-bronze-text);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 500;
}

.inloff-pag-como-funciona .inloff-cf p a:hover,
.inloff-pag-como-funciona .inloff-cf li a:hover {
	color: var(--inloff-navy);
	text-decoration-color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-taller p a,
.inloff-pag-como-funciona .inloff-cf-cierre p a {
	text-decoration-color: var(--inloff-heart-light);
}

.inloff-pag-como-funciona .inloff-cf-taller p a:hover,
.inloff-pag-como-funciona .inloff-cf-cierre p a:hover {
	color: var(--inloff-on-navy);
	text-decoration-color: var(--inloff-on-navy);
}

/* Ancla de sección: que el header pegajoso no tape el destino (WCAG 2.4.11). */
.inloff-pag-como-funciona .inloff-cf-anchor {
	display: block;
	height: 0;
	scroll-margin-top: var(--inloff-header-offset, 96px);
}

/* — Portada ---------------------------------------------------------------- */

.inloff-pag-como-funciona .inloff-cf-chips__list {
	list-style: none;
	margin: 20px 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.inloff-pag-como-funciona .inloff-cf-chips__list li {
	margin: 0;
	padding: 7px 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--inloff-navy);
	background: rgba(var(--inloff-heart-rgb), 0.22);
	border: 1px solid var(--inloff-line-heart);
	border-radius: var(--inloff-radius-pill);
}

.inloff-pag-como-funciona .inloff-cf-hero__note p {
	margin: 14px 0 0;
	font-size: 0.9375rem;
	color: var(--inloff-muted-warm);
}

/* — Tarjetas --------------------------------------------------------------- */

.inloff-pag-como-funciona .inloff-cf-card {
	padding: 24px 22px;
	background: var(--inloff-surface);
	border: 1px solid var(--inloff-line-warm);
	border-radius: var(--inloff-radius);
	box-shadow: var(--inloff-shadow-card);
}

.inloff-pag-como-funciona .inloff-cf-card__kicker {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 600;
	/* Mismo tracking que `.inloff-cf-eyebrow`: son el mismo objeto tipográfico
	   (12 px / 600 / versalitas) y en el héroe conviven en la misma pantalla.
	   Con 0,12 frente a 0,14 no se leían como dos estilos, se leían como un
	   descuido. */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inloff-muted-warm);
}

.inloff-pag-como-funciona .inloff-cf-card__foot {
	margin: 14px 0 0;
	font-size: 0.875rem;
	color: var(--inloff-muted-warm);
}

/* Resumen de plazos: pares etiqueta/valor, legibles de un vistazo. */
.inloff-pag-como-funciona .inloff-cf-summary {
	margin: 0;
	display: grid;
	gap: 0;
}

.inloff-pag-como-funciona .inloff-cf-summary > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--inloff-line-warm-soft);
}

.inloff-pag-como-funciona .inloff-cf-summary > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.inloff-pag-como-funciona .inloff-cf-summary dt {
	margin: 0;
	/* Flatsome pone dt/dd en versalitas; aquí estorban: son valores que se leen. */
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--inloff-muted-warm);
}

.inloff-pag-como-funciona .inloff-cf-summary dd {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--inloff-navy);
	text-align: left;
}

@media (min-width: 400px) {
	.inloff-pag-como-funciona .inloff-cf-summary dd {
		text-align: right;
	}
}

/* — La fecha (no el plazo) ------------------------------------------------- */

.inloff-pag-como-funciona .inloff-cf-fecha {
	margin: 0 0 16px;
	padding: 20px 22px;
	background: var(--inloff-navy);
	border-radius: var(--inloff-radius);
	color: var(--inloff-on-navy);
}

.inloff-pag-como-funciona .inloff-cf-fecha__titulo {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 600;
	/* Ver `.inloff-cf-card__kicker`: un solo tracking para las versalitas. */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inloff-heart-light);
}

.inloff-pag-como-funciona .inloff-cf-fecha__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(250, 247, 242, 0.14);
}

.inloff-pag-como-funciona .inloff-cf-fecha__fila:last-of-type {
	border-bottom: 0;
}

.inloff-pag-como-funciona .inloff-cf-fecha__modo {
	font-size: 0.875rem;
	color: var(--inloff-on-navy-soft);
	flex: 1 0 100%;
}

.inloff-pag-como-funciona .inloff-cf-fecha__valor {
	font-size: 1rem;
	color: var(--inloff-on-navy-soft);
}

.inloff-pag-como-funciona .inloff-cf-fecha__valor strong {
	font-weight: 600;
	color: var(--inloff-on-navy);
}

.inloff-pag-como-funciona .inloff-cf-fecha__nota {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--inloff-on-navy-muted);
}

/* El mismo componente en dos sitios con dos fondos. En la portada la ficha de
   fechas es navy, que es donde tiene que cantar; en la sección de plazos vive
   sobre crema y solo cambia de tinta — la GEOMETRÍA de allí la decide entera el
   bloque «banda de datos» del final del fichero, y este bloque no la discute.
   Aquí había además la maquetación vieja (caja clara centrada) que aquél ya
   pisaba entera: era CSS que se cancelaba a sí mismo y se ha ido.
   Lo que no puede irse es el color: sin él, el `.inloff-cf-fecha` base pinta el
   texto en crema —va pensado para la ficha navy— sobre un fondo claro. */
.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha {
	color: var(--inloff-ink);
}

.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__titulo {
	color: var(--inloff-bronze);
}

/* El filete entre las dos fechas lo hereda de la ficha navy (blanco al 14 %) y
   ahí abajo el fondo es claro: invisible. Solo se ve por debajo de 700 px, que
   es donde las dos fechas van apiladas. */
.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__fila {
	border-bottom-color: var(--inloff-line-warm-soft);
}

.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__modo,
.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__valor {
	color: var(--inloff-muted-warm);
}

.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__valor strong {
	color: var(--inloff-navy);
}

/* Aquí había una segunda maquetación de la ficha de fechas a partir de 700 px,
   de cuando era una caja clara centrada. El bloque «banda de datos» del final
   la rehizo entera y dejó ésta muerta… salvo por una regla, que es justo la que
   hacía daño: el divisor entre las dos fechas iba con selector de hermano
   adyacente (0-4-0) y le ganaba al `padding: 0; border: 0` del bloque nuevo
   (0-3-1). Resultado medido entre 700 y 999 px: la segunda fecha, que ahí ya ha
   envuelto a un renglón propio, arrastraba 32 px de sangría y un filete vertical
   colgando de nada — exactamente lo que el bloque nuevo evita esperando a
   1000 px para dibujarlo. Se borra: el único sitio donde se decide cómo se
   compone esta ficha es el bloque del final del fichero.

   La moraleja, por si vuelve a pasar: cuando se rehace un componente, la versión
   vieja hay que quitarla, no taparla. Un selector de hermano sobrevive a
   cualquier `body.` que le pongas delante al nuevo. */

/* — Los pasos -------------------------------------------------------------- */

/* La rejilla de seis pasos respiraba 60 px entre columnas y 30 entre filas: dos
   tiras apretadas en vez de una rejilla. Viene de `row-large`, que reparte
   30 px de padding a cada lado de la columna (60 de calle) pero solo 30 abajo.
   El canal vertical nunca debería ser el estrecho: es el que separa una fila de
   la siguiente, y con la mitad de aire el ojo lee dos bloques en lugar de seis
   piezas iguales. Se iguala a 60.
   El margen negativo devuelve al final de la sección los 60 px de padding que
   cuelgan de la última fila —calle sobrante, no espacio de sección—: así el
   hueco hasta la sección siguiente vuelve a ser los 144 px de la página.
   Hace falta `.row.` en el selector: Flatsome fija `margin-bottom: 0` desde
   `.container .row-large:not(.row-collapse)` (0,3,0) y con dos clases no se le
   gana. Solo a partir de 850 px: por debajo la rejilla es de 2 y de 1 columna,
   y ahí Flatsome ya deja 30/30, que sí está parejo. */
@media (min-width: 850px) {
	body.inloff-pag-como-funciona .row.inloff-cf-pasos__row {
		margin-bottom: -60px;
	}

	body.inloff-pag-como-funciona .row.inloff-cf-pasos__row > .col {
		padding-bottom: 60px;
	}
}

.inloff-pag-como-funciona .inloff-cf-paso > .col-inner {
	height: 100%;
	padding: 26px 24px 28px;
	background: var(--inloff-surface);
	border: 1px solid var(--inloff-line-warm);
	border-radius: var(--inloff-radius);
	box-shadow: var(--inloff-shadow-card);
	transition: transform var(--inloff-dur-fast) var(--inloff-ease-out, ease),
		box-shadow var(--inloff-dur-fast) var(--inloff-ease-out, ease);
}

.inloff-pag-como-funciona .inloff-cf-paso:hover > .col-inner {
	transform: translateY(-2px);
	box-shadow: var(--inloff-shadow);
}

.inloff-pag-como-funciona .inloff-cf-paso__num {
	margin: 0 0 10px;
	font-family: var(--inloff-font-serif);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
	color: var(--inloff-heart-dark);
}

.inloff-pag-como-funciona .inloff-cf-paso__title {
	margin: 0 0 10px;
	font-family: var(--inloff-font-sans);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-paso p:not([class]) {
	margin: 0;
	font-size: 1rem;
}

/* La última tarjeta es la llamada a la acción: mismo tamaño, otro peso. */
.inloff-pag-como-funciona .inloff-cf-paso--cta > .col-inner {
	background: var(--inloff-cream);
	border-color: var(--inloff-line-heart);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* — Plazos ----------------------------------------------------------------- */

.inloff-pag-como-funciona .inloff-cf-plazo > .col-inner {
	height: 100%;
	padding: 26px 24px;
	background: var(--inloff-surface);
	border: 1px solid var(--inloff-line-warm);
	border-radius: var(--inloff-radius);
	box-shadow: var(--inloff-shadow-card);
}

.inloff-pag-como-funciona .inloff-cf-plazo--prime > .col-inner {
	background: var(--inloff-navy);
	border-color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-plazo__title {
	margin: 0 0 14px;
	font-family: var(--inloff-font-serif);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-plazo--prime .inloff-cf-plazo__title {
	color: var(--inloff-on-navy);
}

.inloff-pag-como-funciona .inloff-cf-plazo--prime .inloff-cf-summary > div {
	border-bottom-color: rgba(250, 247, 242, 0.16);
}

.inloff-pag-como-funciona .inloff-cf-plazo--prime .inloff-cf-summary dt {
	color: var(--inloff-on-navy-soft);
}

.inloff-pag-como-funciona .inloff-cf-plazo--prime .inloff-cf-summary dd {
	color: var(--inloff-on-navy);
}

/* Las tres notas de cierre de sección son el mismo objeto y tienen que
   comportarse igual. Iban en caja centrada pero con el texto a bandera
   izquierda en dos de las tres: como la caja arranca en x=367 y el resto de la
   sección en x=147, ese texto abría un segundo raíl de lectura y se leía como
   una sangría perdida. Las cabeceras de sección de esta página van centradas,
   así que la nota se centra también: es una coda, no una columna de texto.
   `balance` para que las líneas queden parejas y el centrado parezca decidido
   y no un resto de justificación. */
.inloff-pag-como-funciona .inloff-cf-plazos__nota p,
.inloff-pag-como-funciona .inloff-cf-garantias__nota p,
.inloff-pag-como-funciona .inloff-cf-faq__mas p {
	margin: 24px auto 0;
	/* Era 70ch = 690 px = 109 caracteres de capacidad. Ver `--cf-medida`. */
	max-width: var(--cf-medida);
	font-size: 0.9375rem;
	color: var(--inloff-muted-warm);
	text-align: center;
	text-wrap: balance;
}

/* — Listas de repaso y de enlaces ------------------------------------------ */

.inloff-pag-como-funciona .inloff-cf-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.inloff-pag-como-funciona .inloff-cf-checklist li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--inloff-ink-soft);
}

.inloff-pag-como-funciona .inloff-cf-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--inloff-heart);
}

.inloff-pag-como-funciona .inloff-cf-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.inloff-pag-como-funciona .inloff-cf-links li {
	margin: 0;
	border-bottom: 1px solid var(--inloff-line-warm-soft);
}

.inloff-pag-como-funciona .inloff-cf-links li:last-child {
	border-bottom: 0;
}

.inloff-pag-como-funciona .inloff-cf-links a {
	display: block;
	padding: 13px 2px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--inloff-navy);
	text-decoration: none;
}

.inloff-pag-como-funciona .inloff-cf-links a::after {
	content: "›";
	float: right;
	color: var(--inloff-bronze-text);
}

.inloff-pag-como-funciona .inloff-cf-links a:hover {
	color: var(--inloff-bronze-text);
}

/* — Garantías -------------------------------------------------------------- */

/* Eran las únicas tarjetas de la página que no se leían como tarjetas: mismo
   color que el fondo de su sección y filete heart a 1,22:1 contra él, o sea
   tres columnas de texto con un contorno fantasma. Con la sección ya en
   cream-warm (ver la alternancia de arriba), pasan al patrón que usan las otras
   tres familias de tarjeta —blanco, filete beige y sombra de tinta— y se
   separan del fondo por superficie, no por borde. */
.inloff-pag-como-funciona .inloff-cf-garantia > .col-inner {
	height: 100%;
	padding: 24px 22px;
	background: var(--inloff-surface);
	border: 1px solid var(--inloff-line-warm);
	border-radius: var(--inloff-radius);
	box-shadow: var(--inloff-shadow-card);
}

.inloff-pag-como-funciona .inloff-cf-garantia__title {
	margin: 0 0 10px;
	font-family: var(--inloff-font-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-garantia p:not([class]) {
	margin: 0;
	font-size: 0.9375rem;
}

/* — Tira de oficio (dentro de la banda navy del taller) -------------------- */

.inloff-pag-como-funciona .inloff-cf-tira {
	margin-top: 8px;
}

.inloff-pag-como-funciona .inloff-cf-tira__item > .col-inner {
	height: 100%;
	padding: 18px 12px;
	border-top: 1px solid rgba(250, 247, 242, 0.18);
}

.inloff-pag-como-funciona .inloff-cf-tira__title {
	margin: 0 0 4px;
	font-family: var(--inloff-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--inloff-on-navy);
}

.inloff-pag-como-funciona .inloff-cf-taller .inloff-cf-tira__sub {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--inloff-on-navy-muted);
}

/* — Botones ---------------------------------------------------------------- */

.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta,
.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta:hover {
	margin: 0;
	background-color: var(--inloff-navy);
	border-color: var(--inloff-navy);
	color: var(--inloff-on-navy);
	font-family: var(--inloff-font-sans);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	box-shadow: none;
}

.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta:hover {
	background-color: var(--inloff-navy-deep);
	border-color: var(--inloff-navy-deep);
	transform: translateY(-1px);
}

/* En banda navy el botón se invierte: crema con texto navy. */
.inloff-pag-como-funciona .inloff-cf-cierre .button.inloff-cf-cta,
.inloff-pag-como-funciona .inloff-cf-cierre .button.inloff-cf-cta:hover {
	background-color: var(--inloff-heart);
	border-color: var(--inloff-heart);
	color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf-cierre .button.inloff-cf-cta:hover {
	background-color: var(--inloff-heart-light);
	border-color: var(--inloff-heart-light);
}

.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta--sec,
.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta--sec:hover {
	background-color: transparent;
	border: 2px solid var(--inloff-navy);
	color: var(--inloff-navy);
}

.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta--sec:hover {
	background-color: rgba(var(--inloff-navy-rgb), 0.06);
}

.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 3px;
}

/* Sobre crema el anillo bronce va sobrado (5,5:1), pero el `outline-offset`
   hace que en las bandas caiga sobre el navy, y ahí se queda en 2,56:1: por
   debajo del 3:1 que pide WCAG 1.4.11 para un indicador de foco. Quien navega
   con teclado no vería dónde está. En crema da 14,2:1 contra la banda. */
.inloff-pag-como-funciona .inloff-cf-taller .button.inloff-cf-cta:focus-visible,
.inloff-pag-como-funciona .inloff-cf-cierre .button.inloff-cf-cta:focus-visible {
	outline-color: var(--inloff-on-navy);
}

/* — Acordeón --------------------------------------------------------------- */

.inloff-pag-como-funciona .inloff-cf-accordion .accordion-item {
	border-bottom: 1px solid var(--inloff-line-warm);
}

.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title {
	padding: 18px 44px 18px 4px;
	font-family: var(--inloff-font-sans);
	/* Pregunta y respuesta iban a 17 y 16 px: solo el peso las separaba, y era
	   el salto más plano de la página. A 20 px la relación es 1,25 exacta, que
	   es donde el ojo distingue dos niveles sin tener que fijarse. */
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inloff-navy);
	border: 0;
	background: transparent;
}

/* El estado abierto y el hover llevaban heart-dark: 3,2:1 sobre la crema.
   Como solo aparece al abrir o al pasar por encima, un barrido de contraste con
   todo plegado no lo ve. Bronce legible. */
.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title:hover,
.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title.active {
	color: var(--inloff-bronze-text);
	background: transparent;
}

/* Flatsome ancla el icono a la izquierda y se comía la primera letra. En una
   FAQ la convención es a la derecha, y así el título empieza donde debe. */
.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title .toggle {
	left: auto;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	opacity: 1;
	color: var(--inloff-bronze-text);
}

.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title.active .toggle {
	transform: translateY(-50%) rotate(-180deg);
}

.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 2px;
}

.inloff-pag-como-funciona .inloff-cf-accordion .accordion-inner {
	padding: 0 4px 20px;
}

.inloff-pag-como-funciona .inloff-cf-accordion .accordion-inner p {
	margin: 0;
	font-size: 1rem;
	/* Era 70ch = 736 px = 104 caracteres de capacidad. Ver `--cf-medida`. */
	max-width: var(--cf-medida);
}

/* — Barra pegajosa de móvil ------------------------------------------------ */

.inloff-pag-como-funciona .inloff-cf-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	margin: 0;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(253, 251, 247, 0.96);
	backdrop-filter: blur(6px);
	border-top: 1px solid var(--inloff-line-warm);
}

.inloff-pag-como-funciona .inloff-cf-sticky__btn {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 14px 20px;
	font-family: var(--inloff-font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	color: var(--inloff-on-navy);
	background: var(--inloff-navy);
	border-radius: var(--inloff-radius-pill);
}

.inloff-pag-como-funciona .inloff-cf-sticky__btn:hover,
.inloff-pag-como-funciona .inloff-cf-sticky__btn:focus {
	color: var(--inloff-on-navy);
	background: var(--inloff-navy-deep);
}

.inloff-pag-como-funciona .inloff-cf-sticky__btn:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 2px;
}

/* Todo lo que sigue va donde vive la barra fija: Flatsome la enseña con
   `show-for-medium`, que se apaga exactamente en 850 px. El relevo es limpio
   —a 849 manda la barra, a 850 mandan los botones en flujo— así que el corte de
   estas reglas tiene que ser el mismo o se quedaría un tramo sin CTA o con dos. */
@media (max-width: 849px) {
	/* Los cuatro CTA de la página se quedaban en 38-40 px de alto justo en el
	   dispositivo donde se tocan con el dedo. El mínimo de WCAG 2.5.8 es 44 y la
	   propia barra de esta página ya usa 48: se iguala a 48. `inline-flex` para
	   recentrar el texto, que con `min-height` sobre un `inline-block` se
	   quedaría arriba. */
	.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
	}

	/* La barra repetía el CTA del héroe con el mismo texto y el mismo destino a
	   8 px de distancia: dos botones idénticos separados por un filete. Gana la
	   barra, que está siempre a la vista; el del héroe se retira.
	   Las dos clases del botón en el selector no son adorno: con
	   `.inloff-cf .button.inloff-cf-cta--hero` empataría en especificidad con la
	   regla de tamaño de toque de aquí arriba, que también fija `display`, y
	   ganaría la última escrita. Así el orden dentro del bloque deja de importar.
	   Esto no arregla el CTA final, que sigue conviviendo con la barra aunque ya
	   no pegado: eso pide un IntersectionObserver (ver `pendiente`). */
	.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta.inloff-cf-cta--hero {
		display: none;
	}

	/* La reserva para que la barra no tape el final de la página estaba en
	   `#main`, que es blanco: abría 114 px de franja blanca entre la banda navy
	   de cierre y el pie crema, y la página no remataba. La reserva se mueve al
	   final real del documento —donde la barra tapa de verdad— y se pinta del
	   navy profundo del último tramo del pie, para que sea su continuación y no
	   un hueco. */
	.inloff-pag-como-funciona #main {
		padding-bottom: 0;
	}

	/* `#footer.footer-wrapper` en inloff-footer.css (1,1,0) le gana a cualquier
	   selector de clase: hay que repetir el id para poder ampliarlo. */
	body.inloff-pag-como-funciona #footer.footer-wrapper {
		padding-bottom: 84px;
		background: var(--inloff-navy-deep);
	}
}

/* — Ampliaciones ----------------------------------------------------------- */

@media (min-width: 550px) {
	.inloff-pag-como-funciona .inloff-cf-summary dt,
	.inloff-pag-como-funciona .inloff-cf-summary dd {
		font-size: 1rem;
	}

	.inloff-pag-como-funciona .inloff-cf-card,
	.inloff-pag-como-funciona .inloff-cf-paso > .col-inner,
	.inloff-pag-como-funciona .inloff-cf-plazo > .col-inner {
		padding: 30px 28px;
	}

	/* La ficha de fechas del héroe se quedó fuera de la regla de arriba y sus
	   22 px de padding no cuadraban con los 28+1 de borde de la tarjeta que
	   tiene justo debajo: el texto de una empezaba 7 px antes que el de la otra,
	   con las dos apiladas y alineadas al mismo eje. 29 = 28 de padding + 1 del
	   filete de la vecina. */
	.inloff-pag-como-funciona .inloff-cf-hero .inloff-cf-fecha {
		padding: 24px 29px;
	}
}

@media (min-width: 850px) {
	.inloff-pag-como-funciona .inloff-cf-lead {
		font-size: 1.1875rem;
	}

	:where(.inloff-pag-como-funciona .inloff-cf) p {
		font-size: 1.0625rem;
	}

	.inloff-pag-como-funciona .inloff-cf-paso__num {
		font-size: 2.5rem;
	}
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.inloff-pag-como-funciona .inloff-cf-paso > .col-inner,
	.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta {
		transition: none;
	}

	.inloff-pag-como-funciona .inloff-cf-paso:hover > .col-inner,
	.inloff-pag-como-funciona .inloff-cf .button.inloff-cf-cta:hover {
		transform: none;
	}
}

/* ============================================================================
   «Si haces tu pedido hoy»: banda de datos, no una tercera tarjeta (2026-09-18)
   ----------------------------------------------------------------------------
   El bloque de [inloff_fecha_entrega] se pintaba como caja clara de 760px
   centrada encima de una fila de 1170px: desalineada con las dos tarjetas de
   abajo y, al ser caja con filete y radio, se leía como una tarjeta de
   modalidad de envío a medio hacer. Aquí deja de ser caja y pasa a banda de
   datos al ancho de la fila, con filete arriba y abajo y el título en línea:
   otro género de objeto que «Estándar» o «Inloff Prime».
   ========================================================================= */

body.inloff-pag-como-funciona .inloff-cf-plazos__fecha > .col-inner {
	max-width: none;
}

body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha {
	margin: 0 0 4px;
	padding: 20px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--inloff-line-heart);
	border-bottom: 1px solid var(--inloff-line-heart);
	border-radius: 0;
	box-shadow: none;
	text-align: left;
}

body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__titulo {
	text-align: left;
}

body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__fila {
	justify-content: flex-start;
}

@media (min-width: 700px) {
	body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: flex-start;
		gap: 8px 32px;
	}

	body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__titulo {
		flex: 0 0 auto;
		margin: 0;
		text-align: left;
	}

	body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__fila {
		flex: 0 1 auto;
		flex-direction: row;
		align-items: baseline;
		gap: 0 8px;
		padding: 0;
		border: 0;
	}

	body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__modo {
		flex: 0 0 auto;
	}
}

/* El divisor entre las dos fechas solo cuando seguro que caben en una línea:
   por debajo envuelven y un filete lateral suelto quedaría colgando. */
@media (min-width: 1000px) {
	body.inloff-pag-como-funciona .inloff-cf-plazos .inloff-cf-fecha__fila + .inloff-cf-fecha__fila {
		padding-left: 32px;
		border-left: 1px solid var(--inloff-line-warm);
	}
}

/* ---------------------------------------------------------------------------
 * Aire entre el párrafo y su botón
 *
 * Las reglas de arriba ponen `margin: 0` a los párrafos de los pasos y a los
 * botones, y solo recuperan el hueco en el héroe. Resultado: en la tarjeta
 * «¿Empezamos?» el botón salía pegado al texto, a 0 px, mientras el resto de
 * la página deja 22-24 en la misma relación. Se lee como un fallo de montaje.
 * ------------------------------------------------------------------------- */
.inloff-pag-como-funciona .inloff-cf-paso--cta p:not([class]) {
	margin-bottom: 22px;
}

/* ============================================================================
   EL HILO DEL PROCESO — el movimiento propio de esta página (2026-09-19)
   ----------------------------------------------------------------------------
   La capa común (`inloff-movimiento.css`) ya hace entrar cada columna desde
   abajo, escalonada. Eso da el ritmo, pero es lo mismo que pasa en las otras
   cinco páginas editoriales: cajas que aparecen en orden. Aquí faltaba lo único
   que esta página cuenta y las demás no — que hay un CAMINO, y que se recorre.

   Así que el hilo: una línea de cobre de 1 px que vive en la calle ENTRE dos
   tarjetas, a la altura del número, y que se traza —de la 1 a la 2, de la 2 a
   la 3— justo después de que aterrice la tarjeta de la que sale. Como el
   escalonado de la capa común ya va por orden de lectura, el proceso se monta
   delante de quien lo lee y el último tramo entra en «¿Empezamos?»: el camino
   termina, literalmente, en el botón.

   Cuatro decisiones y su porqué:

   1. Va en el `::after` de `.col-inner`, no en marcado nuevo. El contenido de
      esta página vive en el constructor visual y es del propietario; aquí no se
      añade una pieza que él tendría que mantener. Se dibuja sobre lo que hay.

   2. El retraso se HEREDA, no se escribe. `--inloff-mov-retraso` es lo que la
      capa común pone en cada columna según su posición en la fila; sumarle el
      tiempo de la entrada mantiene cada tramo enganchado a su tarjeta aunque
      mañana se añada o se quite un paso desde el constructor.

   3. La posición del hilo está MEDIDA en producción, no estimada: el centro del
      número cae a 51 px del borde de la tarjeta a 1440 (padding 30 + media caja
      de 2,5rem), a 49 px a 800 y a 45 px a 390 (padding 26 + media caja de
      2,25rem). La calle entre tarjetas mide 60 px a partir de 850 y 30 por
      debajo — de ahí los dos largos.

   4. Qué tramo NO se dibuja lo decide la rejilla, con `:nth-of-type` y no
      `:nth-child`: Flatsome cuela etiquetas `<style>` sueltas entre las columnas
      de una fila y con `:nth-child` un hilo acabaría colgando de la nada al
      final de un renglón. A 3 columnas sobran los múltiplos de 3; a 2, los
      pares; a 1, solo el último.

   Sin `html.js-mov` (el script no llegó) el hilo sale ya trazado: es una línea
   decorativa, nunca un contenido que dependa de que algo cargue.
   ========================================================================= */

.inloff-pag-como-funciona .inloff-cf-pasos__row {
	/* Cobre casi pleno: a menos opacidad la línea se rompe en las pantallas sin
	   retina y parece un artefacto de compresión, no un trazo. */
	--cf-hilo-color: rgba(var(--inloff-heart-rgb), 0.9);
	--cf-hilo-y: 45px;
	--cf-hilo-largo: 32px; /* calle de 30 + los dos filetes que tiene que tocar */
}

/* Móvil: una sola columna, así que el hilo BAJA por el costado izquierdo, a
   plomo con el número del paso siguiente. */
.inloff-pag-como-funciona .inloff-cf-paso > .col-inner::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 24px; /* = padding interior de la tarjeta: cae sobre el eje del número */
	width: 1px;
	height: var(--cf-hilo-largo);
	background: var(--cf-hilo-color);
	transform-origin: center top;
	transition: transform 520ms var(--inloff-mov-decidida, cubic-bezier(0.16, 1, 0.3, 1));
	/* Primero aterriza la tarjeta (720 ms de entrada), y cuando ya está puesta
	   sale el hilo hacia la siguiente. Al revés —hilo y tarjeta a la vez— no se
	   lee como un recorrido, se lee como ruido. */
	transition-delay: calc(var(--inloff-mov-retraso, 0ms) + 300ms);
	pointer-events: none;
}

/* El último paso no lleva a ninguna parte. */
.inloff-pag-como-funciona .inloff-cf-paso:last-of-type > .col-inner::after {
	content: none;
}

html.js-mov body.inloff-pag-como-funciona .inloff-cf-paso > .col-inner::after {
	transform: scaleY(0);
}

html.js-mov body.inloff-pag-como-funciona .inloff-cf-paso.esta-dentro > .col-inner::after {
	transform: scaleY(1);
}

@media (min-width: 550px) {
	.inloff-pag-como-funciona .inloff-cf-pasos__row {
		--cf-hilo-y: 49px;
	}

	/* De dos columnas en adelante el hilo es horizontal: cruza la calle a la
	   altura del número y entra en la tarjeta de al lado. */
	.inloff-pag-como-funciona .inloff-cf-paso > .col-inner::after {
		top: var(--cf-hilo-y);
		left: 100%;
		width: var(--cf-hilo-largo);
		height: 1px;
		transform-origin: left center;
	}

	html.js-mov body.inloff-pag-como-funciona .inloff-cf-paso > .col-inner::after {
		transform: scaleX(0);
	}

	html.js-mov body.inloff-pag-como-funciona .inloff-cf-paso.esta-dentro > .col-inner::after {
		transform: scaleX(1);
	}
}

/* Dos columnas (`medium-6`): salta de renglón en las pares.
   El tope de 849 no es adorno: sin él, esta regla —más específica que la de
   abajo por llevar `:nth-of-type`— seguiría apagando el hilo de las tarjetas 2
   y 4 cuando la rejilla ya es de tres. Las media queries no dan especificidad. */
@media (min-width: 550px) and (max-width: 849px) {
	.inloff-pag-como-funciona .inloff-cf-paso:nth-of-type(2n) > .col-inner::after {
		content: none;
	}
}

/* Tres columnas (`large-4`): salta de renglón en los múltiplos de 3. */
@media (min-width: 850px) {
	.inloff-pag-como-funciona .inloff-cf-pasos__row {
		--cf-hilo-y: 51px;
		--cf-hilo-largo: 62px; /* calle de 60 + los dos filetes */
	}

	.inloff-pag-como-funciona .inloff-cf-paso:nth-of-type(3n) > .col-inner::after {
		content: none;
	}
}

/* ============================================================================
   EL ACORDEÓN DE LA FAQ: SE QUEDA COMO ESTÁ, Y ES A PROPÓSITO (2026-09-19)
   ----------------------------------------------------------------------------
   Hubo aquí una reescritura para que el panel abriera con `grid-template-rows`
   de `0fr` a `1fr` y las curvas de la casa, en vez de con el `slideDown` de
   jQuery que trae Flatsome. Se retiró antes de desplegarla, por dos motivos.

   El primero es el riesgo. Necesitaba `transition-behavior: allow-discrete`
   para poder animar saliendo de `display: none`, y desactivaba a `!important`
   la animación de jQuery que hoy funciona. Se probó a fondo en Chrome y
   aguantaba todo, pero el `@supports` se cumple también en Safari y en Firefox,
   donde no se pudo probar — y el modo de fallo era el peor posible: si la pista
   `1fr` no resuelve a la altura del contenido, las siete respuestas de la FAQ
   abren a cero píxeles. Contenido perdido, sin error, en una página comercial.
   Doscientos milisegundos de suavidad en un desplegable no valen eso.

   El segundo es de coherencia, y es el que de verdad zanja el asunto: el sitio
   tiene CINCO acordeones (aquí, en tipos de personalización, en el taller, en
   sostenibilidad y en la tarjeta regalo). Cambiar uno solo para que «no vaya
   por libre» conseguía exactamente lo contrario: dejarlo siendo el distinto de
   los cinco. Si algún día se toca, se tocan los cinco a la vez, con los cinco
   probados en Safari y Firefox, y eso es un trabajo aparte.

   Lo que sí queda de aquella tanda es lo de debajo: el giro del icono y el
   color del titular, que acompañan al desplegable sin sustituirlo.
   ========================================================================= */

/* El icono giraba 180° de un fotograma a otro mientras el panel se abría en
   280: el remate llegaba antes que el gesto. */
.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title .toggle {
	transition: transform 320ms var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title {
	transition: color var(--inloff-mov-respuesta, 180ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* La lista de enlaces de «Técnicas» es el otro sitio de la página donde se va
   hacia delante: la flecha avanza 3 px con el puntero, lo justo para que la
   mano note que ese renglón lleva a algún lado. */
.inloff-pag-como-funciona .inloff-cf-links a {
	transition: color var(--inloff-mov-respuesta, 180ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-como-funciona .inloff-cf-links a::after {
	transition: transform var(--inloff-mov-respuesta, 180ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-como-funciona .inloff-cf-links a:hover::after,
.inloff-pag-como-funciona .inloff-cf-links a:focus-visible::after {
	transform: translate3d(3px, 0, 0);
}

/* Y de paso, el color de ese hover, que llevaba tiempo muerto sin que se viera:
   la regla de enlaces dentro de texto de más arriba —`.inloff-cf li a:hover`,
   que puntúa (0,3,2)— le gana por un elemento a la de esta lista
   —`.inloff-cf-links a:hover`, (0,3,1)— y le devolvía el navy. Medido con el
   puntero encima en producción: color computado rgb(27, 37, 64), es decir,
   ningún cambio. Con `li` por delante empatan en especificidad y manda ésta por
   ir después. */
.inloff-pag-como-funciona .inloff-cf-links li a:hover,
.inloff-pag-como-funciona .inloff-cf-links li a:focus-visible {
	color: var(--inloff-bronze-text);
}

/* Quieto: el hilo aparece trazado, el panel abre y cierra sin transición y la
   flecha no se mueve. Nada queda a medias ni invisible. */
@media (prefers-reduced-motion: reduce) {
	html.js-mov body.inloff-pag-como-funciona .inloff-cf-paso > .col-inner::after,
	html.js-mov body.inloff-pag-como-funciona .inloff-cf-paso.esta-dentro > .col-inner::after {
		transform: none;
		transition: none;
	}

	.inloff-pag-como-funciona .inloff-cf-accordion .accordion-inner,
	.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title.active + .accordion-inner,
	.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title,
	.inloff-pag-como-funciona .inloff-cf-accordion .accordion-title .toggle,
	.inloff-pag-como-funciona .inloff-cf-links a,
	.inloff-pag-como-funciona .inloff-cf-links a::after {
		transition: none;
	}

	.inloff-pag-como-funciona .inloff-cf-links a:hover::after,
	.inloff-pag-como-funciona .inloff-cf-links a:focus-visible::after {
		transform: none;
	}
}