/**
 * Measurement guide page ("Cómo medir → <producto>") — shared component
 * library for Estores enrollables, Cortinas verticales and Paneles
 * japoneses. Enqueued on all three pages (is_page('estores-enrollables') ||
 * is_page('cortinas-verticales') || is_page('paneles-japoneses')) per
 * project-docs/08-performance-rules.md.
 *
 * Originally split into a base file (this one) plus a page-specific
 * estores-enrollables.css for the pieces that page's redesign introduced
 * (decision cards, precision tip, case tags, warning checklist, bordered
 * hero/CTA cards, the button+panel FAQ accordion). Once Cortinas verticales
 * and Paneles japoneses were rebuilt to the same approved design, every one
 * of those pieces became shared shape, not enrollables-only — so they were
 * merged in here and the now-empty page-specific file was removed, per the
 * project's "no duplicated CSS across files" rule. Nothing in this merge
 * changed a single selector or value, so Estores enrollables renders
 * pixel-identical to before.
 *
 * Truly global primitives (.ed-eyebrow, .ed-section, .ed-section--alt,
 * .ed-section__header/__title/__lead, .ed-container, .ed-button,
 * .ed-icon-check) are reused as-is from base.css/utilities.css/buttons.css
 * — see project-docs/05-components.md.
 */

/* -------------------------------------------------------------------- */
/* Print-only brand header                                                */
/* -------------------------------------------------------------------- */

/*
 * Markup lives once near the top of <main> in every guide template,
 * invisible on screen — assets/css/print/guide-print.css (media="print"
 * only) is what actually reveals and styles it when the page is printed
 * or exported to PDF. See bin/generate-guide-pdfs.js.
 */
.ed-guide-print-header {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Breadcrumb                                                             */
/* -------------------------------------------------------------------- */

.ed-guide-breadcrumb {
	margin-bottom: var(--ed-space-lg);
}

.ed-guide-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ed-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-guide-breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--ed-space-3xs);
}

.ed-guide-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-inline-start: var(--ed-space-3xs);
	color: var(--ed-color-border);
}

.ed-guide-breadcrumb a {
	color: var(--ed-color-muted);
	text-decoration: none;
}

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

.ed-guide-breadcrumb li[aria-current="page"] {
	color: var(--ed-color-text);
	font-weight: 500;
}

/* -------------------------------------------------------------------- */
/* Hero — bordered card, centered                                         */
/* -------------------------------------------------------------------- */

.ed-guide-hero {
	padding-bottom: var(--ed-space-lg);
}

/*
 * width: min(100% - 2rem, ...) rather than plain max-width: the card has a
 * visible border, so on mobile (where max-width: 1200px never binds) it
 * still needs an explicit outer inset — max-width alone only produces that
 * gap via auto-margin centering once the viewport exceeds the cap.
 */
.ed-guide-hero__inner {
	width: min(100% - 2rem, var(--ed-container-width));
	max-width: none;
	margin-inline: auto;
	padding: var(--ed-space-lg) var(--ed-space-md);
	background-color: var(--ed-color-surface-alt);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-lg);
	text-align: center;
}

@media (min-width: 640px) {
	.ed-guide-hero__inner {
		padding: var(--ed-space-2xl) var(--ed-space-xl);
		border-radius: 20px;
	}
}

/* H1 keeps a reasonable measure (~2 lines) even though the card itself is
   much wider than a plain text column. */
.ed-guide-hero__title {
	max-width: 680px;
	margin: 0 auto var(--ed-space-md);
}

.ed-guide-hero__desc {
	margin: 0 auto var(--ed-space-lg);
	max-width: 860px;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-md);
}

.ed-guide-hero .wp-block-buttons {
	justify-content: center;
	margin-bottom: var(--ed-space-lg);
}

.ed-guide-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ed-space-xs) var(--ed-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
}

.ed-guide-hero__trust li {
	display: flex;
	align-items: center;
	gap: var(--ed-space-3xs);
}

