/*
Theme Name:   QIB Astra Child
Theme URI:    https://quimicaindustrialbahiense.com.ar
Description:  Tema hijo de Astra con la identidad visual de Química Industrial Bahiense S.A.
Author:       Química Industrial Bahiense S.A.
Template:     astra
Version:      0.12.0
Text Domain:  qib-astra-child
*/

/* ==========================================================================
   Identidad visual QIB, traducida del Boceto (bocetos-recursos/) a Elementor.

   Cómo se usa: las clases de este archivo se escriben en el campo
   "Avanzado > Clases CSS" de un contenedor o de un widget de Elementor.
   Por eso todos los selectores asumen que la clase está en el elemento que
   envuelve al widget (o en el contenedor) y alcanzan el contenido de adentro.

   Especificidad: la clase de identidad cuenta; lo demás va dentro de :where().
   Los estilos que un editor fija en el panel de un elemento llevan 3 o 4
   clases (.elementor-N .elementor-element.elementor-element-id), así que
   siempre mandan sobre estas reglas. Las medidas de los contenedores se fijan
   con las variables de Elementor (--padding-top, --margin-bottom, etc.), que
   son las mismas que escribe el panel.

   Excepciones, cada una comentada donde está: el interlineado y los márgenes
   de los títulos, el interlineado de los botones y su corte de renglón en mobile (y
   en las tarjetas de línea, por debajo de 1200 px), el margen del último
   párrafo, el botón "volver arriba", los puntitos del hero y el hover de los
   enlaces de la lista de políticas (policy-list), que tienen que
   ganarle a reglas de Astra o de Elementor más específicas; el texto del
   eyebrow, que les gana a los párrafos de la sección donde está; el menú del
   header (qib-nav), que tiene que ganarle a la hoja del plugin; los campos y el botón
   del formulario (qib-form), que les ganan a los de Astra y Contact Form 7; el tamaño de
   los logos de la cinta (marquee) y el alto de la foto del teaser de
   Servicios (services-visual) y de las Sedes (sede-photo), que le ganan a
   ".elementor img", y la animación de entrada, el Ken Burns del hero y, con movimiento
   reducido, la transformación al pasar el mouse, que ajustan los de Elementor.
   ========================================================================== */

/* ---------- Montserrat, servida desde el tema (SIL OFL, ver assets/fonts/OFL.txt) ---------- */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations');
	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;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
	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;
}

/* ---------- Tokens ----------
   Colores y fuentes toman los globales de Elementor (Configuración del sitio),
   así un cambio en el panel llega también a estas clases. El valor después de
   la coma es el del Boceto. Se declaran en body porque ahí vive el kit.
   Las líneas y bordes translúcidos son del Boceto y no tienen global. */
