/* ============================================================================
   inloff · «Nuestra historia» (página 3622)
   ----------------------------------------------------------------------------
   Fichero destino: assets/css/inloff-nuestra-historia.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.

   Reglas que se respetan a propósito:
   · Mobile-first: todo se escribe para móvil y se amplía en 550px y 850px, los
     dos breakpoints reales de Flatsome.
   · Contraste AA: el heart (#C5A184) NUNCA se usa como texto sobre crema ni con
     texto blanco encima. Sobre crema, el bronce legible (--inloff-bronze-text,
     #7E5E3B: 5,7:1 sobre cream-light y 5,2:1 sobre cream-warm). Sobre navy sí
     valen el heart (6,4:1) y el heart-light (8,1:1). El heart se queda de
     filete, de viñeta y de relleno bajo texto navy.
   · Nada de filetes laterales gruesos, texto con degradado, rejillas de tarjetas
     idénticas ni el patrón «número gigante + etiqueta»: las cifras se leen como
     frases, no como carteles.
   · Las medidas de línea van en `em`, NUNCA en `ch`. El glifo «0» de Outfit es
     mucho más ancho que el carácter medio del castellano, así que un `ch` tapa
     ~1,45 caracteres reales: los topes que esta hoja declaraba en `ch` dejaban
     pasar líneas de 88-94 caracteres cuando las columnas se apilan (medido a
     849px, donde cada columna ocupa el ancho entero). El `em` escala con el
     tamaño del propio texto y no depende de la caja de un glifo concreto —ni
     de que la fuente caiga al fallback—, así que el número declarado significa
     algo. Rango editorial: 45-75 caracteres por línea. Los valores de abajo
     están medidos uno a uno a 1440, 849 y 390, no convertidos a ojo.
   · El recuento NO repite la anatomía de las fichas de envío de /como-funciona/
     (.inloff-cf-plazo: caja redondeada con sombra + pares dt/dd con filete de
     lado a lado). Ver el comentario del bloque.
   · Los plazos no se escriben aquí ni en el contenido: van con fichas
     ({produccion}, {envio}, {entrega}, {urgente}) que rellena el motor de envíos.

   La clase `inloff-pag-nuestra-historia` del <body> y el encolado de esta hoja
   NO necesitan módulo propio: los pone `inc/inloff-paginas-editoriales.php`,
   que ya lleva el slug en su mapa y busca la hoja por nombre. Basta con que el
   fichero se llame exactamente como arriba.

   @see inc/inloff-paginas-editoriales.php (clase de body + encolado)
   @see assets/css/inloff-tokens.css
   ========================================================================= */

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

.inloff-pag-nuestra-historia .inloff-nh {
	background: var(--inloff-cream-light);
	color: var(--inloff-ink);
}

/* Alternancia de fondos: bandas cálidas que marcan el ritmo de lectura. */
.inloff-pag-nuestra-historia .inloff-nh-hero,
.inloff-pag-nuestra-historia .inloff-nh-oficio {
	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 /como-funciona/. */
.inloff-pag-nuestra-historia .inloff-nh-recuento,
.inloff-pag-nuestra-historia .inloff-nh-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-nuestra-historia {
	overflow-x: hidden;
}

/* El fondo va a todo el ancho, el contenido no: al sacar la sección del
   contenedor, sus filas se quedaban pegadas a los bordes de la pantalla.
   Las dos medidas están calculadas, no elegidas a ojo. El contenedor real de
   Flatsome es `.row-main` (1220px); dentro, la columna se come 15px por lado y
   la sección otros 30px, así que el texto del resto de la página arranca en un
   bloque de 1130px. Para que el de la banda caiga en la misma vertical, la caja
   tiene que medir 1130 + los 15px de padding que se le devuelven por lado
   (1160 = --inloff-max menos 10). Ese padding es el que además mantiene la
   alineación por debajo de 1220px, donde el contenedor ya no llega a su tope.
   Medido a 1440, 1180 y 390: eyebrows de banda y de página en la misma x.
   Por debajo de ~1220px queda un desfase de 7,5px (media barra de scroll, que
   el 100vw sí cuenta y el contenedor no); es el mismo que tienen hoy la
   portada y /como-funciona/, y se deja así por coherencia. */
body.inloff-pag-nuestra-historia .inloff-nh-recuento > .section-content,
body.inloff-pag-nuestra-historia .inloff-nh-cierre > .section-content {
	max-width: calc(var(--inloff-max) - 10px);
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

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

.inloff-pag-nuestra-historia .inloff-nh-eyebrow {
	margin: 0 0 10px;
	font-family: var(--inloff-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inloff-bronze-text);
}

.inloff-pag-nuestra-historia .inloff-nh-recuento .inloff-nh-eyebrow,
.inloff-pag-nuestra-historia .inloff-nh-cierre .inloff-nh-eyebrow {
	color: var(--inloff-heart-light);
}

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

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

.inloff-pag-nuestra-historia .inloff-nh-recuento .inloff-nh-h2,
.inloff-pag-nuestra-historia .inloff-nh-cierre .inloff-nh-h2 {
	color: var(--inloff-on-navy);
}

/* 31em: a 1440 la entradilla del hero cae en 67 caracteres por línea y a 849
   —donde la columna se apila y pasa a medir 834px— en 67 en vez de los 74 que
   dejaba pasar el tope anterior. */
.inloff-pag-nuestra-historia .inloff-nh-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
	max-width: 31em;
}

/* El sub vive dentro de cabeceras de 720px, así que aquí el tope SÍ trabaja en
   escritorio: 33em lo deja en 71 caracteres (antes 80, fuera de rango). */
.inloff-pag-nuestra-historia .inloff-nh-sub {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--inloff-muted-warm);
	max-width: 33em;
}

