/* ============================================================================
   inloff — «El taller» (página 3623)
   ----------------------------------------------------------------------------
   Fichero destino: assets/css/inloff-el-taller.css

   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.

   EL RAÍL DE LA PÁGINA (la decisión que ordena todo lo demás)
   ----------------------------------------------------------------------------
   Una página no puede tener dos sitios por donde empiece a leerse. Esta los
   tenía cuatro (147,5 / 272,5 / 332,5 / 352,5 a 1440), porque cada sección
   centraba una caja de ancho distinto y el ojo tenía que recolocarse seis veces
   bajando. La regla de ahora, en una frase:

     · Las bandas navy son piezas simétricas: su cabecera va centrada sobre el
       eje de la página, porque son el descanso entre capítulos.
     · TODO LO DEMÁS —el artículo— arranca en el raíl canónico del proyecto
       (x=147,5 a 1440) y no se mueve de ahí.

   De ahí salen los tres únicos números de maquetación de la hoja:
     --tl-columna (50em / 800px): ancho de columna del artículo. Sale de la
       lista de «Del pedido a la caja»: 16em de etiqueta + 2,25em de calle +
       31em de medida. Da además titulares de una sola línea, que es lo que
       sostiene la mancha cuando debajo solo hay un párrafo estrecho.
     --tl-medida (31em): largo de línea de cualquier texto corrido.
     40em: ancho de las cabeceras centradas de banda navy.

   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.
   - El largo de línea se cuenta en `em`, NUNCA en `ch`. En Outfit el glifo «0»
     mide 1,5 veces el carácter medio del castellano: `62ch` dejaba pasar líneas
     de 88 caracteres reales y `72ch` de 110. Medido en vivo con rangos sobre el
     DOM (no con métricas de canvas): a 17px un carácter medio ocupa 7,5px, así
     que 31em = 527px = 70 caracteres. El rango editorial es 45-75.
   - Contraste AA: el heart (#C5A184) NUNCA como texto sobre crema ni con texto
     blanco encima. Va de filete o de fondo con texto navy. En texto pequeño
     sobre crema se usa --inloff-bronze-text (#7E5E3B, 5,2:1).
   - Los plazos no se escriben aquí ni en el contenido: van con fichas
     ({produccion}, {entrega}) que rellena el motor de envíos.
   - Deliberadamente NO se reutiliza el patrón de tarjeta rellena de «Cómo
     funciona» (panel blanco con sombra y pares etiqueta-valor con filetes):
     esta página se lee como texto editorial, con listas de filete fino y una
     banda navy de oficio. Nada de aquí debe parecerse a las tarjetas de
     modalidad de envío.

   @see inc/inloff-el-taller.php (clase de body + enqueue)
   @see assets/css/inloff-tokens.css
   ========================================================================= */

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

body.inloff-pag-el-taller {
	/* Ancho de columna del artículo y largo de línea. Ver la cabecera. */
	--tl-columna: 50em;
	--tl-medida: 31em;
	/* Filete estructural único. Los tres beis que había (#E8E2D5, #D8D3C8) se
	   quedaban en 1,13-1,30:1 sobre crema: en la FAQ el filete es lo ÚNICO que
	   separa cinco filas cerradas y no se veía. Compuesto sobre el navy de marca
	   en vez de sobre un beis sube a 1,77:1 y sigue leyéndose cálido. */
	--tl-filete: rgba(var(--inloff-navy-rgb), 0.28);
}

.inloff-pag-el-taller .inloff-tl {
	background: var(--inloff-cream-light);
	color: var(--inloff-ink);
}

/* Alternancia de fondos: bandas cálidas que marcan el ritmo de lectura. */
.inloff-pag-el-taller .inloff-tl-hero,
.inloff-pag-el-taller .inloff-tl-bajopedido,
.inloff-pag-el-taller .inloff-tl-faq {
	background: var(--inloff-cream-warm);
}

/* Las dos bandas navy van a todo el ancho: dentro del contenedor se leen como
   cajas azules flotando, no como bandas. Misma técnica que la portada. */
