/* =========================================================
   LQS — cabecera, pie y corrección tipográfica
   ========================================================= */

:root {
	/* Valores de respaldo por si lqs-theme.css no llegara a cargar.
	   Son ya los de la marca: la paleta buena manda desde lqs-theme.css. */
	--lqs-ink: #062F52;
	--lqs-gold: #D7A53C;
	--lqs-ink-soft: #607482;
	--lqs-line: #D9E8EF;
	--lqs-bg-soft: #EFF9FD;
	--lqs-wa: #D71920;
	--lqs-hd-h: 78px;
}

/* ---------- Accesibilidad ---------- */
.lqs-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--lqs-ink);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 8px 0;
}
.lqs-skip:focus { left: 0; }

/* =========================================================
   CABECERA
   ========================================================= */
.lqs-hd {
	position: relative;
	z-index: 90;
	font-family: inherit;
}
.lqs-hd__wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 22px;
	display: flex;
	align-items: center;
	gap: 22px;
}

/* Barra superior */
.lqs-hd__top {
	background: var(--lqs-ink);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
}
.lqs-hd__top .lqs-hd__wrap { justify-content: space-between; min-height: 40px; }
.lqs-hd__claim { margin: 0; letter-spacing: .01em; }
.lqs-hd__util { display: flex; align-items: center; gap: 20px; }
.lqs-hd__util a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	text-decoration: none;
	transition: color .15s;
}
.lqs-hd__util a:hover { color: #fff; }
.lqs-hd__social { display: inline-flex; gap: 12px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .18); }
.lqs-hd__social a { padding: 2px; }

/* Barra principal */
.lqs-hd__main {
	background: #fff;
	border-bottom: 1px solid var(--lqs-line);
}
.lqs-hd__main .lqs-hd__wrap { min-height: var(--lqs-hd-h); justify-content: space-between; }

.lqs-hd__logo { display: flex; align-items: center; flex: 0 0 auto; }
.lqs-hd__logo img {
	height: 54px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
	display: block;
}
.lqs-hd__wordmark { font-size: var(--t-d4); font-weight: 800; color: var(--lqs-ink); letter-spacing: -.02em; }

/* Navegación */
.lqs-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.lqs-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lqs-nav__item { position: relative; }
.lqs-nav__item > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	color: var(--lqs-ink);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	border-radius: 8px;
	white-space: nowrap;
	text-transform: none;
	transition: background .15s, color .15s;
}
.lqs-nav__item > a:hover { background: var(--lqs-bg-soft); color: var(--lqs-ink); }
.lqs-nav__item.is-active > a { color: var(--lqs-gold); }
.lqs-nav__caret {
	width: 7px;
	height: 7px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .55;
	transition: transform .18s;
}
.lqs-nav__item--mega:hover .lqs-nav__caret,
.lqs-nav__item--mega.is-open .lqs-nav__caret { transform: translateY(1px) rotate(225deg); }

/* Mega-menú de zonas */
.lqs-mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: #fff;
	border: 1px solid var(--lqs-line);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(15, 42, 61, .16);
	padding: 24px 26px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s, transform .16s, visibility .16s;
	z-index: 95;
}
.lqs-nav__item--mega:hover .lqs-mega,
.lqs-nav__item--mega:focus-within .lqs-mega,
.lqs-nav__item--mega.is-open .lqs-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.lqs-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	gap: 22px 30px;
}
.lqs-mega__head {
	display: block;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--lqs-gold);
	text-decoration: none;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--lqs-line);
}
.lqs-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lqs-mega__col li a {
	display: block;
	padding: 5px 8px;
	margin-left: -8px;
	border-radius: 7px;
	color: var(--lqs-ink-soft);
	text-decoration: none;
	font-size: 14.5px;
	transition: background .13s, color .13s;
}
.lqs-mega__col li a:hover { background: var(--lqs-bg-soft); color: var(--lqs-ink); }

/* Llamada a la acción */
.lqs-hd__cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lqs-hd__burger {
	display: none;
	align-items: center;
	justify-content: center;
	/* padding y flex-basis explícitos: el tema pone 15px 38px a todo <button>,
	   y con box-sizing:border-box eso reventaba el ancho y dejaba el icono
	   en 0px de ancho — un recuadro blanco vacío en móvil. */
	padding: 0;
	flex: 0 0 42px;
	min-width: 42px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--lqs-line);
	border-radius: 9px;
	background: #fff;
	color: var(--lqs-ink);
	cursor: pointer;
}
.lqs-hd__burger svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* Fijada al hacer scroll */
.lqs-hd.is-stuck .lqs-hd__main {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	box-shadow: 0 6px 24px rgba(15, 42, 61, .1);
	animation: lqs-slide .22s ease-out;
}
@keyframes lqs-slide { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.lqs-hd.is-stuck { padding-bottom: var(--lqs-hd-h); }

/* Panel móvil */
.lqs-drawer { position: fixed; inset: 0; z-index: 120; }
.lqs-drawer[hidden] { display: none; }
.lqs-drawer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 42, 61, .5);
}
.lqs-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(400px, 88vw);
	background: #fff;
	padding: 22px;
	overflow-y: auto;
	box-shadow: -10px 0 40px rgba(0, 0, 0, .2);
}
.lqs-drawer__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--lqs-line);
	border-radius: 9px;
	background: #fff;
	color: var(--lqs-ink);
	cursor: pointer;
}
.lqs-nav__list--movil {
	display: block;
	margin: 46px 0 22px;
}
.lqs-nav__list--movil .lqs-nav__item > a {
	font-size: 17px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lqs-line);
	border-radius: 0;
	justify-content: space-between;
}
.lqs-nav__list--movil .lqs-mega {
	position: static;
	transform: none;
	opacity: 1;
	visibility: visible;
	box-shadow: none;
	border: 0;
	padding: 8px 0 14px;
}
.lqs-nav__list--movil .lqs-mega__grid { grid-template-columns: 1fr 1fr; gap: 14px 18px; }

