/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: var(--s-7) var(--s-6); }
.hero__line { position: absolute; left: 0; bottom: 0; width: 100%; height: 42%; pointer-events: none; }
.hero__line path { fill: none; stroke: var(--c-gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: lhr-draw 2.6s var(--ease) .3s forwards; opacity: .55; }
@keyframes lhr-draw { to { stroke-dashoffset: 0; } }
@keyframes lhr-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__in {
	position: relative;
	width: min(var(--w-header), 100% - 2 * var(--gutter));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(300px, 36rem) minmax(0, 1fr);
	gap: var(--s-7);
	align-items: center;
}
.hero__copy { position: relative; z-index: 1; }
.hero__copy > * { animation: lhr-rise .7s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__copy > :nth-child(5) { animation-delay: .32s; }
.hero__rail { animation: lhr-rise .9s var(--ease) .25s both; }
.hero__kicker { font-weight: 700; color: var(--c-gold); font-size: var(--fs-1); margin-bottom: var(--s-3); }
.hero h1 { font-size: clamp(2rem, 1.3rem + 1.4vw, 2.75rem); line-height: 1.06; }
.hero__proof { margin-top: var(--s-3); font-weight: 800; color: var(--c-gold); }
.hero__lead { margin-top: var(--s-4); font-size: var(--fs-2); color: var(--ink-2); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero__reply { margin-top: var(--s-3); font-size: var(--fs-0); color: var(--ink-2); max-width: 48ch; }
.hero__trust { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-0); font-weight: 600; color: var(--ink-2); }
.hero__trust li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__trust li:not(:first-child)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.hero__trust-google a { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); }
.hero__trust-google a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* the rail: 9:16 portraits, scroll-snap, auto-rotating, bleeds off the right edge */
.rail { position: relative; min-width: 0; }
.rail__track {
	display: flex; gap: var(--s-3);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
	scrollbar-width: none; -ms-overflow-style: none;
	padding-bottom: var(--s-2);
}
.rail__track::-webkit-scrollbar { display: none; }
.hero .rail__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
.hero .rail::after { content: ""; position: absolute; right: calc(-1 * var(--gutter)); top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, transparent, var(--c-ink)); pointer-events: none; }
.rail__item { flex: 0 0 var(--portrait-w); scroll-snap-align: start; }
.rail__item .lhr-media { box-shadow: var(--shadow); }
.rail__nav { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); position: relative; z-index: 1; }
.rail__btn, .rail__play { width: 44px; height: 44px; border: 1.5px solid var(--rule); border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: border-color .2s var(--ease), background .2s var(--ease), opacity .2s; }
.rail__btn:hover, .rail__play:hover { border-color: var(--ink); background: rgba(255,255,255,.06); }
.rail__btn[disabled] { opacity: .35; cursor: default; }
.rail__btn::before { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: -3px; }
.rail__btn[data-rail-prev]::before { transform: rotate(135deg); margin-left: 3px; }
.rail__play { margin-left: auto; width: 36px; height: 36px; }
.rail__play::before { content: ""; width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.rail__play[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }

@media (max-width: 1000px) {
	.hero { padding-top: var(--s-6); }
	.hero__in { grid-template-columns: 1fr; gap: var(--s-6); }
	.hero .rail { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
	.hero .rail::after { display: none; }
	.hero .rail__track { margin-right: 0; padding-inline: var(--gutter); }
	.hero .rail__nav { padding-inline: var(--gutter); }
	.hero .rail__item { flex-basis: min(64vw, 300px); }
}

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--rule); background: var(--bg); padding-block: var(--s-3); }
.ticker__track { display: flex; width: max-content; animation: lhr-ticker 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; gap: var(--s-6); padding-right: var(--s-6); white-space: nowrap; font-weight: 600; font-size: var(--fs-0); }
.ticker__list li { display: inline-flex; align-items: center; gap: var(--s-3); }
.ticker__list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
@keyframes lhr-ticker { to { transform: translateX(-50%); } }

