/* header.css */
/*
 * Site header — transparent bar with logo and hamburger toggle.
 */

:root {
	--header-height: 90px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: transparent;
}

.admin-bar .site-header {
	top: 32px;
}

.site-header__bar {
	padding-top: 24px;
	padding-bottom: 24px;
	padding-left: clamp(20px, 4vw, 60px);
	padding-right: clamp(20px, 4vw, 60px);
	background-color: transparent;
	transition: background-color 0.3s ease;
}

/* Transparent header — becomes solid on scroll (toggled by hamburger-menu.js). */
.site-header.is-scrolled .site-header__bar {
	background-color: var(--wp--preset--color--primary);
}

.site-header__top {
	position: relative;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	box-sizing: border-box;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-header__logo-img {
	display: block;
	width: 115px;
	height: 42px;
	background: url('../images/closelogo.webp') center / contain no-repeat;
}

.site-header__sections-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 23px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.site-header__sections-toggle:hover {
	transform: scale(1.1);
}

.site-header__sections-toggle:focus {
	outline: none;
}

.site-header__sections-icon {
	display: block;
	width: 39px;
	height: 23px;
	background: url('../images/lineassecciones.webp') center / contain no-repeat;
}

@media (max-width: 781px) {
	.site-header__bar {
		padding: 16px 14px;
	}

	.site-header__logo-img {
		width: 92px;
		height: 34px;
	}

	.site-header__sections-toggle,
	.site-header__sections-icon {
		width: 33px;
		height: 19px;
	}
}

/* =============================================================================
   HAMBURGER MENU OVERLAY
   ============================================================================= */

.hamburger-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hamburger-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.hamburger-overlay-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--primary-dark);
	overflow: hidden;
}

.hamburger-overlay-bg::before {
	content: "";
	position: absolute;
	width: 2104px;
	height: 1345px;
	right: -400px;
	top: -397px;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, #1034CC 0%, #0a1a6b 67%, rgba(2, 8, 11, 0) 100%);
	border-radius: 9999px;
	filter: blur(45px);
	opacity: 0.6;
}

.hamburger-overlay-bg::after {
	content: "";
	position: absolute;
	width: 2104px;
	height: 1345px;
	left: -1498px;
	bottom: -400px;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, #1034CC 0%, #0a1a6b 67%, rgba(2, 8, 11, 0) 100%);
	border-radius: 9999px;
	filter: blur(45px);
	opacity: 0.5;
}

.hamburger-overlay-content {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 40px 20px;
}

.hamburger-logo-link {
	display: inline-block;
}

.hamburger-logo-img {
	width: 165px;
	height: auto;
	filter: brightness(0) invert(1);
}

.hamburger-menu-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.hamburger-menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.hamburger-menu-link {
	color: var(--wp--preset--color--white);
	font-size: clamp(28px, 3.5vw, 48px);
	font-family: var(--wp--preset--font-family--moga);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	display: block;
	text-align: center;
	padding: 4px 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: color 0.3s ease;
}

.hamburger-menu-link:hover,
.hamburger-menu-item:hover .hamburger-menu-link {
	color: var(--wp--preset--color--secondary);
}

.hamburger-menu-separator {
	display: block;
	width: 200px;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
	margin: 2px auto 4px auto;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.hamburger-menu-item:hover .hamburger-menu-separator {
	opacity: 1;
}

.hamburger-close-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	line-height: 0;
	opacity: 0.7;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.hamburger-close-btn:hover {
	opacity: 1;
	transform: rotate(90deg);
}

.hamburger-close-btn:focus {
	outline: none;
}

@media (max-width: 768px) {
	.hamburger-menu-link {
		font-size: 26px;
		line-height: 1.3;
		padding: 4px 16px;
	}

	.hamburger-menu-separator {
		width: 140px;
	}

	.hamburger-overlay-content {
		gap: 24px;
	}
}

/* home-hero.css */
/*
 * Home hero — layout, video background and CTA button.
 * Typography (font family, size, weight, text-transform) comes from theme.json
 * (h1 / paragraph element styles) — only non-typography adjustments live here.
 */

.site-header--hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 880px;
	background: transparent;
	--wp--style--root--padding-left: 0px;
	--wp--style--root--padding-right: 0px;
}

.home-hero {
	background-color: var(--wp--preset--color--primary);
}

.home-hero__video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.home-hero__video-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.78vh;
	transform: translate(-50%, -50%);
	border: 0;
}

.home-hero .site-header__hero {
	position: relative;
	z-index: 2;
	padding-top: calc(var(--header-height) + 40px);
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}

.site-header__title {
	margin: 0 0 24px;
	line-height: 0.95;
	text-wrap: balance;
}

.site-header__description {
	margin: 0 auto 34px;
	max-width: 780px;
}

.site-header__description strong {
	font-weight: 700;
}

.site-header__cta .wp-element-button {
	position: relative;
	isolation: isolate;
	border-radius: 1000px;
	padding: 20px 40px;
	font-weight: 600;
	line-height: 1.2;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header__cta .wp-element-button:hover {
	background: #FFD14D;
	color: var(--wp--preset--color--primary-dark);
	transform: translateY(-1px);
}

.site-header__cta--pulse .wp-element-button {
	animation: site-header-cta-bob 1.8s ease-in-out infinite;
}

.site-header__cta--pulse .wp-element-button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(255, 185, 5, 0.55);
	animation: site-header-cta-ring 1.8s ease-out infinite;
	pointer-events: none;
	z-index: -1;
}

.site-header__cta--pulse .wp-element-button:hover::after,
.site-header__cta--pulse .wp-element-button:focus-visible::after {
	animation-play-state: paused;
	opacity: 0;
}

