/* =========================================================================
   Working Capital Group — theme stylesheet
   Palette + type sourced from the WCG brand PDF. Motion language (easing
   curves, reveal-on-scroll, hover transforms) modeled after the premium
   finance-site feel of bank-boutique.com.
   ========================================================================= */

:root {
	--wcg-navy: #1D294B;
	--wcg-navy-dark: #121A33;
	--wcg-navy-light: #2E3F6E;
	--wcg-slate: #4A4D52;
	--wcg-bg: #F6F7FA;

	--wcg-ink: #171A20;
	--wcg-muted: #6B7280;
	--wcg-border: #E4E7EE;
	--wcg-white: #FFFFFF;

	--wcg-font-heading: 'Jost', 'Century Gothic', 'Futura', sans-serif;
	--wcg-font-body: 'Jost', 'Century Gothic', 'Futura', sans-serif;

	--wcg-container: 1200px;
	--wcg-radius: 16px;
	--wcg-radius-sm: 10px;

	/* Easing curves sampled from bank-boutique.com's motion system. */
	--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
	--ease-reveal: cubic-bezier(.45, 0, .14, 1.03);
	--ease-hover: cubic-bezier(.85, .26, .17, 1);
	--ease-sharp: cubic-bezier(.68, .17, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--wcg-font-body);
	color: var(--wcg-ink);
	background: var(--wcg-white);
	-webkit-font-smoothing: antialiased;
}

/* One typeface sitewide. Elementor's own widgets otherwise fall back to
 * their global kit's font variables, so this is forced site-wide. */
.wcg-site, .wcg-site * {
	font-family: var(--wcg-font-body) !important;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.wcg-skip-link {
	position: fixed; top: -100px; left: 12px; z-index: 9999;
	background: var(--wcg-navy); color: #fff; padding: 12px 18px; border-radius: 8px;
	transition: top .25s var(--ease-out-cubic);
}
.wcg-skip-link:focus { top: 12px; position: fixed; width: auto; height: auto; clip: auto; }

.wcg-container {
	max-width: var(--wcg-container);
	margin: 0 auto;
	padding: 0 28px;
}

h1, h2, h3, h4 { font-family: var(--wcg-font-heading); font-weight: 700; line-height: 1.15; margin: 0; color: var(--wcg-navy); }

.wcg-eyebrow,
.wcg-view h6.elementor-heading-title,
.wcg-front h6.elementor-heading-title {
	display: inline-block;
	font-family: var(--wcg-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wcg-navy-light) !important;
	margin: 0 0 14px;
}
.wcg-eyebrow--light { color: var(--wcg-navy-light) !important; }
/* "Nuestra propuesta" (Quiénes somos) — same size as the header's section
 * label next to the menu trigger. */
.wcg-view .wcg-split__text h6.elementor-heading-title { font-size: 16px; }

.wcg-h2,
.wcg-view h1.elementor-heading-title,
.wcg-view h2.elementor-heading-title,
.wcg-front h1.elementor-heading-title,
.wcg-front h2.elementor-heading-title {
	font-family: var(--wcg-font-heading);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wcg-navy) !important;
	font-size: clamp(28px, 3.4vw, 42px);
	margin-bottom: 18px;
}
/* Only used by the Impacto heading, which now sits on the same dark navy
 * gradient as the slider/Contacto — needs to be white, not navy. The
 * _css_classes setting lands on the widget wrapper, not the actual
 * <h1 class="elementor-heading-title"> inside it, so .wcg-h2--light on its
 * own only recolors the (non-rendering) wrapper — the earlier
 * ".wcg-view h1.elementor-heading-title { color: navy !important }" rule
 * still wins on the real element unless targeted directly here too. */
.wcg-h2--light { color: #fff !important; }
.wcg-impact h1.elementor-heading-title { color: #fff !important; }

.wcg-lead,
.wcg-split__text .elementor-widget-text-editor p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wcg-muted) !important;
	max-width: 60ch;
	margin: 0 0 16px;
}
.wcg-stat .elementor-widget-text-editor p { margin: 14px 0 0; font-size: 18px; color: rgba(255,255,255,.8) !important; line-height: 1.55; max-width: none; }
/* Reclaim some of the column's own side padding for the description only
 * (the number/label above keep the full gap) so longer copy has a better
 * chance of wrapping to 2 lines instead of 3-4. The widget-wrap is an
 * Elementor flex row, so the widget shrinks back to its wrapped content
 * width unless flex-shrink is disabled and the width is set explicitly. */
.wcg-stat .elementor-widget-text-editor {
	flex: 0 0 auto !important;
	width: 248px !important;
	max-width: 248px !important;
	margin-left: -35px !important;
	margin-right: -35px !important;
}

/* Legal pages (privacidad, términos): read as full-width reference
 * documents rather than a narrow marketing-copy column. */
.wcg-legal-title { text-align: center; }
.wcg-legal-content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--wcg-muted);
	max-width: none;
	text-align: justify;
}
.wcg-legal-content p { margin: 0 0 20px; }
.wcg-legal-content strong { font-weight: 400; }
.wcg-legal-content h2 { font-size: 24px; margin: 44px 0 8px; text-align: left; text-indent: 0; color: var(--wcg-navy); }
.wcg-legal-content h2:first-child { margin-top: 0; }

/* -------------------------------------------------------------------------
 * Scroll-reveal (Intersection Observer driven, see main.js)
 * ---------------------------------------------------------------------- */
.wcg-reveal {
	opacity: 0;
	transform: translateY(42px);
	transition: opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal);
	will-change: opacity, transform;
}
.wcg-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.wcg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.wcg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	border-radius: 999px;
	font-family: var(--wcg-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 1.5px solid transparent;
	transition: transform .35s var(--ease-hover), box-shadow .35s var(--ease-hover), background-color .3s var(--ease-out-cubic), color .3s var(--ease-out-cubic), border-color .3s var(--ease-out-cubic);
}
.wcg-btn--primary {
	background: var(--wcg-navy);
	color: #fff;
	box-shadow: 0 8px 22px -8px rgba(29,41,75,.55);
}
.wcg-btn--primary:hover {
	background: var(--wcg-navy-light);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(29,41,75,.6);
}
.wcg-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.55);
}
.wcg-btn--ghost:hover {
	background: rgba(255,255,255,.12);
	border-color: #fff;
	transform: translateY(-3px);
}

/* Elementor's Button widget puts _css_classes on the widget wrapper div,
 * not on the actual <a class="elementor-button"> it renders inside — so
 * .wcg-btn above never reaches the real link. Style that link directly
 * here (and neutralize Elementor's own default button look) whenever
 * .wcg-btn is used on a button widget.
 *
 * The wrapper div itself also inherits Elementor's generic
 * .elementor-element{width:100%} rule, and .wcg-btn's own background/
 * padding above still lands on it too — together that stretched a second,
 * bigger navy box behind the real (correctly sized) pill. Reset the
 * wrapper back to a plain, auto-width, invisible box. */
