/**
 * components.css — Diego Kaminsky · Escuela de Canto
 *
 * Botones, cards, hero, header, footer, grid de servicios, pilares,
 * talleres, testimonios, FAQ acordeón, formulario, WhatsApp flotante,
 * go-to-top. Microinteracciones CSS puras.
 *
 * Depende de tokens.css y base.css cargados antes.
 * Mobile-first: 375 → 768 → 1024 → 1440.
 * WCAG 2.2 AA. prefers-reduced-motion honrado.
 */

/* =========================================================================
   BOTONES
   ========================================================================= */

/* -------------------------------------------------------------------------
   Botones editoriales — esquinas cuadradas, uppercase, barrido interior
   El texto vive en <span> relativo para quedar por encima del ::before barrido
   ------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.1rem 2.4rem;
	min-height: 44px; /* a11y target */
	min-width: 44px;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: normal; /* permite envolver labels largos en móvil (no overflow) */
	text-align: center;
	max-width: 100%;
	border: 1px solid transparent;
	border-radius: 0; /* editorial: esquinas cuadradas */
	cursor: pointer;
	position: relative;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	transition:
		background-color var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base),
		box-shadow var(--transition-fast);
}

.btn:focus-visible {
	outline: 2px solid var(--color-accent-bright);
	outline-offset: 3px;
}

/* Primary — fondo ink oscuro, barrido a accent dorado */
.btn--primary {
	background-color: var(--color-ink, #2A2218);
	color: #FBEFD0;
	border-color: var(--color-ink, #2A2218);
}

.btn--primary:hover {
	background-color: var(--color-accent, #A8762E);
	color: #241808;
	border-color: var(--color-accent, #A8762E);
	box-shadow: var(--glow-gold);
}

.btn--primary:active {
	box-shadow: none;
}

.btn--primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Secondary — borde ink, barrido a ink con texto claro */
.btn--secondary {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-text);
}

.btn--secondary:hover {
	background-color: var(--color-text);
	color: #FBEFD0;
	border-color: var(--color-text);
}

/* Ghost — solo texto con subrayado barrido */
.btn--ghost {
	background-color: transparent;
	color: var(--color-accent-soft);
	border-color: transparent;
	padding-inline: 0.25rem;
	overflow: visible; /* no recorta el subrayado */
}

.btn--ghost::before {
	display: none; /* ghost no usa barrido de fondo */
}

.btn--ghost::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--gradient-gold);
	transition: width var(--transition-base);
	z-index: 0;
}

.btn--ghost:hover::after {
	width: 100%;
}

/* Tamaños */
.btn--sm {
	padding: 0.6rem 1.4rem;
	font-size: var(--text-xs);
}

.btn--lg {
	padding: 1.3rem 3rem;
	font-size: var(--text-sm);
}

/* WhatsApp button (inline) — verde profundo, contraste AA */
.btn--whatsapp {
	background-color: #0F7A6E;
	color: #fff;
	border-color: #0F7A6E;
}

.btn--whatsapp:hover {
	background-color: #0B5E55;
	color: #fff;
	border-color: #0B5E55;
}

/* Reducción de movimiento: sin barrido → cambio de color directo */
@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}
	.btn--ghost::after {
		transition: none;
	}
}

/* =========================================================================
   HEADER STICKY
   ========================================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background-color: rgba(252, 247, 237, 0.85);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border-bottom: 1px solid var(--color-border);
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

.site-header--scrolled {
	background-color: rgba(252, 247, 237, 0.97);
	border-bottom-color: var(--color-border-gold);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--wide-w);
	margin-inline: auto;
	padding-inline: var(--container-x);
	padding-block: 0.875rem;
}

/* Logo */
.site-header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.site-header__logo a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.site-header__logo img,
.site-header__logo svg {
	height: 36px;
	width: auto;
}

/* Sello real circular (logo del cliente) */
.site-header__seal {
	height: 52px !important;
	width: 52px !important;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--color-border-gold);
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.site-header__seal { height: 44px !important; width: 44px !important; }
}

.site-header__wordmark {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--color-text); /* #2A2218 sobre fondo claro */
	line-height: 1.2;
	white-space: nowrap;
}

/* =========================================================================
   NAVEGACIÓN PRINCIPAL (desktop)
   ========================================================================= */

.site-nav {
	display: none; /* oculto mobile, visible en desktop */
}

@media (min-width: 1024px) {
	.site-nav {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	list-style: none;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0.75rem;
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted); /* #6E6149 sobre fondo claro */
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background-color var(--transition-fast);
	white-space: nowrap;
}

/* Reset del <button> del desplegable para que parezca un enlace de nav */
button.site-nav__link {
	background: transparent;
	border: none;
	cursor: pointer;
	letter-spacing: inherit;
	text-transform: none;
}

.site-nav__link:hover,
.site-nav__item:hover > .site-nav__link {
	color: var(--gold-deep);
	background-color: rgba(168, 118, 46, 0.06);
}

.site-nav__item.current-menu-item > .site-nav__link,
.site-nav__item.current-menu-ancestor > .site-nav__link {
	color: var(--gold-deep);
}

/* Icono chevron en padre de dropdown */
.site-nav__chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.site-nav__item[aria-expanded="true"] .site-nav__chevron,
.site-nav__item:hover .site-nav__chevron {
	transform: rotate(180deg);
}

