/* ============================================================================
   inloff · «Sostenibilidad» (página 3624)
   ----------------------------------------------------------------------------
   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.
   - UN SOLO RAÍL DE ARRANQUE: x=147,5 (bandera izquierda). Es la decisión de
     página y no admite excepciones. Se toma así porque seis de las ocho
     secciones no pueden ser otra cosa: son rejillas de dos columnas y listas a
     todo el ancho de la fila, que nacen pegadas a 147,5 sin que el CSS pinte
     nada. Lo que había antes eran cinco arranques distintos (147,5 · 282,5 ·
     322,5 · 332,5 · 382,5), y el ojo, que busca el borde izquierdo de cada
     bloque para empezar a leer, tenía que recolocarse en cada sección.
   - Todas las bandas van a sangre, no solo la navy. Ver el bloque «Lienzo».
   - Las medidas de línea se declaran en `em`, NUNCA en `ch`. Ver «Tipografía».
   - El lenguaje visual NO repite el de las modalidades de envío de
     /como-funciona/ (.inloff-cf-plazo: tarjeta con sombra y radio + pares
     dt/dd separados por hairline). Aquí manda el filete: listas colgando de
     una línea, una lista tachada sin caja y una sola caja en toda la página,
     la del embalaje, con borde discontinuo de cartón.
   - Contraste AA: el heart (#C5A184) solo como filete, marca o fondo. Para
     texto pequeño sobre crema, bronce (#7E5E3B).
   - Los plazos no se escriben aquí: van en fichas ({produccion}, {envio},
     {entrega}) que rellena el motor de envíos.

   Requiere una clase estable en el <body> (inloff-pag-sostenibilidad) y el
   encolado de esta hoja, al estilo de inc/inloff-como-funciona.php.

   @see assets/css/inloff-tokens.css
   ========================================================================= */

/* ---------------------------------------------------------------------------
 * EL RAÍL — un solo punto de arranque para toda la página (x=147,5)
 *
 * Las cinco columnas con ancho máximo de la página se anclan aquí de una vez,
 * en lugar de que cada sección decidiera por su cuenta. Antes: la portada a la
 * izquierda y las otras cuatro con `margin: auto`, lo que dejaba cinco
 * arranques (147,5 · 282,5 · 322,5 · 332,5 · 382,5) en ocho secciones. El caso
 * más visible era «Duración», con 175 px de vacío a su izquierda que no usaba
 * ninguna otra sección: una caja centrada con el texto alineado a la izquierda
 * no se lee como centrada, se lee como descuadrada.
 *
 * El `margin-left: 0` no es redundante: Flatsome trae, a partir de 850 px,
 * `.col:first-child .col-inner { margin-left: auto; margin-right: 0 }`, que es
 * inerte mientras la columna ocupa el 100 % y pega la caja al borde DERECHO en
 * cuanto le pones un ancho. Por eso hay que declarar los dos márgenes.
 * ------------------------------------------------------------------------ */

body.inloff-pag-sostenibilidad .inloff-sos-hero__copy > .col-inner,
body.inloff-pag-sostenibilidad .inloff-sos-limites__intro > .col-inner,
body.inloff-pag-sostenibilidad .inloff-sos-duracion__col > .col-inner,
body.inloff-pag-sostenibilidad .inloff-sos-faq__col > .col-inner,
body.inloff-pag-sostenibilidad .inloff-sos-cierre__col > .col-inner {
	margin-left: 0;
	margin-right: auto;
}

/* Tres bloques del contenido llevan la clase `text-center` de Flatsome puesta
   desde UX Builder (la intro de la banda navy, la cabecera de dudas y el
   cierre). Centrar el texto de tres de ocho secciones en una página que es
   bandera izquierda por estructura —las rejillas de dos columnas y las listas
   a todo el ancho nacen en 147,5 y no pueden hacer otra cosa— deja dos ejes de
   lectura conviviendo. Peor aún dentro de una misma banda: el titular «Lo que
   no te vamos a prometer» se centraba en 712,5 mientras la lista que presenta
   arrancaba en 147,5, 185 px a su izquierda.
   Se neutraliza aquí, acotado a esta página, porque es una decisión visual y
   esta hoja es la capa visual. Si algún día se quiere volver a centrar, el
   sitio correcto es quitar antes esta regla, no pelearla desde el contenido. */
body.inloff-pag-sostenibilidad .inloff-sos .col-inner.text-center {
	text-align: start;
}

/* Y los subtítulos que se autocentraban dentro de su caja: mismo motivo. */
body.inloff-pag-sostenibilidad .inloff-sos .inloff-sos-sub {
	margin-left: 0;
	margin-right: 0;
}

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

.inloff-pag-sostenibilidad .inloff-sos {
	background: var(--inloff-cream-light);
	color: var(--inloff-ink);
}

/* Bandas cálidas que marcan el ritmo de lectura. */
.inloff-pag-sostenibilidad .inloff-sos-hero,
.inloff-pag-sostenibilidad .inloff-sos-materiales,
.inloff-pag-sostenibilidad .inloff-sos-faq {
	background: var(--inloff-cream-warm);
}

/* O TODAS A SANGRE O NINGUNA.
   Antes solo sangraba la navy y las siete crema se cortaban en x=117,5 con el
   blanco de #main asomando a los lados. Eso rompía la página por dos sitios a
   la vez: la crema clara (#FDFBF7) da 1,02:1 contra ese blanco, o sea que
   cuatro de las «bandas que marcan el ritmo» sencillamente no se veían; y las
   tres que sí se veían quedaban como losas flotando sobre blanco junto a una
   única banda que llegaba al borde. Una alternancia de tonos solo se lee como
   ritmo si todas las piezas llegan al mismo sitio.
   La fórmula es la que ya usaba la navy, ahora aplicada a las ocho. */