.inloff-pag-el-taller .inloff-tl-oficio,
.inloff-pag-el-taller .inloff-tl-cierre {
	background: var(--inloff-navy);
	color: var(--inloff-on-navy);
	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-el-taller {
	overflow-x: hidden;
}

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

/* — Medidas de lectura -----------------------------------------------------
   `body` en el selector para ganarle a `.col:first-child .col-inner` de
   Flatsome (misma especificidad y hoja posterior), que a partir de 850px empuja
   contra el borde DERECHO cualquier columna con ancho propio. El ancho va aquí
   y no en el atributo `max_width` del constructor, que Flatsome resuelve con un
   <style> por ID (regenerado en cada render: no se puede enganchar) y que
   además alinea la columna a la derecha.

   `margin-left: 0` es lo que fija el raíl: sin él la columna se centra, y una
   columna centrada de ancho distinto por sección es exactamente lo que daba
   cuatro puntos de arranque. */

body.inloff-pag-el-taller .inloff-tl-measure > .col-inner,
body.inloff-pag-el-taller .inloff-tl-control .inloff-tl-measure > .col-inner,
body.inloff-pag-el-taller .inloff-tl-faq .inloff-tl-secthead > .col-inner,
body.inloff-pag-el-taller .inloff-tl-faq__col > .col-inner {
	max-width: var(--tl-columna);
	margin-left: 0;
	margin-right: auto;
}

/* La FAQ era la excepción que rompía la regla: cabecera centrada sobre crema.
   Vuelve al artículo. `.text-center` (0-1-0) lo pone el constructor en el
   `.col-inner`; esta cadena lo gana sin !important. */
body.inloff-pag-el-taller .inloff-tl-faq .inloff-tl-secthead > .col-inner {
	text-align: left;
}

/* Las dos bandas navy sí van centradas: son el descanso, no el artículo. 40em
   en vez de los 760px de antes para que el subtítulo no corra a 88 caracteres
   y para que el bloque se lea como un bloque y no como una franja. */
body.inloff-pag-el-taller .inloff-tl-oficio .inloff-tl-secthead > .col-inner,
body.inloff-pag-el-taller .inloff-tl-cierre__col > .col-inner {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

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

.inloff-pag-el-taller .inloff-tl-eyebrow {
	margin: 0 0 12px;
	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. El bronce da 5,2:1. */
	color: var(--inloff-bronze-text);
}

.inloff-pag-el-taller .inloff-tl-oficio .inloff-tl-eyebrow,
.inloff-pag-el-taller .inloff-tl-cierre .inloff-tl-eyebrow {
	color: var(--inloff-heart-light);
}

.inloff-pag-el-taller .inloff-tl-h1 {
	margin: 0 0 18px;
	font-family: var(--inloff-font-serif);
	font-weight: 600;
	font-size: clamp(2rem, 7vw, 3.35rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--inloff-navy);
}

.inloff-pag-el-taller .inloff-tl-h2 {
	margin: 0 0 16px;
	font-family: var(--inloff-font-serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 5vw, 2.35rem);
	line-height: 1.14;
	color: var(--inloff-navy);
}

.inloff-pag-el-taller .inloff-tl-oficio .inloff-tl-h2,
.inloff-pag-el-taller .inloff-tl-cierre .inloff-tl-h2 {
	color: var(--inloff-on-navy);
}

.inloff-pag-el-taller .inloff-tl-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
	max-width: var(--tl-medida);
}

.inloff-pag-el-taller .inloff-tl-sub {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--inloff-muted-warm);
	max-width: var(--tl-medida);
}

/* Solo se centran los subtítulos de banda navy. El de la FAQ se quedó sin
   `margin-inline: auto` a propósito: esa cabecera volvió al raíl del artículo. */
.inloff-pag-el-taller .inloff-tl-oficio .inloff-tl-secthead .inloff-tl-sub,
.inloff-pag-el-taller .inloff-tl-cierre .inloff-tl-sub {
	margin-inline: auto;
}

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

/* Base de párrafo con :where() para que NO gane a las clases de componente. */
:where(.inloff-pag-el-taller .inloff-tl) p {
	font-size: 1.0625rem;
	line-height: 1.68;
	color: var(--inloff-ink-soft);
	/* El tope va en el párrafo y no solo en la columna: así el titular puede
	   ocupar los 800px de la columna (y caber en una línea) mientras el cuerpo
	   se queda en 70 caracteres. Sin esto la prosa corría a 94-98. */
	max-width: var(--tl-medida);
}

:where(.inloff-pag-el-taller .inloff-tl) p + p {
	margin-top: 1.05em;
}

/* El último párrafo de una sección se llevaba el `margin-bottom: 1.3em` de
   Flatsome, así que dos bandas tenían 76px de aire arriba y 98 abajo y el hueco
   entre secciones bailaba 22px (148 · 170 · 152 · 170 · 144). Con esto la serie
   queda plana: 148 · 148 · 152 · 148 · 144. */
:where(.inloff-pag-el-taller .inloff-tl) p:last-child {
	margin-bottom: 0;
}

