/* landing.css — estilos de los bloques hcl-* de las landings (hero, icon grid, steps, compare, cta final y fallback de FAQs). */

/* ============================================================
   Base de bloques
   ============================================================ */

.hcl-block {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.hcl-title {
	color: var(--gris-negro);
	--min-font-size: 20; --max-font-size: 28; font-size: var(--interpolate);
	font-weight: 700;
	line-height: 1.2;
}

/* Botón CTA de los bloques: el btn-a de global.css llega con padding
   asimétrico (pensado para icono a la derecha); aquí se normaliza. */
.hcl-block .btn-a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 26px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	border-radius: 6px;
}

.hcl-block .btn-a:hover {
	filter: brightness(1.1);
}

/* ============================================================
   Hero: texto a la izquierda + imagen a la derecha
   ============================================================ */

.hcl-hero {
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
}

.hcl-hero-txt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	flex: 1 1 0;
	min-width: 0;
}

.hcl-hero h1,
.hcl-page-title {
	color: var(--verde-vivo);
	--min-font-size: 26; --max-font-size: 40; font-size: var(--interpolate);
	font-weight: 700;
	line-height: 1.2;
}

/* Título de la landing cuando el hero está inactivo o sin título
   (renderLandingFromPayload inyecta <h1 class="hcl-page-title">). */
.hcl-page-title {
	margin-bottom: 10px;
}

.hcl-hero-subtitle {
	color: var(--gris-negro);
	--min-font-size: 19; --max-font-size: 26; font-size: var(--interpolate);
	font-weight: 700;
	line-height: 1.25;
}

