/* ==========================================================================
   TricoRegen GF, the single page (tricoregen.pt)
   Loads after site.css and reuses its tokens, fonts, buttons, form fields,
   photo slots and sticky bar. Every class here is prefixed l-.
   ========================================================================== */

body.l-page { background: var(--paper); }
.l-page h1, .l-page h2, .l-page h3 { text-wrap: balance; }
.l-page p, .l-page li, .l-page dd { text-wrap: pretty; }
.l-page .btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
/* a tap on a phone must not leave a button stuck in its lifted hover state */
@media (hover: none) { .l-page .btn:hover { transform: none; } }
/* on ink, a shadow tinted with ink disappears: use a neutral dark one */
.l-header .btn--primary, .l-story .btn--primary { box-shadow: 0 8px 22px rgba(4,24,26,.35); }
.l-header a:not(.btn):hover, .l-story a:not(.btn):hover { color: var(--text-on-ink); }
.l-page ::selection { background: var(--brand-clay-soft); color: var(--ink-900); }
.l-page { caret-color: var(--brand-teal); }
.l-phone, .l-bill, .l-clinic, .l-footer { font-variant-numeric: tabular-nums; }

.l-wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--pad); }
.l-section { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 6.75rem); }
.l-section--bone { background: var(--bone); }
.l-section--flush { padding-top: 0; }
.l-h2 { font-size: clamp(1.875rem, 4.2vw, 2.875rem); font-weight: 800; letter-spacing: var(--ls-tightest); line-height: 1.06; margin-bottom: 18px; max-width: 20ch; }
.l-lead { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.7vw, 1.1875rem); line-height: 1.65; color: var(--ink-700); max-width: 38rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* --------------------------------------------------------------------------
   Preview-only slots. Hidden on the live domain, outlined locally.
   -------------------------------------------------------------------------- */
html:not(.is-preview) [data-pending] { display: none !important; }
.is-preview [data-pending] { outline: 2px dashed var(--brand-clay); outline-offset: 6px; border-radius: 4px; }
.l-pending-tag {
  display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--brand-clay-wash); color: var(--clay-text-strong);
  font-family: var(--font-label); font-size: .75rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   HEADER on ink
   -------------------------------------------------------------------------- */
.l-header { background: var(--brand-ink); color: var(--text-on-ink); position: relative; z-index: 3; }
.l-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.l-brand { color: var(--text-on-ink); }
.l-brand:hover { color: var(--text-on-ink); }
.l-brand .logo__mark { width: 34px; height: 34px; }
.l-header__actions { display: flex; align-items: center; gap: 18px; }
.l-phone {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; justify-content: center;
  font-weight: 700; font-size: .9375rem; color: var(--text-on-ink);
  transition: color .25s var(--ease-calm);
}
.l-phone svg { width: 17px; height: 17px; color: var(--teal-on-ink); }
.l-phone:hover { color: var(--brand-amber); }
.l-header__cta { min-height: 44px; padding: 10px 20px; font-size: .875rem; }
@media (max-width: 819px) { .l-header__cta { display: none; } }
@media (max-width: 379px) { .l-phone__num { position: absolute; left: -9999px; } }

/* --------------------------------------------------------------------------
   THE STORY, on ink
   -------------------------------------------------------------------------- */
.l-story { position: relative; background: var(--brand-ink); color: var(--text-on-ink); }
/* one soft teal light behind the window, desktop only: on a phone the sticky
   stage needs a flat ink ground or its edges show */
@media (min-width: 900px) {
  .l-story::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 45% at 75% 22%, rgba(47,129,137,.32), rgba(21,70,75,0) 70%);
  }
}
.l-story__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }

