/**
 * Home page (v1) — section-by-section layout and components.
 *
 * Page-specific: enqueued only on the front page (is_front_page()) per
 * project-docs/08-performance-rules.md. Reuses `.ed-section--alt` /
 * `.ed-section--dark` (utilities.css), `.ed-eyebrow` / `.ed-step-number`
 * (base.css), and `.ed-button` (components/buttons.css) rather than
 * reinventing them. See project-docs/05-components.md for the section
 * rationale and project-docs/11-home-competitor-research.md for the
 * research behind the structure.
 */

/* -------------------------------------------------------------------- */
/* 1. Hero                                                                */
/* -------------------------------------------------------------------- */

.ed-hero {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	display: flex;
	align-items: center;
}

/*
 * Taller hero, more of the source photograph visible (less vertical crop
 * from object-fit: cover) — see .ed-hero__visual img below. clamp() keyed
 * to viewport width (720–780px lands at 1440px, ~750px), capped at 780px so
 * a wider-but-not-taller screen (1920px) doesn't keep growing past it — not
 * tied to one single resolution, just bounded at both ends.
 */
@media (min-width: 768px) {
	.ed-hero {
		min-height: clamp(680px, 52vw, 780px);
	}
}

.ed-hero__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ed-hero__visual img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center 40%;
}

/*
 * Scrim, not a flat overlay: text sits over the left/lower part of the
 * photo (armchair + wall, already the calmer half of the shot), so the
 * gradient concentrates darkness there and clears toward the bright
 * window on the right rather than dimming the whole photograph.
 */
.ed-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 10, 11, 0.74) 0%, rgba(8, 10, 11, 0.64) 32%, rgba(8, 10, 11, 0.42) 58%, rgba(8, 10, 11, 0.08) 80%, rgba(8, 10, 11, 0) 94%),
		linear-gradient(0deg, rgba(8, 10, 11, 0.3) 0%, rgba(8, 10, 11, 0) 38%);
}

.ed-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--ed-space-2xl) var(--ed-space-xl);
	max-width: 640px;
}

.ed-hero__badge {
	display: inline-block;
	margin: 0 0 var(--ed-space-md);
	padding: var(--ed-space-2xs) var(--ed-space-sm);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--ed-radius-full);
	color: #ffffff;
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ed-hero__title {
	margin: 0 0 var(--ed-space-md);
	color: #ffffff;
}

.ed-hero__title-accent {
	/* Raw --ed-color-primary is AA-safe here: ~7.2:1 against the dark hero
	   background (see 02-design-system.md's dark-surface contrast table) —
	   unlike on white, where it fails and --ed-color-link is required. */
	color: var(--ed-color-primary);
}

.ed-hero__desc {
	margin: 0 0 var(--ed-space-lg);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--ed-font-size-md);
	max-width: 46ch;
}

.ed-hero__actions {
	gap: var(--ed-space-sm);
}

/*
 * Kill Core's default flow-layout blockGap margin-top in the two spots it
 * shows as a stray white strip: between the header template part and
 * <main> (no shared background there to hide it), and between the Hero and
 * the section right after it (Hero paints its own background, so the
 * margin-top Core adds to that next section renders as a gap of body-white
 * before the section's own background starts). Scoped to body.home so it
 * only affects this page — same root cause already fixed per-grid for
 * .ed-samples__grid / .ed-measure__grid / .ed-factory__grid below.
 */
body.home .ed-site-main {
	margin-top: 0;
}

.ed-hero + * {
	margin-top: 0;
}

/* -------------------------------------------------------------------- */
/* 2. Trust benefits                                                      */
/* -------------------------------------------------------------------- */

/*
 * Layout only: each item is an editorial feature card, compact modifier
 * (.ed-feature-card--editorial.--compact, components/feature-card.css).
 */
.ed-trust__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.ed-trust__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ed-trust__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * Phones (< 600px): 2 x 2 instead of four stacked cards, every card as tall
 * as the tallest (grid-auto-rows: 1fr). Card density comes from the compact
 * modifier's own phone rules.
 */
@media (max-width: 599px) {
	.ed-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: var(--ed-space-xs);
	}
}

/* -------------------------------------------------------------------- */
/* 3. Nuestros productos                                                  */
/* -------------------------------------------------------------------- */

.ed-products__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
}