.site-header__cta--pulse .wp-element-button:hover,
.site-header__cta--pulse .wp-element-button:focus-visible {
	animation-play-state: paused;
}

@keyframes site-header-cta-bob {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@keyframes site-header-cta-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 185, 5, 0.55);
	}
	100% {
		box-shadow: 0 0 0 22px rgba(255, 185, 5, 0);
	}
}

/* Word-by-word reveal animation for the hero title (driven by hero-reveal.js) */
.reveal-hero-h1 {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 15px;
	row-gap: 0;
	margin: 0 auto;
	line-height: 1.2;
	overflow: hidden;
	text-align: center;
}

.reveal-hero-h1 .reveal-item {
	opacity: 0;
	visibility: hidden;
	display: inline-block;
}

.reveal-hero-h1.reveal-active .reveal-item {
	opacity: 0;
	filter: blur(10px);
	transform: scale(1.1);
	visibility: visible;
	animation-name: revealAnimHeroH1;
	animation-delay: var(--delay);
	animation-duration: 0.8s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-fill-mode: forwards;
}

@keyframes revealAnimHeroH1 {
	0% {
		opacity: 0;
		filter: blur(10px);
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}

.reveal-hero-h1.reveal-out .reveal-item {
	opacity: 1;
	visibility: visible;
	filter: blur(0);
	transform: scale(1);
	animation-name: revealAnimHeroH1Out;
	animation-delay: var(--delay-out);
	animation-duration: 0.8s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-fill-mode: forwards;
}

@keyframes revealAnimHeroH1Out {
	0% {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
	100% {
		opacity: 0;
		filter: blur(10px);
		transform: scale(1.1);
	}
}

@media (max-width: 1400px) {
	.site-header--hero {
		min-height: 820px;
	}
}

@media (max-width: 1024px) {
	.site-header--hero {
		min-height: 740px;
	}

	.home-hero .site-header__hero {
		max-width: 840px;
	}

	.reveal-hero-h1 {
		column-gap: 10px;
	}

	.site-header__description {
		max-width: 690px;
		margin-bottom: 30px;
	}

	.site-header__cta .wp-element-button {
		padding: 18px 34px;
	}
}

@media (max-width: 781px) {
	.site-header--hero {
		min-height: 660px;
		height: auto;
	}

	.home-hero .site-header__hero {
		max-width: 620px;
		padding-top: calc(var(--header-height) + 18px);
	}

	.site-header__title {
		margin-bottom: 18px;
	}

	.site-header__description {
		max-width: 100%;
		margin-bottom: 28px;
	}

	.reveal-hero-h1 {
		column-gap: 6px;
	}

	.site-header__cta .wp-element-button {
		padding: 16px 26px;
	}
}

/* home-chat-services.css */
/*
 * Home chat + services — one continuous section (shared video background,
 * no seam between the chat and the services grid). Colors and typography
 * (font family, size, weight) come from theme.json (color palette + h2/h3/
 * paragraph element styles) — only layout, spacing and component-specific
 * tweaks (line-height, avatars, card shape) live here.
 */

/*
 * Plain block flow, not grid+place-items:center — the chat bubbles already
 * center themselves via their own padding, and grid-centering the whole
 * (chat + services) block risked overlapping the services heading with the
 * bubbles above it on short mobile viewports.
 */
.home-chat {
	min-height: 960px;
}

.home-chat-services.site-header--hero {
	/* Keep the section's own overflow:hidden (from .site-header--hero) instead
	   of opening it up — nothing here needs to spill past the section's own
	   box, and letting it stay clipped avoids anything painting over the
	   next pattern below. */
	--wp--style--root--padding-top: 0px;
	--wp--style--root--padding-bottom: 0px;
	/* The section's own padding-bottom comes from an inline style (theme.json
	   spacing preset), so extra breathing room before the next pattern is
	   added as a margin here instead of fighting that inline padding. */
	margin-bottom: clamp(48px, 6vw, 96px);
}

/*
 * The merged section (chat + full services grid) is much taller than the
 * hero, so the video must not stretch to cover its entire height — that
 * forced an extreme cover-fit calculation that showed as a blank gap at the
 * top. Anchor the video to the top and cap its height to roughly the chat
 * area plus the services heading and the top half of the cards; a fade
 * blends it into the plain white background for the rest of the grid.
 */
.home-chat-services .home-hero__video-bg {
	top: 0;
	bottom: auto;
	height: 1060px;
	/* Fallback tone behind the video (matches its own light-blue palette) —
	   if the iframe/player doesn't fully cover this box for any reason, this
	   shows instead of a bare gray gap. */
	background: linear-gradient(180deg, #eef3ff 0%, #ffffff 100%);
}

/*
 * The hero's iframe sizing is a vw/vh "cover" hack that assumes its container
 * is the same size as the viewport — true for the hero (viewport-height box),
 * false here (fixed 1060px box). Fill the container directly instead,
 * anchored top-left with no extra transform — the video must start right at
 * the top of the section; if anything doesn't fit, it's cut off at the
 * bottom (clipped by the section's own overflow:hidden), never at the top.
 */
.home-chat-services .home-hero__video-bg iframe {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: none;
}

.home-chat-services .home-hero__video-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Several stops instead of a single hard ramp, so the fade eases in
	   gradually rather than looking like an abrupt cutoff. Ends on the same
	   --base tone as the page background (not pure white) — fading to white
	   left a visible seam where the video box ended and the off-white page
	   background began. */
	background: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 35%,
		rgba(245, 245, 245, 0.15) 55%,
		rgba(245, 245, 245, 0.45) 70%,
		rgba(245, 245, 245, 0.75) 85%,
		var(--wp--preset--color--base) 100%
	);
}

@media (max-width: 1024px) {
	.home-chat-services .home-hero__video-bg {
		height: 820px;
	}
}

@media (max-width: 781px) {
	.home-chat-services .home-hero__video-bg {
		height: 680px;
	}
}

.home-chat-services .cs-services {
	position: relative;
	z-index: 1;
	width: 100%;
	justify-self: stretch;
}

.home-chat__bubbles {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: min(700px, 100%);
	margin: 0 auto;
	position: relative;
	z-index: 2;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: clamp(96px, 16vh, 160px) clamp(16px, 4vw, 60px) clamp(48px, 8vh, 96px);
}

/* Reset the default block margin WordPress adds to paragraphs inside the bubbles. */
.home-chat__bubbles p {
	margin: 0;
}

/* Bubble rows with avatar */
.chat-bubble-row {
	display: flex;
	align-items: flex-end;
	gap: 40px;
	width: min(160%, calc(100vw - 32px));
	margin-left: calc((100% - min(160%, calc(100vw - 32px))) / 2);
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.chat-bubble-row--user {
	justify-content: center;
}

.chat-bubble-row--bot {
	justify-content: flex-start;
}

/* Avatar via ::after / ::before on the row */
.chat-bubble-row--user::after,
.chat-bubble-row--bot::before {
	content: "";
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: block;
	align-self: flex-end;
}

.chat-bubble-row--user::after {
	background: url('../images/USUARIO.webp') center / contain no-repeat;
	order: 2;
}

.chat-bubble-row--user .chat-bubble--user {
	order: 1;
}

.chat-bubble-row--bot::before {
	background: url('../images/ROBOT CLOSE.webp') center / contain no-repeat;
	order: 1;
}

.chat-bubble-row--bot .chat-bubble--bot {
	order: 2;
}

/* User bubble */
.chat-bubble--user {
	padding: 16px 24px 10px;
	border-radius: 20px 20px 0 20px;
	width: 50%;
	text-align: left;
	line-height: 1.5;
	box-shadow: 0 0 22.2px rgba(15, 52, 203, 0.5);
}

/* Bot bubble */
.chat-bubble--bot {
	border-radius: 20px;
	padding: 28px 36px;
	box-shadow: 6px 7px 30.1px rgba(136, 136, 161, 0.5);
	max-width: 500px;
	width: fit-content;
	border: 0;
}

.chat-bubble__author {
	font-weight: 700;
	line-height: 1.2;
	opacity: 0.5;
	margin-bottom: 6px;
}

.chat-bubble__message {
	line-height: 1.7;
}

.chat-bubble__spacer {
	display: block;
}

/* Typing caret */
.chat-bubble__typing-target {
	white-space: pre-wrap;
}

.chat-bubble__typing-target.is-typing::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	background: currentcolor;
	vertical-align: -0.12em;
	margin-left: 3px;
	animation: chat-caret-blink 0.9s steps(1, end) infinite;
}

@keyframes chat-caret-blink {
	50% {
		opacity: 0;
	}
}

/* Reveal animation */
.chat-bubble--hidden {
	opacity: 0;
	transform: translateY(14px);
	visibility: hidden;
}

.chat-bubble--visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	transition: opacity 0.32s ease, transform 0.32s ease;
}

