/*
Theme Name: SEO Camping
Theme URI: https://seocamping.com
Description: Child theme of Twenty Twenty-Five for SEO Camping. Light, modern, sans-serif. Inspired by Linear / Vercel / Stripe.
Author: SEO Camping
Author URI: https://seocamping.com
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seo-camping
*/

:root {
	--brand-forest:      #1f3a2c;
	--brand-forest-dark: #122218;
	--brand-ink:         #0d0d0d;
	--brand-muted:       #5a5f5a;
	--brand-divider:     #e8e8e8;
	--brand-surface:     #fafafa;

	/* Visible focus indicator (a11y). */
	--brand-focus-ring:  0 0 0 3px rgba(31, 58, 44, 0.2);
}

/* Smooth scrolling on anchor jumps */
html { scroll-behavior: smooth; }

/* ============================================================
   Prevent horizontal jitter caused by 100vw breakouts.
   .scs-hero (and similar full-bleed sections) use 100vw, which
   on Windows/Chrome includes the scrollbar gutter and can produce
   a 15-17px horizontal overflow → lateral scroll on every load.
   `overflow-x: clip` contains it without creating a scroll container.
   ============================================================ */
html, body {
	overflow-x: clip;
	max-width: 100%;
}

/* Body baseline. theme.json drives font/colour; this only adds antialiasing & word-wrapping. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv01", "cv11";
}

/* ============================================================
   Eyebrow label (uppercase, letterspaced, muted)
   Apply via .scs-eyebrow class on a paragraph block.
   ============================================================ */
.scs-eyebrow {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-muted);
	margin: 0;
}

/* Subtitle / lead paragraph under H1/H2 — slightly larger, darker for AAA contrast */
.scs-lead {
	font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
	line-height: 1.55;
	font-weight: 400;
	color: #2a2e2a; /* ~10:1 on white, comfortably AA Large + AAA */
	letter-spacing: -0.005em;
}

/* ============================================================
   Buttons
   theme.json sets the primary fill. We add:
   - secondary variant (transparent bg, dark border)
   - focus ring
   - subtle hover lift via colour only (no shadow per brief)
   ============================================================ */
.wp-block-button .wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	font-feature-settings: normal;
}

.wp-block-button .wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: var(--brand-focus-ring);
}

/* Secondary button. Apply class is-style-secondary on the wp:button block. */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: transparent !important;
	color: var(--brand-ink) !important;
	border: 1px solid var(--brand-divider) !important;
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	border-color: var(--brand-ink) !important;
}

/* Ghost CTA link with arrow (used for "Quiero saber más", "Volver", etc.). Apply class .scs-link-arrow on a wp:paragraph that contains an <a>. */
.scs-link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--brand-forest);
	text-decoration: none;
	font-weight: 500;
}
.scs-link-arrow a::after {
	content: "→";
	transition: transform 0.18s ease;
}
.scs-link-arrow a:hover::after {
	transform: translateX(3px);
}

/* ============================================================
   Modality cards (v2 structure)
   <div class="scs-card [is-recommended]">
     <span class="scs-card__badge">Recomendada</span>   ← only on recommended; absolute
     <h3>Title</h3>
     <p>Short description</p>
     <ul class="scs-card__checklist">...</ul>
     <p class="scs-card__note">Tagline</p>
   </div>
   ============================================================ */
.scs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	border: 1px solid var(--brand-divider);
	border-radius: 12px;
	background: #fff;
	height: 100%;
	transition: border-color 0.18s ease;
}

/* Force equal-height columns when they contain a .scs-card so the
   .scs-card__note (margin-top: auto) actually has room to push to the
   bottom. Without this, columns size to their content individually. */
.wp-block-columns:has(.scs-card) {
	align-items: stretch;
}
.wp-block-columns:has(.scs-card) > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.wp-block-columns:has(.scs-card) > .wp-block-column > .scs-card {
	flex: 1 1 auto;
}
.scs-card:hover {
	border-color: var(--brand-ink);
}
.scs-card h3 {
	margin: 0;
	/* font-size inherits from theme.json h3 preset (1.5rem) for cross-section coherence. */
}
.scs-card > p {
	margin: 0;
	color: var(--brand-ink);
}

/* Purpose tag — short forest-coloured line right under the title. Repositions
   each card as "for X" (use case) rather than rung in a tier ladder. */