.inloff-pag-nuestra-historia .inloff-nh-recuento .inloff-nh-sub {
	color: var(--inloff-on-navy-soft);
}

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

:where(.inloff-pag-nuestra-historia .inloff-nh-recuento) p,
:where(.inloff-pag-nuestra-historia .inloff-nh-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-nuestra-historia .inloff-nh p a,
.inloff-pag-nuestra-historia .inloff-nh li a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--inloff-heart-dark);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 500;
}

.inloff-pag-nuestra-historia .inloff-nh p a:hover,
.inloff-pag-nuestra-historia .inloff-nh li a:hover {
	color: var(--inloff-navy);
	text-decoration-color: var(--inloff-navy);
}

.inloff-pag-nuestra-historia .inloff-nh-recuento p a,
.inloff-pag-nuestra-historia .inloff-nh-cierre p a {
	text-decoration-color: var(--inloff-heart-light);
}

.inloff-pag-nuestra-historia .inloff-nh-recuento p a:hover,
.inloff-pag-nuestra-historia .inloff-nh-cierre p a:hover {
	color: var(--inloff-on-navy);
	text-decoration-color: var(--inloff-on-navy);
}

/* El anillo de foco va en bronce legible, no en heart-dark: sobre la crema
   cálida el heart-dark se queda en 2,9:1 y WCAG 1.4.11 pide 3:1. */
.inloff-pag-nuestra-historia .inloff-nh p a:focus-visible,
.inloff-pag-nuestra-historia .inloff-nh li a:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 2px;
	border-radius: 2px;
}

.inloff-pag-nuestra-historia .inloff-nh-cierre p a:focus-visible {
	outline-color: var(--inloff-heart-light);
}

/* Cabecera de sección centrada: el ancho va en CSS, no en el atributo
   `max_width` del constructor (Flatsome lo resuelve con un <style> por ID que
   alinea la caja a la derecha). `body` en el selector para ganarle a
   `.col:first-child .col-inner`.
   Que esta cabecera vaya centrada y la de «En cifras reales» a la izquierda NO
   son dos raíles peleándose: aquí la caja va centrada y el texto también, así
   que su eje es el eje de la página y encabeza una rejilla simétrica de 2x2;
   allí el texto está alineado a la izquierda sobre tres columnas que arrancan
   en el raíl de 147,5. El defecto es el texto a bandera izquierda empezando en
   una x que no usa nadie más, no el centrado en sí. */
body.inloff-pag-nuestra-historia .inloff-nh-secthead > .col-inner {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.inloff-pag-nuestra-historia .inloff-nh-secthead .inloff-nh-sub {
	margin-left: auto;
	margin-right: auto;
}

/* · Portada ---------------------------------------------------------------- */

.inloff-pag-nuestra-historia .inloff-nh-hero__note p {
	margin: 16px 0 0;
	font-size: 0.9375rem;
	color: var(--inloff-muted-warm);
}

/* La nota del taller: una voz, no una tarjeta de datos. Por eso va en serif,
   con más interlínea y una firma separada por un filete corto. */
.inloff-pag-nuestra-historia .inloff-nh-nota {
	padding: 26px 24px 24px;
	background: var(--inloff-surface);
	border: 1px solid var(--inloff-line-warm);
	border-radius: var(--inloff-radius);
	box-shadow: var(--inloff-shadow-card);
}

.inloff-pag-nuestra-historia .inloff-nh-nota__kicker {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inloff-muted-warm);
}