body.inloff-pag-sostenibilidad .inloff-sos {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

.inloff-pag-sostenibilidad .inloff-sos-limites {
	background: var(--inloff-navy);
	color: var(--inloff-on-navy);
}

/* El fondo va a todo el ancho; el contenido no. Flatsome da 1170 px de fila más
   15 px de padding a cada lado, así que la banda replica eso exactamente: con
   `--inloff-max + 60` medía 1230 y el contenido se salía 50 px del resto. */
body.inloff-pag-sostenibilidad .inloff-sos > .section-content {
	max-width: calc(var(--inloff-max) - 10px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* El guard del 100vw. `100vw` cuenta la barra de scroll (1440 frente a los
   1425 reales), así que cada banda asoma 7,5 px por cada lado y hay que
   recortarla. Va en #content y no en el <body>: `overflow` en el body se
   propaga al viewport, y ahí `hidden` mata cualquier `position: sticky` de la
   página. `clip` recorta sin crear contenedor de scroll — el `hidden` de la
   línea de arriba es solo el respaldo para Safari < 16, que no conoce `clip`.
   Y el padding-top se va porque, con la primera sección ya a sangre, esos
   30 px dejaban una costura blanca entre la cabecera y la banda crema. */
body.inloff-pag-sostenibilidad #content.page-wrapper {
	padding-top: 0;
	overflow-x: hidden;
	overflow-x: clip;
}

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

.inloff-pag-sostenibilidad .inloff-sos-eyebrow {
	margin: 0 0 10px;
	font-family: var(--inloff-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Bronce y no heart: en texto pequeño sobre crema el heart no llega a AA. */
	color: var(--inloff-bronze-text, var(--inloff-bronze));
}

.inloff-pag-sostenibilidad .inloff-sos-limites .inloff-sos-eyebrow {
	color: var(--inloff-heart-light);
}

.inloff-pag-sostenibilidad .inloff-sos-h1 {
	margin: 0 0 18px;
	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-sostenibilidad .inloff-sos-h2 {
	margin: 0 0 14px;
	font-family: var(--inloff-font-serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 5vw, 2.3rem);
	line-height: 1.15;
	color: var(--inloff-navy);
}

.inloff-pag-sostenibilidad .inloff-sos-limites .inloff-sos-h2 {
	color: var(--inloff-on-navy);
}

/* TOPES DE MEDIDA EN `em`, NO EN `ch` — esto es una trampa medida, no un gusto.
   El `ch` es el ancho del glifo «0», y en Outfit ese cero es ~1,45 veces el
   carácter medio del castellano (medido en esta misma página: 1,44-1,53 según
   el cuerpo). O sea que un `60ch` no capa a 60 caracteres: deja pasar 87. Con
   los valores de antes esta página iba a 87-95 caracteres por línea, y el
   rango en el que el ojo encuentra el principio de la línea siguiente sin
   perderse es 45-75. El `em` escala con el tamaño del propio texto, así que un
   solo número vale para móvil y escritorio.
   Equivalencias medidas aquí (cuerpo 17 px / 16 px, Outfit):
   32em ≈ 70-72 car. · 31em ≈ 70-72 car. */
.inloff-pag-sostenibilidad .inloff-sos-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
	max-width: 32em; /* 608 px a 19 px → 71 car. (antes 60ch = 749 px → 87) */
}

.inloff-pag-sostenibilidad .inloff-sos-sub {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--inloff-muted-warm);
	max-width: 31em; /* 496 px → 70-72 car. (antes 62ch = 652 px → 92-95) */
}

/* El cuerpo de las columnas de texto no tenía tope ninguno: heredaba el ancho
   de su columna y en «Duración», que es una columna de 780 px, se iba a
   104-107 caracteres por línea. Más ancho que su propio titular, que es lo que
   hace que un bloque parezca texto volcado y no maquetado. */
.inloff-pag-sostenibilidad .inloff-sos-texto p,
.inloff-pag-sostenibilidad .inloff-sos-duracion__col p {
	max-width: 32em; /* 544 px a 17 px → 70-72 car. */
}

.inloff-pag-sostenibilidad .inloff-sos-limites .inloff-sos-sub {
	/* Sobre navy, el gris cálido 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-sostenibilidad .inloff-sos) p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
}

:where(.inloff-pag-sostenibilidad .inloff-sos-limites) p {
	color: var(--inloff-on-navy-soft);
}

.inloff-pag-sostenibilidad .inloff-sos-texto p + p,
.inloff-pag-sostenibilidad .inloff-sos-duracion__col p + p {
	margin-top: 14px;
}

.inloff-pag-sostenibilidad .inloff-sos-nota {
	margin: 18px 0 0;
	font-size: 0.9375rem;
	color: var(--inloff-muted-warm);
}

/* La nota es una apostilla, no un párrafo más. Necesita esta regla porque la
   de `p + p` de abajo (0-3-1) le ganaba a la clase (0-2-0) y la dejaba a los
   mismos 14 px que dos párrafos seguidos: se leía como un párrafo corto y
   suelto en vez de como pie de la sección. */
.inloff-pag-sostenibilidad .inloff-sos-texto p.inloff-sos-nota {
	margin-top: 28px;
}

/* Un enlace dentro de un párrafo no se distingue solo por color (WCAG 1.4.1). */
.inloff-pag-sostenibilidad .inloff-sos p a,
.inloff-pag-sostenibilidad .inloff-sos li a,
.inloff-pag-sostenibilidad .inloff-sos span 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-sostenibilidad .inloff-sos p a:hover,
.inloff-pag-sostenibilidad .inloff-sos li a:hover,
.inloff-pag-sostenibilidad .inloff-sos span a:hover {
	color: var(--inloff-navy);
	text-decoration-color: var(--inloff-navy);
}

/* En la banda navy el enlace va al revés que en el resto de la página. Las
   reglas repiten el mismo patrón de tres partes (`p a`, `li a`, `span a`) que
   las genéricas de arriba: con una sola (`.inloff-sos-limites a`) perdían la
   cascada y el enlace se quedaba navy sobre navy, es decir 1:1 e invisible
   justo cuando el usuario apunta para hacer clic. */
.inloff-pag-sostenibilidad .inloff-sos-limites p a,
.inloff-pag-sostenibilidad .inloff-sos-limites li a,
.inloff-pag-sostenibilidad .inloff-sos-limites span a {
	color: var(--inloff-on-navy);
	text-decoration-color: var(--inloff-heart-light);
}

.inloff-pag-sostenibilidad .inloff-sos-limites p a:hover,
.inloff-pag-sostenibilidad .inloff-sos-limites li a:hover,
.inloff-pag-sostenibilidad .inloff-sos-limites span a:hover {
	color: var(--inloff-heart-light);
	text-decoration-color: var(--inloff-heart-light);
}

/* ---------------------------------------------------------------------------
 * Portada: bloque de texto estrecho y tira de datos ancha debajo
 * ------------------------------------------------------------------------ */

/* El ancho va en el CSS y no en el atributo max_width del constructor, que
   Flatsome resuelve con un <style> por ID y alinea la columna a la derecha. */
body.inloff-pag-sostenibilidad .inloff-sos-hero__copy > .col-inner {
	max-width: 820px;
}

/* La tira de la portada no lleva aquí un `padding-bottom: 0` propio: de eso se
   ocupa ahora el patrón de canal del final de la hoja, y una excepción local
   con más peso que aquel volvería a hundir el pie de la sección 32 px. */

.inloff-pag-sostenibilidad .inloff-sos-tira__list {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--inloff-line-warm-strong);
}

.inloff-pag-sostenibilidad .inloff-sos-tira__list li {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--inloff-line-warm);
}

.inloff-pag-sostenibilidad .inloff-sos-tira__t {
	display: block;
	margin-bottom: 4px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--inloff-navy);
}