@media (min-width: 640px) {
	.ed-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Row wrappers only matter on phones: everywhere else the cards stay direct grid items. */
.ed-products__row {
	display: contents;
}

/*
 * Phones (< 640px): two independent horizontal rows — Estores enrollables ->
 * Cortinas verticales, then Paneles japoneses -> Noche y día. Each
 * .ed-products__row is its own scroller (own scrollLeft, snap and swipe), so
 * moving one row never moves the other. Two explicit 100% columns keep every
 * card exactly as wide as before (the container width); each row bleeds to
 * the screen edges (negative gutter margins + matching padding) so the next
 * card peeks in by the gutter minus the gap. Native overflow-x + scroll-snap,
 * same recipe as the "Guía de tejidos" row below; 4px block padding leaves
 * room for the hover lift / focus ring, and the 16px row gap + 2 x 4px keeps
 * the 24px card-to-card spacing. home-fabrics.js brings a focused card into
 * view inside its own row.
 */
@media (max-width: 639px) {
	.ed-products__grid {
		row-gap: var(--ed-space-sm);
	}

	.ed-products__row {
		display: grid;
		grid-template-columns: repeat(2, 100%);
		column-gap: var(--ed-space-2xs);
		margin-inline: calc(-1 * var(--ed-container-gutter));
		padding: 4px var(--ed-container-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--ed-container-gutter);
		scrollbar-width: none;
	}

	.ed-products__row::-webkit-scrollbar {
		display: none;
	}

	.ed-product-card {
		scroll-snap-align: start;
	}
}

.ed-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 340px;
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-graphite);
	border-radius: var(--ed-radius-lg);
	color: #ffffff;
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
}

.ed-product-card:hover,
.ed-product-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--ed-shadow-lg);
}

.ed-product-card:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-product-card__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ed-transition-slow);
}

.ed-product-card:hover .ed-product-card__img,
.ed-product-card:focus-visible .ed-product-card__img {
	transform: scale(1.04);
}

/*
 * Bottom-anchored scrim, not a flat tint: the photo itself should stay
 * legible up top; the gradient only needs to darken enough at the bottom
 * for the white title/description/CTA to stay readable (WCAG contrast),
 * matching the "smooth gradient, not a hard split" reference direction.
 */
.ed-product-card__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(10, 12, 13, 0.92) 0%, rgba(10, 12, 13, 0.55) 42%, rgba(10, 12, 13, 0) 75%);
}

.ed-product-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
}

.ed-product-card__title {
	margin: 0;
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
	font-weight: 500;
	color: #ffffff;
}

.ed-product-card__desc {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--ed-font-size-sm);
	max-width: 40ch;
}

.ed-product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	margin-top: var(--ed-space-2xs);
	color: var(--ed-color-primary);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-product-card__cta svg {
	width: 14px;
	height: 11px;
	transition: transform var(--ed-transition-fast);
}

.ed-product-card:hover .ed-product-card__cta svg,
.ed-product-card:focus-visible .ed-product-card__cta svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ed-product-card,
	.ed-product-card__img,
	.ed-product-card__cta svg {
		transition: none;
	}

	.ed-product-card:hover,
	.ed-product-card:hover .ed-product-card__img {
		transform: none;
	}
}

/* -------------------------------------------------------------------- */
/* 4. Materiales / fabric guidance                                        */
/* -------------------------------------------------------------------- */

/*
 * Below 1024px a card in a 3-column row gets too narrow (~220px at 768), so the
 * row becomes a native horizontal scroller with scroll-snap: one card plus a
 * peek of the next on phones, ~2.2 cards on tablets. It bleeds to the viewport
 * edges (negative gutter margins + matching padding) so the peek reaches the
 * edge, and snaps to the content edge via scroll-padding. No JS, no library.
 */
.ed-fabrics__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 86%;
	gap: var(--ed-space-md);
	margin: 0 calc(-1 * var(--ed-container-gutter)) var(--ed-space-lg);
	padding: 4px var(--ed-container-gutter); /* 4px: room for the hover lift */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ed-container-gutter);
	scrollbar-width: none;
}

.ed-fabrics__grid::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.ed-fabrics__grid {
		grid-auto-columns: calc((100% - var(--ed-space-md)) / 2.2);
	}
}

@media (min-width: 1024px) {
	.ed-fabrics__grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}
}

/* Photo-led link card: 4:3 photo edge to edge at the top (overflow clips it to the card radius), text below. */
.ed-fabric-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background-color: var(--ed-color-surface);
	border-radius: var(--ed-radius-md);
	border: 1px solid var(--ed-color-border);
	scroll-snap-align: start;
	transition: border-color var(--ed-transition-fast), transform var(--ed-transition-fast);
}

