/* ==========================================================================
   Quirulloc — base theme styles (header, footer, global helpers)
   The page body itself is composed in Elementor; these rules only cover
   the static chrome around it plus a few resets so Elementor sections can
   run edge-to-edge.
   ========================================================================== */

:root {
	--qc-navy-900: #061b36;
	--qc-navy-800: #0a2647;
	--qc-navy-700: #0f3060;
	--qc-blue: #18b7e8;
	--qc-blue-deep: #2f6fed;
	--qc-green: #35c17a;

	/* Companeras en componentes sueltos: rgba() no puede desmontar un
	   color de una variable, asi que los tintes translucidos necesitan
	   los canales por separado para poder seguir a la marca. */
	--qc-blue-rgb: 24, 183, 232;
	--qc-blue-deep-rgb: 47, 111, 237;
	--qc-navy-900-rgb: 6, 27, 54;

	/* Degradado del isotipo. */
	--qc-logo-a: #18b7e8;
	--qc-logo-b: #2f6fed;

	--qc-white: #ffffff;
	--qc-ink: #142033;
	--qc-muted: #7c8aa0;
	--qc-radius: 10px;
	--qc-shadow: 0 10px 30px rgba(var(--qc-navy-900-rgb), 0.15);
	--qc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--qc-header-h: 76px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--qc-ink);
	background: var(--qc-white);
	-webkit-font-smoothing: antialiased;
	padding-top: var(--qc-header-h);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
	position: fixed;
	top: -60px;
	left: 12px;
	z-index: 10000;
	background: var(--qc-white);
	color: var(--qc-navy-800);
	padding: 10px 16px;
	border-radius: var(--qc-radius);
	transition: top .25s var(--qc-ease);
}
.skip-link:focus { top: 12px; }

/* Let Elementor content ignore any default WP content max-width */
.site-main,
.elementor-section-wrap { max-width: none; }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--qc-header-h);
	z-index: 1000;
	background: linear-gradient(180deg, var(--qc-navy-800) 0%, var(--qc-navy-900) 100%);
	transition: box-shadow .35s var(--qc-ease), background-color .35s var(--qc-ease);
}

.site-header.is-scrolled {
	box-shadow: 0 8px 24px rgba(3, 12, 26, 0.35);
}

.site-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	height: 100%;
	padding: 0 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 22px;
	color: var(--qc-white);
	flex-shrink: 0;
}
.site-logo img { max-height: 44px; width: auto; }
.site-logo__text { letter-spacing: .2px; }
.site-logo__mark svg { display: block; transition: transform .5s var(--qc-ease); }
.site-logo:hover .site-logo__mark svg { transform: rotate(-18deg); }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 6px;
}

.site-nav__list > li { position: relative; }

.site-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
	border-radius: 999px;
	position: relative;
	transition: color .25s var(--qc-ease), background-color .25s var(--qc-ease);
}

.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 6px;
	height: 2px;
	background: linear-gradient(90deg, var(--qc-blue), var(--qc-blue-deep));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--qc-ease);
}

.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible {
	color: var(--qc-white);
	background: rgba(255, 255, 255, 0.06);
}
.site-nav__list > li > a:hover::after,
.site-nav__list > li > a:focus-visible::after { transform: scaleX(1); }

.site-nav__list .menu-item-has-children > a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 2px;
	transition: transform .25s var(--qc-ease);
	order: 2;
}

.site-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 220px;
	background: var(--qc-white);
	border-radius: var(--qc-radius);
	box-shadow: var(--qc-shadow);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s var(--qc-ease), transform .25s var(--qc-ease), visibility .25s;
}

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.site-nav__list .menu-item-has-children:hover > a::before { transform: rotate(225deg); }

.site-nav__list .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--qc-ink);
	font-size: 14px;
	font-weight: 500;
	transition: background-color .2s var(--qc-ease), color .2s var(--qc-ease), padding-left .2s var(--qc-ease);
}
.site-nav__list .sub-menu a:hover {
	background: rgba(var(--qc-blue-rgb), 0.08);
	color: var(--qc-blue-deep);
	padding-left: 18px;
}

.site-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.site-nav__toggle-bar {
	width: 100%;
	height: 2px;
	background: var(--qc-white);
	border-radius: 2px;
	transition: transform .3s var(--qc-ease), opacity .3s var(--qc-ease);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

.site-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(var(--qc-navy-900-rgb), 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--qc-ease), visibility .3s var(--qc-ease);
	z-index: 998;
}
.site-nav-overlay.is-active { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
	background: linear-gradient(180deg, var(--qc-navy-800) 0%, var(--qc-navy-900) 100%);
	color: rgba(255, 255, 255, 0.82);
	padding: 64px 28px 0;
}

.site-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.4fr 1.2fr;
	gap: 40px;
	padding-bottom: 48px;
}

.site-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--qc-white);
}

.site-footer__heading {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--qc-white);
}

.site-footer__list li { margin-bottom: 12px; }
.site-footer__list a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	transition: color .2s var(--qc-ease), padding-left .2s var(--qc-ease);
	display: inline-block;
}
.site-footer__list a:hover {
	color: var(--qc-blue);
	padding-left: 4px;
}