/* =========================================================
   BANDA DE CABECERA DE PÁGINA
   ========================================================= */
.lqs-pagehead {
	background: linear-gradient(120deg, #0B2130 0%, var(--lqs-ink) 55%, #17415C 100%);
	color: #fff;
	padding: 54px 0 58px;
	position: relative;
	overflow: hidden;
}
.lqs-pagehead::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(192, 138, 46, .22) 0%, transparent 68%);
}
.lqs-pagehead__wrap { max-width: 1240px; margin-inline: auto; padding-inline: 22px; position: relative; z-index: 1; }
.lqs-pagehead__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lqs-gold);
}
.lqs-pagehead__title {
	margin: 0;
	font-size: var(--t-d1);
	line-height: 1.12;
	letter-spacing: -.03em;
	color: #fff;
	text-transform: none;
	max-width: 20ch;
}
.lqs-pagehead__text {
	margin: 16px 0 0;
	font-size: var(--t-apoyo);
	line-height: 1.55;
	color: rgba(255, 255, 255, .84);
	max-width: 62ch;
}

/* =========================================================
   PIE
   ========================================================= */
.lqs-ft { background: var(--lqs-ink); color: rgba(255, 255, 255, .74); margin-top: 70px; }
.lqs-ft__wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding: 0 22px;
	display: grid;
	/* La marca ocupa lo justo para su párrafo; las cuatro columnas de enlaces
	   miden exactamente lo mismo. Antes la primera se llevaba 1.6fr y dejaba
	   un vacío enorme antes de «Dónde operamos»: era lo que se veía desigual. */
	grid-template-columns: 1.05fr .8fr .95fr .8fr 1.4fr;
	gap: 40px 28px;
	align-items: start;
}
.lqs-ft > .lqs-ft__wrap { padding-block: 54px 44px; }
.lqs-ft__logo { height: 62px; width: auto; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 16px; }
.lqs-ft__wordmark { font-size: var(--t-d4); font-weight: 800; color: #fff; margin: 0 0 14px; }
.lqs-ft__texto { font-size: var(--t-cuerpo); line-height: 1.6; margin: 0 0 20px; max-width: 34ch; }
.lqs-ft__social { display: flex; gap: 10px; }
.lqs-ft__social a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	color: rgba(255, 255, 255, .85);
	transition: background .15s, border-color .15s, color .15s;
}
.lqs-ft__social a:hover { background: var(--lqs-gold); border-color: var(--lqs-gold); color: #fff; }
.lqs-ft__title {
	/* La familia explícita: sin ella el tema colaba aquí su propia fuente
	   (Plus Jakarta Sans) y el pie usaba una tipografía distinta al resto. */
	font-family: inherit;
	font-size: var(--t-menor);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}
.lqs-ft__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: var(--t-cuerpo); }
.lqs-ft__list a { color: inherit; text-decoration: none; transition: color .15s; }
.lqs-ft__list a:hover { color: var(--lqs-gold); }
.lqs-ft__col:last-child .lqs-ft__list { font-size: var(--t-nota); }
.lqs-ft__dir, .lqs-ft__horario { line-height: 1.55; }
/* El correo es más largo que la columna: que parta donde toque en vez de
   desbordar y romper la rejilla. */