body {
	--qib-navy-deep: var(--e-global-color-primary, #003764);
	--qib-navy-mid: var(--e-global-color-secondary, #004E86);
	--qib-navy-soft: var(--e-global-color-navysoft, #0061A3);
	--qib-acento: var(--e-global-color-accent, #23A6F0);
	--qib-acento-claro: var(--e-global-color-acentoclaro, #6CC6F2);
	--qib-paper: var(--e-global-color-papel, #FFFFFF);
	--qib-paper-dim: var(--e-global-color-papeldim, #F0F4F7);
	--qib-steel: var(--e-global-color-acero, #606060);
	--qib-ink: var(--e-global-color-text, #1A2733);
	--qib-gray-header: var(--e-global-color-grisheader, #606060);

	--qib-linea: rgba(20, 32, 43, .08);
	--qib-linea-marcada: rgba(20, 32, 43, .1);
	--qib-linea-acento: rgba(35, 166, 240, .3);
	--qib-linea-acento-media: rgba(35, 166, 240, .25);
	--qib-linea-acento-tenue: rgba(35, 166, 240, .18);
	--qib-linea-acento-fuerte: rgba(35, 166, 240, .35);
	/* Borde de un campo con error en los formularios (el rojo de los mensajes de Astra). */
	--qib-error: #dc2626;
	--qib-linea-acento-suave: rgba(35, 166, 240, .15);
	--qib-linea-acento-leve: rgba(35, 166, 240, .1);
	--qib-linea-clara: rgba(244, 241, 233, .3);
	--qib-puntito: rgba(244, 241, 233, .35);

	--qib-fuente-texto: var(--e-global-typography-text-font-family, 'Montserrat'), sans-serif;
	--qib-fuente-titulos: var(--e-global-typography-primary-font-family, 'Montserrat'), sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
/* Compensa el header fijo al saltar a un ancla. */
[id] { scroll-margin-top: 88px; }

body {
	font-family: var(--qib-fuente-texto);
	color: var(--qib-ink);
	background: var(--qib-paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
button, input, select, textarea { font-family: inherit; }
/* Interlineado y márgenes de títulos: los del Boceto (normal y sin márgenes), salvo que una clase
   de identidad fije --qib-lh o --qib-margen. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--qib-fuente-titulos);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: var(--qib-lh, normal);
	margin: var(--qib-margen, 0);
	color: inherit;
}
/* Excepción de especificidad: Astra impone 1.4em a los títulos de Elementor con
   ".elementor-widget-heading h1.elementor-heading-title", y Elementor les quita los márgenes con
   ".elementor-widget-heading .elementor-heading-title"; esta regla les gana a las dos. */
:where(.elementor) .elementor-heading-title { line-height: var(--qib-lh, normal); }
.elementor-widget-heading :is(h1, h2, h3, h4, h5, h6).elementor-heading-title {
	line-height: var(--qib-lh, normal);
	margin: var(--qib-margen, 0);
}
a { color: inherit; text-decoration: none; }
/* El último párrafo de un texto no suma margen abajo. Excepción de especificidad: Astra les pone
   1.75em a todos los párrafos con "p"; esta regla lleva la clase de Elementor para ganarle. */
.elementor :where(p:last-child) { margin-bottom: 0; }

/* Contenedores de Elementor: sin padding por defecto (así está el kit), salvo los
   "encajonados" (boxed), que equivalen al .container del Boceto: 28 px a cada lado.
   Solo se fija el valor por defecto; el padding del panel sigue mandando. */
.e-con-boxed {
	--container-default-padding-left: 28px;
	--container-default-padding-right: 28px;
}
.e-con-boxed :where(.e-con) {
	--container-default-padding-left: 0px;
	--container-default-padding-right: 0px;
}

/* ---------- eyebrow: rótulo chico sobre los títulos (widget de título o texto) ---------- */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--qib-fuente-texto);
	font-weight: 600;
	/* 14 px en vez de los 12 del Boceto: el cliente pidió rótulos más grandes (ticket 16). */
	font-size: 14px;
	letter-spacing: .16em;
	line-height: normal;
	text-transform: uppercase;
	color: var(--qib-acento);
	/* Los espacios van como relleno: Elementor anula el margen de los widgets con 3 clases.
	   Arriba, 6,5 px: en el Boceto el rótulo va en línea y su renglón lo deja así de abajo. */
	padding: 6.5px 0 14px;
}
.eyebrow::before {
	content: "";
	flex: none;
	width: 26px;
	height: 2px;
	background: var(--qib-acento);
}
/* Con :is (una clase más) el texto del rótulo no toma el tamaño ni el color de los párrafos de la
   sección o la tarjeta donde está (".section-head :where(p)", ".card :where(p)"). */
.eyebrow :is(h1, h2, h3, h4, h5, h6, p, span, .elementor-heading-title) {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
}
.section-navy .eyebrow,
.qib-line .eyebrow,
.line-card .eyebrow,
.card-photo .eyebrow { color: var(--qib-acento-claro); }
/* En las tarjetas de línea el Boceto no deja el renglón de arriba (el rótulo va en una columna flex). */
.line-card .eyebrow { padding-top: 0; }

/* ---------- spec-tag: ficha técnica con esquinas cortadas ----------
   Widget de texto: la primera línea en negrita, la segunda normal. */
.spec-tag {
	align-self: flex-start;
	width: auto;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--qib-fuente-texto);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--qib-paper);
	background: var(--qib-navy-deep);
	border: 1px solid var(--qib-acento);
	padding: 10px 16px;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.spec-tag :where(h1, h2, h3, h4, h5, h6, p, .elementor-heading-title) {
	font: inherit;
	color: inherit;
	margin: 0;
}
.spec-tag :where(b, strong) {
	display: block;
	color: var(--qib-acento-claro);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .08em;
}

/* ---------- hazard-corner: esquina rayada, sobre un contenedor ---------- */
.hazard-corner { --position: relative; }
.hazard-corner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 34px;
	height: 34px;
	background: repeating-linear-gradient(45deg, var(--qib-acento) 0 6px, var(--qib-navy-deep) 6px 12px);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	pointer-events: none;
}

/* ---------- divider: corte diagonal entre secciones (contenedor vacío) ---------- */
.divider {
	--min-height: 70px;
	--height: 70px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--margin-top: -1px;
	background: var(--qib-paper);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.divider-flip { clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* ---------- stat-strip: franja de cifras ----------
   Contenedor en fila; cada cifra es un widget de texto con la clase "stat",
   con el número en negrita y la leyenda como texto normal: <b>50+</b> Años… */
.stat-strip {
	--padding-top: 34px;
	--padding-bottom: 34px;
	background-color: var(--qib-navy-mid);
}
.stat {
	line-height: normal;
	text-align: center;
	border-left: 1px solid var(--qib-linea-acento-media);
	padding: 6px 12px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qib-paper-dim);
}
.stat:first-child { border-left: none; }
.stat :where(p) { margin: 0; }
.stat :where(b, strong) {
	display: block;
	font-family: var(--qib-fuente-titulos);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--qib-acento-claro);
	margin-bottom: 4px;
}

/* ---------- secciones (contenedores) ---------- */
.section { --padding-top: 86px; --padding-bottom: 86px; }
.section-tight { --padding-top: 56px; --padding-bottom: 56px; }
.section-navy { background-color: var(--qib-navy-deep); color: var(--qib-paper); }
.section-dim { background-color: var(--qib-paper-dim); }

/* Encabezado de sección: contenedor con eyebrow, título y bajada (la bajada es el párrafo que no es
   un widget de título, como el del eyebrow). */
.section-head { max-width: 640px; --margin-bottom: 48px; --gap: 0px; --row-gap: 0px; }
/* Encabezado a lo ancho: la presentación de Ética y políticas (Sustentabilidad) en menos renglones (ticket 17). */
.section-head.section-head-ancha { max-width: 960px; }
.section-head :where(h2) { font-size: clamp(28px, 3.6vw, 42px); --qib-lh: 1.12; }
.section-head :where(p:not(.elementor-heading-title)) { margin: 16px 0 0; color: var(--qib-steel); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.section-head :where(p:not(.elementor-heading-title) + p) { margin-top: 14px; }
.section-navy .section-head :where(p:not(.elementor-heading-title)) { color: var(--qib-paper-dim); }

/* ---------- botones: sobre un widget "Botón" de Elementor ----------
   Excepción de especificidad: Astra fija color (también :visited) y padding de los
   botones de Elementor con 3 clases; estas reglas llevan 3 para ganarle.
   El panel de cada botón (4 clases) sigue mandando.
   Los enlaces de la lista de políticas (policy-list) son botones de contorno como btn-outline, y el
   botón de envío de los formularios (qib-form) es un btn-gold: con 2 clases ya le gana a Astra. */
:is(.btn-gold, .btn-outline, .btn-outline-dark).elementor-widget-button .elementor-button,
.policy-list :where(a),
.qib-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--qib-fuente-titulos);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .02em;
	line-height: normal;
	padding: 11px 22px;
	border-radius: 2px;
	border: 1.5px solid transparent;
	transition: transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease;
	white-space: nowrap;
}
:is(.btn-gold, .btn-outline, .btn-outline-dark).elementor-widget-button .elementor-button:hover,
.policy-list :where(a:hover),
.qib-form .wpcf7-submit:hover { transform: translateY(-1px); }

.btn-gold.elementor-widget-button .elementor-button,
.qib-form .wpcf7-submit { background: var(--qib-acento); color: var(--qib-navy-deep); }
.btn-gold.elementor-widget-button .elementor-button:is(:hover, :focus),
.qib-form .wpcf7-submit:is(:hover, :focus) { background: var(--qib-acento-claro); color: var(--qib-navy-deep); }

.btn-outline.elementor-widget-button .elementor-button,
.policy-list :where(a) { background: transparent; border-color: var(--qib-paper); color: var(--qib-paper); }
/* Excepción de especificidad en policy-list: Astra colorea los enlaces en hover con "a:hover"; esta regla le gana. */
.btn-outline.elementor-widget-button .elementor-button:is(:hover, :focus),
.policy-list a:is(:hover, :focus) { border-color: var(--qib-acento-claro); color: var(--qib-acento-claro); }

.btn-outline-dark.elementor-widget-button .elementor-button { background: transparent; border-color: var(--qib-navy-deep); color: var(--qib-navy-deep); }
.btn-outline-dark.elementor-widget-button .elementor-button:is(:hover, :focus) { border-color: var(--qib-acento); color: var(--qib-acento); }

/* ---------- value-card: tarjeta numerada (valores) ---------- */
.value-card {
	--padding-top: 26px;
	--padding-bottom: 26px;
	--padding-left: 22px;
	--padding-right: 22px;
	--gap: 0px;
	--row-gap: 0px;
	background-color: var(--qib-paper);
	border: 1px solid var(--qib-linea);
	border-top: 3px solid var(--qib-acento);
}
.value-n,
.value-n :where(.elementor-heading-title, p) {
	font-size: 13px;
	font-weight: 400;
	/* El renglón del Boceto: el número va en línea, en un renglón de texto de 16 px. */
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--qib-acento);
}
.value-card :where(h3) { font-size: 18px; color: var(--qib-navy-deep); --qib-margen: 10px 0; --qib-lh: 1.28; }
.value-card :where(p:not(.elementor-heading-title)) { color: var(--qib-steel); font-size: 14px; line-height: 1.6; }

/* ---------- infra-figure: cifra en un recuadro navy (widget de texto) ----------
   Un párrafo con la cifra en negrita y la leyenda abajo: <p><b>RNE</b>Registro…</p>. */
.infra-figure {
	background-color: var(--qib-navy-deep);
	border-left: 3px solid var(--qib-acento);
	padding: 22px;
	font-size: 11.5px;
	/* El renglón del Boceto: la leyenda va en línea, en un renglón de texto de 16 px (19 px en Montserrat). */
	line-height: 19px;
	letter-spacing: .04em;
	color: var(--qib-paper-dim);
}
.infra-figure :where(p) { margin: 0; }
.infra-figure :where(b, strong) {
	display: block;
	font-family: var(--qib-fuente-titulos);
	font-size: 30px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: normal;
	color: var(--qib-acento-claro);
}

/* ---------- chem-list: lista numerada 01, 02… (widget de texto con una lista) ----------
   En dos columnas que se leen de arriba abajo: la primera mitad de la lista a la izquierda y el resto a la
   derecha (pedido del cliente, ticket 16; en el Boceto se leía en zigzag). */
.chem-list :where(ol, ul) {
	columns: 2;
	column-gap: 28px;
	/* Sin los 28 px de arriba del Boceto: ahí se funden con los 48 del encabezado de sección. */
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: chem;
}
.chem-list :where(li) {
	break-inside: avoid;
	margin-bottom: 12px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 16px;
	line-height: normal;
	color: var(--qib-ink);
	padding: 12px 0;
	border-bottom: 1px solid var(--qib-linea-marcada);
	counter-increment: chem;
}
.chem-list :where(li)::before {
	content: counter(chem, decimal-leading-zero);
	font-size: 12px;
	color: var(--qib-acento);
}

/* ---------- qib-line: bloque navy de la Línea QIB ---------- */
.qib-line {
	--padding-top: 52px;
	--padding-bottom: 52px;
	--padding-left: 44px;
	--padding-right: 44px;
	background-color: var(--qib-navy-deep);
	color: var(--qib-paper);
}
.qib-line :where(h3) { color: var(--qib-paper); font-size: 30px; --qib-margen: 0 0 16px; }
/* El texto se fija en el widget y no en el párrafo, para que la tipografía del panel pueda cambiarlo.
   Su ancho máximo (640 px en el Boceto, salvo en las Primeras marcas) se fija en el panel del widget
   (Avanzado > Ancho), donde hace falta. */
.qib-line :where(.elementor-widget-text-editor) { color: var(--qib-paper-dim); font-size: 16.5px; line-height: 1.7; }

/* ---------- line-card: tarjeta de cada línea de productos ---------- */
.line-card {
	--padding-top: 28px;
	--padding-bottom: 28px;
	--padding-left: 26px;
	--padding-right: 26px;
	--gap: 0px;
	--row-gap: 0px;
	border: 1px solid var(--qib-linea-acento-media);
	border-top: 3px solid var(--qib-acento);
}
.line-card :where(h3) { color: var(--qib-paper); font-size: 19px; --qib-lh: 1.32; --qib-margen: 8px 0 12px; }
.line-card :where(p) { color: var(--qib-paper-dim); font-size: 14.5px; line-height: 1.6; margin-bottom: 10px; }
/* El botón queda abajo aunque las tarjetas tengan textos de distinto largo. */
.line-card > :where(.elementor-widget-button:last-child) { margin-top: auto; }
/* Foto de la línea (widget Imagen, clase line-card-foto): arriba de la tarjeta, de borde a borde, debajo del
   filete celeste (el margen negativo y el ancho van en el panel del widget). Excepción de especificidad: el alto
   deja la etiqueta img fuera de :where() para igualar la regla de Elementor ".elementor img" (height: auto) y
   ganarle por venir después. */
/* Excepción de especificidad: Elementor limita los widgets de un contenedor al 100 % de su ancho
   (".elementor.elementor .e-con > .elementor-widget"); la foto lo pasa por los 52 px del relleno. */
.elementor .e-con.line-card > .elementor-widget.line-card-foto { max-width: none; }
.line-card-foto img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}
/* Por debajo de 1200 px las tarjetas de tres en fila ya no tienen lugar para el botón en un renglón
   (en el Boceto se salen de la pantalla): pasa a dos. Excepción de especificidad: una clase más que
   los botones, para ganarle a su "nowrap". */
@media (max-width: 1199px) {
	.line-card :is(.btn-gold, .btn-outline, .btn-outline-dark).elementor-widget-button .elementor-button { white-space: normal; text-wrap: balance; }
}

/* ---------- qib-video: video vertical de Sustentabilidad (widget Video, autoalojado) ----------
   Sin precarga el navegador no conoce la proporción del video hasta darle play: se fija la del reel (9:16)
   para que la portada se vea entera desde el principio. */
.qib-video video.elementor-video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: contain;
	background-color: var(--qib-navy-deep);
}

/* ---------- policy-list: lista de Documentos institucionales (widget de texto con una lista) ----------
   Cada ítem: <span class="policy-name">…</span> y un enlace o <span class="policy-pending">. */
.policy-list :where(ul, ol) {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--qib-linea-acento-tenue);
}
.policy-list :where(li) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--qib-linea-acento-tenue);
	line-height: normal;
}
.policy-list :where(.policy-name) { font-weight: 600; font-size: 16.5px; color: var(--qib-paper); }
.policy-list :where(.policy-pending) {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--qib-paper-dim);
	border: 1px solid var(--qib-linea-clara);
	padding: 8px 14px;
	white-space: nowrap;
}
/* El enlace de cada documento es un botón de contorno: toma los estilos de btn-outline (ver botones). */

/* ---------- cita: cita destacada (widget de texto con un <blockquote>) ----------
   La tipografía y el color van en el panel del widget. La clase le quita al <blockquote> el borde,
   los márgenes, el tamaño, la cursiva y el color que le pone Astra, para que tome los del widget. */
.cita :where(blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-style: inherit;
	color: inherit;
}

/* ---------- sede-row: fila foto + texto de cada Sede ----------
   Contenedor grilla de dos columnas (una desde tablet, 980 px, como el Boceto). La foto es un
   widget Imagen con la clase sede-photo; para dejarla a la derecha se usa "Orden" del widget
   en Elementor. */
.sede-row {
	--padding-top: 44px;
	--padding-bottom: 44px;
	--gap: 44px;
	--column-gap: 44px;
	--align-items: center;
	border-bottom: 1px solid var(--qib-linea);
}
.sede-row:last-child { border-bottom: none; --padding-bottom: 8px; }
/* Excepción de especificidad: el alto deja la etiqueta img fuera de :where() para igualar la regla
   de Elementor ".elementor img" (height: auto) y ganarle por venir después. */
.sede-photo img { display: block; width: 100%; height: 280px; object-fit: cover; }
.sede-row :where(h3) { font-size: 24px; color: var(--qib-navy-deep); --qib-margen: 10px 0 14px; --qib-lh: 1.3; }
.sede-row :where(p) { color: var(--qib-steel); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; }
.sede-addr,
.sede-addr :where(p, .elementor-heading-title) { font-size: 13px; color: var(--qib-navy-mid); }
.sede-addr :where(p) { margin-bottom: 20px; }

/* ---------- card: tarjeta blanca con borde superior celeste (contenedor) ---------- */
.card {
	--padding-top: 32px;
	--padding-bottom: 32px;
	--padding-left: 28px;
	--padding-right: 28px;
	--gap: 0px;
	--row-gap: 0px;
	background-color: var(--qib-paper);
	border: 1px solid var(--qib-linea);
	border-top: 3px solid var(--qib-acento);
}
.card .eyebrow { padding-bottom: 10px; }
.card :where(h3) { font-size: 24px; color: var(--qib-navy-deep); --qib-margen: 0 0 14px; }
.card :where(p) { color: var(--qib-steel); font-size: 15.5px; line-height: 1.65; margin-bottom: 0; }
.card :where(p + p) { margin-top: 12px; }
/* Tarjeta que es un enlace (contenedor con etiqueta "a", clase card-enlace): el texto conserva sus colores. */
.card-enlace { color: inherit; text-decoration: none; }
.card-enlace:focus-visible { outline: 2px solid var(--qib-acento); outline-offset: 3px; }

/* ---------- card-photo: tarjeta con foto (contenedor, junto a card) ----------
   La foto se elige en el panel (Estilo > Fondo); encima va el velo navy del Boceto y el texto
   queda abajo, en blanco. */
.card-photo {
	--min-height: 320px;
	--justify-content: flex-end;
	--position: relative;
}
.card-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--qib-navy-deep) 55%, transparent) 0%,
		color-mix(in srgb, var(--qib-navy-deep) 65%, transparent) 45%,
		color-mix(in srgb, var(--qib-navy-deep) 92%, transparent) 100%);
	pointer-events: none;
}
.card-photo > :where(.elementor-element) { position: relative; z-index: 1; }
/* El rótulo es un elemento más de la columna: sin el renglón de arriba (como line-card). */
.card-photo .eyebrow { padding-top: 0; }
.card-photo :where(h3) { color: var(--qib-paper); }
.card-photo :where(p) { color: var(--qib-paper-dim); }