/* El tope no muerde en escritorio (la tarjeta mide 373px), pero entre 550 y
   850px la columna se estira a 760 y la cita se iba a 74 caracteres por línea.
   Es el texto más editorial de la página: ahí es donde peor sienta una línea
   larga. Con 30em se queda en 63. */
.inloff-pag-nuestra-historia .inloff-nh-nota__texto {
	margin: 0;
	font-family: var(--inloff-font-serif);
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--inloff-navy);
	max-width: 30em;
}

.inloff-pag-nuestra-historia .inloff-nh-nota__firma {
	position: relative;
	margin: 22px 0 0;
	padding-top: 18px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inloff-navy);
}

.inloff-pag-nuestra-historia .inloff-nh-nota__firma::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 2px;
	background: var(--inloff-heart);
}

.inloff-pag-nuestra-historia .inloff-nh-nota__firma span {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	color: var(--inloff-muted-warm);
}

/* · Por qué existe ---------------------------------------------------------- */

/* 33em = 73 caracteres medidos a 1440 (antes 83) y 73 a 849, donde la columna
   se apila a 834px y el tope viejo dejaba pasar 88. */
.inloff-pag-nuestra-historia .inloff-nh-porque__texto p:not([class]) {
	margin: 0 0 16px;
	max-width: 33em;
}

.inloff-pag-nuestra-historia .inloff-nh-porque__texto p:not([class]):last-child {
	margin-bottom: 0;
}

/* Entradilla del bloque: un escalón de tamaño marca dónde empieza el relato,
   sin recurrir a capitulares ni a versalitas que se rompen al cambiar de ancho.
   En móvil el escalón se queda en 18/17 px porque la columna son 300px y subir
   más deja las líneas en 30 caracteres; en escritorio sube a 20 (ver la
   ampliación de 850), donde 18 contra 17 no se percibía a 634px de columna. */
.inloff-pag-nuestra-historia .inloff-nh-porque__texto p:not([class]):first-child {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--inloff-ink);
}

/* · El recuento (banda navy) ------------------------------------------------
   Tres apuntes en línea, cada uno con su filete corto de heart y la explicación
   debajo. A propósito NO hay filas con filete de lado a lado ni el par
   «etiqueta izquierda / valor derecha»: esa es la anatomía de las fichas de
   envío de /como-funciona/ (.inloff-cf-plazo, Estándar / Inloff Prime), y aquí
   no se compara nada, se cuenta lo hecho. Tampoco hay caja redondeada con
   sombra ni split 5/7: con un titular corto, la columna de 5 dejaba 310px de
   hueco muerto dentro de la banda. */

/* Esta cabecera va a bandera izquierda A PROPÓSITO: encabeza tres cifras que
   arrancan en x=147,5 y su texto está alineado a la izquierda, así que si la
   caja se centra el titular se despega 205px de lo que anuncia (fue exactamente
   lo que pasó cuando el arreglo de centrado de tokens era un catch-all para
   todas las `inloff-pag-*`). El `.col:first-child` del selector no sobra: sube
   la especificidad a 0-5-1 para que un arreglo general de columnas no vuelva a
   ganarle en silencio, sin recurrir a `!important`. Comprobado: cabecera y
   primera cifra en la misma x=147,5 a 1440. */
body.inloff-pag-nuestra-historia .inloff-nh-recuento__head.col:first-child > .col-inner {
	max-width: 720px;
	margin-left: 0;
	margin-right: auto;
}

.inloff-pag-nuestra-historia .inloff-nh-cifra__dato {
	margin: 0;
	font-family: var(--inloff-font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--inloff-on-navy);
}

.inloff-pag-nuestra-historia .inloff-nh-cifra__dato::before {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 0 0 16px;
	background: var(--inloff-heart);
}