:where(.inloff-pag-el-taller .inloff-tl-oficio) p,
:where(.inloff-pag-el-taller .inloff-tl-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-el-taller .inloff-tl p a,
.inloff-pag-el-taller .inloff-tl 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-el-taller .inloff-tl p a:hover,
.inloff-pag-el-taller .inloff-tl li a:hover {
	color: var(--inloff-navy);
	text-decoration-color: var(--inloff-navy);
}

.inloff-pag-el-taller .inloff-tl-oficio p a,
.inloff-pag-el-taller .inloff-tl-cierre p a {
	text-decoration-color: var(--inloff-heart-light);
}

.inloff-pag-el-taller .inloff-tl-oficio p a:hover,
.inloff-pag-el-taller .inloff-tl-cierre p a:hover {
	color: var(--inloff-on-navy);
	text-decoration-color: var(--inloff-on-navy);
}

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

/* 32 y no 16: con 24px por arriba y 16 por abajo, el botón quedaba más cerca
   del pie que del párrafo que remata, y se agrupaba con el lado equivocado. */
.inloff-pag-el-taller .inloff-tl-hero__note p {
	margin: 32px 0 0;
	font-size: 0.9375rem;
	color: var(--inloff-muted-warm);
}

/* La ficha del taller: un colofón impreso, no una tarjeta.
   Sin relleno, sin sombra y sin esquinas redondeadas: un filete navy arriba,
   etiquetas en versalitas de bronce y los valores en serif. Así no comparte
   anatomía con las tarjetas de modalidad de envío de «Cómo funciona», que son
   paneles rellenos y redondeados con pares etiqueta-valor en sans. */
.inloff-pag-el-taller .inloff-tl-sellos {
	padding: 0;
	background: none;
	border-top: 2px solid var(--inloff-navy);
	border-radius: 0;
}

.inloff-pag-el-taller .inloff-tl-sellos__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inloff-pag-el-taller .inloff-tl-sellos__list li {
	margin: 0;
	padding: 17px 0;
	/* Mismo filete que la lista y que la FAQ: los tres hacen el mismo trabajo y
	   antes usaban tres beis distintos, todos por debajo de 1,3:1. */
	border-bottom: 1px solid var(--tl-filete);
}

.inloff-pag-el-taller .inloff-tl-sellos__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.inloff-pag-el-taller .inloff-tl-sellos__list strong {
	display: block;
	margin-bottom: 7px;
	font-family: var(--inloff-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inloff-bronze-text);
}

.inloff-pag-el-taller .inloff-tl-sellos__list span {
	display: block;
	font-family: var(--inloff-font-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.38;
	color: var(--inloff-navy);
}

/* — El oficio (banda navy) -------------------------------------------------
   Tres bloques de texto separados por un filete superior, no tres tarjetas.
   Apilados en tablet y móvil se leen como una lista. */

.inloff-pag-el-taller .inloff-tl-oficio__row {
	margin-top: 8px;
}

.inloff-pag-el-taller .inloff-tl-oficio__item > .col-inner {
	height: 100%;
	padding: 22px 0 0;
	border-top: 1px solid rgba(250, 247, 242, 0.22);
}

.inloff-pag-el-taller .inloff-tl-oficio__title {
	margin: 0 0 10px;
	font-family: var(--inloff-font-sans);
	/* 19px: el tercer nivel medía exactamente lo mismo que el cuerpo (17px) y
	   solo lo separaba el peso. Con 19 hay un escalón de tamaño de verdad. */
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inloff-on-navy);
}

.inloff-pag-el-taller .inloff-tl-oficio__item p {
	margin: 0;
	font-size: 1rem;
}

/* El filete de la nota va en la columna, no en el párrafo: así mide los 1.130px
   de la rejilla de arriba y la cierra. Su trabajo es cerrar la rejilla, no
   subrayar el texto. */
.inloff-pag-el-taller .inloff-tl-oficio__nota > .col-inner {
	margin-top: 4px;
	padding-top: 24px;
	border-top: 1px solid rgba(250, 247, 242, 0.18);
}

/* `margin: 0` y no `0 auto`: centrado, el texto empezaba 200px DENTRO de su
   propio filete y el bloque se leía a medio terminar. Ahora arranca donde
   arranca el filete y donde arranca la primera columna de la banda. */
.inloff-pag-el-taller .inloff-tl-oficio__nota p {
	margin: 0;
	max-width: var(--tl-medida);
	font-size: 0.9375rem;
	color: var(--inloff-on-navy-soft);
}

/* — Destacado editorial ----------------------------------------------------
   Un filete horizontal y serif grande. Nada de comillas decorativas, nada de
   filete lateral de color. */

.inloff-pag-el-taller .inloff-tl-destacado {
	margin: 30px 0;
}

/* El filete vive en el párrafo, no en el contenedor. Puesto en el contenedor
   medía toda la columna mientras el texto medía menos, y volvía a aparecer el
   filete que arranca donde no hay nada. Puesto aquí no puede desalinearse
   nunca: mide exactamente lo que mide la cita.
   Color heart-dark y no line-heart: rgba(heart,.30) sobre crema da 1,22:1 y era
   invisible, así que la cita se leía como un párrafo que por algún motivo es
   más grande. heart-dark da 2,86:1 — se ve sin gritar. */
.inloff-pag-el-taller .inloff-tl-destacado p {
	margin: 0;
	padding-top: 24px;
	border-top: 2px solid var(--inloff-heart-dark);
	font-family: var(--inloff-font-serif);
	/* Mínimo 1,375rem (y no 1,25): en móvil la cita quedaba a 20px contra un
	   cuerpo de 17, solo un 18% mayor, y encima con el interlineado MÁS
	   apretado que el texto que la rodea. */
	font-size: clamp(1.375rem, 3.6vw, 1.625rem);
	line-height: 1.38;
	color: var(--inloff-navy);
	/* 23em ≈ 50 caracteres: el rango de una cita, no el de un párrafo. */
	max-width: 23em;
}

/* — Lista «Del pedido a la caja» -------------------------------------------
   Lista con filetes: un ritmo distinto al de las rejillas de tarjetas. */

.inloff-pag-el-taller .inloff-tl-lista ul {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

.inloff-pag-el-taller .inloff-tl-lista li {
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--tl-filete);
}

.inloff-pag-el-taller .inloff-tl-lista li:first-child {
	border-top: 1px solid var(--tl-filete);
}

.inloff-pag-el-taller .inloff-tl-lista h3 {
	margin: 0 0 8px;
	font-family: var(--inloff-font-sans);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inloff-navy);
}

.inloff-pag-el-taller .inloff-tl-lista p {
	margin: 0;
	font-size: 1rem;
}

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

