/* =========================================================================
   PIMASA — hoja base
   =========================================================================
   Sin preprocesador y sin paso de compilacion: CSS nativo con custom
   properties. Se edita, se hace push y esta en el aire.

   Orden del archivo:
     1. Tokens
     2. Reset
     3. Tipografia
     4. Maquetacion
     5. Componentes
     6. Cabecera y pie
     7. Utilidades
   ========================================================================= */

/* 0. TIPOGRAFIA AUTOALOJADA ============================================== */

/*
  Roboto variable (v51). Un solo archivo por subconjunto cubre todo el rango
  100-900, asi que los tres pesos del diseno salen de 43 KB.

  El sitio con Elementor cargaba las 18 variantes desde fonts.googleapis.com,
  con la conexion a un tercero que eso implica.

  El unicode-range hace que el navegador solo descargue latin-ext si la pagina
  lo necesita de verdad. El castellano (tildes y ene) esta en latin.

  font-display: swap -> el texto se ve desde el primer momento con la fuente
  del sistema y se cambia al cargar Roboto. Nunca hay texto invisible.
*/

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* 1. TOKENS ============================================================== */

:root {
	/* --- Color de marca ---------------------------------------------------
	   Extraidos del kit global de Elementor del sitio actual, para que la
	   migracion no cambie la identidad visual. */
	--c-rojo: #ca142a;          /* Color primario Pimasa */
	--c-rojo-osc: #9e0f20;      /* Estados hover sobre el primario */
	--c-azul: #13475f;          /* Azul petroleo, color de apoyo */
	--c-azul-osc: #0d3143;
	/*
	  Los dos del kit original.

	  Se probaron oscurecidos —#CA500B y #008296, un 12% y un 20% menos de
	  luz— para que el texto blanco encima llegase a 4.5. Funcionaba: las
	  once parejas que no cumplian pasaban. Se descarto porque cambiaba la
	  cara del sitio, que es lo que estos dos colores son.

	  Queda escrito por si algun dia se retoma: son estas dos lineas, y
	  arrastran el color de las bajadas sobre banda, que con el kit van
	  oscuras porque asi SI pasan (4.53 y 4.58) y en blanco no.
	*/
	--c-naranja: #e75b0d;
	--c-naranja-osc: #7a2f07;
	--c-cian: #00a3bc;
	--c-cian-osc: #008194;
	--c-marron: #593f2e;

	/*
	  Arena: el tono claro de Metalurgia.

	  El kit le daba un segundo color, el topo #958C84, pero es oscuro a
	  medias: el texto blanco encima se queda en 3.30:1 y el negro en 4.6, o
	  sea que no funciona bien con ninguno de los dos. Se sustituia por el
	  marron y la linea se quedaba con un solo tono, la unica de las tres.

	  Este es el topo aclarado hasta que el texto oscuro va holgado. Lo de
	  «arena» no es un nombre bonito: arenas de fundicion es una de las
	  cuatro lineas de producto de la pagina.

	    texto sobre arena    11.47:1
	    titular sobre arena   6.40:1
	*/
	--c-arena: #d9d2ca;

	/*
	  Y el mismo peldaño para las otras dos lineas.
	  
	  Los tres caen en la misma luminancia —0.651, 0.658, 0.657— a
	  proposito: es el mismo escalon de la escala con distinto matiz, que es
	  justo lo que se pedia. Cambia el color, no el diseño.
	  
	  Con ellos, la banda neutra deja de ser el mismo gris en las tres
	  areas. Era el unico sitio donde no se distinguian.
	*/
	--c-bruma: #a3dee7;   /* Ambiental */
	--c-ocre: #eeceb6;    /* Transporte */

	/* --- Neutros ---------------------------------------------------------- */
	--c-blanco: #ffffff;
	--c-papel: #e6e6e6;         /* Fondo de secciones alternas, del kit */
	--c-borde: #e6e6e6;
	--c-gris: #808080;          /* «text» del kit; solo para adorno, ver --c-texto-suave */
	--c-tinta: #1c1c1c;         /* Texto principal: mas legible que #808080 */

	/*
	  La barra de la cabecera lleva texto blanco encima. Con el #808080 del
	  kit se queda en 3.95:1 y hace falta 4.5. Este gris da 4.54:1 y a ojo es
	  el mismo: el menu se lee, y el color de la barra no cambia de familia.
	*/
	--c-gris-barra: #767676;

	/* --- Semanticos -------------------------------------------------------
	   El rojo es el color de los titulares y del pie: en el kit de Elementor
	   era «primary», y los encabezados lo heredaban sin declararlo. Yo lo lei
	   al reves y puse cian en todos los titulos, cuando en realidad solo
	   estaba donde las fichas lo declaraban a mano (ver .prosa h2).
	   El azul petroleo queda para bandas y fondos oscuros.

	   En las paginas de linea, --c-titulo pasa a ser el color de esa linea:
	   asi lo heredan todos los encabezados, no solo los de la prosa. */
	--c-fondo: var(--c-blanco);
	--c-texto: var(--c-tinta);

	/*
	  El kit daba #808080 como color de texto, y sobre blanco eso son 3.95:1
	  cuando el minimo legible son 4.5. Del texto corrido del sitio entero
	  sale de aqui.

	  El valor se fija contra el papel (#E6E6E6), no contra el blanco: media
	  seccion del sitio va sobre papel y ahi el fondo esta mas cerca. 4.53:1
	  sobre papel y 5.66:1 sobre blanco.
	*/
	--c-texto-suave: #676767;

	/*
	  El cian de marca sobre blanco da 3.02:1: vale para un titular grande,
	  no para un enlace dentro de un parrafo. Y, como el texto, se mide contra
	  el papel: --c-cian-osc pasa sobre blanco (4.60) pero no sobre papel
	  (3.68). Este llega a 4.64 sobre papel y 5.79 sobre blanco.
	*/
	--c-enlace: #00707f;
	--c-enlace-hover: #006470;

	/*
	  El anillo de foco tiene que destacar del fondo que tenga detras (WCAG
	  2.2, 1.4.11: 3:1). El rojo cumple sobre blanco, pero el pie ES rojo, asi
	  que ahi el anillo era literalmente invisible. Cada superficie oscura
	  redefine el token mas abajo.
	*/
	--c-foco: var(--c-rojo);
	--c-titulo: var(--c-rojo);
	--c-subtitulo: var(--c-tinta);

	/* La bajada de la cabecera de ficha, que va sobre la banda de su linea.
	   Cada .linea-* pone el suyo; fuera de linea la cabecera es azul. */
	--c-bajada: var(--c-blanco);

	/* --- Colores de linea de negocio --------------------------------------
	   El sitio no tenia una paleta: tenia tres. Cada linea vestia sus
	   titulares y sus bandas con su propia pareja de colores, y el rojo de
	   la marca quedaba para la portada y lo que no es de ninguna linea.

	     Metalurgia   marron #593F2E  +  topo   #958C84
	     Lorbrand     naranja #E75B0D +  marron #7A2F07
	     Southblu     cian #00A3BC    +  azul   #13475F

	   Yo habia pintado las tres de cian, que era la de Southblu. Los valores
	   por defecto son los de fuera de linea; cada body.linea-* los cambia.

	     fuerte  titulares de seccion
	     suave   sus bajadas
	     banda   fondos oscuros a ancho completo */
	--c-linea-fuerte: var(--c-rojo);
	--c-linea-suave: var(--c-tinta);
	--c-linea-banda: var(--c-azul);

	/* --- Tipografia -------------------------------------------------------
	   Roboto autoalojado en 3 pesos. Elementor cargaba 18 variantes. */
	--f-base: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Escala fluida: se adapta al ancho sin media queries.
	   clamp(minimo, preferido, maximo) */
	/* El minimo era 12.5px a 320px, y por debajo de 13 cuesta leer: lo usan
	   las migas, el boton de brochure y la linea legal del pie. */
	--t-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.85rem);
	--t-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
	--t-base: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
	--t-md: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
	/*
	  Los dos peldaños de arriba son los dos presets de titular del kit, no
	  una progresion inventada. Medidos en el archivo:

	    primary    41.88px  peso 900     7 usos, los titulos de pagina
	    secondary  25.88px  peso 900    67 usos, los titulares de seccion

	  Yo daba 54.4 y 41.6: un 30% y un 61% de mas. Se veia sobre todo en
	  «Nuestra experiencia», donde un titular de 41.6px aplastaba una fila
	  de logotipos.

	  --t-2xl se queda para la portada provisional, que es una pantalla
	  sola con una frase y ahi el tamaño es el que era.
	*/
	--t-lg: clamp(1.32rem, 1.2rem + 0.55vw, 1.6175rem);   /* 25.88px */
	--t-xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.6175rem);   /* 41.88px */
	--t-2xl: clamp(2.1rem, 1.6rem + 2.5vw, 3.4rem);

	--p-normal: 400;
	--p-fuerte: 700;
	--p-titulo: 900;

	/* Del kit de Elementor: los titulos van en mayusculas y con el
	   interletraje ligeramente cerrado. */
	--interletra-titulo: -0.2px;
	--interletra-texto: -0.1px;

	--i-apretado: 1.15;
	--i-normal: 1.6;

	/* --- Espaciado --------------------------------------------------------
	   Escala de 4 px. Nombres cortos porque se usan por todas partes. */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 3rem;
	--e-8: 4rem;

	/* Aire vertical entre secciones, fluido. */
	--e-seccion: clamp(3rem, 2rem + 5vw, 6rem);

	/* --- Maquetacion ------------------------------------------------------ */
	--ancho-max: 1200px;
	/*
	   Longitud de linea comoda de leer. Ojo con la unidad: 1ch es el ancho
	   del caracter «0» —aqui 9.53px— y una letra media de Roboto mide 8.1,
	   asi que 68ch no daban 68 caracteres sino 80, medidos en la entrada del
	   18 de septiembre. Eso es el techo de la WCAG 1.4.8 y un 20% mas de
	   linea que el texto de las fichas, que va en columnas de 536 y sale a
	   58-70. Con 60ch la columna queda en 572 y la linea en unos 70.
	*/
	--ancho-texto: 60ch;
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

	/* --- Bordes y sombras -------------------------------------------------- */
	--r-sm: 2px;
	--r-md: 4px;
	--r-lg: 8px;
	/* Una sola, y apenas se usa: en todo el archivo de Elementor habia un
	   unico box-shadow en el sitio entero. */
	--sombra-1: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);

	/* --- Movimiento -------------------------------------------------------- */
	--trans: 180ms cubic-bezier(0.4, 0, 0.2, 1);

	/*
	  64 en el movil y 80 a partir de tableta.

	  La barra va pegada arriba todo el rato, asi que su alto es espacio que
	  el visitante no recupera nunca. En una pantalla de 667 de alto, 80px
	  son el 12%; 64 dejan 16 de vuelta en cada pantalla y siguen sobrando
	  para el logotipo, que ahi mide 50.

	  Lo leen ademas los heroes —80svh menos la cabecera— y el panel del menu,
	  asi que cambiarlo aqui lo cuadra todo de una vez.
	*/
	--alto-cabecera: 64px;
}