.wcg-btn.elementor-widget-button {
	display: flex !important;
	width: 100%;
	justify-content: center;
	padding: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.wcg-btn.elementor-widget-button .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px !important;
	border-radius: 999px !important;
	background: none;
	font-family: var(--wcg-font-heading);
	font-weight: 600;
	font-size: 14px !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 1.5px solid transparent;
	transition: transform .35s var(--ease-hover), box-shadow .35s var(--ease-hover), background-color .3s var(--ease-out-cubic), color .3s var(--ease-out-cubic), border-color .3s var(--ease-out-cubic);
}
.wcg-btn--primary.elementor-widget-button .elementor-button {
	background: var(--wcg-navy) !important;
	color: #fff !important;
	box-shadow: 0 8px 22px -8px rgba(29,41,75,.55);
}
.wcg-btn--primary.elementor-widget-button:hover .elementor-button {
	background: var(--wcg-navy-light) !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(29,41,75,.6);
}

/* -------------------------------------------------------------------------
 * Header — always minimal: logo + a single "Menú" trigger, at every
 * breakpoint, so the background artwork of each view stays visible. A thin
 * gradient (not a solid bar) keeps the mark legible without boxing it in.
 * ---------------------------------------------------------------------- */
/* Desktop: transparent at rest (the home slider's own dark scrim, or a
 * light legibility gradient on inner pages, gives contrast there instead),
 * becoming a solid, fully opaque navy bar only once scrolled — on every
 * page, home or inner, so scrolled content never bleeds through it.
 * Mobile overrides this to be always-navy (see the ≤560px block). */
.wcg-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	padding: 14px 0;
	background: transparent;
	box-shadow: none;
	transition: background-color .3s var(--ease-out-cubic), box-shadow .3s var(--ease-out-cubic);
}
.wcg-header::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 160px;
	background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%);
	pointer-events: none;
	z-index: -1;
	transition: opacity .3s var(--ease-out-cubic);
}
/* The home slider already has its own dark scrim for contrast, so it never
 * needs the light legibility gradient; scrolled headers drop it too since
 * they get a solid background instead. */
.wcg-header--on-dark::before,
.wcg-header--scrolled::before { opacity: 0; }
.wcg-header--scrolled {
	background: var(--wcg-navy-dark);
	box-shadow: 0 2px 20px -4px rgba(0,0,0,.3);
}

/* White text/icons/logo: on the home page (its own dark scrim, any scroll
 * position) and on any page once scrolled (solid navy backdrop). Inner
 * pages at rest keep the default navy-on-light-gradient below. */
.wcg-header--on-dark .wcg-header__section,
.wcg-header--scrolled .wcg-header__section { color: #fff; }
.wcg-header--on-dark .wcg-menu-trigger__icon span,
.wcg-header--scrolled .wcg-menu-trigger__icon span { background: #fff; }
.wcg-header--on-dark .wcg-lang-switcher,
.wcg-header--scrolled .wcg-lang-switcher { border-color: rgba(255,255,255,.35); }
.wcg-header--on-dark .wcg-lang-switcher__item,
.wcg-header--scrolled .wcg-lang-switcher__item { color: rgba(255,255,255,.55); }
.wcg-header--on-dark .wcg-lang-switcher__item.is-active,
.wcg-header--scrolled .wcg-lang-switcher__item.is-active { color: #fff; }
.wcg-header--on-dark .wcg-brand__logo--white,
.wcg-header--scrolled .wcg-brand__logo--white { display: inline-block; }
.wcg-header--on-dark .wcg-brand__logo--color,
.wcg-header--scrolled .wcg-brand__logo--color { display: none; }

/* Language switcher — a compact ES/EN (or more) toggle next to the menu
 * trigger, visible once a second language has been added from wp-admin >
 * Idiomas. Navy by default (inner pages at rest); flipped to white above
 * for the home page / once scrolled. */
.wcg-lang-switcher {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 14px;
	border-left: 1px solid rgba(29,41,75,.18);
}
.wcg-lang-switcher__item {
	font-family: var(--wcg-font-heading);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: rgba(29,41,75,.45);
	text-decoration: none;
	transition: color .25s var(--ease-out-cubic);
}
.wcg-lang-switcher__item:hover { color: var(--wcg-navy); }
.wcg-lang-switcher__item.is-active { color: var(--wcg-navy); }
.wcg-lang-switcher__item:not(:last-child)::after { content: '/'; margin-left: 6px; color: inherit; opacity: .4; font-weight: 400; }
.wcg-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.wcg-brand { display: inline-flex; align-items: center; }
.wcg-brand__logo { height: 66px; width: auto; transform: translateY(-3px); }
/* Inner pages render both logo files (see header.php): color by default
 * (navy text at rest), swapped for white above once scrolled or on home. */
.wcg-brand__logo--white { display: none; }

.wcg-header__right { display: flex; align-items: center; gap: 22px; }
.wcg-header__section {
	font-family: var(--wcg-font-heading);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: var(--wcg-navy);
	white-space: nowrap;
}

.wcg-menu-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 8px;
}
.wcg-menu-trigger__icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 18px; }
.wcg-menu-trigger__icon span { display: block; width: 100%; height: 2px; background: var(--wcg-navy); border-radius: 2px; transition: transform .3s var(--ease-sharp), opacity .3s var(--ease-sharp); }
.wcg-menu-is-open .wcg-menu-trigger__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wcg-menu-is-open .wcg-menu-trigger__icon span:nth-child(2) { opacity: 0; }
.wcg-menu-is-open .wcg-menu-trigger__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
 * Menu overlay (right-side drawer), opens from the single trigger above.
 * ---------------------------------------------------------------------- */
.wcg-menu-backdrop {
	position: fixed; inset: 0; z-index: 1400;
	background: rgba(255,255,255,.7);
	opacity: 0;
	transition: opacity .4s var(--ease-out-cubic);
}
.wcg-menu-backdrop.is-open { opacity: 1; }

.wcg-menu-overlay {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 1500;
	width: min(420px, 88vw);
	background: var(--wcg-navy-dark);
	transform: translateX(100%);
	transition: transform .5s var(--ease-sharp);
	box-shadow: -30px 0 60px -20px rgba(0,0,0,.4);
}
.wcg-menu-overlay.is-open { transform: translateX(0); }
.wcg-menu-overlay__inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: 70px 44px 32px; overflow-y: auto; }
.wcg-menu-close {
	position: absolute; top: 28px; right: 28px;
	width: 42px; height: 42px; border-radius: 50%;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
	color: #fff; font-size: 22px; line-height: 1;
	transition: background-color .3s var(--ease-out-cubic), transform .3s var(--ease-hover);
}
.wcg-menu-close:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); }