.inloff-pag-sostenibilidad .inloff-sos-tira__d {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--inloff-muted-warm);
	max-width: 31em; /* inerte a 1440 (la rejilla de tres capa antes, a 53 car.) */
}

/* ---------------------------------------------------------------------------
 * Lo que así no llega a existir: lista tachada que cuelga de un filete
 * ------------------------------------------------------------------------ */

/* A propósito NO es una tarjeta. Una caja redondeada con sombra y filas
   separadas por hairline repetiría la silueta de las modalidades de envío de
   /como-funciona/ (.inloff-cf-plazo) y la página se leería como una variación
   de aquello. Aquí no hay caja: el bloque cuelga de un filete vertical y la
   lista va tachada, que es justo lo que dice el kicker. */
.inloff-pag-sostenibilidad .inloff-sos-panel {
	padding: 0 0 0 26px;
	background: none;
	border: 0;
	border-left: 2px solid var(--inloff-line-heart);
	border-radius: 0;
}

.inloff-pag-sostenibilidad .inloff-sos-panel__kicker,
.inloff-pag-sostenibilidad .inloff-sos-caja__kicker {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inloff-bronze-text, var(--inloff-bronze));
}

.inloff-pag-sostenibilidad .inloff-sos-panel__kicker {
	margin: 0 0 16px;
}

.inloff-pag-sostenibilidad .inloff-sos-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

/* El tachado refuerza, no carga solo con el significado (WCAG 1.4.1): lo dice
   el kicker. El gris cálido da 5,56:1 sobre la crema clara de la sección. */
.inloff-pag-sostenibilidad .inloff-sos-panel__list li {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--inloff-muted-warm);
	border-bottom: 0;
	text-decoration: line-through;
	text-decoration-color: var(--inloff-bronze-text);
	text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------------------
 * Apuntes de materiales: filas de libro de taller, no tarjetas
 * ------------------------------------------------------------------------ */

.inloff-pag-sostenibilidad .inloff-sos-apuntes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inloff-pag-sostenibilidad .inloff-sos-apuntes li {
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid var(--inloff-line-warm-strong);
}

.inloff-pag-sostenibilidad .inloff-sos-apuntes li:first-child {
	padding-top: 0;
	border-top: 0;
}

.inloff-pag-sostenibilidad .inloff-sos-apunte__t {
	margin: 0 0 8px;
	font-family: var(--inloff-font-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inloff-navy);
}

.inloff-pag-sostenibilidad .inloff-sos-apuntes p {
	margin: 0;
	font-size: 1rem;
	max-width: 32em; /* inerte a 1440: la rejilla ya lo deja en 55 car. */
}

/* ---------------------------------------------------------------------------
 * Caja de embalaje: borde discontinuo, como el cartón que describe
 * ------------------------------------------------------------------------ */

.inloff-pag-sostenibilidad .inloff-sos-caja {
	padding: 26px 24px;
	background: var(--inloff-cream-warm);
	border: 2px dashed var(--inloff-line-warm-strong);
	border-radius: var(--inloff-radius);
}

.inloff-pag-sostenibilidad .inloff-sos-caja__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.inloff-pag-sostenibilidad .inloff-sos-caja__list li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--inloff-ink-soft);
}

.inloff-pag-sostenibilidad .inloff-sos-caja__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--inloff-heart);
}

/* ---------------------------------------------------------------------------
 * Banda navy: lo que no prometemos
 * ------------------------------------------------------------------------ */

body.inloff-pag-sostenibilidad .inloff-sos-limites__intro > .col-inner {
	max-width: 760px; /* el arranque lo fija el bloque «EL RAÍL» de arriba */
}

/* La intro es cabecera de la lista que va debajo, no una sección aparte: se
   queda por debajo del canal de 32 px que separa columnas independientes. */
body.inloff-pag-sostenibilidad .inloff-sos-limites .inloff-sos-limites__intro.col {
	padding-bottom: 20px;
}

.inloff-pag-sostenibilidad .inloff-sos-nolist {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.inloff-pag-sostenibilidad .inloff-sos-nolist li {
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid rgba(250, 247, 242, 0.18);
}

.inloff-pag-sostenibilidad .inloff-sos-no__t {
	display: block;
	margin-bottom: 6px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--inloff-on-navy);
}

.inloff-pag-sostenibilidad .inloff-sos-no__d {
	display: block;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--inloff-on-navy-soft);
	max-width: 32em; /* 512 px → 73 car. (antes 56ch = 589 px, y la caja dejaba 77) */
}

/* ---------------------------------------------------------------------------
 * Duración y cierre: columnas de lectura, centradas y estrechas
 * ------------------------------------------------------------------------ */