/* 2. RESET =============================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Que el ancla no quede debajo de la cabecera fija. */
	scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
}

/*
  Nada debe poder ensanchar la pagina.

  clip y no hidden: hidden convierte al body en contenedor de desplazamiento
  y rompe la cabecera pegada.
*/
body {
	overflow-x: clip;
	margin: 0;
	background: var(--c-fondo);
	color: var(--c-texto);
	font-family: var(--f-base);
	font-size: var(--t-base);
	letter-spacing: var(--interletra-texto);
	font-weight: var(--p-normal);
	line-height: var(--i-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class], ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, picture, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* Foco visible solo para quien navega con teclado. */
:focus-visible {
	outline: 3px solid var(--c-foco);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/*
  Sobre fondo oscuro el anillo se pinta en blanco. El rojo de marca da 5.76:1
  sobre blanco, pero 1.00:1 sobre el propio pie —que es rojo— y 1.62:1 sobre
  las bandas naranjas: quien navega con teclado no veia donde estaba.

  Blanco da 5.76 sobre el rojo del pie, 3.95 sobre el gris de la cabecera,
  3.56 sobre el naranja y 3.02 sobre el cian. Todo por encima del 3:1.
*/
.cabecera,
.pie,
.cabecera-pagina,
.seccion--linea,
.seccion--oscuro,
.seccion--azul,
.seccion--con-foto,
.hero,
.proximamente,
.banda-cifras,
.panel {
	--c-foco: var(--c-blanco);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/*
  Una clase en el body basta para vestir la pagina entera. La pone
  pimasa_clase_de_linea() a partir de la pagina de primer nivel, asi que las
  fichas heredan los colores de su linea sin configurar nada.
*/

/*
  Los colores salen de los tokens de arriba, no de hexadecimales repetidos.
  Antes se escribian dos veces —#e75b0d aqui y --c-naranja alla— y las
  variables quedaban huerfanas, sin que nada avisara si una de las dos copias
  se movia.

  --c-bajada es el color del subtitulo CUANDO va sobre la banda de su linea,
  que es el caso de 14 de las 17 fichas. No puede ser el mismo tono suave que
  sobre blanco: marron sobre naranja da 2.64:1 y no se lee.
*/

.linea-metalurgia {
	--c-linea-fuerte: var(--c-marron);
	--c-linea-banda: var(--c-marron);
	--c-linea-clara: var(--c-arena);
	--c-titulo: var(--c-linea-fuerte);
	--c-bajada: var(--c-blanco);
	/*
	  Metalurgia es la unica linea con un solo tono, y es a proposito.

	  Ambiental y Transporte tienen dos —cian/azul y naranja/naranja
	  oscuro—, asi que --c-linea-banda lleva el segundo. Aqui el segundo del
	  kit es el topo (#958C84), y sobre topo el texto blanco se queda en
	  3.30:1; sobre el marron da 9.65. Las dos secciones que usan cada tono
	  nunca se tocan —hay una blanca en medio—, asi que nada se lee como
	  repetido y a cambio la banda se lee bien.

	  Si algun dia se retoma, es esta linea y arrastra el contraste de todo
	  lo que va encima de esa banda.

	  El topo tampoco vale como color de texto: sobre blanco no llega al
	  minimo. Por eso la bajada se queda oscura.
	*/
}

.linea-ambiental {
	--c-linea-fuerte: var(--c-cian);
	--c-linea-suave: var(--c-azul);
	--c-linea-banda: var(--c-azul);
	--c-linea-clara: var(--c-bruma);
	--c-titulo: var(--c-linea-fuerte);
	--c-subtitulo: var(--c-linea-suave);
	--c-bajada: var(--c-azul-osc);   /* 4.53:1 sobre el cian */
}

.linea-transporte-de-materiales {
	--c-linea-fuerte: var(--c-naranja);
	--c-linea-suave: var(--c-naranja-osc);
	--c-linea-banda: var(--c-naranja-osc);
	--c-linea-clara: var(--c-ocre);
	--c-titulo: var(--c-linea-fuerte);
	--c-subtitulo: var(--c-linea-suave);
	--c-bajada: #3a1503;             /* 4.58:1 sobre el naranja */
}

/* 3. TIPOGRAFIA ========================================================== */

h1, h2, h3, h4 {
	font-weight: var(--p-titulo);
	line-height: var(--i-apretado);
	letter-spacing: var(--interletra-titulo);
	text-wrap: balance;    /* Evita titulos con una palabra huerfana */
	color: var(--c-titulo);
}

/* H1 y H2 en mayusculas, como en el kit. H3 y H4 no: son subtitulos
   descriptivos y en mayusculas serian ilegibles a esa longitud. */
h1 {
	font-size: var(--t-xl);
	text-transform: uppercase;
}

h2 {
	font-size: var(--t-lg);
	text-transform: uppercase;
}

h3 {
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--c-subtitulo);
}

h4 { font-size: var(--t-md); font-weight: var(--p-fuerte); }

p {
	text-wrap: pretty;
}

a {
	color: var(--c-enlace);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--trans);
}

a:hover {
	color: var(--c-enlace-hover);
}

strong, b {
	font-weight: var(--p-fuerte);
}

/*
  Bloque de texto editorial: hereda margenes coherentes.

  El aire entre parrafos tiene que ganar al interlineado, o los parrafos no
  se distinguen. Con line-height 1.6 sobre 17px, dentro del parrafo hay 27px
  entre lineas; con 1rem de separacion los parrafos quedaban mas juntos que
  sus propias lineas. --e-5 (1.5rem = 24px) los separa de verdad.
*/
.prosa > * + * {
	margin-top: var(--e-5);
}

.prosa {
	max-width: var(--ancho-texto);
	color: var(--c-texto-suave);
}

/*
  Los encabezados dentro del texto van centrados, y el párrafo que sigue
  inmediatamente también. Es como estaba maquetado en Elementor: un titular
  de sección centrado, su bajada centrada, y a partir de ahí texto corrido.
*/
.prosa h2,
.prosa h3 {
	margin-top: var(--e-7);
	text-align: center;
	text-wrap: balance;
}

/*
  Dos niveles, como en el original:

    h2  titular de sección  — color fuerte de la línea, mayúsculas, peso 900
    h3  su bajada           — color suave de la línea, caja normal, peso 600

  Elementor marcaba ambos como <h2> y los distinguía con presets de
  tipografía del kit. El nivel se recuperó leyendo qué preset usa cada
  encabezado en el CSS por página (ver herramientas/extraer-niveles.py).
*/
.prosa h2 {
	color: var(--c-linea-fuerte);
}

.prosa h3 {
	color: var(--c-linea-suave);
	font-size: var(--t-md);
}

.prosa h3 + p {
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
}

/* La prosa de las fichas ocupa el ancho del contenedor: con los encabezados
   centrados, limitarla a 68ch dejaría el centro descuadrado. */
.producto .prosa,
.categoria .prosa {
	max-width: none;
}

.producto .prosa > p,
.categoria .prosa > p {
	max-width: var(--ancho-texto);
}

.producto .prosa > h3 + p,
.categoria .prosa > h3 + p {
	max-width: 62ch;
}

/*
  Si el bloque pidio texto centrado, la caja del parrafo tambien va centrada.

  Las dos reglas de arriba le ponen un tope de ancho al parrafo, pero no
  margenes, asi que la caja se quedaba pegada a la izquierda y el texto se
  centraba DENTRO de ella: en mecair-goyen, «Componentes Mecair Goyen que
  intervienen...» salia 57px a la izquierda del centro de la seccion.

  .centrado.medido centra el contenedor, pero en las fichas ese contenedor
  ya ocupa todo el ancho —lo dice la primera regla— y el margen automatico
  no tiene nada que repartir. Lo estrecho es el parrafo, y era lo unico que
  nadie centraba.
*/
.prosa.centrado > * {
	margin-inline: auto;
}

.prosa ul,
.prosa ol {
	padding-left: var(--e-5);
}

.prosa li + li {
	margin-top: var(--e-2);
}

.prosa img {
	border-radius: var(--r-md);
}

/* 4. MAQUETACION ========================================================= */

.contenedor {
	width: 100%;
	max-width: var(--ancho-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.seccion {
	padding-block: var(--e-seccion);
}

/*
  Dos secciones seguidas con el mismo fondo son, a la vista, una sola: no hay
  ningun corte que marque donde acaba una y empieza la otra, pero cada una
  pone su aire y se suman. En /inicio/ «Noticias» y «Contacto» son las dos de
  papel y dejaban 184px de gris corrido en medio; en las fichas pasa en ocho
  sitios mas.

  Cuando se tocan, la de abajo no repite el aire de arriba.
*/
.seccion--papel + .seccion--papel,
.seccion--claro + .seccion--claro,
.seccion--linea + .seccion--linea,
.seccion--oscuro + .seccion--oscuro,
.seccion--azul + .seccion--azul,
.seccion:not([class*="seccion--"]) + .seccion:not([class*="seccion--"]) {
	padding-top: 0;
}

.seccion--papel {
	background: var(--c-papel);
}

.seccion--azul {
	background: var(--c-azul);
	color: var(--c-blanco);
}

.seccion--azul h1,
.seccion--azul h2,
.seccion--azul h3 {
	color: var(--c-blanco);
}

/* Rejilla automatica: las columnas se ajustan solas sin media queries. */
.rejilla {
	display: grid;
	gap: var(--e-5);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.rejilla--estrecha {
	gap: var(--e-4);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* 5. COMPONENTES ========================================================= */

/* --- Boton -------------------------------------------------------------- */
/*
  El boton lleva el color de su linea, no el rojo de la marca.

  En el archivo hay dos familias: diez botones en #CA142A y cinco en #E75B0D.
  Los naranjas estan SOLO en transporte-de-materiales —son los del contenido de
  esa pagina— y los rojos salen en las veinte, porque son los del cromo: el
  de brochure y el de la llamada a la accion. El hover de los naranjas es
  #7A2F07, que es justo el tono hondo de esa linea.

  --c-linea-fuerte ya vale rojo fuera de linea, asi que el cromo no cambia.
*/
.boton {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-3) var(--e-5);
	border: 2px solid transparent;
	border-radius: var(--r-md);
	background: var(--c-linea-fuerte);
	color: var(--c-blanco);
	font-size: var(--t-sm);
	font-weight: var(--p-fuerte);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: background var(--trans), border-color var(--trans), color var(--trans), transform var(--trans);
}

.boton:hover {
	background: var(--c-linea-suave);
	color: var(--c-blanco);
	transform: translateY(-1px);
}

.boton--claro {
	background: var(--c-blanco);
	color: var(--c-azul);
}

.boton--claro:hover {
	background: var(--c-papel);
	color: var(--c-azul-osc);
}

.boton .icono {
	width: 1.1em;
	height: 1.1em;
}

/*
  El enlace que cierra las novedades: centrado, no pegado a una columna.

  Cierra la rejilla entera, no la ultima tarjeta; a un lado pareceria que
  pertenece a la entrada que tiene encima. Va en esta hoja y no en la de la
  portada porque la pagina de Noticias no carga aquella —no lleva bloques—
  y ahi el enlace se quedaba sin margen ni centrado.
*/
.noticias__mas {
	margin-top: var(--e-6);
	text-align: center;
}

/* --- Un documento que todavia no esta terminado -------------------------- */
/*
  La politica de privacidad se publica antes de estar completa, y es a
  proposito: el cliente tiene que verla para saber que datos faltan, y esos
  datos solo los tiene el. Para que nadie la confunda con la version buena,
  el aviso de arriba y cada hueco van en rojo y se leen antes que el texto.

  Mismo tratamiento que .aviso--mal del formulario, pero escrito aqui: esta
  pagina no lleva bloques, asi que no carga la hoja de la portada.
*/
.aviso-borrador,
.falta-dato,
.propuesta {
	padding: var(--e-4) var(--e-5);
	border-left: 4px solid;
	border-radius: var(--r-md);
}

/* Rojo: falta un dato que no tenemos y solo puede dar el cliente. */
.aviso-borrador,
.falta-dato {
	border-color: var(--c-rojo);
	background: rgb(202 20 42 / 8%);
	color: var(--c-rojo-osc);
}

/*
  Neutro: ya esta redactado y solo falta el visto bueno. Se distingue del
  rojo a proposito, porque no cuesta lo mismo: uno hay que ir a buscarlo y
  el otro se resuelve diciendo que si.
*/
.propuesta {
	border-color: var(--c-texto-suave);
	background: var(--c-papel);
	color: var(--c-tinta);
}

/* --- Tarjeta ------------------------------------------------------------ */
/*
  La de las noticias, los productos y el 404. Es la misma pieza que
  .tarjetas__item del contenido, y tenia que verse igual: plana.

  Llevaba caja blanca, borde, esquinas redondeadas y sombra al pasar por
  encima. Eso es justo el cromo que se quito de .tarjetas__item al ver que
  en el archivo 120 de las 143 fichas no tenian ninguna caja y que en todo
  el sitio habia un solo box-shadow. Como el bloque de noticias se pinta con
  esta, en /inicio/ convivian los dos criterios: unas tarjetas con caja y
  sombra al lado de otras planas.
*/
.tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--c-texto);
}

.tarjeta__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-papel);
}