/* Destacado Curso de Verano */
.site-nav__link--summer {
	color: var(--color-accent);
	position: relative;
}

.site-nav__link--summer::before {
	content: "★";
	font-size: 0.6em;
	vertical-align: super;
	margin-right: 0.2em;
}

/* CTA header — tracking/padding reducidos para no desbordar la barra */
.site-nav__cta {
	margin-left: 0.75rem;
	letter-spacing: 0.1em;
	padding-inline: 1.1rem;
}

/* =========================================================================
   DROPDOWN (Talleres)
   ========================================================================= */

.site-nav__dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	min-width: 220px;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card), 0 16px 48px -12px rgba(58, 40, 10, 0.18);
	list-style: none;
	padding: 0.5rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform-origin: top center;
	transform: translateX(-50%) translateY(-6px) scale(0.97);
	transition:
		opacity var(--transition-fast),
		transform var(--transition-fast),
		visibility var(--transition-fast);
}

/* Visible via Alpine x-show o hover nativo */
.site-nav__dropdown[x-show],
.site-nav__item:hover .site-nav__dropdown,
.site-nav__dropdown.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
}

.site-nav__dropdown li a {
	display: block;
	padding: 0.6rem 1rem;
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__dropdown li a:hover {
	color: var(--gold-deep);
	background-color: rgba(168, 118, 46, 0.07);
}

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

/* =========================================================================
   BOTÓN HAMBURGUESA (mobile)
   ========================================================================= */

.site-header__hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--color-text); /* oscuro sobre header claro */
	transition: border-color var(--transition-fast), color var(--transition-fast);
	flex-shrink: 0;
}

.site-header__hamburger:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

@media (min-width: 1024px) {
	.site-header__hamburger {
		display: none;
	}
}

/* =========================================================================
   MENÚ MÓVIL (modal/overlay — Alpine)
   ========================================================================= */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	flex-direction: column;
}

/* Overlay oscuro */
.mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(42, 34, 24, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Panel */
.mobile-menu__panel {
	position: relative;
	background-color: var(--color-bg);
	border-right: 1px solid var(--color-border);
	width: min(360px, 90vw);
	height: 100%;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--color-text-muted);
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mobile-menu__close:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.mobile-menu__list {
	list-style: none;
	flex: 1;
}

.mobile-menu__item {
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 0.25rem;
	min-height: 52px;
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.mobile-menu__link:hover,
.mobile-menu__item.current-menu-item .mobile-menu__link {
	color: var(--color-accent-soft);
}

.mobile-menu__link--summer {
	color: var(--color-accent);
	font-weight: 600;
}

/* Sub-lista talleres */
.mobile-menu__sub {
	list-style: none;
	padding-left: 1rem;
	border-top: 1px solid var(--color-border);
	background-color: rgba(168, 118, 46, 0.04);
}

.mobile-menu__sub a {
	display: block;
	padding: 0.75rem 0.25rem;
	min-height: 44px;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.mobile-menu__sub a:hover {
	color: var(--color-accent-soft);
}

.mobile-menu__cta {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* =========================================================================
   HERO
   ========================================================================= */

/* Hero — isla oscura (foto de fondo + velo) dentro del sitio claro */
.hero {
	position: relative;
	min-height: min(90vh, 820px);
	display: flex;
	align-items: center;
	overflow: hidden;
	/* Degradado dorado marcado (estilo aprobado): luz arriba-izq → oro profundo */
	background:
		radial-gradient(75% 70% at 14% 8%, rgba(255,253,246,.92) 0%, transparent 58%),
		linear-gradient(125deg, #FBEFD0 0%, #EFD089 42%, #DEB45E 72%, #C99A40 100%);
}

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

.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		rgba(36, 28, 21, 0.88) 0%,
		rgba(36, 28, 21, 0.50) 52%,
		rgba(168, 118, 46, 0.28) 100%
	);
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wide-w);
	margin-inline: auto;
	padding-inline: var(--container-x);
	padding-block: var(--section-y);
}

.hero__content {
	max-width: 640px;
}

/* Hero usa colores claros porque es isla oscura (texto sobre foto con velo) */
.hero__eyebrow {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-deep); /* AA incluso sobre la esquina ámbar del degradado del hero */
	margin-bottom: 1.25rem;
}

.hero__title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: 300; /* Cormorant Light — editorial, fino y generoso */
	letter-spacing: -0.03em;
	line-height: 1.0;
	color: #2A2218; /* texto oscuro sobre degradado dorado */
	margin-bottom: 1.25rem;
	text-wrap: balance;
}

/* Palabra clave en itálica decorativa */
.hero__title em {
	font-style: italic;
	color: var(--gold-deep); /* AA incluso sobre la esquina ámbar del degradado */
}

.hero__subtitle {
	font-size: var(--text-lg);
	font-weight: 400;
	line-height: 1.6;
	color: #463B29; /* oscuro cálido: legible sobre el degradado dorado del hero (AA) */
	margin-bottom: 2rem;
	max-width: 520px;
}

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 2.5rem;
}

.hero__trust {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--text-xs);
	color: #5A4F3C; /* muted oscuro sobre hero claro */
	letter-spacing: 0.05em;
}

.hero__trust::before {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--gradient-gold);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.hero__title {
		font-size: var(--text-6xl);
		letter-spacing: -0.04em;
	}
}

/* =========================================================================
   SECCIÓN CURSO DE VERANO (banner destacado)
   ========================================================================= */

