/* ============================================================
   Hero — clone of components/hero-section.tsx
   Breakpoints mirror Tailwind's (md=768, lg=1024, xl=1280).
   Desktop = carrusel. Móvil = bloque estático aparte (lg:hidden).
   ============================================================ */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

@media (min-width: 1024px) {
	.hero {
		flex-direction: row; /* lg:flex-row */
	}
}

/* --- Left side (blue, 60% on desktop) --------------------- */
.hero__left {
	position: relative;
	width: 100%;                       /* w-full */
	min-height: 60vh;                  /* min-h-[60vh] */
	overflow: hidden;
	background-color: var(--ciclic-blue);
}

@media (min-width: 1024px) {
	.hero__left {
		width: 60%;                    /* lg:w-3/5 */
		min-height: 100vh;             /* lg:min-h-screen */
	}
}

/* --- Desktop carousel (hidden lg:block) ------------------- */
.hero__carousel {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: none;                     /* hidden */
}

@media (min-width: 1024px) {
	.hero__carousel {
		display: block;                /* lg:block */
	}
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Slide 1: logo + tagline + pills
   Original: px-6 md:px-10 lg:px-16 py-12 lg:py-0
   Only rendered at lg+, so effectively lg values apply. */
.hero__slide--content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 4rem;                   /* lg:px-16 lg:py-0 */
}

/* Desktop logo inside carousel: w-[140px] md:w-[180px] lg:w-[220px]
   (only visible at lg+, so 220px applies). */
.hero__logo {
	margin-bottom: 3rem;               /* lg:mb-12 */
}

.hero__logo img {
	width: 220px;                      /* lg:w-[220px] */
	height: auto;
}

.hero__tagline {
	font-weight: 300;
	color: var(--ciclic-cream);
	font-size: clamp(2rem, 2.1875vw, 3.5rem);
	line-height: 1.2;                  /* leading-[1.2] */
	margin: 0 0 4rem;                  /* lg:mb-16 */
	max-width: 56rem;                  /* max-w-4xl */
}

.hero__tagline-accent {
	color: var(--ciclic-dark);
}

.hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;                         /* gap-4 */
	align-items: center;
}

/* Desktop pill: text-24 lg:text-30 px-6 py-3 md:px-8 md:py-4
   Only visible at lg+, so md values apply. */
.hero__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;                /* md:px-8 md:py-4 */
	border-radius: 9999px;             /* rounded-full */
	background-color: var(--ciclic-cream);
	color: var(--ciclic-dark);
	font-weight: 300;                  /* font-light */
	line-height: 1;                    /* leading-none */
	/* font-size uses .text-30 utility on the element. */
}

/* Slide 2: mockup. Position with translateX/Y mirrors framer transforms. */
.hero__slide--mockup {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
}

.hero__mockup-wrap {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-15%); /* md:-translate-x-[15%] */
	width: 200%;                       /* lg:w-[200%] */
	height: 75vh;                      /* lg:h-[75vh] */
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__mockup {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ============================================================
   MOBILE static block (lg:hidden) — logo → tagline → mockup → pills
   Container: `lg:hidden flex flex-col pt-24 pb-12 px-6`
   ============================================================ */
.hero__mobile {
	display: flex;
	flex-direction: column;            /* flex flex-col */
	padding: 6rem 1.5rem 3rem;         /* pt-24 pb-12 px-6 */
}

@media (min-width: 1024px) {
	.hero__mobile {
		display: none;                 /* lg:hidden */
	}
}

.hero__mobile-logo {
	margin-bottom: 2rem;               /* mb-8 */
}

.hero__mobile-logo img {
	width: 120px;                      /* w-[120px] */
	height: auto;
}

.hero__mobile-tagline {
	font-weight: 300;                  /* font-light */
	color: var(--ciclic-cream);
	font-size: 1.8rem;                 /* style fontSize: 1.8rem */
	line-height: 1.2;                  /* leading-[1.2] */
	margin: 0 0 2rem;                  /* mb-8 */
}

.hero__mobile-mockup-wrap {
	position: relative;
	width: 100%;                       /* w-full */
	height: 38vh;                      /* h-[38vh] */
	margin-bottom: 3rem;               /* mb-12 */
	overflow: hidden;
}

@media (min-width: 768px) {
	.hero__mobile-mockup-wrap {
		height: 45vh;                  /* md:h-[45vh] */
	}
}

/* The inner image is shifted with w-[166%] to give the truncation look. */
.hero__mobile-mockup {
	width: 166%;                       /* w-[166%] */
	height: 100%;
	object-fit: contain;
	object-position: left center;      /* object-left */
}

.hero__mobile-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;                         /* gap-4 */
	align-items: center;
	justify-content: center;           /* justify-center */
}