.tarjeta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tarjeta:hover .tarjeta__media img {
	transform: scale(1.04);
}

/* Sin caja no hay margen interior que valga: solo aire tras la foto. */
.tarjeta__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--e-2);
}

.tarjeta__media + .tarjeta__cuerpo {
	margin-top: var(--e-3);
}

/*
  Una tarjeta que es solo su titulo —las categorias que ofrece el 404— se
  queda en una linea de 21px de alto. Como el enlace se estira sobre toda la
  tarjeta, el area que responde al dedo era esa misma linea: menos de los 24
  que pide la WCAG 2.2 (2.5.8). Con relleno pasa a 37 y ademas se lee mejor.
*/
.tarjeta__cuerpo:only-child {
	padding-block: var(--e-2);
}

.tarjeta__titulo {
	font-size: var(--t-md);
	font-weight: var(--p-fuerte);
	color: var(--c-azul);
}

.tarjeta__texto {
	flex: 1;
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
}

/* El enlace cubre toda la tarjeta, pero el texto sigue siendo seleccionable
   y el foco sigue cayendo en un unico elemento. */
.tarjeta__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tarjeta__enlace {
	color: inherit;
	text-decoration: none;
}

/* --- Migas de pan -------------------------------------------------------- */
/*
  El relleno de la barra se reparte con el de los enlaces: cada miga medía
  15px de alto y hace falta 24 para poder darle con el dedo. La barra acaba
  midiendo lo mismo que antes.
*/
.migas {
	padding-block: var(--e-3);
	font-size: var(--t-xs);
	color: var(--c-texto-suave);
}