/* Summer-banner con foto: usa dk-has-bg + dk-bg-wrap--heavy (isla oscura)
   Sin foto: banda clara con borde dorado */
.summer-banner {
	background: linear-gradient(135deg, rgba(168, 118, 46, 0.08) 0%, rgba(196, 154, 69, 0.04) 100%);
	border: 1px solid var(--color-border-gold);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 5vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-align: center;
	align-items: center;
}

@media (min-width: 768px) {
	.summer-banner {
		flex-direction: row;
		text-align: left;
		align-items: center;
		justify-content: space-between;
	}
}

.summer-banner__body {
	flex: 1;
}

/* Texto del banner: en sitio claro usa ink; si es isla oscura, el template añade .dk-has-bg */
.summer-banner__title {
	font-size: var(--text-3xl);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 0.5rem;
}

.summer-banner__text {
	color: var(--color-text-muted);
	margin: 0;
}

/* Isla oscura (Curso Verano con foto de fondo) */
.summer-banner.dk-has-bg .summer-banner__title {
	color: #F6ECD6;
}

.summer-banner.dk-has-bg .summer-banner__text {
	color: rgba(246, 236, 214, 0.80);
}

/* =========================================================================
   PILARES DEL MÉTODO (3 cards)
   ========================================================================= */

.pillars {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

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

	/* 4 cards: 2×2 equilibrado en vez de 3+1 con huérfana a la izquierda. */
	.pillars--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 5 cards en 3 columnas: centra la fila huérfana de 2 (evita el hueco
	   a la derecha). Rejilla de 6 sub-columnas, cada card ocupa 2;
	   las dos últimas se desplazan para quedar centradas. */
	.pillars--5 {
		grid-template-columns: repeat(6, 1fr);
	}

	.pillars--5 > * {
		grid-column: span 2;
	}

	.pillars--5 > :nth-child(4) {
		grid-column: 2 / span 2;
	}

	.pillars--5 > :nth-child(5) {
		grid-column: 4 / span 2;
	}
}

.pillar-card {
	background-color: var(--card-surface); /* casi opaca — flota sobre el degradado en vez de disolverse */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); /* = 0 por token */
	padding: 2.5rem 1.75rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-rest);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.pillar-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gradient-gold);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.pillar-card:hover {
	border-color: var(--color-border-gold);
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}

.pillar-card:hover::before {
	opacity: 1;
}

.pillar-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.pillar-card__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(168, 118, 46, 0.08);
	border: 1px solid var(--color-border-gold);
	border-radius: var(--radius-md);
	color: var(--color-accent);
	margin-bottom: 0;
	flex-shrink: 0;
}

/* Numeral editorial 01 · 02 · 03 — mismo patrón que .method-eje__num */
.pillar-card__num {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.22;
	flex-shrink: 0;
}

.pillar-card__title {
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 0.75rem;
}

.pillar-card__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.65;
	margin: 0;
}

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

/* =========================================================================
   GRID DE SERVICIOS
   ========================================================================= */

.services-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

/* Permite que los items de grid/flex encojan por debajo de su min-content
   (evita overflow horizontal en móvil por botones/imágenes no encogibles). */
.services-grid > *,
.pillars > *,
.card,
.card__body {
	min-width: 0;
}

@media (min-width: 768px) {
	.services-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	/* Clases individuales (destacada) ocupa toda la fila superior; debajo,
	   Talleres y Clases online forman una fila 2-up perfectamente alineada.
	   Con 3 columnas quedaba la 3ª vacía y las dos cards descentradas. */
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-card--featured {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* Card de servicio base — editorial, casi opaca: flota sobre el degradado */
.card {
	background-color: var(--card-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); /* = 0 por token */
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: var(--shadow-rest);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
	border-color: var(--color-border-gold);
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}

.card__eyebrow {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-deep); /* pasa AA incluso sobre la esquina ámbar del degradado */
}

.card__title {
	font-size: var(--text-2xl);
	font-weight: 500; /* unificado con pillar-card__title: una sola "voz de card" */
	color: var(--color-text);
	line-height: 1.15;
}

.card__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.65;
	flex: 1;
	margin: 0;
}

.card__link {
	align-self: flex-start;
}

/* Servicio destacado (clases individuales) — la única card de contenido que
   conserva el --glow-gold en hover (junto a los CTAs). Marca su estatus de
   "servicio estrella" frente al resto de cards, que usan sombra neutra. */
.service-card--featured {
	border-color: var(--color-border-gold);
	background: linear-gradient(135deg, rgba(168, 118, 46, 0.06) 0%, var(--color-surface) 60%);
}

.service-card--featured:hover {
	box-shadow: var(--shadow-hover), var(--glow-gold);
}

.service-card--featured .card__title {
	font-size: var(--text-3xl);
}

.service-card--featured .card__img {
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4/3;
}

.service-card--featured .card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* =========================================================================
   SECTION CTA INTERMEDIO
   ========================================================================= */

.cta-band {
	text-align: center;
	/* La .cta-band siempre vive dentro de una .section, que ya aporta
	   --section-y. Un segundo --section-y aquí duplicaba el padding y dejaba
	   grandes huecos vacíos (sobre todo en .section plana). Padding propio
	   moderado: respira sin vaciar la sección. */
	padding-block: clamp(2rem, 5vw, 4rem);
}