/* El tope (24em = 360px) no llega a morder en escritorio: ahí la columna mide
   337px y manda ella, así que las tres notas caen en dos líneas exactas y los
   tres bloques miden lo mismo. Donde sí trabaja es cuando las columnas se
   apilan (por debajo de 850px): sin él, la nota se estiraría a los 760px de una
   columna de 12 y se leería como un párrafo suelto. Medido: 50 caracteres por
   línea como máximo, apilada o no. */
.inloff-pag-nuestra-historia .inloff-nh-cifra__nota {
	margin: 10px 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--inloff-on-navy-soft);
	max-width: 24em;
}

/* · El oficio --------------------------------------------------------------- */

/* 33em = 75 caracteres por línea en el peor párrafo, medido a 1440 y a 849
   (antes 80 y 88: es el texto más largo de la página y el que más se notaba). */
.inloff-pag-nuestra-historia .inloff-nh-oficio__texto p:not([class]) {
	margin: 0 0 16px;
	max-width: 33em;
}

.inloff-pag-nuestra-historia .inloff-nh-oficio__texto p:not([class]):last-child {
	margin-bottom: 0;
}

/* La columna de al lado NO repite el índice de técnicas: eso ya lo cuenta el
   párrafo y es el contenido propio de /tipos-de-personalizacion/. Aquí va la
   salida hacia las tres páginas hermanas, con una línea de qué hay en cada una.
   Enlace en navy con el filete de heart de viñeta; el subrayado lo pone la
   regla general de enlaces. */
.inloff-pag-nuestra-historia .inloff-nh-sigue {
	padding: 24px 22px;
	background: var(--inloff-surface);
	border: 1px solid var(--inloff-line-warm);
	border-radius: var(--inloff-radius);
	box-shadow: var(--inloff-shadow-card);
}

.inloff-pag-nuestra-historia .inloff-nh-sigue__kicker {
	margin: 0 0 16px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inloff-muted-warm);
}

.inloff-pag-nuestra-historia .inloff-nh-sigue__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.inloff-pag-nuestra-historia .inloff-nh-sigue__list li {
	position: relative;
	margin: 0;
	padding-left: 26px;
}

/* Viñeta de filete corto: el heart como grafismo, nunca como texto. */
.inloff-pag-nuestra-historia .inloff-nh-sigue__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 14px;
	height: 2px;
	background: var(--inloff-heart-dark);
}

.inloff-pag-nuestra-historia .inloff-nh-sigue__list li a {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inloff-navy);
}

.inloff-pag-nuestra-historia .inloff-nh-sigue__list span {
	display: block;
	margin-top: 3px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--inloff-muted-warm);
}

/* El enlace sin esto mide 21px de alto: por debajo de los 24 que pide WCAG
   2.5.8, y lo que el ojo lee como «el enlace» es la ficha entera —el <span>
   descriptivo es hermano del <a>, no hijo, así que pinchar en la descripción no
   hacía nada—. La capa estirada sobre el <li> (que ya es `position: relative`)
   convierte toda la ficha en zona de toque sin tocar el marcado, que vive en el
   constructor. Los 6px de arriba y abajo se comen parte del canal de 16px del
   grid y dejan 4px libres entre fichas: ninguna se solapa con la siguiente.
   Medido: 79px de alto de zona activa y el <a> responde en la descripción. */
.inloff-pag-nuestra-historia .inloff-nh-sigue__list li a::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

/* · Compromisos ------------------------------------------------------------- */

.inloff-pag-nuestra-historia .inloff-nh-compromiso > .col-inner {
	height: 100%;
	padding-top: 22px;
	border-top: 1px solid var(--inloff-line-warm-strong);
}

.inloff-pag-nuestra-historia .inloff-nh-compromiso__title {
	margin: 0 0 10px;
	font-family: var(--inloff-font-serif);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inloff-navy);
}

/* Ancho generoso a propósito: el filete superior cruza los 565px de la columna
   y un párrafo mucho más estrecho debajo deja el bloque descuadrado. Pero el
   tope anterior (62ch) no capaba nada: a 849px, con las fichas apiladas a ancho
   completo, las líneas llegaban a 94 caracteres. 32em las deja en 73 y sigue
   siendo un párrafo ancho bajo su filete (472px de 511 en escritorio). */
.inloff-pag-nuestra-historia .inloff-nh-compromiso p:not([class]) {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 32em;
}

/* · Cierre ------------------------------------------------------------------ */