.migas a,
.migas span[aria-current] {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.migas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.migas__item + .migas__item::before {
	content: "/";
	margin-right: var(--e-2);
	color: var(--c-borde);
}

.migas a {
	color: var(--c-texto-suave);
	text-decoration: none;
}

.migas a:hover {
	color: var(--c-rojo);
	text-decoration: underline;
}

/*
  La cabecera de las fichas era una foto a 80vh con el isotipo de la linea,
  el titulo y la bajada encima. Yo la habia convertido en una banda de color
  con la foto al lado, que no se parecia a nada del original.

  La foto sigue yendo como <img> real y no como fondo de CSS: asi lleva
  srcset y alt, y entra en el pipeline de imagenes de WordPress. Con
  Elementor era un fondo, invisible para buscadores y lectores de pantalla.
*/

/*
  El fondo va en :where() para que pese cero: la cabecera lo pone como
  respaldo, y en cuanto el bloque trae su propio seccion--* ese manda.

  Antes las dos reglas tenian la misma especificidad y ganaba seccion--linea
  solo porque home.css se encola despues que esta hoja. Catorce de las
  diecisiete fichas dependian de ese detalle: tocar el orden en enqueue.php
  les habria cambiado el color sin que nadie tocase el CSS.
*/
.cabecera-pagina {
	position: relative;
	display: grid;
	align-items: center;
	padding-block: var(--e-7);
	color: var(--c-blanco);
	isolation: isolate;
}

:where(.cabecera-pagina) {
	background: var(--c-linea-banda);
}

.cabecera-pagina--con-foto {
	min-height: calc(80svh - var(--alto-cabecera));
	padding-block: var(--e-8);
}

.cabecera-pagina__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cabecera-pagina__cuerpo {
	display: grid;
	justify-items: start;
	min-width: 0;
}

/*
  Una cabecera de color a secas tambien tiene medida de lectura.

  Las diecisiete fichas heredadas llevan foto al lado, asi que su texto cae
  en una columna de 536px y nadie habia notado que no habia tope. La primera
  pagina nueva sin foto —Sensor Seal— lo enseño: la entradilla se estiraba a
  los 1120 del contenedor y salia a 164 caracteres por linea, mas del doble
  del maximo de 80 de la WCAG 1.4.8.

  No afecta a las que si tienen foto ni a las de dos columnas: esas ya se
  reparten el ancho y tienen su propia medida.
*/
.cabecera-pagina:not(.cabecera-pagina--con-foto):not(.cabecera-pagina--duo) .cabecera-pagina__cuerpo {
	max-width: var(--ancho-texto);
}

/*
  Cabecera con foto: todo a la derecha, que es como estaba.

  El hero del archivo es un contenedor con --flex-direction:row y dos hijos.
  El primero va VACIO —solo sirve para dejar ver la foto— y el segundo lleva
  el isotipo, el titular y la entradilla, uno debajo de otro y los tres con
  text-align:end. Lo he comprobado igual en ambiental, metalurgia y
  transporte: mismo armazon y misma alineacion en los tres.

  Aqui ha estado mal dos veces. Primero con el cuerpo entero empujado a la
  derecha y el isotipo dentro, encima del titulo a 72px. Luego a dos mitades,
  el texto a la izquierda y el isotipo a la derecha, que es lo que yo creia
  leer en el archivo y no es lo que pone: la mitad izquierda no lleva nada.

  El isotipo va DESPUES en el marcado, por lectura, y sube con order:-1.

  Y solo la del bloque «hero_pagina», que es la que sale del archivo: se
  reconoce porque es la unica que envuelve el cuerpo en __rejilla. Una
  entrada del blog o una pagina suelta tambien llevan foto de cabecera, pero
  no vienen de ninguna maqueta de Elementor y se quedan a la izquierda, como
  el resto del tema. Sin acotarlo, las dos entradas publicadas el 18 de
  septiembre salieron con las migas, el titular y la fecha contra el margen
  derecho, que no es como estaban.
*/
.cabecera-pagina--con-foto .cabecera-pagina__rejilla .cabecera-pagina__cuerpo {
	justify-items: end;
	text-align: end;
}

.cabecera-pagina--con-foto .cabecera-pagina__rejilla .cabecera-pagina__icono {
	order: -1;
	justify-self: end;
}

@media (min-width: 860px) {
	.cabecera-pagina--con-foto .cabecera-pagina__rejilla {
		grid-template-columns: minmax(0, 50%);
		justify-content: end;
		gap: var(--e-5);
	}
}

/*
  Cabecera a dos columnas: color plano con la foto al lado. Varias fichas
  eran asi, no una foto a pantalla completa.
*/
.cabecera-pagina__rejilla {
	display: grid;
	gap: var(--e-6);
	align-items: center;
	width: 100%;
}

@media (min-width: 860px) {
	.cabecera-pagina--duo .cabecera-pagina__rejilla {
		align-items: stretch;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--e-7);
	}

	/* No siempre la foto iba a la derecha. */
	.cabecera-pagina--duo-invertido .cabecera-pagina__media {
		order: -1;
	}

	/*
	  La foto llena su columna: no es ella quien decide cuanto mide la
	  cabecera.

	  Se pintaba a su proporcion natural, asi que el alto de la pagina
	  dependia de como fuera la fotografia. Una apaisada daba los 460 del
	  minimo; una casi cuadrada, 953, y la cabecera se iba a 1049. Medido en
	  las diecisiete fichas:

	    soporte-postventa   foto 953 -> cabecera 1049
	    poleas              foto 715 -> cabecera  811
	    las demas           foto 232-359 -> cabecera 460

	  O sea que dos fichas del mismo tipo se veian el doble de altas que sus
	  hermanas, y no por decision de nadie: por el recorte que traia la foto.

	  Ahora la columna se estira al alto de la cabecera y la foto la cubre.
	  El alto lo fija el minimo, que es lo que estaba puesto para eso.
	*/
	.cabecera-pagina--duo .cabecera-pagina__cuerpo {
		align-self: center;
	}

	/*
	  La foto va en posicion absoluta, y no es un capricho.
	  
	  Estirar la figura y darle a la imagen height:100% no basta: el 100% se
	  resuelve contra el alto de la figura, la figura lo toma de su fila, y
	  la fila lo toma de su contenido, que es la imagen. Es circular, asi
	  que el navegador se queda con el alto natural de la foto y seguiamos
	  igual: 1049 en soporte-postventa.
	  
	  Sacandola del flujo deja de contar para el tamaño intrinseco. Entonces
	  la fila la fija el minimo de la cabecera —para eso esta— y la foto
	  cubre lo que le toque.
	*/
	.cabecera-pagina--duo .cabecera-pagina__media {
		position: relative;
		align-self: stretch;
		min-height: 0;
		overflow: hidden;
	}

	.cabecera-pagina--duo .cabecera-pagina__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/*
  El alto de una ficha, lleve foto o no.

  Estaba puesto solo en las que llevan foto al lado, asi que las dos que no
  la llevan —«Filtracion y coleccion» y «Sensor Seal»— se quedaban sin
  suelo: 467 y 347 contra los 460 de todas las demas. Una cabecera de 347
  al lado de una de 460 no se lee como la misma pagina.

  El escalon de arriba —80svh, para las tres paginas de area— no se toca:
  ese si es una diferencia querida.
*/
.cabecera-pagina:not(.cabecera-pagina--con-foto) {
	min-height: calc(60svh - var(--alto-cabecera));
	padding-block: var(--e-7);
}

/* La rejilla llena la cabecera: si se queda centrada no hay alto definido
   que repartir entre sus columnas, y la foto vuelve a mandar. */
.cabecera-pagina--duo {
	align-items: stretch;
}

/*
  En pantalla estrecha la foto va apilada debajo del texto, asi que no hay
  columna que llenar y vuelve a mandar ella: 578 pixeles de alto en
  «Soporte postventa» contra 217 en «Filtros de mangas», o sea cabeceras de
  1039 y 646 en dos fichas hermanas.

  Se le da la misma proporcion que llevan las fotos de ficha en todo el
  sitio. Recortar ya se recortaba —en escritorio la foto cubre su columna—,
  asi que esto no añade tijera: la reparte igual en los dos sitios.
*/
@media (max-width: 859px) {
	.cabecera-pagina--duo .cabecera-pagina__media img {
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}
}

.cabecera-pagina__media {
	margin: 0;
}

.cabecera-pagina__media img {
	width: 100%;
}

.cabecera-pagina__icono {
	margin-bottom: var(--e-4);
}

/*
  170px en el archivo, 136 en tableta y 110 en movil (font-size del widget
  de icono). Yo daba 72 fijos: menos de la mitad.
*/
.cabecera-pagina__icono img,
.cabecera-pagina__icono .icono {
	width: auto;
	height: clamp(110px, 8vw + 62px, 170px);
	max-width: 100%;
	color: var(--c-blanco);
}

.cabecera-pagina__icono .icono {
	width: clamp(110px, 8vw + 62px, 170px);
}

.cabecera-pagina__titulo {
	color: var(--c-blanco);
	text-shadow: 0 1px 14px rgb(0 0 0 / 40%);
}

/*
  Sobre la banda de su linea, no sobre blanco: el tono suave de transporte
  (#7a2f07) sobre su propio naranja da 2.64:1 y no se lee. --c-bajada es el
  mismo tono llevado hasta pasar el contraste.
*/
.cabecera-pagina__bajada {
	margin-top: var(--e-4);
	color: var(--c-bajada);
	font-size: var(--t-md);
	font-weight: var(--p-titulo);
	line-height: var(--i-apretado);
	letter-spacing: var(--interletra-titulo);
	text-transform: uppercase;
	text-wrap: balance;
}

/*
  Blanco entero, no al 92%: sobre el naranja de linea el 92% se queda en
  3.23:1 y hace falta 4.5. Y aun con blanco puro el naranja solo da 3.56,
  asi que el texto ademas se apoya en una sombra.
*/
/*
  La entradilla: cuerpo base, y con su propia medida.

  El cuerpo estaba en --t-sm, 15.2px, por debajo de los 16.96 del texto
  corriente del sitio. Es el primer parrafo de la pagina y era el mas
  pequeno de todos, que es justo al reves de como se lee. Se notaba en
  /transporte-de-materiales/poleas/, donde la seccion de debajo es una
  pareja de dos tarjetas y su prosa va a 21.6: dos parrafos seguidos con
  un salto del 42%. Al base el escalon queda en 27%, y se lee como lo que
  es —un paso de jerarquia— y no como un descuido.

  El contraste no cambia de categoria: 16.96 sigue siendo texto normal
  —el umbral de texto grande esta en 24—, asi que el 3.56:1 sobre la
  banda naranja sigue siendo el mismo limite del kit ya anotado.

  La medida va aqui y no en el contenedor porque el tope esta en ch, y ch
  se calcula con la letra del elemento donde se aplica. Mientras la
  entradilla iba mas pequena que el contenedor, 60ch puesto arriba le
  dejaba 84 caracteres por linea; puesto aqui se resolvia con SU letra.
  Ahora que las dos van al mismo cuerpo el resultado coincide, pero la
  regla se queda: si manana cambia uno de los dos, la medida sigue siendo
  la de este parrafo.
*/
.cabecera-pagina__entrada {
	max-width: var(--ancho-texto);
	margin-top: var(--e-4);
	color: var(--c-blanco);
	font-size: var(--t-base);
	text-shadow: 0 1px 10px rgb(0 0 0 / 30%);
}

/*
  Sobre la foto —o sobre la banda de linea— las migas necesitan su propio
  contraste. Al 80% se quedaban en 2.42:1 sobre el cian y 2.78 sobre el
  naranja; en blanco entero suben a 3.02 y 3.56. El fondo de linea no da
  para mas sin cambiarle el color, asi que llevan sombra.
*/
.cabecera-pagina .migas,
.cabecera-pagina .migas a {
	color: var(--c-blanco);
	text-shadow: 0 1px 8px rgb(0 0 0 / 35%);
}

.cabecera-pagina .migas a:hover {
	color: var(--c-blanco);
}

.cabecera-pagina .migas__item + .migas__item::before {
	color: rgb(255 255 255 / 70%);
}

.cabecera-pagina .migas span[aria-current] {
	color: var(--c-blanco);
}

/* 6. CABECERA Y PIE ====================================================== */

.saltar-al-contenido {
	position: absolute;
	top: -100%;
	left: var(--e-4);
	z-index: 200;
	padding: var(--e-3) var(--e-4);
	background: var(--c-rojo);
	color: var(--c-blanco);
	border-radius: 0 0 var(--r-md) var(--r-md);
	text-decoration: none;
}

.saltar-al-contenido:focus {
	top: 0;
	color: var(--c-blanco);
}

/* --- Cabecera del sitio --------------------------------------------------- */
/*
  Gris #808080 y 80px de alto, que es lo que decia el original. La tenia en
  blanco con el menu en azul, que no se parecia a nada.

  Sobre el gris va todo en blanco: logotipo, iconos y menu. El rojo aparece
  solo al pasar por encima, igual que antes.

  Se queda pegada arriba al desplazar. Eso si me lo invente yo, pero no
  cambia como se ve: el original ya se comia los primeros 80px del hero.
*/

@media (min-width: 720px) {
	:root {
		--alto-cabecera: 80px;
	}
}

/*
  La sombra despega la barra del contenido.

  Va pegada arriba y pasa por encima de fotos, bandas de color y texto; sin
  nada debajo, en las paginas claras el limite entre barra y contenido lo
  marcaba solo el cambio de color. Es una sombra corta y floja: se nota que
  hay dos planos, no se ve la sombra.
*/
.cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-gris-barra);
	color: var(--c-blanco);
	box-shadow: 0 1px 12px rgb(0 0 0 / 18%);
}