.hcl-hero-body {
	color: var(--gris-txt);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

.hcl-hero-body p + p {
	margin-top: 10px;
}

.hcl-hero-body a {
	color: var(--verde-vivo);
	text-decoration: underline;
}

.hcl-hero-body b,
.hcl-hero-body strong {
	font-weight: 700;
	color: var(--gris-negro);
}

.hcl-hero > img {
	width: 44%;
	max-width: 520px;
	flex-shrink: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	background-color: var(--gris-claro);
}

/* ============================================================
   Icon grid: iconos, swatches o fotos con etiqueta
   ============================================================ */

/* Carrusel de una sola fila SIEMPRE: nunca envuelve a dos filas. Si los items
   no caben, se desplazan con swipe (nativo) o con las flechas (js/landing.js). */
.hcl-carousel {
	position: relative;
}

.hcl-items {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;            /* asegura el swipe horizontal nativo en táctil */
	overscroll-behavior-x: contain;
	scrollbar-width: none;          /* la navegación es por flechas/swipe/arrastre */
	padding-bottom: 4px;
	cursor: grab;
}

.hcl-items::-webkit-scrollbar {
	display: none;
}

/* Arrastre con ratón/puntero (lo activa js/landing.js) */
.hcl-items.hcl-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.hcl-items img {
	-webkit-user-drag: none;
	user-select: none;
}

.hcl-item {
	flex: 0 0 auto;
	width: 144px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

/* Flechas de navegación (inyectadas por js/landing.js; solo visibles con overflow) */
.hcl-car-arrow {
	position: absolute;
	top: 44%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	color: var(--verde-vivo);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: opacity 0.15s, box-shadow 0.15s;
}

.hcl-carousel.has-overflow .hcl-car-arrow {
	display: flex;
}

.hcl-car-arrow svg {
	width: 22px;
	height: 22px;
}

.hcl-car-prev {
	left: -8px;
}

.hcl-car-next {
	right: -8px;
}

.hcl-car-arrow:disabled {
	opacity: 0.3;
	cursor: default;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}

.hcl-item img {
	width: 100%;
	max-width: 190px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 10px;
	background-color: var(--gris-claro);
}

.hcl-item strong {
	color: var(--gris-negro);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.hcl-item p {
	color: var(--gris-txt);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

/* ============================================================
   Steps: banda gris con pasos numerados y CTA centrado
   ============================================================ */

.hcl-steps {
	background-color: var(--gris-claro);
	border-radius: 18px;
	padding: 30px clamp(16px, 4vw, 40px) 34px;
	container-type: inline-size;    /* los pasos responden a SU ancho, no al del viewport */
}

.hcl-steps .hcl-title {
	text-align: center;
}

.hcl-steps-row {
	display: grid;
	gap: 20px 24px;
}

.hcl-steps-1 {
	grid-template-columns: 1fr;
}

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

.hcl-steps-3 {
	grid-template-columns: repeat(3, 1fr);
}

.hcl-steps-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Cuando la banda es estrecha (p.ej. con la barra lateral estrujando el main),
   los pasos se apilan en una sola columna en vez de descuadrarse. */
@container (max-width: 680px) {
	.hcl-steps-2,
	.hcl-steps-3,
	.hcl-steps-4 {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin: 0 auto;
	}
}

.hcl-step {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.hcl-step-num {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--blanco);
	font-size: 18px;
	font-weight: 700;
	background-color: var(--verde-vivo);
	border-radius: 50%;
}

.hcl-step-text {
	color: var(--gris-negro);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

.hcl-steps > .btn-a {
	align-self: center;
}

/* ============================================================
   Compare: dos columnas pros / contras
   ============================================================ */

.hcl-compare {
	container-type: inline-size;    /* apila las 2 columnas según su propio ancho */
}

.hcl-compare .hcl-title {
	text-align: center;
}

.hcl-compare-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

@container (max-width: 640px) {
	.hcl-compare-cols {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.hcl-compare-con {
		border-left: none;
		border-top: 1px solid var(--gris-fondo);
		padding-top: 26px;
	}
}

.hcl-compare-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 0 clamp(10px, 3vw, 40px);
}

.hcl-compare-con {
	border-left: 1px solid var(--gris-fondo);
}

.hcl-compare-head {
	color: var(--gris-negro);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	background-color: var(--gris-claro);
	padding: 12px 10px;
	border-radius: 8px;
}

.hcl-compare-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0 10px;
}

.hcl-compare-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--gris-negro);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.hcl-mark {
	flex-shrink: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.hcl-mark-pro {
	color: var(--verde-vivo);
}

.hcl-mark-con {
	color: var(--rojo);
}

/* ============================================================
   CTA final: banda destacada centrada con hasta 2 botones
   ============================================================ */

.hcl-cta_final {
	align-items: center;
	gap: 22px;
	background-color: var(--gris-claro);
	border-radius: 18px;
	padding: 36px clamp(16px, 4vw, 40px);
	text-align: center;
}

.hcl-cta-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

/* Los estilos del acordeón FAQ (.faq-details/.faq-summary/.faq-plus/.faq-content)
   los aporta dynamic-fixes.css, cargado en el <head> de landing.html DESPUÉS de
   este fichero. No se duplican aquí para no mantener dos copias divergentes. */

/* ============================================================
   Responsive
   ============================================================ */

@media screen and (max-width: 959px) {
	.hcl-hero {
		flex-direction: column;
		align-items: stretch;
	}

	.hcl-hero > img {
		width: 100%;
		max-width: 640px;
		align-self: center;
	}

	.hcl-step {
		justify-content: flex-start;
	}
}

/* El apilado de steps y compare lo gobiernan sus @container queries (responden a
   su ancho real, no al del viewport, para no romperse cuando la barra lateral
   estruja el main). Aquí solo van los ajustes propios del móvil del carrusel. */
@media screen and (max-width: 767px) {
	.hcl-items {
		gap: 14px;
	}

	.hcl-item {
		width: 132px;
	}

	.hcl-car-prev {
		left: 0;
	}

	.hcl-car-next {
		right: 0;
	}

	.hcl-cta-btns {
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
	}

	.hcl-block .btn-a {
		align-self: stretch;
	}
}