/* Texto centrado: es donde una línea larga más daña, porque el ojo tiene que
   volver a buscar un inicio que se mueve en cada línea. 34em lo deja en 74
   caracteres (antes 85) y el bloque sigue centrado sobre el eje de la página. */
.inloff-pag-nuestra-historia .inloff-nh-cierre__texto p:not([class]) {
	margin: 0 0 16px;
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}

.inloff-pag-nuestra-historia .inloff-nh-cierre__texto p:not([class]):last-child {
	margin-bottom: 0;
}

body.inloff-pag-nuestra-historia .inloff-nh-cierre__col > .col-inner {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

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

/* El `min-height` y el `line-height` no son decoración: el `.is-large` de
   Flatsome deja el botón en 40,4px en móvil, y este es el único botón de
   conversión de la página, repetido dos veces. 48 es el objetivo táctil cómodo
   (el mínimo legal de WCAG 2.5.8 son 24, pero a un dedo eso no le vale) y es la
   misma altura que la barra fija de /como-funciona/: tener el CTA más pequeño
   que la barra sería incoherente. El line-height va 2px por debajo para que el
   texto quede centrado con el borde de 1px. */
.inloff-pag-nuestra-historia .inloff-nh .button.inloff-nh-cta,
.inloff-pag-nuestra-historia .inloff-nh .button.inloff-nh-cta:hover {
	margin: 24px 0 0;
	min-height: 48px;
	line-height: 46px;
	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 común (`inloff-movimiento.css`) y no de los
	   `--inloff-dur-*` genéricos: este botón es el mismo botón que el de las
	   otras cinco páginas editoriales y tiene que responder igual en todas. El
	   `transform` va en la respuesta corta (180 ms: lo que se toca contesta al
	   instante) y color y sombra en la de estado (300 ms), que es más lenta a
	   propósito —un cambio de color instantáneo se lee como un parpadeo—. Los
	   valores de reserva mantienen el botón vivo si esta página se abriera sin
	   la hoja común. */
	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)),
		box-shadow var(--inloff-mov-estado, 300ms)
			var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* El milímetro de subida solo se nota si algo lo sostiene: sin sombra, a 1px de
   desplazamiento el botón parece que ha temblado, no que se ha levantado. */
.inloff-pag-nuestra-historia .inloff-nh .button.inloff-nh-cta:hover {
	background-color: var(--inloff-navy-deep);
	border-color: var(--inloff-navy-deep);
	transform: translate3d(0, -1px, 0);
	box-shadow: 0 10px 24px rgba(var(--inloff-navy-rgb, 27, 37, 64), 0.22);
}

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

/* En la banda navy la sombra de arriba no existiría: es navy sobre navy. Aquí
   la sombra tiene que ser más oscura que el fondo para que se vea, así que va en
   negro rebajado y no en tinta de marca. */
.inloff-pag-nuestra-historia .inloff-nh-cierre .button.inloff-nh-cta:hover {
	background-color: var(--inloff-heart-light);
	border-color: var(--inloff-heart-light);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.inloff-pag-nuestra-historia .inloff-nh .button.inloff-nh-cta:focus-visible {
	outline: 3px solid var(--inloff-bronze-text);
	outline-offset: 3px;
}

.inloff-pag-nuestra-historia .inloff-nh-cierre .button.inloff-nh-cta:focus-visible {
	outline-color: var(--inloff-heart-light);
}

/* · Ampliaciones ------------------------------------------------------------ */

@media (min-width: 550px) {
	.inloff-pag-nuestra-historia .inloff-nh-nota {
		padding: 32px 30px 28px;
	}

	.inloff-pag-nuestra-historia .inloff-nh-sigue {
		padding: 30px 28px;
	}

	.inloff-pag-nuestra-historia .inloff-nh-nota__texto {
		font-size: 1.1875rem;
	}
}

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

	:where(.inloff-pag-nuestra-historia .inloff-nh) p {
		font-size: 1.0625rem;
	}

	/* 26px, no 21: en una banda navy donde el h2 mide 37,6px, tres cifras de 21
	   quedaban por debajo del titular de los compromisos (20px) y del lead
	   (19px) —tres niveles distintos dentro de un 5% de tamaño—, así que la
	   sección gritaba el titular y susurraba la prueba. 26 da un salto real
	   contra el cuerpo de 15px (1,73) sin convertir la cifra en un cartel: sigue
	   siendo una frase en serif, que es la decisión de arriba del fichero.
	   Medido: una sola línea a 1440 (254px de texto en 337 de columna); entre 850
	   y ~990px de ventana las tres parten en dos líneas A LA VEZ (a 945: las tres
	   a 2 líneas y los tres bloques a 162,8px de alto), así que la fila nunca
	   queda con una cifra descuadrada respecto a las otras. */
	.inloff-pag-nuestra-historia .inloff-nh-cifra__dato {
		font-size: 1.625rem;
	}

	/* El escalón de la entradilla: 20px contra los 17 del cuerpo (1,18). A 18px
	   no se percibía y el bloque no decía dónde empieza el relato. */
	.inloff-pag-nuestra-historia .inloff-nh-porque__texto p:not([class]):first-child {
		font-size: 1.25rem;
		line-height: 1.55;
	}

	/* Las dos columnas de compromisos quedan alineadas por su filete superior,
	   aunque los textos midan distinto. */
	.inloff-pag-nuestra-historia .inloff-nh-compromiso > .col-inner {
		padding-top: 26px;
		padding-right: 24px;
	}

	.inloff-pag-nuestra-historia .inloff-nh-compromiso__title {
		font-size: 1.25rem;
	}
}