body.inloff-pag-sostenibilidad .inloff-sos-duracion__col > .col-inner {
	max-width: 780px; /* el arranque lo fija el bloque «EL RAÍL» de arriba */
}

body.inloff-pag-sostenibilidad .inloff-sos-cierre__col > .col-inner {
	max-width: 660px;
}

/* El botón es un objeto de otro peso que el párrafo que lo introduce: con los
   26 px de antes quedaba a la misma distancia que dos párrafos seguidos (22) y
   no se leía el cambio de registro. */
body.inloff-pag-sostenibilidad .inloff-sos-cierre__col .inloff-sos-sub {
	margin: 0 0 30px;
}

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

.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta,
.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta:hover {
	margin: 0;
	/* 38,8 y 40,4 px medidos en móvil. Pasa el 24×24 de WCAG 2.5.8, pero por
	   debajo del dedo de 44 px de la HIG: el botón de conversión del pie no
	   puede ser el objeto más difícil de acertar de la página. `inline-flex` y
	   no `inline-block` porque Flatsome envuelve el rótulo en un <span>: con
	   block el min-height crece pero el texto se queda arriba. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	background-color: var(--inloff-navy);
	border-color: var(--inloff-navy);
	color: var(--inloff-on-navy);
	font-family: var(--inloff-font-sans);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	box-shadow: none;
}

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

.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta--sec,
.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta--sec:hover {
	/* Dentro del bloque los saltos son 10 px (antetítulo→h2) y 14 (h2→texto):
	   con 22 el botón no marcaba el cambio de tipo de elemento. */
	margin-top: 30px;
	background-color: transparent;
	border: 2px solid var(--inloff-navy);
	color: var(--inloff-navy);
	transform: none;
}

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

/* Bronce y no heart-dark: un indicador de foco necesita 3:1 contra el fondo
   (WCAG 1.4.11) y el heart-dark sobre crema cálida se queda en 2,86:1. */
.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta:focus-visible {
	outline: 3px solid var(--inloff-bronze-text, var(--inloff-bronze));
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Acordeón de dudas
 * ------------------------------------------------------------------------ */

body.inloff-pag-sostenibilidad .inloff-sos-faq__col > .col-inner {
	max-width: 860px; /* el arranque lo fija el bloque «EL RAÍL» de arriba */
}

.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item {
	border-bottom: 1px solid var(--inloff-line-warm-strong);
}

.inloff-pag-sostenibilidad .inloff-sos-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;
}

/* El acordeón vive sobre crema cálida (#F5EFE5): ahí el heart-dark da 2,86:1 y
   este texto es de 17 px semibold, o sea que necesita 4,5:1. Bronce: 5,17:1. */
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-title:hover,
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-title.active {
	color: var(--inloff-bronze-text, var(--inloff-bronze));
	background: transparent;
}

/* Flatsome ancla el icono a la izquierda y se come la primera letra. */
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-title .toggle {
	left: auto;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	opacity: 1;
	/* Icono de interfaz: 3:1 mínimo contra la crema cálida (WCAG 1.4.11). */
	color: var(--inloff-bronze-text, var(--inloff-bronze));
}

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

.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-title:focus-visible {
	outline: 3px solid var(--inloff-bronze-text, var(--inloff-bronze));
	outline-offset: 2px;
}

.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-inner {
	padding: 0 4px 20px;
}

.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-inner p {
	margin: 0;
	font-size: 1rem;
	max-width: 32em; /* 512 px → 70 car. (antes 70ch = 736 px → 97-106) */
}

/* ---------------------------------------------------------------------------
 * Ampliaciones: 550px
 * ------------------------------------------------------------------------ */

@media (min-width: 550px) {
	.inloff-pag-sostenibilidad .inloff-sos-caja {
		padding: 30px 28px;
	}

	.inloff-pag-sostenibilidad .inloff-sos-caja__list {
		gap: 14px;
	}
}

/* ---------------------------------------------------------------------------
 * Ampliaciones: 850px (escritorio)
 * ------------------------------------------------------------------------ */

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

	/* La tira de la portada se abre en tres columnas separadas por filete, y
	   ocupa todo el ancho: equilibra el bloque de texto estrecho de arriba. */
	.inloff-pag-sostenibilidad .inloff-sos-tira__list {
		margin-top: 40px;
		grid-template-columns: repeat(3, 1fr);
		border-bottom: 1px solid var(--inloff-line-warm);
	}

	.inloff-pag-sostenibilidad .inloff-sos-tira__list li {
		padding: 22px 32px 22px 0;
		border-bottom: 0;
	}

	.inloff-pag-sostenibilidad .inloff-sos-tira__list li + li {
		padding-left: 32px;
		border-left: 1px solid var(--inloff-line-warm);
	}

	/* El constructor reparte «Materiales» 4/8, y eso dejaba la cabecera en
	   296,7 px: un titular display partido a 14 caracteres por línea, con el
	   subtítulo picado en cinco líneas de 41, al lado de una columna de 733.
	   A 5/7 la cabecera respira 436 px (≈21 car. de titular) y los apuntes se
	   quedan en 634, todavía holgados. Es además el reparto que ya usa
	   «Producción» en esta misma página, en espejo. */
	body.inloff-pag-sostenibilidad .inloff-sos-materiales .inloff-sos-ledger__head {
		flex-basis: 41.6667%;
		max-width: 41.6667%;
	}

	body.inloff-pag-sostenibilidad .inloff-sos-materiales .inloff-sos-ledger {
		flex-basis: 58.3333%;
		max-width: 58.3333%;
	}

	/* Apuntes de materiales: título a la izquierda, explicación a la derecha.
	   Es una hoja de taller, no una rejilla de tarjetas.
	   La columna de rótulo baja de 240 a 200 px para compensar lo que la
	   cabecera acaba de llevarse: con 240, la explicación se quedaba en 358 px
	   (49 car.) y ahora va a 402 (55). El rótulo más largo cabe en 200. */
	.inloff-pag-sostenibilidad .inloff-sos-apuntes li {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 0 32px;
		padding: 26px 0;
	}

	.inloff-pag-sostenibilidad .inloff-sos-apunte__t {
		margin: 0;
	}

	/* Los «no» en dos columnas: cuatro filas apiladas dejaban la banda muy
	   larga y con demasiado hueco a los lados. */
	.inloff-pag-sostenibilidad .inloff-sos-nolist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 56px;
	}

	.inloff-pag-sostenibilidad .inloff-sos-nolist li:nth-child(-n+2) {
		padding-top: 0;
		border-top: 0;
	}

	.inloff-pag-sostenibilidad .inloff-sos-caja {
		padding: 34px 32px;
	}
}

