/* ==========================================================================
   SECTIONS · Componentes compartidos + estilos de cada sección
   Requiere: tokens.css · base.css
   Carga: functions.php (itzel-sections)
   ========================================================================== */

/* ── Padding de sección con clamp (override de base.css) ────────────────── */
.section {
	padding-block: clamp(64px, 9vw, 120px);
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.eyebrow {
	display: inline-block;
	font-family:    var(--font-body);
	font-size:      var(--fs-xs);
	font-weight:    var(--fw-semi);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color:          var(--rosegold);
	margin-block-end: var(--space-4);
}
.eyebrow--light { color: var(--rosegold-2); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
	background:    var(--white);
	border:        1px solid rgba(176, 126, 102, .20);
	border-radius: 22px;
	padding:       var(--space-8);
	transition:
		transform   var(--transition-base),
		box-shadow  var(--transition-base);
}
.card:hover {
	transform:  translateY(-6px);
	box-shadow: 0 16px 48px rgba(59, 44, 32, .12);
}

/* ── Hairline ────────────────────────────────────────────────────────────── */
.hairline {
	display:  block;
	width:    48px;
	height:   1px;
	background: var(--rosegold);
	margin-block: var(--space-6);
}

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
/* Sin estado oculto en CSS: todo legible sin JS.
   GSAP oculta + anima vía gsap.set() + gsap.to() con estilos inline. */
.reveal.in {
	opacity:   1;
	transform: none;
}
.reveal[data-split] { opacity: 1; }

/* ── Hero: líneas del H1 animables ──────────────────────────────────────── */
.hero__line { display: block; }

/* ── Section header compartido ───────────────────────────────────────────── */
.section-header {
	text-align: center;
	max-width:  700px;
	margin-inline: auto;
	margin-block-end: var(--space-16);
}
.section-header h2 {
	font-size:   clamp(var(--fs-2xl), 3.5vw, var(--fs-3xl));
	line-height: var(--lh-tight);
	color:       var(--color-heading);
	margin-block-start: var(--space-2);
}
.section-header h2 em {
	font-style: italic;
	color:      var(--terracotta);
}
.section-sub {
	font-size:   var(--fs-base);
	color:       var(--muted);
	margin-block-start: var(--space-4);
	max-width:   58ch;
	margin-inline: auto;
}

/* Encabezado de sección claro sobre fondo ink */
.section--enfoque .section-header h2 { color: var(--cream); }
.section--enfoque .section-sub       { color: var(--blush); }

/* ── CTA central de proceso ──────────────────────────────────────────────── */
.proceso__cta {
	text-align: center;
	margin-block-start: var(--space-16);
}

/* ── Botón grande ────────────────────────────────────────────────────────── */
.btn--lg {
	padding:     var(--space-4) var(--space-10);
	font-size:   var(--fs-sm);
	letter-spacing: 0.1em;
}
/* Microinteracción suave al clic en todos los botones */
.btn:active { transform: scale(0.97); }

/* ==========================================================================
   BACKGROUNDS — ritmo alternante
   cream → sand → cream → ink → sand → cream → sand → cream → rosegold
   ========================================================================== */
.section--hero        { background: var(--cream); }
.section--services    { background: var(--cream); }
.section--enfoque     { background: var(--ink);   }
.section--proceso     { background: var(--sand);  }
.section--resultados  { background: var(--cream); }
.section--testimonios { background: var(--sand);  }
.section--faq         { background: var(--cream); }
.section--cta {
	background: linear-gradient(135deg, var(--rosegold) 0%, var(--clay) 100%);
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero__container {
	display:   grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap:       clamp(var(--space-12), 6vw, var(--space-24));
	min-height: calc(90vh - 72px);
}

.hero__text {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
}

.hero__heading {
	font-size:    clamp(var(--fs-3xl), 4.5vw, var(--fs-5xl));
	line-height:  var(--lh-tight);
	color:        var(--ink);
	margin-block-start: var(--space-2);
	max-width:    14ch;
}
.hero__heading em {
	font-style: italic;
	color:      var(--terracotta);
}

.hero__sub {
	font-size:   var(--fs-md);
	color:       var(--body-clr);
	line-height: var(--lh-normal);
	max-width:   48ch;
	margin-block-start: var(--space-6);
}

.hero__actions {
	display:   flex;
	gap:       var(--space-4);
	flex-wrap: wrap;
	margin-block-start: var(--space-8);
}

.hero__badge {
	display:      flex;
	align-items:  center;
	gap:          var(--space-2);
	font-size:    var(--fs-xs);
	color:        var(--muted);
	letter-spacing: 0.06em;
	margin-block-start: var(--space-6);
}
.hero__badge-icon {
	color:     var(--rosegold);
	font-size: var(--fs-sm);
}

/* Imagen hero */
.hero__media {
	position:      relative;
	transition-delay: 0.18s;
}
.hero__img-wrap {
	position:      relative;
	border-radius: var(--radius-xl);
	overflow:      hidden;
	aspect-ratio:  3 / 4;
	background:    var(--cream);
	box-shadow:    0 24px 64px rgba(59, 44, 32, .14);
}
.hero__img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	object-position: center;
}
.hero__img-placeholder {
	width:        100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-xl);
	background:   linear-gradient(160deg, var(--blush) 0%, var(--sand) 60%, var(--rosegold-2) 100%);
	box-shadow:   0 24px 64px rgba(59, 44, 32, .14);
}
/* Blobs decorativos — elementos reales para GSAP parallax */
.hero__blob {
	position:      absolute;
	border-radius: var(--radius-pill);
	pointer-events: none;
	will-change:   transform;
}
.hero__blob--1 {
	inset-block-start: -28px;
	inset-inline-start: -28px;
	width:  160px;
	height: 160px;
	background: rgba(176, 126, 102, .10);
}
.hero__blob--2 {
	inset-block-end:  -20px;
	inset-inline-end: -20px;
	width:  100px;
	height: 100px;
	background: rgba(188, 94, 75, .07);
}