.scs-card__purpose {
	color: var(--brand-forest) !important;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	/* Pull tight under the title (the .scs-card flex gap is 1rem). */
	margin: -0.625rem 0 0 !important;
}
.scs-card__note {
	color: var(--brand-muted) !important;
	font-size: 0.9375rem;
	margin-top: auto !important;  /* push to bottom of flex column */
	padding-top: 0.5rem;
}

.scs-card.is-recommended {
	border-color: var(--brand-forest);
	border-width: 2px;
	padding: calc(2rem - 1px); /* compensate so heights line up */
}
.scs-card.is-recommended:hover {
	border-color: var(--brand-forest-dark);
}

/* "Recomendada" badge — absolute, breaks out over top edge so it sits half
   inside / half outside the card. Lets all 3 cards keep identical inner
   layout (titles aligned across the row). */
.scs-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--brand-forest);
	padding: 0.45em 0.95em;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

/* Card checklist (✓ items per package) */
.scs-card__checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	color: var(--brand-ink);
}
.scs-card__checklist li {
	position: relative;
	padding-left: 1.6rem;
	line-height: 1.45;
	font-size: 0.9375rem;
}
.scs-card__checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 0.95rem;
	height: 0.95rem;
	background: var(--brand-forest);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Legacy shim — keep .scs-card ul styling working for the old home v1 cards
   that still use plain wp:list inside .scs-card. */
.scs-card ul:not(.scs-card__checklist) {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	color: var(--brand-ink);
}
.scs-card ul:not(.scs-card__checklist) li {
	position: relative;
	padding-left: 1.4rem;
	line-height: 1.5;
}
.scs-card ul:not(.scs-card__checklist) li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--brand-forest);
}

/* Legacy badge (v1 used class .scs-badge inside .scs-card). Keep for v1. */
.scs-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-forest);
	background: rgba(31, 58, 44, 0.08);
	padding: 0.3em 0.7em;
	border-radius: 999px;
	margin: 0;
}

/* ============================================================
   Phase block (01 / 02 / 03 — Diagnóstico / Implementación / Revisión)
   Centered layout with a circular forest-bordered number badge.
   Wrap the wp:columns block in `.scs-phases-grid` to draw a
   horizontal hairline connecting the badges (desktop only).
   ============================================================ */
.scs-phase {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	text-align: center;
	position: relative;
	padding: 0 0.75rem;
}
.scs-phase .scs-phase-num {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--brand-forest);
	color: var(--brand-forest);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0;
	position: relative;
	z-index: 1; /* above the connector line */
}
.scs-phase h3 {
	margin: 0.25rem 0 0;
	/* font-size inherits from theme.json h3 preset (1.5rem). */
}
.scs-phase p:last-child {
	color: #2a2e2a;
	margin: 0;
	max-width: 30ch;
	line-height: 1.55;
}

/* Connector hairline that runs horizontally through the badges of all
   phases. Only visible on desktop (≥768px) — on mobile the phases stack. */
.scs-phases-grid {
	position: relative;
}
@media (min-width: 768px) {
	.scs-phases-grid::before {
		content: "";
		position: absolute;
		top: 17px; /* mid-line of the 36px badge */
		left: 16.66%;
		right: 16.66%;
		height: 1px;
		background: var(--brand-divider);
		z-index: 0;
		pointer-events: none;
	}
}

/* ============================================================
   Dual-tone H2 — wrap a span.scs-h2-accent around the second
   sentence to render it in forest. Used in the Cómo trabajamos
   header.
   ============================================================ */
.scs-h2-accent {
	color: var(--brand-forest);
}

/* Section-level lead paragraph (smaller than .scs-lead, sits between
   H2 and the visual content like a TL;DR). */
.scs-section-lead {
	color: #2a2e2a;
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 56ch;
	margin-inline: auto;
}

/* ============================================================
   Fact strip — horizontal band of 3 label/value cells separated
   by hairline dividers. Used as a TL;DR summary under the phases.
   ============================================================ */
.scs-fact-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--brand-divider);
	border-bottom: 1px solid var(--brand-divider);
	max-width: 920px;
	margin: var(--wp--preset--spacing--50) auto 0;
}
.scs-fact-strip__cell {
	padding: 1.5rem 1.25rem;
	text-align: center;
	border-right: 1px solid var(--brand-divider);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: center;
	justify-content: center;
}
.scs-fact-strip__cell:last-child {
	border-right: none;
}
.scs-fact-strip__label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-muted);
	margin: 0;
}
.scs-fact-strip__value {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--brand-forest);
	margin: 0;
	letter-spacing: -0.005em;
}

