/* =========================================================
   Gallardo Electricista — Sistema de diseño
   Tokens → base → layout → componentes → Elementor → responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
	--gal-navy-900: #08101d;
	--gal-navy-800: #0d1a2c;
	--gal-navy-700: #14263f;
	--gal-navy-600: #1d3453;
	--gal-navy-500: #2b4a70;

	/* Amarillo oficial de marca: el del rayo del logo (#f7d303).
	   El resto de la escala mantiene los mismos saltos de luminosidad que tenía
	   la ámbar anterior. La 700 es la única pensada para texto sobre blanco:
	   la 500 y la 600 son demasiado claras para eso (1.9:1). */
	--gal-amber-500: #f7d303;
	--gal-amber-600: #e3b600;
	--gal-amber-400: #ffe23f;
	--gal-amber-100: #fffadc;
	--gal-amber-700: #8f7200;

	/* Componentes del amarillo de marca, para las sombras y velos con alpha. */
	--gal-amber-rgb: 247, 211, 3;

	--gal-ink: #0f1a2a;
	--gal-body: #46536a;
	--gal-muted: #6b7890;
	--gal-line: #e2e8f2;
	--gal-surface: #ffffff;
	--gal-surface-2: #f5f7fb;
	--gal-surface-3: #eef2f8;

	--gal-success: #10794f;
	--gal-danger: #c0392b;

	--gal-radius-sm: 8px;
	--gal-radius: 14px;
	--gal-radius-lg: 22px;
	--gal-radius-pill: 999px;

	--gal-shadow-sm: 0 1px 2px rgba(15, 26, 42, .06), 0 2px 8px rgba(15, 26, 42, .05);
	--gal-shadow: 0 2px 6px rgba(15, 26, 42, .06), 0 14px 34px -14px rgba(15, 26, 42, .22);
	--gal-shadow-lg: 0 30px 60px -25px rgba(8, 16, 29, .45);

	--gal-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--gal-container: 1200px;
	--gal-gutter: clamp(1rem, 4vw, 2rem);
	--gal-section-y: clamp(3.5rem, 7vw, 6.5rem);

	--gal-header-h: 76px;

	/* Alto de la barra de administración de WordPress. Vale 0 para visitantes
	   y se recalcula más abajo cuando hay sesión iniciada. */
	--gal-admin-bar: 0px;
}

/* La barra de admin es position:fixed y taparía los primeros píxeles de la
   cabecera fija. WordPress la sirve a 32 px, a 46 px en tablet, y por debajo
   de 600 px deja de ser fija (se va con el scroll), así que ahí vuelve a 0. */
/* Se declara también en :root con :has() para que html pueda usarla en
   scroll-padding-top, que no hereda de body. */
body.admin-bar,
:root:has(body.admin-bar) { --gal-admin-bar: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar,
	:root:has(body.admin-bar) { --gal-admin-bar: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar,
	:root:has(body.admin-bar) { --gal-admin-bar: 0px; }
}

/* ---------- 2. Base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--gal-header-h) + var(--gal-admin-bar) + 16px);
}

body.gal-theme {
	font-family: var(--gal-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--gal-body);
	background: var(--gal-surface);
	-webkit-font-smoothing: antialiased;
}

/* `clip`, nunca `hidden`.

   `overflow-x: hidden` en html o body convierte el elemento en contenedor de
   scroll y rompe el `position: sticky` de la cabecera; por eso aquí no se usaba
   ningún recorte. El problema es que sin recorte el documento queda a merced de
   cualquier elemento que se salga, y hay uno que solo se sale en Safari: el
   menú lateral de móvil.

   `.gal-nav` es `position: fixed`, ocupa todo el ancho y, cerrado, se aparca
   fuera de la pantalla con `translateX(100%)`. **WebKit (el Safari del iPhone)
   cuenta los elementos `position: fixed` al calcular el ancho desplazable del
   documento; Blink (Chrome, y por tanto sus herramientas de desarrollo) no.**
   De ahí que la web se viera perfecta en el modo responsive del portátil y en
   el móvil se pudiera arrastrar de lado: en el iPhone el documento medía el
   doble de ancho por el menú aparcado a la derecha.

   `overflow-x: clip` recorta sin crear contenedor de scroll, así que corta el
   desbordamiento y el sticky de la cabecera sigue funcionando. */
html { overflow-x: clip; }

/* CookieYes aparca su modal de preferencias fuera de la pantalla mientras está
   cerrado (`translate(-50%, -50%)` sobre un anclaje a la izquierda, con lo que
   se va casi 200 px hacia fuera). Es `position: fixed`, así que provoca el
   mismo scroll horizontal en Safari que provocaba nuestro menú, y ningún
   recorte de un ancestro lo alcanza.

   Mientras no está abierto se saca del renderizado. El plugin abre el panel
   añadiendo la clase `cky-modal-open` —comprobado en el propio sitio—, así que
   el selector no interfiere con el panel de preferencias, que debe seguir
   funcionando por obligación legal. */
.cky-modal:not(.cky-modal-open) { display: none; }

body.gal-theme h1,
body.gal-theme h2,
body.gal-theme h3,
body.gal-theme h4,
body.gal-theme h5,
body.gal-theme h6 {
	font-family: var(--gal-font);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 .6em;
	text-wrap: balance;
}

/* Color base con especificidad de una clase (0,1,0): gana al tema padre y a
   Elementor, pero lo sobrescriben .gal-hero h1 o .gal-section--dark h2. */
:where(body.gal-theme) :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
	color: var(--gal-ink);
}

/* Tamaños base con especificidad de elemento (0,0,1): ganan al reset del tema
   padre por orden de carga y los componentes los ajustan con su clase. */
:where(body.gal-theme) h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem); }
:where(body.gal-theme) h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
:where(body.gal-theme) h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
:where(body.gal-theme) h4 { font-size: 1.125rem; }

body.gal-theme p { margin: 0 0 1.15em; }
body.gal-theme p:last-child { margin-bottom: 0; }

/* Por defecto los enlaces no van subrayados (navegación, botones, tarjetas);
   el subrayado se reserva para los enlaces dentro de texto corrido, donde sí
   aporta legibilidad y accesibilidad. */
/* :where() deja la regla base con especificidad 0, para que cualquier clase de
   componente (.gal-brand, .gal-nav a, .gal-footer a…) la sobrescriba sin tener
   que repetir el prefijo body.gal-theme en todo el archivo. */
:where(body.gal-theme a) {
	color: var(--gal-navy-600);
	text-decoration: none;
	transition: color .15s ease, text-decoration-color .15s ease;
}

/* La 700 y no la 500/600: el amarillo de marca sobre blanco se queda en 1.9:1.
   En secciones oscuras el hover lo resuelve .gal-section--dark más abajo. */
:where(body.gal-theme a:hover) { color: var(--gal-amber-700); }

body.gal-theme .gal-article a,
body.gal-theme .gal-check a,
body.gal-theme .elementor-widget-text-editor a,
body.gal-theme .elementor-tab-content a,
body.gal-theme .gal-form__consent a {
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(29, 52, 83, .4);
}

body.gal-theme .gal-article a:hover,
body.gal-theme .gal-check a:hover,
body.gal-theme .elementor-widget-text-editor a:hover,
body.gal-theme .elementor-tab-content a:hover,
body.gal-theme .gal-form__consent a:hover { text-decoration-color: currentColor; }

body.gal-theme .gal-hero .elementor-widget-text-editor a,
body.gal-theme .gal-section--dark .elementor-widget-text-editor a,
body.gal-theme .gal-section--dark .gal-check a { text-decoration-color: rgba(255, 226, 63, .5); }

body.gal-theme strong { color: var(--gal-ink); font-weight: 700; }

body.gal-theme img { max-width: 100%; height: auto; }

body.gal-theme :focus-visible {
	outline: 3px solid var(--gal-amber-500);
	outline-offset: 2px;
	border-radius: 4px;
}

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

/* Columna de lectura: coincide con el ancho de .gal-article. */
.gal-narrow { max-width: calc(760px + var(--gal-gutter) * 2); }

.gal-screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ---------- 3. Cabecera ---------- */
.gal-header {
	position: sticky;
	top: var(--gal-admin-bar);
	z-index: 500;
	background: var(--gal-navy-900);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.gal-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--gal-amber-500), rgba(var(--gal-amber-rgb), 0) 55%);
}

.gal-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--gal-header-h);
}

.gal-brand {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	text-decoration: none;
	color: #fff;
	flex-shrink: 0;
}

.gal-brand:hover { color: #fff; }

/* Logo oficial. Viene con fondo negro propio, así que se deja como pastilla
   redondeada sobre el azul de la cabecera en lugar de intentar recortarlo. */
.gal-brand__mark {
	display: block;
	width: 40px; height: 40px;
	border-radius: 11px;
	background: #000;
	box-shadow: 0 6px 18px -10px rgba(var(--gal-amber-rgb), .55);
}

.gal-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.gal-brand__name { font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }
.gal-brand__sub {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--gal-amber-400);
	font-weight: 600;
}