/* ==========================================================================
   2 · SERVICES — Tratamientos
   ========================================================================== */
.services__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-6);
	margin-block-start:    var(--space-2);
}

.service-card {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.service-card__name {
	font-size:   var(--fs-md);
	font-weight: var(--fw-regular);
	color:       var(--ink);
	line-height: var(--lh-snug);
}

.service-card__desc {
	font-size:   var(--fs-sm);
	color:       var(--body-clr);
	line-height: var(--lh-normal);
	flex-grow:   1;
}

.service-card__benefit {
	font-size:   var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.06em;
	color:       var(--rosegold);
}

.service-card__link {
	display:        inline-flex;
	align-items:    center;
	gap:            var(--space-1);
	margin-block-start: var(--space-2);
	font-size:      var(--fs-xs);
	font-weight:    var(--fw-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--terracotta);
	transition:     color var(--transition-fast), gap var(--transition-fast);
}
.service-card__link:hover {
	color: var(--clay);
	gap:   var(--space-3);
}

/* ==========================================================================
   4 · ENFOQUE — fondo ink (oscuro)
   ========================================================================== */
.enfoque__header { text-align: center; max-width: 640px; margin-inline: auto; }
.enfoque__header .eyebrow { color: var(--rosegold-2); }
.enfoque__header h2 {
	font-size:   clamp(var(--fs-2xl), 3.5vw, var(--fs-3xl));
	line-height: var(--lh-tight);
	color:       var(--cream);
	margin-block-start: var(--space-2);
	margin-block-end:   var(--space-16);
}
.enfoque__header h2 em {
	font-style: italic;
	color:      var(--rosegold-2);
}

.enfoque__list {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
	max-width:      860px;
	margin-inline:  auto;
}

.enfoque__item {
	display:     grid;
	grid-template-columns: 80px 1fr;
	align-items: start;
	gap:         var(--space-6);
	padding-block: var(--space-8);
	border-block-end: 1px solid rgba(250, 247, 241, .08);
}
.enfoque__item:last-child { border-block-end: none; }

.enfoque__num {
	font-family: var(--font-heading);
	font-size:   var(--fs-4xl);
	font-weight: var(--fw-light);
	color:       rgba(201, 161, 137, .30);
	line-height: 1;
	flex-shrink: 0;
}

.enfoque__item h3 {
	font-size:   var(--fs-lg);
	font-weight: var(--fw-regular);
	color:       var(--cream);
	margin-block-end: var(--space-2);
}
.enfoque__item p {
	font-size:   var(--fs-sm);
	color:       var(--blush);
	line-height: var(--lh-normal);
}

/* ==========================================================================
   5 · PROCESO
   ========================================================================== */
.proceso__steps {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--space-8);
	position:              relative;
}
/* Línea conectora — elemento real para que GSAP pueda animar scaleX */
.proceso__connector {
	position:        absolute;
	top:             36px;
	left:            calc(12.5% + var(--space-8));
	right:           calc(12.5% + var(--space-8));
	height:          1px;
	background:      linear-gradient(to right, var(--rosegold), var(--rosegold-2));
	transform-origin: left center;
	will-change:     transform;
	pointer-events:  none;
}

.proceso__step {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	gap:            var(--space-4);
}