/*
  Sobre la portada, la cabecera va sin fondo.

  Asi se veia en el archivo, aunque alli pasaba de rebote: la cabecera tenia
  su gris, pero el hero subia ochenta pixeles con margin-top:-80px y el video
  le pasaba por encima tapandoselo. El texto del menu, que es contenido en
  linea, seguia pintandose por delante.

  Aqui se hace a proposito y con una diferencia: nuestra barra va pegada
  arriba, asi que en cuanto se baja un poco recupera el fondo. Sin eso, el
  menu quedaria en blanco sobre el contenido claro de mas abajo. La del
  archivo no se quedaba pegada: se iba con el scroll y el problema no existia.
*/
body.con-portada .cabecera {
	background: transparent;
	box-shadow: none;
	transition: background var(--trans), box-shadow var(--trans);
}

body.con-portada .cabecera--posada {
	background: var(--c-gris-barra);
	box-shadow: 0 1px 12px rgb(0 0 0 / 18%);
}

.cabecera__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	min-height: var(--alto-cabecera);
	padding-block: 2px;
}

/* Se encoge con la ventana en vez de mantener 220px a toda costa. */
.cabecera__logo img {
	width: clamp(150px, 48vw, 220px);
	max-width: 100%;
	height: auto;
}

.cabecera__logo {
	min-width: 0;
	color: var(--c-blanco);
	font-weight: var(--p-titulo);
	font-size: var(--t-md);
	text-decoration: none;
}

/* --- Extras de la cabecera: redes y boton --------------------------------- */
/* La barra usa space-between, asi que los tres bloques (logotipo, extras y
   navegacion) se reparten solos. Sin margin-left:auto, que los apelotonaria
   contra el menu. */
/*
  Los extras se van con el menu, a la derecha.

  Con space-between los tres bloques se repartian el ancho y quedaban 139px
  de hueco muerto a cada lado del grupo del medio —medido a 1280 y a 1600—,
  con los iconos y el boton flotando entre el logotipo y el menu sin
  pertenecer a ninguno de los dos. Juntos a la derecha, la barra se lee como
  lo que es: la marca a un lado y lo que se pulsa al otro.

  El orden del marcado no se toca: es el del archivo —logotipo, redes, boton,
  menu— y sigue siendo ese al leerlo y al tabular.
*/
.cabecera__extras {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: var(--e-4);
}

@media (min-width: 1024px) {
	.cabecera__nav {
		margin-left: var(--e-2);
	}
}