/* z-index: el ::after de .gal-header es el último hijo del stacking context
   de la cabecera, así que sin esto la línea ámbar se pinta sobre los submenús. */
.gal-nav {
	margin-inline-start: auto;
	position: relative;
	z-index: 1;
}

.gal-nav ul {
	display: flex;
	align-items: center;
	gap: .35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gal-nav li { position: relative; }

.gal-nav a {
	display: block;
	padding: .55rem .7rem;
	border-radius: var(--gal-radius-sm);
	color: rgba(255, 255, 255, .82);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
}

.gal-nav a:hover,
.gal-nav .current-menu-item > a,
.gal-nav .current-menu-ancestor > a {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}

/* Submenús */
.gal-nav .sub-menu {
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	min-width: 260px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: .4rem;
	background: #fff;
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	box-shadow: var(--gal-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.gal-nav li:hover > .sub-menu,
.gal-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gal-nav .sub-menu a {
	color: var(--gal-ink);
	font-weight: 600;
	padding: .55rem .7rem;
}

.gal-nav .sub-menu a:hover { background: var(--gal-surface-2); color: var(--gal-navy-700); }

.gal-header__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.15rem;
	border-radius: var(--gal-radius-pill);
	background: var(--gal-amber-500);
	color: var(--gal-navy-900);
	font-weight: 800;
	font-size: .98rem;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 24px -12px rgba(var(--gal-amber-rgb), .95);
	transition: transform .15s ease, background .15s ease;
}

.gal-header__cta:hover {
	background: var(--gal-amber-400);
	color: var(--gal-navy-900);
	transform: translateY(-1px);
}

.gal-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin-inline-start: auto;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 11px;
	background: transparent;
	cursor: pointer;
	color: #fff;
}

.gal-burger span {
	display: block;
	width: 20px; height: 2px;
	background: currentColor;
	position: relative;
	transition: background .15s ease;
}

.gal-burger span::before,
.gal-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px; height: 2px;
	background: currentColor;
	transition: transform .2s ease;
}

.gal-burger span::before { top: -6px; }
.gal-burger span::after { top: 6px; }

.gal-burger[aria-expanded="true"] span { background: transparent; }
.gal-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.gal-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 4. Migas ---------- */
.gal-breadcrumbs {
	background: var(--gal-surface-2);
	border-bottom: 1px solid var(--gal-line);
	font-size: .85rem;
}

.gal-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: .7rem 0;
}

.gal-breadcrumbs li + li::before {
	content: "›";
	margin-inline-end: .4rem;
	color: var(--gal-muted);
}

.gal-breadcrumbs a { color: var(--gal-muted); text-decoration: none; }
.gal-breadcrumbs a:hover { color: var(--gal-navy-700); text-decoration: underline; }
.gal-breadcrumbs [aria-current] { color: var(--gal-ink); font-weight: 600; }

/* ---------- 5. Secciones ---------- */
.gal-section { padding-block: var(--gal-section-y); }
.gal-section--tight { padding-block: clamp(2.2rem, 4vw, 3.5rem); }
.gal-section--muted { background: var(--gal-surface-2); }
.gal-section--line { border-top: 1px solid var(--gal-line); }

.gal-section--dark,
.gal-section--dark.e-con {
	background: var(--gal-navy-900);
	color: rgba(230, 237, 247, .82);
	position: relative;
	overflow: hidden;
}

/* Se cualifican con body.gal-theme para ganar a las reglas base de tipografía,
   que tienen esa misma especificidad. */
body.gal-theme .gal-section--dark h1,
body.gal-theme .gal-section--dark h2,
body.gal-theme .gal-section--dark h3,
body.gal-theme .gal-section--dark h4,
body.gal-theme .gal-section--dark strong,
body.gal-theme .gal-section--dark .elementor-heading-title { color: #fff; }

body.gal-theme .gal-section--dark p,
body.gal-theme .gal-section--dark li { color: rgba(230, 237, 247, .82); }

.gal-section--dark a { color: var(--gal-amber-400); text-decoration-color: rgba(255, 226, 63, .4); }
.gal-section--dark a:hover { color: var(--gal-amber-500); }

/* Patrón de "voltaje" para fondos oscuros */
.gal-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(80% 60% at 85% -10%, rgba(var(--gal-amber-rgb), .16), transparent 60%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 34px);
	pointer-events: none;
}

.gal-section--dark > * { position: relative; z-index: 1; }

/* Encabezados de sección */
.gal-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gal-amber-600);
	margin: 0 0 .75rem;
}

.gal-section--dark .gal-eyebrow,
.gal-hero .gal-eyebrow { color: var(--gal-amber-400); }

.gal-eyebrow::before {
	content: "";
	width: 26px; height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.gal-lead {
	font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
	line-height: 1.65;
	color: var(--gal-body);
	max-width: 62ch;
}

.gal-section--dark .gal-lead { color: rgba(230, 237, 247, .85); }

.gal-center { text-align: center; }
.gal-center .gal-lead { margin-inline: auto; }
.gal-center .gal-eyebrow { justify-content: center; }

/* En secciones centradas solo se centran los titulares: las tarjetas, listas y
   pasos siguen alineados a la izquierda, que es como se leen bien. */
.gal-center .gal-card,
.gal-center .gal-review,
.gal-center .gal-step,
.gal-center .gal-post-card,
.gal-center .gal-trust__item,
.gal-center .gal-faq,
.gal-center .gal-cta-band { text-align: start; }

.gal-center .gal-areas { justify-content: center; }

/* ---------- 6. Hero ---------- */
.gal-hero {
	background: var(--gal-navy-900);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
}

.gal-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(70% 70% at 88% 8%, rgba(var(--gal-amber-rgb), .22), transparent 62%),
		radial-gradient(60% 60% at 5% 100%, rgba(43, 74, 112, .55), transparent 60%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 38px);
	pointer-events: none;
}

.gal-hero > * { position: relative; z-index: 1; }

body.gal-theme .gal-hero h1,
body.gal-theme .gal-hero h2,
body.gal-theme .gal-hero h3,
body.gal-theme .gal-hero strong,
body.gal-theme .gal-hero .elementor-heading-title { color: #fff; }

body.gal-theme .gal-hero h1 em,
body.gal-theme .gal-hero h2 em { font-style: normal; color: var(--gal-amber-500); }

body.gal-theme .gal-hero p,
body.gal-theme .gal-hero li { color: rgba(230, 237, 247, .86); }

body.gal-theme .gal-hero a:not(.gal-btn):not(.elementor-button) { color: var(--gal-amber-400); }

.gal-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .85rem .4rem .5rem;
	border-radius: var(--gal-radius-pill);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: .85rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 1.25rem;
}

/* Subtítulo bajo el H1: concreta la cobertura territorial que el H1, ahora más
   corto, ya no nombra. Va entre el titular y la entradilla, con menos peso que
   los dos para que la jerarquía siga leyéndose. */
.gal-hero__claim {
	margin: .9rem 0 0;
	max-width: 62ch;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.55;
	color: rgba(230, 237, 247, .82);
}

/* Tarjeta lateral del hero */
.gal-hero__card {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--gal-radius-lg);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	box-shadow: var(--gal-shadow-lg);
}

.gal-hero__card-label {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gal-amber-400);
	margin-bottom: .35rem;
}

body.gal-theme .gal-hero__card-hours {
	font-size: .9rem;
	color: rgba(230, 237, 247, .7);
	margin: .25rem 0 1.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

body.gal-theme .gal-hero__card .gal-check li { font-size: .95rem; }
.gal-hero__card .gal-check li::before { background-color: rgba(var(--gal-amber-rgb), .18); }

@media (min-width: 901px) {
	body.gal-theme .gal-hero__split.e-con > .e-con-inner > .e-con:first-child { flex: 1.15 1 0; }
	body.gal-theme .gal-hero__split.e-con > .e-con-inner > .e-con:last-child { flex: .85 1 0; }
}

.gal-hero__badge b {
	display: inline-grid;
	place-items: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--gal-amber-500);
	color: var(--gal-navy-900);
}

/* ---------- 7. Botones ---------- */
.gal-btn,
body.gal-theme .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .95rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--gal-radius-pill);
	font-family: var(--gal-font);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.gal-btn.gal-btn--primary,
body.gal-theme .elementor-button {
	background: var(--gal-amber-500);
	color: var(--gal-navy-900);
	box-shadow: 0 14px 30px -16px rgba(var(--gal-amber-rgb), 1);
}