.proceso__num {
	font-family: var(--font-heading);
	font-size:   var(--fs-4xl);
	font-weight: var(--fw-light);
	color:       var(--rosegold);
	line-height: 1;
	position:    relative;
	z-index:     1;
}
.proceso__num-wrap {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:  72px;
	height: 72px;
	border-radius: var(--radius-pill);
	background:    var(--cream);
	border:        1px solid rgba(176, 126, 102, .25);
	box-shadow:    var(--shadow-sm);
}

.proceso__step h3 {
	font-size:   var(--fs-md);
	font-weight: var(--fw-regular);
	color:       var(--ink);
	line-height: var(--lh-snug);
}
.proceso__step p {
	font-size:   var(--fs-sm);
	color:       var(--body-clr);
	line-height: var(--lh-normal);
}

/* ==========================================================================
   6 · RESULTADOS
   ========================================================================== */
.gallery__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-4);
	margin-block-start:    var(--space-4);
}
.gallery__item {
	border-radius: var(--radius-lg);
	overflow:      hidden;
	aspect-ratio:  4 / 5;
	background:    var(--sand);
}
.gallery__item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}
.gallery__item:hover img { transform: scale(1.04); }

.gallery__placeholder {
	grid-column: 1 / -1;
	text-align:  center;
	padding:     var(--space-20);
	background:  var(--sand);
	border-radius: var(--radius-xl);
	border:      1px dashed rgba(176, 126, 102, .30);
}
.gallery__placeholder p {
	color:       var(--muted);
	font-size:   var(--fs-sm);
	margin-inline: auto;
}

.legal-notice {
	font-size:   var(--fs-xs);
	color:       var(--muted);
	text-align:  center;
	max-width:   60ch;
	margin-inline: auto;
	margin-block-start: var(--space-10);
	padding-block-start: var(--space-6);
	border-block-start: 1px solid rgba(176, 126, 102, .18);
}

/* ==========================================================================
   7 · TESTIMONIOS
   ========================================================================== */
.testimonios__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-6);
}

.testimonio-card {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
}

.testimonio__stars {
	font-size: var(--fs-md);
	color:     var(--tan);
	line-height: 1;
}

.testimonio__text {
	font-family: var(--font-heading);
	font-size:   var(--fs-md);
	font-style:  italic;
	color:       var(--ink);
	line-height: var(--lh-snug);
	flex-grow:   1;
	max-width:   none;
}

.testimonio__footer {
	padding-block-start: var(--space-4);
	border-block-start: 1px solid rgba(176, 126, 102, .18);
}

.testimonio__verified {
	font-size:      var(--fs-xs);
	font-weight:    var(--fw-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--rosegold);
}

/* ==========================================================================
   8 · FAQ — fondo claro, texto legible, hairlines rosegold
   ========================================================================== */

/* Sección: fondo explícito para anular cualquier override de GeneratePress */
.section--faq {
	background-color: var(--cream);
	color:            var(--body-clr);
}

.faq__list {
	max-width:      760px;
	margin-inline:  auto;
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
}

.faq__item {
	background-color: var(--white);
	border-radius:    var(--radius-lg);
	overflow:         hidden;
	box-shadow:       var(--shadow-sm);
}

.faq__question {
	/* Reset explícito — anula estilos heredados de GeneratePress */
	appearance:      none;
	-webkit-appearance: none;
	width:           100%;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--space-6);
	padding:         var(--space-6) var(--space-8);
	background-color: transparent;
	color:           var(--ink);
	border:          none;
	border-radius:   0;
	font-family:     var(--font-heading);
	font-size:       var(--fs-md);
	font-weight:     var(--fw-regular);
	line-height:     var(--lh-snug);
	text-align:      left;
	cursor:          pointer;
	transition:      color var(--transition-fast);
}
.faq__question:hover      { color: var(--terracotta); }
.faq__question:focus-visible {
	outline:        2px solid var(--rosegold);
	outline-offset: -2px;
	border-radius:  var(--radius-md);
}

/* ── Icono + que rota a × ─── */
.faq__icon {
	flex-shrink:  0;
	width:        22px;
	height:       22px;
	border-radius: var(--radius-pill);
	border:       1.5px solid var(--rosegold);
	position:     relative;
	transition:
		transform        var(--transition-base),
		background-color var(--transition-fast),
		border-color     var(--transition-fast);
}
.faq__icon::before,
.faq__icon::after {
	content:       '';
	position:      absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform:     translate(-50%, -50%);
	background:    var(--rosegold);
	border-radius: 2px;
}
.faq__icon::before { width: 10px; height: 1.5px; }                     /* barra H */
.faq__icon::after  { width: 1.5px; height: 10px; }                     /* barra V */