.lqs-ft__list a[href^="mailto:"] { overflow-wrap: anywhere; }
.lqs-ft__horario { color: rgba(255, 255, 255, .6); }
.lqs-ft__wa {
	display: inline-block;
	white-space: nowrap;
	margin-top: 16px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 9px;
	font-size: var(--t-nota);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.lqs-ft__wa:hover { background: var(--lqs-red, #D71920); border-color: var(--lqs-red, #D71920); }
.lqs-ft__legal { border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.lqs-ft__legal .lqs-ft__wrap {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-block: 20px;
}
.lqs-ft__legal p { margin: 0; }
.lqs-ft__legal a { color: var(--lqs-gold); text-decoration: none; }
.lqs-ft__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Los enlaces legales van en el medio, entre la razón social y la firma. */
.lqs-ft__legales { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.lqs-ft__legales a { color: rgba(255, 255, 255, .74); }
.lqs-ft__legales a:hover { color: #fff; }
@media (max-width: 900px) {
	.lqs-ft__legal .lqs-ft__wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =========================================================
   CORRECCIÓN TIPOGRÁFICA
   Astra fuerza mayúsculas y tamaños desproporcionados.
   ========================================================= */
/* El :not() es deliberado y hay que respetarlo.
   Estas reglas visten los titulares que escribe el editor, que no llevan
   clase. Los titulares de mis componentes (.lqs-ctaband__title,
   .lqs-zonecard__name, .lqs-sec__title...) tienen su propio color, muchas
   veces blanco sobre azul marino: si esta regla los alcanzara los pintaría
   de azul sobre azul y desaparecerían. Ya pasó. */
.lqs-page :is(h1, h2, h3, h4):not([class*="lqs-"]),
.lqs-wrap :is(h1, h2, h3, h4):not([class*="lqs-"]) {
	text-transform: none !important;
	letter-spacing: -.02em;
	color: var(--lqs-ink);
}
/* Las mayúsculas forzadas de Astra sí se quitan en todos, con clase o sin ella. */
.lqs-page :is(h1, h2, h3, h4),
.lqs-wrap :is(h1, h2, h3, h4) { text-transform: none !important; }

.lqs-page { font-size: var(--t-lede); line-height: 1.68; color: #24333F; }
.lqs-page__wrap { max-width: 1240px; margin-inline: auto; padding: 46px 22px 78px; }
.lqs-page__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 52px; align-items: start; }
.lqs-page__main > *:first-child { margin-top: 0; }

.lqs-page h2:not([class*="lqs-"]) {
	font-size: var(--t-d3);
	line-height: 1.22;
	margin: 44px 0 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--lqs-line);
}
.lqs-page h3:not([class*="lqs-"]) { font-size: var(--t-d4); line-height: 1.3; margin: 30px 0 10px; }
/* El mismo :not() que en los titulares, y por el mismo motivo: estas reglas
   son para el texto que escribe el editor. Sin él, `.lqs-page p` (0,1,1) le
   ganaba a `.lqs-sec__lede` (0,1,0) y le imponía su medida de 72ch y su
   composición a los párrafos de los componentes de la portada. */
.lqs-page p:not([class*="lqs-"]) { margin: 0 0 16px; max-width: 72ch; }
.lqs-page :is(ul, ol):not([class*="lqs-"]) { margin: 0 0 18px; padding-left: 22px; max-width: 72ch; }
.lqs-page li:not([class*="lqs-"]) { margin-bottom: 8px; }
.lqs-page li:not([class*="lqs-"])::marker { color: var(--lqs-gold); font-weight: 700; }
.lqs-page strong { color: var(--lqs-ink); }
.lqs-page a:not([class*="lqs-"]) { color: var(--lqs-ink); text-underline-offset: 3px; }
.lqs-page em { color: var(--lqs-ink-soft); }

/* Pasos numerados de "Cómo comprar": la cifra no debe gritar */
.lqs-page__pasos { counter-reset: lqs-paso; display: grid; gap: 4px; }

/* =========================================================
   ADAPTATIVO
   ========================================================= */
@media (max-width: 1080px) {
	.lqs-nav { display: none; }
	.lqs-hd__burger { display: flex; }
	.lqs-page__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.lqs-ft__wrap { grid-template-columns: 1fr 1fr; gap: 34px 30px; }
	.lqs-ft__col--marca { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
	.lqs-hd__claim { display: none; }
	.lqs-hd__util { width: 100%; justify-content: space-between; gap: 10px; }
	.lqs-hd__util a span { display: none; }
	.lqs-hd__util a { gap: 0; }
	.lqs-hd__social { padding-left: 0; border-left: 0; }
	.lqs-hd__logo img { height: 44px; }
	.lqs-pagehead { padding: 38px 0 42px; }
	.lqs-ft__wrap { grid-template-columns: 1fr; gap: 30px; }
	.lqs-ft > .lqs-ft__wrap { padding-block: 40px 32px; }
	.lqs-page__wrap { padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.lqs-mega, .lqs-nav__caret, .lqs-hd.is-stuck .lqs-hd__main { transition: none; animation: none; }
}

/* =========================================================
   Neutralizar los contenedores del tema
   Astra encierra el contenido en un contenedor estrecho con fondo
   propio; nuestras bandas y el pie necesitan todo el ancho.
   ========================================================= */
.lqs-shell-on { background: #fff; }
.lqs-shell-on #page,
.lqs-shell-on #content,
.lqs-shell-on .site-content,
.lqs-shell-on #primary,
.lqs-shell-on .site-main,
.lqs-shell-on .ast-container,
.lqs-shell-on .entry-content {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	display: block !important;
}
.lqs-shell-on .ast-separate-container .ast-article-single,
.lqs-shell-on .ast-separate-container #primary {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* La portada arranca directamente con el hero. */
.lqs-page--front { padding: 0; }
.lqs-page--front > .lqs-wrap:first-child { padding-top: 26px; }