/* Mobile: stack cells vertically with horizontal dividers between them. */
@media (max-width: 600px) {
	.scs-fact-strip {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	.scs-fact-strip__cell {
		border-right: none;
		border-bottom: 1px solid var(--brand-divider);
		padding: 1.25rem 1rem;
	}
	.scs-fact-strip__cell:last-child {
		border-bottom: none;
	}
}

/* ============================================================
   Testimonial block — large quote, no decorative quote marks,
   no italic, no left rule (style override on core/quote).
   Apply class .scs-testimonial on the wp:quote block.
   ============================================================ */
.scs-testimonial {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	border: none;
}
.scs-testimonial p {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.4;
	font-weight: 500;
	color: var(--brand-ink);
	letter-spacing: -0.015em;
	margin: 0;
}
.scs-testimonial cite {
	display: block;
	font-style: normal;
	font-size: 0.9375rem;
	color: var(--brand-muted);
	margin-top: 1.5rem;
}

/* ============================================================
   Form placeholder shell (Auditoría page)
   Until Gravity Forms is dropped in, show a clear placeholder.
   ============================================================ */
.scs-form-placeholder {
	border: 1px dashed var(--brand-divider);
	border-radius: 12px;
	padding: 2.5rem 2rem;
	background: #fff;
	color: var(--brand-muted);
	font-size: 0.9375rem;
	text-align: center;
}
.scs-form-placeholder strong {
	display: block;
	color: var(--brand-ink);
	margin-bottom: 0.5rem;
	font-weight: 600;
}
.scs-form-placeholder code {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--brand-divider);
	border-radius: 4px;
	padding: 0.25em 0.5em;
	font-size: 0.875rem;
	color: var(--brand-forest);
	margin-top: 0.5rem;
}

/* ============================================================
   Auditoría page — tighter hero (less air between header and H1)
   ============================================================ */
body.is-contacto .scs-hero {
	min-height: clamp(320px, 42vh, 420px);
	padding-block: var(--wp--preset--spacing--40);
}

/* ============================================================
   Form card visual frame (surface-tinted container) and Gravity
   Forms override styles. Selectors are intentionally specific so
   GF's own inline / theme CSS doesn't beat them.
   ============================================================ */
.scs-form-card {
	background: var(--brand-surface);
	border-radius: 14px;
	padding: clamp(1.75rem, 4vw, 3rem);
	max-width: 760px;
	margin-inline: auto;
}

/* Inputs / selects / textareas — applies inside .scs-form-card OR on the
   /auditoria/ page (defensive: catches the form if it ever lives outside
   the wrapper). */
body.is-contacto .gform_wrapper input[type="text"],
body.is-contacto .gform_wrapper input[type="email"],
body.is-contacto .gform_wrapper input[type="tel"],
body.is-contacto .gform_wrapper input[type="url"],
body.is-contacto .gform_wrapper select,
body.is-contacto .gform_wrapper textarea,
.scs-form-card .gform_wrapper input[type="text"],
.scs-form-card .gform_wrapper input[type="email"],
.scs-form-card .gform_wrapper input[type="tel"],
.scs-form-card .gform_wrapper input[type="url"],
.scs-form-card .gform_wrapper select,
.scs-form-card .gform_wrapper textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	font-size: 1rem;
	line-height: 1.4;
	border: 1px solid var(--brand-divider);
	border-radius: 8px;
	background: #fff;
	color: var(--brand-ink);
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.is-contacto .gform_wrapper input:focus,
body.is-contacto .gform_wrapper select:focus,
body.is-contacto .gform_wrapper textarea:focus,
.scs-form-card .gform_wrapper input:focus,
.scs-form-card .gform_wrapper select:focus,
.scs-form-card .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--brand-forest);
	box-shadow: var(--brand-focus-ring);
}

body.is-contacto .gform_wrapper label,
.scs-form-card .gform_wrapper label {
	font-weight: 500;
	color: var(--brand-ink);
	margin-bottom: 0.4rem;
	display: block;
}
body.is-contacto .gform_wrapper .gfield,
.scs-form-card .gform_wrapper .gfield {
	margin-bottom: 1.25rem;
}