/* hero */
.l-intro { padding-block: clamp(2rem, 6vw, 3rem) clamp(1.75rem, 5vw, 2.5rem); }
.l-intro h1 {
  font-size: clamp(2.5rem, 7.6vw, 4.625rem); font-weight: 800;
  letter-spacing: var(--ls-tightest); line-height: 1.01; color: var(--text-on-ink);
  margin-bottom: 20px; max-width: 12ch;
}
/* display:block keeps the approved break after the comma */
.l-intro h1 .accent { display: block; color: var(--brand-amber); }
.l-intro__lead { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.9vw, 1.25rem); line-height: 1.6; color: var(--text-on-ink-muted); max-width: 32rem; margin-bottom: 26px; }
.l-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.l-cta-main { min-height: 56px; padding-inline: 30px; font-size: 1rem; }
.l-textlink {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .9375rem;
  color: var(--text-on-ink); text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: rgba(234,243,242,.35); transition: text-decoration-color .25s var(--ease-calm);
}
.l-textlink:hover { color: var(--text-on-ink); text-decoration-color: var(--brand-amber); }
@media (max-width: 599px) {
  .l-cta-main { width: 100%; }
  .l-intro__actions { gap: 4px 26px; }
}

/* stage */
.l-stage { position: sticky; top: 0; z-index: 2; align-self: start; background: var(--brand-ink); padding: 10px 0 12px; }
.l-stage::after {
  /* the beats slide up under the stage, this softens the edge they pass */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(var(--brand-ink), rgba(21,70,75,0));
}
.l-stage__bar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; min-height: 22px; }
.l-stage__label { font-family: var(--font-label); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-on-ink); }

/* the rail: three rising strands, filled as the sessions pass */
.l-rail { display: inline-flex; align-items: flex-end; gap: 5px; }
.l-rail i { display: block; width: 6px; border-radius: 6px 6px 2px 2px; background: rgba(234,243,242,.16); transition: background-color .6s var(--ease-calm); }
.l-rail i:nth-child(1) { height: 10px; }
.l-rail i:nth-child(2) { height: 16px; }
.l-rail i:nth-child(3) { height: 22px; }
.l-rail[data-step="1"] i:nth-child(1),
.l-rail[data-step="2"] i:nth-child(-n+2),
.l-rail[data-step="3"] i { background: var(--brand-teal-soft); }
.l-rail[data-step="3"] i:nth-child(3) { background: var(--brand-clay); }

/* the window sits in a tray, like a slide in a holder: outer radius = inner + padding */
.l-tray { padding: 6px; border-radius: calc(var(--radius-xl) + 6px); background: rgba(234,243,242,.07); border: 1px solid rgba(234,243,242,.1); box-shadow: 0 24px 60px rgba(4,24,26,.42); }
.l-window {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl); background: var(--card);
  isolation: isolate;
}
.l-window__zoom { position: absolute; inset: 0; transform-origin: 50% 83%; transition: transform 1.3s var(--ease-inout); }
.l-follicle { display: block; width: 100%; height: 100%; }
.l-stage__note { margin-top: 8px; font-family: var(--font-serif); font-style: italic; font-size: .8125rem; color: var(--teal-on-ink); }