/* ---------- location-contacts: datos de contacto de un lugar (widget de texto) ----------
   Un párrafo por dato, con el rótulo en negrita: <p><b>Tel:</b> …</p>. */
.location-contacts {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14.5px;
	line-height: normal;
	color: var(--qib-steel);
}
/* Los datos toman el tamaño del bloque, no el de los párrafos de la fila o la tarjeta donde están. */
.location-contacts :where(p) { margin: 0; font-size: inherit; line-height: inherit; }
.location-contacts :where(b, strong) { color: var(--qib-navy-mid); }
.section-navy .location-contacts { color: var(--qib-paper-dim); }
.section-navy .location-contacts :where(b, strong) { color: var(--qib-acento-claro); }
/* En una tarjeta (card) el fondo es blanco aunque la sección sea navy. Va después de las reglas de section-navy
   para ganarles con la misma especificidad. */
.card .location-contacts { margin-top: 16px; color: var(--qib-steel); }
.card .location-contacts :where(b, strong) { color: var(--qib-navy-mid); }

/* ---------- services-teaser-list: lista del teaser de Servicios (widget de texto con una lista) ----------
   Cada ítem: <li><b>Título</b> Descripción</li>, con un rombo celeste. El título va en su renglón y la
   descripción debajo, alineada con él (pedido del cliente, ticket 16; en el Boceto iban en dos columnas).
   Los ítems van en dos columnas, debajo del texto y la foto (ticket 17); desde tablet, en una. */