/* · Movimiento — «el recuento se traza» -------------------------------------
   La capa común (`inloff-movimiento.css`) ya trae el ritmo general: cada fila es
   un compás y cada columna entra desde abajo, escalonada. Eso vale para las seis
   páginas editoriales. Lo que sigue es lo único que solo tiene sentido AQUÍ.

   EL PROBLEMA CONCRETO
   Esta es la única página con cifras, y son su prueba: «Más de 5.400 pedidos»,
   «Más de 4.900 clientes», «Más de 200 productos». El recurso obvio —contar de 0
   a N— está descartado por partida doble: haría falta JavaScript (aquí no se
   añade) y, sobre todo, un número que cuenta solo se lee cuando termina; quien
   pase desplazando deprisa se lleva una cifra a medias, que en una página de
   confianza es peor que ninguna.

   LA IDEA
   El grafismo propio de esta página ya existe y es un filete corto de cobre: el
   que va encima de cada cifra (32px) y el que firma la nota del taller (36px).
   No se le añade nada nuevo: se le da el gesto que le corresponde. El filete se
   TRAZA, de izquierda a derecha, como quien raya un libro de cuentas antes de
   anotar la entrada. Y la cifra llega detrás, en tres tiempos:

     1. la columna entra (eso lo hace la capa común),
     2. el filete se traza,
     3. la cifra asienta su tinta —de `on-navy-soft` a `on-navy`— y un instante
        después la nota hace lo mismo, subiendo 6px.

   Con el escalón de 78 ms entre columnas, los tres filetes cruzan la banda navy
   en secuencia, de izquierda a derecha: el recuento se anota delante de quien
   lee. Ese es el peso que en otras páginas daría un contador, conseguido con
   `transform` y color.

   POR QUÉ NADIE PARTE DE `opacity: 0`
   A propósito. La capa común ya se juega la visibilidad de las columnas y tiene
   su red de seguridad; duplicar esa apuesta dentro de cada columna multiplica
   las formas de que un texto se quede escondido. Aquí lo que varía es el color
   entre dos valores LEGIBLES sobre navy (`on-navy-muted` es el más flojo y da
   4,7:1) y un desplazamiento de 6px. Si `.esta-dentro` no llegara nunca —caso
   que la capa común ya cubre, pero por si acaso—, lo peor que pasa es que la
   nota se lea un punto más apagada. Nunca desaparece.
   ------------------------------------------------------------------------- */