.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta,
.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta:hover {
	margin: 24px 0 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;
	/* Los tiempos salen de la capa de movimiento y no de `--inloff-dur-fast`
	   (220ms): esa es la duración general del tema, pero las seis páginas
	   editoriales comparten desde la capa común un tacto propio para lo que se
	   pulsa —180ms— y este botón es el único de la página. Con 220 respondía 40ms
	   más tarde que el mismo botón en «Cómo funciona», que es poco para verlo y
	   suficiente para notarlo. Los respaldos son los valores de la capa común por
	   si esta hoja se abriera sin ella. Y el color de fondo sí se queda en el
	   tiempo de cambio de estado (300ms): un navy que se oscurece a 180 parpadea.
	   El `border-color` entra en la lista porque también cambia al apuntar y sin
	   él saltaba solo, adelantándose al fondo. */
	transition:
		transform var(--inloff-mov-respuesta, 180ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		border-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta:hover {
	background-color: var(--inloff-navy-deep);
	border-color: var(--inloff-navy-deep);
	transform: translateY(-1px);
}

/* Al pulsar, el botón vuelve a su sitio bajo el dedo. Lo mismo que hace la capa
   común con `.button`, repetido aquí porque la cadena de esta hoja (0-4-0) le
   gana a la suya y el `:active` se perdía: el botón se quedaba levantado durante
   la pulsación, que es justo el fotograma en el que debería hundirse. */
.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta:active {
	transform: none;
	transition-duration: 80ms;
}

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

.inloff-pag-el-taller .inloff-tl-cierre .button.inloff-tl-cta:hover {
	background-color: var(--inloff-heart-light);
	border-color: var(--inloff-heart-light);
}

.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 3px;
}

.inloff-pag-el-taller .inloff-tl-cierre .button.inloff-tl-cta:focus-visible {
	outline-color: var(--inloff-heart-light);
}

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

.inloff-pag-el-taller .inloff-tl-accordion .accordion-item {
	border-bottom: 1px solid var(--tl-filete);
}

.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:first-child {
	border-top: 1px solid var(--tl-filete);
}

.inloff-pag-el-taller .inloff-tl-accordion .accordion-title {
	padding: 18px 44px 18px 4px;
	font-family: var(--inloff-font-sans);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inloff-navy);
	border: 0;
	background: transparent;
}

.inloff-pag-el-taller .inloff-tl-accordion .accordion-title:hover,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-title.active {
	/* Bronce y no heart-dark: el heart sobre crema se queda en 2,9:1 y este
	   título es texto de interfaz (19px/600), que necesita 4,5:1. */
	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. El icono es componente de UI: necesita
   3:1 (WCAG 1.4.11), que el heart-dark no da sobre crema. */
.inloff-pag-el-taller .inloff-tl-accordion .accordion-title .toggle {
	left: auto;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	opacity: 1;
	color: var(--inloff-bronze-text);
}

.inloff-pag-el-taller .inloff-tl-accordion .accordion-title.active .toggle {
	transform: translateY(-50%) rotate(-180deg);
}

.inloff-pag-el-taller .inloff-tl-accordion .accordion-title:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 2px;
}

.inloff-pag-el-taller .inloff-tl-accordion .accordion-inner {
	padding: 0 4px 22px;
}

.inloff-pag-el-taller .inloff-tl-accordion .accordion-inner p {
	margin: 0;
	font-size: 1rem;
	/* 72ch se renderizaba a 757px = 110 caracteres reales. Ver la cabecera. */
	max-width: var(--tl-medida);
}

/* — Cierre: enlaces internos ----------------------------------------------- */

.inloff-pag-el-taller .inloff-tl-mas ul {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
}

.inloff-pag-el-taller .inloff-tl-mas li {
	position: relative;
	margin: 0;
}

.inloff-pag-el-taller .inloff-tl-mas p a,
.inloff-pag-el-taller .inloff-tl-mas li a,
.inloff-pag-el-taller .inloff-tl-mas a {
	/* Estos cuatro no son enlaces dentro de una frase (que quedan exentos), son
	   una navegación: necesitan 24px de objetivo táctil (WCAG 2.5.8) y medían
	   19. El relleno vertical los sube a 27 sin mover el ritmo del bloque. */
	display: inline-block;
	padding: 4px 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--inloff-on-navy-soft);
	text-decoration: underline;
	text-decoration-color: var(--inloff-heart-light);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Los enlaces del cierre van sobre navy, al revés que los del cuerpo. Las
   reglas repiten el mismo patrón de dos partes (`p a`, `li a`) que la genérica
   de arriba: con una sola perdían la cascada y el enlace se ponía navy sobre
   navy, es decir invisible justo al apuntarlo. */
.inloff-pag-el-taller .inloff-tl-mas p a:hover,
.inloff-pag-el-taller .inloff-tl-mas li a:hover,
.inloff-pag-el-taller .inloff-tl-mas a:hover {
	color: var(--inloff-heart-light);
	text-decoration-color: var(--inloff-heart-light);
}

.inloff-pag-el-taller .inloff-tl-mas a:focus-visible {
	outline: 3px solid var(--inloff-heart-light);
	outline-offset: 3px;
}

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

