/* MechQuote design system: tokens + site-wide rules shared by every page.

   The per-page Elementor CSS (wp-content/uploads/elementor/css/post-*.css) refers to these tokens
   for colours, fonts, title sizes, radii, shadows and section spacing, so the look is changed here.
   Loaded last in <head> (templates/base.html). Rules are prefixed with body/#main-container where they
   must beat Elementor's per-element selectors. */

:root {
	/* colour */
	--mq-navy: #0C1734;         /* titles */
	--mq-text: #3A4F66;         /* body copy */
	--mq-text-soft: #6B7689;    /* secondary copy, captions */
	--mq-blue: #4172F3;         /* accent: eyebrows, highlights, icons, blue bands */
	--mq-blue-dark: #1F56E0;
	--mq-blue-soft: #EAF0FE;
	--mq-green: #00B06A;        /* brand + primary call to action */
	--mq-green-dark: #008F56;
	--mq-green-soft: #E6F7EF;
	--mq-cta: var(--mq-green);
	--mq-cta-dark: var(--mq-green-dark);
	--mq-bg: #FAFBFC;           /* page */
	--mq-bg-alt: #F3F6FB;       /* alternate sections */
	--mq-line: #E6E9F2;
	--mq-line-strong: #D5DBE6;
	--mq-dark: #19303D;         /* footer */

	/* type */
	--mq-font-head: "Archivo", sans-serif;
	--mq-font-body: "Lato", sans-serif;
	--mq-h1: clamp(34px, 1.4rem + 2.6vw, 56px);
	--mq-h2: clamp(28px, 1.25rem + 1.5vw, 40px);
	--mq-h3: clamp(22px, 1.1rem + 0.7vw, 28px);
	--mq-h4: clamp(18px, 1rem + 0.25vw, 20px);
	--mq-h1-lh: 1.1;
	--mq-h2-lh: 1.2;
	--mq-h3-lh: 1.25;
	--mq-h4-lh: 1.3;
	--mq-fs-body: 16px;
	--mq-fs-lead: 18px;
	--mq-fs-sm: 14px;
	--mq-lh-body: 1.6;
	--mq-eyebrow-ls: 3px;

	/* shape */
	--mq-radius: 12px;
	--mq-radius-sm: 8px;
	--mq-shadow: 0 4px 16px rgba(12, 23, 52, 0.06);
	--mq-shadow-hover: 0 16px 32px rgba(12, 23, 52, 0.12);

	/* rhythm: vertical padding of every page section */
	--mq-section-y: 88px;

	/* Blocksy theme palette/fonts -> tokens */
	--theme-palette-color-1: var(--mq-blue);
	--theme-palette-color-2: var(--mq-blue-dark);
	--theme-palette-color-3: var(--mq-text);
	--theme-palette-color-4: var(--mq-navy);
	--theme-palette-color-7: var(--mq-bg);
	--theme-font-stack-default: var(--mq-font-body);
}

@media (max-width: 1024px) {
	:root { --mq-section-y: 64px; }
}

@media (max-width: 767px) {
	:root { --mq-section-y: 48px; }
}

body {
	font-family: var(--mq-font-body);
	color: var(--mq-text);
}

h1, h2, h3, h4, h5, h6 {
	--theme-font-family: var(--mq-font-head);
	--theme-font-weight: 700;
	font-family: var(--mq-font-head);
	color: var(--mq-navy);
}

/* ---------- Buttons: one shape, colour variants come from the page CSS ---------- */

body .ekit-wid-con .elementskit-btn,
body .elementor-widget-button .elementor-button,
body .elementskit-single-pricing a.elementskit-pricing-btn,
.mq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border-width: 2px;
	border-style: solid;
	border-radius: 999px;
	font-family: var(--mq-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, filter 0.2s, transform 0.2s;
}