.services-teaser-list :where(ul, ol) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 56px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}
.services-teaser-list :where(li) {
	position: relative;
	padding-left: 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--qib-steel);
}
.services-teaser-list :where(li)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	background: var(--qib-acento);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.services-teaser-list :where(b, strong) { display: block; margin-bottom: 2px; font-size: 15.5px; font-weight: 700; color: var(--qib-navy-mid); }

/* ---------- services-visual: foto con la esquina inferior izquierda cortada ----------
   Va en el contenedor que enmarca al widget Imagen (el que la recorta cuando hace zoom al pasar el mouse),
   para que la esquina no se agrande con la foto.
   Excepción de especificidad: el alto deja la etiqueta img fuera de :where() para igualar la regla
   de Elementor ".elementor img" (height: auto) y ganarle por venir después. */
.services-visual { clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%, 0 88%); }
.services-visual img {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
}

/* ---------- trayectoria-foto: foto al lado del texto de Nuestra trayectoria (Empresa) ----------
   Va en el contenedor que la recorta cuando hace zoom al pasar el mouse. Misma excepción de especificidad
   que services-visual. */
.trayectoria-foto img {
	display: block;
	width: 100%;
	height: 360px;
	object-fit: cover;
}

/* ---------- map-embed: mapa de Google (widget HTML con el iframe) ----------
   El mapa llena su lugar en la grilla, con 340 px de alto como mínimo. */