/* ---------------------------------------------------------------------------
 * Respeta a quien pide menos movimiento
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta {
		transition: none;
	}

	.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Ritmo vertical: el canal entre columnas y el pie de sección
 *
 * Aquí había un `padding-bottom: 0` a la última fila para recuperar los 30 px
 * que Flatsome reserva bajo cada `.col`. Resolvía el pie hundido y creaba uno
 * peor: ese padding ES el canal vertical entre columnas, así que al anularlo
 * las columnas apiladas en móvil quedaban a 0 px unas de otras — el panel
 * tachado pegado a su párrafo, los apuntes pegados al botón — y se leían como
 * un solo muro de filetes. Medido a 390: 0 px en tres secciones.
 *
 * El patrón correcto hace las dos cosas: cada columna aporta el canal, y la
 * última fila se lo devuelve con un margen negativo del mismo valor. Así el
 * canal existe entre columnas y el pie de sección lo marca solo el padding de
 * la sección (72 px en escritorio, 40 en móvil).
 * ------------------------------------------------------------------------ */

body.inloff-pag-sostenibilidad .inloff-sos .col {
	padding-bottom: 32px;
}

body.inloff-pag-sostenibilidad .inloff-sos > .section-content > .row:last-child,
body.inloff-pag-sostenibilidad .inloff-sos > .row:last-child {
	margin-bottom: -32px;
}

/* Y lo que sobraba por debajo de la última tinta: el margen inferior que
   Flatsome da al último <p> (22,1 px) y el padding de la última fila de cada
   lista. Con esto el aire de pie deja de oscilar entre 75 y 118 px y se queda
   clavado en el mismo valor que el de cabeza. Solo en la última fila: en las
   demás ese margen es la separación real entre bloques y hace falta. */
body.inloff-pag-sostenibilidad .inloff-sos > .section-content > .row:last-child .col-inner > .text > :last-child,
body.inloff-pag-sostenibilidad .inloff-sos > .section-content > .row:last-child .col-inner > :last-child {
	margin-bottom: 0;
}

body.inloff-pag-sostenibilidad .inloff-sos-apuntes li:last-child {
	padding-bottom: 0;
}

body.inloff-pag-sostenibilidad .inloff-sos-nolist li:last-child {
	padding-bottom: 0;
}

/* En escritorio la rejilla de «no» es de dos columnas, así que la última fila
   son las DOS últimas fichas: si solo se quita el padding a una, la banda
   termina torcida. En móvil la lista es de una columna y esta regla haría lo
   contrario —pegar las dos últimas entre sí—, por eso va acotada. */