.wcg-menu-overlay__logo { height: 120px; width: auto; align-self: center; flex-shrink: 0; margin: 0 0 30px; }
.wcg-menu-overlay__list { display: flex; flex-direction: column; gap: 0; }
.wcg-menu-overlay__list a {
	display: block;
	font-family: var(--wcg-font-heading);
	font-weight: 700;
	font-size: clamp(17px, 2.5vw, 21px);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
	padding: 9px 0;
	transition: color .3s var(--ease-out-cubic), padding-left .3s var(--ease-hover);
}
.wcg-menu-overlay__list a:hover,
.wcg-menu-overlay__list a:focus-visible { color: #fff; padding-left: 10px; }
.wcg-menu-overlay__list a.is-active { color: #fff; }
.wcg-menu-overlay__list a.is-active::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-left: 12px; vertical-align: middle; }

.wcg-menu-overlay__meta { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; }
.wcg-menu-overlay__meta a { font-size: 14.5px; color: rgba(255,255,255,.7); transition: color .25s var(--ease-out-cubic); }
.wcg-menu-overlay__meta a:hover { color: #fff; }
.wcg-menu-overlay__meta .wcg-social { margin-top: 8px; }
.wcg-menu-overlay__meta .wcg-social a { color: #fff; }

/* -------------------------------------------------------------------------
 * Home slider (auto-advancing, dot navigation)
 * ---------------------------------------------------------------------- */
.wcg-carousel { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: var(--wcg-navy-dark); }
.wcg-carousel__track { position: relative; width: 100%; height: 100%; }
/* The 5 slides are Elementor inner-sections nested in a column, all
 * position:absolute — with no normal-flow content, Elementor's own
 * .elementor-widget-wrap collapses to ~0 height, so inset:0 on the slides
 * resolves against that instead of the 100vh outer section. Force height
 * through the whole wrapper chain so it doesn't collapse. */
#wcg-carousel > .elementor-container,
#wcg-carousel > .elementor-container > .elementor-column,
#wcg-carousel > .elementor-container > .elementor-column > .elementor-widget-wrap {
	height: 100%;
}
/* The [wcg_carousel_controls] shortcode (arrows/dots/legal) renders inside
 * its own Elementor widget wrapper, which Elementor also makes
 * position:relative by default — since it's the one normal-flow element
 * among absolutely-positioned slides, it sits at the top of the stack and
 * would become the positioning context for the arrows/dots (breaking their
 * intended top:50%/bottom placement relative to the whole slider). Make it
 * position:static so they position against .elementor-widget-wrap instead. */
#wcg-carousel .elementor-widget-shortcode {
	position: static;
}
.wcg-carousel__slide {
	/* Elementor's own .elementor-section{position:relative} rule has the
	 * same specificity as this class and can load after it, so !important
	 * is needed to keep the slides absolutely stacked. */
	position: absolute !important; inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.08);
	/* Elementor's own widgets/sections carry a generic
	 * transition:background .3s,border .3s,border-radius .3s,box-shadow .3s
	 * rule of equal specificity — as a shorthand property it replaces this
	 * declaration wholesale rather than merging, silently dropping the
	 * opacity/transform animation. !important keeps ours. */
	transition: opacity 1.2s cubic-bezier(.38,.67,.76,.66), transform 6.5s linear !important;
	display: flex; align-items: center;
	pointer-events: none;
}
.wcg-carousel__slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 1; }
.wcg-carousel__content { position: relative; z-index: 2; max-width: 1150px; margin: 0 auto; padding-top: 40px; text-align: center; }
/* The small eyebrow label above the slide title ("PROPÓSITO SUPERIOR"
 * etc.) — wider letter-spacing than the sitewide .wcg-eyebrow default,
 * just for this prominent home-slider spot. */
/* _css_classes for a Heading widget lands on the outer wrapper div, not the
 * actual <h6 class="elementor-heading-title"> holding the text — target
 * that directly, or letter-spacing/font-size here have no visible effect. */