/* One hover treatment for every button variant (page CSS no longer sets hover colours) */
body .ekit-wid-con .elementskit-btn:hover,
body .elementor-widget-button .elementor-button:hover,
body .elementskit-single-pricing a.elementskit-pricing-btn:hover {
	box-shadow: 0 8px 18px rgba(12, 23, 52, 0.12);
	filter: brightness(0.94);
	transform: translateY(-1px);
}

/* ElementsKit's hover overlay would repaint the button with its default colour */
body .ekit-wid-con .elementskit-btn::before {
	display: none;
}

/* Buttons without their own border colour get an invisible border, so all have the same height. */
body .ekit-wid-con .elementskit-btn,
body .elementor-widget-button .elementor-button,
body .elementskit-single-pricing a.elementskit-pricing-btn {
	border-color: transparent;
}

/* header CTAs are slightly smaller than content buttons */
body [data-elementor-type="header"] .ekit-wid-con .elementskit-btn,
body [data-elementor-type="header"] .elementor-widget-button .elementor-button {
	padding: 10px 22px;
	font-size: 14px;
}

.mq-btn--primary {
	background: var(--mq-cta);
	border-color: var(--mq-cta);
	color: #fff;
}

.mq-btn--primary:hover {
	background: var(--mq-cta-dark);
	border-color: var(--mq-cta-dark);
	color: #fff;
}

/* Text links built with the button widget ("Saber más ›" in cards) keep their link look */
body .ekit-wid-con .elementskit-btn.mq-link,
body .ekit-wid-con .elementskit-btn.mq-link:hover {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	filter: none;
	transform: none;
}

body .ekit-wid-con .elementskit-btn.mq-link:hover {
	color: var(--mq-blue);
}

/* ---------- Section titles: eyebrow + title + description ---------- */

body .elementskit-section-title-wraper p {
	line-height: var(--mq-lh-body);
}

/* ---------- Accordions: Elementor (FAQ page) and ElementsKit (home, pricing, Mechfinder) look the same ---------- */

#main-container .elementor-accordion .elementor-accordion-item,
#main-container .elementskit-accordion .elementskit-card {
	margin: 0 0 12px;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-radius);
	background: #fff;
	box-shadow: var(--mq-shadow);
	overflow: hidden;
}

#main-container .elementor-accordion .elementor-accordion-item + .elementor-accordion-item {
	border-top: 1px solid var(--mq-line);
}

#main-container .elementor-accordion .elementor-tab-title,
#main-container .elementskit-accordion .elementskit-card-header > .elementskit-btn-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 22px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var(--mq-navy);
	font-family: var(--mq-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

#main-container .elementor-accordion .elementor-tab-title a,
#main-container .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	color: inherit;
}

/* Elementor prints the icon before the title: show it on the right, like the ElementsKit accordions */
#main-container .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	order: 2;
	flex: none;
	width: auto;
	float: none;
	color: var(--mq-text-soft);
}

#main-container .elementor-accordion .elementor-tab-title .elementor-accordion-title {
	flex: 1;
}

#main-container .elementor-accordion .elementor-tab-title.elementor-active,
#main-container .elementskit-accordion .elementskit-card.active .elementskit-card-header > .elementskit-btn-link,
#main-container .elementskit-accordion .elementskit-card-header > .elementskit-btn-link[aria-expanded="true"] {
	background: #fff;
	color: var(--mq-blue);
}

#main-container .elementskit-accordion .elementskit-card-header > .elementskit-btn-link .ekit-accordion-title {
	color: inherit;
	font: inherit;
}

#main-container .elementskit-accordion .elementskit-card-header > .elementskit-btn-link .ekit_accordion_icon_group {
	position: static;
	flex: none;
	color: var(--mq-text-soft);
}

#main-container .elementskit-accordion .elementskit-card-header > .elementskit-btn-link .ekit_accordion_icon_group i,
#main-container .elementskit-accordion .elementskit-card-header > .elementskit-btn-link .ekit_accordion_icon_group svg {
	color: inherit;
	fill: currentColor;
}