.map-embed {
	position: relative;
	min-height: 340px;
	overflow: hidden;
	background-color: var(--qib-navy-mid);
}
.map-embed :where(.elementor-widget-container) { position: static; }
.map-embed :where(iframe) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------- hero de Inicio ----------
   Contenedor con fondo "Slideshow" (las fotos, su duración y el Ken Burns se eligen en el panel).
   Encima de las fotos va el degradé navy del Boceto, que el panel no permite (son dos degradés).
   Los puntitos para elegir la foto los agrega qib.js. */
.qib-hero {
	--min-height: 82vh;
	--justify-content: flex-end;
	--overflow: hidden;
	background-color: var(--qib-navy-deep);
	--qib-velo:
		linear-gradient(180deg,
			color-mix(in srgb, var(--qib-navy-deep) 60%, transparent) 0%,
			color-mix(in srgb, var(--qib-navy-deep) 58%, transparent) 40%,
			color-mix(in srgb, var(--qib-navy-deep) 93%, transparent) 100%),
		linear-gradient(90deg,
			color-mix(in srgb, var(--qib-navy-deep) 80%, transparent) 0%,
			color-mix(in srgb, var(--qib-navy-deep) 20%, transparent) 55%);
	/* Sobre las fotos de Inicio el velo es más claro que en el Boceto, para que se vean mejor (pedido del
	   cliente, ticket 16). Abajo a la izquierda, donde va el texto, sigue oscuro. */
	--qib-velo-fotos:
		linear-gradient(180deg,
			color-mix(in srgb, var(--qib-navy-deep) 35%, transparent) 0%,
			color-mix(in srgb, var(--qib-navy-deep) 32%, transparent) 40%,
			color-mix(in srgb, var(--qib-navy-deep) 85%, transparent) 100%),
		linear-gradient(90deg,
			color-mix(in srgb, var(--qib-navy-deep) 65%, transparent) 0%,
			color-mix(in srgb, var(--qib-navy-deep) 5%, transparent) 55%);
}
.qib-hero > :where(.elementor-background-slideshow)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--qib-velo-fotos);
	pointer-events: none;
}
/* Hero de las demás páginas (junto a qib-hero): más bajo y sin fotos; el mismo velo va sobre el
   degradé navy del Boceto. */