/* Estado abierto: icono rota 45° → + se convierte en × */
.faq__question[aria-expanded="true"] .faq__icon {
	background-color: var(--rosegold);
	border-color:     var(--rosegold);
	transform:        rotate(45deg);
}
.faq__question[aria-expanded="true"] .faq__icon::before,
.faq__question[aria-expanded="true"] .faq__icon::after {
	background: var(--white);
}

/* Separador hairline entre pregunta y respuesta */
.faq__answer {
	background-color: var(--white);
	border-block-start: 1px solid rgba(176, 126, 102, .18);
	padding:          var(--space-5) var(--space-8) var(--space-7);
}
.faq__answer p {
	font-size:   var(--fs-sm);
	font-family: var(--font-body);
	color:       var(--body-clr);
	line-height: var(--lh-normal);
	max-width:   none;
}

/* ==========================================================================
   9 · CTA + CONTACTO
   ========================================================================== */
.cta__wrapper {
	display:   grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap:       clamp(var(--space-10), 5vw, var(--space-20));
}

.cta__block {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            var(--space-4);
}
.cta__block h2 {
	font-size:   clamp(var(--fs-2xl), 3.5vw, var(--fs-3xl));
	line-height: var(--lh-tight);
	color:       var(--white);
}
.cta__block h2 em {
	font-style: italic;
	color:      rgba(255,255,255,.75);
}
.cta__block p {
	font-size:   var(--fs-base);
	color:       rgba(255, 255, 255, .85);
	max-width:   42ch;
}

/* Botón CTA blanco sobre fondo rosegold */
.btn--white {
	background: var(--white);
	color:      var(--clay);
	font-weight: var(--fw-semi);
}
.btn--white:hover {
	background: var(--cream);
	box-shadow: 0 8px 24px rgba(59, 44, 32, .18);
	transform:  translateY(-2px);
}

.contact__card.card {
	background: rgba(250, 247, 241, .95);
	border-color: rgba(255, 255, 255, .40);
}
.contact__card h3 {
	font-size:    var(--fs-xl);
	font-weight:  var(--fw-regular);
	color:        var(--ink);
	margin-block-end: var(--space-6);
}

.contact__list {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-5);
}
.contact__item {
	display:     flex;
	align-items: flex-start;
	gap:         var(--space-3);
	font-size:   var(--fs-sm);
	color:       var(--body-clr);
	line-height: var(--lh-snug);
}
.contact__item-icon {
	flex-shrink:   0;
	width:  20px;
	font-size:     var(--fs-base);
	color:         var(--rosegold);
	margin-block-start: 1px;
}
.contact__item a {
	color:      var(--terracotta);
	transition: color var(--transition-fast);
}
.contact__item a:hover { color: var(--clay); }

.cta__badge {
	font-size:      var(--fs-xs);
	color:          rgba(255, 255, 255, .70);
	letter-spacing: 0.06em;
	margin-block-start: var(--space-2);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.services__grid        { grid-template-columns: repeat(2, 1fr); }
	.proceso__steps        { grid-template-columns: repeat(2, 1fr); }
	.proceso__connector    { display: none; }
}

@media (max-width: 768px) {
	/* Hero: imagen arriba, texto abajo */
	.hero__container {
		grid-template-columns: 1fr;
		grid-template-rows:    auto auto;
		min-height:            auto;
		gap:                   var(--space-10);
	}
	.hero__media  { order: -1; }
	.hero__text   { align-items: center; text-align: center; }
	.hero__heading { max-width: none; }
	.hero__sub    { margin-inline: auto; }
	.hero__actions {
		flex-direction: column;
		width:          100%;
	}
	.hero__actions .btn { width: 100%; justify-content: center; }
	.hero__badge  { justify-content: center; }

	/* Services */
	.services__grid { grid-template-columns: 1fr; }

	/* Enfoque */
	.enfoque__item { grid-template-columns: 56px 1fr; }

	/* Proceso */
	.proceso__steps { grid-template-columns: 1fr; }

	/* Gallery */
	.gallery__grid  { grid-template-columns: repeat(2, 1fr); }

	/* Testimonios */
	.testimonios__grid { grid-template-columns: 1fr; }

	/* CTA */
	.cta__wrapper {
		grid-template-columns: 1fr;
	}
	.cta__block { align-items: center; text-align: center; }
	.cta__block p { margin-inline: auto; }

	/* FAQ */
	.faq__answer { padding-inline-end: 0; }
}

@media (max-width: 480px) {
	.gallery__grid { grid-template-columns: 1fr; }
	.proceso__num-wrap { width: 60px; height: 60px; }
	.proceso__num      { font-size: var(--fs-3xl); }
}