/*
  Los iconos sin enlace se pintan igual que los demas. Comparten reglas con
  los <a> para que no se note la diferencia; lo unico que cambia es que no
  reaccionan al raton, porque no hay nada que pulsar.

  TODAS las reglas de .redes viven aqui, seguidas. Estaban partidas en dos
  sitios del archivo —este y otro junto al pie— con los mismos selectores
  repetidos, y el segundo anulaba al primero por ir despues: la regla que
  escondia los iconos en movil no llegaba a aplicarse nunca, y el hover
  documentado de la cabecera tampoco.
*/
.redes {
	display: flex;
	gap: var(--e-3);
}

.redes a,
.redes__hueco {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 50%;
	transition: background var(--trans), border-color var(--trans);
}

.redes__hueco {
	cursor: default;
}

.redes--cabecera {
	gap: 5px;
}

.redes--cabecera a,
.redes--cabecera .redes__hueco {
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	color: var(--c-blanco);
}

/* Al pasar por encima se invierte: circulo blanco, icono gris. */
.redes--cabecera a:hover {
	background: var(--c-blanco);
	color: var(--c-gris-barra);
}

.redes .icono {
	width: 18px;
	height: 18px;
}

.redes--cabecera .icono,
.redes--cabecera .redes__hueco .icono {
	width: 17px;
	height: 17px;
}

/* En el pie si hay circulo, y se rellena de rojo al pasar por encima. */
.redes--pie a:hover {
	background: var(--c-rojo-osc);
	border-color: var(--c-rojo-osc);
}

.redes--pie .icono {
	width: 22px;
	height: 22px;
}

/*
  El que vive dentro del panel del movil. Fuera del panel no existe: en la
  barra ya esta el otro.
*/
.boton--en-panel {
	display: none;
}

/* En pantallas estrechas las redes sobran de la barra: estan en el pie. */
@media (max-width: 620px) {
	.redes--cabecera {
		display: none;
	}
}

/*
  Y por debajo de 520 tampoco cabe el boton. Se va al panel del menu, donde
  sigue siendo el unico camino a /brochure/: no esta en el menu ni en el pie.
*/
@media (max-width: 520px) {
	.cabecera__extras {
		display: none;
	}

	.cabecera__nav .boton--en-panel {
		display: inline-flex;
		margin-top: var(--e-5);
	}
}