.site-footer__social {
	display: flex;
	gap: 10px;
	margin-bottom: 26px;
}
.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--qc-white);
	transition: background-color .25s var(--qc-ease), transform .25s var(--qc-ease);
}
.site-footer__social a:hover {
	background: linear-gradient(135deg, var(--qc-blue), var(--qc-blue-deep));
	transform: translateY(-3px);
}

/* Aviso del Libro de Reclamaciones. Va en blanco sobre el footer azul
   para que se lea como un aviso oficial y no como un enlace mas. */
.site-footer__claims {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 260px;
	padding: 11px 16px 11px 12px;
	background: var(--qc-white);
	border-radius: var(--qc-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: var(--qc-navy-800);
	transition: transform .25s var(--qc-ease), box-shadow .25s var(--qc-ease);
}
.site-footer__claims:hover,
.site-footer__claims:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.site-footer__claims-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(var(--qc-blue-deep-rgb), 0.1);
	color: var(--qc-blue-deep);
}

.site-footer__claims-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.2;
}
.site-footer__claims-text strong {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
}
.site-footer__claims-text small {
	font-size: 11px;
	font-weight: 500;
	color: var(--qc-muted);
}

/* Con la imagen autorizada el aviso manda: la tarjeta solo la enmarca. */
.site-footer__claims--img { padding: 8px; }
.site-footer__claims--img img { width: 100%; max-width: 210px; }

.site-footer__bottom {
	max-width: 1280px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 22px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 960px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
	.site-nav__toggle { display: flex; }

	.site-nav {
		position: fixed;
		top: var(--qc-header-h);
		right: 0;
		bottom: 0;
		width: min(320px, 82vw);
		background: var(--qc-navy-800);
		padding: 20px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .35s var(--qc-ease);
		z-index: 999;
	}
	.site-nav.is-open { transform: translateX(0); }

	.site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.site-nav__list > li > a { width: 100%; }
	.site-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.04);
		display: none;
		margin: 4px 0 4px 12px;
	}
	.site-nav__list .menu-item-has-children.is-open > .sub-menu { display: block; }
	.site-nav__list .sub-menu a { color: rgba(255, 255, 255, 0.85); }
	.site-nav__list .sub-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--qc-white); }
}

@media (max-width: 560px) {
	.site-footer__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home page — Elementor content
   ========================================================================== */

.qc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--qc-ease), transform .8s var(--qc-ease);
}
.qc-reveal.is-visible { opacity: 1; transform: none; }
.qc-reveal--delay-1 { transition-delay: .1s; }
.qc-reveal--delay-2 { transition-delay: .2s; }
.qc-reveal--delay-3 { transition-delay: .3s; }
.qc-reveal--delay-4 { transition-delay: .4s; }

/* Hero -------------------------------------------------------------------- */

.qc-hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(var(--qc-blue-rgb), 0.35), transparent 60%),
		linear-gradient(120deg, var(--qc-navy-900) 0%, var(--qc-navy-800) 55%, var(--qc-navy-700) 100%) !important;
}

.qc-hero::before {
	content: "";
	position: absolute;
	inset: auto -10% -35% auto;
	width: 60%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(53, 193, 122, 0.18), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.qc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(var(--qc-navy-900-rgb), 0.92) 0%, rgba(var(--qc-navy-900-rgb), 0.6) 45%, rgba(var(--qc-navy-900-rgb), 0.28) 100%);
	pointer-events: none;
	z-index: 1;
}

.qc-hero__slider {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.qc-hero__slider,
.qc-hero__slider .elementor-widget-container,
.qc-hero__slider .elementor-shortcode,
.qc-hero__slider .metaslider,
.qc-hero__slider #metaslider_container_21,
.qc-hero__slider .flexslider,
.qc-hero__slider .flex-viewport,
.qc-hero__slider ul.slides,
.qc-hero__slider ul.slides > li { height: 100% !important; }
.qc-hero__slider ul.slides > li img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.qc-hero__slider .flex-control-nav { z-index: 3; bottom: 24px !important; }

.qc-hero .elementor-widget:not(.qc-hero__slider) {
	position: relative;
	z-index: 2;
}

.qc-hero .qc-hero__eyebrow .elementor-heading-title {
	display: inline-block;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--qc-blue) !important;
	margin-bottom: 18px;
}

.qc-hero .elementor-heading-title {
	color: var(--qc-white) !important;
	font-weight: 800 !important;
	font-size: clamp(32px, 4.4vw, 54px) !important;
	line-height: 1.15 !important;
	max-width: 720px;
}

.qc-hero__subtitle {
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 17px !important;
	max-width: 560px;
	margin-top: 20px !important;
	line-height: 1.7 !important;
}

.qc-btn.elementor-button {
	background: linear-gradient(120deg, var(--qc-blue), var(--qc-blue-deep)) !important;
	border: none !important;
	color: var(--qc-white) !important;
	font-weight: 600 !important;
	padding: 16px 32px !important;
	border-radius: 999px !important;
	box-shadow: 0 14px 30px rgba(var(--qc-blue-rgb), 0.35) !important;
	transition: transform .3s var(--qc-ease), box-shadow .3s var(--qc-ease) !important;
}
.qc-btn.elementor-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 36px rgba(var(--qc-blue-rgb), 0.45) !important;
}