/* En móvil los cuatro enlaces caían 1 / 2 / 1: una pirámide rota que parecía
   quedarse a medias. En columna son cuatro filas limpias, y de paso el objetivo
   táctil sube a 33px. Van centrados porque el cierre es banda navy. */
@media (max-width: 549px) {
	.inloff-pag-el-taller .inloff-tl-mas ul {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.inloff-pag-el-taller .inloff-tl-mas li a {
		padding: 7px 0;
	}
}

@media (min-width: 550px) {
	.inloff-pag-el-taller .inloff-tl-mas li + li::before {
		content: "";
		position: absolute;
		left: -13px;
		top: 0.35em;
		bottom: 0.35em;
		width: 1px;
		background: rgba(250, 247, 242, 0.28);
	}
}

@media (min-width: 850px) {
	.inloff-pag-el-taller .inloff-tl-lead {
		font-size: 1.1875rem;
	}

	:where(.inloff-pag-el-taller .inloff-tl) p {
		font-size: 1.0625rem;
	}

	.inloff-pag-el-taller .inloff-tl-destacado {
		margin: 36px 0;
	}

	/* La lista pasa a dos columnas: título a la izquierda, texto a la derecha.
	   Sigue siendo una lista, no una rejilla de tarjetas.
	   La segunda columna lleva la medida en vez de `1fr`: con `1fr` el texto se
	   estiraba a los 880px de la columna vieja y corría a 86 caracteres. Estos
	   16em + 2,25em + 31em son los que fijan --tl-columna en 50em. */
	.inloff-pag-el-taller .inloff-tl-lista li {
		display: grid;
		grid-template-columns: 16em minmax(0, var(--tl-medida));
		gap: 0 2.25em;
		align-items: start;
		padding: 26px 0;
	}

	.inloff-pag-el-taller .inloff-tl-lista h3 {
		margin: 0;
	}

	.inloff-pag-el-taller .inloff-tl-oficio__item > .col-inner {
		padding-top: 24px;
	}

	.inloff-pag-el-taller .inloff-tl-sellos__list span {
		font-size: 1.125rem;
	}
}

/* — Bandas a sangre por debajo del contenedor ------------------------------
   Las bandas navy rompen el contenedor con 100vw; las crema no, así que en
   móvil quedaba un filo blanco de 15px a cada lado que parecía fallo de render
   (15px sobre 390 es demasiado poco para leerse como margen; a 1440 el mismo
   sangrado son 117,5px y ahí sí funciona).
   Ese filo no es una decisión: es el `padding: 0 15px` de `.row-main > .col`.
   Se anula justo donde deja de haber retícula que repartir —`.row-main` mide
   1220px, más 15 de barra de scroll— y ahí el raíl canónico ya no existe. Por
   encima de ese ancho NO se toca: movería el contenido a 132,5 y rompería el
   raíl de 147,5.
   `width: auto` es imprescindible: Flatsome pone `width: 100%` a la sección y
   sin esto el margen negativo la desplaza pero no la ensancha. */
@media (max-width: 1235px) {
	body.inloff-pag-el-taller .inloff-tl-hero,
	body.inloff-pag-el-taller .inloff-tl-sitio,
	body.inloff-pag-el-taller .inloff-tl-bajopedido,
	body.inloff-pag-el-taller .inloff-tl-control,
	body.inloff-pag-el-taller .inloff-tl-faq {
		width: auto;
		margin-left: -15px;
		margin-right: -15px;
	}

	/* Y las navy pierden su relleno propio, para que las siete bandas dejen
	   exactamente el mismo margen: 30px a cada lado y 330px de texto a 390
	   (antes 45 y 300, que dejaban el cuerpo en 38 caracteres por línea). */
	body.inloff-pag-el-taller .inloff-tl-oficio > .section-content,
	body.inloff-pag-el-taller .inloff-tl-cierre > .section-content {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 849px) {
	/* 40,4px de alto medidos: por debajo del mínimo táctil, y es el único botón
	   de acción de la página. El alto se fuerza con min-height + line-height
	   porque Flatsome monta el botón con line-height, sin padding vertical. */
	.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta {
		min-height: 48px;
		line-height: 46px;
	}

	/* El salto del hero a la ficha del taller era de 26px, diez más que el hueco
	   INTERNO del grupo anterior: la ficha se leía como pie del párrafo. El aire
	   va en la ficha y no en `.col-inner` porque el constructor le clava
	   `padding: 0` por ID (1-0-1) y desde aquí no se le puede ganar. */
	.inloff-pag-el-taller .inloff-tl-hero__aside .inloff-tl-sellos {
		margin-top: 26px;
	}
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta,
	/* El `:active` también: lleva su propia `transition-duration` y sin
	   nombrarlo aquí volvía a encender la transición justo al pulsar. */
	.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta:active {
		transition: none;
	}

	.inloff-pag-el-taller .inloff-tl .button.inloff-tl-cta:hover {
		transform: none;
	}
}

/* Flatsome pone `padding-bottom: 30px` a cada `.col`, así que el hueco de abajo
   de cada sección salía 30 px mayor que el de arriba (72/102 medidos a 1440).
   El padding de la sección ya marca el ritmo: la última fila no necesita más. */
body.inloff-pag-el-taller .inloff-tl > .section-content > .row:last-child > .col,
body.inloff-pag-el-taller .inloff-tl > .row:last-child > .col {
	padding-bottom: 0;
}

/* ============================================================================
   EL TRAZO — el movimiento propio de esta página
   ============================================================================

   Esta página se publica SIN una sola fotografía: no hay fotos de proceso en la
   mediateca y no se van a inventar adornos geométricos para tapar el hueco. Lo
   único gráfico que tiene son los FILETES: el de 2px que abre la ficha del
   taller, los tres que separan sus datos, los cinco de «Del pedido a la caja»,
   los seis de la FAQ, el de bronce del destacado y los cuatro de la banda navy.
   Veinte líneas. La página es, literalmente, papel pautado.

   Así que el momento propio no podía ser otra cosa: **los filetes se trazan**.
   Se dibujan de izquierda a derecha, como se raya una hoja antes de escribirla,
   un punto después de que llegue el texto que acompañan. Es el gesto del oficio
   —una mano que tira una línea— y no un efecto de página de producto: quien no
   lo busque solo notará que esto se asienta con calma.

   Y resuelve un problema real, no solo estético. El escalonado de la capa común
   reparte el ritmo por columnas, y aquí CUATRO de las siete secciones («el
   sitio», «bajo pedido», «del pedido a la caja» y el cierre) son de una sola
   columna a ancho completo: una nota por compás. Medido en la página: la lista
   de cuatro pasos y la FAQ de cinco entran de golpe, en bloque, y una lista que
   aparece entera de una vez no se lee como una lista, se lee como una imagen.
   El trazo es lo que le devuelve el orden de lectura: primero el paso uno.

   CÓMO, Y POR QUÉ ASÍ

   · **El filete pasa a ser un pseudoelemento, no el `border`.** Un `border` no
     se puede escalar, y trazarlo con `width` está prohibido con razón: obligaría
     al navegador a recalcular la maqueta en cada fotograma de las veinte
     líneas a la vez. Con `transform: scaleX()` sobre una pieza propia el trabajo
     es solo de composición.
   · **El `border` no se quita: se queda transparente.** Ocupa su 1px (o sus 2)
     en la caja como siempre. Quitarlo movería el contenido de cada elemento de
     la lista y de la FAQ, y el alto de la página cambiaría 22px.
   · **El pseudoelemento existe SIEMPRE, no solo con JavaScript.** Es el filete
     de la página a todos los efectos; lo único que cuelga de `html.js-mov` es su
     `scaleX(0)`. Si el script no llega —o si el temporizador de seguridad de
     `inc/inloff-movimiento.php` retira la clase a los 2,5s— la página se ve
     pautada como siempre. Un filete que no se dibuja es un detalle que se
     pierde; una página sin sus líneas de separación es otra página.
   · **Termina en `transform: none` y no en `scaleX(1)`.** Una línea de 1px con
     un `transform` vivo encima se queda en una capa de composición y algunas
     GPU la dejan medio borrosa. Al aterrizar en `none` vuelve a ser un píxel
     nítido pintado por el navegador.
   · **Curva de trazo, no una de las de salida.** Las tres de salida están
     calibradas para algo que LLEGA: salen disparadas y frenan al final, que es
     lo correcto para una pieza que aterriza. Una línea que se está DIBUJANDO
     tiene que leerse en todo su recorrido, y con `quint-out` los 800px de la
     lista estaban al 90% en 300ms: no se ve un trazo, se ve un destello. La del
     trazo arranca despacio, coge cuerpo y frena.

   LA REVISIÓN DEL 2026-09-19
   Este razonamiento era correcto y la página era la única de las tres que lo
   tenía escrito, pero los cuatro números vivían aquí, y /nuestra-historia/ y
   /sostenibilidad/ habían resuelto el MISMO gesto por su cuenta con otros tres.
   Así que el trazo subió a la capa común tal cual estaba —misma curva, misma
   duración, mismo escalón— y esta hoja dejó de tener tiempos propios: los pide.
   Lo único que cambia aquí es la espera, de 140 a los 150 ms comunes.

   @see assets/css/inloff-movimiento.css (la capa común: el vocabulario del trazo)
   ========================================================================= */

/* — Las veinte líneas ------------------------------------------------------
   Anatomía común. El color y la posición (arriba o abajo, 1px o 2) se fijan
   después, grupo a grupo, porque cada filete hereda el suyo del bloque original
   que sustituye. */

.inloff-pag-el-taller .inloff-tl-sellos::before,
.inloff-pag-el-taller .inloff-tl-sellos__list li:not(:last-child)::after,
.inloff-pag-el-taller .inloff-tl-lista li:first-child::before,
.inloff-pag-el-taller .inloff-tl-lista li::after,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:first-child::before,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item::after,
.inloff-pag-el-taller .inloff-tl-destacado p::before,
.inloff-pag-el-taller .inloff-tl-oficio__item > .col-inner::before,
.inloff-pag-el-taller .inloff-tl-oficio__nota > .col-inner::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--tl-filete);
	transform-origin: 0 50%;
	/* El retraso suma tres cosas: lo que la capa común le dio a la columna
	   entera (`--inloff-mov-retraso`, heredado del `.col`), la espera al texto
	   y el puesto de esta línea en su grupo. Las tres con respaldo, porque si la
	   hoja común no llegara esto tiene que seguir siendo un número válido. */
	transition:
		transform var(--inloff-mov-trazo, 820ms)
			var(--inloff-mov-trazo-curva, cubic-bezier(0.42, 0.06, 0.24, 1)),
		background-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, ease-out);
	transition-delay: calc(
		var(--inloff-mov-retraso, 0ms) + var(--inloff-mov-trazo-espera, 150ms) +
		var(--tl-trazo-n, 0) * var(--inloff-mov-escalon-trazo, 62ms)
	);
}