/* Textarea minimum height = ~3 rows by default, expandable. */
body.is-contacto .gform_wrapper textarea,
.scs-form-card .gform_wrapper textarea {
	min-height: 5.4em;
	resize: vertical;
}

/* SUBMIT BUTTON — brand override.
   GF 2.10 with markupVersion 2 outputs <input type="submit" class="gform_button button">.
   We target the class AND the id pattern AND a generic input[type=submit] inside
   gform_wrapper to be bullet-proof. !important is needed because GF injects an
   inline stylesheet at runtime that uses high-specificity selectors with the form id.
*/
body.is-contacto .gform_wrapper .gform_button,
body.is-contacto .gform_wrapper input[type="submit"],
body.is-contacto .gform_wrapper button[type="submit"],
.scs-form-card .gform_wrapper .gform_button,
.scs-form-card .gform_wrapper input[type="submit"],
.scs-form-card .gform_wrapper button[type="submit"] {
	background-color: var(--brand-forest) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 0.95rem 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: inherit;
	width: auto;
}
body.is-contacto .gform_wrapper .gform_button:hover,
body.is-contacto .gform_wrapper input[type="submit"]:hover,
body.is-contacto .gform_wrapper button[type="submit"]:hover,
.scs-form-card .gform_wrapper .gform_button:hover,
.scs-form-card .gform_wrapper input[type="submit"]:hover,
.scs-form-card .gform_wrapper button[type="submit"]:hover {
	background-color: var(--brand-forest-dark) !important;
}
body.is-contacto .gform_wrapper .gform_button:focus-visible,
.scs-form-card .gform_wrapper .gform_button:focus-visible {
	outline: none;
	box-shadow: var(--brand-focus-ring) !important;
}

/* Override GF's "primary color" CSS variable that the block injects via
   --gf-color-primary. This is what colours the focus ring and select arrows
   in GF's modern theme — point it at our forest. */
body.is-contacto .gform_wrapper,
.scs-form-card .gform_wrapper {
	--gf-color-primary: var(--brand-forest);
	--gf-color-primary-rgb: 31, 58, 44;
	--gf-color-primary-contrast: #fff;
	--gf-color-primary-darker: var(--brand-forest-dark);
	--gf-color-primary-lighter: var(--brand-forest);
}

/* Tighten up the form button row spacing */
body.is-contacto .gform_wrapper .gform_footer,
.scs-form-card .gform_wrapper .gform_footer {
	margin-top: 0.5rem !important;
	padding-top: 0 !important;
}

/* Em-dash list (used in "Lo que NO es esta llamada") */
.scs-em-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 600px;
}
.scs-em-list li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--brand-muted);
	line-height: 1.7;
	margin: 0.4rem 0;
	font-size: 1rem;
}
.scs-em-list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--brand-muted);
}

/* ============================================================
   Header — logo, nav, CTA. Defaults are solid white background with
   dark logo and forest CTA. Home page overrides further down.
   ============================================================ */
.wp-block-template-part .wp-block-navigation a {
	font-weight: 500;
	letter-spacing: -0.005em;
}

/* Subtle visual hint on the "FAQ" nav link (which opens an off-canvas panel)
   so it doesn't read identical to anchor-scrolling links like "Cómo
   trabajamos". A small SVG glyph of a side-panel, rendered via mask so it
   inherits the link colour (white over hero, dark on inner pages). */
.wp-block-navigation a[href="#faq-panel"]::after {
	content: "";
	display: inline-block;
	width: 0.78em;
	height: 0.78em;
	margin-left: 0.4em;
	vertical-align: -0.07em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='3' width='13' height='10' rx='1.4' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='9.6' y='3' width='4.9' height='10' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='3' width='13' height='10' rx='1.4' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='9.6' y='3' width='4.9' height='10' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}
.wp-block-navigation a[href="#faq-panel"]:hover::after {
	opacity: 1;
}
/* On the hero where header text is white, keep contrast tight. */
body.has-transparent-header .wp-block-navigation a[href="#faq-panel"]::after {
	opacity: 0.75;
}

/* Custom logo anchor — replaces wp:site-logo so we can have
   light/dark variants swappable per page context. */
.scs-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}
.scs-logo__variant {
	display: block;
	width: 220px;
	height: auto;
	max-width: 100%;
}
.scs-logo--footer img {
	width: 200px;
	height: auto;
	max-width: 100%;
	display: block;
}

