/**
 * Shared section styles: Experiencia / Beneficios grid.
 *
 * Heading + photo grid + CTA + tagline. Title uses the same two-tone pattern as
 * Planes, with a quieter subtitle under it (same treatment as
 * .qx-planes__subtitle). Each tile is a photo, smaller than a full grid column,
 * with a plain white caption strip underneath (dark text — the yellow-on-white
 * contrast DESIGN.md forbids never comes up here), and a quiet gray tagline
 * closes the section.
 *
 * Lived in pages/home/style.css until the Franquicias page needed the exact
 * same block ("Emprendé con la fuerza de la marca Qivox"). Moved here —
 * verbatim, no visual change — so both pages render one stylesheet instead of
 * two copies that can drift apart.
 *
 * Markup: template-parts/section-experiencia.php
 * Enqueued by: qivox_enqueue_section_style( 'experiencia' ) from the page's
 * thin entry point, before the page stylesheet so page CSS can still override.
 *
 * Only design tokens from assets/css/tokens.css — no hardcoded colours, font
 * sizes, radii or shadows. See DESIGN.md.
 *
 * Note: the vertical rhythm around this section is NOT set here. It comes from
 * the host page's `> :where(section)` rule (.qx-home, .qx-franquicias), so each
 * page keeps control of its own spacing.
 */

/* The off-white background came with the sedes copy from the removed teaser:
   it keeps this block reading as its own between white Planes above and
   yellow App Mobile below. */
.qx-experiencia {
	background: var(--qx-bg-alt);
}

.qx-experiencia__header {
	max-width: var(--qx-container-narrow);
	margin-inline: auto;
	margin-bottom: var(--qx-space-8);
	text-align: center;
}

.qx-experiencia__title {
	margin: 0 0 var(--qx-space-3);
	font-size: calc(var(--qx-fs-h2) * 0.82);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

.qx-experiencia__title-accent {
	color: var(--qx-yellow);
}

.qx-experiencia__subtitle {
	margin: 0;
	font-size: var(--qx-fs-lead);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text-muted);
}

.qx-experiencia__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qx-space-4);
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: var(--qx-space-8);
}

@media (min-width: 480px) {
	.qx-experiencia__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.qx-experiencia__grid {
		max-width: 960px;
		grid-template-columns: repeat(3, 1fr);
	}
}

.qx-experiencia__tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--qx-bg);
	border: 1px solid var(--qx-border);
	border-radius: var(--qx-radius);
	box-shadow: var(--qx-shadow-sm);
}

.qx-experiencia__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 0;
	overflow: hidden;
}

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

/* Placeholder — self-removes per tile once its file exists in assets/img/. */
.qx-experiencia__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--qx-gray-100);
	color: var(--qx-text-muted);
	font-size: var(--qx-fs-small);
}

.qx-experiencia__caption {
	margin: 0;
	padding: var(--qx-space-3) var(--qx-space-4);
	font-size: var(--qx-fs-small);
	font-weight: var(--qx-fw-medium);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text);
}

.qx-experiencia__cta-row {
	display: flex;
	justify-content: center;
	margin-bottom: var(--qx-space-8);
}

/* Same footprint as .qx-planes__cta: same font-size, and a width that matches
   a plan card's content box (920px grid, 2 cols, qx-space-6 gap, qx-space-6
   horizontal card padding -> ~380px), since this button isn't sitting inside a
   card to size itself against. */
.qx-experiencia__cta {
	width: min(100%, 380px);
	font-size: var(--qx-fs-body);
}

/* Franquicias has no closing tagline; the row above it then carries the
   section's bottom spacing on its own. */
.qx-experiencia__cta-row:last-child {
	margin-bottom: 0;
}

.qx-experiencia__tagline {
	margin: 0;
	text-align: center;
	font-size: var(--qx-fs-body);
	color: var(--qx-text-muted);
}