.ed-guide-hero__trust .ed-icon-check {
	width: 14px;
	height: 14px;
	color: var(--ed-color-link);
}

/* -------------------------------------------------------------------- */
/* Sticky internal navigation                                             */
/* -------------------------------------------------------------------- */

.ed-guide-nav {
	position: sticky;
	/*
	 * Sticks directly below the smart header's *current* visible height.
	 * `--ed-header-stack-offset` (published by header-scroll.js on every
	 * hide/show, resize, orientation change and webfont swap) is the single
	 * source of truth: it already folds in the WordPress admin-bar height,
	 * so there is no separate `body.admin-bar` rule. Header hidden -> the
	 * offset collapses to just the admin bar (0 for a logged-out visitor)
	 * and the nav rests flush at the very top; header revealed -> the nav
	 * slides down with it. Transitioning `top` (a real value change only on
	 * hide/show, never during plain scrolling) keeps the nav visually in
	 * lockstep with the header's own transform transition — and, unlike the
	 * previous `transform: translateY(var(...))` push, it can't feed its
	 * own offset back into a "has it stuck yet?" measurement, which is what
	 * made the nav flicker in/out on every scroll event.
	 */
	top: var(--ed-header-stack-offset, 0px);
	z-index: 20;
	background-color: var(--ed-color-background);
	border-bottom: 1px solid var(--ed-color-border);
	transition: top var(--ed-transition-base);
}

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

.ed-guide-nav__inner {
	display: flex;
	gap: var(--ed-space-lg);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ed-guide-nav__inner::-webkit-scrollbar {
	display: none;
}

.ed-guide-nav__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding-block: var(--ed-space-sm);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.ed-guide-nav__link:hover {
	color: var(--ed-color-heading);
}

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

.ed-guide-nav__link.is-active {
	color: var(--ed-color-link);
	/*
	 * --ed-color-link, not raw --ed-color-primary: same AA-safe swap the
	 * rest of the system already makes for a UI state indicator (focus
	 * ring, .ed-eyebrow, .ed-step-number) — raw primary measures ~2.48:1
	 * on white, failing the 3:1 non-text-contrast floor.
	 */
	border-bottom-color: var(--ed-color-link);
}

/* -------------------------------------------------------------------- */
/* PDF download block                                                     */
/* -------------------------------------------------------------------- */

.ed-guide-pdf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-space-md);
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
}

.ed-guide-pdf__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ed-color-link);
	background-color: var(--ed-color-surface);
	border-radius: var(--ed-radius-full);
}

.ed-guide-pdf__icon svg {
	width: 20px;
	height: 20px;
}

.ed-guide-pdf__text {
	flex: 1 1 320px;
	display: flex;
	align-items: center;
	gap: var(--ed-space-md);
}

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

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

/* -------------------------------------------------------------------- */
/* Intro (Detalles / Antes de empezar)                                    */
/* -------------------------------------------------------------------- */

.ed-guide-intro__body {
	max-width: 72ch;
}

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

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

/* -------------------------------------------------------------------- */
/* Tools list ("Qué vas a necesitar")                                     */
/* -------------------------------------------------------------------- */

.ed-t2-tools {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
	margin-bottom: var(--ed-space-xl);
}

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

.ed-t2-tools__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-sm);
	padding: var(--ed-space-md);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

/* .ed-t2-tools__icon: circle, size and glyph come from the shared .ed-feature-icon (base.css). */