#main-container .elementor-accordion .elementor-tab-content,
#main-container .elementskit-accordion .elementskit-card-body {
	padding: 0 22px 20px;
	border: 0;
	background: #fff;
	color: var(--mq-text);
	font-family: var(--mq-font-body);
	font-size: var(--mq-fs-body);
	line-height: var(--mq-lh-body);
}

#main-container .elementskit-accordion .elementskit-card-body p,
#main-container .elementor-accordion .elementor-tab-content p {
	margin: 0;
	color: inherit;
	font: inherit;
}

/* ---------- Cards ---------- */

body .elementskit-infobox,
body .elementskit-single-pricing {
	border-radius: var(--mq-radius);
}

#main-container .elementskit-single-pricing .elementskit-pricing-title {
	font-family: var(--mq-font-head);
	font-weight: 700;
}

/* ---------- Team cards (/sobre-nosotros/) ---------- */

#main-container .profile-square-v.square-v4 .profile-card {
	max-height: none;
	border-radius: var(--mq-radius);
	background: #fff;
	box-shadow: var(--mq-shadow);
}

#main-container .profile-square-v.square-v4 .profile-card .profile-header {
	position: relative;
	max-width: none;
	max-height: none;
	padding-top: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

#main-container .profile-square-v.square-v4 .profile-card .profile-header img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
}

#main-container .profile-square-v.square-v4 .profile-card .profile-body {
	padding: 18px 20px 20px;
}

/* ---------- Lists ---------- */

/* Check-mark list, same icon as the pricing cards */
.mq-checklist {
	margin: 12px 0 28px;
	padding: 0;
	list-style: none;
}

.mq-checklist > li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 30px;
	line-height: 1.5;
}

.mq-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mq-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%2300b06a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* ElementsKit stylish list (Mechfinder testimonial) ships without its stylesheet */
.ekit-stylish-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ekit-stylish-list-content {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* ---------- Legal pages (templates/legal.html) ---------- */

/* Blocksy widens Elementor's boxed containers to its own 1290px on non-Elementor pages:
   keep the header and footer exactly as on every other page. */
.ct-elementor-default-template .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1140px;
}

.ct-elementor-default-template #main .ct-container-full {
	padding-block: var(--mq-section-y);
}

.ct-elementor-default-template #main .hero-section,
.ct-elementor-default-template #main .entry-content {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 20px;
}

.ct-elementor-default-template #main .hero-section {
	margin-bottom: 32px;
}

.ct-elementor-default-template #main .page-title {
	font-size: var(--mq-h2);
	line-height: var(--mq-h2-lh);
	font-weight: 700;
}

.ct-elementor-default-template #main .entry-content {
	font-size: var(--mq-fs-body);
	line-height: var(--mq-lh-body);
}

.ct-elementor-default-template #main .entry-content h2 {
	margin: 32px 0 8px;
	font-size: var(--mq-h4);
	line-height: var(--mq-h4-lh);
}

.ct-elementor-default-template #main .entry-content > * + * {
	margin-top: 12px;
}

.ct-elementor-default-template #main .entry-content :is(ul, ol) {
	padding-left: 22px;
}

.ct-elementor-default-template #main .entry-content li + li {
	margin-top: 8px;
}

/* ---------- 404 (templates/404.html) ---------- */

.mq-notfound {
	max-width: 640px;
	margin: 0 auto;
	padding: calc(var(--mq-section-y) * 1.5) 20px;
	text-align: center;
}

.mq-notfound h1 {
	margin: 8px 0 16px;
	font-size: var(--mq-h1);
	line-height: var(--mq-h1-lh);
}

.mq-notfound p {
	margin: 0 0 28px;
	font-size: var(--mq-fs-lead);
}

.mq-eyebrow {
	color: var(--mq-blue);
	font-size: var(--mq-fs-sm);
	font-weight: 700;
	letter-spacing: var(--mq-eyebrow-ls);
	text-transform: uppercase;
}