.cta-band__title {
	font-size: var(--text-3xl);
	font-weight: 600;
	color: var(--color-text); /* oscuro en sitio claro */
	margin-bottom: 0.75rem;
}

.cta-band__text {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	margin-bottom: 2rem;
	max-width: 520px;
	margin-inline: auto;
}

/* Isla oscura (cta con foto de fondo) */
.section--dark .cta-band__title {
	color: #F6ECD6;
}

.section--dark .cta-band__text {
	color: rgba(246, 236, 214, 0.80);
}

.section--dark .eyebrow {
	color: #E8C77A;
}

/* CTA final — la fila de acciones vive fuera del límite de 600px del texto
   (título/lead) para que los dos botones quepan LADO A LADO en desktop.
   En móvil se apilan a ancho igual, centrados y contenidos. */
.cta-final__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: center;
	margin-top: 1.75rem;
}

@media (max-width: 767px) {
	.cta-final__actions {
		flex-direction: column;
		align-items: stretch;
		max-width: 360px;
		margin-inline: auto;
	}
	.cta-final__actions .btn {
		width: 100%;
	}
}

/* =========================================================================
   TESTIMONIOS
   ========================================================================= */

/* La sección de reseñas se mantiene dentro de una pantalla: padding más ajustado. */
.section--testimonials {
	padding-block: clamp(3rem, 6vh, 4.5rem);
}

/* Carrusel de reseñas: track horizontal con scroll-snap.
   Muestra 1 card (con peek de la siguiente) en móvil y 2 en la columna ancha. */
.testimonials-carousel {
	min-width: 0;
}

.testimonials-track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.testimonials-track::-webkit-scrollbar {
	display: none;
}

.testimonials-track .testimonial-card {
	flex: 0 0 88%;
	scroll-snap-align: start;
	min-width: 0;
}

@media (min-width: 1024px) {
	.testimonials-track .testimonial-card {
		flex-basis: calc(50% - 0.625rem);
	}
}

/* Controles del carrusel */
.carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border-gold);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), opacity var(--transition-base);
}

.carousel-arrow:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent, #1a1a1a);
}

.carousel-arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.carousel-dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.carousel-dot {
	width: 9px;
	height: 9px;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background-color: var(--gold-deep);
	background-clip: content-box;
	opacity: 0.65;
	cursor: pointer;
	transition: opacity var(--transition-base), width var(--transition-base), background-color var(--transition-base);
}

.carousel-dot:hover {
	opacity: 0.9;
}

.carousel-dot.is-active {
	opacity: 1;
	width: 24px;
	border-radius: 8px;
	background-color: var(--color-accent);
}

.testimonial-card {
	position: relative;
	background-color: var(--card-surface);
	border: 1px solid var(--color-border-gold);
	border-radius: var(--radius-md, 8px);
	padding: 2.75rem 2.25rem 2.25rem;
	box-shadow: var(--shadow-rest);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	min-height: 340px;
	overflow: hidden;
	transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.testimonial-card:hover {
	border-color: var(--color-accent);
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* Comilla decorativa de apertura */
.testimonial-card__mark {
	position: absolute;
	top: 0.6rem;
	right: 1.25rem;
	font-family: var(--font-display);
	font-size: 5rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.18;
	pointer-events: none;
}

.testimonial-card__quote {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-style: italic;
	font-weight: 400;
	line-height: 1.55;
	color: var(--color-text);
	flex: 1;
	margin: 0;
}

.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--color-border);
}

/* Glifo "G" de Google — sustituye el avatar-monograma genérico (tell de
   plantilla). Atribución visual real: son reseñas del perfil de Google. */
.testimonial-card__gicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-surface-raised);
	border: 1px solid var(--color-border);
	overflow: hidden;
	flex-shrink: 0;
}

.testimonial-card__gicon svg {
	width: 18px;
	height: 18px;
}

.testimonial-card__name {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
}

.testimonial-card__meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Estrellitas (5) — ahora en la fila de autoría, junto al nombre */
.testimonial-card__stars {
	color: var(--color-accent);
	font-size: var(--text-sm);
	letter-spacing: 0.06em;
}

/* =========================================================================
   CONÓCEME / SOBRE DIEGO (teaser)
   ========================================================================= */

.about-teaser {
	display: grid;
	gap: 3rem;
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.about-teaser {
		grid-template-columns: 1fr 1fr;
	}
}

.about-teaser__img {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 3/4;
	max-height: 560px;
}

.about-teaser__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Marco dorado decorativo */
.about-teaser__img::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--color-border-gold);
	border-radius: var(--radius-lg);
	pointer-events: none;
}

.about-teaser__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.about-teaser__quote {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-style: italic;
	font-weight: 400;
	color: var(--color-text);
	line-height: 1.4;
	border-left: 2px solid var(--color-accent);
	padding-left: 1.5rem;
	margin: 0;
}

/* =========================================================================
   FAQ ACORDEÓN (Alpine.js)
   ========================================================================= */

.faq {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 760px;
	margin-inline: auto;
}

.faq__item {
	background-color: rgba(255, 253, 246, 0.70);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md); /* = 0 por token */
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.faq__item[aria-expanded="true"],
.faq__item.is-open {
	border-color: var(--color-border-gold);
}

.faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	min-height: 56px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text);
	text-align: left;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.faq__trigger:hover {
	color: var(--gold-deep); /* AA: texto 16px necesita 4.5:1, incluso sobre el degradado */
}