.gal-btn.gal-btn--primary:hover,
body.gal-theme .elementor-button:hover {
	background: var(--gal-amber-400);
	color: var(--gal-navy-900);
	transform: translateY(-2px);
}

/* Las clases de Elementor se aplican al contenedor del widget, no al enlace:
   por eso cada modificador se declara también como ".gal-btn--x .elementor-button".
   Ese contenedor es un div cuadrado a ancho completo, así que la variante suelta
   se limita a ".gal-btn.gal-btn--x" (HTML propio) para no pintarle fondo ni sombra. */
.gal-btn.gal-btn--ghost,
body.gal-theme .gal-btn--ghost .elementor-button {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .32);
	box-shadow: none;
}

.gal-btn.gal-btn--ghost:hover,
body.gal-theme .gal-btn--ghost .elementor-button:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.gal-btn.gal-btn--outline,
body.gal-theme .gal-btn--outline .elementor-button {
	background: transparent;
	color: var(--gal-navy-700);
	border-color: var(--gal-line);
	box-shadow: none;
}

.gal-btn.gal-btn--outline:hover,
body.gal-theme .gal-btn--outline .elementor-button:hover {
	background: var(--gal-surface-2);
	border-color: var(--gal-navy-600);
	color: var(--gal-navy-700);
}

body.gal-theme .gal-section--dark .gal-btn--outline .elementor-button,
body.gal-theme .gal-hero .gal-btn--outline .elementor-button {
	color: #fff;
	border-color: rgba(255, 255, 255, .32);
}

.gal-btn.gal-btn--wa,
body.gal-theme .gal-btn--wa .elementor-button {
	background: #25d366;
	color: #06331a;
	box-shadow: 0 14px 30px -16px rgba(37, 211, 102, 1);
}

.gal-btn.gal-btn--wa:hover,
body.gal-theme .gal-btn--wa .elementor-button:hover { background: #3ae07a; color: #06331a; }

.gal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

.gal-center .gal-actions { justify-content: center; }

/* ---------- 8. Tarjetas ---------- */
.gal-card {
	position: relative;
	height: 100%;
	padding: 1.6rem 1.5rem;
	background: var(--gal-surface);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	box-shadow: var(--gal-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gal-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--gal-shadow);
	border-color: #cfd9e8;
}

.gal-card h3 { margin-bottom: .5rem; }
.gal-card p { font-size: .97rem; }

.gal-card--accent::before {
	content: "";
	position: absolute;
	top: -1px; left: 1.5rem; right: 1.5rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--gal-amber-500), var(--gal-amber-400));
}

.gal-section--dark .gal-card {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

.gal-section--dark .gal-card:hover { border-color: rgba(var(--gal-amber-rgb), .45); }

/* Tarjeta de servicio con icono */
.gal-icon-card__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	margin-bottom: 1.1rem;
	border-radius: 13px;
	background: var(--gal-amber-100);
	color: var(--gal-amber-600);
}

.gal-section--dark .gal-icon-card__icon {
	background: rgba(var(--gal-amber-rgb), .16);
	color: var(--gal-amber-400);
}

.gal-card__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: 1rem;
	font-weight: 700;
	font-size: .93rem;
	color: var(--gal-navy-700);
	text-decoration: none;
}

.gal-card__link:hover { color: var(--gal-amber-600); gap: .6rem; }

/* ---------- 9. Rejillas ---------- */
.gal-grid { display: grid; gap: 1.25rem; }
.gal-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gal-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gal-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* ---------- 10. Barra de confianza ---------- */
.gal-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--gal-line);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	overflow: hidden;
}

.gal-trust__item {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: 1.15rem 1.25rem;
	background: var(--gal-surface);
	font-size: .95rem;
	font-weight: 600;
	color: var(--gal-ink);
}

.gal-trust__item svg { color: var(--gal-amber-600); flex-shrink: 0; }
.gal-trust__item span { line-height: 1.35; }
.gal-trust__item small {
	display: block;
	font-weight: 500;
	font-size: .82rem;
	color: var(--gal-muted);
}

/* ---------- 11. Pasos ---------- */
.gal-steps { counter-reset: step; display: grid; gap: 1.1rem; }

.gal-step {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	padding: 1.25rem 1.4rem;
	background: var(--gal-surface);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
}

.gal-step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	border: 2px solid var(--gal-amber-500);
	color: var(--gal-amber-600);
	font-weight: 800;
	font-size: 1.05rem;
}

.gal-step h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.gal-step p { font-size: .95rem; margin: 0; }

/* ---------- 12. Listas de comprobación ---------- */
.gal-check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.gal-check li {
	position: relative;
	padding-inline-start: 2rem;
	line-height: 1.6;
}

.gal-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .32em;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--gal-amber-100);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e3b600'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2l-9.4 9.4Z'/%3E%3C/svg%3E");
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
}

.gal-section--dark .gal-check li::before { background-color: rgba(var(--gal-amber-rgb), .18); }

.gal-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 13. FAQ ---------- */
.gal-faq { display: grid; gap: .75rem; }

.gal-faq details {
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	background: var(--gal-surface);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.gal-faq details[open] {
	border-color: #cfd9e8;
	box-shadow: var(--gal-shadow-sm);
}

.gal-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--gal-ink);
	cursor: pointer;
	list-style: none;
}

.gal-faq summary::-webkit-details-marker { display: none; }

.gal-faq summary::after {
	content: "";
	flex-shrink: 0;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--gal-surface-3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2346536a'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform .2s ease;
}

.gal-faq details[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e3b600'%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E");
	background-color: var(--gal-amber-100);
}

.gal-faq .gal-faq__body {
	padding: 0 1.35rem 1.25rem;
	font-size: .98rem;
}

/* ---------- 14. Banda CTA ---------- */
.gal-cta-band {
	position: relative;
	overflow: hidden;
	border-radius: var(--gal-radius-lg);
	background: linear-gradient(135deg, var(--gal-navy-800), var(--gal-navy-900) 60%);
	color: #fff;
	padding: clamp(2rem, 4vw, 3.25rem);
}

.gal-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(60% 120% at 92% 10%, rgba(var(--gal-amber-rgb), .28), transparent 60%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 34px);
}

.gal-cta-band > * { position: relative; z-index: 1; }
.gal-cta-band h2 { color: #fff; }
.gal-cta-band p { color: rgba(230, 237, 247, .85); max-width: 56ch; }

.gal-phone-big {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--gal-amber-500);
	text-decoration: none;
}

.gal-phone-big:hover { color: var(--gal-amber-400); }

/* ---------- 15. Zonas ---------- */
.gal-areas {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gal-areas li a,
.gal-areas li span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .5rem .95rem;
	border-radius: var(--gal-radius-pill);
	background: var(--gal-surface);
	border: 1px solid var(--gal-line);
	font-size: .9rem;
	font-weight: 600;
	color: var(--gal-navy-700);
	text-decoration: none;
}

.gal-areas li a:hover {
	border-color: var(--gal-amber-500);
	background: var(--gal-amber-100);
	color: var(--gal-navy-800);
}

.gal-section--dark .gal-areas li a,
.gal-section--dark .gal-areas li span {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .88);
}