/* ---------- sections shared ---------- */
.sec__head--row { align-items: end; }
.sec__head--row .sec__lead { margin-top: 0; max-width: 40ch; }

/* ---------- services ---------- */
.services { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.service { position: relative; display: flex; flex-direction: column; padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service.is-featured { border-color: var(--bg); box-shadow: var(--shadow); }
.service__tag { position: absolute; top: var(--s-4); right: var(--s-4); background: var(--c-gold); color: var(--c-ink); font-size: var(--fs-0); font-weight: 800; padding: 0.3em 0.8em; border-radius: 999px; }
.service h3 { font-size: var(--fs-3); }
.service.is-featured h3 { padding-right: 7.5rem; }
.service__desc { margin-top: var(--s-3); color: var(--ink-2); flex: 1; }
.service__meta { margin-top: var(--s-3); font-size: var(--fs-0); font-weight: 600; color: var(--ink-2); }
.service__price { margin-top: var(--s-4); display: flex; align-items: baseline; gap: var(--s-2); }
.price__was { text-decoration: line-through; color: var(--ink-2); font-weight: 500; font-size: var(--fs-2); }
.price__now { font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.service__cta { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.service__cta .btn { width: 100%; }
.service__alt { font-size: var(--fs-0); color: var(--ink-2); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.service__alt:hover { color: var(--ink); }
.services__foot { margin-top: var(--s-5); color: var(--ink-2); font-size: var(--fs-0); max-width: 72ch; }
.sec--everyone { background: var(--c-cloud); }
.sec--everyone .sec__lead { max-width: 52ch; }
.services--three { grid-template-columns: repeat(3, 1fr); }
.price__alt { font-size: var(--fs-0); font-weight: 600; color: var(--ink-2); }
@media (max-width: 960px) { .services, .services--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services, .services--three { grid-template-columns: 1fr; } }

/* ---------- results: a second carousel, inside the content width ---------- */
.results__rail { width: min(var(--w-content), 100% - 2 * var(--gutter)); margin: var(--s-6) auto 0; }
.results__rail .rail__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
.results__rail::after { content: ""; position: absolute; right: calc(-1 * var(--gutter)); top: 0; bottom: 0; width: 14%; background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; }
.sec--results .sec__cta { border-top-color: var(--rule); }
@media (max-width: 1000px) {
	.results__rail { width: 100%; margin-inline: 0; }
	.results__rail::after { display: none; }
	.results__rail .rail__track { margin-right: 0; padding-inline: var(--gutter); }
	.results__rail .rail__nav { padding-inline: var(--gutter); }
	.results__rail .rail__item { flex-basis: min(64vw, 300px); }
}

/* ---------- a WhatsApp + Call pair that closes a section ---------- */
.sec__cta { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.sec__cta--tight { margin-top: var(--s-4); padding-top: 0; border-top: 0; }
.sec__cta-text { flex: 1 1 100%; max-width: 60ch; color: var(--ink-2); margin-bottom: var(--s-1); }
@media (min-width: 900px) { .sec__cta-text { flex: 1 1 24ch; } }
.faq__cta { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.sec--how .sec__cta { grid-column: 1; }

/* ---------- WhatsApp band ---------- */
.cta { background: var(--c-wa); color: var(--c-white); padding-block: var(--s-7); }
.cta__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--s-6); align-items: center; }
.cta h2 { color: var(--c-white); }
.cta__text { margin-top: var(--s-3); max-width: 60ch; color: rgba(255,255,255,.88); }
.cta__actions { display: grid; justify-items: start; gap: var(--s-3); }
.cta__actions .btn--wa { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.cta__actions .btn--wa:hover { background: var(--c-cloud); border-color: var(--c-cloud); }
.cta__tel { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) { .cta__in { grid-template-columns: 1fr; } }

/* ---------- how it works ---------- */
.sec--how .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--s-7); align-items: start; }
.sec--how .sec__head { grid-column: 1 / -1; }
.steps { position: relative; display: grid; gap: var(--s-5); }
.steps::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 2px; background: var(--rule); }
.steps::after { content: ""; position: absolute; left: 22px; top: 22px; width: 2px; height: calc((100% - 44px) * var(--progress, 0)); background: var(--c-accent); transition: height .4s var(--ease); }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-4); }
.step__n { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--bg); border: 2px solid var(--rule); color: var(--ink-2); position: relative; z-index: 1; transition: border-color .3s, color .3s, background .3s; }
.step.is-on .step__n { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-white); }
.step h3, .step p { grid-column: 2; }
.step h3 { font-size: var(--fs-3); line-height: 44px; }
.step p { margin-top: var(--s-2); color: var(--ink-2); max-width: 56ch; }
.how__media { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
@media (max-width: 900px) {
	.sec--how .wrap { grid-template-columns: 1fr; gap: var(--s-6); }
	.how__media { position: static; max-width: none; width: 100%; }
	.how__media .lhr-media { aspect-ratio: 4 / 5; }
}

/* ---------- membership ---------- */
.sec--membership { background: var(--c-cloud); }
.plans { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg); }
.plan.is-featured { border-color: var(--bg); transform: translateY(-8px); box-shadow: var(--shadow); }
.plan__badge { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-5); background: var(--c-gold); color: var(--c-ink); font-size: var(--fs-0); font-weight: 800; padding: 0.35em 0.9em; border-radius: 999px; }
.plan__name { font-size: var(--fs-3); }
.plan__price { margin-top: var(--s-3); display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan__prefix { color: var(--ink-2); }
.plan__amount { font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plan__per { color: var(--ink-2); }
.plan__summary { margin-top: var(--s-3); color: var(--ink-2); }
.plan__perks { margin-top: var(--s-4); display: grid; gap: var(--s-2); flex: 1; }
.plan__perks li { position: relative; padding-left: 1.6em; font-size: var(--fs-0); line-height: 1.5; }
.plan__perks li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.6em; height: 0.35em; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg); }
.plan.is-featured .plan__perks li::before { border-color: var(--c-gold); }
.plan__save { margin-top: var(--s-4); font-size: var(--fs-0); font-weight: 700; color: var(--c-accent); }
.plan.is-featured .plan__save { color: var(--c-gold); }
.plan .btn { margin-top: var(--s-3); }
.plans__foot { margin-top: var(--s-5); color: var(--ink-2); font-size: var(--fs-0); max-width: 72ch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; } .plan.is-featured { order: -1; transform: none; } }