/* =============================================================================
   SERVICES GRID
   ============================================================================= */

.services-heading {
	position: relative;
	z-index: 2;
	padding-bottom: 40px;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--70);
	line-height: 1.1;
}

.services-heading__static {
	color: var(--wp--preset--color--primary);
}

.services-heading__rotating-wrap {
	display: inline;
}

.services-heading__rotating {
	display: inline;
	transition: opacity 0.35s ease;
}

.services-heading__rotating.is-leaving,
.services-heading__rotating.is-entering {
	opacity: 0;
}

.cs-services {
	position: relative;
	z-index: 1;
}

.cs-services .services-heading {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}

.cs-services .wp-block-columns.alignwide {
	max-width: var(--wp--style--global--content-size);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	align-items: stretch;
	column-gap: 24px;
	row-gap: 24px;
}

.cs-services .wp-block-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Wraps the whole card in a link (target chosen per card from the editor sidebar). */
.service-card-link {
	display: flex;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	border-radius: 25px;
	height: 531px;
	min-height: 531px;
	flex: 1;
	box-sizing: border-box;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
	will-change: transform, box-shadow;
}

.service-card--lavender {
	background: var(--wp--preset--color--tertiary);
}

.service-card--blue {
	background: var(--wp--preset--color--primary);
}

.service-card--yellow {
	background: var(--wp--preset--color--secondary);
}

.service-card__illustration {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	border-radius: 25px;
	pointer-events: none;
}

.service-card__illustration .wp-block-image {
	margin: 0;
	height: 100%;
}

.service-card__illustration img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

.service-card--lavender:not(.service-card--lavender-alt) .service-card__illustration img {
	object-fit: contain;
	object-position: center top;
	transform: scale(0.96);
	transform-origin: center top;
}

.service-card--blue .service-card__illustration img {
	object-fit: cover;
	object-position: 36% 6%;
	transform: scale(1.16);
	transform-origin: top left;
}

.service-card--yellow .service-card__illustration img {
	object-fit: contain;
	object-position: center top;
	transform: scale(1);
	transform-origin: center top;
}

.service-card--lavender-alt .service-card__illustration img {
	object-fit: contain;
	object-position: 110% 8%;
	transform: scale(0.96);
	transform-origin: center top;
}

.service-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 321px;
	border-radius: 0 0 25px 25px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
}

.service-card--blue::after {
	opacity: 1;
	background: linear-gradient(180deg, rgba(15, 52, 203, 0) 0%, var(--wp--preset--color--primary) 76%);
}