/* El trazo de la banda navy. `transform-origin: left` para que el filete nazca
   donde nace el texto: los dos arrancan en la misma x (147,5 a 1440, medido).
   El retraso hereda `--inloff-mov-retraso` de la propia columna —la capa común
   lo calcula ahí con el índice que escribe el script—, así que el trazo respeta
   el escalonado en vez de pelearse con él: si los tres filetes salieran a la vez
   se leerían como un parpadeo, no como una secuencia. La espera de más es el
   hueco para que la columna termine de llegar antes de que se raye.

   LA REVISIÓN DEL 2026-09-19
   Los 560 ms y la curva `decidida` que había escritos aquí eran el mismo gesto
   que /el-taller/ y /sostenibilidad/ resolvían por su cuenta con otros números,
   así que el trazo subió a la capa común y esta hoja lo pide en vez de
   inventárselo. Estos filetes miden 32 px (y 36 el de la firma), muy por debajo
   del corte de ~200 px, así que les toca el paso CORTO: son la razón de que ese
   paso exista. Con el paso largo, la marca seguiría dibujándose a los 820 ms,
   mucho después de que la cifra que encabeza haya asentado su tinta a los 920,
   y los tres tiempos de abajo se leerían al revés. Con el corto se mantienen:
   medido en vivo, el filete va por la mitad cuando la cifra empieza a asentar y
   está al 81 % cuando arranca la nota, y termina a los 610 ms —bastante antes
   que la cifra—, que es exactamente el orden que esta banda quiere. */
html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra .inloff-nh-cifra__dato::before {
	transform: scaleX(0);
	transform-origin: left center;
}

html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra.esta-dentro .inloff-nh-cifra__dato::before {
	transform: none;
	transition: transform var(--inloff-mov-trazo-corto, 460ms)
		var(--inloff-mov-trazo-curva, cubic-bezier(0.42, 0.06, 0.24, 1))
		calc(var(--inloff-mov-retraso, 0ms) + var(--inloff-mov-trazo-espera, 150ms));
}

/* La tinta de la cifra. Empieza en `on-navy-soft` (9,1:1 sobre navy: legible de
   sobra desde el primer fotograma) y asienta en `on-navy`. El salto es pequeño a
   propósito: lo que tiene que notarse es que la cifra ACABA de llegar, no que
   cambia de color. */
html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra .inloff-nh-cifra__dato {
	color: var(--inloff-on-navy-soft);
}

html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra.esta-dentro .inloff-nh-cifra__dato {
	color: var(--inloff-on-navy);
	transition: color 620ms var(--inloff-mov-suave, cubic-bezier(0.25, 1, 0.5, 1))
		calc(var(--inloff-mov-retraso, 0ms) + 300ms);
}

/* La nota, un tiempo detrás: así la cifra se lee sola durante ~120 ms antes de
   que llegue su explicación, que es exactamente el orden en que se quiere que se
   lean. Sube 6px, no 22: no vuelve a entrar en escena —ya entró con su columna—,
   solo se acomoda. */
html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra .inloff-nh-cifra__nota {
	color: var(--inloff-on-navy-muted);
	transform: translate3d(0, 6px, 0);
}

html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra.esta-dentro .inloff-nh-cifra__nota {
	color: var(--inloff-on-navy-soft);
	transform: none;
	transition: color 620ms var(--inloff-mov-suave, cubic-bezier(0.25, 1, 0.5, 1))
			calc(var(--inloff-mov-retraso, 0ms) + 420ms),
		transform 620ms var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1))
			calc(var(--inloff-mov-retraso, 0ms) + 420ms);
}

/* El mismo trazo, arriba del todo, en la firma de la nota del taller. Va aquí y
   no por decoración: es el primer filete de cobre que se ve al abrir la página y
   enseña el gesto que la banda de cifras cobra después. Sin esto, el trazo del
   recuento aparecería de la nada a media página. Con esto, rima. */
html.js-mov .inloff-pag-nuestra-historia .inloff-nh-hero__aside .inloff-nh-nota__firma::before {
	transform: scaleX(0);
	transform-origin: left center;
}

/* Los 280 ms que había aquí escritos a mano se dicen ahora con el vocabulario
   común y salen en 274: la espera del trazo más dos renglones de escalón. No es
   un rodeo para llegar al mismo sitio —es lo que ese número siempre quiso
   decir—: esta firma no compite con nada en su columna, va dos puestos por
   detrás del cuerpo de la nota, y así lo sigue haciendo si la casa cambia de
   pulso en vez de quedarse anclada a un número que ya no significaría nada. */
html.js-mov .inloff-pag-nuestra-historia .inloff-nh-hero__aside.esta-dentro .inloff-nh-nota__firma::before {
	transform: none;
	transition: transform var(--inloff-mov-trazo-corto, 460ms)
		var(--inloff-mov-trazo-curva, cubic-bezier(0.42, 0.06, 0.24, 1))
		calc(
			var(--inloff-mov-retraso, 0ms) + var(--inloff-mov-trazo-espera, 150ms) +
			2 * var(--inloff-mov-escalon-trazo, 62ms)
		);
}