/* Mobile pill: text-lg md:text-xl px-6 py-3 (no md padding change) */
.hero__mobile-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;           /* px-6 py-3 */
	border-radius: 9999px;
	background-color: var(--ciclic-cream);
	color: var(--ciclic-dark);
	font-weight: 300;                  /* font-light */
	font-size: 1.125rem;               /* text-lg */
	line-height: 1;
}

@media (min-width: 768px) {
	.hero__mobile-pill {
		font-size: 1.25rem;            /* md:text-xl */
	}
}

/* ============================================================
   RIGHT side (cream, 40% on desktop)
   `w-full lg:w-2/5 min-h-[60vh] lg:min-h-screen
   px-6 md:px-8 lg:px-10 xl:px-16 py-12 lg:py-0 scroll-mt-20`
   ============================================================ */
.hero__right {
	position: relative;
	width: 100%;                       /* w-full */
	min-height: 60vh;                  /* min-h-[60vh] */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 1.5rem;              /* px-6 py-12 */
	background-color: var(--ciclic-cream);
	scroll-margin-top: 5rem;           /* scroll-mt-20 */
}

@media (min-width: 768px) {
	.hero__right {
		padding: 3rem 2rem;            /* md:px-8 */
	}
}

@media (min-width: 1024px) {
	.hero__right {
		width: 40%;                    /* lg:w-2/5 */
		min-height: 100vh;             /* lg:min-h-screen */
		padding: 0 2.5rem;             /* lg:px-10 lg:py-0 */
	}
}

@media (min-width: 1280px) {
	.hero__right {
		padding: 0 4rem;               /* xl:px-16 */
	}
}

.hero__right-inner {
	width: 100%;                       /* w-full */
	max-width: 36rem;                  /* max-w-xl */
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 0.8s ease-out 0.3s,
		transform 0.8s ease-out 0.3s;
}

.hero__right-inner.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* H1: text-[2.2rem] md:text-[2.8rem] lg:text-86 + mt-4 lg:mt-8 mb-4 lg:mb-6 */
.hero__headline {
	font-weight: 300;                  /* font-light */
	color: var(--ciclic-dark);
	margin: 1rem 0;                    /* mt-4 mb-4 */
	line-height: 1.2;                  /* leading-[1.2] */
	font-size: 2.2rem;
}

@media (min-width: 768px) {
	.hero__headline {
		font-size: 2.8rem;             /* md:text-[2.8rem] */
	}
}

@media (min-width: 1024px) {
	.hero__headline {
		margin: 2rem 0 1.5rem;         /* lg:mt-8 lg:mb-6 */
		/* font-size uses the .text-86 utility (clamp). */
	}
}

.hero__headline-italic {
	font-style: italic;
	color: var(--ciclic-blue);
}

/* Subhead: text-[1.2rem] md:text-[1.6rem] lg:text-[24px] + mb-4 lg:mb-8 */
.hero__subhead {
	font-weight: 500;                  /* font-medium */
	letter-spacing: -0.025em;          /* tracking-tight */
	color: var(--ciclic-blue);
	font-size: 1.2rem;
	margin: 0 0 1rem;                  /* mb-4 */
}

@media (min-width: 768px) {
	.hero__subhead {
		font-size: 1.6rem;             /* md:text-[1.6rem] */
	}
}

@media (min-width: 1024px) {
	.hero__subhead {
		font-size: 24px;               /* lg:text-[24px] */
		margin-bottom: 2rem;           /* lg:mb-8 */
	}
}

.hero__form-placeholder {
	padding: 3rem 1.5rem;
	border: 1px dashed rgba(25, 13, 54, 0.3);
	border-radius: 0.75rem;
	text-align: center;
	color: rgba(25, 13, 54, 0.5);
	font-size: 0.9rem;
	margin: 0;
}