.service-card--yellow::after {
	opacity: 1;
	background: linear-gradient(180deg, rgba(255, 185, 5, 0) 0%, var(--wp--preset--color--secondary) 76%);
}

.service-card--lavender-alt::after {
	opacity: 1;
	background: linear-gradient(180deg, rgba(194, 196, 255, 0) 0%, var(--wp--preset--color--tertiary) 82%);
}

.service-card__content {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 20px;
	min-height: 174px;
	padding: 16px 18px;
	background: var(--wp--preset--color--white);
	border-radius: 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 51px 1fr;
	column-gap: 16px;
	row-gap: 10px;
	align-content: start;
	align-items: center;
	z-index: 3;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.service-card__icon {
	width: 51px;
	height: 51px;
	border-radius: 11.087px;
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.service-card__icon img {
	display: block;
	width: 51px;
	height: 51px;
	max-width: none;
	object-fit: contain;
}

/*
 * Not scoped with :empty — the block editor injects internal markers into
 * "empty" group blocks (for the block-appender UI), so :empty never matches
 * there and the icon would only show on the frontend.
 */
.service-card--lavender:not(.service-card--lavender-alt) .service-card__icon--lavender {
	background-image: url('../images/Trompeta.webp');
	background-repeat: no-repeat;
	background-position: center;
}

.service-card--lavender-alt .service-card__icon--lavender {
	background-image: url('../images/cohete.webp');
	background-repeat: no-repeat;
	background-position: center;
}

.service-card__icon--blue {
	background-image: url('../images/PC.webp');
	background-repeat: no-repeat;
	background-position: center;
}

.service-card__icon--yellow {
	background-image: url('../images/Pincel.webp');
	background-repeat: no-repeat;
	background-position: center;
}

.service-card__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 20px;
	line-height: 25px;
}

.service-card__description {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
}

.service-card:hover {
	transform: translateY(-12px);
}

.service-card:hover .service-card__content {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(22, 22, 74, 0.12);
}

.service-card--lavender:hover,
.service-card--lavender-alt:hover {
	box-shadow: 0 20px 44px rgba(194, 196, 255, 0.62);
}

.service-card--blue:hover {
	box-shadow: 0 20px 44px rgba(15, 52, 203, 0.48);
}

.service-card--yellow:hover {
	box-shadow: 0 20px 44px rgba(255, 185, 5, 0.5);
}

@media (max-width: 1400px) {
	.home-chat {
		min-height: 820px;
	}
}

@media (max-width: 1280px) {
	.cs-services .wp-block-columns.alignwide {
		max-width: 1200px;
	}

	.service-card {
		height: 500px;
		min-height: 500px;
	}

	.service-card__description {
		line-height: 30px;
	}
}

@media (max-width: 1024px) {
	.cs-services {
		padding-left: 20px;
		padding-right: 20px;
	}

	.cs-services .wp-block-columns.alignwide {
		max-width: 980px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		flex-wrap: unset;
	}

	.cs-services .wp-block-columns.alignwide > .wp-block-column {
		width: auto;
		flex-basis: auto;
		flex-grow: unset;
	}

	.service-card {
		height: 460px;
		min-height: 460px;
	}

	.service-card__content {
		left: 16px;
		right: 16px;
		bottom: 16px;
		min-height: 166px;
		padding: 14px 16px;
	}
}

@media (max-width: 781px) {
	.home-chat {
		min-height: 660px;
	}
}

@media (max-width: 600px) {
	.cs-services .wp-block-columns.alignwide {
		grid-template-columns: 1fr;
	}

	.home-chat__bubbles {
		padding: 80px 27px 40px;
		gap: 32px;
	}

	.chat-bubble-row {
		max-width: 100%;
		gap: 10px;
		width: 100%;
	}

	.chat-bubble--bot {
		padding: 20px 24px;
	}

	.chat-bubble--user {
		padding: 8px 18px;
		min-height: 48px;
	}

	.chat-bubble__message,
	.chat-bubble__author,
	.chat-bubble--user {
		font-size: 15px;
		line-height: 1.5;
	}

	.chat-bubble-row--user::after,
	.chat-bubble-row--bot::before {
		width: 38px;
		height: 38px;
	}
}

/* =============================================================================
   MOBILE SERVICES SLIDER
   (main injects this markup server-side for the "home-services"/"cs-services"
   group; hidden on desktop, replaces the 4-card grid on mobile/tablet)
   ============================================================================= */

.home-services__mobile-wrapper {
	display: none;
}

@media (max-width: 1024px) {
	/* "bajar esto": push the mobile/tablet block down, away from the heading. */
	.home-services__mobile-wrapper {
		display: block;
		margin-top: 32px;
	}

	.home-services .wp-block-columns.home-services__desktop-only,
	.home-services .wp-block-columns.home-services__desktop-only > .wp-block-column {
		display: none;
	}

	.home-services__mobile-slider {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
	}

	.home-services__mobile-slider::-webkit-scrollbar {
		display: none;
	}

	.home-services__mobile-slider .mobile-slider-item {
		flex: 0 0 100%;
		scroll-snap-align: start;
		padding: 0;
		box-sizing: border-box;
		display: flex;
	}

	.home-services__mobile-slider .service-card {
		width: 100%;
		height: 410px;
		min-height: 410px;
	}

	.home-services__mobile-slider .service-card::after {
		height: 230px;
	}

	.home-services__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 20px;
	}

	.home-services__dots .dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #C6C6C6;
		border: none;
		padding: 0;
		cursor: pointer;
		transition: background 0.2s;
		flex-shrink: 0;
	}

	.home-services__dots .dot.active {
		background: var(--wp--preset--color--primary);
		width: 24px;
		border-radius: 4px;
	}
}