/* ---- follicle states. Every follicle is drawn strong; weakness is a scale-down. ---- */
.f path, .f g { transform-box: fill-box; transition: transform 1.1s var(--ease-inout), fill .9s var(--ease-calm), stroke .9s var(--ease-calm); }
.f__sheath { fill: #E2EDED; stroke: #2F8189; stroke-width: 4; transform-origin: 50% 0; }
.f__shaft { fill: #15464B; transform-origin: 50% 100%; }
.f__matrix { fill: #2A5C61; transform-origin: 50% 50%; }
.f__pap { fill: #D58A56; transform-origin: 50% 0; }
.f__sway { transform-origin: 50% 100%; }

/* weakened: the three story follicles, until the sessions reach them */
.f--main .f__sheath { transform: scale(.72, .92); stroke: #6FA9AE; }
.f--main .f__shaft { transform: scale(.55, .66); fill: #56615A; }
.f--main .f__matrix { transform: scale(.62); fill: #7A8077; }
.f--main .f__pap { transform: scale(.5); fill: #E3A878; }
/* the sway amplitude is a registered property, so when a session settles a hair
   the movement dies down instead of snapping still */
@property --amp { syntax: "<angle>"; inherits: true; initial-value: 2.2deg; }
.f__sway { --amp: 2.2deg; transition: --amp 1.4s var(--ease-calm); }
.is-live .f--main .f__sway { animation: sway 3.2s ease-in-out infinite; }
.is-live .f--main:nth-of-type(odd) .f__sway { animation-delay: -1.4s; }

/* session 1 stabilises: the centre hair stops swaying, its sheath firms */
[data-stage="s1"] .f--center .f__sway,
[data-stage="s2"] .f--center .f__sway,
[data-stage="s3"] .f--main .f__sway { --amp: 0deg; }
[data-stage="s1"] .f--center .f__sheath { stroke: #2F8189; transform: scale(.8, .95); }

/* session 2 stimulates the centre follicle; session 3 restores all three */
[data-stage="s2"] .f--center path,
[data-stage="s3"] .f--main path { transform: none; }
[data-stage="s2"] .f--center .f__sheath, [data-stage="s3"] .f--main .f__sheath { stroke: #2F8189; }
[data-stage="s2"] .f--center .f__shaft, [data-stage="s3"] .f--main .f__shaft { fill: #15464B; }
[data-stage="s2"] .f--center .f__matrix, [data-stage="s3"] .f--main .f__matrix { fill: #2A5C61; }
[data-stage="s2"] .f--center .f__pap, [data-stage="s3"] .f--main .f__pap { fill: #D58A56; }
[data-stage="s3"] .f--main .f__shaft { transition-delay: .25s; }
/* the one warm moment: a single clay strand of new growth, as in the mark */
[data-stage="s3"] .f--new .f__shaft { fill: #D58A56; transition-delay: .9s; }

/* the camera: close on the centre follicle for the two sessions that work on it */
[data-stage="s1"] .l-window__zoom,
[data-stage="s2"] .l-window__zoom { transform: scale(1.6); }

/* glows and particles */
.glow, .fx { opacity: 0; transition: opacity .8s var(--ease-calm); }
[data-stage="inject"] .glow--inj, [data-stage="inject"] .fx--inject,
[data-stage="s1"] .glow--amber, [data-stage="s1"] .fx--s1,
[data-stage="s2"] .glow--teal, [data-stage="s2"] .fx--s2 { opacity: 1; }
.glow--inj { transition-delay: .5s; }

.inj__dot { fill: #EAA94E; transform-box: fill-box; }
.inj__ring { fill: none; stroke: #EAA94E; stroke-width: 8; transform-box: fill-box; transform-origin: center; opacity: 0; }
.d2 { animation-delay: -.6s !important; }
.d3 { animation-delay: -1.2s !important; }
.d4 { animation-delay: -1.8s !important; }
.d5 { animation-delay: -2.4s !important; }
.orbit { fill: #EAA94E; transform-box: fill-box; transform-origin: center; }
.o3, .drift { transform-box: fill-box; }

.is-live[data-stage="inject"] .inj__dot { animation: inject 1.8s var(--ease-inout) infinite; }
.is-live[data-stage="inject"] .inj__ring { animation: ripple 1.8s var(--ease-calm) infinite; }
.is-live[data-stage="s1"] .orbit { animation: orbit 14s linear infinite; }
.is-live[data-stage="s1"] .o3 { animation: rise 2.6s var(--ease-calm) infinite; }
.is-live[data-stage="s2"] .drift { animation: drift 3s var(--ease-inout) infinite; }

@keyframes sway { 0%, 100% { transform: rotate(calc(var(--amp) * -1)); } 50% { transform: rotate(var(--amp)); } }
@keyframes inject {
  0% { transform: translateY(-60px); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateY(216px); opacity: 1; }
  70%, 100% { transform: translateY(216px); opacity: 0; }
}
@keyframes ripple {
  0%, 50% { transform: scale(.4); opacity: 0; }
  58% { opacity: .9; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes rise {
  0% { transform: translateY(40px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-120px); opacity: 0; }
}
@keyframes drift {
  0% { transform: translateY(-40px); opacity: 0; }
  25% { opacity: 1; }
  80% { transform: translateY(230px); opacity: 1; }
  100% { transform: translateY(260px); opacity: 0; }
}

/* beats */
.l-beats { position: relative; z-index: 1; padding-bottom: clamp(3.5rem, 8vw, 5rem); }
.l-beat { min-height: 66svh; padding-top: clamp(2rem, 6vw, 3rem); }
.l-beat--last { min-height: 0; }
.l-beat h2 { font-size: clamp(1.75rem, 4.4vw, 2.625rem); font-weight: 800; letter-spacing: var(--ls-tightest); line-height: 1.08; color: var(--text-on-ink); margin-bottom: 14px; max-width: 17ch; }
.l-beat p { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.7; color: var(--text-on-ink-muted); max-width: 31rem; }
.l-beat p + p { margin-top: 12px; }
.l-beat .l-beat__aim { font-style: italic; color: var(--brand-amber); }
.l-beat .l-beat__fine { font-size: .9375rem; color: var(--teal-on-ink); margin-bottom: 24px; }
.l-beat .btn { margin-top: 4px; align-self: flex-start; }
.l-beat > * { transition: opacity .6s var(--ease-calm); }
.js-story .l-beat:not(.is-current) > * { opacity: .38; }

.l-parts { display: grid; gap: 18px; margin: 22px 0 0; max-width: 32rem; }
.l-parts dt { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.0625rem; color: var(--text-on-ink); margin-bottom: 4px; }
.l-parts dt svg { width: 28px; height: 28px; flex: none; }
.l-parts dd { margin: 0 0 0 40px; font-family: var(--font-serif); font-size: 1rem; line-height: 1.6; color: var(--text-on-ink-muted); }

/* desktop: text left, the window right and sticky beside it */
@media (min-width: 900px) {
  .l-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(3rem, 6vw, 5.5rem); }
  .l-intro { grid-column: 1; grid-row: 1; min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: center; padding-block: 3rem 4rem; }
  .l-beats { grid-column: 1; grid-row: 2; }
  .l-stage { grid-column: 2; grid-row: 1 / span 2; position: relative; align-self: stretch; padding: 0; background: none; }
  .l-stage::after { display: none; }
  .l-stage__sticky { position: sticky; top: max(24px, calc(50svh - 290px)); padding-top: 40px; }
  .l-window { aspect-ratio: 6 / 5; border-radius: var(--radius-2xl); }
  .l-tray { padding: 8px; border-radius: calc(var(--radius-2xl) + 8px); }
  .l-beat { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; padding-top: 0; }
  .l-beat--last { min-height: 70svh; }
}

/* --------------------------------------------------------------------------
   VIDEO
   -------------------------------------------------------------------------- */
.l-video__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .l-video__grid { grid-template-columns: .8fr 1.2fr; } }
.l-video .l-lead { margin-bottom: 0; }
.l-video__frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl); background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.l-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-video__cover {
  position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; padding: 16px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: flex-start; gap: 12px;
  /* the poster carries its own text, so the button sits in the corner, clear of it */
  background: linear-gradient(to top, rgba(241,240,234,.85), rgba(241,240,234,0) 45%);
  transition: background-color .3s var(--ease-calm);
}
.l-video__play {
  flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-clay); color: var(--clay-text);
  box-shadow: 0 0 0 7px rgba(213,138,86,.22), 0 8px 20px rgba(143,78,34,.22);
  transition: transform .3s var(--ease-calm);
}
.l-video__play svg { width: 22px; height: 22px; margin-left: 3px; }
.l-video__cover:hover .l-video__play { transform: scale(1.06); }
.l-video__cover:active .l-video__play { transform: scale(.96); }
.l-video__meta { padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(251,250,246,.92); font-family: var(--font-label); font-size: .75rem; font-weight: 600; color: var(--ink-700); }
.l-video__frame.is-playing .l-video__cover { display: none; }

/* --------------------------------------------------------------------------
   PARA QUEM
   -------------------------------------------------------------------------- */
.l-fit { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 760px) { .l-fit { grid-template-columns: 1fr 1fr; } }
.l-fit h3 { font-size: 1.25rem; font-weight: 800; padding-bottom: 14px; border-bottom: 2px solid var(--brand-ink); margin-bottom: 4px; }
.l-fit__col--no h3 { border-bottom-color: var(--line-strong); color: var(--ink-500); }
.l-fit li { position: relative; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--line); font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-700); }
.l-fit li strong { font-family: var(--font-sans); font-weight: 800; color: var(--ink-900); }
.l-fit li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 6px; height: 16px; border-radius: 6px 6px 2px 2px; background: var(--brand-teal); }
.l-fit__col--no li::before { top: 29px; width: 14px; height: 2px; border-radius: 2px; background: var(--ink-400); }

/* --------------------------------------------------------------------------
   PREÇO
   -------------------------------------------------------------------------- */
.l-price { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .l-price { grid-template-columns: 1fr minmax(0, 27rem); } }
.l-price .l-lead { margin-bottom: 16px; }
.l-price__note { font-family: var(--font-serif); font-size: .9375rem; line-height: 1.65; color: var(--ink-500); max-width: 34rem; }
.l-bill-tray { padding: 6px; border-radius: calc(var(--radius-xl) + 6px); background: rgba(21,70,75,.05); border: 1px solid rgba(21,70,75,.07); }
.l-bill { background: var(--card); border-radius: var(--radius-xl); padding: clamp(1.375rem, 3vw, 2rem); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 30px rgba(21,70,75,.08); }
.l-bill__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed var(--line-strong); margin-bottom: 18px; }
.l-bill__what { font-weight: 700; color: var(--ink-900); }
.l-bill__what small { display: block; margin-top: 4px; font-family: var(--font-serif); font-weight: 400; font-size: .875rem; color: var(--ink-500); }
.l-bill__val { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.l-bill__val--free { color: var(--teal-text); }
.l-bill__row--lead { border-bottom-style: solid; }
.l-bill__row--lead .l-bill__val b { font-size: clamp(2.5rem, 6vw, 3.25rem); font-weight: 800; letter-spacing: var(--ls-tightest); line-height: 1; color: var(--brand-ink); margin-right: 4px; }
.l-bill__fine { font-family: var(--font-serif); font-size: .9375rem; line-height: 1.6; color: var(--ink-500); margin-bottom: 22px; }
.l-bill .btn { min-height: 54px; }

/* --------------------------------------------------------------------------
   COMO FUNCIONA A AVALIAÇÃO: four steps on rising strands
   -------------------------------------------------------------------------- */
.l-steps { display: grid; gap: 0; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; counter-reset: step; }
.l-steps li { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 18px; padding-bottom: 26px; }
.l-steps li > :not(.l-steps__strand) { grid-column: 2; }
.l-steps__strand { grid-row: 1 / span 2; justify-self: center; width: 8px; border-radius: 8px 8px 3px 3px; background: var(--brand-teal-soft); margin-top: 4px; }
.l-steps li:nth-child(1) .l-steps__strand { height: 18px; }
.l-steps li:nth-child(2) .l-steps__strand { height: 26px; }
.l-steps li:nth-child(3) .l-steps__strand { height: 34px; background: var(--brand-teal); }
.l-steps li:nth-child(4) .l-steps__strand { height: 42px; background: var(--brand-ink); }
.l-steps h3 { font-size: 1.1875rem; font-weight: 800; margin-bottom: 6px; }
.l-steps p { font-family: var(--font-serif); font-size: 1rem; line-height: 1.6; color: var(--ink-500); max-width: 30rem; }
@media (min-width: 900px) {
  .l-steps { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .l-steps li { grid-template-columns: 1fr; padding: 0; }
  .l-steps li > * { grid-column: 1 !important; }
  .l-steps__strand { grid-row: auto; justify-self: start; align-self: end; margin: 0 0 18px; }
  .l-steps li { grid-template-rows: 42px auto 1fr; }
}

/* --------------------------------------------------------------------------
   FAQ, native details
   -------------------------------------------------------------------------- */
.l-faq-wrap { display: grid; gap: clamp(1rem, 3vw, 3rem); }
@media (min-width: 900px) { .l-faq-wrap { grid-template-columns: .7fr 1.3fr; align-items: start; } }
.l-faq details { border-bottom: 1px solid var(--line); }
.l-faq details:first-child { border-top: 1px solid var(--line); }
.l-faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 44px 20px 0; min-height: 44px;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-900);
  transition: color .25s var(--ease-calm);
}
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary:hover { color: var(--brand-ink); }
.l-faq summary::before, .l-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2.5px; border-radius: 2px;
  background: var(--brand-ink); transition: transform .35s var(--ease-calm), opacity .35s var(--ease-calm);
}
.l-faq summary::after { transform: rotate(90deg); }
.l-faq details[open] summary::after { transform: rotate(0); opacity: 0; }
.l-faq__a { padding: 0 4px 24px; }
.l-faq__a p { font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; color: var(--ink-500); max-width: 42rem; }
/* where the browser supports it, the answer opens smoothly instead of snapping */
@supports (interpolate-size: allow-keywords) {
  .l-faq { interpolate-size: allow-keywords; }
  .l-faq details::details-content { height: 0; overflow: hidden; transition: height .4s var(--ease-calm), content-visibility .4s allow-discrete; }
  .l-faq details[open]::details-content { height: auto; }
}

/* --------------------------------------------------------------------------
   THE CLOSE: avaliação + form
   -------------------------------------------------------------------------- */
.l-close {
  position: relative; overflow: hidden;
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
  background: var(--brand-clay-wash); border: 1px solid var(--brand-clay-soft);
  border-radius: var(--radius-2xl); padding: clamp(1.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) { .l-close { grid-template-columns: 1.05fr .95fr; } }
.l-close h2 { font-size: clamp(1.875rem, 4vw, 2.875rem); font-weight: 800; letter-spacing: var(--ls-tightest); line-height: 1.06; color: var(--brand-ink); margin-bottom: 14px; max-width: 14ch; }
.l-close__lead { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.7vw, 1.1875rem); line-height: 1.65; color: var(--ink-700); margin-bottom: 24px; max-width: 30rem; }
.l-clinic { display: grid; gap: 8px; }
.l-clinic p { display: flex; gap: 12px; align-items: center; font-size: .9375rem; line-height: 1.55; color: var(--ink-700); }
.l-clinic svg { width: 18px; height: 18px; flex: none; color: var(--teal-text); }
.l-clinic a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand-clay-soft); }
.l-clinic a:hover { color: var(--teal-text); text-decoration-color: currentColor; }

.l-form { background: var(--card); border-radius: var(--radius-lg); padding: clamp(1.375rem, 3vw, 2rem); box-shadow: 0 18px 40px rgba(143,78,34,.12), 0 3px 8px rgba(143,78,34,.06); }
.l-form .field label { font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-700); margin-bottom: 8px; }
.l-form .field input:focus { border-color: var(--brand-teal); }
.l-form .btn--ink { min-height: 56px; font-size: 1rem; }
.l-form .consent { margin-bottom: 20px; }
.l-form .field__err--consent { margin-top: -10px; margin-bottom: 14px; }
.l-form .field input[type="email"]:focus { border-color: var(--brand-teal); }

/* timing: three tap targets, one choice, reads as a question not a dropdown */
.l-when { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.l-when legend { padding: 0; margin-bottom: 10px; font-size: .9375rem; font-weight: 600; color: var(--ink-700); }
.l-when__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.l-when label { position: relative; cursor: pointer; }
.l-when input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.l-when__opts span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--white);
  font-size: .9375rem; font-weight: 600; color: var(--ink-700);
  transition: background-color .2s var(--ease-calm), border-color .2s var(--ease-calm), color .2s var(--ease-calm), transform .1s var(--ease-calm);
}
@media (hover: hover) { .l-when__opts label:hover span { border-color: var(--brand-ink); } }
.l-when__opts label:active span { transform: scale(.97); }
.l-when input:checked + span { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--text-on-ink); }
.l-when input:focus-visible + span { outline: 3px solid var(--brand-teal); outline-offset: 2px; }
.l-when .field__err { margin-top: 8px; }
.l-form .consent + .field__err--consent + .consent,
.l-form .field__err--consent + .consent { margin-top: 0; }
.l-form .consent:has(#valor) { margin-bottom: 14px; }
.l-form .consent:has(#valor) label { font-family: var(--font-sans); font-weight: 600; font-size: .9375rem; color: var(--ink-700); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.l-footer { margin-top: clamp(3.5rem, 8vw, 5rem); background: var(--bone); border-top: 1px solid var(--line); padding-block: 2.25rem 7.5rem; font-size: .8125rem; line-height: 1.65; color: var(--ink-500); }
@media (min-width: 820px) { .l-footer { padding-bottom: 2.5rem; } }
.l-footer .logo { margin-bottom: 14px; }
.l-footer .logo__mark { width: 30px; height: 30px; }
.l-footer .logo__wm { font-size: 1.0625rem; }
.l-footer p + p { margin-top: 6px; }
.l-footer a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.l-footer a:hover { color: var(--teal-text); }

.l-page .sticky-bar .btn svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .l-window__zoom, .f path, .f g, .glow, .fx { transition-duration: .2s !important; }
}