/* ============================================================================
   inloff — «Tipos de personalización» (página 3626)
   ----------------------------------------------------------------------------
   Capa visual de la página. La estructura vive en el contenido (UX Builder) con
   elementos NATIVOS del constructor; aquí solo se estiliza por clase.

   Decisiones que se respetan a propósito:
   - Mobile-first, con los dos breakpoints reales de Flatsome: 550px y 850px.
   - Las técnicas NO son tarjetas. Van en fichas editoriales a dos columnas
     (4/8) separadas por filete: así no se confunden con las tarjetas de tipos
     de envío de /como-funciona/ (.inloff-cf-plazo), que sí son cajas blancas
     con borde, radio, sombra y pares dt/dd.
   - Los materiales tampoco son tarjetas: son las columnas de una hoja de
     materiales (filete de apertura en heart, nombre en serif heart-light,
     texto corrido). Misma razón: otro objeto, otra anatomía.
   - Contraste AA: el heart (#C5A184) nunca como texto sobre crema. Para texto
     pequeño sobre crema va el bronce (--inloff-bronze-text, #7E5E3B). Sobre
     navy, heart-light (8,1:1).
   - Sin filetes laterales gruesos, sin degradados de texto, sin número gigante.

   Requiere `inc/inloff-tipos-de-personalizacion.php` (mismo patrón que
   `inc/inloff-como-funciona.php`): clase de body `inloff-pag-tipos-de-personalizacion`
   por slug + enqueue de esta hoja con dependencia `inloff-tokens`. Sin ese
   módulo, TODA esta hoja es inerte: cuelga de esa clase.

   @see assets/css/inloff-tokens.css
   @see assets/css/inloff-como-funciona.css (página hermana)
   ========================================================================= */

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

.inloff-pag-tipos-de-personalizacion .inloff-tp {
	background: var(--inloff-cream-light);
	color: var(--inloff-ink);

	/* Medida de línea de la página, en `em` y NO en `ch`.
	   `ch` mide el glifo «0», y en Outfit ese cero abulta 0,657em mientras el
	   carácter medio del castellano se queda en 0,4483em (medido con canvas
	   sobre las 4.932 letras de esta misma página): un factor de 1,47. Por eso
	   los `70ch` que había aquí no capaban a 70 caracteres sino a 99 —el doble
	   del ideal editorial—, y nadie lo veía porque el número parecía correcto.
	   En `em` la medida escala con el cuerpo del propio texto, así que el mismo
	   valor da ~71 caracteres tanto a 15 px como a 17 px. 45-75 es el rango. */
	--inloff-tp-medida: 32em;        /* ~71 caracteres */
	--inloff-tp-medida-corta: 30em;  /* ~67, para columnas ya estrechas */
}

/* Alternancia de bandas cálidas: marcan el ritmo de lectura. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-hero,
.inloff-pag-tipos-de-personalizacion .inloff-tp-limites {
	background: var(--inloff-cream-warm);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales,
.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre {
	background: var(--inloff-navy);
	color: var(--inloff-on-navy);
	/* A todo el ancho: dentro del contenedor se leen como cajas azules flotando
	   en una página clara, no como bandas. Misma técnica que la portada. */
	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-tipos-de-personalizacion {
	overflow-x: hidden;
}