/* Hospedajes: el filete original cede el color y la caja se vuelve referencia.
   Ninguno de estos cinco tiene descendientes absolutos (comprobado en vivo), así
   que `position: relative` no le mueve el sitio a nada. */
.inloff-pag-el-taller .inloff-tl-sellos,
.inloff-pag-el-taller .inloff-tl-sellos__list li,
.inloff-pag-el-taller .inloff-tl-lista li,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item,
.inloff-pag-el-taller .inloff-tl-destacado p {
	position: relative;
}

.inloff-pag-el-taller .inloff-tl-sellos,
.inloff-pag-el-taller .inloff-tl-lista li:first-child,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:first-child,
.inloff-pag-el-taller .inloff-tl-destacado p,
.inloff-pag-el-taller .inloff-tl-oficio__item > .col-inner,
.inloff-pag-el-taller .inloff-tl-oficio__nota > .col-inner {
	border-top-color: transparent;
}

.inloff-pag-el-taller .inloff-tl-sellos__list li,
.inloff-pag-el-taller .inloff-tl-lista li,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item {
	border-bottom-color: transparent;
}

/* Los que van arriba, cada uno encima del borde que sustituye (de ahí el
   desplazamiento negativo: el 0 de un absoluto es el borde INTERIOR). */
.inloff-pag-el-taller .inloff-tl-lista li:first-child::before,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:first-child::before,
.inloff-pag-el-taller .inloff-tl-oficio__item > .col-inner::before,
.inloff-pag-el-taller .inloff-tl-oficio__nota > .col-inner::before {
	top: -1px;
}