.qib-hero-pagina {
	--min-height: 46vh;
	background-image:
		var(--qib-velo),
		linear-gradient(135deg, var(--qib-navy-deep), var(--qib-navy-mid) 60%, var(--qib-navy-soft));
}
.qib-hero > :where(.e-con) { z-index: 2; }
.qib-hero-puntitos {
	position: absolute;
	right: 28px;
	bottom: 18px;
	z-index: 3;
	display: flex;
	gap: 8px;
}
/* Cada puntito es una rayita de 3 px; el relleno transparente agranda la zona que se puede tocar.
   Excepción de especificidad: Astra estiliza todos los botones, también con :hover y :focus. */
.qib-hero-puntitos button,
.qib-hero-puntitos button:is(:hover, :focus) {
	width: 26px;
	height: 19px;
	padding: 8px 0;
	border: none;
	border-radius: 0;
	background-color: var(--qib-puntito);
	background-clip: content-box;
	cursor: pointer;
	transition: background-color .25s ease;
}
.qib-hero-puntitos button[aria-current="true"] { background-color: var(--qib-acento); }
.qib-hero-puntitos button:focus-visible { outline: 2px solid var(--qib-acento-claro); outline-offset: 2px; }
.qib-hero :where(h1) {
	color: var(--qib-paper);
	font-size: clamp(28px, 4.2vw, 52px);
	font-weight: 600;
	--qib-lh: 1.1;
	max-width: 780px;
}
.qib-hero :where(h1 strong) { color: var(--qib-acento-claro); font-weight: 700; }
.qib-hero-sub,
.qib-hero-sub :where(p, .elementor-heading-title) {
	color: var(--qib-paper-dim);
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	max-width: 640px;
	text-wrap: pretty;
}

/* ---------- header: plantilla de Elementor Header & Footer Builder ----------
   qib-header va en el contenedor del header: gris del Boceto, línea inferior y fijo arriba.
   Lo fijo es el <header id="masthead"> con el que el plugin envuelve la plantilla, para
   que acompañe todo el scroll. Su alto (87 px) cabe en la compensación de las anclas (88 px).
   Excepción de especificidad: lleva el id (y la clase dentro de :has) para ganarle a la
   regla del plugin ".ehf-header #masthead { position: relative }". */
#masthead:has(.qib-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Con la sesión iniciada, debajo de la barra de administración de WordPress (que no es fija en 600 px o menos). */
.admin-bar #masthead:has(.qib-header) { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead:has(.qib-header) { top: 46px; } }
@media (max-width: 600px) { .admin-bar #masthead:has(.qib-header) { top: 0; } }
.qib-header {
	background-color: var(--qib-gray-header);
	border-bottom: 1px solid var(--qib-linea-acento-fuerte);
}
.qib-header :where(.elementor-widget-image) { flex: none; }
.qib-header :where(.elementor-widget-image img) { width: auto; display: block; }

/* qib-nav va en el widget "Navigation Menu" del plugin. Colores, tipografía y medidas se
   editan en su panel; acá va lo que el panel no ofrece, tomado del .main-nav del Boceto.
   Excepción de especificidad: la hoja del plugin fija la alineación, la flecha, los márgenes
   de los ítems y los desplegables con 2 a 4 clases (y :hover); estas reglas llevan una más,
   o la misma cantidad y ganan por venir después. Lo que el panel sí ofrece no se toca acá. */

/* Menú horizontal (escritorio: el plugin pasa a hamburguesa en 1024 px). */
@media (min-width: 1025px) {
	/* 6 px entre ítems. No se usa gap: el plugin agrega pseudo-elementos a la lista y el gap
	   los separaría también a ellos, corriendo el menú. */
	.qib-nav .hfe-nav-menu > li.menu-item + li.menu-item { margin-left: 6px; }
	/* Los enlaces quedan centrados respecto del botón, que es más alto. */
	.qib-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu { align-items: center; }

	/* Flecha de los ítems con desplegable: el triángulo chico del Boceto, a 5 px del texto. */
	.qib-nav .hfe-nav-menu__layout-horizontal .sub-arrow { margin: 0 0 0 5px; }
	.qib-nav .hfe-nav-menu__layout-horizontal .sub-arrow i { display: none; }
	.qib-nav .hfe-nav-menu__layout-horizontal .sub-arrow::before {
		content: "";
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
		opacity: .65;
	}

	/* Subrayado celeste del ítem de la página actual y al pasar el mouse. Se dibuja como fondo
	   del enlace porque el plugin se reserva ::before y ::after para sus propios efectos. */
	.qib-nav :where(a.hfe-menu-item:not(.elementor-button)) {
		background-image: linear-gradient(var(--qib-acento), var(--qib-acento));
		background-repeat: no-repeat;
		background-position: 14px calc(100% - 6px);
		background-size: 0 2px;
		transition: background-size .25s ease, color .2s ease;
	}
	.qib-nav :where(a.hfe-menu-item:not(.elementor-button):hover, .current-menu-item > a.hfe-menu-item, .current-menu-item > .hfe-has-submenu-container > a.hfe-menu-item) {
		background-size: calc(100% - 28px) 2px;
	}
	.qib-nav .hfe-nav-menu__layout-horizontal .sub-menu { padding: 8px 0; }
}

/* Menú mobile (hasta 1024 px): el panel navy del Boceto, debajo del header y hasta el pie
   de la pantalla, con las secciones de cada página siempre a la vista.
   Excepción de especificidad: el panel del widget escribe los estilos del menú desplegado con
   5 clases; estas reglas llevan 6. Y !important solo donde el JS del plugin fija la posición
   del panel con estilos en línea. */
@media (max-width: 1024px) {
	/* Hamburguesa: las tres líneas del Boceto, del color que se elija en el panel ("Toggle"). */
	.qib-header .qib-nav .hfe-nav-menu-icon {
		display: block;
		width: 40px;
		height: 34px;
		padding: 0;
		border: 0;
		background:
			linear-gradient(currentColor, currentColor) center calc(50% - 8px) / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) center calc(50% + 8px) / 100% 2px no-repeat;
	}
	.qib-header .qib-nav .hfe-nav-menu-icon svg { display: none; }

	/* Panel, justo debajo del header: qib.js deja su alto en --qib-alto-header. */
	.qib-header .qib-nav nav.hfe-nav-menu__layout-horizontal.hfe-dropdown.menu-is-active {
		position: fixed !important;
		top: var(--qib-alto-header, 87px);
		right: 0;
		bottom: 0;
		left: 0 !important;
		width: auto !important;
		overflow-y: auto;
		padding: 18px 28px;
		background-color: var(--qib-navy-deep);
		box-shadow: none;
	}
	.qib-header .qib-nav nav.hfe-dropdown ul.hfe-nav-menu.hfe-nav-menu {
		gap: 2px;
		border: 0;
		background: transparent;
	}
	.qib-header .qib-nav nav.hfe-dropdown .hfe-nav-menu li.menu-item a.hfe-menu-item {
		padding: 16px 4px;
		font-size: 16px;
		color: var(--qib-paper);
		background-color: transparent;
		border-bottom: 1px solid var(--qib-linea-acento-suave);
	}
	.qib-header .qib-nav nav.hfe-dropdown .hfe-nav-menu li.menu-item.current-menu-item > a.hfe-menu-item { color: var(--qib-acento-claro); }
	.qib-header .qib-nav nav.hfe-dropdown .hfe-nav-menu li.menu-item .hfe-has-submenu-container > a.hfe-menu-item { border-bottom: none; }
	.qib-header .qib-nav nav.hfe-dropdown .hfe-nav-menu .sub-arrow { display: none; }

	/* Desplegables siempre abiertos, dentro del panel. */
	.qib-header .qib-nav nav.hfe-dropdown .hfe-nav-menu .menu-item-has-children > .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		height: auto;
		width: auto;
		padding: 0 0 8px;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.qib-header .qib-nav nav.hfe-dropdown .hfe-nav-menu .sub-menu li.menu-item a.hfe-sub-menu-item {
		padding: 10px 4px 10px 20px;
		font-size: 14px;
		color: var(--qib-paper-dim);
		background-color: transparent;
		border-bottom: 1px solid var(--qib-linea-acento-leve);
	}

	/* Tienda Online: en el panel el plugin la vuelve un enlace común; el Boceto la mantiene como botón. */
	.qib-header .qib-nav nav.hfe-dropdown .hfe-nav-menu > li.menu-item:last-child > a.hfe-menu-item {
		margin-top: 14px;
		border-bottom: none;
		border-radius: 2px;
		background-color: var(--qib-acento);
	}
}