@media (max-width: 600px) {
	.home-services__mobile-wrapper {
		margin-top: 24px;
	}

	.home-services__mobile-slider .service-card {
		height: 360px;
		min-height: 360px;
	}
}

/* home-clients.css */
/*
 * Clients marquee — infinite logo band. JS (clients-marquee.js) owns the
 * scroll animation once it boots; the CSS keyframe below is only the
 * no-JS fallback, and the PHP-duplicated .clients-marquee__set--clone is
 * what makes that fallback loop seamlessly.
 */

.home-clients__label {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--40);
}

.home-clients {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(300px, 30vw, 430px);
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(24px, 3vw, 40px);
}

.clients-marquee {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	padding-block: clamp(16px, 2vw, 28px);
}

.clients-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	will-change: transform;
	backface-visibility: hidden;
	animation: clients-marquee-scroll 15s linear infinite;
}

.clients-marquee.clients-marquee--js .clients-marquee-track {
	animation: none;
}

/* Override the default WP flow-layout max-width so the track can overflow horizontally. */
.clients-marquee .wp-block-group {
	max-width: none;
}

.clients-marquee-track .clients-marquee__set {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
	padding-right: clamp(40px, 5vw, 80px);
	white-space: nowrap;
	flex-shrink: 0;
	max-width: none;
	width: max-content;
}

/* Fixed-height slot per logo — keeps every image on the same baseline regardless
   of its own aspect ratio, so the source set and its duplicated clone (for the
   seamless loop) always line up with no vertical jump at the seam. */
.clients-marquee__set .wp-block-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(56px, 6vw, 90px);
	margin: 0;
	flex: 0 0 auto;
}

.clients-marquee__set .wp-block-image img {
	display: block;
	width: auto;
	height: 100%;
	max-width: clamp(100px, 10vw, 150px);
	object-fit: contain;
	opacity: 0.62;
	filter: grayscale(1) saturate(0);
}

@keyframes clients-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 781px) {
	.home-clients {
		min-height: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.clients-marquee-track .clients-marquee__set {
		gap: 22px;
		padding-right: 22px;
	}

	.clients-marquee__set .wp-block-image {
		height: 48px;
	}

	.clients-marquee__set .wp-block-image img {
		max-width: 80px;
	}
}

/* home-ai.css */
/*
 * Home AI section — copy + Clo bot video. Typography (font family, weight)
 * for the title/subtitle/body comes from theme.json (h2/h3/paragraph
 * element styles); only the smaller component-specific font sizes and
 * layout/positioning live here.
 */

.home-ai {
	background: transparent;
	overflow: hidden;
}

.home-ai .wp-block-columns.ai-section {
	margin: 0 auto;
	max-width: 1200px;
	column-gap: clamp(20px, 3vw, 48px);
}

@media (min-width: 782px) {
	.home-ai .wp-block-columns.ai-section {
		gap: clamp(10px, 1.4vw, 20px);
		transform: translateX(40px);
	}

	.home-ai .wp-block-columns.ai-section > .wp-block-column.ai-section__media-col {
		justify-content: flex-start;
	}

	.home-ai .wp-block-columns.ai-section > .wp-block-column.ai-section__media-col .ai-section__media-wrap {
		margin-left: -28px;
	}
}

.ai-section__content-col {
	flex-basis: 52%;
	max-width: 515px;
}

.ai-section__media-col {
	flex-basis: 48%;
	display: flex;
	justify-content: flex-end;
}

.ai-section__title {
	color: var(--wp--preset--color--primary-dark);
	margin-top: 0;
	margin-bottom: 6px;
	font-size: clamp(36px, 4vw, 52px);
	letter-spacing: 0;
	line-height: 1;
}

.ai-section__subtitle {
	color: var(--wp--preset--color--primary);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
}

.ai-section__body {
	color: var(--wp--preset--color--primary-dark);
	margin-top: 0;
	margin-bottom: 0;
}

.ai-section__body--spaced {
	margin-top: var(--wp--preset--spacing--30);
}

.ai-section__media-wrap {
	position: relative;
	width: 100%;
	overflow: visible;
}

.ai-section__bot-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
	overflow: hidden;
}

.ai-section__bot-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}

.ai-section__note {
	position: absolute;
	top: 54px;
	right: -112px;
	margin: 0;
	z-index: 5;
	transform-origin: top left;
	pointer-events: none;
}

.ai-section__note-text {
	margin: 0;
	font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
	font-size: 18px;
	line-height: 19px;
	letter-spacing: 0;
	color: var(--wp--preset--color--primary-dark);
	text-align: center;
	transform: rotate(-1.5deg);
}

.ai-section__note::after {
	content: "";
	position: absolute;
	left: -42px;
	top: 40px;
	width: 43px;
	aspect-ratio: 43 / 51;
	background: url('../images/flecha.webp') center / contain no-repeat;
	transform: rotate(4deg);
	z-index: -1;
}

@media (max-width: 1200px) {
	.ai-section__note {
		top: 50px;
		right: -88px;
	}

	.ai-section__note::after {
		left: -38px;
		top: 39px;
		width: 39px;
	}
}

@media (max-width: 1024px) {
	.ai-section__content-col {
		max-width: 100%;
	}

	.ai-section__title {
		font-size: clamp(34px, 6vw, 46px);
	}

	.ai-section__subtitle {
		font-size: clamp(26px, 4vw, 30px);
	}

	.ai-section__media-wrap {
		width: min(400px, 100%);
	}

	.ai-section__note-text {
		font-size: 17px;
		line-height: 18px;
	}
}