/* Mouse/trackpad only, so a tap on touch never leaves a stuck hover state. */
@media (hover: hover) {
	.ed-fabric-card:hover {
		color: inherit;
		border-color: var(--ed-color-primary);
		transform: translateY(-2px);
	}
}

.ed-fabric-card:focus-visible {
	border-color: var(--ed-color-primary);
	outline: var(--ed-focus-outline);
	outline-offset: -3px; /* inside the card: the scroller would clip an outer ring */
}

@media (prefers-reduced-motion: reduce) {
	.ed-fabric-card {
		transition: none;
	}

	.ed-fabric-card:hover {
		transform: none;
	}
}

.ed-fabric-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3; /* source photos are exactly 4:3 — no crop */
	object-fit: cover;
}

.ed-fabric-card__body {
	padding: var(--ed-space-lg);
}

.ed-fabric-card__title {
	margin: 0 0 var(--ed-space-3xs);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
	font-weight: 500;
}

.ed-fabric-card__desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* 5. Muestras gratis                                                     */
/* -------------------------------------------------------------------- */

.ed-samples {
	overflow: hidden;
}

.ed-samples__grid {
	display: grid;
	grid-template-columns: 1fr;
}

/*
 * Core's "flow" layout support adds a `margin-top` blockGap between stacked
 * children (wp-block-group-is-layout-flow > * + *) — verified via computed
 * styles (.ed-samples__media measured marginTop: 24px). On mobile this
 * showed as a white gap between the content block and the photo; on
 * desktop it made the media column 24px shorter than the content column
 * despite align-items: stretch. Same root cause already fixed once for
 * .ed-footer-top in footer.css.
 */
.ed-samples__grid > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.ed-samples__grid {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

.ed-samples__content {
	display: flex;
	align-items: center;
	background-color: var(--ed-color-graphite);
	padding: var(--ed-space-2xl) var(--ed-container-gutter);
}

.ed-samples__content-inner {
	max-width: 460px;
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 900px) {
	.ed-samples__content-inner {
		margin-inline: auto 0;
		text-align: start;
	}
}

.ed-samples__eyebrow {
	color: var(--ed-color-primary);
}

.ed-samples__title {
	margin: 0 0 var(--ed-space-sm);
	color: #ffffff;
}

.ed-samples__desc {
	margin: 0 0 var(--ed-space-lg);
	color: var(--ed-color-graphite-muted);
	font-size: var(--ed-font-size-md);
}

.ed-samples__content-inner .wp-block-buttons {
	justify-content: center;
}

@media (min-width: 900px) {
	.ed-samples__content-inner .wp-block-buttons {
		justify-content: flex-start;
	}
}

.ed-samples__media {
	position: relative;
	min-height: 280px;
}

@media (min-width: 900px) {
	.ed-samples__media {
		min-height: auto;
	}
}

.ed-samples__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------- */
/* 6. Cómo medir                                                          */
/* -------------------------------------------------------------------- */

.ed-measure__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-xl);
	align-items: start;
}

/* Same core flow-layout blockGap margin as .ed-samples__grid above. */
.ed-measure__grid > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.ed-measure__grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--ed-space-2xl);
		/* Center the visual (diagram + "Ver guía completa" link) as one
		   unit against the left instructional column; mobile keeps the
		   natural top-aligned stack via the base align-items: start above. */
		align-items: center;
	}
}

.ed-measure__steps {
	display: flex;
	flex-direction: column;
	margin: var(--ed-space-lg) 0;
	padding: 0;
	list-style: none;
}

.ed-measure__step {
	padding-block: var(--ed-space-md);
	border-top: 1px solid var(--ed-color-border);
}

.ed-measure__step:first-child {
	padding-top: 0;
	border-top: 0;
}

.ed-measure__step-title {
	margin: var(--ed-space-2xs) 0 var(--ed-space-3xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
	font-weight: 500;
}

.ed-measure__step-desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-measure__secondary {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-measure__secondary a {
	color: var(--ed-color-link);
	font-weight: 600;
}

.ed-measure__secondary a:hover {
	color: var(--ed-color-link-hover);
}

.ed-measure__visual img {
	width: 100%;
	height: auto;
	display: block;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-lg);
}

.ed-measure__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	margin-top: var(--ed-space-md);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	text-decoration: none;
}

.ed-measure__cta:hover {
	color: var(--ed-color-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ed-measure__cta:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-measure__cta svg {
	flex: none;
	width: 14px;
	height: 11px;
}

/* Diagram lightbox trigger */

.ed-measure__visual-trigger {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: zoom-in;
}

.ed-measure__visual-trigger:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
	border-radius: var(--ed-radius-lg);
}

.ed-measure__visual-trigger img {
	width: 100%;
	height: auto;
	display: block;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-lg);
}