/* ---------- footer: plantilla de Elementor Header & Footer Builder ----------
   qib-footer va en el contenedor que envuelve todo el footer: fondo navy y texto claro.
   Fondos, bordes, medidas y tipografía de cada bloque se editan en el panel. */
.qib-footer {
	background-color: var(--qib-navy-deep);
	color: var(--qib-paper-dim);
}
.qib-footer :where(p) { margin: 0; }
/* El alto de las imágenes (logo) se fija en el panel; el ancho acompaña. */
.qib-footer :where(.elementor-widget-image img) { width: auto; }
.qib-footer :where(p + p) { margin-top: 10px; }

/* ---------- marquee: cinta de logos de Clientes ----------
   Va en un contenedor de ancho completo que tiene adentro otro contenedor en fila con los
   logos (widgets Imagen), repetidos dos veces seguidas: la cinta corre la mitad de su ancho
   y vuelve a empezar sin que se note el salto. Cada logo queda sobre una placa blanca.
   Excepción de especificidad: el tamaño máximo del logo deja la etiqueta img fuera de :where()
   para igualar la regla de Elementor ".elementor img" (max-width: 100%) y ganarle por venir después. */
.marquee {
	--overflow: hidden;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}
/* Los bordes se funden con el navy. (Elementor usa ::before para la superposición de fondo,
   que este contenedor no tiene.) */
.marquee::before,
.marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 80px;
	pointer-events: none;
}
.marquee::before { left: 0; right: auto; background: linear-gradient(90deg, var(--qib-navy-deep), transparent); }
.marquee::after { right: 0; left: auto; background: linear-gradient(270deg, var(--qib-navy-deep), transparent); }
/* El relleno final repite el espacio entre logos: así la mitad del ancho cae justo en la segunda tanda. */
.marquee > :where(.e-con) {
	--qib-cinta-espacio: 36px;
	--width: max-content;
	--gap: var(--qib-cinta-espacio);
	--column-gap: var(--qib-cinta-espacio);
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: var(--qib-cinta-espacio);
	flex: none;
	animation: qib-cinta 36s linear infinite;
}
.marquee :where(.elementor-widget-image) {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 14px 24px;
	border-radius: 6px;
	background: var(--qib-paper);
}
.marquee :where(.elementor-widget-image) img {
	display: block;
	width: auto;
	height: auto;
	max-width: 130px;
	max-height: 34px;
	object-fit: contain;
}
@keyframes qib-cinta {
	to { transform: translateX(-50%); }
}