@media (max-width: 781px) {
	.home-ai {
		padding-left: var(--wp--preset--spacing--container);
		padding-right: var(--wp--preset--spacing--container);
	}

	.ai-section__content-col {
		order: 1;
		text-align: center;
	}

	.ai-section__media-col {
		order: 2;
		justify-content: center;
	}

	.ai-section__body {
		text-align: center;
	}

	.ai-section__media-wrap {
		width: min(330px, 100%);
	}

	.ai-section__note {
		top: 32px;
		right: 10px;
		gap: 7px;
		flex-direction: row-reverse;
	}

	.ai-section__note-text {
		font-size: 15px;
		line-height: 16px;
		transform: translateX(24px);
	}

	.ai-section__note::after {
		display: none;
	}
}

/* home-testimonials.css */
/*
 * Home testimonials — two-column layout: heading + arrows (left column) and
 * the carousel (right column), the whole thing constrained to the content
 * width like the rest of the site (not bleeding to the viewport edge).
 * Typography (font family, weight) for the heading/company/body comes from
 * theme.json (h2/paragraph element styles) — only component-specific sizes
 * and the carousel mechanics live here.
 */

.home-testimonials {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(96px, 10vw, 164px);
}

.home-testimonials__grid {
	display: grid;
	grid-template-columns: minmax(240px, 380px) 1fr;
	align-items: start;
	column-gap: clamp(24px, 4vw, 64px);
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--container-lg);
	padding-right: var(--wp--preset--spacing--container-lg);
}

.home-testimonials__heading-col {
	padding-top: 8px;
}

.testimonials-nav {
	display: flex;
	gap: 12px;
	margin-top: var(--wp--preset--spacing--40);
}

.testimonials-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* Recolor the arrow artwork with our palette via mask, instead of a background
   chip behind it: prev in primary-dark, next in secondary (the orange). */