.ed-measure__zoom-icon {
	position: absolute;
	right: var(--ed-space-sm);
	bottom: var(--ed-space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(16, 19, 20, 0.72);
	color: #ffffff;
	border-radius: var(--ed-radius-full);
	pointer-events: none;
}

.ed-measure__zoom-icon svg {
	width: 18px;
	height: 18px;
}

/*
 * Lightbox dialog — custom, no external library. Body scroll lock mirrors
 * body.ed-drawer-open in header.css; all JS focus calls use
 * { preventScroll: true } (see assets/js/lightbox.js) so opening and
 * closing never moves the page's scroll position.
 */

body.ed-lightbox-open {
	overflow: hidden;
}

.ed-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ed-space-lg);
}

.ed-lightbox[hidden] {
	display: none;
}

.ed-lightbox__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(16, 19, 20, 0.86);
	border: 0;
	padding: 0;
	cursor: default;
}

.ed-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: inline-flex;
	max-width: min(900px, 92vw);
	max-height: 90vh;
}

.ed-lightbox__img {
	display: block;
	max-width: min(900px, 92vw);
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
	opacity: 1;
	transition: opacity var(--ed-transition-fast);
}

/*
 * Applied by lightbox.js the instant a new photo is requested, before the
 * still-visible previous photo can render even one frame — removed only
 * once the new image has fully decoded off-DOM. See showImage() in
 * lightbox.js.
 */
.ed-lightbox__img.is-loading {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ed-lightbox__img {
		transition: none;
	}
}

.ed-lightbox__close {
	position: absolute;
	top: var(--ed-space-sm);
	right: var(--ed-space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(16, 19, 20, 0.72);
	color: #ffffff;
	border: 0;
	border-radius: var(--ed-radius-full);
	cursor: pointer;
}

.ed-lightbox__close:hover {
	background-color: rgba(16, 19, 20, 0.9);
}

.ed-lightbox__close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.ed-lightbox__close svg {
	width: 16px;
	height: 16px;
}

/* -------------------------------------------------------------------- */
/* 7. Compra en 3 pasos                                                   */
/* -------------------------------------------------------------------- */

.ed-steps__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-lg);
	padding: var(--ed-space-xl);
	background-color: var(--ed-color-surface);
	border-radius: var(--ed-radius-lg);
}

@media (min-width: 768px) {
	.ed-steps__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ed-steps__item {
		padding-inline-end: var(--ed-space-lg);
		border-inline-end: 1px solid var(--ed-color-border);
	}

	.ed-steps__item:last-child {
		padding-inline-end: 0;
		border-inline-end: 0;
	}
}

.ed-steps__title {
	margin: var(--ed-space-2xs) 0 var(--ed-space-3xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
	font-weight: 500;
}

.ed-steps__desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* 8. Directo de fábrica                                                  */
/* -------------------------------------------------------------------- */

/* Shared .ed-feature-icon (base.css) with Lucide package, centred above the eyebrow. */
.ed-factory__icon {
	display: flex;
	margin: 0 auto var(--ed-space-md);
}

.ed-factory__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-lg);
	align-items: start;
	margin-top: var(--ed-space-xl);
}

/* Same core flow-layout blockGap margin as .ed-samples__grid above — was
   pushing .ed-factory__diagrams 24px lower than .ed-factory__content. */
.ed-factory__grid > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.ed-factory__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ed-space-2xl);
	}
}

.ed-factory__content p {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-md);
}

.ed-factory__content p:last-child {
	margin-bottom: 0;
}

.ed-factory__diagrams {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-md);
}

.ed-factory__diagram {
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
	text-align: center;
}

.ed-factory__diagram img {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin-inline: auto;
}

