/*
 * 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;
	}
}