@media (min-width: 850px) {
	body.inloff-pag-sostenibilidad .inloff-sos-nolist li:nth-last-child(-n+2) {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * MOVIMIENTO PROPIO DE LA PÁGINA — el renglón se traza
 *
 * La capa común (`assets/css/inloff-movimiento.css`) ya trae el ritmo general:
 * cada columna del constructor entra desde abajo, escalonada por su posición en
 * la fila. Eso vale para las ocho secciones y no se toca. Lo que falta es lo que
 * solo tiene sentido AQUÍ.
 *
 * Esta página está hecha de filetes. No es una casualidad de maquetación: es la
 * decisión que la separa del resto del sitio —ver el bloque de cabecera, «el
 * lenguaje visual NO repite el de /como-funciona/»— y la que la hace parecer una
 * hoja de taller en vez de una rejilla de tarjetas. La tira de la portada cuelga
 * de un filete, los apuntes de materiales son cuatro renglones separados por
 * filete, los «no» de la banda navy igual, el panel tachado cuelga de un filete
 * vertical y el acordeón de dudas es una pila de filetes. Pasan de quince, y el
 * número exacto depende del ancho y de si cuentas los verticales: no lo fíes a
 * una cifra escrita aquí, que envejece a la primera fila que alguien añada.
 *
 * Así que el movimiento propio es ese: **el renglón se traza**. Cuando una
 * columna entra, sus filetes se dibujan de izquierda a derecha —los verticales,
 * de arriba abajo—, escalonados por renglón y justo detrás del texto. Se lee
 * como rayar la hoja antes de escribir en ella.
 *
 * Por qué esta y no otra: el riesgo de una página de sostenibilidad es el sello
 * verde, la hoja que crece, la barra que sube al 100 %. Todo eso promete, y el
 * titular de esta página dice literalmente lo contrario («esto es lo que hacemos
 * y esto es lo que no»). Un renglón que se traza no promete nada: es el gesto de
 * anotar lo que ya se hace. Materia —lápiz sobre papel—, no naturaleza
 * ilustrada.
 *
 * CÓMO, y por qué así:
 *
 * - El filete deja de ser el `border` y pasa a ser un pseudo-elemento absoluto
 *   de 1 px encima de ese mismo borde, que se escala en X (o en Y). Un `border`
 *   no se puede trazar: animar su grosor es animar la maqueta, que es justo lo
 *   que prohíbe la capa común. El borde real se queda ahí, transparente, porque
 *   sigue aportando su píxel de alto: si se quitara, los renglones
 *   moverían la página al cargar. Comprobado con una diferencia de píxeles del
 *   pantallazo completo antes/después, a 1440 y a 390: cero desplazamiento y
 *   cero diferencia dentro de `.inloff-sos` — los filetes trazados caen
 *   exactamente donde estaban los bordes.
 *
 * - El pseudo-elemento existe SIEMPRE, no solo con JavaScript. Lo único que
 *   cuelga de `html.js-mov` es su estado encogido, igual que hace la capa común.
 *   Si el script no llega, la clase se retira sola (ver `inc/inloff-movimiento.php`)
 *   y los filetes están dibujados desde el primer pintado. Un filete
 *   que no aparece no es contenido perdido, pero una página de listas sin
 *   ninguna línea sí es otra página.
 *
 * - El retraso suma tres cosas: el de la propia columna (`--inloff-mov-retraso`,
 *   que pone la capa común en el `.col` y hereda hasta aquí), una espera corta y
 *   el escalón del renglón. El orden importa: si el filete se trazara a la vez
 *   que su columna entra, sería un detalle más de la entrada y no se vería;
 *   detrás, se lee como un segundo tiempo.
 *
 * - La curva y la duración ya no se eligen aquí: las pide la capa común. Esta
 *   hoja había descartado `decidida` (expo) con el argumento correcto —sobre
 *   los 1130 px de la tira de la portada, la expo cubre casi todo en los
 *   primeros 100 ms y el resto se arrastra— pero se quedó en `suave` (quart),
 *   que es el mismo problema un poco más tarde: medido en producción el
 *   2026-09-19, ese filete iba por 788 px a los 170 ms de arrancar. El 70 % del
 *   recorrido. La curva del trazo de la capa común es la que resuelve lo que
 *   esta nota pedía, porque arranca despacio en vez de frenar al final; con
 *   ella el mismo filete va por 145 px a los 170 ms y se ve dibujarse entero.
 *
 * - LA REVISIÓN DEL 2026-09-19. Las tres páginas editoriales que tienen este
 *   gesto lo habían inventado por separado, con tres duraciones y tres curvas.
 *   Ahora el trazo es vocabulario de la casa y esta hoja no tiene tiempos
 *   propios: los pide. Lo que cambia aquí es la duración (620 → 820 ms, la del
 *   filete largo) y el escalón (58 → 62 ms, que además rescata el renglón de
 *   por debajo del suelo de 60 ms que declara la capa común).
 * ------------------------------------------------------------------------ */

/* El índice del renglón dentro de su lista. Se escribe en el `li` (o en el
   `.accordion-item`) y el pseudo-elemento lo hereda. Va por `nth-child` y no
   desde JavaScript a propósito: estas cuatro listas son contenido fijo del
   constructor, no rejillas que crezcan solas, y el script de movimiento no pinta
   estilos ni debe empezar a hacerlo por esta página. Seis posiciones cubren la
   lista más larga (cuatro) con holgura para que quepa una quinta o una sexta sin
   volver aquí. */
.inloff-pag-sostenibilidad :is(
	.inloff-sos-tira__list li,
	.inloff-sos-apuntes li,
	.inloff-sos-nolist li,
	.inloff-sos-accordion .accordion-item
):nth-child(2) { --sos-i: 1; }

.inloff-pag-sostenibilidad :is(
	.inloff-sos-tira__list li,
	.inloff-sos-apuntes li,
	.inloff-sos-nolist li,
	.inloff-sos-accordion .accordion-item
):nth-child(3) { --sos-i: 2; }

.inloff-pag-sostenibilidad :is(
	.inloff-sos-tira__list li,
	.inloff-sos-apuntes li,
	.inloff-sos-nolist li,
	.inloff-sos-accordion .accordion-item
):nth-child(4) { --sos-i: 3; }

.inloff-pag-sostenibilidad :is(
	.inloff-sos-tira__list li,
	.inloff-sos-apuntes li,
	.inloff-sos-nolist li,
	.inloff-sos-accordion .accordion-item
):nth-child(5) { --sos-i: 4; }

.inloff-pag-sostenibilidad :is(
	.inloff-sos-tira__list li,
	.inloff-sos-apuntes li,
	.inloff-sos-nolist li,
	.inloff-sos-accordion .accordion-item
):nth-child(6) { --sos-i: 5; }

/* Los anfitriones del filete tienen que ser el bloque contenedor de su propio
   renglón. Ninguno tenía `position` declarada y ninguno tiene hijos absolutos
   que esto pueda descolocar: el único absoluto de la página es el punto del
   `caja__list`, que cuelga de su propio `li` y ese `li` no está en esta lista. */
.inloff-pag-sostenibilidad .inloff-sos-tira__list,
.inloff-pag-sostenibilidad .inloff-sos-tira__list li,
.inloff-pag-sostenibilidad .inloff-sos-apuntes li,
.inloff-pag-sostenibilidad .inloff-sos-nolist li,
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item,
.inloff-pag-sostenibilidad .inloff-sos-panel {
	position: relative;
}

/* El borde real se queda: aporta el píxel de alto y el hueco exacto donde se
   dibuja el pseudo-elemento. Solo pierde el color. */
.inloff-pag-sostenibilidad .inloff-sos-tira__list { border-top-color: transparent; }
.inloff-pag-sostenibilidad .inloff-sos-tira__list li { border-bottom-color: transparent; }
.inloff-pag-sostenibilidad .inloff-sos-apuntes li { border-top-color: transparent; }
.inloff-pag-sostenibilidad .inloff-sos-nolist li { border-top-color: transparent; }
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item { border-bottom-color: transparent; }
.inloff-pag-sostenibilidad .inloff-sos-panel { border-left-color: transparent; }

/* El renglón. Geometría común: una banda de 1 px pegada al borde que sustituye.
   Los `-1px` no son un ajuste fino: el bloque contenedor de un absoluto es la
   caja de relleno, que empieza justo DESPUÉS del borde, así que un píxel hacia
   fuera lo deja exactamente encima de él.

   Nota de la revisión 2026-09-19: las curvas y duraciones de la capa común se
   piden de aquí en adelante CON valor de reserva —`var(--inloff-mov-firme,
   cubic-bezier(0.22, 1, 0.36, 1))` y no `var(--inloff-mov-firme)`—, que es como
   lo escriben las otras cinco hojas de página. El motivo no es de estilo: si
   `inloff-movimiento.css` no llegara (un despliegue a medias, la página fuera de
   la lista de `inc/inloff-movimiento.php`), una variable sin resolver invalida
   el atajo `transition` ENTERO y se pierden también los tiempos que sí eran
   válidos. Con reserva, la hoja sigue teniendo tacto por su cuenta. */
.inloff-pag-sostenibilidad .inloff-sos-tira__list::before,
.inloff-pag-sostenibilidad .inloff-sos-tira__list li::after,
.inloff-pag-sostenibilidad .inloff-sos-apuntes li::after,
.inloff-pag-sostenibilidad .inloff-sos-nolist li::after,
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	transform-origin: left center;
	pointer-events: none;
	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, cubic-bezier(0.22, 1, 0.36, 1));
	transition-delay: calc(
		var(--inloff-mov-retraso, 0ms) +
		var(--inloff-mov-trazo-espera, 150ms) +
		var(--sos-i, 0) * var(--inloff-mov-escalon-trazo, 62ms)
	);
}