/* Default: dark logo visible, light hidden. */
.scs-logo__variant--light { display: none; }

/* On home, the header floats over the hero — swap to white logo
   and white nav text. */
body.has-transparent-header .scs-logo__variant--dark  { display: none; }
body.has-transparent-header .scs-logo__variant--light { display: block; }

/* ============================================================
   Transparent overlay header on the home page only.
   - position: absolute → header stops taking flow space, hero
     sits flush to viewport top with the header floating over.
   - Inner pages keep the solid white header (no override here).
   ============================================================ */
body.has-transparent-header > .wp-site-blocks {
	position: relative;
}
body.has-transparent-header .wp-site-blocks > header.wp-block-template-part,
body.has-transparent-header .wp-site-blocks > .wp-block-template-part:has(> .scs-header) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent;
	border-bottom: none !important;
}
/* Belt-and-braces: any rendering of the inner header group should also
   show transparent on home (template-part wrappers vary across WP). */
body.has-transparent-header .scs-header {
	background: transparent !important;
	border-bottom: none !important;
}
/* Header text on home → white. */
body.has-transparent-header .wp-block-template-part header .wp-block-navigation a {
	color: #fff;
}
body.has-transparent-header .wp-block-template-part header .wp-block-navigation a:hover {
	color: rgba(255, 255, 255, 0.85);
}
/* Mobile-menu open state on home: container becomes solid so menu is readable. */
body.has-transparent-header .wp-block-navigation__responsive-container.has-modal-open {
	background: var(--brand-ink) !important;
}

/* On home, push the hero content down a touch so it isn't cramped under
   the floating header on tall viewports. */
body.has-transparent-header .scs-hero {
	padding-top: calc(var(--wp--preset--spacing--70) + 2rem);
}

/* Mobile: scale logo down so the header row doesn't overflow on phones. */
@media (max-width: 720px) {
	.scs-logo__variant       { width: 160px; }
	.scs-logo--footer img    { width: 170px; }
}
@media (max-width: 480px) {
	.scs-logo__variant       { width: 140px; }
}

/* ============================================================
   Hero with background image — full-bleed even when nested in a
   constrained .entry-content (uses calc breakout pattern).
   ============================================================ */
.scs-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 75vh, 720px);
	padding-block: var(--wp--preset--spacing--70);
	color: #fff;
}
/* Real full-bleed via WP's root-padding-aware alignfull. The wp:html section
   carries the .alignfull class so .has-global-padding > .alignfull negative
   margins kick in automatically — no hand-rolled calc() needed. */
.scs-hero.alignfull {
	margin-left:  calc(var(--wp--style--root--padding-left)  * -1);
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
	max-width: none;
}
.scs-hero,
.scs-hero * { color: #fff; }

.scs-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
}
.scs-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
}

.scs-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Mobile default: full-coverage vertical gradient. Text on narrow
	   viewports doesn't have a "side" — it spans the available width. */
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.50) 0%,
		rgba(0, 0, 0, 0.35) 55%,
		rgba(0, 0, 0, 0.20) 100%
	);
}

/* Desktop: shift to a horizontal gradient that darkens the LEFT side
   (where H1 + subtitle + buttons + microcopy sit, max-width ~44ch
   inside a centered 1180px content) and leaves the RIGHT half clear,
   so the landscape stays visible. WCAG headroom verified:
   - Left edge alpha 0.55 → composite vs white text ≥ ~7:1 even on
     bright photo pixels (passes AA / AAA).
   - Right side alpha 0 → no text overlaps, photo unobscured. */
@media (min-width: 768px) {
	.scs-hero__overlay {
		background: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.40) 25%,
			rgba(0, 0, 0, 0.20) 50%,
			rgba(0, 0, 0, 0) 75%
		);
	}
}