/* Boton de brochure: perfilado en blanco, rojo al pasar por encima. */
.boton--cabecera {
	padding: 5px var(--e-4);
	border: 1px solid var(--c-blanco);
	background: none;
	color: var(--c-blanco);
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.boton--cabecera:hover {
	border-color: var(--c-rojo);
	background: var(--c-rojo);
	color: var(--c-blanco);
}

/* --- Menu ---------------------------------------------------------------- */

.menu {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu > li {
	position: relative;
}

.menu__enlace {
	display: inline-block;
	padding: var(--e-3) 13px;
	color: var(--c-blanco);
	font-size: 18px;
	font-weight: var(--p-normal);
	text-transform: uppercase;
	text-decoration: none;
}

/* El subrayado rojo del original, que crecia desde el centro. */
.menu > li > .menu__enlace {
	position: relative;
}

.menu > li > .menu__enlace::after {
	content: "";
	position: absolute;
	right: 13px;
	bottom: 6px;
	left: 13px;
	height: 2px;
	background: var(--c-rojo);
	transform: scaleX(0);
	transition: transform var(--trans);
}

.menu > li > .menu__enlace:hover::after,
.menu > li:hover > .menu__enlace::after,
.menu .current-menu-item > .menu__enlace::after,
.menu .current-page-ancestor > .menu__enlace::after {
	transform: scaleX(1);
}

.menu__enlace:hover,
.menu .current-menu-item > .menu__enlace,
.menu .current-page-ancestor > .menu__enlace {
	color: var(--c-blanco);
}

/*
  El boton del desplegable existe para el teclado y para el dedo, donde no
  hay «encima». Con raton no hace falta tocarlo: basta pasar por la entrada.
*/
.menu__toggle {
	display: inline-grid;
	place-items: center;
	/*
	  24x24, que es el minimo que pide la WCAG 2.2 para algo que se pulsa
	  (2.5.8). Estaba en 20 y era el unico objetivo del sitio por debajo:
	  lo saco el barrido de cabecera y pie. El dibujo de la flecha no
	  cambia, solo la zona que responde al dedo.

	  El margen negativo se ajusta para que crecer no separe la flecha de
	  la palabra a la que pertenece.
	*/
	width: 1.5rem;
	height: 1.5rem;
	margin-left: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: currentcolor;
}

.menu__chevron {
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--trans);
}

.menu__toggle[aria-expanded="true"] .menu__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- Desplegables --------------------------------------------------------- */

/*
  Los desplegables crecen hacia la izquierda, anclados al borde derecho de
  su padre.

  Con left:0 se salian de la pantalla: el menu vive pegado a la derecha, asi
  que un panel de 250px por cada nivel se iba fuera y aparecia una barra de
  desplazamiento horizontal en toda la pagina. Pasando por «Areas» ya se
  notaba, y al entrar en una linea se iba medio panel mas.

  El original no tenia ese problema porque smartmenus recolocaba los
  desplegables con JavaScript (keepInViewport). Aqui basta con anclarlos al
  otro lado, que ademas no cuesta un script.
*/
.submenu {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	z-index: 10;
	display: none;
	min-width: 250px;
	margin: 0;
	padding: 0;
	background: var(--c-gris-barra);
	list-style: none;
}

.submenu .menu__enlace {
	display: block;
	/* El hueco de la izquierda es para la flecha del nivel siguiente. */
	padding: var(--e-3) var(--e-4) var(--e-3) var(--e-6);
	font-size: 16px;
	text-transform: none;
}

.submenu .menu__enlace:hover {
	background: var(--c-rojo);
}

.submenu li {
	position: relative;
}

/* A partir del segundo nivel sale por el lado, tambien hacia la izquierda. */
.submenu .submenu {
	top: 0;
	right: 100%;
	left: auto;
}

/* La flecha de un submenu anidado apunta a la izquierda, que es por donde
   se abre. Va a ese mismo lado para no tapar el texto. */
.submenu .menu__toggle {
	position: absolute;
	top: 50%;
	left: var(--e-1);
	margin: 0;
	transform: translateY(-50%);
}

.submenu .menu__chevron {
	transform: rotate(135deg) translate(-2px, -2px);
}

.submenu .menu__toggle[aria-expanded="true"] .menu__chevron {
	transform: rotate(-45deg) translate(-2px, -2px);
}

/*
  En pantallas de escritorio estrechas, paneles mas finos.

  La rama mas profunda encadena cuatro: Areas > Southblu > Material
  particulado > Filtracion y coleccion. A 250px cada uno hacen 1000px
  creciendo hacia la izquierda, y por debajo de ~1250px el ultimo se salia
  por el borde: medido a 1000px, empezaba en -153.
*/
@media (min-width: 901px) and (max-width: 1250px) {
	.submenu {
		min-width: 180px;
	}
}

/* Abierto a mano —con el boton— en cualquier tamano. */
.tiene-submenu.abierto > .submenu {
	display: block;
}

/*
  Con raton, basta pasar por encima. Es como funcionaba el original, y sin
  esto el menu parecia roto: «Areas» no desplegaba nada al pasar.

  focus-within lo deja abierto tambien al tabular por dentro.
*/
@media (hover: hover) and (min-width: 901px) {
	.tiene-submenu:hover > .submenu,
	.tiene-submenu:focus-within > .submenu {
		display: block;
	}
}

/* --- Menu movil ---------------------------------------------------------- */
/*
  Sin esto no hay navegacion en el movil, literalmente.

  La barra es flexible y reparte el sitio entre logotipo, extras y menu. Con
  el logotipo de 220px que no se encoge, el boton de brochure y la
  hamburguesa hacen falta 434px de ancho. A 375 la hamburguesa acababa en
  408-428: entera fuera de la pantalla. Y como el body lleva overflow-x:clip,
  tampoco se podia llegar a ella desplazandose; elementFromPoint en su centro
  no devolvia nada. Pasaba a 320, 375 y 414, o sea en casi todos los moviles.

  Ahora es lo ultimo que cede: el boton se va al panel y el logotipo se
  encoge, pero esto se queda donde esta y con sus 44px.
*/
.hamburguesa {
	display: none;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: none;
}

.hamburguesa span {
	display: block;
	height: 2px;
	background: var(--c-blanco);
	border-radius: 2px;
	transition: transform var(--trans), opacity var(--trans);
}

.hamburguesa[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hamburguesa[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.hamburguesa[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
	.hamburguesa {
		display: flex;
	}

	.cabecera__nav {
		position: fixed;
		inset: var(--alto-cabecera) 0 0;
		z-index: 90;
		display: none;
		overflow-y: auto;
		padding: var(--e-5) var(--gutter) var(--e-8);
		background: var(--c-gris-barra);
	}

	.cabecera__nav.abierto {
		display: block;
	}

	.menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu > li {
		border-bottom: 1px solid rgb(255 255 255 / 25%);
	}

	/* El subrayado rojo es cosa de la barra; en el panel estorba. */
	.menu > li > .menu__enlace::after {
		display: none;
	}

	.menu__enlace {
		padding: var(--e-4) 0;
		font-size: var(--t-md);
	}

	.tiene-submenu {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.tiene-submenu > .submenu {
		grid-column: 1 / -1;
	}

	.submenu {
		position: static;
		min-width: 0;
		padding: 0 0 var(--e-3) var(--e-4);
		background: none;
	}

	/* En el panel, la flecha vuelve a su sitio en la rejilla y apunta
	   hacia abajo: aqui no hay desplegable lateral que abrir. */
	.submenu .menu__toggle {
		position: static;
		transform: none;
	}

	.submenu .menu__chevron,
	.menu__chevron {
		transform: rotate(45deg) translate(-2px, -2px);
	}

	.submenu .menu__toggle[aria-expanded="true"] .menu__chevron,
	.menu__toggle[aria-expanded="true"] .menu__chevron {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.submenu .menu__enlace:hover {
		background: none;
		text-decoration: underline;
	}
}

/* --- Pie ------------------------------------------------------------------ */
/*
  El pie va sobre rojo, que es lo que decia el kit («primary»). Lo tuve en
  azul petroleo hasta que se noto: el azul es de las bandas, no de aqui.

  Tres columnas: marca y redes, ilustracion, y los contactos de cada linea.
  Con poco ancho la ilustracion sobra antes que los datos, asi que se va la
  primera.
*/
/*
  Blanco entero, no al 88%: sobre el rojo el 88% se queda en 4.70:1, que pasa
  por los pelos y se cae en cuanto el texto es pequeno. En blanco son 5.76.
*/
/*
  El aire de arriba y el de abajo no pueden ir 64 contra 24: el pie parecia
  colgar del contenido en vez de cerrarlo. La franja legal ya se separa sola
  con su borde.
*/
.pie {
	padding-block: var(--e-8) var(--e-6);
	background: var(--c-rojo);
	color: var(--c-blanco);
	font-size: var(--t-sm);
}

.pie a {
	color: var(--c-blanco);
	text-decoration: none;
}

.pie a:hover {
	color: var(--c-blanco);
	text-decoration: underline;
}

/*
  Tres columnas con proporcion, no con «auto».

  Con 1fr auto 1.2fr el mapa se quedaba en sus 240px naturales —la columna
  mas estrecha con el contenido mas alto, 383— y la marca se llevaba 356
  para un bloque de 134 de alto. Ahora el mapa, que es lo unico ilustrado
  que hay aqui, gana sitio, y la marca cede el que le sobraba.

  Los minimos evitan que al estrecharse la ventana los contactos partan una
  direccion en tres lineas antes de que la rejilla se apile.
*/
.pie__rejilla {
	display: grid;
	gap: var(--e-7);
	align-items: start;
	grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1fr) minmax(320px, 1.25fr);
}

.pie__marca {
	display: grid;
	gap: var(--e-5);
	justify-items: start;
}

.pie__logo img {
	width: 100%;
	max-width: 260px;
	height: auto;
}

.pie__logo--texto {
	color: var(--c-blanco);
	font-size: var(--t-lg);
	font-weight: var(--p-titulo);
	text-transform: uppercase;
}

.redes--pie .redes__hueco {
	color: inherit;
}

.pie__mapa img {
	width: 100%;
	max-width: 240px;
	height: auto;
}

.pie__contactos {
	display: grid;
	gap: var(--e-5) var(--e-6);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Los datos generales cruzan las columnas: son de la casa, no de una linea. */
.pie__generales {
	display: grid;
	gap: var(--e-2);
	padding-top: var(--e-4);
	border-top: 1px solid rgb(255 255 255 / 25%);
	grid-column: 1 / -1;
}

.pie__titulo {
	margin-bottom: var(--e-3);
	color: var(--c-blanco);
	font-size: 22px;
	font-weight: var(--p-titulo);
	text-transform: uppercase;
}

.pie__dato {
	display: flex;
	align-items: start;
	gap: var(--e-2);
	margin-top: var(--e-2);
}

/*
  Telefonos y correos: se pulsan con el dedo, asi que necesitan 24px de alto
  (WCAG 2.2, 2.5.8). Se quedaban en 23 —medido— porque solo tenian el alto de
  su propia linea de texto. El texto no se mueve: solo crece la caja.
*/
.pie__dato a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.pie__dato .icono {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 0.2em;
}

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4);
	justify-content: space-between;
	margin-top: var(--e-7);
	padding-top: var(--e-4);
	border-top: 1px solid rgb(255 255 255 / 25%);
	font-size: var(--t-xs);
}

@media (max-width: 1100px) {
	.pie__rejilla {
		grid-template-columns: 1fr 1.2fr;
	}

	.pie__mapa {
		display: none;
	}
}

@media (max-width: 720px) {
	.pie__rejilla {
		grid-template-columns: 1fr;
	}
}

/* 7. PIEZAS DE FICHA ===================================================== */
/* Usadas por templates/producto.php y templates/categoria.php. Viven aquí y
   no en home.css porque aparecen en páginas interiores. */

/* --- Característica -------------------------------------------------------
   Columnas planas, sin tarjeta ni borde: encabezado en cian y texto en gris,
   como en el diseño original. La separación la da el aire, no una caja. */
.caracteristica {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
}

.caracteristica .tarjeta__titulo {
	color: var(--c-enlace);
	font-size: var(--t-md);
	font-weight: var(--p-titulo);
	letter-spacing: var(--interletra-titulo);
}

.caracteristica .tarjeta__texto {
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
}

.caracteristica__icono {
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--e-2);
	color: var(--c-enlace);
}

/* --- Tabla de especificaciones ------------------------------------------- */
.tabla-especificaciones {
	width: 100%;
	margin-top: var(--e-5);
	border-collapse: collapse;
	font-size: var(--t-sm);
}

.tabla-especificaciones tr {
	border-bottom: 1px solid var(--c-borde);
}

.tabla-especificaciones tr:first-child {
	border-top: 1px solid var(--c-borde);
}

.tabla-especificaciones th,
.tabla-especificaciones td {
	padding: var(--e-3) var(--e-4);
	text-align: left;
	vertical-align: top;
}

.tabla-especificaciones th {
	width: 38%;
	color: var(--c-azul);
	font-weight: var(--p-fuerte);
}

.tabla-especificaciones td {
	color: var(--c-texto-suave);
}

/* En pantallas estrechas la tabla se apila: dos columnas de datos técnicos
   en 360 px son ilegibles. */
@media (max-width: 560px) {
	.tabla-especificaciones th,
	.tabla-especificaciones td {
		display: block;
		width: 100%;
	}

	.tabla-especificaciones th {
		padding-bottom: 0;
	}

	.tabla-especificaciones td {
		padding-top: var(--e-1);
	}
}

/* --- Documentos descargables --------------------------------------------- */
.lista-documentos {
	display: grid;
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 46rem;
}

.lista-documentos a {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-3) var(--e-4);
	background: var(--c-papel);
	border: 1px solid var(--c-borde);
	border-radius: var(--r-md);
	color: var(--c-azul);
	font-weight: var(--p-fuerte);
	text-decoration: none;
	transition: border-color var(--trans), background var(--trans);
}

.lista-documentos a:hover {
	background: var(--c-blanco);
	border-color: var(--c-rojo);
	color: var(--c-rojo);
}

/* --- Galería -------------------------------------------------------------- */
.galeria__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-borde);
}

.galeria__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.galeria__item a:hover img {
	transform: scale(1.05);
}

/* --- Banda de marcas ------------------------------------------------------ */
/* También la usa el bloque de portada, por eso no está en home.css. */
.banda-marcas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--e-6) var(--e-7);
}

.banda-marcas__item img {
	width: auto;
	max-height: 56px;
	/* Los logotipos ajenos llegan con colores y pesos dispares; atenuarlos
	   hasta el hover los unifica sin retocar los archivos. */
	filter: grayscale(100%);
	opacity: 0.65;
	transition: filter var(--trans), opacity var(--trans);
}