.wcg-carousel__content .wcg-eyebrow .elementor-heading-title { color: #fff !important; font-weight: 600; font-size: 16px; letter-spacing: 1em; text-transform: uppercase; }
/* On desktop the eyebrow is mirrored into the header next to the menu
 * trigger (see main.js), so it's hidden inside the slide; on small screens
 * the header label is hidden, so show it back in the slide. */
.wcg-carousel__content .wcg-eyebrow { display: none; }

/* The title is now real HTML (an <h1> with a manual line break) inside a
 * text-editor widget, rather than Elementor's own escaped Heading field —
 * that field can't contain a <br>, and this build needs an exact 2-line
 * break per slide instead of relying on responsive reflow. */
.wcg-carousel__title-wrap {
	margin: 0 0 28px !important;
	opacity: 0; transform: translateY(24px);
	transition: opacity .8s var(--ease-reveal) .25s, transform .8s var(--ease-reveal) .25s !important;
}
.wcg-carousel__title {
	color: #fff !important;
	font-family: var(--wcg-font-heading);
	font-weight: 700;
	font-size: clamp(24px, 3.6vw, 42px) !important;
	line-height: 1.3;
	white-space: nowrap;
	text-transform: uppercase !important;
	margin: 0 !important;
}
.wcg-carousel__title-line1 { letter-spacing: .06em; }
.wcg-carousel__slide.is-active .wcg-carousel__title-wrap { opacity: 1; transform: translateY(0); }

/* Centred title (or unit logos) with the line-and-ring arrow BELOW it,
 * centred under the text. */
.wcg-carousel__titlebar { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.wcg-carousel__titlebar .wcg-cta-arrow { align-self: center; }
/* align-items: flex-start (not center) — all three logo files have their
 * WC mark flush against the top edge, so top-aligning is what makes the
 * marks line up; centering would offset Insurance since its taller canvas
 * (extra tagline line) changes the row's cross-axis size. */
.wcg-carousel__logos { display: flex; align-items: flex-start; justify-content: center; gap: 104px; flex-wrap: nowrap; max-width: 100%; }
/* brightness(0) invert(1) turns any non-transparent pixel pure white
 * regardless of the logo file's own colors, so it reads cleanly against the
 * dark navy scrim (the same files stay full-color on the white unit cards). */
.wcg-carousel__logos img { height: 170px !important; width: auto !important; max-width: none !important; flex: 0 0 auto; object-fit: contain; filter: brightness(0) invert(1); }
/* The Insurance logo file carries an extra "Corredores de seguros" line under
 * the mark, so at equal image height its mark+wordmark render smaller than
 * Factoring/Leasing — scale it up to compensate. */
.wcg-carousel__logos img[src*="logo-insurance"] { height: 186px !important; }

/* -------------------------------------------------------------------------
 * Line-and-ring arrow — a single stroke that runs in from the left, crosses
 * into the ring and opens into an arrowhead past its centre (not a line
 * that stops at the ring's edge with a small chevron centred inside it).
 * Forward variant points right; --back mirrors it; --light for dark
 * backgrounds (contact form).
 * ---------------------------------------------------------------------- */
.wcg-cta-arrow {
	--ring: 32px;
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 88px; height: var(--ring);
	color: var(--wcg-navy);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
}
.wcg-cta-arrow::before {              /* the stroke, reaching the ring's centre */
	content: '';
	position: absolute;
	left: 0; top: 50%;
	width: calc(100% - var(--ring) / 2);
	height: 1px;
	background: currentColor;
	transform: translateY(-50%);
	transition: width .35s var(--ease-hover);
}
.wcg-cta-arrow > span {               /* the ring */
	position: absolute;
	right: 0; top: 50%;
	transform: translateY(-50%);
	width: var(--ring); height: var(--ring);
	border-radius: 50%;
	border: 1px solid currentColor;
	transition: background-color .3s var(--ease-out-cubic);
}
.wcg-cta-arrow > span::after {        /* the open arrowhead, centred on the ring */
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translate(-58%, -50%) rotate(45deg);
	transition: border-color .3s var(--ease-out-cubic);
}
.wcg-cta-arrow:hover::before { width: calc(100% - var(--ring) / 2 + 3px); }
.wcg-cta-arrow:hover > span { background: currentColor; }
.wcg-cta-arrow:hover > span::after { border-color: #fff; }

.wcg-cta-arrow--light { color: #fff; }
.wcg-cta-arrow--light:hover > span::after { border-color: var(--wcg-navy-dark); }

.wcg-cta-arrow--back { transform: scaleX(-1); width: 65px; }

.wcg-carousel__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 3; width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.4);
	color: #fff; font-size: 26px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background-color .3s var(--ease-out-cubic), transform .3s var(--ease-hover);
}
.wcg-carousel__arrow:hover { background: rgba(255,255,255,.16); transform: translateY(-50%) scale(1.08); }
.wcg-carousel__arrow--prev { left: 28px; }
.wcg-carousel__arrow--next { right: 28px; }

/* The stacked CTA (line-and-ring "next" link under each slide's title) also
 * switches to white on the dark scrim. On hover the ring fills with
 * currentColor (white here) — without this override the chevron's default
 * hover color (also white, meant for the navy variant) would vanish into
 * the now-white ring. */
.wcg-carousel__cta { color: #fff; }
.wcg-carousel__cta:hover > span::after { border-color: var(--wcg-navy-dark); }

.wcg-carousel__legal {
	position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3;
	text-align: center;
	font-family: var(--wcg-font-heading);
	font-size: 13.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.65);
}
.wcg-carousel__legal a { transition: color .25s var(--ease-out-cubic); }
.wcg-carousel__legal a:hover { color: #fff; }

.wcg-carousel__dots {
	position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
	z-index: 3; display: flex; align-items: center; gap: 18px;
}
.wcg-carousel__dot {
	position: relative;
	width: 16px; height: 16px; border-radius: 50%;
	background: transparent;
	border: 2px solid rgba(255,255,255,.45);
	padding: 0;
	transition: border-color .3s var(--ease-out-cubic), transform .3s var(--ease-hover);
}
.wcg-carousel__dot span { position: absolute; inset: 3px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .35s var(--ease-hover); }
.wcg-carousel__dot:hover { transform: scale(1.15); }
.wcg-carousel__dot.is-active { border-color: #fff; }
.wcg-carousel__dot.is-active span { transform: scale(1); }

/* -------------------------------------------------------------------------
 * Secondary-view page hero (compact photo banner)
 * ---------------------------------------------------------------------- */
.wcg-page-hero {
	position: relative;
	min-height: clamp(420px, 46vh, 640px);
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.wcg-page-hero__scrim {
	position: absolute; inset: 0;
	background: none;
}
.wcg-page-hero__inner { position: relative; z-index: 2; padding: 150px 0 56px; text-align: center; }
.wcg-page-hero__title { color: #fff; font-size: clamp(30px, 4.4vw, 46px); text-transform: uppercase; }

/* -------------------------------------------------------------------------
 * Generic section
 * ---------------------------------------------------------------------- */
.wcg-section { padding: 120px 0; }
.wcg-view--tint { background: var(--wcg-bg); }

.wcg-split > .elementor-container { align-items: flex-start; gap: 40px; }
.wcg-split__media img { border-radius: var(--wcg-radius); width: 100%; box-shadow: 0 30px 60px -30px rgba(17,20,30,.35); }
.wcg-split__media--crecer img { border-radius: 0; box-shadow: none; }

/* Propósito superior: intro paragraphs on the left, the brand's circular
 * arrow mark + a short caption centered on the right — unlike the other
 * split sections, this media column isn't a full-bleed photo. Only the
 * quoted phrase in the first paragraph is italic (inline <em> in the
 * content itself), not the whole paragraph. */
.wcg-proposito__text .wcg-lead p { margin-bottom: 22px; text-align: justify; }
/* Elementor only ships width CSS for its own preset column ratios — 58/42
 * isn't one of them, so without this the icon column shrinks to fit its
 * own tiny content and gets shoved to the right instead of keeping its
 * share of the row. Scoped to exactly Elementor's own desktop breakpoint
 * (columns stack below 1025px) so this doesn't fight the stacked, 100%-wide
 * tablet/mobile layout. */
@media (min-width: 1025px) {
	.wcg-proposito__text { flex: 1 1 58%; max-width: 58%; }
	.wcg-proposito__media { flex: 1 1 42%; max-width: 42%; }
}
.wcg-proposito__media { display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
/* Full-size, filling the column like the "crecer" graphic does on Qué nos
 * diferencia — not a small boxed-in icon. */
.wcg-proposito__icon img { max-width: 300px; width: 100%; height: auto; margin: 0 auto 32px; box-shadow: none; border-radius: 0; }
.wcg-proposito__caption p {
	font-family: var(--wcg-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wcg-navy);
	text-align: center;
	margin: 0;
}

.wcg-tripod { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.wcg-chip {
	font-family: var(--wcg-font-heading);
	font-weight: 600;
	font-size: 13px;
	color: var(--wcg-navy);
	background: rgba(29,41,75,.07);
	border: 1px solid rgba(29,41,75,.14);
	padding: 8px 16px;
	border-radius: 999px;
	transition: background-color .3s var(--ease-out-cubic), transform .3s var(--ease-hover);
}
.wcg-chip:hover { background: rgba(29,41,75,.13); transform: translateY(-2px); }

/* CRECER — the brand's own growth-chart artwork, extracted with a
 * transparent background so it drops onto any section cleanly. */
.wcg-crecer-row { text-align: center; }
.wcg-crecer-image img { max-width: 720px; width: 100%; margin: 0 auto; }

/* -------------------------------------------------------------------------
 * Unidades de negocio
 * ---------------------------------------------------------------------- */
.wcg-unit-card {
	background: #fff;
	border-radius: var(--wcg-radius);
	box-shadow: 0 20px 44px -30px rgba(17,20,30,.22);
	padding: 44px 36px !important;
	transition: transform .4s var(--ease-hover), box-shadow .4s var(--ease-hover);
}
.wcg-unit-card:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -26px rgba(17,20,30,.3); }

/* Real horizontal gutter between the 3 cards. Elementor's own "gap"
 * setting only adds padding *inside* each column (all 4 sides), which
 * reads as extra internal/vertical whitespace rather than separating the
 * cards — so this overrides the column width with a true flexbox gap
 * instead, scoped to Elementor's own column breakpoint (768px) so mobile
 * stacking (width:100% below that) is untouched. */
@media (min-width: 768px) {
	#unidades-de-negocio .elementor-container { gap: 32px; }
	#unidades-de-negocio .elementor-col-33 { width: 0; flex: 1 1 0; }
}
/* Fixed-height slot for the logo, sized to the tallest of the three (the
 * Insurance file, wider because of its extra tagline line) and top-aligned
 * (default block flow) — so the marks line up and the group text below
 * starts at the same y in every card, regardless of each logo's own
 * rendered height. */
.wcg-unit-card .elementor-widget-image { height: 128px; overflow: visible; }
.wcg-unit-card .elementor-widget-image img { max-width: 170px; display: block; margin: 0 auto; }
/* Each logo file has a different width-to-mark-height ratio (the WC mark
 * takes up a different share of each canvas's width), so a single shared
 * max-width renders three differently-sized marks — these per-file widths
 * are tuned so the WC glyph itself comes out the same height in all three. */
.wcg-unit-card .elementor-widget-image img[src*="logo-factoring"] { max-width: 181px; }
.wcg-unit-card .elementor-widget-image img[src*="logo-leasing"] { max-width: 160px; }
/* Insurance's extra tagline line shrinks its mark further at any given
 * width, hence the bigger max-width. Its canvas is also centred on
 * mark+"Insurance" plus the wider tagline line beneath, which pulls the
 * auto-centring off — nudge it right so the mark lines up with the other
 * two and let the tagline's extra width spill further right instead. */
.wcg-unit-card .elementor-widget-image img[src*="logo-insurance"] { max-width: 241px; transform: translateX(28px); }
.wcg-unit-card__group { margin-top: 24px; }
.wcg-unit-card__group:first-child { margin-top: 4px; }
.wcg-unit-card__group h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--wcg-navy); margin: 0 0 6px; }
.wcg-unit-card__group p { font-size: 13.5px; line-height: 1.6; color: var(--wcg-muted); margin: 0; }

/* -------------------------------------------------------------------------
 * Impacto
 * ---------------------------------------------------------------------- */
.wcg-impact { position: relative; padding: 130px 0; background-size: cover; background-position: center; background-attachment: fixed; }
.wcg-impact--page { padding-top: 190px; min-height: 100vh; display: flex; align-items: center; }
.wcg-impact > .elementor-background-overlay { z-index: 1; }
.wcg-impact > .elementor-container { position: relative; z-index: 2; }
.wcg-stat { text-align: center; padding: 0 51px; }
.wcg-stat .elementor-counter { display: flex; flex-direction: column-reverse; align-items: center; }
.wcg-stat .elementor-counter-number-wrapper {
	font-family: var(--wcg-font-heading);
	font-weight: 900 !important;
	font-size: clamp(52px, 6.5vw, 80px);
	color: #fff !important;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.wcg-stat .elementor-counter-number,
.wcg-stat .elementor-counter-number-prefix,
.wcg-stat .elementor-counter-number-suffix { color: #fff !important; font-weight: 900 !important; }
.wcg-stat .elementor-counter-title {
	/* Fixed height (room for 2 lines) so numbers above stay aligned across
	 * columns regardless of label length, while whatever follows (the
	 * description) still starts at the same Y in every column. Elementor's
	 * own counter-title default (19px, ~2.5 line-height, display:flex)
	 * otherwise wins wholesale over this rule, so every property here needs
	 * !important. */
	display: block !important; min-height: 38px !important; margin-top: 5px !important; margin-bottom: 0 !important;
	font-family: var(--wcg-font-heading) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	color: #fff !important;
}
/* Elementor gives every widget a default 20px bottom margin — between the
 * counter and its description that stacked with the counter-title's own
 * margin and the description's own top margin into a ~48px gap. Collapse
 * that back down to something tighter. */
.wcg-stat .elementor-widget-counter { margin-bottom: 0 !important; }
.wcg-stat .elementor-widget-text-editor p { margin-top: 5px !important; }

@media (max-width: 900px) {
	.wcg-impact { background-attachment: scroll; }
}

@media (max-width: 767px) {
	/* On mobile the 4 stats stack with zero gap between them by default,
	 * so one's description runs straight into the next number — add
	 * spacing and a divider line so each stat reads as its own block. */
	.wcg-stat {
		padding: 16px 20px;
		border-top: 1px solid rgba(255, 255, 255, .16);
	}
	.wcg-stat:first-child { border-top: none; padding-top: 0; }
	.wcg-stat:last-child { padding-bottom: 0; }
	/* The fixed 248px width + negative margins above are tuned to reclaim
	 * padding from the desktop 4-column row — on mobile's single stacked
	 * column they just shift the description off-center from the number
	 * above it instead. Let it size and center normally here. */
	.wcg-stat .elementor-widget-text-editor {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* -------------------------------------------------------------------------
 * Contacto
 * ---------------------------------------------------------------------- */
.wcg-contact-section > .elementor-background-overlay { z-index: 1; }
.wcg-contact-section > .elementor-container { position: relative; z-index: 2; }

.wcg-contact-col { max-width: 760px; margin: 0 auto; text-align: center; }
.wcg-lead--centered { margin-left: auto; margin-right: auto; }
.wcg-team-intro .wcg-lead { font-size: 20px; }

/* Single centered team photo (replaces the 3-column member grid on
 * Nuestro equipo). */
.wcg-team-photo { text-align: center; }
.wcg-team-photo img {
	max-width: 880px;
	width: 100%;
	height: auto;
	border-radius: var(--wcg-radius);
	box-shadow: 0 30px 60px -24px rgba(17,20,30,.3);
}
/* Text sits directly on the dark navy gradient scrim now (same as the home
 * slider), so it switches from navy to white/light to stay legible. */
.wcg-contact-col .wcg-lead { font-size: 20px; }
.wcg-contact-col .wcg-lead p { color: #fff !important; }
/* The real gap-makers here were the browser's own default margins on the
 * <h1> (18px bottom) and the <p> (1em ≈ 20px top AND bottom) — invisible
 * to the widget-wrapper-level overrides below, and asymmetric since the
 * form-card's own margin-top only added to one side. Zero those out on the
 * actual elements, then set one equal margin-bottom on each widget wrapper
 * so the gap above and below "Nuestros asesores..." matches exactly. */
.wcg-contact-col h1 { margin-bottom: 0 !important; }
.wcg-contact-col .wcg-lead p { margin: 0 !important; }
.wcg-contact-col .elementor-widget-heading,
.wcg-contact-col .elementor-widget-text-editor { margin-bottom: 12px !important; }

.wcg-contact-col .elementor-icon-list-items {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 32px;
	margin-top: 10px;
}
.wcg-contact-col .elementor-icon-list-item { align-items: center !important; }
.wcg-contact-col .elementor-icon-list-item:not(:last-child)::after { content: none !important; }
.wcg-contact-col .elementor-icon-list-icon {
	width: 26px; height: 26px; flex: none;
	display: flex !important; align-items: center; justify-content: center;
	margin-right: 10px !important;
}
.wcg-contact-col .elementor-icon-list-icon i,
.wcg-contact-col .elementor-icon-list-icon svg { color: #fff !important; fill: #fff !important; font-size: 15px !important; width: 15px !important; height: 15px !important; }
.wcg-contact-col .elementor-icon-list-text { font-size: 14px; color: rgba(255,255,255,.85) !important; line-height: 1.4; }
.wcg-contact-col .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #fff !important; }

.wcg-form-card {
	max-width: 980px;
	margin: 0 auto;
	background: rgba(255,255,255,.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.4);
	border-radius: var(--wcg-radius-sm);
	padding: 32px 44px;
	text-align: left;
	box-shadow: 0 30px 60px -20px rgba(18,26,51,.4);
}
.wcg-form__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.wcg-form__row { margin-bottom: 12px; display: flex; flex-direction: row; align-items: baseline; gap: 14px; }
.wcg-form__row label { font-size: 15px; font-weight: 700; color: var(--wcg-navy); white-space: nowrap; flex-shrink: 0; }
.wcg-form__row input, .wcg-form__row select {
	flex: 1;
	width: auto;
	min-width: 0;
	font-family: var(--wcg-font-body);
	font-size: 14.5px;
	padding: 6px 2px;
	border: none;
	border-bottom: 1.5px solid rgba(29,41,75,.25);
	border-radius: 0;
	background: transparent;
	color: var(--wcg-navy);
	transition: border-color .25s var(--ease-out-cubic);
}
.wcg-form__row select option { color: var(--wcg-ink); }
.wcg-form__row input:focus, .wcg-form__row select:focus {
	outline: none;
	border-bottom-color: var(--wcg-navy);
}
.wcg-form__honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.wcg-form__submit { display: block; margin: 24px auto 0; }
.wcg-form-notice { padding: 14px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; }
.wcg-form-notice--success { background: #E8F6EE; color: #1E7A44; border: 1px solid #BEE8CC; }
.wcg-form-notice--error { background: #FCEAEA; color: #B3261E; border: 1px solid #F4C6C4; }

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.wcg-footer { background: var(--wcg-navy-dark); color: rgba(255,255,255,.72); padding: 76px 0 0; }
.wcg-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.wcg-footer__brand { text-align: center; }
.wcg-footer__logo { width: 210px; height: auto; margin: 0 auto 20px; }
.wcg-footer__brand .wcg-social { justify-content: center; }
.wcg-social { display: flex; gap: 10px; }
.wcg-social a {
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
	display: flex; align-items: center; justify-content: center;
	transition: background-color .3s var(--ease-out-cubic), border-color .3s var(--ease-out-cubic), transform .3s var(--ease-hover);
}
.wcg-social a svg { width: 16px; height: 16px; }
.wcg-social a:hover { background: #fff; color: var(--wcg-navy); transform: translateY(-3px); }
.wcg-footer__col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
.wcg-footer__links, .wcg-footer__contact { display: flex; flex-direction: column; gap: 11px; }
.wcg-footer__links a, .wcg-footer__contact a, .wcg-footer__contact li { font-size: 14px; transition: color .25s var(--ease-out-cubic); }
.wcg-footer__links a:hover { color: #fff; }
.wcg-footer__bottom { padding: 22px 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* -------------------------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------------------- */
@media (max-width: 980px) {
	.wcg-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.wcg-form__grid { grid-template-columns: 1fr; }
	/* Label + underline on one line gets cramped with longer labels
	 * ("País de donde nos contacta") on narrow screens — stack instead. */
	.wcg-form__row { flex-direction: column; align-items: stretch; gap: 4px; }
}

@media (max-width: 780px) {
	.wcg-menu-overlay { width: 100%; }
	.wcg-carousel__arrow { display: none; }
	.wcg-footer__grid { grid-template-columns: 1fr; }
	.wcg-form-card { padding: 28px 24px !important; }
	.wcg-page-hero__inner { padding: 130px 0 40px; }
	/* The manual <br> in the "Qué nos diferencia" lead paragraph only exists
	 * to control where "a los" wraps in the wide desktop column — on a
	 * narrower column it just forces an awkward early break, so drop it and
	 * let the text reflow naturally. */
	br.wcg-break-desktop { display: none; }
	/* The forced 2-line title (white-space:nowrap per line) is a desktop
	 * layout choice — on narrow screens let each line wrap normally so it
	 * doesn't get clipped by the carousel's overflow:hidden. */
	.wcg-carousel__title { white-space: normal; font-size: clamp(22px, 7vw, 30px) !important; }
	.wcg-carousel__title-line1 { letter-spacing: .03em; }
	.wcg-carousel__titlebar { gap: 22px; }
	/* Stack the unit logos vertically with a gap between them on phones. */
	.wcg-carousel__logos { flex-direction: column; align-items: center; gap: 44px; }
	.wcg-carousel__logos img { height: 108px !important; }
	.wcg-carousel__logos img[src*="logo-insurance"] { height: 119px !important; }
	/* Each logo file is cropped so its WC mark anchors the left edge and its
	 * (wider) wordmark anchors the right edge, so centering the raw image
	 * centers that combined box, not the mark itself — the marks then don't
	 * line up as a column. Nudge each one right by the mark's own offset
	 * from its image's centre so the icons stack in a straight line, letting
	 * the wordmark trail off a little further right instead. */
	.wcg-carousel__logos img[src*="logo-factoring"] { transform: translateX(24px); }
	.wcg-carousel__logos img[src*="logo-leasing"] { transform: translateX(13px); }
	.wcg-carousel__logos img[src*="logo-insurance"] { transform: translateX(52px); }
	.wcg-cta-arrow { width: 75px; }
	/* Wide letter-spacing on "PROPÓSITO SUPERIOR" overflows a phone screen
	 * and gets clipped by the carousel's overflow:hidden — scale it down. */
	.wcg-carousel__content .wcg-eyebrow .elementor-heading-title { font-size: 12px; letter-spacing: .35em; }

	/* Elementor bakes each section's padding as one fixed value with no
	 * responsive variant, so without this override every section carries
	 * its full desktop padding (100–190px vertical, 20px horizontal)
	 * straight through to phones — huge empty gaps, text hugging the edges. */
	#quienes-somos,
	#unidades-de-negocio,
	#contacto {
		padding: 70px 24px 56px !important;
	}
	#impacto {
		padding: 130px 24px 64px !important;
	}
	.wcg-crecer-row {
		padding: 16px 24px 56px !important;
	}
	.wcg-unit-card {
		padding: 34px 26px !important;
	}
}

@media (max-width: 560px) {
	.wcg-brand__logo { height: 44px; }
	/* On a phone there's no room for a photo backdrop to read against, so
	 * unlike desktop (transparent at rest, solid navy only once scrolled)
	 * the header here is always the solid navy ribbon with white
	 * logo/text/icons, on every page, regardless of scroll position. The
	 * !important's beat the more specific --on-dark/--scrolled-only rules
	 * above, which otherwise only apply conditionally. */
	.wcg-header {
		padding: 10px 0;
		background: var(--wcg-navy-dark) !important;
		box-shadow: 0 2px 20px -4px rgba(0,0,0,.3) !important;
	}
	.wcg-header::before { opacity: 0 !important; }
	.wcg-header__section { color: #fff !important; }
	.wcg-menu-trigger__icon span { background: #fff !important; }
	.wcg-lang-switcher { border-color: rgba(255,255,255,.35) !important; }
	.wcg-lang-switcher__item { color: rgba(255,255,255,.55) !important; }
	.wcg-lang-switcher__item.is-active { color: #fff !important; }
	.wcg-brand__logo--white { display: inline-block !important; }
	.wcg-brand__logo--color { display: none !important; }
	/* Logo, language switcher and menu trigger all sit on the same
	 * horizontal line — the current slide's eyebrow (mirrored into the
	 * header on the home page) drops to its own full-width row underneath
	 * instead of squeezing into the narrow space next to the switcher/menu,
	 * where it had no room and wrapped awkwardly. */
	.wcg-header__inner { align-items: center; }
	.wcg-header__right {
		flex: 1 1 auto;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: 10px 3px;
	}
	/* Text shares the top row with the menu trigger; the language switcher
	 * drops to its own row underneath. */
	.wcg-header__section {
		order: 1;
		display: block;
		text-align: right;
		color: #fff;
		font-size: 13px;
		letter-spacing: .1em;
		line-height: 1.4;
		white-space: normal;
	}
	.wcg-menu-trigger { order: 2; }
	.wcg-lang-switcher { order: 3; flex-basis: 100%; justify-content: flex-end; }
	/* With the label no longer sitting right next to it, a divider pinned to
	 * the switcher's own height doesn't line up with anything — drop it. */
	.wcg-lang-switcher { padding-left: 0; border-left: 0; }
	/* Keep the whole drawer (logo, nav, contact, socials) fitting on a
	 * phone screen without needing to scroll — the bigger logo needed less
	 * padding/gaps around it to still fit. */
	.wcg-menu-overlay__inner { padding: 64px 32px 24px; }
	.wcg-menu-overlay__logo { height: 88px; margin: 0 0 16px; }
	.wcg-menu-overlay__list { gap: 0; }
	.wcg-menu-overlay__list a { padding: 7px 0; font-size: 16px; }
	.wcg-menu-overlay__meta { padding-top: 18px; gap: 6px; }
	.wcg-page-hero { min-height: clamp(320px, 38vh, 480px); }
	.wcg-carousel__legal { font-size: 10.5px; letter-spacing: .08em; padding: 0 12px; line-height: 1.6; }
	.wcg-carousel__dots { bottom: 62px; }

	#quienes-somos,
	#unidades-de-negocio,
	#contacto {
		padding: 56px 20px 44px !important;
	}
	/* Symmetric top/bottom, and tighter than the other inner-page sections
	 * above, so the gap before the team photo right underneath stays
	 * close instead of leaving a big empty band on a phone screen. */
	#nuestro-equipo {
		padding: 32px 20px !important;
	}
	.wcg-team-photo-section {
		padding-top: 0 !important;
	}
	#impacto {
		padding: 110px 20px 52px !important;
	}
	.wcg-crecer-row {
		padding: 12px 20px 44px !important;
	}
	.wcg-unit-card {
		padding: 28px 20px !important;
	}
	.wcg-form-card {
		padding: 22px 18px !important;
	}
	.wcg-team-grid {
		grid-template-columns: 1fr !important;
	}
}

/* -------------------------------------------------------------------------
 * Team grid ([wcg_team_grid]) — 3-column portraits, name/role overlaid.
 * ---------------------------------------------------------------------- */

.wcg-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.wcg-team-card {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	background: var(--wcg-navy-dark);
	box-shadow: 0 10px 30px rgba(18, 26, 51, .12);
	transition: transform .45s var(--ease-out-cubic), box-shadow .45s var(--ease-out-cubic);
}

.wcg-team-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(18, 26, 51, .22);
}

.wcg-team-card__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	transition: transform .6s var(--ease-out-cubic);
}

.wcg-team-card:hover .wcg-team-card__photo {
	transform: scale(1.05);
}

.wcg-team-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,26,51,0) 45%, rgba(18,26,51,.88) 100%);
	pointer-events: none;
}

.wcg-team-card__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 22px 22px 24px;
}

.wcg-team-card__name {
	margin: 0 0 4px;
	font-size: 19px;
	color: #fff !important;
	text-transform: none;
}

.wcg-team-card__role {
	margin: 0;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
}

/* -------------------------------------------------------------------------
 * Team member profile (single-wcg_team.php)
 * ---------------------------------------------------------------------- */

.wcg-team-profile {
	padding: 150px 0 100px;
}

.wcg-team-profile__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 50px;
}

.wcg-team-profile__namerow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.wcg-team-profile__name {
	margin: 0;
}

.wcg-team-profile__role {
	margin: 10px 0 0;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wcg-navy-light);
}

.wcg-team-profile__contact {
	margin: 14px 0 0;
	font-size: 14.5px;
}

.wcg-team-profile__contact a {
	color: var(--wcg-navy);
}

.wcg-team-profile__photo {
	max-width: 420px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 60px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(18, 26, 51, .16);
}

.wcg-team-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcg-team-profile__bio {
	max-width: 900px;
	margin: 0 auto;
	column-count: 2;
	column-gap: 60px;
}

.wcg-team-profile__bio h3 {
	column-span: none;
	font-size: 20px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(29, 41, 75, .15);
	break-after: avoid;
}

.wcg-team-profile__bio p {
	break-inside: avoid;
	margin-bottom: 20px;
}

@media (max-width: 780px) {
	.wcg-team-profile { padding: 110px 0 70px; }
	.wcg-team-profile__bio { column-count: 1; }
	.wcg-team-grid { gap: 20px; }
}

/* -------------------------------------------------------------------------
 * Blog listing (home.php)
 * ---------------------------------------------------------------------- */

.wcg-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 34px;
	padding: 60px 0 40px;
}

.wcg-blog-card {
	display: flex;
	flex-direction: column;
}

.wcg-blog-card__photo {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	margin-bottom: 20px;
	overflow: hidden;
	transition: transform .5s var(--ease-out-cubic);
}

.wcg-blog-card:hover .wcg-blog-card__photo {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(18, 26, 51, .16);
}

.wcg-blog-card__meta {
	margin: 0 0 10px;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wcg-navy-light);
}

.wcg-blog-card__title {
	margin: 0 0 10px;
	font-size: 21px;
	line-height: 1.3;
}

.wcg-blog-card__title a { transition: color .25s var(--ease-out-cubic); }
.wcg-blog-card__title a:hover { color: var(--wcg-navy-light); }

.wcg-blog-card__excerpt {
	margin: 0 0 14px;
	color: var(--wcg-muted);
	font-size: 15px;
	line-height: 1.65;
}

.wcg-blog-card__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--wcg-navy);
	margin-top: auto;
}

.wcg-blog-card__link span { display: inline-block; transition: transform .25s var(--ease-hover); }
.wcg-blog-card__link:hover span { transform: translateX(4px); }

.wcg-blog-pagination { display: flex; justify-content: center; padding: 20px 0 60px; }
.wcg-blog-pagination .nav-links { display: flex; gap: 10px; }
.wcg-blog-pagination a,
.wcg-blog-pagination span {
	display: flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px;
	border: 1px solid var(--wcg-border); font-size: 14px; color: var(--wcg-navy);
	transition: background-color .25s var(--ease-out-cubic), border-color .25s var(--ease-out-cubic);
}
.wcg-blog-pagination a:hover { background: var(--wcg-bg); border-color: var(--wcg-navy-light); }
.wcg-blog-pagination .current { background: var(--wcg-navy); border-color: var(--wcg-navy); color: #fff; }

/* -------------------------------------------------------------------------
 * Blog article (single.php) — comfortable, magazine-style reading column.
 * ---------------------------------------------------------------------- */

.wcg-article { padding: 150px 0 100px; }

.wcg-article__header {
	max-width: 760px;
	margin: 0 auto 44px;
	text-align: center;
}

.wcg-article__header .wcg-eyebrow a { color: inherit; text-decoration: none; transition: color .25s var(--ease-out-cubic); }
.wcg-article__header .wcg-eyebrow a:hover { color: var(--wcg-navy); }

.wcg-article__title { margin: 10px 0 16px; }

.wcg-article__meta {
	margin: 0 0 26px;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wcg-navy-light);
}

.wcg-article__header .wcg-share { justify-content: center; }

.wcg-article__photo {
	max-width: 980px;
	margin: 0 auto 56px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(18, 26, 51, .18);
}

.wcg-article__photo img { width: 100%; display: block; }

.wcg-article__body {
	max-width: 700px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.85;
	color: var(--wcg-ink);
}

.wcg-article__body h2 {
	font-size: 27px;
	margin: 48px 0 18px;
	color: var(--wcg-navy);
}

.wcg-article__body p { margin: 0 0 24px; text-align: justify; }
.wcg-article__body p:first-of-type { font-size: 20px; color: var(--wcg-slate); }

.wcg-article__footer {
	max-width: 700px;
	margin: 56px auto 0;
	padding-top: 36px;
	border-top: 1px solid var(--wcg-border);
	text-align: center;
}

.wcg-article__footer .wcg-share { justify-content: center; margin-bottom: 26px; }

.wcg-article__back {
	font-size: 14px;
	font-weight: 600;
	color: var(--wcg-navy);
	transition: color .25s var(--ease-out-cubic);
}
.wcg-article__back:hover { color: var(--wcg-navy-light); }

/* Share buttons — reused on the blog article and, in spirit, matches the
 * dark .wcg-social pattern used in header/footer, but for light backgrounds. */
.wcg-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wcg-share a,
.wcg-share__copy {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--wcg-border);
	display: flex; align-items: center; justify-content: center;
	color: var(--wcg-navy);
	background: transparent;
	transition: background-color .3s var(--ease-out-cubic), border-color .3s var(--ease-out-cubic), color .3s var(--ease-out-cubic), transform .3s var(--ease-hover);
}
.wcg-share a svg,
.wcg-share__copy svg { width: 16px; height: 16px; }
.wcg-share a:hover,
.wcg-share__copy:hover { background: var(--wcg-navy); border-color: var(--wcg-navy); color: #fff; transform: translateY(-2px); }
.wcg-share__copy.is-copied { background: var(--wcg-navy); border-color: var(--wcg-navy); color: #fff; }
.wcg-share__copy { width: auto; padding: 0 16px; border-radius: 19px; gap: 8px; }
.wcg-share__copy-label { font-size: 13px; font-weight: 600; white-space: nowrap; }

@media (max-width: 960px) {
	.wcg-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
	.wcg-article { padding: 110px 0 70px; }
	.wcg-article__body { font-size: 16.5px; }
	.wcg-article__body h2 { font-size: 22px; }
}

@media (max-width: 560px) {
	.wcg-blog-grid { grid-template-columns: 1fr; gap: 40px; }
	.wcg-share__copy-label { display: none; }
	.wcg-share__copy { width: 38px; padding: 0; }
}