.faq__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--gold-deep);
	transition: transform var(--transition-fast), color var(--transition-fast);
}

.faq__trigger[aria-expanded="true"] .faq__icon,
.is-open .faq__icon {
	transform: rotate(45deg);
	color: var(--color-accent);
}

.faq__body {
	padding: 0 1.5rem 1.5rem;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* Alpine transition: x-transition */
[x-cloak] { display: none !important; }

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

/* =========================================================================
   FORMULARIO DE CONTACTO
   ========================================================================= */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 680px;
}

.form-row {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.form-row--split {
		grid-template-columns: 1fr 1fr;
	}
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	letter-spacing: 0.02em;
}

.form-label--optional::after {
	content: " (opcional)";
	font-weight: 400;
	color: var(--color-text-muted);
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text); /* #2A2218 sobre blanco — ok */
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
	border-color: var(--color-accent-soft);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(168, 118, 46, 0.15);
}

.form-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6149' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

.form-textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.65;
}

/* Checkbox RGPD */
.form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
}

.form-checkbox__input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.125rem;
	accent-color: var(--color-accent);
	cursor: pointer;
	border-radius: var(--radius-sm);
}

.form-checkbox__label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.5;
	cursor: pointer;
}

.form-checkbox__label a {
	color: var(--color-accent);
}

/* Mensajes de estado */
.form-message {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
}

/* Mensajes de estado con suficiente contraste sobre fondo claro */
.form-message--success {
	background-color: rgba(15, 122, 110, 0.08);
	border: 1px solid rgba(15, 122, 110, 0.30);
	color: #0F7A6E; /* ≈ 4.6:1 sobre blanco */
}

.form-message--error {
	background-color: rgba(185, 28, 28, 0.08);
	border: 1px solid rgba(185, 28, 28, 0.30);
	color: #B91C1C; /* ≈ 5.9:1 sobre blanco */
}

@media (prefers-reduced-motion: reduce) {
	.form-input,
	.form-select,
	.form-textarea {
		transition: none;
	}
}

/* =========================================================================
   FOOTER
   ========================================================================= */

/* Footer — espresso→bronce: gradiente oscuro con acento cálido */
.site-footer {
	background: linear-gradient(135deg, #241C15 0%, #3C2A14 50%, #1F1810 100%);
	border-top: 1px solid var(--color-border-gold);
	padding-block: clamp(3rem, 6vw, 5rem); /* el --section-y (hasta 7rem) hinchaba el footer */
	position: relative;
}

/* Filete dorado hairline decorativo arriba del footer */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--gradient-gold);
	opacity: 0.6;
}

.site-footer__inner {
	max-width: var(--wide-w);
	margin-inline: auto;
	padding-inline: var(--container-x);
}

/* Grid 4 columnas → 1 en mobile */
.site-footer__grid {
	display: grid;
	gap: 3rem 2.5rem;
	grid-template-columns: 1fr;
	margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

/* Columna marca */
.footer-brand__logo {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	margin-bottom: 1rem;
}

.footer-brand__logo img,
.footer-brand__logo svg {
	/* Mayor que el sello del navbar (52px) — presencia de cierre de marca. */
	height: 96px;
	width: auto;
}

/* Sello circular con aro dorado — coherente con el sello del navbar */
.footer-brand__seal {
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--color-border-gold);
	flex-shrink: 0;
}

/* Wordmark: nombre display grande + subtítulo legible. El texto se escala a la
   proporción del sello de 96px (~0.4, misma que el navbar) para no quedar
   diminuto ni descentrado. */
.footer-brand__wordmark {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.footer-brand__name {
	font-family: var(--font-display);
	font-size: 1.75rem; /* 28px */
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: 0.005em;
	color: #F0E7D2; /* cream, jerarquía sobre el sub */
}

.footer-brand__sub {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: rgba(231, 220, 196, 0.75);
	margin-top: 0.15rem;
}

.footer-brand__claim {
	font-size: var(--text-sm);
	color: rgba(231, 220, 196, 0.70);
	line-height: 1.6;
	max-width: 34ch; /* medida de lectura cómoda dentro del 2fr */
	margin-bottom: 1.5rem;
}

/* Iconos redes sociales */
.social-links {
	display: flex;
	gap: 0.75rem;
	list-style: none;
}

/* Redes sociales en footer oscuro */
.social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(231, 220, 196, 0.20);
	border-radius: var(--radius-sm);
	color: rgba(231, 220, 196, 0.70);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.social-links__link:hover {
	color: #E8C77A;
	border-color: rgba(232, 199, 122, 0.40);
	background-color: rgba(232, 199, 122, 0.08);
}

.social-links__link svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Variante etiquetada (icono + @handle) sobre fondo claro — p.ej. Nosotros.
   La base .social-links__link es un botón 40×40 icono-solo para el footer
   oscuro; con handle al lado el texto desbordaba y se solapaban. */
.social-links--labeled {
	flex-direction: column;
	gap: 0.15rem;
	align-items: flex-start;
}

.social-links--labeled .social-links__link {
	width: auto;
	height: auto;
	padding: 0.4rem 0.25rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--color-accent-soft); /* icono dorado (currentColor) legible en claro */
	gap: 0.55rem;
	justify-content: flex-start;
}

.social-links--labeled .social-links__link span {
	margin-left: 0 !important; /* el gap del flex ya separa icono y handle */
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}