/* ---------- 16. Reseñas ---------- */
.gal-review {
	height: 100%;
	padding: 1.6rem 1.5rem;
	background: var(--gal-surface);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.gal-review__stars { display: inline-flex; gap: 2px; color: var(--gal-amber-500); }
.gal-review blockquote { margin: 0; font-size: .99rem; color: var(--gal-body); }
/* `font-style: normal` porque el reset de Hello Elementor pone todo
   `figcaption` en cursiva, y aquí el pie es el nombre de una persona. */
.gal-review figcaption { font-size: .88rem; font-style: normal; color: var(--gal-muted); margin-top: auto; }
.gal-review figcaption b { display: block; color: var(--gal-ink); font-size: .95rem; }

/* Autor arriba, con su foto de Google: avatar a la izquierda, nombre y fecha a
   la derecha. Anula el `margin-top: auto` de arriba, que lo empujaba al fondo
   cuando el pie iba al final de la tarjeta. */
.gal-review .gal-review__autor {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 0;
	line-height: 1.35;
}

/* La inicial es el fondo del círculo y la foto se pinta encima. Si la foto no
   existe o falla, queda la inicial: nunca un hueco ni una imagen rota. */
.gal-review__avatar {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gal-avatar, #1a73e8);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
}

.gal-review__avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.gal-review__g {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 20px;
	height: 20px;
	padding: 2px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(8, 16, 29, .18);
}

/* Nota media de la ficha de Google, encima de las tarjetas. El ámbar 700 y no
   el 500: sobre blanco, el amarillo de marca se queda en 1.9:1 (ver la nota de
   los tokens). Las estrellas sí van en el amarillo, que son un icono. */
.gal-reviews__nota {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 2rem;
	font-size: 1rem;
	color: var(--gal-body);
}

.gal-reviews__nota b { color: var(--gal-ink); font-size: 1.15rem; }

/* Las tarjetas de opinión no se estiran a la altura de la fila. Las reseñas
   reales son de longitudes muy dispares —«Formales y eficientes.» al lado de
   una de seis líneas— y estirándolas quedaba media tarjeta en blanco. Cada una
   ocupa lo que ocupa su texto. */
.gal-reviews { align-items: start; }
.gal-reviews .gal-review { height: auto; }

/* En móvil, tres. Seis tarjetas apiladas son metro y medio de scroll entre
   «Cómo trabajamos» y las preguntas frecuentes, y a partir de la tercera ya
   nadie las lee. La nota media —«5,0 sobre 5 · 194 reseñas en Google»— sigue
   arriba, que es la cifra que de verdad convence. */
@media (max-width: 720px) {
	.gal-reviews .gal-review:nth-child(n+4) { display: none; }
}

/* Sin reseñas no se esconde solo el bloque: se esconde la sección entera.

   Si no, queda el antetítulo «Opiniones» y el titular «Lo que dicen nuestros
   clientes» con un hueco vacío debajo, que es exactamente lo que pasaba antes
   de conectar las reseñas. El titular vive en `_elementor_data` y no se puede
   quitar desde aquí sin reconstruir la página, así que se oculta el contenedor
   que lo envuelve: `:has()` sube desde la marca que deja el shortcode hasta la
   sección de Elementor que la contiene.

   La marca solo se emite cuando NO se pinta el aviso de administrador, así que
   aquí no hay que mirar si hay sesión: al administrador le llega el aviso y a
   todos los demás, la marca. */
.e-con:has(> .e-con-inner .gal-sin-resenas),
.gal-section:has(.gal-sin-resenas) { display: none; }

/* ---------- 17. Formulario ---------- */
/* `grid-template-columns` explícito, y no la columna implícita.

   Un grid sin columnas declaradas crea una columna `auto`, que se dimensiona a
   `max-content` y no encoge aunque su contenedor sea más estrecho. El `select`
   de servicios tiene opciones largas («Cámaras de videovigilancia»), así que
   imponía 329 px de ancho a todo el formulario: en pantallas de 360 px o menos
   se salía de su tarjeta y arrastraba a la página entera con scroll lateral.
   Con `minmax(0, 1fr)` la columna puede bajar de su contenido. */
.gal-form { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

.gal-form__row { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gal-form__row,
.gal-field { min-width: 0; }

.gal-field input,
.gal-field select,
.gal-field textarea { min-width: 0; max-width: 100%; }

.gal-field { display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr); }

.gal-field label {
	font-size: .88rem;
	font-weight: 700;
	color: var(--gal-ink);
}

.gal-field label span { color: var(--gal-danger); }

.gal-field input,
.gal-field select,
.gal-field textarea {
	width: 100%;
	padding: .8rem .95rem;
	font-family: var(--gal-font);
	font-size: 1rem;
	color: var(--gal-ink);
	background: var(--gal-surface);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.gal-field textarea { min-height: 130px; resize: vertical; }

.gal-field input:focus,
.gal-field select:focus,
.gal-field textarea:focus {
	outline: none;
	border-color: var(--gal-amber-500);
	box-shadow: 0 0 0 3px rgba(var(--gal-amber-rgb), .2);
}

.gal-form__consent {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .85rem;
	color: var(--gal-muted);
	line-height: 1.5;
}

.gal-form__consent input { margin-top: .2rem; width: 18px; height: 18px; flex-shrink: 0; }

/* Honeypot del formulario. Se esconde encogiéndolo y recortándolo, no
   mandándolo a `left: -9999px`: así no extiende el documento hacia fuera. Para
   un bot sigue siendo un campo normal del DOM, que es de lo que se trata. */
.gal-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}

.gal-form__msg {
	padding: .9rem 1.1rem;
	border-radius: var(--gal-radius-sm);
	font-size: .95rem;
	font-weight: 600;
	display: none;
}

.gal-form__msg.is-ok { display: block; background: #e7f6ef; color: var(--gal-success); }
.gal-form__msg.is-error { display: block; background: #fdecea; color: var(--gal-danger); }

.gal-form-card {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--gal-surface);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius-lg);
	box-shadow: var(--gal-shadow);
}

/* ---------- 18. Blog ---------- */
.gal-posts { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gal-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--gal-surface);
	border: 1px solid var(--gal-line);
	border-radius: var(--gal-radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.gal-post-card:hover { transform: translateY(-3px); box-shadow: var(--gal-shadow); }
.gal-post-card__body { padding: 1.35rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.gal-post-card h2, .gal-post-card h3 { font-size: 1.15rem; margin: 0; }
.gal-post-card h2 a, .gal-post-card h3 a { color: var(--gal-ink); text-decoration: none; }
.gal-post-card h2 a:hover, .gal-post-card h3 a:hover { color: var(--gal-amber-600); }
.gal-post-card time { font-size: .82rem; color: var(--gal-muted); }
.gal-post-card p { font-size: .95rem; margin: 0; }

.gal-article { max-width: 760px; margin-inline: auto; }
.gal-article h2 { margin-top: 2.2rem; }
.gal-article h3 { margin-top: 1.6rem; }
.gal-article ul, .gal-article ol { padding-inline-start: 1.3rem; }
.gal-article li { margin-bottom: .5rem; }

/* Tablas del contenido (la de tratamientos de la política de privacidad, y
   cualquiera que añada el cliente).

   `display: block` + `overflow-x: auto` convierte la tabla en su propia caja de
   scroll. Sin esto la tabla crece hasta el ancho de su contenido, empuja el
   ancho del documento y en móvil se acaba desplazando la página entera: cuatro
   columnas ocupaban 533 px en una pantalla de 375. El `min-width` de las celdas
   evita el otro extremo, que las columnas se estrujen hasta ser ilegibles: se
   prefiere que el usuario arrastre la tabla de lado. */
.gal-article table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	margin: 1.6rem 0;
	border-collapse: collapse;
	font-size: .95rem;
}

.gal-article th,
.gal-article td {
	min-width: 9rem;
	padding: .7rem .9rem;
	border: 1px solid var(--gal-line);
	vertical-align: top;
}

.gal-article thead th {
	background: var(--gal-surface-2);
	text-align: start;
	font-weight: 700;
}

/* ---------- 18 bis. Fotos ---------- */
.gal-figure {
	margin: 0;
	border-radius: var(--gal-radius);
	overflow: hidden;
	background: var(--gal-surface-2);
	box-shadow: var(--gal-shadow-sm);
}

/* Las fotos vienen en proporciones distintas (retrato de móvil y horizontal),
   así que se recortan a una común para que las rejillas no queden escalonadas. */
.gal-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.gal-figure figcaption {
	padding: .8rem 1rem;
	font-size: .88rem;
	line-height: 1.45;
	color: var(--gal-muted);
	background: var(--gal-surface);
	border-top: 1px solid var(--gal-line);
}

/* En secciones oscuras el pie va sobre el azul, no sobre blanco. El fondo de la
   propia figura también, o se transparenta por debajo del pie y lo deja ilegible. */
.gal-section--dark .gal-figure,
.gal-hero .gal-figure { background: rgba(255, 255, 255, .04); }

.gal-section--dark .gal-figure figcaption,
.gal-hero .gal-figure figcaption {
	background: rgba(255, 255, 255, .06);
	border-top-color: rgba(255, 255, 255, .12);
	color: rgba(230, 237, 247, .75);
}

/* Retrato: se respeta la verticalidad, útil para la foto de equipo. */
.gal-figure--retrato img { aspect-ratio: 3 / 4; }

.gal-figures { display: grid; gap: 1.5rem; }
.gal-figures--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal-figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 18 ter. Fondos fotográficos ---------- */
/*
   Las tres bandas oscuras del sitio (hero, sección oscura y banda CTA) llevan
   detrás una foto real de trabajo. No es decoración: una web de electricista
   sin una sola foto de obra parece una central de llamadas, que es justo lo que
   el contenido dice que no somos.

   Cómo está montado, de abajo a arriba:

     1. `background-color`  — el navy de siempre. Si la foto no carga (o el
        navegador no soporta WebP) la banda se ve exactamente igual que antes.
     2. `var(--gal-foto)`   — la fotografía, con `cover` y el encuadre que
        indique `--gal-foto-pos`. En móvil no se usa `cover`: ver el bloque del
        final de la sección, que es el caso importante.
     3. `var(--gal-velo)`   — el velo oscuro, en la MISMA propiedad y por delante
        de la foto: las capas de `background-image` se apilan de izquierda a
        derecha, la primera arriba. Así no hace falta un pseudoelemento más.
     4. El `::before` que estas secciones ya tenían — el degradado ámbar y el
        rayado de "voltaje" de la marca, que siguen mandando en el color.

   Las fotos son de fondo, así que van sin texto alternativo a propósito: son
   decorativas y el mismo material aparece con `alt` y pie en las galerías
   (`[gal_gallery]`, ver inc/images.php). Repetir la descripción aquí solo
   añadiría ruido para un lector de pantalla.
*/

/* Catálogo. Ocho fotos: tres de trabajos propios (molino, focos, techo LED),
   cinco de banco (cuadro, multímetro, exterior, solar, relés — estas últimas
   con el prefijo `fondo-` en disco, ver inc/images.php).

   El ENCUADRE va aquí, junto a la foto, y no en cada página: depende de dónde
   esté la acción dentro de la imagen, no de en qué sección se use. Corregirlo en
   un sitio lo corrige en todas. */
:root {
	/* Todas las fotos están recortadas a apaisado (proporciones de 1,33 a 1,50),
	   así que el encuadre ya casi no tiene que corregir nada: solo se sube o se
	   baja un poco para centrar la acción cuando la banda es muy achatada. */
	--pos-molino:   50% 55%;
	--pos-focos:    50% 40%;   /* las manos y el foco */
	--pos-techo:    50% 30%;   /* el techo de lamas, que es el trabajo */
	--pos-cuadro:   50% 50%;
	--pos-multi:    50% 45%;   /* el multímetro y los bornes */
	--pos-exterior: 50% 50%;
	--pos-solar:    50% 50%;
	--pos-reles:    50% 50%;
}

/* Variante por ancho de pantalla. No se puede componer una `url()` a partir de
   una variable, así que cada foto se declara entera en cada corte; a cambio, la
   asignación de más abajo no se repite. Los cortes coinciden con los anchos que
   hay en disco (ver `widths` en inc/images.php). */
:root {
	--foto-molino:   url("../img/trabajo-local-el-molino-800.webp");
	--foto-focos:    url("../img/trabajo-focos-empotrados-800.webp");
	--foto-techo:    url("../img/trabajo-techo-led.webp");
	--foto-cuadro:   url("../img/trabajo-cuadro-electrico-800.webp");
	--foto-multi:    url("../img/fondo-multimetro-800.webp");
	--foto-exterior: url("../img/fondo-cuadro-exterior-800.webp");
	--foto-solar:    url("../img/fondo-cuadro-solar-800.webp");
	--foto-reles:    url("../img/fondo-reles-800.webp");
}

/* No hay corte de 480 a propósito, aunque los archivos existan (los usan las
   galerías). En móvil la foto se pinta a todo el ancho —375 px de CSS, que en
   una pantalla de densidad 2 o 3 son 750 u 1125 px reales—, así que un archivo
   de 480 se vería mal. El de 800 es el que corresponde. */

/* Por encima de 1025 se sirve el archivo más grande de cada foto. Solo el molino
   tiene variante de 1200; el resto ya son su tamaño máximo (los focos y el solar
   miden 1200 de base, el cuadro 960, el techo LED 765; ver inc/images.php). */
@media (min-width: 1025px) {
	:root {
		--foto-molino:   url("../img/trabajo-local-el-molino-1200.webp");
		--foto-focos:    url("../img/trabajo-focos-empotrados.webp");
		--foto-cuadro:   url("../img/trabajo-cuadro-electrico.webp");
		--foto-multi:    url("../img/fondo-multimetro.webp");
		--foto-exterior: url("../img/fondo-cuadro-exterior.webp");
		--foto-solar:    url("../img/fondo-cuadro-solar.webp");
		--foto-reles:    url("../img/fondo-reles.webp");
	}
}

/* El velo. Dos versiones:

   - Horizontal en escritorio, donde el texto ocupa la mitad izquierda: opaco
     donde va el titular y más abierto a la derecha, que es donde se ve la foto.
   - Plano en móvil, porque ahí el texto cruza todo el ancho. Más cerrado que el
     de escritorio en su lado abierto, pero no tanto como para tapar la foto.

   Los valores no son estéticos, son de contraste. Medido sobre el píxel más
   claro de cada banda dentro de la columna donde hay texto: blanco entre 9,5 y
   11,4:1 en escritorio y entre 7,7 y 9,2:1 en móvil, con el cuerpo y el ámbar
   por encima de 7:1. Muy holgado frente al 4.5:1 que pide la AA.

   Los puntos más claros de la foto (el logo amarillo del chaleco, un reflejo)
   bajan a 4:1, pero caen siempre en el 20 % derecho de la banda, donde no hay
   texto: a la izquierda va la columna de lectura y a la derecha, en el hero, la
   tarjeta, que tiene fondo propio. Si algún día se mueve texto a esa zona, hay
   que volver a cerrar el velo. */
.gal-hero,
.gal-section--dark,
.gal-section--dark.e-con,
.gal-cta-band {
	--gal-velo: linear-gradient(180deg, rgba(8, 16, 29, .84), rgba(8, 16, 29, .80));

	background-color: var(--gal-navy-900);
	background-image: var(--gal-velo), var(--gal-foto);
	background-size: cover;
	background-position: var(--gal-foto-pos, 50% 50%);
	background-repeat: no-repeat;
}

/* Carga diferida de fondos de Elementor: hay que saltársela.

   Elementor imprime en la página, en un <style> en línea:

     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
     { background-image: none !important; }

   Con `!important` y especificidad (0,5,0), y por el `*` alcanza también a los
   descendientes. El hero se salva por ser el primer contenedor, pero la banda
   oscura y la banda CTA caen de lleno. El fondo debería volver cuando su JS
   añade `e-lazyloaded` al entrar en pantalla, y a veces lo hace; pero medido en
   producción hay contenedores que **nunca** llegan a marcarse: en la ficha de
   boletín la banda seguía en `background-image: none` con la página desplazada
   6265 px, o sea muy por debajo de ella. Azul plano para siempre.

   La salida «oficial» es la clase `.e-no-lazyload` en el contenedor, pero eso
   vive en `_elementor_data` y obligaría a reconstruir las páginas con
   build/run.php, que es justo lo que no se puede hacer. Así que se le gana por
   las reglas de la cascada: `!important` para empatar y una clase más de
   especificidad —(0,5,1) contra (0,5,0)— para desempatar. De ahí que estos
   selectores lleven `.e-con.e-parent` colgando, que si no se quedan cortos.

   No se pierde nada por saltarse su carga diferida: en este sitio Elementor no
   pone ni un fondo propio —todos salen de aquí—, las fotos pesan entre 60 y
   100 KB y la del hero ya va con `preload`. */
body.gal-theme .e-con.e-parent.gal-hero:not(.e-no-lazyload),
body.gal-theme .e-con.e-parent.gal-section--dark:not(.e-no-lazyload),
body.gal-theme .e-con.e-parent .gal-cta-band:not(.e-no-lazyload) {
	background-image: var(--gal-velo), var(--gal-foto) !important;
}

/* En escritorio las tres bandas llevan velo direccional. El velo plano se
   probó en producción y no vale: la banda oscura de la portada mide 1440×863,
   la foto se estira a lo ancho y con el velo al 88 % uniforme el punto más
   claro se queda en rgb(35,41,51) frente al navy de base rgb(8,16,29). Sobre el
   papel hay foto; en pantalla es un azul plano. El degradado la abre hasta el
   66 % en el lado donde no hay texto, que es lo que la hace visible. */
@media (min-width: 901px) {
	.gal-hero,
	.gal-section--dark,
	.gal-section--dark.e-con {
		--gal-velo: linear-gradient(100deg,
			rgba(8, 16, 29, .94) 0%,
			rgba(8, 16, 29, .88) 45%,
			rgba(8, 16, 29, .66) 100%);
	}

	/* La columna derecha de la banda oscura lleva tarjeta, y ahí el velo ya está
	   abierto: el cristal del 5 % de blanco se quedaba sin suelo. Mismo remedio
	   que en la tarjeta del hero, navy translúcido. */
	.gal-section--dark .gal-card {
		background: rgba(8, 16, 29, .72);
		border-color: rgba(255, 255, 255, .18);
	}
}

/* ---- Reparto ----
   Dos reglas que se cumplen siempre:

   1. Dentro de una misma página no se repite ninguna foto. El visitante baja
      del hero al bloque de urgencias y de ahí al CTA, y ve tres escenas
      distintas.
   2. Cada página abre con la foto que más se parece a lo que cuenta: placas
      solares con un cuadro de continua, boletín con un armario de exterior,
      domótica con relés. Las tres de trabajo propio —molino, focos, techo LED—
      se reservan para las páginas que más se visitan.

   Se agrupa por FOTO y no por página: así el encuadre se declara una vez y se
   ve de un vistazo dónde sale cada imagen. Las clases `gal-pagina-<slug>` las
   pone gal_body_class() en functions.php.

   El reparto del HERO está duplicado en `gal_hero_photo()` (inc/images.php),
   que es quien emite el `<link rel="preload">`. Si cambias una foto de hero
   aquí, cámbiala también allí. */

/* -- Heroes -- */

/* Por defecto (portada, legales, 404 y búsqueda). */
.gal-hero { --gal-foto: var(--foto-focos); --gal-foto-pos: var(--pos-focos); }

.gal-pagina-reparaciones-y-averias .gal-hero,
.gal-pagina-electricista-en-chiclana .gal-hero,
.gal-pagina-sobre-nosotros .gal-hero {
	--gal-foto: var(--foto-molino);
	--gal-foto-pos: var(--pos-molino);
}

.gal-pagina-instalaciones-electricas .gal-hero,
.gal-pagina-antenista-tdt-y-satelite .gal-hero,
.gal-pagina-contacto .gal-hero { --gal-foto: var(--foto-techo); --gal-foto-pos: var(--pos-techo); }

.gal-pagina-electricista-en-san-fernando .gal-hero { --gal-foto: var(--foto-cuadro); --gal-foto-pos: var(--pos-cuadro); }

.gal-pagina-urgencias-24-horas .gal-hero,
.gal-pagina-electricista-en-el-puerto-de-santa-maria .gal-hero { --gal-foto: var(--foto-multi); --gal-foto-pos: var(--pos-multi); }

.gal-pagina-servicios .gal-hero,
.gal-pagina-boletin-electrico .gal-hero,
.gal-pagina-camaras-de-videovigilancia .gal-hero,
.gal-pagina-electricista-en-puerto-real .gal-hero { --gal-foto: var(--foto-exterior); --gal-foto-pos: var(--pos-exterior); }

.gal-pagina-placas-solares .gal-hero { --gal-foto: var(--foto-solar); --gal-foto-pos: var(--pos-solar); }

.gal-pagina-domotica .gal-hero,
.gal-pagina-telecomunicaciones .gal-hero { --gal-foto: var(--foto-reles); --gal-foto-pos: var(--pos-reles); }

/* -- Banda oscura -- */

/* Por defecto (portada, urgencias, cámaras, Chiclana, sobre nosotros). */
.gal-section--dark,
.gal-section--dark.e-con { --gal-foto: var(--foto-cuadro); --gal-foto-pos: var(--pos-cuadro); }

.gal-pagina-reparaciones-y-averias .gal-section--dark,
.gal-pagina-boletin-electrico .gal-section--dark,
.gal-pagina-telecomunicaciones .gal-section--dark,
.gal-pagina-electricista-en-puerto-real .gal-section--dark { --gal-foto: var(--foto-multi); --gal-foto-pos: var(--pos-multi); }

.gal-pagina-servicios .gal-section--dark,
.gal-pagina-instalaciones-electricas .gal-section--dark,
.gal-pagina-electricista-en-el-puerto-de-santa-maria .gal-section--dark { --gal-foto: var(--foto-reles); --gal-foto-pos: var(--pos-reles); }

.gal-pagina-placas-solares .gal-section--dark,
.gal-pagina-antenista-tdt-y-satelite .gal-section--dark { --gal-foto: var(--foto-exterior); --gal-foto-pos: var(--pos-exterior); }

.gal-pagina-domotica .gal-section--dark { --gal-foto: var(--foto-techo); --gal-foto-pos: var(--pos-techo); }

.gal-pagina-contacto .gal-section--dark { --gal-foto: var(--foto-solar); --gal-foto-pos: var(--pos-solar); }

.gal-pagina-electricista-en-san-fernando .gal-section--dark {
	--gal-foto: var(--foto-molino);
	--gal-foto-pos: var(--pos-molino);
}

/* -- Banda CTA --
   Solo la llevan cinco páginas: la portada, el hub de servicios, contacto,
   sobre nosotros y las de búsqueda y 404. Las fichas de servicio y las de zona
   cierran con la banda oscura, no con esta, así que aquí no hacen falta reglas
   para sus slugs.

   Es baja y con el texto a la izquierda, así que aguanta un velo más abierto:
   es donde más se agradece ver la foto entera. */
.gal-cta-band {
	--gal-velo: linear-gradient(105deg, rgba(8, 16, 29, .90) 0%, rgba(8, 16, 29, .85) 40%, rgba(8, 16, 29, .74) 100%);
	--gal-foto: var(--foto-molino);
	--gal-foto-pos: var(--pos-molino);
}

.gal-pagina-servicios .gal-cta-band {
	--gal-foto: var(--foto-solar);
	--gal-foto-pos: var(--pos-solar);
}

.gal-pagina-sobre-nosotros .gal-cta-band {
	--gal-foto: var(--foto-techo);
	--gal-foto-pos: var(--pos-techo);
}

/* Con la foto detrás, la tarjeta del hero no puede seguir siendo un cristal
   casi transparente: por la derecha el velo se abre hasta el 66 % y el blanco
   del listado se quedaba corto de contraste. Pasa a ser navy translúcido, que
   deja ver la foto por los bordes pero da suelo al texto. */
.gal-hero__card {
	background: rgba(8, 16, 29, .72);
	border-color: rgba(255, 255, 255, .18);
}

/* El texto de cuerpo de las bandas oscuras se pintaba al 82 % de opacidad, que
   sobre un fondo liso se ve bien y sobre una foto no: en los puntos más claros
   de la imagen se quedaba en 4,4:1, justo por debajo del 4.5:1 de la AA. Sube
   al 95 %. Medido sobre el píxel más claro de cada banda, no a ojo.

   Va con el mismo `body.gal-theme` que las reglas originales (sección 5) para
   ganarles por orden y no por especificidad. */
body.gal-theme .gal-hero p,
body.gal-theme .gal-hero li,
body.gal-theme .gal-section--dark p,
body.gal-theme .gal-section--dark li,
body.gal-theme .gal-cta-band p { color: rgba(230, 237, 247, .95); }

/* Excepción: el horario de la tarjeta del hero es un pie de apoyo y tiene que
   seguir leyéndose por debajo del teléfono. Va dentro de la tarjeta, que es
   navy casi opaco, así que ahí la foto no le quita contraste. */
body.gal-theme .gal-hero__card .gal-hero__card-hours { color: rgba(230, 237, 247, .7); }

/* ---- Móvil: la foto no se estira, se pone arriba ----

   El 95 % de las visitas son de móvil, así que este bloque no es un retoque:
   es el caso principal.

   Medido en producción antes de tocarlo: el hero de la portada en un iPhone
   mide 375x1363, o sea una proporción de 0,28. La foto de los focos es 480x640
   (0,75). Con `cover`, el navegador escala por la altura, la pinta a 1022 px de
   ancho, enseña solo el 37 % central y la amplía **4,3 veces** en píxeles de
   pantalla. El resultado no es «una foto con poco contraste»: es un borrón
   marrón. Por eso no se veían.

   El arreglo tiene tres partes:

     1. No se sirve el archivo de 480 (ver arriba), sino el de 800.
     2. `background-size: 100% auto`: la foto ocupa el ancho completo con SU
        proporción, sin recorte raro y sin ampliar. Ocupa entre 250 y 516 px de
        alto según la imagen, y debajo queda el navy del `background-color`.
     3. El velo se mide en PÍXELES, no en porcentaje. Va de un 55 % arriba,
        donde la foto tiene que verse, a un 98 % a los 235 px. Como la foto más
        baja del catálogo mide 250 px a este ancho, el borde donde la imagen
        acaba y empieza el navy cae siempre en zona ya opaca: no se ve la unión,
        sea cual sea la proporción de la foto. Con porcentajes no valdría,
        porque cada banda tiene una altura distinta.

   Ojo con el encuadre y el tamaño: aquí se fijan las PROPIEDADES
   (`background-size`, `background-position`) y no las variables `--gal-foto-*`.
   Las reglas de reparto por página son del tipo `.gal-pagina-x .gal-hero`, o
   sea (0,2,0), y ganarían a este bloque —una media query no suma
   especificidad—, así que la foto se quedaría centrada a media banda y
   aparecerían costuras arriba y abajo. Sobre la propiedad no hay pelea: solo la
   fija la regla base, con la misma especificidad que esta y antes en el
   archivo. */
@media (max-width: 900px) {
	.gal-hero,
	.gal-section--dark,
	.gal-section--dark.e-con,
	.gal-cta-band {
		--gal-velo: linear-gradient(180deg,
			rgba(8, 16, 29, .70) 0,
			rgba(8, 16, 29, .80) 110px,
			rgba(8, 16, 29, .92) 180px,
			rgba(8, 16, 29, .98) 235px,
			rgba(8, 16, 29, .98) 100%);

		background-size: 100% auto;
		background-position: 50% 0;
	}

	/* El resplandor ámbar de marca y el rayado de «voltaje» viven en el
	   `::before` y están pensados para caer sobre navy liso. En escritorio la
	   foto queda por debajo del velo cerrado y no se cruzan; en móvil, en
	   cambio, el ámbar aterriza justo en la franja donde la foto se ve, y suma
	   luz donde menos conviene: medido, el punto más claro de la columna de
	   texto se quedaba en 3,8:1 con el blanco, por debajo de la AA, y la
	   mayor parte de esa luz era ámbar, no foto. Atenuarlo recupera el
	   contraste sin apagar la fotografía, que es justo lo que se quiere ver. */
	.gal-hero::before,
	.gal-section--dark::before,
	.gal-cta-band::before { opacity: .55; }
}

/* ---------- 19. Pie ---------- */
.gal-footer {
	background: var(--gal-navy-900);
	color: rgba(230, 237, 247, .72);
	padding-block: clamp(3rem, 5vw, 4.5rem) 0;
	font-size: .95rem;
}

.gal-footer a { color: rgba(230, 237, 247, .72); text-decoration: none; }
.gal-footer a:hover { color: var(--gal-amber-500); }

.gal-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: 2.5rem;
}

.gal-footer h3 {
	color: #fff;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-bottom: 1.1rem;
}

.gal-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

/* Los servicios del pie ya no son enlaces (ver footer.php): se les da el mismo
   tono que tenían como enlace para que la columna no cambie de aspecto. */
.gal-footer__services li { color: rgba(230, 237, 247, .72); }

.gal-footer__contact { display: grid; gap: .75rem; margin-top: 1.25rem; }

.gal-footer__contact a,
.gal-footer__contact span {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	color: rgba(230, 237, 247, .85);
}

.gal-footer__contact svg { color: var(--gal-amber-500); flex-shrink: 0; }

.gal-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .85rem;
}

/* Mapa embebido. El iframe va dentro de una caja con radio y recorte para que
   no rompa el lenguaje de tarjetas del resto del sitio. */
.gal-map {
	overflow: hidden;
	border-radius: var(--gal-radius);
	border: 1px solid var(--gal-line);
	line-height: 0;
}

.gal-map iframe { display: block; width: 100%; max-width: 100%; border: 0; }

/* Crédito de la agencia: mismo renglón que el copyright, con menos peso.
   El enlace es dofollow a propósito, es un crédito de autoría real. */
.gal-footer__credit {
	display: inline-block;
	margin-inline-start: .35rem;
	opacity: .75;
}

.gal-footer__credit a { text-decoration: underline; text-underline-offset: 2px; }

.gal-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- 20. Barra de acción móvil ---------- */
.gal-mobile-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 600;
	display: none;
	grid-template-columns: repeat(3, 1fr);
	background: var(--gal-navy-900);
	border-top: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 -8px 24px rgba(8, 16, 29, .35);
	padding-bottom: env(safe-area-inset-bottom);
}