.ed-t2-tools__text {
	margin: 0;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* "Elige tu instalación" — decision cards (pared / techo, before medir)  */
/* -------------------------------------------------------------------- */

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

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

/*
 * Three-option variant (e.g. Noche y Día: techo / hueco / pared, instead of
 * the usual pared/techo pair) — same card shell, just a wider desktop
 * breakpoint so 3 columns don't feel cramped before 900px.
 */
@media (min-width: 900px) {
	.ed-t2-decision--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ed-t2-decision-card {
	display: flex;
	flex-direction: column;
	padding: var(--ed-space-xl);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: 20px;
	transition: border-color var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
}

.ed-t2-decision-card:hover {
	border-color: var(--ed-color-primary);
	box-shadow: var(--ed-shadow-sm);
}

/* Circle, size and glyph come from the shared .ed-feature-icon (base.css). */
.ed-t2-decision-card__icon {
	margin-bottom: var(--ed-space-md);
}

.ed-t2-decision-card__title {
	margin: 0 0 var(--ed-space-sm);
}

.ed-t2-decision-card__desc {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-base);
}

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

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

.ed-t2-decision-card__link svg {
	width: 12px;
	height: 12px;
	transition: transform var(--ed-transition-fast);
}

.ed-t2-decision-card__link:hover svg {
	transform: translateY(2px);
}

/* -------------------------------------------------------------------- */
/* Precision tip — section-level callout (mide en 2-3 puntos)             */
/* -------------------------------------------------------------------- */

.ed-t2-tip {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-sm);
	margin-bottom: var(--ed-space-xl);
	padding: var(--ed-space-md) var(--ed-space-lg);
	background-color: rgba(0, 183, 183, 0.06);
	border-left: 4px solid var(--ed-color-primary);
	border-radius: var(--ed-radius-md);
}

.ed-t2-tip__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 0.1em;
	color: var(--ed-color-primary);
}

.ed-t2-tip__icon svg {
	width: 100%;
	height: 100%;
}

.ed-t2-tip p {
	margin: 0;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

.ed-t2-tip strong {
	color: var(--ed-color-heading);
}

/* -------------------------------------------------------------------- */
/* Small tag above the Alto case titles ("Si elegiste pared/techo")       */
/* -------------------------------------------------------------------- */

.ed-t2-case-tag {
	display: inline-block;
	margin-bottom: var(--ed-space-2xs);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- */
/* Case cards (Ancho / Alto) — bordered card, 50/50 columns on desktop    */
/* -------------------------------------------------------------------- */

/*
 * Each case is its own bordered white card rather than a stacked,
 * divider-only row, so image + text read as one contained unit. 20px
 * radius/border don't match any existing --ed-radius-* token (sm 4 / md 8
 * / lg 16 / full 999) — one of the rare literal values in the codebase,
 * per this redesign's explicit 18-22px spec.
 */
.ed-guide-case {
	display: grid;
	grid-template-columns: 1fr;
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: 20px;
	overflow: hidden;
}

.ed-guide-case + .ed-guide-case {
	margin-top: var(--ed-space-md);
}

@media (min-width: 768px) {
	.ed-guide-case:not(.ed-guide-case--stacked) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.ed-guide-case__content {
	padding: var(--ed-space-xl);
}

.ed-guide-case__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ed-space-md);
	background-color: var(--ed-color-surface-alt);
	border-top: 1px solid var(--ed-color-border);
}

@media (min-width: 768px) {
	.ed-guide-case:not(.ed-guide-case--stacked) .ed-guide-case__media {
		border-top: 0;
		border-left: 1px solid var(--ed-color-border);
	}
}

/*
 * Contained but prominent: fills ~84% of the media pane's track width at
 * the card widths this grid actually produces (matching the ratio already
 * used by the Observación callout and Obstáculos diagrams elsewhere on
 * this page, so every technical diagram reads at the same visual scale)
 * without ever touching the card edge or requiring the lightbox just to
 * read the diagram. Fixed at design review: the previous 85%-of-an-
 * already-48px-padded-box math only reached ~68% of the actual column,
 * which read as small with excess grey framing around it.
 */
.ed-guide-case__media .ed-guide-diagram {
	width: 92%;
	max-width: 560px;
	background-color: transparent;
}

.ed-guide-case__number {
	display: block;
	margin-bottom: var(--ed-space-2xs);
	color: var(--ed-color-link);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-base);
	font-weight: 700;
	line-height: 1;
}