.testimonials-nav__icon {
	display: block;
	width: 44px;
	height: 34px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.testimonials-nav__icon--left {
	-webkit-mask-image: url('../images/arrow-left.svg');
	mask-image: url('../images/arrow-left.svg');
	background-color: var(--wp--preset--color--primary-dark);
}

.testimonials-nav__icon--right {
	-webkit-mask-image: url('../images/arrow-right.svg');
	mask-image: url('../images/arrow-right.svg');
	background-color: var(--wp--preset--color--secondary);
}

.testimonials-nav__btn:hover {
	opacity: 0.85;
}

.testimonials-nav__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.home-testimonials__carousel-col {
	overflow: hidden;
}

.testimonials-carousel {
	overflow: hidden;
}

.testimonials-carousel__track {
	display: flex;
	gap: clamp(20px, 2.2vw, 40px);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.testimonials-carousel__track.is-dragging {
	cursor: grabbing;
}

.testimonials-carousel__slide {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: clamp(230px, 25vw, 340px);
	align-self: flex-start;
	opacity: 0.55;
	transition: flex-basis 0.35s ease, opacity 0.35s ease;
}

.testimonials-carousel__slide:last-child {
	margin-right: var(--wp--preset--spacing--container-lg);
}

.testimonials-carousel__slide.is-active {
	flex-basis: clamp(280px, 30vw, 400px);
	opacity: 1;
}

.testimonial-card--showcase {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto 1fr auto;
	width: 100%;
	min-height: 400px;
	padding: 47px 45px 36px;
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: 24px;
	overflow: hidden;
	gap: 0 20px;
}

.testimonial-card__company {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 17px;
	color: rgba(22, 22, 74, 0.5);
}

.testimonial-card__quote {
	grid-column: 1 / -1;
	width: 55px;
	margin: 35px 0 24px;
}

.testimonial-card__quote img {
	display: block;
	width: 55px;
	height: 55px;
}

.testimonial-card__body {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 15.58px;
	color: var(--wp--preset--color--primary-dark);
}

.testimonial-card__body strong {
	font-weight: 800;
}

.testimonial-card__stars {
	display: block;
	font-size: 16px;
	color: var(--wp--preset--color--secondary);
	line-height: 1;
	margin-bottom: 6px;
}

.testimonial-card__rating {
	grid-column: 1;
	grid-row: 4;
	width: 140px;
	align-self: end;
	margin: 0;
}

.testimonial-card__rating img {
	display: block;
	width: 52px;
	height: auto;
}

.testimonial-card__device {
	grid-column: 2;
	grid-row: 4;
	align-self: end;
	justify-self: end;
	margin: 0;
	pointer-events: none;
}

.testimonial-card__device img {
	display: block;
	width: clamp(64px, 8vw, 100px);
	height: auto;
}

@media (max-width: 1200px) {
	.home-testimonials__grid {
		grid-template-columns: 1fr;
		padding-left: 0;
	}

	.home-testimonials__heading-col {
		padding-left: var(--wp--preset--spacing--container-lg);
		padding-right: var(--wp--preset--spacing--container-lg);
		margin-bottom: var(--wp--preset--spacing--40);
	}

}

@media (max-width: 781px) {
	.testimonials-carousel__track {
		gap: 0;
	}

	.testimonials-carousel__slide,
	.testimonials-carousel__slide.is-active {
		flex-basis: calc(100vw - (var(--wp--preset--spacing--container-lg) * 2));
	}

	.testimonial-card--showcase {
		min-height: 0;
		padding: 32px 26px 28px;
	}
}

/* home-contact.css */
/*
 * Home contact — info card (left) + Gravity Forms form (right). Typography
 * (font family, weight) for the heading/labels comes from theme.json
 * (h2/paragraph element styles); only layout and colors live here. Gravity
 * Forms field theming is global — see assets/css/gravity-forms.css.
 */

.home-contact {
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(40px, 5vw, 80px);
	padding-left: var(--wp--preset--spacing--container);
	padding-right: var(--wp--preset--spacing--container);
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.contact-wrapper {
	display: grid;
	grid-template-columns: minmax(320px, 45%) minmax(0, 1fr);
	border-radius: 30px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 60px rgba(22, 22, 74, 0.1);
}

.contact-info {
	background: var(--wp--preset--color--primary);
	padding: 48px 72px;
	color: var(--wp--preset--color--white);
}

.contact-info__title {
	color: var(--wp--preset--color--white);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.contact-info__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 440px;
	color: var(--wp--preset--color--white);
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact-item + .contact-item {
	margin-top: 12px;
}

.contact-item__icon {
	width: 44px;
	min-width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-item__icon img {
	width: 20px;
	height: 20px;
	display: block;
	object-fit: contain;
}

.contact-item__text {
	display: flex;
	flex-direction: column;
}

.contact-item__label {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.contact-item__value {
	margin: 0;
	color: var(--wp--preset--color--white);
}

.contact-item__value a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.contact-item__value a:hover {
	opacity: 0.8;
}

.contact-form-side {
	padding: 48px 40px 48px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 1024px) {
	.contact-wrapper {
		grid-template-columns: 1fr;
	}

	.contact-info {
		padding: 40px 32px;
	}

	.contact-form-side {
		padding: 40px 32px;
	}
}

/* gravity-forms.css */
/*
 * Gravity Forms — global theme matching the site's design system. Scoped to
 * .gform_wrapper so it applies to every Gravity Form on the site (Orbital
 * theme markup), not just the homepage contact form.
 */

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 18px;
	row-gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Gravity Forms' own CSS (Orbital theme) sets conflicting display/alignment
 * on .gfield with equal-or-higher specificity, which was leaving the field
 * content bottom-aligned inside our taller box. !important is used here
 * (and below) deliberately to win against a third-party plugin's own
 * styling, which we don't control and can't reliably out-specificity.
 */
.gform_wrapper .gfield {
	margin: 0 !important;
	min-height: 70px;
	padding: 10px 20px !important;
	background: var(--wp--preset--color--tertiary-light);
	border-radius: 22px;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 2px;
}

/* Neutralize Gravity Forms' own spacing on the label/input wrapper so our
   justify-content: center on .gfield actually centers the group. */
.gform_wrapper .gfield_label,
.gform_wrapper .ginput_container {
	margin: 0 !important;
	flex: 0 0 auto !important;
}

.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield--type-textarea {
	grid-column: 1 / -1;
	min-height: 130px;
}

/* Our .gfield rule above (flex + background, !important) overrides Gravity
   Forms' own display:none on hidden fields — keep them actually hidden. */
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-hidden {
	display: none !important;
}

.gform_wrapper .gfield--type-consent,
.gform_wrapper .gfield--type-checkbox {
	min-height: 0;
	padding: 4px 0 0;
	background: transparent;
	border-radius: 0;
	grid-column: 1 / -1;
}

.gform_wrapper .gfield_required {
	color: rgba(22, 22, 74, 0.45);
}

.gform_wrapper input[type="text"].large,
.gform_wrapper input[type="email"].large,
.gform_wrapper input[type="tel"].large,
.gform_wrapper input[type="number"].large,
.gform_wrapper textarea.textarea,
.gform_wrapper select.large {
	width: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--primary-dark);
	outline: none;
}

.gform_wrapper input[type="text"]::placeholder,
.gform_wrapper input[type="email"]::placeholder,
.gform_wrapper input[type="tel"]::placeholder,
.gform_wrapper textarea::placeholder {
	color: rgba(22, 22, 74, 0.35);
}

.gform_wrapper textarea {
	resize: none;
	min-height: 60px;
}

.gform_wrapper .ginput_container_consent,
.gform_wrapper .gchoice {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
}

.gform_wrapper .ginput_container_consent label,
.gform_wrapper .gchoice label {
	margin: 0;
	color: var(--wp--preset--color--primary-dark);
}

.gform_wrapper .ginput_container_consent label a,
.gform_wrapper .gchoice label a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}

.gform_wrapper input[type="checkbox"] {
	appearance: none;
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin: 2px 10px 0 0 !important;
	border-radius: 999px;
	border: 1px solid rgba(22, 22, 74, 0.3);
	background: transparent;
	cursor: pointer;
	position: relative;
}

.gform_wrapper input[type="checkbox"]:checked {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.gform_wrapper input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
	margin: 8px 0 0;
	padding: 0;
}

/* Gravity Forms uses two different button classes depending on the field
   type: .gform_button (footer submit) and .gform-button (inline submit
   field, e.g. a single-row email + submit form). Cover both. */
.gform_wrapper .gform_button,
.gform_wrapper .gform-button {
	width: 100%;
	padding: 18px 40px;
	border: none !important;
	border-radius: 1000px !important;
	background: var(--wp--preset--color--secondary) !important;
	color: var(--wp--preset--color--primary-dark) !important;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform-button:hover {
	background: #FFC933 !important;
	transform: translateY(-1px);
}

/* The inline submit field is just a wrapper for the button, not a real
   input field — it shouldn't get the gray field-box treatment. */
.gform_wrapper .gfield--type-submit {
	background: transparent !important;
	padding: 0 !important;
	min-height: 0 !important;
	justify-content: center !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors {
	margin-top: 8px;
}

@media (max-width: 600px) {
	.gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}
}

/* footer.css */
/*
 * Site footer — brand + nav columns + newsletter (Gravity Forms), plus a
 * bottom legal bar. Typography (font family/weight for headings/paragraphs)
 * comes from theme.json; only layout, colors and the newsletter form
 * theming (which reuses the global Gravity Forms styles) live here.
 */

.site-footer {
	padding-top: clamp(32px, 4vw, 56px);
	/* Padding, not margin on the child — margin-bottom on the last child
	   collapses through a parent with no padding/border of its own, so the
	   gray never actually showed below the white bar. */
	padding-bottom: clamp(32px, 4vw, 56px);
	padding-left: var(--wp--preset--spacing--container);
	padding-right: var(--wp--preset--spacing--container);
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
	gap: clamp(24px, 4vw, 48px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

.site-footer__logo {
	display: block;
	margin: 0 0 12px;
	width: 110px;
	aspect-ratio: 133 / 49;
	background: url('../images/LOGOBLUE.svg') left center / contain no-repeat;
}

.site-footer__tagline {
	margin: 0 0 16px;
	max-width: 260px;
	color: rgba(22, 22, 74, 0.6);
	font-size: 14px;
}

.site-footer__social {
	display: flex;
	gap: 10px;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary);
	transition: opacity 0.2s ease;
}

.site-footer__social-link:hover {
	opacity: 0.8;
}

.site-footer__col-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--primary-dark);
}

.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__nav-list a {
	color: rgba(22, 22, 74, 0.6);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.site-footer__nav-list a:hover {
	color: var(--wp--preset--color--primary);
}

.site-footer__newsletter-desc {
	margin: 0 0 16px;
	max-width: 260px;
	color: rgba(22, 22, 74, 0.6);
	font-size: 14px;
}

/* Force flex with equal flex-basis instead of relying on GF's own grid/width
   classes for this pair — guarantees a true 50/50 split regardless of what
   Gravity Forms does internally for gfield--width-half. */
.site-footer__col--newsletter .gf-inline-form .gform_wrapper .gform_fields {
	display: flex !important;
	gap: 10px;
	align-items: center;
}

.site-footer__col--newsletter .gf-inline-form .gform_wrapper .gfield {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box;
}

/*
 * Padding trimmed down to match the button's natural (smaller) height — the
 * button stays its normal size, the email field shrinks to meet it. The
 * global .gfield rule in gravity-forms.css sets its own padding with
 * !important, so this needs !important too to actually win here.
 */
.site-footer__col--newsletter .gf-inline-form .gform_wrapper .gfield:not(.gfield--type-submit) {
	min-height: 0;
	padding: 0 16px !important;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(22, 22, 74, 0.12);
}

.site-footer__col--newsletter .gf-inline-form .gform_wrapper input[type="email"] {
	font-size: 14px;
}

.site-footer__col--newsletter .gf-inline-form .gform_wrapper .gform_button,
.site-footer__col--newsletter .gf-inline-form .gform_wrapper .gform-button {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 18px;
	font-size: 14px;
}

/*
 * main's own style.css also defines .site-footer__bottom (white rounded
 * card, background/border-radius/max-width) — set every property here
 * explicitly instead of leaving gaps, so nothing bleeds through from there.
 */
.site-footer__bottom {
	background: var(--wp--preset--color--white);
	border-radius: 10px;
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	padding: 20px clamp(20px, 4vw, 40px);
}

.site-footer__legal {
	margin: 0;
	color: rgba(22, 22, 74, 0.5);
	font-size: 13px;
}

.site-footer__legal-nav {
	display: flex;
	gap: 20px;
}

.site-footer__legal-nav a {
	color: rgba(22, 22, 74, 0.5);
	text-decoration: none;
	font-size: 13px;
	transition: color 0.2s ease;
}

.site-footer__legal-nav a:hover {
	color: var(--wp--preset--color--primary);
}

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

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

	.site-footer__brand,
	.site-footer__col--newsletter {
		grid-column: 1 / -1;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.site-footer__legal-nav {
		flex-wrap: wrap;
	}
}

/* proyectos-relacionados.css */
/*
 * Proyectos relacionados — carrusel de 2 tarjetas visibles con navegación
 * por puntos (y arrastre con ratón/dedo). Título y colores vienen de
 * theme.json — aquí solo layout y mecánica del carrusel.
 */

.proyectos-relacionados {
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: var(--wp--preset--spacing--80);
	padding-left: var(--wp--preset--spacing--container-lg);
	padding-right: var(--wp--preset--spacing--container-lg);
}

.proyectos-relacionados__title {
	margin: 0 0 var(--wp--preset--spacing--70);
}

.proyectos-relacionados__carousel {
	overflow: hidden;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
}

.proyectos-relacionados__track {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.proyectos-relacionados__track.is-dragging {
	cursor: grabbing;
}

.proyectos-relacionados__slide {
	flex: 0 0 calc(50% - clamp(10px, 1.5vw, 20px));
	min-width: 0;
}

.proyectos-relacionados__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	color: inherit;
	-webkit-user-drag: none;
	user-drag: none;
}

.proyectos-relacionados__img-wrap {
	display: block;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.proyectos-relacionados__img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

.proyectos-relacionados__card:hover .proyectos-relacionados__img-wrap img {
	transform: scale(1.04);
}

.proyectos-relacionados__footer {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.proyectos-relacionados__name {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.proyectos-relacionados__cats {
	margin: 0;
	color: rgba(22, 22, 74, 0.5);
	font-size: 14px;
}

.proyectos-relacionados__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--70);
}

.proyectos-relacionados__dots .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #C6C6C6;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s, width 0.2s;
	flex-shrink: 0;
}

.proyectos-relacionados__dots .dot.active {
	background: var(--wp--preset--color--primary);
	width: 24px;
	border-radius: 4px;
}

@media (max-width: 781px) {
	.proyectos-relacionados__slide {
		flex-basis: 100%;
	}
}