/* · Micro-respuestas de la página ------------------------------------------- */

/* Las fichas de «Sigue por aquí» son la única lista pulsable de la página, y su
   zona de toque ya es la ficha entera (ver el `::after` de más arriba). El
   problema era que no lo parecía: al pasar por encima de la descripción no
   cambiaba nada, porque el color del enlace ya ERA navy. El filete de la viñeta
   se alarga hasta casi tocar el texto (14 × 1,75 = 24,5px de los 26 de sangría),
   que es el mismo vocabulario del trazo de las cifras aplicado a un gesto de
   puntero. `:focus-within` incluido: quien navega con teclado ve lo mismo. */
.inloff-pag-nuestra-historia .inloff-nh-sigue__list li::before {
	transform-origin: left center;
	transition: transform var(--inloff-mov-estado, 300ms)
		var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-pag-nuestra-historia .inloff-nh-sigue__list li:hover::before,
.inloff-pag-nuestra-historia .inloff-nh-sigue__list li:focus-within::before {
	transform: scaleX(1.75);
}

/* Respeta a quien pide menos movimiento.
   No es «lo mismo pero rápido»: es sin movimiento y con todo en su estado final,
   el legible. Por eso aquí no se apaga solo la transición —eso dejaría los
   filetes a `scaleX(0)`, es decir, invisibles— sino también el estado inicial.
   Cada par de selectores repite el de la regla que anula para ganarle en
   especificidad sin recurrir a `!important`. */
@media (prefers-reduced-motion: reduce) {
	.inloff-pag-nuestra-historia .inloff-nh .button.inloff-nh-cta {
		transition: none;
	}

	.inloff-pag-nuestra-historia .inloff-nh .button.inloff-nh-cta:hover {
		transform: none;
		box-shadow: none;
	}

	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra .inloff-nh-cifra__dato::before,
	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra.esta-dentro .inloff-nh-cifra__dato::before,
	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-hero__aside .inloff-nh-nota__firma::before,
	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-hero__aside.esta-dentro .inloff-nh-nota__firma::before {
		transform: none;
		transition: none;
	}

	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra .inloff-nh-cifra__dato,
	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra.esta-dentro .inloff-nh-cifra__dato {
		color: var(--inloff-on-navy);
		transition: none;
	}

	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra .inloff-nh-cifra__nota,
	html.js-mov .inloff-pag-nuestra-historia .inloff-nh-cifra.esta-dentro .inloff-nh-cifra__nota {
		color: var(--inloff-on-navy-soft);
		transform: none;
		transition: none;
	}

	.inloff-pag-nuestra-historia .inloff-nh-sigue__list li::before,
	.inloff-pag-nuestra-historia .inloff-nh-sigue__list li:hover::before,
	.inloff-pag-nuestra-historia .inloff-nh-sigue__list li:focus-within::before {
		transform: none;
		transition: none;
	}
}

/* Cierre de sección y canal entre columnas, que en Flatsome son el MISMO píxel.
   Flatsome pone `padding-bottom: 30px` a cada `.col` y lo usa para dos cosas a
   la vez: separar la última fila del pie de la sección y separar las columnas
   entre sí cuando envuelven o se apilan. Ponerlo a 0 arreglaba lo primero
   (el hueco de abajo salía 30px mayor que el de arriba: 72/102 a 1440) y rompía
   lo segundo: las tres cifras entre sí, las cuatro fichas de compromisos y
   TODAS las columnas en móvil quedaban a 0,0px, con el filete superior de cada
   bloque tocando la última línea del anterior. Un muro continuo de filetes.

   El padding se devuelve —y ahí es donde hace falta, entre columnas— y se
   descuenta con un margen negativo en la propia fila, que no afecta al canal
   interno. Resultado medido a 1440 y a 390: canal de 32px entre cifras, entre
   fichas y entre columnas apiladas, y el ritmo de sección clavado en 72/72 y
   40/40, exactamente igual que antes.

   Si algún día esto sube a tokens (es el mismo problema en las seis páginas
   editoriales), los dos valores tienen que moverse juntos o el pie se
   descuadra. */
body.inloff-pag-nuestra-historia .inloff-nh > .section-content > .row:last-child > .col,
body.inloff-pag-nuestra-historia .inloff-nh > .row:last-child > .col {
	padding-bottom: 32px;
}

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