.social-links--labeled .social-links__link:hover {
	background: transparent;
	color: var(--color-accent);
}

.social-links--labeled .social-links__link:hover span {
	color: var(--color-accent-soft);
}

/* Columna nav footer */
/* Footer nav — colores claros sobre espresso oscuro */
.footer-nav__heading {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #E8C77A; /* dorado claro sobre fondo oscuro */
	margin-bottom: 1.25rem;
}

.footer-nav__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-nav__list a {
	font-size: var(--text-sm);
	color: rgba(231, 220, 196, 0.70);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-nav__list a:hover {
	color: #E8C77A;
}

/* Línea divisoria y bottom — footer oscuro espresso */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(231, 220, 196, 0.15);
}

.site-footer__copyright,
.site-footer__studio {
	font-size: var(--text-xs);
	color: rgba(231, 220, 196, 0.60);
	margin: 0;
}

.site-footer__studio {
	opacity: 0.85;
}

.site-footer__studio a {
	color: rgba(231, 220, 196, 0.70);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer__studio a:hover {
	color: #E8C77A;
	text-decoration: none;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
}

.footer-legal a {
	font-size: var(--text-xs);
	color: rgba(231, 220, 196, 0.60);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-legal a:hover {
	color: #E8C77A;
}

/* =========================================================================
   WHATSAPP FLOTANTE + GO-TO-TOP
   ========================================================================= */

.floating-buttons {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: var(--z-floating);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-end;
}

/* Botón flotante base — sombra cálida para tema claro */
.floating-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-md); /* cuadrado editorial (coherente con el resto del UI) */
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(58, 40, 10, 0.22);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.floating-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(58, 40, 10, 0.28);
}

.floating-btn:focus-visible {
	outline: 2px solid var(--color-accent-bright);
	outline-offset: 3px;
}

.floating-btn svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* WhatsApp */
.floating-btn--whatsapp {
	background-color: #0F7A6E; /* verde profundo: icono blanco ≥3:1 (WCAG AA gráficos) */
	color: #fff;
}

/* Go-to-top — mismo tamaño que WhatsApp (52px) */
.floating-btn--top {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-gold);
	color: var(--color-accent-soft);
	box-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
	.floating-btn:hover {
		transform: none;
	}
}

/* =========================================================================
   PLANTILLA PÁGINA GENÉRICA
   ========================================================================= */

.page-header {
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: center;
	position: relative;
}

.page-header__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wide-w);
	margin-inline: auto;
	padding-inline: var(--container-x);
}

.page-header__title {
	font-size: var(--text-4xl);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 1rem;
}

.page-header__lead {
	max-width: 600px;
	margin-inline: auto;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

/* Isla oscura (page-header con foto de fondo) — texto claro */
.section--dark .page-header__title,
.page-header--has-photo .page-header__title {
	color: #F6ECD6;
}

.section--dark .page-header__lead,
.page-header--has-photo .page-header__lead {
	color: rgba(246, 236, 214, 0.80);
}

.section--dark .eyebrow,
.page-header--has-photo .eyebrow {
	color: #E8C77A;
}

/* =========================================================================
   FAQ CON IMAGEN LATERAL (home — desktop)
   ========================================================================= */

.faq-layout--with-img {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.faq-layout--with-img {
		grid-template-columns: 38fr 62fr;
		gap: 4rem;
	}
}

/* La imagen lateral es sticky en desktop para acompañar el scroll del acordeón */
@media (min-width: 1024px) {
	.faq-layout--with-img .faq-side-img {
		position: sticky;
		top: 5rem;
	}
}

/* En móvil la imagen no se muestra — el FAQ ocupa el ancho completo */
.faq-side-img {
	display: none;
}

@media (min-width: 1024px) {
	.faq-side-img {
		display: block;
	}
}

/* =========================================================================
   TESTIMONIOS CON IMAGEN LATERAL (home)
   ========================================================================= */

.testimonials-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}

/* La foto de la alumna es vertical: usar marco retrato para no cortar el rostro.
   En móvil, algo más bajo para no ocupar demasiado. */
.testimonials-img {
	aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
	.testimonials-img {
		aspect-ratio: 4 / 5;
	}
}

/* Evita que el track del carrusel (scrollable) infle su columna de grid. */
.testimonials-layout > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.testimonials-layout {
		grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
		gap: 3.5rem;
	}
}

/* =========================================================================
   PAGE-HEADER SPLIT — anula padding/centering del .page-header base
   El padding lo gestiona .page-header__text-col internamente.
   ========================================================================= */

.page-header--split {
	padding-block: 0;
	text-align: left;
}

.page-header--split .page-header__title {
	text-align: left;
	margin-inline: 0;
}

.page-header--split .page-header__lead {
	text-align: left;
	margin-inline: 0;
	max-width: 520px;
}

.page-header--split .eyebrow {
	text-align: left;
}

/* =========================================================================
   SECCIÓN COLUMNA TEXTO + IMAGEN (método, página conóceme)
   ========================================================================= */

.text-media {
	display: grid;
	gap: 3rem;
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.text-media {
		grid-template-columns: 1fr 1fr;
	}

	.text-media--reverse .text-media__media {
		order: -1;
	}
}

.text-media__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.text-media__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.text-media__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* =========================================================================
   LISTA DE PILARES (El Método — detalle)
   ========================================================================= */

