/*
 * Teluz — Landing Home (zona a medida: header → marquee).
 *
 * Hoja única de la landing, organizada por componente. Solo se encola
 * en la plantilla "Teluz — Landing Home"; no interviene el CSS de
 * Elementor de la zona inferior ni del resto del sitio.
 *
 * Tokens y medidas tomados del CSS real del sitio publicado
 * (post-28.css): paleta, Lemon Milk / Montserrat, hero 50/50,
 * sección 2 en 40/60 con 70vh, pills de borde blanco 2px radio 50px,
 * parallax con background-attachment fija, y breakpoints 1024 / 767
 * (los mismos de Elementor, para que ambas zonas quiebren igual).
 */

/* ---------- Fuentes (servidas por el theme, sin requests externos) -- */

@font-face {
	font-family: 'Lemon Milk';
	src: url('../fonts/LEMONMILK-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lemon Milk';
	src: url('../fonts/LEMONMILK-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lemon Milk';
	src: url('../fonts/LEMONMILK-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lemon Milk';
	src: url('../fonts/LEMONMILK-Bold.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/* Montserrat variable: un solo archivo cubre todos los pesos usados. */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ------------------------------------------------- */

/* Paleta cerrada del diseño: salvia, arena, y textos solo en negro o
   blanco. Puntas cuadradas: sin border-radius en imágenes ni botones
   (el único redondo es el botón circular del hero, que lo es por
   definición del diseño). */
:root {
	--teluz-negro: #000000;
	--teluz-blanco: #ffffff;
	--teluz-salvia: #97a08b;
	--teluz-arena: #dccea9;

	--teluz-font-display: 'Lemon Milk', 'Montserrat', sans-serif;
	--teluz-font-body: 'Montserrat', sans-serif;

	--teluz-content-width: 1280px;
	/* Valor del diseño original indicado por Calu. */
	--teluz-header-height: 150px;
	/* Separación entre tarjetas del carrusel (100px en el original). */
	--teluz-carrusel-gap: clamp(2rem, 6vw, 100px);
}

/* ---------- Base de la landing ------------------------------------- */

/* Sin esto, el padding se suma al ancho de los flex-basis y las
   proporciones 50/50 y 40/60 dejan de ser exactas. No se depende del
   reset del theme padre: esta hoja debe bastarse sola. */
.teluz-landing,
.teluz-landing *,
.teluz-landing *::before,
.teluz-landing *::after {
	box-sizing: border-box;
}

.teluz-landing {
	margin: 0;
	background: var(--teluz-blanco);
	color: var(--teluz-negro);
	font-family: var(--teluz-font-body);
	font-size: 1rem;
	line-height: 1.6;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

.teluz-landing img {
	max-width: 100%;
	height: auto;
	display: block;
}


.teluz-section__title {
	font-family: var(--teluz-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.4;
	margin: 0 0 1.5rem;
	color: var(--teluz-negro);
}

.teluz-richtext p {
	margin: 0 0 1em;
}

.teluz-richtext p:last-child {
	margin-bottom: 0;
}

/* ---------- Botón (pill blanco, texto negro, como el original) ------ */

.teluz-button {
	display: inline-block;
	background: var(--teluz-blanco);
	color: var(--teluz-negro);
	font-family: var(--teluz-font-body);
	font-size: 1em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid var(--teluz-negro);
	padding: 0.75rem 1.75rem;
	margin-top: 1.5rem;
	transition: transform 0.2s ease;
}

/* Interacción del diseño: el botón no cambia de color al hover, crece. */
.teluz-button:hover,
.teluz-button:focus-visible {
	transform: scale(1.05);
}

/* ---------- Header (no sticky: se desplaza con la página) ---------- */

.teluz-header {
	position: relative;
	z-index: 100;
	background: var(--teluz-blanco);
}

.teluz-header__inner {
	max-width: var(--teluz-content-width);
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--teluz-header-height);
}

/* Con .teluz-landing delante para superar la especificidad del reset
   de imágenes (.teluz-landing img). */
.teluz-landing .teluz-header__logo-img {
	width: auto;
	height: 90px;
}

.teluz-nav__list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.teluz-nav__link {
	font-family: var(--teluz-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--teluz-negro);
	transition: color 0.2s ease;
}

.teluz-nav__link:hover,
.teluz-nav__link:focus-visible {
	color: var(--teluz-salvia);
}

.teluz-nav__link--cta {
	display: inline-block;
	border: 1px solid var(--teluz-negro);
	padding: 0.5rem 1.25rem;
	transition: transform 0.2s ease;
}

.teluz-nav__link--cta:hover,
.teluz-nav__link--cta:focus-visible {
	color: var(--teluz-negro);
	transform: scale(1.05);
}

/* ---------- Hero 50/50 con video ------------------------------------ */

/* Las tres primeras secciones (hero, ¿Por qué Teluz?, carrusel) van a
   100vh, según el diseño original. */
.teluz-hero {
	position: relative;
	display: flex;
	min-height: 100vh;
}

.teluz-hero__half {
	flex: 1 1 50%;
	min-width: 0;
}

.teluz-hero__half--text {
	background: var(--teluz-salvia);
	color: var(--teluz-blanco);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 6vw, 5rem);
}

.teluz-hero__title {
	font-family: var(--teluz-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.4;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

.teluz-hero__text {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.4;
	margin: 0;
	max-width: 480px;
}

.teluz-hero__half--video {
	position: relative;
	overflow: hidden;
}

.teluz-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Botón redondo centrado en el borde de ambas mitades: círculo salvia
   con borde blanco 3px, como el original (que es decorativo y hace
   zoom suave; si tiene URL además navega). */
.teluz-hero__cta {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 130px;
	height: 130px;
	border: 3px solid var(--teluz-blanco);
	border-radius: 50%;
	background: var(--teluz-salvia);
	color: var(--teluz-blanco);
	font-family: var(--teluz-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem;
	transition: transform 1.5s ease;
}

.teluz-hero__cta:hover,
.teluz-hero__cta:focus-visible {
	transform: translate(-50%, -50%) scale(1.08);
}

/* ---------- ¿Por qué Teluz? — 40% imagen / 60% texto ----------------- */

.teluz-porque {
	display: flex;
	min-height: 100vh;
	background: var(--teluz-arena);
}

/* La imagen no es full height: va inserta en la columna, centrada y
   con aire del fondo arena alrededor (definición del diseño). */
.teluz-porque__media {
	flex: 0 0 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 8vh, 5rem) clamp(2rem, 5vw, 4rem);
}

.teluz-landing .teluz-porque__img {
	width: 100%;
	max-height: 75vh;
	object-fit: cover;
}

.teluz-porque__content {
	flex: 1 1 60%;
	align-self: center;
	padding: clamp(1.875rem, 5vw, 4rem);
}

/* ---------- Carrusel de servicios ------------------------------------ */

.teluz-carrusel {
	background: var(--teluz-blanco);
	padding: clamp(3rem, 7vw, 5.5rem) 1.25rem;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.teluz-carrusel__viewport {
	width: 100%;
	position: relative;
	max-width: var(--teluz-content-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.teluz-carrusel__track {
	display: flex;
	gap: var(--teluz-carrusel-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1 1 auto;
	min-width: 0;
}

.teluz-carrusel__track::-webkit-scrollbar {
	display: none;
}

/* 3 tarjetas visibles en escritorio (como el original). */
.teluz-carrusel__slide {
	flex: 0 0 calc((100% - 2 * var(--teluz-carrusel-gap)) / 3);
	min-width: 0;
	scroll-snap-align: start;
}

.teluz-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
}

.teluz-card__title {
	font-family: var(--teluz-font-display);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--teluz-negro);
	margin: 0 0 1rem;
	min-height: 2.7em; /* alinea las imágenes cuando los títulos ocupan 1 o 2 líneas */
}

.teluz-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 1rem;
}

.teluz-card__text {
	font-size: 0.9rem;
	flex: 1 1 auto;
}

.teluz-card .teluz-button {
	font-size: 0.85em;
}

/* Ocultas por defecto: la plantilla agrega la clase --nav-* según
   cuántas tarjetas haya, y cada breakpoint las muestra solo si hay
   más tarjetas que las visibles. */
/* Los <button> no heredan tipografía ni color del contenedor y, a
   diferencia de los <a>, el CSS de Hello Elementor sí los alcanza: de
   ahí que aparecieran con el color de enlace del tema en lugar del
   negro. Por eso van declarados de forma explícita y con el selector
   del contenedor, para ganar en especificidad sin recurrir a
   !important. */
.teluz-carrusel .teluz-carrusel__arrow {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--teluz-negro);
	border-radius: 0;
	background: var(--teluz-blanco);
	color: var(--teluz-negro);
	font-family: var(--teluz-font-body);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Ni el hover ni el foco cambian el color: solo crece (igual que los
   botones de contenido). */
.teluz-carrusel .teluz-carrusel__arrow:hover,
.teluz-carrusel .teluz-carrusel__arrow:focus,
.teluz-carrusel .teluz-carrusel__arrow:active {
	background: var(--teluz-blanco);
	color: var(--teluz-negro);
	border-color: var(--teluz-negro);
}

/* Escritorio: 3 tarjetas visibles, flechas desde la cuarta. */
.teluz-carrusel--nav-desktop .teluz-carrusel__arrow {
	display: block;
}

.teluz-carrusel__arrow:hover,
.teluz-carrusel__arrow:focus-visible {
	transform: scale(1.1);
}

/* ---------- Banner parallax "Lo que encontrarás" --------------------- */

.teluz-encontraras {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--teluz-negro);
	background-size: cover;
	background-position: center;
	/* Parallax simple, igual que el original (background-attachment). */
	background-attachment: fixed;
	padding: 50px clamp(1.25rem, 4vw, 50px);
}

/* Velo oscuro para garantizar contraste AA del texto sobre la foto. */
.teluz-encontraras::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.teluz-encontraras__inner {
	position: relative;
	max-width: var(--teluz-content-width);
	text-align: center;
}

.teluz-encontraras__title {
	font-family: var(--teluz-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	color: var(--teluz-blanco);
	margin: 0 0 2.5rem;
	text-transform: uppercase;
}

.teluz-encontraras__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Pill: borde blanco 2px, radio 50px, Montserrat 1.3em (medidas del
   CSS original). */
.teluz-encontraras__pill {
	border: 2px solid var(--teluz-blanco);
	border-radius: 50px;
	padding: 20px 40px;
	color: var(--teluz-blanco);
	font-family: var(--teluz-font-body);
	font-size: 1.3em;
	font-weight: 500;
	line-height: 1.3;
}

/* ---------- Nuestra Carta (fondo salvia) ------------------------------ */

.teluz-carta {
	background: var(--teluz-salvia);
	padding: clamp(3rem, 7vw, 5.5rem) 1.25rem;
}

.teluz-carta__inner {
	max-width: var(--teluz-content-width);
	margin: 0 auto;
}

.teluz-carta__title {
	color: var(--teluz-blanco);
	text-align: center;
	text-transform: uppercase;
}

/* Medidas del diseño: la grilla no ocupa el ancho de contenido
   completo, va a 1000px centrada con 50px entre cards. */
.teluz-carta__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	max-width: 1000px;
	list-style: none;
	margin: 2.5rem auto 0;
	padding: 0;
}

/* Card cuadrada de borde blanco sin relleno: el PNG del producto (sin
   fondo) centrado, y el título abajo. */
.teluz-carta__item {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--teluz-blanco);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.5rem 1.5rem 2rem;
}

.teluz-landing .teluz-carta__img {
	flex: 1 1 auto;
	min-height: 0;
	width: 85%;
	object-fit: contain;
}

.teluz-carta__item-title {
	margin: 1.5rem 0 0;
	text-align: center;
	font-family: var(--teluz-font-body);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--teluz-blanco);
}

.teluz-carta__actions {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}

.teluz-carta__actions .teluz-button {
	margin-top: 0;
	border-color: var(--teluz-blanco);
}

/* ---------- Marquee ---------------------------------------------------- */

.teluz-marquee {
	background: var(--teluz-salvia);
	overflow: hidden;
	padding: 1.25rem 0;
}

.teluz-marquee__track {
	display: inline-flex;
	white-space: nowrap;
	animation: teluz-marquee 30s linear infinite;
}

.teluz-marquee__group {
	display: inline-flex;
	gap: 3rem;
	padding-right: 3rem;
}

/* Texto a 68px del diseño, en Montserrat; primera palabra normal y la
   segunda en bold (el <strong> lo arma la plantilla). */
.teluz-marquee__item {
	font-family: var(--teluz-font-body);
	font-weight: 400;
	font-size: 68px;
	text-transform: uppercase;
	color: var(--teluz-blanco);
}

.teluz-marquee__item strong {
	font-weight: 700;
}

/* El riel se desplaza exactamente una copia del contenido: el loop
   reinicia sin salto visible. */
@keyframes teluz-marquee {
	from {
		transform: translateX(0);
	}

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

/* ---------- Aviso interno de zona sin configurar ----------------------- */

.teluz-zone-notice {
	max-width: var(--teluz-content-width);
	margin: 2rem auto;
	padding: 1rem 1.5rem;
	border: 2px dashed var(--teluz-salvia);
	font-family: var(--teluz-font-body);
}

/* ---------- Responsive: mismos quiebres que Elementor ------------------ */

/* Tablet (≤1024) */
@media (max-width: 1024px) {
	/* Header tablet/móvil: sin hamburguesa. El logo queda centrado y el
	   menú es una barra horizontal deslizable debajo (scroll nativo). */
	.teluz-header__inner {
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.5rem 0 0;
	}

	.teluz-nav {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.teluz-nav::-webkit-scrollbar {
		display: none;
	}

	/* width: max-content + margin auto: centrada cuando cabe, y con
	   desborde deslizable cuando no. */
	.teluz-nav__list {
		width: max-content;
		margin: 0 auto;
		gap: 2.25rem;
		padding: 0.75rem 1.25rem;
	}

	.teluz-nav__link {
		white-space: nowrap;
	}

	/* En la barra, Contacto va como un ítem más, sin chip. */
	.teluz-nav__link--cta {
		border: 0;
		padding: 0;
	}

	/* 2 tarjetas visibles: flechas desde la tercera. */
	.teluz-carrusel__slide {
		flex-basis: calc((100% - var(--teluz-carrusel-gap)) / 2);
	}

	/* Misma especificidad que la regla de escritorio, para que el orden
	   de aparición sea lo único que decide. */
	.teluz-carrusel .teluz-carrusel__arrow {
		display: none;
	}

	.teluz-carrusel--nav-tablet .teluz-carrusel__arrow {
		display: block;
	}

	.teluz-encontraras {
		min-height: 50vh;
		padding: 50px 20px;
	}

	.teluz-encontraras__pill {
		font-size: 1.1em;
		padding: 14px 28px;
	}

	.teluz-carta__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Móvil (≤767) */
@media (max-width: 767px) {
	.teluz-landing .teluz-header__logo-img {
		height: 64px;
	}

	/* El hero apila con el video primero (60vh) y el texto centrado
	   después; el botón redondo queda sobre el borde inferior del
	   video, como en el diseño. */
	.teluz-hero {
		flex-direction: column;
	}

	.teluz-hero__half--video {
		order: 1;
		min-height: 60vh;
	}

	/* El padding superior deja libre la mitad del círculo, que se apoya
	   sobre el borde inferior del video. */
	.teluz-hero__half--text {
		order: 2;
		align-items: center;
		text-align: center;
		padding-top: 95px;
	}

	.teluz-hero__cta {
		top: 60vh;
	}

	/* La imagen va a ancho completo arriba; título centrado y cuerpo
	   justificado, como en el diseño móvil. */
	.teluz-porque {
		flex-direction: column;
	}

	.teluz-porque__media {
		flex-basis: auto;
		padding: 20px;
	}

	.teluz-landing .teluz-porque__img {
		width: 100%;
		max-height: 65vh;
		object-fit: cover;
	}

	.teluz-porque__content {
		text-align: center;
	}

	.teluz-porque__content .teluz-richtext {
		text-align: justify;
	}

	/* 1 tarjeta visible, contenido centrado y una sola flecha (la de
	   avanzar) centrada sobre el riel. */
	.teluz-carrusel__slide {
		flex-basis: 100%;
	}

	.teluz-carrusel__viewport {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
	}

	.teluz-carrusel__track {
		order: 3;
		flex-basis: 100%;
	}

	/* Selector de dos clases para superar la regla de tablet, que si no
	   volvería a mostrar la flecha de retroceso. */
	.teluz-carrusel .teluz-carrusel__arrow--prev {
		display: none;
	}

	.teluz-carrusel--nav-movil .teluz-carrusel__arrow--next {
		display: block;
		border: 0;
		background: none;
		font-size: 2rem;
	}

	.teluz-card {
		align-items: center;
		text-align: center;
	}

	.teluz-card__title {
		min-height: 0;
	}

	/* Safari iOS no soporta bien background-attachment:fixed; la foto
	   vuelve a scroll normal en móvil. */
	.teluz-encontraras {
		background-attachment: scroll;
	}

	/* Pills a ancho completo, apiladas. */
	.teluz-encontraras__pill {
		width: 100%;
		text-align: center;
	}

	/* La carta queda en 2 columnas en móvil. */
	.teluz-carta__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.teluz-carta__item {
		padding: 1.25rem 0.75rem 1rem;
	}

	.teluz-carta__item-title {
		margin-top: 1rem;
		font-size: 0.8rem;
	}

	/* La card es mucho más chica en 2 columnas: el producto baja de 85%
	   a 65% para no quedar pegado a los bordes. */
	.teluz-landing .teluz-carta__img {
		width: 65%;
	}
}

/* Respeto por usuarios que reducen el movimiento (WCAG). */
@media (prefers-reduced-motion: reduce) {
	.teluz-landing {
		scroll-behavior: auto;
	}

	.teluz-marquee__track {
		animation: none;
	}

	.teluz-landing *,
	.teluz-landing *::before,
	.teluz-landing *::after {
		transition: none !important;
	}
}