.ed-guide-case__title {
	margin: 0 0 var(--ed-space-sm);
}

.ed-guide-case__desc {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-base);
}

.ed-guide-case__desc:last-of-type {
	margin-bottom: 0;
}

/*
 * Formula pill — light aqua fill (same rgba(0,183,183,...) derivation as
 * the Observación callout below) with a saturated left accent bar.
 * --ed-radius-md (8px) matches the spec's 7-8px request exactly.
 */
.ed-guide-case__formula {
	display: block;
	margin-top: var(--ed-space-md);
	padding: var(--ed-space-sm) var(--ed-space-md);
	background-color: rgba(0, 183, 183, 0.08);
	border-left: 4px solid var(--ed-color-primary);
	border-radius: var(--ed-radius-md);
	color: var(--ed-color-link-hover);
	font-family: var(--ed-font-body);
	font-weight: 600;
	font-size: var(--ed-font-size-md);
}

/*
 * Inline tip/note inside a case card (Verticales/Japoneses Ancho cases) —
 * a small "info" callout under the formula pill, e.g. "Descuenta
 * aproximadamente 0,5 cm por cada lado...". Distinct from the full-width
 * .ed-guide-callout below: this one nests inside a single case card's
 * text column, not a standalone section-level block.
 */
.ed-guide-case__note {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-sm);
	margin-top: var(--ed-space-sm);
	padding: var(--ed-space-sm) var(--ed-space-md);
	background-color: rgba(0, 183, 183, 0.06);
	border-radius: var(--ed-radius-md);
}

.ed-guide-case__note-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 0.1em;
	color: var(--ed-color-primary);
}

.ed-guide-case__note-icon svg {
	width: 100%;
	height: 100%;
}

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

/*
 * Mobile: the 92%-of-a-padded-box sizing above is right for desktop's wide
 * columns, but on a narrow card the remaining 8% margin plus padding still
 * add up to a noticeable frame. Below 768px the image fills nearly the
 * full card width instead, with just enough side padding (inherited from
 * the base rule above) to keep it off the card border — same
 * object-fit: contain, same no-crop guarantee.
 */
@media (max-width: 767px) {
	.ed-guide-case__media .ed-guide-diagram,
	.ed-guide-callout .ed-guide-diagram {
		width: 100%;
		max-width: none;
	}

	.ed-guide-callout {
		padding: var(--ed-space-lg);
	}
}

/*
 * Alto section: two case cards side by side on desktop. Unlike the Ancho
 * cases, each Alto card keeps a single-column internal layout (number →
 * title → desc → formula → divider → image, always stacked) at every
 * width — .ed-guide-case--stacked opts a card out of the 50/50 desktop
 * split above so the pair sits side-by-side as two matching columns
 * instead of each card splitting into text|image internally.
 */
.ed-guide-case-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
}

/*
 * Equal-height fix: each card's own content height used to be intrinsic
 * (sized by its own text), so a longer description in one card pushed
 * its divider/image lower than the other card's — the two dividers never
 * lined up. grid-template-rows: subgrid lets each card's content/media
 * rows inherit the PARENT grid's row tracks instead of sizing
 * independently, so row 1 (content) becomes the height of the taller
 * card's content on both cards, and row 2 (media) likewise — one level
 * divider line across the pair. .ed-guide-case__content becomes a flex
 * column here (stacked cards only) so the formula pill anchors to the
 * bottom of that now-equal-height row via margin-top: auto, rather than
 * sitting wherever the text happened to end.
 */
@media (min-width: 768px) {
	.ed-guide-case-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto;
	}

	.ed-guide-case-grid .ed-guide-case {
		margin-top: 0;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
	}

	.ed-guide-case--stacked .ed-guide-case__content {
		display: flex;
		flex-direction: column;
	}

	.ed-guide-case--stacked .ed-guide-case__formula {
		margin-top: auto;
	}
}