.inloff-pag-el-taller .inloff-tl-sellos::before,
.inloff-pag-el-taller .inloff-tl-destacado p::before {
	top: -2px;
	height: 2px;
}

/* Y los que van abajo. */
.inloff-pag-el-taller .inloff-tl-sellos__list li:not(:last-child)::after,
.inloff-pag-el-taller .inloff-tl-lista li::after,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item::after {
	bottom: -1px;
}

/* Cada filete conserva el color del que sustituye. */
.inloff-pag-el-taller .inloff-tl-sellos::before {
	background-color: var(--inloff-navy);
}

.inloff-pag-el-taller .inloff-tl-destacado p::before {
	background-color: var(--inloff-heart-dark);
}

.inloff-pag-el-taller .inloff-tl-oficio__item > .col-inner::before {
	background-color: rgba(250, 247, 242, 0.22);
}

.inloff-pag-el-taller .inloff-tl-oficio__nota > .col-inner::before {
	background-color: rgba(250, 247, 242, 0.18);
}

/* — El orden del pautado ---------------------------------------------------
   Quién va detrás de quién dentro de su columna. Se numera con `nth-child` y no
   desde el script porque el escalonado del script es por COLUMNAS, y aquí las
   secciones que importan tienen una sola.

   El 8 de partida es la red: el contenido lo edita quien lleva la tienda desde
   el constructor, y el día que añada un sexto paso a la lista o una FAQ más, la
   pieza nueva se va al final del pautado en vez de colarse la primera (que es lo
   que pasaría si su número se quedara sin definir y cayera al 0). */

.inloff-pag-el-taller .inloff-tl-lista li,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item {
	--tl-trazo-n: 8;
}

.inloff-pag-el-taller .inloff-tl-lista li:nth-child(1),
.inloff-pag-el-taller .inloff-tl-sellos__list li:nth-child(1),
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:nth-child(1) { --tl-trazo-n: 1; }

.inloff-pag-el-taller .inloff-tl-lista li:nth-child(2),
.inloff-pag-el-taller .inloff-tl-sellos__list li:nth-child(2),
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:nth-child(2) { --tl-trazo-n: 2; }

.inloff-pag-el-taller .inloff-tl-lista li:nth-child(3),
.inloff-pag-el-taller .inloff-tl-sellos__list li:nth-child(3),
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:nth-child(3) { --tl-trazo-n: 3; }

.inloff-pag-el-taller .inloff-tl-lista li:nth-child(4),
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:nth-child(4) { --tl-trazo-n: 4; }

.inloff-pag-el-taller .inloff-tl-lista li:nth-child(5),
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:nth-child(5) { --tl-trazo-n: 5; }

.inloff-pag-el-taller .inloff-tl-lista li:nth-child(6),
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:nth-child(6) { --tl-trazo-n: 6; }

.inloff-pag-el-taller .inloff-tl-lista li:nth-child(7),
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:nth-child(7) { --tl-trazo-n: 7; }

/* La línea que ABRE un grupo se traza antes que la que cierra su primera fila,
   aunque las dos cuelguen del mismo elemento. Si compartieran número saldrían a
   la vez y el primer paso de la lista aparecería enmarcado de golpe, que es
   justo el efecto de bloque que se quería deshacer. */