/* ---------- salon ---------- */
.salon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.salon__media .lhr-media { box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.salon__points { margin-top: var(--s-5); max-width: 600px; }
.salon__points li { padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.salon__points li:last-child { border-bottom: 1px solid var(--rule); }
.stats { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, auto); gap: var(--s-5); justify-content: start; }
.stat__n { display: block; font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__l { display: block; margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs-0); }
.salon__addr { margin-top: var(--s-5); color: var(--ink-2); }
.salon__addr a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .salon { grid-template-columns: 1fr; gap: var(--s-6); } .salon__media { max-width: none; width: 100%; order: 2; }
.salon__media .lhr-media { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- reviews ---------- */
.gscore { display: inline-flex; align-items: center; gap: var(--s-3); }
.gscore__text { color: var(--ink-2); }
.gscore:hover .gscore__text { text-decoration: underline; text-underline-offset: 3px; }
.reviews { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.review { padding: var(--s-5); background: var(--c-cloud); border-radius: var(--radius-lg); position: relative; }
.review__stars { display: block; color: var(--c-gold); letter-spacing: 2px; font-size: 1rem; line-height: 1; margin-bottom: var(--s-3); }
.review__when, .review__src { font-weight: 500; color: var(--ink-2); }
.review__when::before, .review__src::before { content: " · "; }
.reviews__cta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.review__text { text-wrap: pretty; }
.review__meta { margin-top: var(--s-3); font-size: var(--fs-0); font-weight: 700; }
@media (max-width: 960px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.sec--faq { background: var(--c-cloud); }
.faq { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: var(--s-7); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.faq__head .btn { margin-top: var(--s-4); }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__item summary { list-style: none; cursor: pointer; position: relative; padding: var(--s-4) 3rem var(--s-4) 0; font-weight: 700; font-size: var(--fs-2); line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 0.6rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__a { padding-bottom: var(--s-4); color: var(--ink-2); }
@media (max-width: 800px) { .faq { grid-template-columns: 1fr; gap: var(--s-5); } .faq__head { position: static; } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); gap: var(--s-8); align-items: start; }
.contact__alt { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.contact__note { margin-top: var(--s-3); font-size: var(--fs-0); color: var(--ink-2); max-width: 46ch; }
.contact__addr { margin-top: var(--s-5); color: var(--ink-2); }
.contact__addr a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form { position: relative; background: var(--bg-2); padding: var(--s-5); border-radius: var(--radius-lg); border: 1px solid var(--rule); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
.form__field { display: grid; gap: var(--s-1); }
.form__field.is-wide { grid-column: 1 / -1; }
.form__field label { font-size: var(--fs-0); font-weight: 600; color: var(--ink-2); }
.form__field input, .form__field select, .form__field textarea {
	width: 100%; padding: 0.75em 0.9em; border: 1px solid var(--rule); border-radius: var(--radius);
	background: var(--bg); color: var(--ink); min-height: 48px;
}
.form__field textarea { resize: vertical; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { outline: 2px solid var(--c-white); outline-offset: 0; border-color: var(--c-white); }
.form__field.is-invalid input, .form__field.is-invalid select, .form__field.is-invalid textarea { border-color: var(--c-error-dark); }
.form__field input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
.form__err { color: var(--c-error-dark); font-size: var(--fs-0); min-height: 1.2em; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.form__status { font-size: var(--fs-0); color: var(--ink-2); }
.form__status.is-ok { color: var(--c-white); font-weight: 600; }
.form__status.is-err { color: var(--c-error-dark); }
.form__privacy { margin-top: var(--s-4); font-size: var(--fs-0); color: var(--ink-2); }
.form.is-sent .form__grid, .form.is-sent .form__foot .btn, .form.is-sent .form__privacy { display: none; }
.form.is-sent .form__status { font-size: var(--fs-2); }
.form.is-busy .btn { opacity: .6; pointer-events: none; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: var(--s-6); } }
@media (max-width: 560px) { .form { padding: var(--s-4); } .form__grid { grid-template-columns: 1fr; } }

/* ---------- mobile sticky bar ---------- */
.sticky { display: none; }
@media (max-width: 860px) {
	.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform .3s var(--ease); }
	.sticky.is-shown { transform: none; }
	.sticky__item { display: grid; place-items: center; min-height: 56px; background: var(--c-white); font-weight: 700; font-size: var(--fs-0); color: var(--c-ink); }
	.sticky__item--wa { background: var(--c-wa); color: var(--c-white); }
	.sticky__item--cta { background: var(--c-accent); color: var(--c-white); }
	body { padding-bottom: 56px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.hero__line path { animation: none; stroke-dashoffset: 0; }
	.hero__copy > *, .hero__rail { animation: none; }
	.ticker__track { animation: none; }
	.service, .plan.is-featured, .step__n, .steps::after, .sticky { transition: none; }
	.service:hover { transform: none; }
}
.cta .btn--call { border-color: var(--c-white); color: var(--c-white); }
.cta .btn--call:hover { background: var(--c-white); color: var(--c-ink); }
.is-dark .btn--call { color: var(--c-white); }