/* -------------------------------------------------------------------- */
/* Diagram trigger (lightbox-openable technical schemes)                  */
/* -------------------------------------------------------------------- */

.ed-guide-diagram {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--ed-color-surface-alt);
	border: 0;
	border-radius: var(--ed-radius-lg);
	cursor: zoom-in;
	overflow: hidden;
}

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

.ed-guide-diagram img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ed-guide-diagram__zoom {
	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-guide-diagram__zoom svg {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------- */
/* Special case — cajón de persiana                                       */
/* -------------------------------------------------------------------- */

/*
 * Shell (border/radius/columns/padding/divider) comes entirely from
 * .ed-guide-case — this block reuses that exact card treatment (same
 * markup: .ed-guide-case.ed-guide-special > .ed-guide-case__content +
 * .ed-guide-case__media) so only the badge label needs its own rule.
 */
.ed-guide-special {
	margin-top: var(--ed-space-xl);
}

.ed-guide-special__badge {
	display: inline-block;
	margin-bottom: var(--ed-space-sm);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- */
/* Observación importante — light aqua callout                            */
/* -------------------------------------------------------------------- */

/*
 * No dedicated "light aqua" token exists in the design system yet — this
 * derives one from --ed-color-primary at low opacity (same technique
 * already used for the Home final-CTA watermark and the focus ring). One
 * single-tone container (no separate white card around the diagram, no
 * outer border) with a saturated left accent bar.
 */
.ed-guide-callout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-lg);
	align-items: center;
	margin-top: var(--ed-space-xl);
	padding: var(--ed-space-xl);
	background-color: rgba(0, 183, 183, 0.06);
	border-left: 5px solid var(--ed-color-primary);
	border-radius: 20px;
}

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

	.ed-guide-callout--media-right {
		grid-template-areas: "text media";
	}

	.ed-guide-callout--media-right .ed-guide-callout__text {
		grid-area: text;
	}

	.ed-guide-callout--media-right .ed-guide-diagram {
		grid-area: media;
	}
}

.ed-guide-callout__title {
	margin: 0 0 var(--ed-space-sm);
}

.ed-guide-callout__text {
	margin: 0;
	color: var(--ed-color-text);
}

.ed-guide-callout .ed-guide-diagram {
	width: 84%;
	max-width: 460px;
	margin-inline: auto;
	background-color: transparent;
}

/* -------------------------------------------------------------------- */
/* Obstáculos                                                             */
/* -------------------------------------------------------------------- */

.ed-guide-obstacles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-lg);
	align-items: center;
}

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

.ed-guide-obstacles__badge {
	display: inline-block;
	margin-bottom: var(--ed-space-sm);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

.ed-guide-obstacles__title {
	margin: 0 0 var(--ed-space-sm);
}

.ed-guide-obstacles__text {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
}

.ed-guide-obstacles__text--label {
	margin-bottom: var(--ed-space-sm);
	color: var(--ed-color-heading);
	font-weight: 600;
}

.ed-guide-obstacles__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
}

.ed-guide-obstacles__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-2xs);
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

.ed-guide-obstacles__list .ed-icon-check {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.15em;
	color: var(--ed-color-link);
}

/* -------------------------------------------------------------------- */
/* Resumen / checklist                                                    */
/* -------------------------------------------------------------------- */

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

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

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

	/*
	 * Verticales/Japoneses Resumen has 8 tips (vs. Enrollables' 6) — 4
	 * columns × 2 rows reads better than 3×3 with two empty slots.
	 */
	.ed-guide-checklist--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ed-guide-checklist__item {
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-guide-checklist__item--warning {
	border-left: 3px solid var(--ed-color-warning);
}

.ed-guide-checklist__item--warning .ed-guide-checklist__icon {
	color: var(--ed-color-warning);
	background-color: rgba(201, 122, 26, 0.1);
}

/*
 * Circle, size and glyph come from the shared .ed-feature-icon (base.css);
 * --warning items keep their amber state colours (rule above, higher specificity).
 */
.ed-guide-checklist__icon {
	margin-bottom: var(--ed-space-sm);
}

.ed-guide-checklist__text {
	margin: 0;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* FAQ accordion — button+panel, single-open-at-a-time                    */
/* -------------------------------------------------------------------- */

/*
 * Button+panel (not native <details>) so it can enforce single-open-at-a-
 * time and expose aria-expanded/aria-controls — see the shared accordion
 * behavior in guide-page.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.
 */
.ed-guide-faq {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-sm);
}

.ed-guide-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-guide-faq__heading {
	margin: 0;
}

.ed-guide-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-guide-faq__question:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: -2px;
}

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