.gal-mobile-bar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .2rem;
	padding: .65rem .4rem;
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: .01em;
}

.gal-mobile-bar a + a { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.gal-mobile-bar a svg { color: var(--gal-amber-500); }
.gal-mobile-bar a.is-wa svg { color: #25d366; }
.gal-mobile-bar a:active { background: rgba(255, 255, 255, .08); }

/* ---------- 21. Ajustes Elementor ---------- */

/* `min-width: 0` en todos los contenedores y widgets de Elementor.

   Un elemento flex lleva `min-width: auto` por defecto, que le impide encoger
   por debajo del tamaño de su contenido. Elementor deja ese valor en
   `.e-con-inner`, y ahí está el problema: **Blink lo resuelve como 0 en un
   contenedor de columna, pero WebKit deja que el contenido estire la caja.**

   El resultado era espectacular y solo ocurría en iPhone: la línea de
   municipios del hero («Chiclana · Cádiz · San Fernando · …»), que en una sola
   línea mide unos 2200 px, ensanchaba el documento a 2230 px sobre una pantalla
   de 393. Medido en el propio dispositivo. En el escritorio, con Chrome, no se
   reproducía jamás.

   Es el «flexbox blowout» de manual. El tema ya lo tenía resuelto para los
   `gal-split-el`; esto lo generaliza al resto de contenedores, que es donde
   seguía mordiendo. */
body.gal-theme .e-con,
body.gal-theme .e-con-inner,
body.gal-theme .elementor-widget {
	min-width: 0;
}

/* Y `flex-wrap: nowrap` en cuanto los contenedores pasan a columna.

   Este era el fallo de verdad, y es de los que no se ven venir. Elementor
   marca sus contenedores con `flex-wrap: wrap`, que tiene todo el sentido
   mientras van en fila: si no caben, bajan de línea. Pero nuestro tema les
   cambia la dirección a `column` en móvil, y ahí `wrap` significa otra cosa
   muy distinta: **cuando la altura se queda corta, los hijos no siguen hacia
   abajo, se reparten en columnas nuevas hacia la derecha.**

   Medido en un iPhone real: seis columnas de 361 px, documento de 2230 px
   sobre una pantalla de 393. En la cadena de contenedores todos los elementos
   medían 361 —ninguno era ancho—, simplemente estaban colocados uno al lado
   del otro. Blink no lo reproduce porque deja la altura libre y nunca llega a
   envolver; WebKit sí.

   En móvil aquí no queremos envolver nada: todo apila. */
@media (max-width: 1024px) {
	/* El selector de `.e-con-inner` va calcado al de Elementor
	   (`.e-con.e-flex>.e-con-inner`) y con `body` delante: si no, pierde por
	   especificidad y la regla no llega a aplicarse. */
	body.gal-theme .e-con,
	body.gal-theme .e-con.e-flex > .e-con-inner {
		flex-wrap: nowrap;
	}
}

/* Elementor controla espaciados con variables CSS sobre .e-con.
   Redefinirlas desde nuestras clases evita !important y mantiene
   los contenedores editables desde el panel. */
body.gal-theme .gal-section.e-con,
body.gal-theme .gal-hero.e-con {
	--padding-top: var(--gal-section-y);
	--padding-bottom: var(--gal-section-y);
	--padding-left: var(--gal-gutter);
	--padding-right: var(--gal-gutter);
	--row-gap: 1.15rem;
	--column-gap: 1.15rem;
	--content-width: min(100%, var(--gal-container));
}

body.gal-theme .gal-hero.e-con {
	--padding-top: clamp(3rem, 6vw, 5.5rem);
	--padding-bottom: clamp(3rem, 6vw, 5rem);
}

body.gal-theme .gal-section--tight.e-con {
	--padding-top: clamp(2.2rem, 4vw, 3.5rem);
	--padding-bottom: clamp(2.2rem, 4vw, 3.5rem);
}

body.gal-theme .gal-section--flush-top.e-con { --padding-top: 0px; }
body.gal-theme .gal-section--flush-bottom.e-con { --padding-bottom: 0px; }

/* Filas y columnas internas: sin padding propio, el gap lo pone el CSS */
body.gal-theme .gal-row.e-con,
body.gal-theme .gal-col.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

body.gal-theme .gal-row.e-con { --row-gap: 1.25rem; --column-gap: 1.25rem; }

body.gal-theme .gal-actions.e-con {
	--row-gap: .75rem;
	--column-gap: .75rem;
	--flex-wrap: wrap;
	margin-top: 1.75rem;
}

/* Los contenedores "full" no cablean justify-content a variables, se fija aquí. */
body.gal-theme .gal-actions.e-con {
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

/* Elementor resetea text-align en .e-con-inner; centramos vía su variable. */
body.gal-theme .gal-center.e-con { --text-align: center; }
body.gal-theme .gal-center .gal-actions.e-con { justify-content: center; }
body.gal-theme .gal-center .gal-lead { margin-inline: auto; }

/* Split de dos columnas */
body.gal-theme .gal-split-el.e-con { --row-gap: clamp(2rem, 5vw, 4rem); --column-gap: clamp(2rem, 5vw, 4rem); }
body.gal-theme .gal-split-el > .e-con-inner > .e-con,
body.gal-theme .gal-split-el.e-con-full > .e-con { flex: 1 1 0; min-width: 0; }

@media (max-width: 900px) {
	body.gal-theme .gal-split-el.e-con { --flex-direction: column; }
	body.gal-theme .gal-split-el.e-con > .e-con-inner { flex-direction: column; }
}

body.gal-theme .elementor-widget:not(:last-child) { margin-bottom: 0; }
body.gal-theme .elementor-widget-text-editor { line-height: 1.7; }
body.gal-theme .elementor-widget-heading .elementor-heading-title { line-height: 1.15; }
body.gal-theme .elementor-icon-box-wrapper { text-align: start; }

/* Espacio entre widgets dentro de tarjetas y bloques */
.gal-stack > .elementor-widget + .elementor-widget { margin-top: .85rem; }

/* FAQ construida con el widget "Alternar" de Elementor */
body.gal-theme .gal-faq .elementor-toggle,
body.gal-theme .gal-faq .elementor-accordion {
	display: grid;
	gap: .75rem;
}

body.gal-theme .gal-faq .elementor-toggle-item,
body.gal-theme .gal-faq .elementor-accordion-item {
	border: 1px solid var(--gal-line) !important;
	border-radius: var(--gal-radius);
	background: var(--gal-surface);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.gal-theme .gal-faq .elementor-toggle-item:hover,
body.gal-theme .gal-faq .elementor-accordion-item:hover {
	border-color: #cfd9e8 !important;
	box-shadow: var(--gal-shadow-sm);
}

body.gal-theme .gal-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: 1.1rem 1.35rem;
	margin: 0;
	font-family: var(--gal-font);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.45;
	color: var(--gal-ink);
	border: 0 !important;
	background: transparent;
}

body.gal-theme .gal-faq .elementor-tab-title a { color: inherit; text-decoration: none; }

body.gal-theme .gal-faq .elementor-tab-title.elementor-active { color: var(--gal-navy-700); }

body.gal-theme .gal-faq .elementor-toggle-icon,
body.gal-theme .gal-faq .elementor-accordion-icon {
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--gal-surface-3);
	color: var(--gal-body);
	font-size: .7rem;
}

body.gal-theme .gal-faq .elementor-active .elementor-toggle-icon,
body.gal-theme .gal-faq .elementor-active .elementor-accordion-icon {
	background: var(--gal-amber-100);
	color: var(--gal-amber-600);
}

body.gal-theme .gal-faq .elementor-tab-content {
	padding: 0 1.35rem 1.25rem !important;
	border: 0 !important;
	font-size: .98rem;
	color: var(--gal-body);
}

/* Submenú abierto en móvil */
@media (max-width: 1024px) {
	.gal-nav .sub-menu { display: none; }
	.gal-nav .sub-menu.is-open { display: block; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width: 1024px) {
	.gal-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gal-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gal-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gal-figures--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gal-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gal-split { grid-template-columns: minmax(0, 1fr); }
}

/* La cabecera pasa a hamburguesa en cuanto el menú completo deja de caber.
   El corte va a 1024 y no a 900: entre 901 y 955 px se mostraban a la vez el
   menú desplegado y el botón de teléfono (que es `nowrap`), y los tres bloques
   pedían 956 px. La cabecera desbordaba y arrastraba a toda la página con
   scroll horizontal. */
@media (max-width: 1024px) {
	.gal-burger { display: inline-flex; }
	.gal-header__cta { display: none; }

	/* Cerrado NO se aparca fuera de la pantalla.

	   Antes se ocultaba con `translateX(100%)`, que lo dejaba ocupando del 100%
	   al 200% del ancho. Un `position: fixed` colocado ahí fuera **cuenta para
	   el área desplazable en WebKit** (el motor de Safari, y por tanto de todos
	   los navegadores de iPhone, incluido Brave), aunque Blink lo ignore. Ese
	   era el motivo real de que la web se saliera en el móvil y se viera
	   perfecta en las herramientas de desarrollo del portátil.

	   Ni `overflow-x: hidden` ni `clip` en un ancestro sirven aquí: un elemento
	   fijo se posiciona contra el viewport, así que ningún padre lo recorta. La
	   única solución fiable es no sacarlo nunca del viewport: se oculta con
	   opacidad y `visibility`, y el pequeño desplazamiento de la animación es
	   vertical, que no genera scroll horizontal. */
	.gal-nav {
		display: none;
		position: fixed;
		inset: calc(var(--gal-header-h) + var(--gal-admin-bar) + 1px) 0 0;
		background: var(--gal-navy-900);
		padding: 1.25rem var(--gal-gutter) 6rem;
		overflow-y: auto;
		margin: 0;

		/* Que el gesto no se encadene a la página al llegar al final de la
		   lista: sin esto, seguir arrastrando scrollea el fondo por detrás del
		   menú. Sustituye al `overflow: hidden` en body que había, que además de
		   no bloquear nada rompía la cabecera (ver la nota al final de este
		   bloque). */
		overscroll-behavior: contain;
	}

	/* Cerrado con `display: none`, no con un desplazamiento fuera de pantalla:
	   sin caja no hay nada que pueda ensanchar el documento, en ningún motor.

	   Sin animación de entrada a propósito. Se probó con `animation` (una
	   `transition` no arranca desde `display: none`) y el menú se quedaba en el
	   fotograma inicial, con opacidad 0: abierto pero invisible. Un menú que
	   aparece al instante es preferible a uno bonito que a veces no aparece. */
	.gal-nav.is-open { display: block; }

	.gal-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }

	.gal-nav > ul > li > a {
		padding: .9rem .8rem;
		font-size: 1.05rem;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		border-radius: 0;
	}

	.gal-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: .25rem 0 .5rem .8rem;
		min-width: 0;
	}

	.gal-nav .sub-menu a { color: rgba(255, 255, 255, .75); font-weight: 500; }
	.gal-nav .sub-menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
}

/* Aquí NO va `body.gal-nav-open { overflow: hidden }`, que es lo que había.

   La intención era bloquear el scroll del fondo con el menú abierto, pero hacía
   justo lo contrario de lo que parece, y rompía el menú en móvil:

     - No bloquea nada. Quien scrollea el documento es `html`, no `body`. Medido
       con el menú abierto: `body.overflow` = hidden y aun así `html.scrollTop`
       subía a 35. La página se movía igual.
     - Y encima convierte `body` en contenedor de scroll, con lo que el
       `position: sticky` de la cabecera pasa a pegarse al borde de `body`
       —arriba del documento— en vez de al del viewport. Resultado: **la
       cabecera se iba con el scroll y se llevaba el botón de cerrar**, con el
       menú abierto y sin forma de salir. Es el mismo motivo por el que en la
       sección 2 no se usa `overflow-x` en html ni body.

   Comprobado en el sitio real a 375 px: con la regla, 35 px de scroll dejaban
   la cabecera en `top: -35`; sin ella, en `top: 0`, que es lo correcto.

   El fondo no se bloquea y no hace falta: el menú es `position: fixed` y cubre
   todo el viewport por debajo de la cabecera, así que no hay nada del fondo que
   tocar, y `overscroll-behavior: contain` (arriba, en `.gal-nav`) evita que el
   gesto se encadene a la página al llegar al final de la lista. La cabecera se
   queda quieta pase lo que pase, que es lo único imprescindible para poder
   cerrar.

   La clase `gal-nav-open` sigue poniéndose desde site.js: es un gancho útil y
   la usa el propio botón. Lo que se ha quitado es el `overflow`. */

@media (max-width: 782px) {
	.gal-mobile-bar { display: grid; }
	body.gal-theme { padding-bottom: 64px; }
}

@media (max-width: 720px) {
	.gal-grid--2,
	.gal-grid--3,
	.gal-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.gal-check--2 { grid-template-columns: minmax(0, 1fr); }
	.gal-trust { grid-template-columns: minmax(0, 1fr); }
	.gal-posts { grid-template-columns: minmax(0, 1fr); }
	.gal-figures--2,
	.gal-figures--3 { grid-template-columns: minmax(0, 1fr); }
	.gal-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.gal-form__row { grid-template-columns: minmax(0, 1fr); }
	.gal-step { grid-template-columns: 44px minmax(0, 1fr); gap: .9rem; padding: 1.1rem; }
	.gal-step::before { width: 44px; height: 44px; font-size: .95rem; }
	/* CTA a ancho completo en móvil: son el elemento que más convierte. */
	/* Al pasar a columna hay que quitarle el `wrap` que lleva en escritorio:
	   en columna, `wrap` reparte los botones en columnas hacia la derecha en
	   lugar de apilarlos. Es el mismo fallo del hero. */
	body.gal-theme .gal-actions.e-con {
		--flex-direction: column;
		--flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	body.gal-theme .gal-actions .elementor-widget-button,
	body.gal-theme .gal-actions .elementor-button,
	.gal-actions .gal-btn { width: 100%; }

	/* Los botones dejan de ser `nowrap` aquí. En escritorio interesa que no se
	   partan, porque van en fila y quedan feos a dos líneas; pero en móvil
	   ocupan todo el ancho, y una etiqueta larga como «Pedir presupuesto sin
	   compromiso» (329 px) no cabe en pantallas de 360 px o menos: en lugar de
	   partirse, ensanchaba el documento y dejaba toda la página con scroll
	   lateral. Es preferible el botón a dos líneas. */
	.gal-btn,
	body.gal-theme .elementor-button { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.gal-header, .gal-footer, .gal-mobile-bar, .gal-breadcrumbs { display: none !important; }
}