.scs-hero__content {
	position: relative;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: var(--wp--preset--spacing--30);
}
.scs-hero__content > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* Hero typography: bigger, more confident */
.scs-hero h1 {
	color: #fff;
	max-width: 22ch;
	margin: 0;
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.scs-hero .scs-lead {
	color: #fff; /* fully opaque; the dark overlay carries contrast */
	max-width: 44ch;
	margin: 0;
	font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
	line-height: 1.5;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* Eyebrow inside the hero — muted gray would have poor contrast over the
   dark overlay, so we use a high-opacity white. */
.scs-hero .scs-eyebrow {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Microcopy under primary CTA on the hero (e.g. "30 min · sin compromiso") */
.scs-hero__microcopy {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	margin: 0.85rem 0 0;
	letter-spacing: 0.005em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* Hero CTAs */
.scs-hero .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}
.scs-hero .wp-block-button.is-style-secondary .wp-block-button__link {
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	background: transparent !important;
}
.scs-hero .wp-block-button.is-style-secondary .wp-block-button__link:hover {
	border-color: #fff !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

/* Mobile fine-tuning */
@media (max-width: 600px) {
	.scs-hero {
		min-height: 460px;
		padding-block: var(--wp--preset--spacing--60);
	}
	.scs-hero h1 { max-width: 100%; }
	.scs-hero .scs-lead { max-width: 100%; }
}

/* ============================================================
   Inline picture (used inside .scs-split) — distinct from hero media.
   IMPORTANT: must NOT inherit the absolute positioning of .scs-hero__media.
   ============================================================ */
.scs-split__media {
	display: block;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
}
.scs-split__media img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

/* Two-column section ("El problema"): image as illustrative complement,
   not background. */
.scs-split-section .wp-block-columns {
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}
.scs-split-section h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.scs-split-section .scs-lead {
	max-width: 38ch;
}

/* On desktop, reduce the top padding of the first content section after
   the hero. The hero's bottom padding already provides plenty of air. */
@media (min-width: 768px) {
	.scs-split-section {
		padding-top: var(--wp--preset--spacing--40) !important;
	}
}

/* ============================================================
   FAQ accordion — keep the SEO plugin's version readable
   ============================================================ */
.seocamping-faq {
	max-width: 820px;
	margin-inline: auto;
}
.seocamping-faq__item {
	border-bottom: 1px solid var(--brand-divider);
}
.seocamping-faq__q {
	padding: 1rem 0;
	font-weight: 500;
	font-size: 1.0625rem;
}
.seocamping-faq__a {
	padding-bottom: 1.25rem;
	color: var(--brand-muted);
}

/* ============================================================
   Anchor target offset — when scrolling to #metodologia, leave a
   small gap above so the eyebrow + heading aren't tucked under the
   sticky/transparent header.
   ============================================================ */
.scs-anchor-target {
	display: block;
	height: 0;
	scroll-margin-top: 100px;
}
[id="metodologia"] {
	scroll-margin-top: 100px;
}

/* ============================================================
   Off-canvas dialogs (.scs-offcanvas)
   Slides in from the right. Overlay dims the rest of the page.
   Default state: hidden via [hidden] attribute (handled by JS).
   ============================================================ */
.scs-offcanvas[hidden] { display: none; }

.scs-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 1000;
	color: var(--brand-ink);
}
.scs-offcanvas__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0);
	transition: background 0.28s ease;
	cursor: pointer;
}
.scs-offcanvas.is-open .scs-offcanvas__overlay {
	background: rgba(13, 13, 13, 0.55);
}
.scs-offcanvas__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(560px, 100vw);
	background: #fff;
	box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.16, 1);
	display: flex;
	flex-direction: column;
	outline: none;
}
.scs-offcanvas.is-open .scs-offcanvas__panel {
	transform: translateX(0);
}

.scs-offcanvas__header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 2.75rem 2rem 1.75rem;
	border-bottom: 1px solid var(--brand-divider);
	position: relative;
}
.scs-offcanvas__eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-muted);
	margin: 0;
}
.scs-offcanvas__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--brand-ink);
	/* Reserve space at right for the (always-visible) close button. */
	padding-right: 3rem;
}
/* Close button is now a direct child of .scs-offcanvas__panel (not header)
   so it stays pinned to the panel's top-right regardless of any inner-body
   scroll. The panel is `position: absolute`, providing the positioning
   context for this absolute child. */
.scs-offcanvas__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 5;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--brand-divider);
	background: #fff;
	border-radius: 999px;
	color: var(--brand-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.scs-offcanvas__close:hover,
.scs-offcanvas__close:focus-visible {
	border-color: var(--brand-ink);
	outline: none;
}
.scs-offcanvas__close:focus-visible {
	box-shadow: var(--brand-focus-ring);
}

.scs-offcanvas__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.75rem 2rem 2.5rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--brand-ink);
}
.scs-offcanvas__body p {
	margin: 0 0 1rem;
}
.scs-offcanvas__body strong {
	font-weight: 600;
	color: var(--brand-ink);
}