.method-pillars {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.method-pillar {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 1.5rem;
	align-items: flex-start;
	padding-block: 2rem;
	border-bottom: 1px solid var(--color-border);
}

.method-pillar:last-child {
	border-bottom: none;
}

.method-pillar__number {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 600;
	color: var(--color-accent);
	line-height: 1;
	opacity: 0.72; /* decorativo pero ≥3:1 (WCAG AA texto grande) */
}

.method-pillar__title {
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 0.5rem;
}

.method-pillar__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0;
}

.method-pillar__subtitle {
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--color-text);
	margin-top: 1.25rem;
	margin-bottom: 0.4rem;
}

/* =========================================================================
   LISTADO TALLERES
   ========================================================================= */

.workshop-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

.workshop-card {
	background-color: var(--card-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); /* = 0 por token */
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr; /* móvil: una sola columna */
	gap: 0;
	box-shadow: var(--shadow-rest);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	min-width: 0;
}

/* ≥768px: foto izquierda (ancho fijo), texto + CTA derecha */
@media (min-width: 768px) {
	.workshop-card {
		grid-template-columns: minmax(260px, 300px) 1fr;
		grid-template-rows: 1fr;
		align-items: stretch;
	}
}

.workshop-card:hover {
	border-color: var(--color-border-gold);
	box-shadow: var(--shadow-hover);
}

/* Columna de texto + CTA — rellena el hueco derecho */
.workshop-card > div {
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
}

/* Botón CTA dentro del bloque de texto */
.workshop-card > .btn,
.workshop-card > div + .btn,
.workshop-card > div + a.btn {
	align-self: flex-start;
	margin: 0 2.5rem 2.5rem;
}

@media (min-width: 768px) {
	.workshop-card > div {
		border-left: 1px solid var(--color-border);
	}

	.workshop-card > .btn,
	.workshop-card > div + .btn,
	.workshop-card > div + a.btn {
		margin: 0 2.5rem 2.5rem;
	}
}

.workshop-card__title {
	font-size: var(--text-2xl);
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: 0.5rem;
}

.workshop-card__meta {
	font-size: var(--text-sm);
	color: var(--gold-deep); /* texto pequeño dorado → gold-deep para AA sobre el degradado */
	font-weight: 500;
	margin-bottom: 0.75rem;
}

.workshop-card__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* =========================================================================
   404
   ========================================================================= */

.error-404 {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--section-y) var(--container-x);
}

.error-404__number {
	font-family: var(--font-display);
	font-size: clamp(6rem, 20vw, 14rem);
	font-weight: 600;
	line-height: 1;
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 1rem;
	opacity: 0.4;
}

.error-404__title {
	font-size: var(--text-3xl);
	color: var(--color-text);
	margin-bottom: 0.75rem;
}

.error-404__text {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	margin-bottom: 2rem;
}

/* =========================================================================
   BLOG — listado
   ========================================================================= */

.posts-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

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

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

.post-card {
	background-color: rgba(255, 253, 246, 0.70);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); /* = 0 por token */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: none;
	transition: border-color var(--transition-base), transform var(--transition-base);
}

.post-card:hover {
	border-color: var(--color-border-gold);
	transform: translateY(-2px);
}

.post-card__thumb {
	aspect-ratio: 16/9;
	overflow: hidden;
}

.post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.post-card:hover .post-card__thumb img {
	transform: scale(1.04);
}

.post-card__body {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.post-card__cat {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-deep); /* texto pequeño dorado → gold-deep para AA */
}

.post-card__title {
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.25;
	text-decoration: none;
}

.post-card__title a {
	color: inherit;
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--color-accent);
}

.post-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.65;
	flex: 1;
}

.post-card__meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
	.post-card,
	.post-card__thumb img {
		transition: none;
	}
	.post-card:hover .post-card__thumb img {
		transform: none;
	}
	.post-card:hover {
		transform: none;
	}
}

/* =========================================================================
   MÉTODO — ejes del método (3 grandes bloques con sub-pillars)
   ========================================================================= */

.method-eje {
	padding: 2.5rem 0;
	border-top: 1px solid var(--color-border-gold);
}

.method-eje:first-of-type {
	border-top: none;
}

.method-eje__header {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}

.method-eje__num {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.25;
	flex-shrink: 0;
	min-width: 3rem;
}

.method-eje__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	color: var(--color-text);
	margin: 0.25rem 0 0;
}

.method-eje__intro {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.8;
	margin-bottom: 2rem;
	max-width: 68ch;
}

/* =========================================================================
   PULIDO PREMIUM — ritmo editorial, detalles tipográficos y hover de cards
   ========================================================================= */

/* Ritmo de secciones: respira más entre secciones distintas */
.section + .section {
	/* el padding-block ya lo gestiona --section-y; sin override adicional */
}

/* Títulares h2 en secciones: text-wrap balance para todos */
.section h2,
.section h1 {
	text-wrap: balance;
}

/* Hover de cards de contenido: shadow-hover neutro (--glow-gold queda
   reservado para CTAs y .service-card--featured, ver bloque de cards). */

/* Workshop card — asegurar que el div de contenido crece verticalmente */
.workshop-card > div {
	flex: 1; /* ocupa todo el espacio vertical disponible */
}