.qc-btn--ghost.elementor-button {
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
	box-shadow: none !important;
}
.qc-btn--ghost.elementor-button:hover {
	border-color: var(--qc-blue) !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

.qc-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}
.qc-hero__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
}
.qc-hero__dots span:first-child { background: var(--qc-blue); width: 22px; border-radius: 4px; }

/* About --------------------------------------------------------------------- */

.qc-about { padding: 96px 0 !important; }

.qc-about__media {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	min-height: 340px;
	background: linear-gradient(135deg, var(--qc-navy-800), var(--qc-navy-700)) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--qc-shadow);
}
.qc-about__media .elementor-icon-box-wrapper { flex-direction: column; text-align: center; }
.qc-about__media .elementor-icon-box-icon {
	background: rgba(255, 255, 255, 0.08);
	width: 84px;
	height: 84px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
}
.qc-about__media .elementor-icon-box-icon i { color: var(--qc-blue) !important; font-size: 30px !important; }
.qc-about__media .elementor-icon-box-title,
.qc-about__media .elementor-icon-box-description { color: rgba(255, 255, 255, 0.85) !important; }

.qc-about__eyebrow .elementor-heading-title {
	color: var(--qc-blue-deep) !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 13px !important;
}
.qc-about__text .elementor-heading-title {
	font-size: clamp(28px, 3vw, 40px) !important;
	font-weight: 800 !important;
	color: var(--qc-navy-900) !important;
	margin: 10px 0 18px !important;
}
.qc-about__text .elementor-widget-text-editor p {
	color: var(--qc-muted) !important;
	font-size: 16px !important;
	line-height: 1.8 !important;
}

/* Certifications -------------------------------------------------------- */

.qc-certs { padding: 20px 0 90px !important; }
.qc-certs__item {
	text-align: center;
	padding: 26px 14px;
	border-radius: 16px;
	transition: transform .35s var(--qc-ease), box-shadow .35s var(--qc-ease);
}
.qc-certs__item:hover { transform: translateY(-6px); box-shadow: var(--qc-shadow); }
.qc-certs__item .elementor-icon-box-wrapper { flex-direction: column; text-align: center; }
.qc-certs__item .elementor-icon-box-icon {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(var(--qc-blue-rgb), 0.12), rgba(var(--qc-blue-deep-rgb), 0.12));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
}
.qc-certs__item .elementor-icon-box-icon i { color: var(--qc-blue-deep) !important; font-size: 26px !important; }
.qc-certs__item .elementor-icon-box-title { font-size: 14px !important; font-weight: 700 !important; color: var(--qc-navy-900) !important; }
.qc-certs__item .elementor-icon-box-description { font-size: 12px !important; color: var(--qc-muted) !important; }

/* Split (Supply / Service) ----------------------------------------------- */

.qc-split__panel {
	min-height: 420px;
	display: flex;
	align-items: center;
	padding: 60px !important;
	position: relative;
	overflow: hidden;
}
.qc-split__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(3, 12, 26, 0.35);
}
.qc-split__panel > .elementor-widget-wrap { position: relative; z-index: 1; }

.qc-split__panel--supply { background: linear-gradient(135deg, var(--qc-navy-900), var(--qc-blue-deep)) !important; }
.qc-split__panel--service { background: linear-gradient(135deg, #06331f, var(--qc-green)) !important; }

.qc-split__panel .elementor-heading-title {
	color: var(--qc-white) !important;
	font-weight: 800 !important;
	font-size: clamp(26px, 3vw, 36px) !important;
}
.qc-split__panel .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
	max-width: 420px;
	margin-top: 14px !important;
}

@media (max-width: 767px) {
	.qc-hero { min-height: 460px; text-align: center; }
	.qc-hero .elementor-heading-title,
	.qc-hero__subtitle { max-width: 100%; }
	.qc-about { padding: 64px 0 !important; }
	.qc-split__panel { padding: 48px 28px !important; min-height: 320px; }
}

/* ==========================================================================
   Lineas de negocio
   El header y el footer no tienen colores propios: leen las variables de
   :root. Redefinirlas bajo la clase que functions.php pone en el <body>
   revuelve todo el cromado —fondo, subrayados, menu desplegable, overlay,
   isotipo— sin duplicar una sola regla.
   ========================================================================== */

body.marca-service {
	/* Verdes del mosaico de servicios y del carrusel de testimonios. */
	--qc-navy-900: #06301f;
	--qc-navy-800: #0d4634;
	--qc-navy-700: #135c44;
	--qc-blue: #35c17a;
	--qc-blue-deep: #12684d;

	--qc-blue-rgb: 53, 193, 122;
	--qc-blue-deep-rgb: 18, 104, 77;
	--qc-navy-900-rgb: 6, 48, 31;

	--qc-logo-a: #a9ebc9;
	--qc-logo-b: #35c17a;
}