.ed-guide-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 already used for the formula pill / precision tip, same
 * AA-safe --ed-color-link text swap used everywhere else instead of raw
 * --ed-color-primary.
 */
.ed-guide-faq__item.is-open .ed-guide-faq__question {
	background-color: rgba(0, 183, 183, 0.08);
	color: var(--ed-color-link);
}

.ed-guide-faq__item.is-open .ed-guide-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-guide-faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--ed-transition-base);
}

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

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

.ed-guide-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-guide-faq__chevron {
		transition: none;
	}

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

/* -------------------------------------------------------------------- */
/* Final CTA — bordered card, rhymes with the hero card                   */
/* -------------------------------------------------------------------- */

.ed-guide-cta {
	text-align: center;
}

.ed-guide-cta__inner {
	width: min(100% - 2rem, var(--ed-container-width));
	max-width: none;
	margin-inline: auto;
	padding: var(--ed-space-lg) var(--ed-space-md);
	background-color: var(--ed-color-surface-alt);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-lg);
}

@media (min-width: 640px) {
	.ed-guide-cta__inner {
		padding: var(--ed-space-2xl) var(--ed-space-xl);
		border-radius: 20px;
	}
}

.ed-guide-cta__title,
.ed-guide-cta__desc {
	max-width: 620px;
	margin-inline: auto;
}

.ed-guide-cta__title {
	margin-bottom: var(--ed-space-sm);
}

.ed-guide-cta__desc {
	margin-bottom: var(--ed-space-lg);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-md);
}

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

@media (max-width: 480px) {
	.ed-guide-cta .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.ed-guide-cta .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* -------------------------------------------------------------------- */
/* Lightbox (multi-trigger, single shared dialog)                         */
/* -------------------------------------------------------------------- */

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 (or Cara A/Cara B side)
 * is requested, before the still-visible previous photo can render even
 * one frame — removed only once the new image has fully decoded off-DOM.
 * This is what makes the fade-IN of the new photo, never a fade away
 * from stale src content still sitting in this same reused <img>. See
 * showImage() in lightbox.js for the load/decode/reveal sequence.
 */
.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: 44px;
	height: 44px;
	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;
}

/* The Cara A / Cara B toggle of this lightbox lives in components/lightbox-sides.css. */

/* -------------------------------------------------------------------- */
/* Scroll offset for sticky-nav anchor targets                            */
/* -------------------------------------------------------------------- */

/*
 * 64px = .ed-guide-nav's own height. --ed-header-stack-offset (published
 * by header-scroll.js on every hide/show, see that file) adds the global
 * header's current on-screen height plus the admin-bar height on top of
 * that — the same var .ed-guide-nav uses for its sticky `top` above, so an
 * anchored section always lands exactly clear of both the header and the
 * sticky nav.
 */
#detalles,
#antes-de-empezar,
#ancho,
#alto,
#obstaculos,
#instalacion,
#resumen,
#dudas-frecuentes,
/* Alto sub-anchors, linked directly from the "Elige tu instalación"
   decision cards above — same offset as the section anchors themselves. */
#alto-pared,
#alto-techo {
	scroll-margin-top: calc(64px + var(--ed-space-lg) + var(--ed-header-stack-offset, 0px));
}