/* Phase blocks inside the methodology panel */
.scs-phase-detail {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--brand-divider);
}
.scs-phase-detail:first-of-type { padding-top: 0.5rem; }
.scs-phase-detail:last-of-type  { border-bottom: none; }
.scs-phase-detail__num {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-forest);
	margin: 0 0 0.25rem;
}
.scs-phase-detail__title {
	margin: 0 0 1rem;
	font-size: 1.375rem;
	color: var(--brand-ink);
}

/* Disclaimer note at the bottom of the methodology panel */
.scs-offcanvas__note {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	background: var(--brand-surface);
	border-left: 3px solid var(--brand-forest);
	border-radius: 4px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--brand-ink);
}

/* Closing CTA at the end of the panel — separated from the disclaimer above
   by a hairline + breathing room. Matches the brand button style of the rest
   of the site (forest fill, 8px radius). */
.scs-offcanvas__cta {
	margin-top: 2.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--brand-divider);
	text-align: center;
}
.scs-offcanvas__cta-title {
	margin: 0 0 1.25rem;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--brand-ink);
	letter-spacing: -0.01em;
}
.scs-offcanvas__cta-button {
	display: inline-block;
	background: var(--brand-forest);
	color: #fff;
	padding: 0.9rem 1.5rem;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0;
	transition: background-color 0.15s ease;
}
.scs-offcanvas__cta-button:hover,
.scs-offcanvas__cta-button:focus-visible {
	background: var(--brand-forest-dark);
	color: #fff;
	outline: none;
}
.scs-offcanvas__cta-button:focus-visible {
	box-shadow: var(--brand-focus-ring);
}
.scs-offcanvas__cta-microcopy {
	margin: 0.85rem 0 0;
	font-size: 0.875rem;
	color: var(--brand-muted);
	letter-spacing: 0.005em;
}

/* FAQ accordion items inside the FAQ panel */
.scs-faq-item {
	border-bottom: 1px solid var(--brand-divider);
}
.scs-faq-item[open] {
	background: var(--brand-surface);
}
.scs-faq-item__q {
	cursor: pointer;
	padding: 1rem 0.5rem 1rem 0;
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--brand-ink);
	list-style: none;
	position: relative;
	padding-right: 2rem;
	transition: color 0.15s ease;
}
.scs-faq-item__q::-webkit-details-marker { display: none; }
.scs-faq-item__q::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--brand-muted);
	transition: transform 0.2s ease;
}
.scs-faq-item[open] .scs-faq-item__q::after {
	content: "−";
}
.scs-faq-item__q:hover { color: var(--brand-forest); }
.scs-faq-item__a {
	padding: 0 0 1.25rem;
	color: var(--brand-ink);
}
.scs-faq-item__a p {
	margin: 0 0 0.75rem;
	color: #2a2e2a;
}
.scs-faq-item__a > *:last-child {
	margin-bottom: 0;
}
.scs-faq-item__a ul {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
	color: #2a2e2a;
}
.scs-faq-item__a ul li {
	margin: 0 0 0.35rem;
}
.scs-faq-item__a ul li:last-child {
	margin-bottom: 0;
}

/* Mobile fine-tuning for off-canvas */
@media (max-width: 600px) {
	.scs-offcanvas__panel { width: 100vw; }
	.scs-offcanvas__header { padding: 2.25rem 1.25rem 1.25rem; }
	.scs-offcanvas__body   { padding: 1.75rem 1.25rem 2rem; }
}

/* When an off-canvas is open, keep the document from scrolling. The JS also
   sets body overflow:hidden, but this prevents iOS rubber-band as well. */
html.scs-offcanvas-open {
	overflow: hidden;
}

/* ============================================================
   404 page
   ============================================================ */
.scs-404 {
	display: flex;
	align-items: center;
}
.scs-404__code {
	letter-spacing: -0.04em;
	opacity: 0.92;
}
.scs-404__ctas {
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ============================================================
   Cloudflare Turnstile (Gravity Forms)
   ============================================================ */
.scs-turnstile {
	margin: 1.25rem 0 1rem;
}
.scs-turnstile .cf-turnstile {
	min-height: 65px;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}