/* El fondo va a todo el ancho; el contenido, no. */
body.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales > .section-content,
body.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre > .section-content {
	max-width: calc(var(--inloff-max) - 10px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

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

.inloff-pag-tipos-de-personalizacion .inloff-tp-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;
	color: var(--inloff-bronze-text);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales .inloff-tp-eyebrow {
	color: var(--inloff-heart-light);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-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-tipos-de-personalizacion .inloff-tp-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-tipos-de-personalizacion .inloff-tp-materiales .inloff-tp-h2,
.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .inloff-tp-h2 {
	color: var(--inloff-on-navy);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
	max-width: var(--inloff-tp-medida);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-sub {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--inloff-muted-warm);
	max-width: var(--inloff-tp-medida);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales .inloff-tp-sub,
.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .inloff-tp-sub {
	/* Sobre navy, el gris cálido se queda en 2,1:1. */
	color: var(--inloff-on-navy-soft);
}

/* Cabeceras de sección: ancho de lectura, no de contenedor. El ancho va aquí y
   NO en el atributo max_width del [col], que Flatsome resuelve con un <style>
   por id y alinea la caja a la derecha.

   El `.col:first-child` intercalado no está de adorno: sube estas reglas a
   0-5-2 / 0-6-2 para que ninguna regla general de la casa pueda decidir por
   esta página dónde arranca su texto. Ya pasó una vez —un arreglo de centrado
   escrito en tokens contra `body[class*="inloff-pag-"] .col:first-child >
   .col-inner` (0-4-1) ganó a estas reglas y empujó estas dos cabeceras 185 px
   a la derecha, dejando la página con dos sangrados distintos— y el síntoma no
   se lee como un fallo de alineación sino como un bloque mal compuesto.
   Alinear es una decisión de PÁGINA: se toma aquí y se defiende aquí.

   El `:not(--center)` mantiene viva la distinción entre las dos variantes:
   fichas y materiales van a bandera izquierda contra el raíl de x=147,5; FAQ y
   cierre se centran porque su contenido ya viene centrado desde el
   constructor, y una caja a la izquierda con el texto centrado dentro es lo
   que produce el clásico párrafo fuera de eje. */
body.inloff-pag-tipos-de-personalizacion .inloff-tp-secthead:not(.inloff-tp-secthead--center).col:first-child > .col-inner {
	max-width: 760px;
	margin-left: 0;
	margin-right: auto;
}

body.inloff-pag-tipos-de-personalizacion .inloff-tp-secthead--center.col:first-child > .col-inner,
body.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre__col.col:first-child > .col-inner {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* El párrafo tiene su propio tope de medida, más estrecho que la caja que lo
   contiene. Sin `auto` se queda pegado a la izquierda de esa caja mientras su
   texto se compone centrado: el eje óptico del párrafo caía 34 px a la
   izquierda del eje del h2 y del botón, y el bloque se leía torcido aunque las
   tres cajas estuvieran centradas al píxel. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-secthead--center .inloff-tp-sub,
.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .inloff-tp-sub {
	margin-inline: auto;
}

/* Base de párrafo con :where() para que NO gane a las clases de componente. */
:where(.inloff-pag-tipos-de-personalizacion .inloff-tp) p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
}

:where(.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales) p,
:where(.inloff-pag-tipos-de-personalizacion .inloff-tp-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-tipos-de-personalizacion .inloff-tp p a,
.inloff-pag-tipos-de-personalizacion .inloff-tp-nolist li 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-tipos-de-personalizacion .inloff-tp p a:hover,
.inloff-pag-tipos-de-personalizacion .inloff-tp-nolist li a:hover {
	color: var(--inloff-navy);
	text-decoration-color: var(--inloff-navy);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales p a,
.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre p a {
	text-decoration-color: var(--inloff-heart-light);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales p a:hover,
.inloff-pag-tipos-de-personalizacion .inloff-tp-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-tipos-de-personalizacion .inloff-tp-anchor {
	display: block;
	height: 0;
	scroll-margin-top: var(--inloff-header-offset, 96px);
}

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

.inloff-pag-tipos-de-personalizacion .inloff-tp-hero__note p {
	margin: 14px 0 0;
	max-width: var(--inloff-tp-medida);
	font-size: 0.9375rem;
	color: var(--inloff-muted-warm);
}

/* Índice de técnicas: no es una tarjeta de datos, es un sumario. Fondo crema
   profunda, filetes finos entre filas y el material a la derecha. */
/* El índice es un sumario, no una tarjeta: caja con borde y radio lo devolvía a
   la misma familia visual que las tarjetas de envío. Filete arriba y lista. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-indice {
	padding: 18px 0 0;
	background: none;
	border: 0;
	border-top: 2px solid var(--inloff-navy);
	border-radius: 0;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__title {
	margin: 0 0 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inloff-bronze-text);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li {
	margin: 0;
	border-bottom: 1px solid rgba(var(--inloff-navy-rgb), 0.10);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li:last-child {
	border-bottom: 0;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a {
	display: block;
	padding: 12px 22px 2px 0;
	position: relative;
	font-family: var(--inloff-font-serif);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--inloff-navy);
	text-decoration: none;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a::after {
	content: "\2193"; /* flecha abajo: el enlace baja a la ficha, no sale de la página */
	position: absolute;
	right: 0;
	top: 12px;
	color: var(--inloff-bronze-text);
	font-family: var(--inloff-font-sans);
	font-size: 1rem;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a:hover {
	color: var(--inloff-bronze-text);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 2px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list span {
	display: block;
	padding: 0 22px 12px 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--inloff-muted-warm);
}

/* 0,875rem y no 0,8125: la página tenía tres cuerpos distintos (13, 14 y 15 px)
   haciendo exactamente el mismo papel de nota al pie en tres sitios. Tres
   tamaños que no significan tres jerarquías son ruido, no matiz. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__foot {
	margin: 14px 0 0;
	max-width: var(--inloff-tp-medida);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--inloff-muted-warm);
}

/* — Fichas de técnica ------------------------------------------------------ */

/* El filete separador va en un pseudo-elemento y NO en un `border-bottom` de la
   fila: `.inloff-tp-ficha` es un `.row.row-large`, al que Flatsome le mete
   `margin-left:-30px;margin-right:-30px`, así que un borde directo sobresale 30px
   por cada lado. Tampoco sirve `padding`: Flatsome fuerza
   `.row{padding-top:0!important;padding-bottom:0!important}`. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha {
	position: relative;
	/* Medianil real de `.row-large` en Flatsome: 15px hasta 849px y 30px a partir
	   de ahí. El filete se mete justo eso para quedar a ras del texto. */
	--inloff-tp-gutter: 15px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha + .inloff-tp-ficha {
	margin-top: 28px;
}

/* El filete tiene que repartir su aire a partes iguales, o deja de leerse como
   separador y pasa a leerse como el subrayado de la ficha que acaba de cerrar.
   Los 30 px de arriba eran el `padding-bottom` por defecto de la `.col` de
   Flatsome y los de abajo el margen entre fichas (28 en móvil, 44 en
   escritorio): 30/44 es un reparto 1:1,47 que inclina el filete hacia arriba.
   Se iguala al margen de cada tramo. La regla de «última fila sin padding» que
   cierra la hoja sigue anulándolo en la cuarta ficha, que es lo que se busca:
   ahí no hay filete que separar, ya cierra la sección. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha > .col {
	padding-bottom: 28px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha::after {
	content: "";
	/* `display:block` es OBLIGATORIO: Flatsome ya usa `.row:after` como clearfix
	   con `display:table`, y una caja absoluta en `table` se encoge a su
	   contenido (width 0), así que el filete no se pinta. Medido en navegador. */
	display: block;
	position: absolute;
	left: var(--inloff-tp-gutter);
	right: var(--inloff-tp-gutter);
	bottom: 0;
	border-bottom: 1px solid var(--inloff-line-warm-strong);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:last-of-type::after {
	border-bottom: 0;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha__head > .col-inner {
	padding-bottom: 4px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha__sobre {
	margin: 0 0 6px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inloff-bronze-text);
}

/* Techo en 1,75rem (28 px) y no en 2rem (32): el h2 que gobierna las cuatro
   fichas mide 37,6 px, y 37,6/32 daba un salto de 1,175 —por debajo del 1,25
   que hace falta para que dos niveles se distingan sin pensarlo. A 28 px el
   salto sube a 1,34 y se entiende de un vistazo que «Grabado láser» cuelga de
   «Qué hace cada técnica», no que sean hermanos. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha__title {
	margin: 0;
	font-family: var(--inloff-font-serif);
	font-size: clamp(1.5rem, 5vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inloff-navy);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha__body p:not([class]) {
	margin: 0;
	max-width: var(--inloff-tp-medida);
}

/* Notas: clave arriba (o a la izquierda en pantallas medianas) y texto seguido.
   Sin caja, sin valor alineado a la derecha: por eso no se parece al resumen de
   plazos de /como-funciona/.

   TRAMPA: a partir de 550px la fila pasa a `display:grid`, y una rejilla convierte
   CADA hijo en un item, incluidos los trozos sueltos de texto entre etiquetas. Si
   el valor va suelto (`<span class="__k">…</span> texto con <a>enlaces</a>`), cada
   enlace y cada coma caen en su propia celda y la lista se desmonta en vertical.
   Por eso el valor SIEMPRE va envuelto en `__v`: dos items por fila, ni uno más. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-notas {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-notas li {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--inloff-line-warm-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--inloff-ink-soft);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-notas__k {
	display: block;
	margin-bottom: 2px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inloff-bronze-text);
}

/* El valor ocupaba todo el `1fr` de su rejilla y se iba a 81 caracteres por
   línea. Es la parte de la ficha que más se lee de corrido: necesita tope. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-notas__v,
.inloff-pag-tipos-de-personalizacion .inloff-tp-donde__v {
	display: block;
	max-width: var(--inloff-tp-medida);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-donde {
	margin: 18px 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--inloff-muted-warm);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-donde__k {
	display: block;
	margin-bottom: 2px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inloff-bronze-text);
}

/* — Materiales (banda navy) ------------------------------------------------ */

/* Los materiales NO son tarjetas: son las columnas de una hoja de materiales.
   Filete de apertura en heart, nombre en serif heart-light, texto corrido.
   Ni caja, ni sombra, ni radio, ni pares dt/dd: así no se leen como las
   tarjetas de tipos de envío de /como-funciona/. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-materiales__row {
	margin-top: 10px;
}

/* El filete de apertura de «Prendas» y «Flor preservada» aterrizaba a 0,0 px de
   la última línea de «Madera»: la raya tocaba el texto de arriba y el
   muestrario se leía como un muro continuo.
   La culpa era de la regla que cierra esta hoja —«la última fila no lleva
   padding abajo»—, escrita para que el pie de sección no midiera 102 px en vez
   de 72. Pero en una fila que ENVUELVE, esa última fila contiene también las
   columnas de la primera línea, y les quitaba su aire de abajo.
   El padding se devuelve a todas las columnas y se descuenta una sola vez en la
   fila con un margen negativo del mismo valor: así hay canal entre líneas y el
   cierre de la banda sigue clavado en sus 72 px (40 en móvil). Funciona igual
   con dos columnas por línea o con las cuatro apiladas, sin contar hijos ni
   duplicar la regla por breakpoint. */
/* El `.inloff-tp` intercalado no sobra: la regla genérica del final del fichero
   hace ahora lo mismo con 32 px y empata en especificidad con este selector
   (0-5-1), así que ganaría por ir después y dejaría este muestrario con las
   columnas a 34 y la compensación a 32 — dos píxeles de pie de banda regalados.
   Con `.inloff-tp` sube a 0-6-1 y el 34 medido aquí se mantiene. */
body.inloff-pag-tipos-de-personalizacion .inloff-tp.inloff-tp-materiales > .section-content > .row.inloff-tp-materiales__row {
	margin-bottom: -34px;
}

body.inloff-pag-tipos-de-personalizacion .inloff-tp.inloff-tp-materiales > .section-content > .row.inloff-tp-materiales__row > .col.inloff-tp-mat {
	padding-bottom: 34px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-mat > .col-inner {
	height: 100%;
	padding-top: 22px;
	border-top: 1px solid rgba(var(--inloff-heart-rgb), 0.45);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-mat__title {
	margin: 0 0 10px;
	font-family: var(--inloff-font-serif);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inloff-heart-light); /* 8,1:1 sobre navy, medido en navegador */
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-mat p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	/* Medida corta: la columna del muestrario ya es estrecha y el tope solo
	   tiene que impedir que se estire cuando quedan dos materiales por línea. */
	max-width: var(--inloff-tp-medida-corta);
}

/* — Límites ---------------------------------------------------------------- */

.inloff-pag-tipos-de-personalizacion .inloff-tp-nolist {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-nolist li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	/* El `padding-left` va fuera del tope: la sangría del trazo no es texto y no
	   debe descontarse de la medida de lectura. */
	max-width: calc(var(--inloff-tp-medida) + 26px);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--inloff-ink-soft);
}

/* Un trazo, no un punto: lee como «esto no». */
.inloff-pag-tipos-de-personalizacion .inloff-tp-nolist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 14px;
	height: 2px;
	background: var(--inloff-bronze-fill);
}

/* Nota al margen, no tarjeta. Con fondo blanco, radio y sombra era byte a byte
   la tarjeta de modalidad de envío de /como-funciona/ (.inloff-cf-plazo), que es
   justo lo que esta página no debe parecer. Un filete vertical y texto: otro
   género de objeto. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-panel {
	padding: 4px 0 4px 22px;
	background: none;
	border: 0;
	border-left: 2px solid var(--inloff-line-heart);
	border-radius: 0;
	box-shadow: none;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-panel__kicker {
	margin: 0 0 10px;
	font-family: var(--inloff-font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--inloff-navy);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-panel p:not([class]) {
	margin: 0;
	font-size: 0.9375rem;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-panel__foot {
	margin: 14px 0 0;
	font-size: 0.875rem;
	color: var(--inloff-muted-warm);
	word-break: break-word;
}

/* — Preguntas -------------------------------------------------------------- */

/* Mismo blindaje que las cabeceras: el `.col:first-child` está para que esta
   decisión de ancho y centrado no se la pise una regla general de la casa. */
body.inloff-pag-tipos-de-personalizacion .inloff-tp-faq__col.col:first-child > .col-inner {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-item {
	border-bottom: 1px solid var(--inloff-line-warm);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title {
	padding: 18px 44px 18px 4px;
	font-family: var(--inloff-font-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inloff-navy);
	border: 0;
	background: transparent;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title:hover,
.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title.active {
	color: var(--inloff-bronze-text);
	background: transparent;
}

/* Flatsome ancla el icono a la izquierda y se come la primera letra. En una FAQ
   la convención es a la derecha. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title .toggle {
	left: auto;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	opacity: 1;
	color: var(--inloff-bronze-text);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title.active .toggle {
	transform: translateY(-50%) rotate(-180deg);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 2px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-inner {
	padding: 0 4px 20px;
}

/* La columna de la FAQ mide 860 px porque el acordeón necesita sitio para su
   icono y sus títulos; la RESPUESTA no tiene por qué ocupar los 860. Era el
   peor bloque de la página: 99 caracteres por línea. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-inner p {
	margin: 0;
	font-size: 1rem;
	max-width: var(--inloff-tp-medida);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-faq__mas p {
	margin: 24px auto 0;
	max-width: var(--inloff-tp-medida);
	font-size: 0.9375rem;
	text-align: center;
	color: var(--inloff-muted-warm);
}

/* — Cierre ----------------------------------------------------------------- */

.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre__note p {
	/* 22 px por debajo del botón contra los 26 que lleva por encima: el CTA se
	   agrupa antes con el párrafo que lo pide que con la letra pequeña que lo
	   matiza, y el orden de lectura queda escalonado en vez de plano. */
	margin: 22px auto 0;
	max-width: var(--inloff-tp-medida);
	font-size: 0.9375rem;
	color: var(--inloff-on-navy-muted);
}

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

.inloff-pag-tipos-de-personalizacion .inloff-tp .button.inloff-tp-cta,
.inloff-pag-tipos-de-personalizacion .inloff-tp .button.inloff-tp-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;
	transition: background-color var(--inloff-dur-fast) var(--inloff-ease-out, ease),
		transform var(--inloff-dur-fast) var(--inloff-ease-out, ease);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp .button.inloff-tp-cta:hover {
	background-color: var(--inloff-navy-deep);
	border-color: var(--inloff-navy-deep);
	transform: translateY(-1px);
}

/* El `margin: 0` de la regla base es para que el botón no herede los márgenes
   de `.button` de Flatsome, pero dejaba el CTA a 0,0 px del párrafo que lo
   introduce mientras la nota de debajo respiraba 18: el botón quedaba MÁS
   cerca del texto que lo precede que de lo que le sigue y se leía como el final
   del párrafo, no como una acción. Cada banda que lleva CTA recupera su aire. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-hero .button.inloff-tp-cta {
	margin-top: 22px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .button.inloff-tp-cta {
	margin-top: 26px;
}

/* En banda navy el botón se invierte: heart con texto navy (6,4:1). */
.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .button.inloff-tp-cta,
.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .button.inloff-tp-cta:hover {
	background-color: var(--inloff-heart);
	border-color: var(--inloff-heart);
	color: var(--inloff-navy);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .button.inloff-tp-cta:hover {
	background-color: var(--inloff-heart-light);
	border-color: var(--inloff-heart-light);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp .button.inloff-tp-cta:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 3px;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-cierre .button.inloff-tp-cta:focus-visible {
	outline-color: var(--inloff-on-navy);
}

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

.inloff-pag-tipos-de-personalizacion .inloff-tp-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-tipos-de-personalizacion .inloff-tp-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-tipos-de-personalizacion .inloff-tp-sticky__btn:hover,
.inloff-pag-tipos-de-personalizacion .inloff-tp-sticky__btn:focus {
	color: var(--inloff-on-navy);
	background: var(--inloff-navy-deep);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-sticky__btn:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 2px;
}

/* La reserva para que la barra fija no tape nada va al FINAL DEL DOCUMENTO, no
   al final de `#main`. Puesta en `#main` no protegía nada —debajo hay 2.100 px
   de pie, así que lo que la barra tapaba al llegar abajo era el pie, no el
   contenido— y a cambio pintaba una franja blanca de 84 px entre la banda navy
   de cierre y la primera banda crema del pie: la página se leía sin remate.
   El colchón se traslada al último bloque del pie, que ya es navy oscuro: así
   el espacio reservado queda debajo de la barra y nunca se ve. */
@media (max-width: 849px) {
	.inloff-pag-tipos-de-personalizacion #main {
		padding-bottom: 0;
	}

	body.inloff-pag-tipos-de-personalizacion #footer > .inloff-footer__sub {
		/* 20px propios del bloque + 84 de colchón para la barra. */
		padding-bottom: 104px;
	}

	/* Objetivos táctiles. Los 40,4 px del CTA y los 36,5 px de los enlaces del
	   índice pasan el mínimo AA de 24×24 (WCAG 2.5.8) pero no el de 44×44 con
	   el que trabajamos: el botón de la barra fija ya mide 48 y tener el CTA de
	   conversión más pequeño que él no se sostiene. */
	.inloff-pag-tipos-de-personalizacion .inloff-tp .button.inloff-tp-cta {
		min-height: 48px;
		line-height: 46px; /* 48 menos el borde de 1px por lado */
	}
}

/* Solo por debajo de 550: a partir de ahí el índice pasa a fila (título a la
   izquierda, material a la derecha) con 12+12 px de padding, que ya da 46,5 px
   de alto. Tocarlo ahí rompería el alineado de las dos mitades por su base. */
@media (max-width: 549px) {
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a {
		padding: 16px 22px 6px 0; /* 36,5 → 44,5 px de alto */
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a::after {
		top: 16px; /* la flecha sigue al nuevo padding superior */
	}
}

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

@media (min-width: 550px) {
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-panel {
		padding: 28px 26px;
	}

	/* La clave pasa a columna fija: se lee como una tabla de taller, no como
	   una lista de valores alineados a la derecha. */
	.inloff-pag-tipos-de-personalizacion .inloff-tp-notas li {
		display: grid;
		grid-template-columns: 148px 1fr;
		gap: 0 20px;
		align-items: baseline;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-notas__k {
		margin-bottom: 0;
		padding-top: 0.18em;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-donde {
		display: grid;
		grid-template-columns: 148px 1fr;
		gap: 0 20px;
		align-items: baseline;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-donde__k {
		margin-bottom: 0;
		padding-top: 0.18em;
	}

	/* Índice: título a la izquierda, material a la derecha. */
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0 16px;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a {
		padding: 12px 0 12px 0;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a::after {
		position: static;
		margin-left: 8px;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list span {
		padding: 0;
		text-align: right;
	}
}

@media (min-width: 850px) {
	.inloff-pag-tipos-de-personalizacion .inloff-tp-lead {
		font-size: 1.1875rem;
	}

	:where(.inloff-pag-tipos-de-personalizacion .inloff-tp) p {
		font-size: 1.0625rem;
	}

	/* En escritorio la ficha respira y el filete separa técnicas de verdad. */
	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha {
		--inloff-tp-gutter: 30px;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha + .inloff-tp-ficha {
		margin-top: 44px;
	}

	/* Igual al margen de arriba: el filete se queda centrado en su hueco. */
	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha > .col {
		padding-bottom: 44px;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha__head > .col-inner {
		padding-top: 4px;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-notas li,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-donde {
		grid-template-columns: 172px 1fr;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-mat > .col-inner {
		padding-top: 24px;
	}
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.inloff-pag-tipos-de-personalizacion .inloff-tp .button.inloff-tp-cta {
		transition: none;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp .button.inloff-tp-cta:hover {
		transform: none;
	}
}

/* Flatsome usa el mismo píxel para dos cosas: el `padding-bottom: 30px` de cada
   `.col` separa la última fila del pie de la sección Y separa las columnas entre
   sí cuando se apilan. Ponerlo a 0 arreglaba lo primero (72/102 medidos a 1440)
   y rompía lo segundo. Medido a 390: la portada dejaba el índice de técnicas a
   0 px del párrafo que lo presenta, la banda de límites pegaba sus dos columnas,
   y la cuarta ficha —que además de ficha es la última fila de su sección— se
   quedaba con el título a 0 px de su propio texto mientras las otras tres
   respiraban 28. El muestrario de materiales ya lo había parcheado por su
   cuenta en su bloque; el resto de la página no.

   El canal se devuelve a las columnas y se descuenta una sola vez con un margen
   negativo en la fila, que no toca el canal interno. Los dos números van juntos
   o el pie se descuadra. En escritorio no cambia nada: las columnas van en
   paralelo, el padding solo engorda la fila y el margen se lo come.

   La cuarta ficha toma este canal genérico (32) en vez del suyo (28 en móvil,
   44 en escritorio): en escritorio da igual —ahí no se apila— y en móvil la
   diferencia son 4 px. Preferible a inventar un tercer par de valores en una
   hoja que ya tiene dos. */
body.inloff-pag-tipos-de-personalizacion .inloff-tp > .section-content > .row:last-child > .col,
body.inloff-pag-tipos-de-personalizacion .inloff-tp > .row:last-child > .col {
	padding-bottom: 32px;
}

body.inloff-pag-tipos-de-personalizacion .inloff-tp > .section-content > .row:last-child,
body.inloff-pag-tipos-de-personalizacion .inloff-tp > .row:last-child {
	margin-bottom: -32px;
}

/* Y lo mismo un nivel más arriba: la columna que envuelve TODA la página
   también reserva 30 px de Flatsome, y como esta página termina en una banda
   navy a todo ancho, esos 30 px se veían como un filo blanco entre la banda y
   el pie. En una página que acaba en crema no se notaría; aquí sí. */
body.inloff-pag-tipos-de-personalizacion .row-main > .col {
	padding-bottom: 0;
}

/* ============================================================================
   EL HILO DE COBRE — del índice a la ficha
   ----------------------------------------------------------------------------
   La capa común (`inloff-movimiento.css`) ya pone el ritmo general: cada fila
   es un compás y cada columna entra escalonada. Esto de aquí es lo único que
   esta página necesita por encima de eso, y es una sola idea.

   EL PROBLEMA, MEDIDO
   Esta página tiene un mecanismo que las demás no tienen: un índice de cuatro
   técnicas que lleva a cuatro fichas más abajo. Y ese mecanismo no se veía por
   ninguna parte. Pulsabas «Sublimación» y la página saltaba 1.714 px de golpe
   (medido a 1440): aparecías en otro sitio sin recorrido ninguno, sin nada que
   dijera qué había pasado ni a qué habías llegado. Al lector le tocaba
   reorientarse solo, y el índice —que es la mejor pieza de la página— parecía
   una lista de enlaces cualquiera.

   LA IDEA, CON UN SOLO MATERIAL
   El filete de cobre ya es vocabulario de esta casa: abre cada material del
   muestrario y cierra cada ficha. Aquí ese mismo filete hace de hilo y aparece
   tres veces, siempre con el mismo gesto —dibujarse de izquierda a derecha—:

     1. Al SEÑALAR una entrada del índice se dibuja bajo ella y la flecha ↓ da
        un paso hacia abajo. El enlace enseña lo que va a hacer antes de hacerlo.
     2. El salto deja de ser salto: la página recorre la distancia (una línea de
        CSS; el recorrido lo pinta el navegador, sin script).
     3. Al LLEGAR, la ficha se compone delante de ti —rótulo, título, texto,
        notas y «dónde lo encuentras», en ese orden— y su propio filete se
        dibuja en cobre y se apaga hasta el beige de siempre. Es el acuse de
        recibo: «esto es lo que venías a leer».

   Y mientras se lee, el filete de la ficha que hay bajo el puntero se entibia.
   Nada más: no se agranda, no se levanta, no se ilumina. Una ficha no es un
   botón y no puede prometer que lo sea; lo único que dice ese calor es «esta es
   la pieza que tienes delante».

   DOS COBRES Y NO UNO, a propósito: el bronce (#7E5E3B) acompaña texto —en el
   índice va con el título, que ya vira a bronce al señalarlo— y el heart
   (#C5A184) es el de los filetes decorativos de la página. Mezclarlos sería
   pintar un subrayado de texto con el color de una raya de adorno.
   ========================================================================= */

/* El recorrido. `scroll-behavior` solo surte efecto en el elemento que
   desplaza, que es `html`, y esta hoja no llega ahí por selector de body: el
   `:has()` la alcanza sin salirse de la página (ninguna otra hereda esto). Si
   el navegador no soporta `:has()`, el selector entero se descarta y el salto
   sigue siendo el de siempre: nada se rompe, solo no mejora.
   NO se toca `scroll-margin-top` del ancla: el destino sigue cayendo donde ya
   estaba calculado (verificado: mismo `scrollY` final con y sin esto). */
html:has(body.inloff-pag-tipos-de-personalizacion) {
	scroll-behavior: smooth;
}

/* La llegada. `opacity` arranca en 0,4 y NO en 0: esto es una animación, no una
   entrada, y el texto ya está en pantalla cuando ocurre. Si algo la
   interrumpiera, lo peor que puede pasar es que se vea un texto tenue durante
   medio segundo, nunca un hueco en blanco. */
@keyframes inloff-tp-llegada {
	from { opacity: 0.4; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1;   transform: none; }
}

/* El filete de la ficha a la que se llega: se dibuja en cobre y se apaga al
   beige de reposo. Acaba EXACTAMENTE en el color que ya tenía, así que cuando
   termina no queda rastro de que haya pasado nada. */
@keyframes inloff-tp-llegada-filete {
	from { transform: scaleX(0); border-bottom-color: var(--inloff-heart); }
	55%  { transform: scaleX(1); border-bottom-color: var(--inloff-heart); }
	to   { transform: scaleX(1); border-bottom-color: var(--inloff-line-warm-strong); }
}

/* LA ESPERA, que es lo que sincroniza las dos mitades del viaje.
   Medido en producción a 1440: el recorrido hasta la primera ficha dura ~0,5 s
   y hasta la cuarta ~1,12 s. Si la composición arrancara en el momento del
   clic, en los saltos largos habría terminado antes de que llegaras: se
   animaría para nadie, porque el destino todavía está fuera de pantalla.
   Con esta espera, la cabecera de la ficha empieza a componerse cuando el
   recorrido va mediado y el filete —que es el acuse de recibo de verdad— se
   está dibujando o enfriando en el momento de aterrizar, salte corto o largo.
   No se puede clavar al milisegundo (la duración del recorrido la decide el
   navegador y depende de la distancia), pero sí se puede garantizar que lo
   último en pasar se vea siempre.

   Y no más de 560: con una curva de salida, el 95% del recorrido visible de la
   animación pasa en su primer tercio (medido: a mitad de duración el título ya
   está al 97% de opacidad y a medio píxel de su sitio). Esperar de más no
   retrasa el gesto, lo esconde. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) {
	--inloff-tp-espera: 560ms;
}

/* El `id` no está en la ficha sino en el ancla (`.inloff-tp-anchor`, la que
   lleva el `scroll-margin-top`), así que `:target` cae ahí dentro y hay que
   subir con `:has()` hasta la fila para repartir el escalonado.

   La animación va en las PIEZAS de la ficha y nunca en su `.col`: esa columna
   es de la capa común, que la mueve para su entrada, y dos animaciones
   disputándose el mismo `transform` acaban con una de las dos perdiendo en
   silencio.

   `backwards` no es opcional. Sin relleno, cada pieza se vería en su sitio
   durante su retraso y SALTARÍA a opacidad 0,4 justo al empezar a animar: un
   parpadeo al revés. Con `backwards` toma el estado inicial desde el primer
   fotograma y la composición se lee escalonada, que es de lo que se trata. Y
   sin `forwards` no puede dejar nada congelado al acabar. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-ficha__sobre,
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-ficha__title,
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-ficha__body p:not([class]),
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-notas,
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-donde {
	animation: inloff-tp-llegada var(--inloff-mov-entrada, 720ms)
		var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1))
		var(--inloff-tp-espera, 560ms) backwards;
}

/* Cuatro tiempos y no siete: el escalón se reparte por GRUPOS de lectura
   (cabecera · entradilla · tabla de notas · dónde encontrarlo) y no por
   elemento. Escalonando las tres notas por separado el último retraso se iba a
   468 ms y la ficha tardaba más de un segundo en asentarse: para entonces ya
   llevabas un rato leyendo el título. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-ficha__body p:not([class]) {
	animation-delay: calc(var(--inloff-tp-espera, 560ms) + var(--inloff-mov-escalon, 78ms));
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-notas {
	animation-delay: calc(var(--inloff-tp-espera, 560ms) + var(--inloff-mov-escalon, 78ms) * 2);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-donde {
	animation-delay: calc(var(--inloff-tp-espera, 560ms) + var(--inloff-mov-escalon, 78ms) * 3);
}

/* El filete cierra la composición: entra el último y tarda un poco más que el
   texto, para que el trazo se lea como el remate y no como una quinta pieza.
   En la última ficha no pinta nada —ahí el filete está a 0 de ancho por
   diseño— y es justo lo que se quiere: esa ficha no cierra nada, cierra la
   sección. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target)::after {
	transform-origin: left center;
	animation: inloff-tp-llegada-filete calc(var(--inloff-mov-entrada, 720ms) * 1.2)
		var(--inloff-mov-decidida, cubic-bezier(0.16, 1, 0.3, 1))
		calc(var(--inloff-tp-espera, 560ms) + var(--inloff-mov-escalon, 78ms) * 3) backwards;
}

/* El calor de la ficha que se está leyendo. Entra en 300 ms porque es una
   respuesta y sale en 720 porque la salida no es un acontecimiento: si se
   apagara igual de rápido, pasar el ratón por encima de las cuatro fichas
   encendería y apagaría cuatro rayas como un intermitente. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha::after {
	transition: border-bottom-color var(--inloff-mov-entrada, 720ms)
		var(--inloff-mov-suave, cubic-bezier(0.25, 1, 0.5, 1));
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:hover::after,
.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:focus-within::after {
	border-bottom-color: rgba(var(--inloff-heart-rgb), 0.75);
	transition-duration: var(--inloff-mov-estado, 300ms);
}

/* — El índice, que ahora enseña lo que va a hacer -------------------------- */

/* El filete de cobre se dibuja en un pseudo-elemento propio y NO transicionando
   el `border-bottom` de la fila: un borde no se puede dibujar desde un lado, y
   además ese borde es el divisor de la lista —ya tiene su trabajo—. El cobre
   se monta encima y lo deja intacto. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li {
	position: relative;
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* justo encima del divisor de 1 px, no debajo */
	border-bottom: 1px solid var(--inloff-bronze-fill);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--inloff-mov-estado, 300ms)
		var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Por fila entera y no por enlace: el material de la derecha («Madera y
   metacrilato») no es pulsable, pero forma parte de la misma entrada, y un
   filete que solo llegara hasta donde acaba el texto del enlace partiría la
   fila en dos. Con teclado manda el foco del enlace, que es lo que se ve. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li:hover::after,
.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li:has(a:focus-visible)::after {
	transform: scaleX(1);
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a {
	transition: color var(--inloff-mov-estado, 300ms)
		var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a::after {
	transition: transform var(--inloff-mov-estado, 300ms)
		var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Tres píxeles. La flecha ya dice «esto baja»; el paso solo lo confirma. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li:hover a::after,
.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a:focus-visible::after {
	transform: translate3d(0, 3px, 0);
}

/* TRAMPA: por debajo de 550 la flecha es una caja absoluta y se transforma sin
   más, pero a partir de 550 esta hoja la pasa a `position: static`, y una caja
   en línea NO REEMPLAZADA ignora `transform` sin avisar de nada. El paso de la
   flecha simplemente no ocurriría en escritorio —justo donde hay puntero— y
   nadie sabría por qué. `inline-block` le da caja propia; medido: no mueve ni
   un píxel la línea base del título. */
@media (min-width: 550px) {
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a::after {
		display: inline-block;
	}
}

/* — Micro-respuestas de lo demás que sí se toca ---------------------------- */

/* El icono del acordeón ya rotaba 180°, pero de golpe: el estado cambiaba sin
   que nada contara el cambio. El contenido lo despliega jQuery con su propia
   animación de altura; esto solo acompaña al icono y al color del título. */
.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title,
.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title .toggle {
	transition: color var(--inloff-mov-estado, 300ms)
			var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--inloff-mov-estado, 300ms)
			var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Los enlaces de dentro del texto cambian color Y color de subrayado a la vez;
   sin transición, los dos saltos a destiempo se ven como un parpadeo. */
.inloff-pag-tipos-de-personalizacion .inloff-tp p a,
.inloff-pag-tipos-de-personalizacion .inloff-tp-nolist li a {
	transition: color var(--inloff-mov-estado, 300ms)
			var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		text-decoration-color var(--inloff-mov-estado, 300ms)
			var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-tipos-de-personalizacion .inloff-tp-sticky__btn {
	transition: background-color var(--inloff-mov-estado, 300ms)
		var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* — Quieto ----------------------------------------------------------------- */

/* No es «lo mismo pero rápido»: es sin movimiento y con todo visible y legible.
   Las respuestas al puntero se conservan —el filete del índice sigue
   apareciendo, la ficha sigue entibiándose— porque son información, no adorno;
   lo que desaparece es el tiempo que tardan. */
@media (prefers-reduced-motion: reduce) {
	html:has(body.inloff-pag-tipos-de-personalizacion) {
		scroll-behavior: auto;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-ficha__sobre,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-ficha__title,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-ficha__body p:not([class]),
	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-notas,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target) .inloff-tp-donde,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha:has(.inloff-tp-anchor:target)::after {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.inloff-pag-tipos-de-personalizacion .inloff-tp-ficha::after,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li::after,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a::after,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-accordion .accordion-title .toggle,
	.inloff-pag-tipos-de-personalizacion .inloff-tp p a,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-nolist li a,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-sticky__btn {
		transition: none;
	}

	/* La flecha no da el paso, pero la fila sí se subraya: sin movimiento hay
	   que dejar la señal que el movimiento estaba dando. */
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list li:hover a::after,
	.inloff-pag-tipos-de-personalizacion .inloff-tp-indice__list a:focus-visible::after {
		transform: none;
	}
}