.banda-marcas__item a:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* --- Cabecera sin foto ---------------------------------------------------- */
/* Los archivos no tienen imagen, así que basta el azul plano y menos alto. */
.cabecera-pagina--simple {
	min-height: 0;
	padding-block: var(--e-6) var(--e-6);
}

/* --- Entrada del blog ----------------------------------------------------- */
/*
  Una entrada se maqueta como un articulo: una sola columna, con el texto y
  las fotos compartiendo los dos bordes.

  Cuerpo 19 y columna 640. Los dos numeros van juntos y no se pueden mover
  por separado: es la longitud de linea la que manda. Medido en vivo sobre
  los parrafos de la entrada, con la Roboto del sitio:

    columna 640, cuerpo 19 -> 73 caracteres
    columna 704, cuerpo 21 -> 73
    columna 768, cuerpo 22 -> 76
    columna 768, cuerpo 19 -> 88

  73 esta dentro del 45-75 de Bringhurst y por debajo del maximo de 80 de la
  WCAG 1.4.8. Ensanchar la columna sin tocar la letra era lo unico que no se
  podia hacer.

  Hubo un rato en 768 y 22, buscando que la entrada no se viese estrecha. No
  era eso: lo que se veia mal era que el texto, la galeria y la foto de
  cabecera tenian tres anchos distintos. Arreglado eso, la letra vuelve a
  los 19 que tenia, por coherencia con el resto del sitio.

  Y de paso las fotos dejan de sufrir: con la columna en 640, las dos de las
  entradas —671 y 579 px de origen— se pintan a su tamano o muy cerca, en
  vez de estirarse un 14% y un 33%.

  Quedan en 19 y no en los 17 del resto del sitio porque un articulo largo
  se lee de otra manera que una ficha de producto. Es la unica diferencia de
  cuerpo que queda en pie, y es a proposito.

  La cabecera y la navegacion comparten eje con el texto. La llamada a la
  accion no entra: es una banda de ancho completo con su propio contenedor.
*/
.entrada {
	--ancho-lectura: 40rem;
}

.entrada .cabecera-pagina__cuerpo {
	max-width: calc(var(--ancho-lectura) + 2 * var(--gutter));
}

.entrada .nav-entradas {
	max-width: var(--ancho-lectura);
	margin-inline: auto;
}

.entrada__cuerpo .prosa {
	max-width: none;
	font-size: 1.1875rem;
}

.entrada__cuerpo .prosa > * {
	max-width: var(--ancho-lectura);
	margin-inline: auto;
}

/*
  Las fotos comparten columna con el texto: mismo borde izquierdo y derecho.

  Antes no. Las fotos iban «anchas» —el reparto contentSize/wideSize de
  WordPress— y salian tres medidas distintas apiladas: el texto de 326 a
  1094, la galeria de 150 a 1270 y la foto de cabecera de 374 a 1045, cada
  una con su margen. La galeria se salia 352px por cada lado del texto y era
  lo primero que se veia al entrar.

  A cambio, una foto mas estrecha que la columna se estira para llenarla. La
  de la entrada del 18 de septiembre mide 671 de origen —no hay version mas
  grande, es lo que se subio— y pasa a 768: un 14%, que en una fotografia no
  se nota. Dejarla a su tamano real obligaba a elegir entre centrarla, que es
  justo el borde descuadrado de antes, o alinearla a la izquierda y dejar 97
  px de aire a la derecha.
*/
.entrada__cuerpo .prosa > figure {
	width: 100%;
	max-width: var(--ancho-lectura);
}

.entrada__cuerpo .prosa > figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/* --- Navegación entre entradas -------------------------------------------- */
.nav-entradas {
	display: grid;
	gap: var(--e-4);
	margin-top: var(--e-8);
	padding-top: var(--e-5);
	border-top: 1px solid var(--c-borde);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.nav-entradas__enlace {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	padding: var(--e-4);
	background: var(--c-papel);
	border-radius: var(--r-md);
	text-decoration: none;
	transition: background var(--trans);
}

.nav-entradas__enlace:hover {
	background: var(--c-borde);
}

/* La entrada siguiente se alinea a la derecha cuando hay sitio, para que la
   dirección de lectura acompañe a la dirección de la navegación. */
.nav-entradas__enlace--fin {
	text-align: right;
}

.nav-entradas__enlace--fin:only-child {
	grid-column: 2;
}

.nav-entradas__etiqueta {
	color: var(--c-rojo);
	font-size: var(--t-xs);
	font-weight: var(--p-fuerte);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nav-entradas__titulo {
	color: var(--c-azul);
	font-weight: var(--p-fuerte);
}

/* --- Paginación ----------------------------------------------------------- */
/* Marcado que genera the_posts_pagination(). */
.pagination {
	margin-top: var(--e-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	justify-content: center;
}

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: var(--e-3);
	border: 1px solid var(--c-borde);
	border-radius: var(--r-md);
	color: var(--c-azul);
	font-size: var(--t-sm);
	font-weight: var(--p-fuerte);
	text-decoration: none;
	transition: background var(--trans), border-color var(--trans), color var(--trans);
}

a.page-numbers:hover {
	border-color: var(--c-rojo);
	color: var(--c-rojo);
}

.page-numbers.current {
	background: var(--c-rojo);
	border-color: var(--c-rojo);
	color: var(--c-blanco);
}

.page-numbers.dots {
	border-color: transparent;
}

/* --- Fecha de entrada ----------------------------------------------------- */
.tarjeta__fecha {
	color: var(--c-texto-suave);
	font-size: var(--t-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* 8. UTILIDADES ========================================================== */

/* Visible solo para lectores de pantalla. */
.solo-lectores {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.centrado {
	text-align: center;
}

.medido {
	max-width: var(--ancho-texto);
}

.centrado.medido {
	margin-inline: auto;
}

/*
  Los iconos son de dos familias: unos de trazo (sobre, telefono, chincheta,
  24x24) y otros de silueta maciza (logotipos de marca y los 33 del
  contenido). Cada uno declara su relleno en su propio archivo, con
  atributos de presentacion.

  Aqui NO se pinta nada, solo se mide. Pintar desde .icono obligaba a que
  ganase la regla correcta, y no ganaba: .pie__dato svg rellenaba los de
  trazo y el sobre del pie salia como un rectangulo macizo en todas las
  paginas; ademas home.css redefinia .icono al reves que esta hoja. Un
  atributo en el SVG no lo puede invertir ninguna cascada, porque ya no hay
  ninguna declaracion de fill con la que competir.

  El tamano va en em para que baste con dar font-size al contenedor: asi
  .tarjetas__icono los agranda sin tocar el icono.
*/
.icono {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex-shrink: 0;
}

/* --- Paginas sin cabecera ni pie ------------------------------------------ */
/*
  La portada es una pantalla sola. En Elementor usaba la plantilla «Canvas»,
  que quita cabecera y pie; el tema hace lo mismo cuando la pagina la tiene
  puesta (ver pimasa_sin_cromo()).
*/

.contenido--desnudo {
	display: block;
	min-height: 100svh;
}

/* Sin cabecera, nada que descontar. */
.sin-cromo .proximamente,
.sin-cromo .hero {
	min-height: 100svh;
}

/* --- Paginas con flipbook ------------------------------------------------- */
/*
  El visor de dFlip necesita el ancho entero. Metido en la columna de texto
  salia del tamano de un sello: .prosa lo limitaba a 68 caracteres de ancho.

  En el sitio con Elementor esta pagina era un contenedor sin margenes, con
  el visor y nada mas.
*/

/*
  La clase va en el <body>, asi que «.con-flipbook .contenedor» alcanzaba a
  los cinco contenedores de la pagina, no solo al del visor:

    header.cabecera        > .contenedor.cabecera__barra
    .cabecera-pagina       > .contenedor.cabecera-pagina__cuerpo
    main.contenido .seccion > .contenedor          <- este, y solo este
    footer.pie             > .contenedor.pie__rejilla
    footer.pie             > .contenedor.pie__legal

  Resultado: el visor iba de canto a canto, si, pero el logotipo y los datos
  del pie tambien, pegados al borde de la ventana. Se acota al contenido.
*/

.con-flipbook .contenido .seccion {
	padding-block: 0 var(--e-7);
}

.con-flipbook .contenido .seccion > .contenedor {
	max-width: none;
	padding-inline: 0;
}

.con-flipbook .contenido .prosa {
	max-width: none;
	color: inherit;
}

.con-flipbook ._df_book {
	width: 100%;
	min-height: min(80svh, 760px);
}