.inloff-pag-sostenibilidad .inloff-sos-tira__list::before {
	top: -1px;
	background: var(--inloff-line-warm-strong);
}

.inloff-pag-sostenibilidad .inloff-sos-tira__list li::after {
	bottom: -1px;
	background: var(--inloff-line-warm);
}

.inloff-pag-sostenibilidad .inloff-sos-apuntes li::after {
	top: -1px;
	background: var(--inloff-line-warm-strong);
}

/* El primer apunte no lleva filete arriba (se lo quita el bloque «Apuntes de
   materiales»): tampoco puede tener renglón que trazar. */
.inloff-pag-sostenibilidad .inloff-sos-apuntes li:first-child::after {
	content: none;
}

.inloff-pag-sostenibilidad .inloff-sos-nolist li::after {
	top: -1px;
	/* El mismo crema al 18 % del bloque de la banda navy. */
	background: rgba(250, 247, 242, 0.18);
}

.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item::after {
	bottom: -1px;
	background: var(--inloff-line-warm-strong);
}

/* El filete vertical del panel tachado se traza hacia abajo: es el margen de la
   hoja, y un margen se traza en el sentido en que se lee la columna. Mide 168 px
   —medido a 1440—, así que pide el paso CORTO del trazo y no el largo: estirar
   una marca de ese tamaño a los 820 ms del filete que cruza una banda la deja
   arrastrándose mucho después de que su párrafo se esté leyendo. */
.inloff-pag-sostenibilidad .inloff-sos-panel::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--inloff-line-heart);
	transform-origin: center top;
	pointer-events: none;
	transition: transform var(--inloff-mov-trazo-corto, 460ms)
		var(--inloff-mov-trazo-curva, cubic-bezier(0.42, 0.06, 0.24, 1));
	transition-delay: calc(var(--inloff-mov-retraso, 0ms) + var(--inloff-mov-trazo-espera, 150ms));
}

/* El estado encogido cuelga de `html.js-mov`, como en la capa común: si el
   script no llega, la clase se retira y los renglones están ya dibujados. */
html.js-mov .inloff-pag-sostenibilidad .inloff-sos-tira__list::before,
html.js-mov .inloff-pag-sostenibilidad .inloff-sos-tira__list li::after,
html.js-mov .inloff-pag-sostenibilidad .inloff-sos-apuntes li::after,
html.js-mov .inloff-pag-sostenibilidad .inloff-sos-nolist li::after,
html.js-mov .inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item::after {
	transform: scaleX(0);
}

html.js-mov .inloff-pag-sostenibilidad .inloff-sos-panel::before {
	transform: scaleY(0);
}

/* Y se traza cuando entra su COLUMNA. El script marca `.esta-dentro` en la
   columna y nunca en estos elementos, así que el disparo es por descendencia: ni
   un selector nuevo en el script ni un observador más. Y hereda de regalo la red
   de seguridad del script —el barrido que rescata lo que quedó por encima tras
   un salto de desplazamiento—, porque lo que ese barrido marca es la columna. */
html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-tira__list::before,
html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-tira__list li::after,
html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-apuntes li::after,
html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-nolist li::after,
html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-accordion .accordion-item::after,
html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-panel::before {
	transform: none;
}

/* ---------------------------------------------------------------------------
 * Micro-respuestas: solo en lo que de verdad se toca
 * ------------------------------------------------------------------------ */

/* El acordeón, con el mismo vocabulario que la entrada: lo que señala la fila
   que tienes debajo del puntero es SU renglón, que pasa de gris cálido a cobre.
   Es la única forma de marcar una fila de esta página sin inventarle un fondo ni
   un desplazamiento; un fondo la convertiría en tarjeta, que es justo la silueta
   que esta página evita a propósito.
   El cobre sobre crema cálida da 2:1, o sea que NO puede ser el único indicador
   (WCAG 1.4.11), y no lo es: el título ya cambia a bronce en `:hover` y en
   `.active`, y el icono gira. El renglón refuerza, no informa solo.
   Va `:focus-within` porque el título es un enlace con un <button> dentro: quien
   navega con teclado tiene que ver marcada la misma fila. */
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item:hover::after,
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item:focus-within::after {
	background: var(--inloff-heart);
}

/* Y la pregunta abierta se queda marcada mientras lo esté: es la fila en la que
   está el usuario, no solo la que apunta.
   Regla aparte, y no metida en la lista de arriba, porque `:has()` no existe en
   navegadores anteriores a 2023 y allí el selector entero se descartaría — con
   él, el marcado al pasar el puntero. Separadas, lo único que se pierde es el
   estado de «abierta», que el título y el icono ya cuentan. */
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item:has(.accordion-title.active)::after {
	background: var(--inloff-heart);
}

/* Flatsome transiciona el color del título y el giro del icono con su curva por
   defecto (`ease`, simétrica). Con las de la casa el cambio sale con decisión y
   frena al llegar, que es como se mueve todo lo demás del sitio. */
.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-title,
.inloff-pag-sostenibilidad .inloff-sos-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));
}