/* ---------- volver arriba: botón fijo que agrega el tema (functions.php y qib.js) ----------
   Excepción de especificidad: Astra estiliza todos los botones, también con :hover y :focus;
   estas reglas repiten esos estados para ganarle. */
.qib-arriba,
.qib-arriba:is(:hover, :focus) {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--qib-acento);
	border-radius: 50%;
	background: var(--qib-navy-deep);
	color: var(--qib-acento-claro);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.qib-arriba.visible {
	opacity: 1;
	visibility: visible;
}

/* ---------- qib-form: formulario de Contact Form 7 (widget Shortcode) ----------
   Un campo por renglón, a todo el ancho, con la tipografía y los colores del sitio; con el foco, el borde
   pasa al celeste del acento. El botón de envío es un btn-gold (va con los botones). Los errores van debajo de cada campo
   y el mensaje general, debajo del botón (sus colores son los de Contact Form 7).
   Excepción de especificidad: Astra trae estilos para los campos de Contact Form 7 (tamaño, borde,
   color, foco y errores) de hasta 4 clases y un elemento (".wpcf7 input.wpcf7-form-control:not(…):focus");
   estas reglas llevan una clase más para ganarles. Lo mismo el indicador de envío y el mensaje general, que
   Contact Form 7 ubica con ".wpcf7 .wpcf7-spinner" y ".wpcf7 form .wpcf7-response-output". */
.qib-form :where(.wpcf7-form > p) { margin: 0 0 16px; }
.qib-form :where(label) {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: var(--qib-navy-deep);
}
.qib-form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	height: auto;
	padding: 12px 14px;
	font-family: var(--qib-fuente-texto);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--qib-ink);
	background: var(--qib-paper);
	border: 1px solid var(--qib-linea-acento-fuerte);
	border-radius: 2px;
	box-shadow: none;
}
.qib-form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
	border: 1px solid var(--qib-acento);
	outline: 2px solid var(--qib-linea-acento);
	outline-offset: 0;
	color: var(--qib-ink);
}
.qib-form .wpcf7 .wpcf7-form-control.wpcf7-not-valid { border-color: var(--qib-error); }
.qib-form .wpcf7 .wpcf7-form-control.wpcf7-file { padding: 10px; }
.qib-form :where(.wpcf7-file)::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;
	font: 600 14px var(--qib-fuente-texto);
	color: var(--qib-navy-deep);
	background: transparent;
	border: 1.5px solid var(--qib-navy-deep);
	border-radius: 2px;
	cursor: pointer;
}
.qib-form .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: normal; }
/* El botón de envío toma los estilos de btn-gold (ver botones); acá solo lo que Astra le pone de más. */
.qib-form .wpcf7-submit { box-shadow: none; cursor: pointer; }
.qib-form .wpcf7-submit:is(:hover, :focus) { border-color: transparent; }
/* El indicador de envío va pegado al botón: con su margen de 24 px, en mobile bajaba de renglón. */
.qib-form .wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }
.qib-form .wpcf7-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	font-size: 14.5px;
	line-height: 1.5;
}

/* ---------- transición entre páginas ----------
   Al pasar de una página del sitio a otra, la nueva aparece con un fundido corto: es la transición de vistas
   del navegador (donde no la soporta, la página cambia como siempre). Es lo único de las animaciones que no
   sale de Elementor: en la versión gratis no hay "Page Transitions" (son de Pro). Con movimiento reducido no
   hay fundido. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }

/* ---------- aparición al hacer scroll ----------
   La animación de entrada "Fade In Up" de Elementor, elegida en el panel (Avanzado > Efectos de
   movimiento), sube el elemento todo su alto; en el sitio sube 24 px, como el "reveal" del Boceto.
   Con la duración "Rápida" (0,75 s) queda como en el Boceto (0,7 s). Con movimiento reducido,
   Elementor muestra el elemento sin animar. */
.animated.fadeInUp { animation-name: qib-aparece; animation-timing-function: ease; }
@keyframes qib-aparece {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marquee > :where(.e-con) { animation: none; }
	/* Sin el zoom lento de las fotos del hero (las fotos se siguen cruzando). Excepción de
	   especificidad: iguala la regla de Elementor que aplica el zoom y le gana por venir después. */
	.qib-hero .elementor-ken-burns { transform: none; }
	/* Las tarjetas y las fotos no se elevan ni se agrandan al pasar el mouse (Transformar > Hover en
	   Elementor). Excepción de especificidad: las reglas de Elementor que aplican la transformación llevan
	   dos clases; estas llevan una más (:hover). */
	.e-con.e-transform:hover,
	.e-transform:hover .elementor-widget-container,
	.e-transform:not(:has(.elementor-widget-container)):hover { transform: none; }
}

/* ---------- responsive (breakpoints del Boceto: 980 y 860 px) ---------- */
@media (max-width: 980px) {
	.sede-row { --padding-top: 32px; --padding-bottom: 32px; --gap: 24px; --row-gap: 24px; }
	.services-teaser-list :where(ul, ol) { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	.trayectoria-foto img { height: 280px; }
}
@media (max-width: 860px) {
	.stat { border-left: none; }
	/* Un botón con texto largo pasa a dos renglones parejos en vez de salirse de la pantalla (en el Boceto
	   se sale), y una palabra que sola no entra (productosqib.com.ar, a 360 px) se corta.
	   Excepción de especificidad: las mismas 3 clases que los botones, para ganarle a su "nowrap". */
	:is(.btn-gold, .btn-outline, .btn-outline-dark).elementor-widget-button .elementor-button { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
	.chem-list :where(ol, ul) { columns: 1; }
	.policy-list :where(li) { flex-direction: column; align-items: flex-start; gap: 12px; }
}