/* CTA-band: más respiración en secciones cálidas */
.section--warm .cta-band,
.section--surface .cta-band {
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* Pillar-card: foco visible por accesibilidad — mismo tratamiento que hover */
.pillar-card:focus-within {
	border-color: var(--color-border-gold);
	box-shadow: var(--shadow-hover);
}

/* Post-card: sombra al hover consistente con el resto de cards */
.post-card:hover {
	box-shadow: var(--shadow-hover);
}

/* Coherencia de marcos de imagen: border dorado uniforme */
.text-media__media--photo,
.about-teaser__img--photo,
.contact-side-img,
.faq-side-img,
.method-secondary-img {
	border: 1px solid var(--color-border-gold);
}

/* Eyebrow: mayor tracking y consistencia cross-page */
.eyebrow {
	letter-spacing: 0.32em; /* upgrade de 0.28em → 0.32em */
}

/* Títulos de secciones centrales: legibilidad */
[style*="text-align:center"] h2,
[style*="text-align: center"] h2 {
	text-wrap: balance;
}

/* Reducción de movimiento: sin box-shadow animada */
@media (prefers-reduced-motion: reduce) {
	.card:hover,
	.pillar-card:hover,
	.testimonial-card:hover,
	.workshop-card:hover,
	.post-card:hover {
		box-shadow: var(--shadow-card);
	}
}

/* =========================================================================
   CINTA SUPERIOR (anuncio temporada) + BANDA DE TEMPORADA (home)
   ========================================================================= */

.top-ribbon {
	background-color: var(--color-ink, #2A2218);
	color: #FBEFD0;
	border-bottom: 1px solid var(--color-border-gold);
	font-size: var(--text-xs);
	line-height: 1.4;
}

.top-ribbon__text {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.6rem;
	width: 100%;
	max-width: var(--wide-w);
	margin-inline: auto;
	padding: 0.5rem var(--container-x);
	color: #FBF2DA;            /* gana a la regla global `p { color: muted }` */
	font-weight: 500;
	text-align: center;
}

.top-ribbon__badge {
	color: #EFD08A;            /* oro brillante, legible sobre ink */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.top-ribbon__link {
	color: #EFD08A;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.top-ribbon__link:hover,
.top-ribbon__link:focus-visible {
	color: #FFFFFF;
}

/* --- Banda de temporada (home): panel oro con brillo y CTA con vida --- */
.season-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	padding: 2.4rem 2.9rem;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(110, 78, 28, 0.45);
	background:
		radial-gradient(130% 130% at 0% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
		linear-gradient(118deg, #FBEDC7 0%, #ECCB6E 48%, #DCAF4A 100%);
	box-shadow: var(--shadow-hover);
	color: var(--color-ink);
}

/* Brillo diagonal que barre el panel de vez en cuando */
.season-banner__sheen {
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 42%;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-170%) skewX(-12deg);
	animation: season-sheen 6.5s ease-in-out infinite;
	animation-delay: 1.4s;
}

@keyframes season-sheen {
	0% { transform: translateX(-170%) skewX(-12deg); }
	55%, 100% { transform: translateX(360%) skewX(-12deg); }
}

.season-banner__body,
.season-banner__cta {
	position: relative;
	z-index: 1;
}

.season-banner__body {
	flex: 1 1 340px;
}

.season-banner__badge {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--color-ink);
	color: #F6E4B4;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.season-banner__title {
	margin: 0.75rem 0 0.5rem;
	color: var(--color-ink);
}

.season-banner__text {
	margin: 0;
	max-width: 58ch;
	color: #4A3C22;
	font-size: var(--text-sm);
	line-height: 1.7;
}

.season-banner__cta {
	flex: 0 0 auto;
}

.season-banner__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	animation: season-pulse 2.8s ease-in-out infinite;
}

.season-banner__arrow {
	transition: transform 0.25s ease;
}

.season-banner__btn:hover .season-banner__arrow,
.season-banner__btn:focus-visible .season-banner__arrow {
	transform: translateX(4px);
}

@keyframes season-pulse {
	0%, 100% { box-shadow: 0 10px 30px -14px rgba(58, 40, 10, 0.55), 0 0 0 0 rgba(42, 34, 24, 0); }
	50% { box-shadow: 0 10px 30px -14px rgba(58, 40, 10, 0.55), 0 0 0 6px rgba(42, 34, 24, 0.12); }
}

@media (max-width: 640px) {
	.season-banner {
		padding: 1.7rem 1.5rem;
	}
	.season-banner__cta {
		width: 100%;
	}
	.season-banner__btn {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.season-banner__sheen {
		display: none;
	}
	.season-banner__btn {
		animation: none;
	}
	.season-banner__arrow {
		transition: none;
	}
}

/* =========================================================================
   CONTENIDO DE PÁGINAS/ENTRADAS (.entry-content): tablas + aviso borrador
   ========================================================================= */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: var(--text-sm);
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--color-border-gold);
	padding: 0.6rem 0.85rem;
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	background: var(--color-surface);
	font-weight: 600;
	color: var(--color-text);
}

.entry-content tbody tr:nth-child(even) td {
	background: rgba(168, 118, 46, 0.04);
}

.entry-content .legal-disclaimer {
	border-left: 3px solid var(--color-accent);
	background: rgba(168, 118, 46, 0.06);
	border-radius: var(--radius-md);
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
	font-size: var(--text-sm);
	font-style: normal;
	line-height: 1.7;
}

@media (max-width: 640px) {
	.entry-content table {
		font-size: var(--text-xs);
	}
	.entry-content th,
	.entry-content td {
		padding: 0.45rem 0.55rem;
	}
}