.ed-factory__diagram-label {
	margin: var(--ed-space-sm) 0 0;
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-factory__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ed-space-lg);
	margin: var(--ed-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.ed-factory__badges li {
	display: flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	color: var(--ed-color-text);
	font-weight: 500;
	font-size: var(--ed-font-size-sm);
}

/* Benefit ticks: Lucide circle-check (outline). */
.ed-factory__badges .ed-icon {
	width: 18px;
	height: 18px;
	color: var(--ed-color-link);
}

/* -------------------------------------------------------------------- */
/* 9. FAQ                                                                 */
/* -------------------------------------------------------------------- */

/*
 * Wider than the shared .ed-container default (1200px) would suggest by
 * default is fine, but the fix/ reference video wants a noticeably wide,
 * left-aligned accordion — scoped to this section only, not a shared
 * container modifier, since no other page needs this width.
 */
@media (min-width: 1024px) {
	.ed-faq .ed-container {
		max-width: 1100px;
	}
}

/* Left-aligned header (eyebrow + heading), not the shared centered
   .ed-section__header.ed-text-center treatment — matches the reference
   composition. Wider than the shared 640px cap so "Preguntas frecuentes"
   isn't wrapping short over a much wider accordion below it. */
.ed-faq .ed-section__header {
	max-width: 100%;
}

@media (min-width: 640px) {
	.ed-faq .ed-section__header {
		max-width: 46ch;
	}
}

.ed-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-sm);
}

/*
 * Button+panel (not native <details>) so it can enforce single-open-at-a-
 * time and expose aria-expanded/aria-controls — see assets/js/home-faq.js.
 * Padding lives on the button itself (not the item) so the open teal tint
 * paints edge-to-edge across the full row; overflow: hidden keeps that
 * full-bleed background clipped to the card's rounded corners. Independent
 * of .ed-guide-faq__* (Cómo medir) — same pattern, no shared file.
 */
.ed-faq__item {
	padding: 0;
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
	overflow: hidden;
}

.ed-faq__heading {
	margin: 0;
}

.ed-faq__question {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-space-sm);
	min-height: 56px;
	padding: var(--ed-space-sm) var(--ed-space-lg);
	background: none;
	border: 0;
	color: var(--ed-color-heading);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-base);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ed-transition-fast), color var(--ed-transition-fast);
}

.ed-faq__question:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: -2px;
}

.ed-faq__question-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ed-faq__chevron {
	flex: none;
	width: 12px;
	height: 8px;
	color: var(--ed-color-muted);
	transition: transform var(--ed-transition-fast);
}

/*
 * Open state — very light turquoise header, teal question text, chevron
 * flips to point up and turns teal too. Same rgba(0, 183, 183, ...) tint
 * formula and AA-safe --ed-color-link text swap already used for this
 * exact pattern elsewhere (guide-page.css).
 */
.ed-faq__item.is-open .ed-faq__question {
	background-color: rgba(0, 183, 183, 0.08);
	color: var(--ed-color-link);
}

.ed-faq__item.is-open .ed-faq__chevron {
	color: var(--ed-color-link);
	transform: rotate(180deg);
}

/*
 * Height animation via grid-template-rows (0fr -> 1fr) instead of measuring
 * scrollHeight in JS: no layout thrash, no scroll jump, and it degrades to
 * an instant snap under prefers-reduced-motion for free by just dropping
 * the transition.
 */
.ed-faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--ed-transition-base);
}

.ed-faq__item.is-open .ed-faq__answer-wrap {
	grid-template-rows: 1fr;
}

.ed-faq__answer {
	min-height: 0;
	overflow: hidden;
}

.ed-faq__answer p {
	margin: 0;
	padding: 0 var(--ed-space-lg) var(--ed-space-md);
	color: var(--ed-color-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ed-faq__chevron {
		transition: none;
	}

	.ed-faq__answer-wrap {
		transition: none;
	}
}

/* -------------------------------------------------------------------- */
/* 10. Final CTA                                                          */
/* -------------------------------------------------------------------- */

.ed-final-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	background-color: var(--ed-color-background);
}

.ed-final-cta__watermark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--ed-color-heading);
	opacity: 0.04;
	font-family: var(--ed-font-heading);
	font-size: clamp(4rem, 3rem + 8vw, 10rem);
	font-weight: 500;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.ed-final-cta__inner {
	position: relative;
	max-width: 640px;
}

/*
 * No color override here: inherits the AA-safe --ed-color-link from the
 * base .ed-eyebrow rule (base.css). Raw --ed-color-primary (~2.48:1 on
 * light backgrounds) was only safe in this spot while the section had a
 * dark background (~7.2:1) — see .ed-hero__title-accent's comment for the
 * same trade-off. Now that this section is light, it needs the same
 * AA-safe treatment every other eyebrow on this page already uses.
 */

.ed-final-cta__title {
	margin: 0 0 var(--ed-space-sm);
	color: var(--ed-color-heading);
}

.ed-final-cta__desc {
	margin: 0 0 var(--ed-space-lg);
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-md);
}

.ed-final-cta .wp-block-buttons {
	justify-content: center;
}