.inloff-pag-el-taller .inloff-tl-lista li:first-child::before,
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:first-child::before {
	--tl-trazo-n: 0;
}

/* El destacado es la única floritura de la página: una sola línea de bronce
   sobre la cita. Va un punto más tarde y más despacio que el resto —es un
   subrayado a mano, no una raya de pauta— y no tiene con quién escalonarse.
   El «más despacio» se pide como un múltiplo del trazo común y no como los
   980ms que había escritos aquí: así es un acento sobre la duración de la casa
   y no un cuarto número suelto, y sigue al trazo si la casa cambia de pulso.

   Los DOS valores de `transition-duration` no son decoración: este atajo va
   posición a posición contra el `transition` de la anatomía común, que declara
   `transform` y luego `background-color`. Con uno solo, el color del filete
   pasaría a heredar también los 984ms y el cambio a bronce de la FAQ se
   arrastraría. Si algún día se reordena aquel atajo, hay que reordenar este. */
.inloff-pag-el-taller .inloff-tl-destacado p::before {
	--tl-trazo-n: 2;
	transition-duration: calc(var(--inloff-mov-trazo, 820ms) * 1.2), var(--inloff-mov-estado, 300ms);
}

/* — El estado escondido ----------------------------------------------------
   Va dentro de `no-preference` y no dentro de `reduce` invertido: así, con
   movimiento reducido, el `scaleX(0)` sencillamente NO EXISTE. Es una garantía
   estructural en vez de una carrera de especificidades —la cadena de abajo pesa
   seis clases y cualquier contraorden tendría que igualarla— y además falla del
   lado bueno: si un navegador no entendiera la consulta, no se esconde nada.

   `.section-content > .row >` no es decoración del selector: es lo que lo hace
   funcionar. Flatsome envuelve TODA la página en un `.row-main > .col` propio, y
   ese contenedor no lo observa nadie, así que nunca recibe `.esta-dentro`. Con
   un `.col` suelto en la cadena, ese envoltorio la cumplía siempre y las
   veinte líneas se quedaban a cero para siempre, incluso con sus columnas ya
   reveladas. Se vio en vivo: la ficha del taller entraba completa y sin su
   filete de 2px. Esta es exactamente la columna que sí numera y revela la capa
   común, y ninguna otra. */
@media (prefers-reduced-motion: no-preference) {
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) .inloff-tl-sellos::before,
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) .inloff-tl-sellos__list li::after,
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) .inloff-tl-lista li::before,
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) .inloff-tl-lista li::after,
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) .accordion-item::before,
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) .accordion-item::after,
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) .inloff-tl-destacado p::before,
	html.js-mov .inloff-pag-el-taller .section-content > .row > .col:not(.esta-dentro) > .col-inner::before {
		transform: scaleX(0);
	}
}

/* — La FAQ abierta ---------------------------------------------------------
   La página no tiene más lenguaje gráfico que sus líneas, así que el estado
   abierto se marca con una línea y no con un fondo ni una tarjeta: el filete que
   cierra la respuesta pasa a bronce. Junto al título, que ya se pone bronce al
   abrirse (regla de más arriba), deja la respuesta abierta entre dos marcas del
   mismo color sin meter un solo color nuevo en la página.
   `:has()` y no una clase en el ítem porque Flatsome solo marca el título. */
.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:has(.accordion-title.active)::after {
	background-color: var(--inloff-bronze-text);
}

/* — Micro-respuestas -------------------------------------------------------
   Los enlaces del cuerpo y los del cierre cambian de color Y de color de
   subrayado al apuntarlos, y hasta ahora los dos saltaban de golpe: en la banda
   navy del cierre, donde el enlace va de crema apagada a heart claro, el salto
   era lo bastante grande como para leerse como un parpadeo. Es lo único
   interactivo de la página aparte del botón y del acordeón, que ya responden. */
.inloff-pag-el-taller .inloff-tl p a,
.inloff-pag-el-taller .inloff-tl li a {
	transition:
		color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, ease-out),
		text-decoration-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, ease-out);
}

/* — Quieto -----------------------------------------------------------------
   Sin `scaleX(0)` (no existe ahí arriba) no queda nada que frenar salvo las
   transiciones: se apagan para que ni el cambio de color del filete de la FAQ ni
   el de los enlaces se muevan solos. Todo visible, todo pautado, nada en marcha. */
@media (prefers-reduced-motion: reduce) {
	.inloff-pag-el-taller .inloff-tl-sellos::before,
	.inloff-pag-el-taller .inloff-tl-sellos__list li:not(:last-child)::after,
	.inloff-pag-el-taller .inloff-tl-lista li:first-child::before,
	.inloff-pag-el-taller .inloff-tl-lista li::after,
	.inloff-pag-el-taller .inloff-tl-accordion .accordion-item:first-child::before,
	.inloff-pag-el-taller .inloff-tl-accordion .accordion-item::after,
	.inloff-pag-el-taller .inloff-tl-destacado p::before,
	.inloff-pag-el-taller .inloff-tl-oficio__item > .col-inner::before,
	.inloff-pag-el-taller .inloff-tl-oficio__nota > .col-inner::before {
		transform: none;
		transition: none;
	}

	.inloff-pag-el-taller .inloff-tl p a,
	.inloff-pag-el-taller .inloff-tl li a {
		transition: none;
	}
}