/* El botón secundario («Ver cómo es el taller») no respondía al puntero. No por
   decisión: el `transform: none` con el que se le canceló el desplazamiento del
   botón primario —que hereda por compartir la clase `.inloff-sos-cta`— le ganaba
   también a la micro-respuesta de 1 px de la capa común, y se quedaba muerto.
   Aquí recupera el mismo gesto que el primario, y el borde acompaña al fondo:
   sin transición propia, `border-color` saltaba de golpe mientras el fondo
   entraba en 300 ms. */
.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta {
	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)),
		color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta--sec:hover {
	transform: translate3d(0, -1px, 0);
	border-color: var(--inloff-navy-deep, var(--inloff-navy));
}

/* Al pulsar, los dos vuelven a su sitio. Hay que decirlo aquí porque las reglas
   de arriba pesan más que el `:active` de la capa común y, sin esto, el botón se
   quedaría levantado justo debajo del dedo. */
.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta:active,
.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta--sec:active {
	transform: none;
	transition-duration: 80ms;
}

/* Los enlaces del cuerpo cambian de color y de subrayado a la vez, y hasta ahora
   lo hacían de golpe. No se puede usar `.inloff-enlace-editorial` de la capa
   común —el subrayado que se dibuja— porque estos enlaces los escribe quien
   lleva la tienda desde el constructor y no llevan esa clase; lo que sí se puede
   es que el cambio tarde lo que tarda cualquier otro cambio de estado. */
.inloff-pag-sostenibilidad .inloff-sos p a,
.inloff-pag-sostenibilidad .inloff-sos li a,
.inloff-pag-sostenibilidad .inloff-sos span 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));
}

/* ---------------------------------------------------------------------------
 * 850px: los renglones que cambian de sentido
 *
 * A partir de aquí la tira de la portada se abre en tres columnas: el filete
 * bajo cada dato desaparece y en su lugar hay dos separadores verticales y un
 * filete de cierre bajo toda la tira. Los verticales se trazan hacia abajo, como
 * el del panel; el de cierre, el último, cierra la portada cuando los
 * separadores ya están puestos.
 * ------------------------------------------------------------------------ */

@media (min-width: 850px) {
	.inloff-pag-sostenibilidad .inloff-sos-tira__list {
		border-bottom-color: transparent;
	}

	.inloff-pag-sostenibilidad .inloff-sos-tira__list li + li {
		border-left-color: transparent;
	}

	.inloff-pag-sostenibilidad .inloff-sos-tira__list::after {
		/* Detrás de los dos separadores, que van en 1 y 2. */
		--sos-i: 3;
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 1px;
		background: var(--inloff-line-warm);
		transform-origin: left center;
		pointer-events: none;
		transition: transform var(--inloff-mov-trazo, 820ms)
			var(--inloff-mov-trazo-curva, cubic-bezier(0.42, 0.06, 0.24, 1));
		transition-delay: calc(
			var(--inloff-mov-retraso, 0ms) +
			var(--inloff-mov-trazo-espera, 150ms) +
			var(--sos-i, 0) * var(--inloff-mov-escalon-trazo, 62ms)
		);
	}

	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-tira__list::after {
		transform: scaleX(0);
	}

	html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-tira__list::after {
		transform: none;
	}

	/* El separador vertical entre datos. La primera celda no lleva. */
	.inloff-pag-sostenibilidad .inloff-sos-tira__list li:first-child::after {
		content: none;
	}

	/* Aquí el renglón deja de ser una línea de 537 px y pasa a ser un separador
	   de 114 px de alto, así que también cambia de paso: el corto. Es el mismo
	   criterio que el filete del panel tachado —la duración sale del largo del
	   trazo, no del elemento que lo dibuja— y aquí se ve especialmente porque el
	   MISMO pseudo-elemento cruza el corte de los ~200 px al abrirse la tira.

	   Los DOS valores van posición a posición contra el `transition` de la
	   geometría común, que declara `transform` y luego `background-color`. Con
	   uno solo, el color del filete heredaría también los 460ms. Si algún día se
	   reordena aquel atajo, hay que reordenar este. */
	.inloff-pag-sostenibilidad .inloff-sos-tira__list li::after {
		top: 0;
		bottom: 0;
		left: -1px;
		right: auto;
		width: 1px;
		height: auto;
		transform-origin: center top;
		transition-duration: var(--inloff-mov-trazo-corto, 460ms), var(--inloff-mov-estado, 300ms);
	}

	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-tira__list li::after {
		transform: scaleY(0);
	}

	html.js-mov .inloff-pag-sostenibilidad .col.esta-dentro .inloff-sos-tira__list li::after {
		transform: none;
	}

	/* En la banda navy los dos primeros «no» no tienen filete arriba: la rejilla
	   es de dos columnas y esa es la primera fila. */
	.inloff-pag-sostenibilidad .inloff-sos-nolist li:nth-child(-n+2)::after {
		content: none;
	}
}

/* ---------------------------------------------------------------------------
 * Quieto: sin trazo y con todos los filetes puestos
 *
 * Va al final del fichero a propósito, y no junto al otro bloque de movimiento
 * reducido que está a mitad de la hoja. Una consulta de medios no añade peso de
 * selector, así que estas reglas solo ganan a las de arriba por orden de
 * aparición: subidas, no desharían nada de lo de aquí.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-tira__list::before,
	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-tira__list::after,
	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-tira__list li::after,
	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-apuntes li::after,
	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-nolist li::after,
	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item::after,
	html.js-mov .inloff-pag-sostenibilidad .inloff-sos-panel::before {
		transform: none;
		transition: none;
	}

	/* El cambio a cobre de la fila del acordeón se queda, pero instantáneo: dice
	   dónde estás, que es información, no decoración. */
	.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-item::after,
	.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-title,
	.inloff-pag-sostenibilidad .inloff-sos-accordion .accordion-title .toggle,
	.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta,
	.inloff-pag-sostenibilidad .inloff-sos p a,
	.inloff-pag-sostenibilidad .inloff-sos li a,
	.inloff-pag-sostenibilidad .inloff-sos span a {
		transition: none;
	}

	.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta--sec:hover,
	.inloff-pag-sostenibilidad .inloff-sos .button.inloff-sos-cta--sec:active {
		transform: none;
	}
}