/* ------------------------------------------------------------------
   sections · composição de cada seção (mobile primeiro)
   ------------------------------------------------------------------ */
[data-theme] { background: var(--bg); color: var(--fg); }

section h2 strong, section h1 strong { font-weight: 600; }

/* ==================================================================
   01 · HERO · a balança
   ================================================================== */
.hero {
  position: relative; display: flex; flex-direction: column;
  padding: calc(4.8rem + env(safe-area-inset-top)) var(--margin) 3rem;
}
.hero__kicker { margin-bottom: 1.5rem; }

.beam {
  --pan-w: 100%;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "t t" "l r";
  column-gap: var(--gutter); align-items: end;
  padding-bottom: 0; margin-bottom: 4.2rem;
}
.hero__title {
  grid-area: t; margin-bottom: 1.5rem;
  font-size: var(--fs-hero); font-weight: 300; line-height: .9; letter-spacing: -.042em;
}
.hero__line { display: block; }
.hero__line + .hero__line { font-weight: 600; }

.pan { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nevoa-2); }
.pan--l { grid-area: l; }
.pan--r { grid-area: r; }
.pan img { width: 100%; height: 100%; object-fit: cover; }
.pan--r img { object-position: 38% 30%; }

/* o fiel da balança: a linha, o apoio e o nome */
.beam__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--petroleo); transform-origin: 50% 50%;
}
.beam__line::before, .beam__line::after {
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--petroleo);
}
.beam__line::before { left: 0; }
.beam__line::after { right: 0; }
.beam__fulcrum {
  position: absolute; left: 50%; bottom: -3.4rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .55rem; color: var(--petroleo); font-weight: 600;
}
.beam__fulcrum i {
  display: block; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--petroleo);
}

.hero__foot { display: grid; gap: 1.75rem; }
.hero__lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--fg-soft); max-width: 31rem; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

.rating { display: inline-flex; align-items: center; gap: .8rem; }
.rating__n { font-size: 2.3rem; font-weight: 300; letter-spacing: -.035em; line-height: 1; }
.rating__t { font-size: .78rem; line-height: 1.3; color: var(--muted); }
.rating:hover .rating__n { color: var(--petroleo); }

/* estados iniciais (só com JS, antes do boot) */
.js .hero__line { visibility: hidden; }
.js .pan { clip-path: inset(100% 0 0 0); }
.js .beam__line { transform: scaleX(0); }
.js .beam__fulcrum, .js .hero__kicker, .js .hero__foot { opacity: 0; }
.hero--static .hero__line { visibility: visible !important; }
.hero--static .pan { clip-path: none !important; }
.hero--static .beam__line { transform: none !important; }
.hero--static .beam__fulcrum, .hero--static .hero__kicker, .hero--static .hero__foot { opacity: 1 !important; }

@media (min-width: 900px) {
  .hero { min-height: 100svh; padding-top: clamp(5.6rem, 12vh, 7.5rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
  .hero__kicker { margin-bottom: clamp(1.5rem, 4vh, 3rem); }
  .beam {
    /* o prato é limitado pela altura também, para a abertura inteira caber na primeira tela */
    --pan-w: clamp(12rem, min(21vw, 38svh), 24rem);
    grid-template-columns: var(--pan-w) 1fr var(--pan-w); grid-template-areas: "l t r";
    column-gap: var(--gutter); margin-bottom: clamp(4.5rem, 10vh, 6.5rem);
  }
  .hero__title { text-align: center; margin-bottom: clamp(1.25rem, 3vh, 2rem); font-size: clamp(3rem, 7.2vw, 8.6rem); }
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }
}

/* ==================================================================
   02 · MÉTODO · o medidor
   ================================================================== */
.method { padding: var(--section-gap) var(--margin); }
.method__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; }
.method__head .section-no { grid-column: 1 / -1; }
.method__title { grid-column: 1 / -1; font-size: var(--fs-display-l); }
.method__lede { grid-column: 1 / -1; max-width: 34rem; }

.dose { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: 2.5rem; }
.gauge { display: none; }
.steps { display: grid; gap: 2rem; }
.step { display: grid; gap: .45rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.step__name { font-size: var(--fs-display-s); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.step__text { color: var(--fg-soft); max-width: 30rem; }
.step__text strong { font-weight: 600; color: var(--fg); }
/* barra da dose no mobile: vazia → preenchida conforme o passo */
.step__bar { position: relative; display: block; height: 6px; margin-top: .6rem; background: var(--nevoa-2); max-width: 20rem; overflow: hidden; }
.step__bar::after {
  content: ""; position: absolute; inset: 0; background: var(--petroleo);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-editorial) .2s;
}
.step:first-child .step__bar::after { background: repeating-linear-gradient(135deg, var(--cinza-2) 0 2px, transparent 2px 6px); }
.step.is-in .step__bar::after { transform: scaleX(var(--to)); }

.dose__photo { margin: 0; max-width: 34rem; }
.dose__photo img { width: 100%; }
.ba-cap { display: grid; grid-template-columns: 1fr 1fr; margin-top: .65rem; }
.ba-cap span + span { padding-left: .9rem; border-left: 1px solid var(--hair); }
.dose__caption { margin-top: .6rem; font-size: var(--fs-small); color: var(--muted); }

.method__quote {
  margin-top: clamp(4rem, 9vw, 8rem); max-width: 22ch;
  font-size: var(--fs-display-m); font-weight: 300; line-height: 1.08; letter-spacing: -.035em;
}
.method__sign { margin-top: 1.25rem; }

@media (min-width: 900px) {
  .method__title { grid-column: 1 / 8; }
  .method__lede { grid-column: 8 / 13; align-self: end; }

  .dose {
    height: 100svh; min-height: 640px; margin-top: clamp(2rem, 4vw, 3rem);
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center;
  }
  .gauge {
    grid-column: 1 / 3; display: grid; grid-template-columns: 1.4rem 3.2rem; grid-template-rows: 1fr auto;
    column-gap: .6rem; row-gap: 1rem; height: min(64svh, 38rem); align-self: center;
  }
  .gauge__marks { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: .78rem; color: var(--muted); margin: -.45em 0; }
  .gauge__tube { position: relative; border: 1px solid var(--fg); border-top-width: 0; color: rgba(19, 24, 25, .32); --level: 55; --old: 55; }
  .gauge__scale { position: absolute; inset: 0; }
  .gauge__old {
    position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--old) * 1%);
    background: repeating-linear-gradient(135deg, var(--cinza-2) 0 2px, transparent 2px 7px);
  }
  .gauge__fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill, 0) * 1%); background: var(--petroleo); }
  .gauge__level { position: absolute; left: -.6rem; right: -.6rem; bottom: calc(var(--level) * 1%); height: 1px; background: var(--petroleo); }
  .gauge__readout {
    position: absolute; left: calc(100% + .9rem); top: 0; transform: translateY(-50%);
    display: flex; align-items: baseline; gap: .3rem; white-space: nowrap;
  }
  .gauge__readout b { font-size: 2.6rem; font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--fg); }
  .gauge__readout small { font-size: .8rem; color: var(--muted); }
  .gauge__readout.is-word b { font-size: var(--fs-label); font-weight: 500; font-stretch: 88%; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
  .gauge__readout.is-word small { display: none; }
  .gauge__unit { grid-column: 1 / -1; }

  .steps { grid-column: 4 / 8; gap: 0; align-self: center; }
  .step { padding: 1.5rem 0 1.6rem; opacity: .26; transition: opacity var(--m-med) var(--ease-standard); }
  .step.is-active { opacity: 1; }
  .step__bar { display: none; }

  .dose__photo { grid-column: 9 / 13; max-width: none; align-self: center; }

  .method__quote { margin-left: calc((100% - 11 * var(--gutter)) / 12 * 3 + 3 * var(--gutter)); }
  .method__sign { margin-left: calc((100% - 11 * var(--gutter)) / 12 * 3 + 3 * var(--gutter)); }

  /* sem pin (movimento reduzido): medidor parado no fim da história */
  .dose--static { height: auto; }
  .dose--static .step { opacity: 1; }
  .dose--static .gauge__tube { --level: 100; --fill: 100; --old: 0; }
}

/* ==================================================================
   03 · TRATAMENTOS · fichas
   ================================================================== */
.tx { padding: var(--section-gap) var(--margin); }
.tx__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.tx__head .section-no { grid-column: 1 / -1; }
.tx__title { grid-column: 1 / -1; font-size: var(--fs-display-l); }
.tx__lede { grid-column: 1 / -1; max-width: 34rem; }

.acc { border-top: 1px solid var(--fg); }
.acc__item { border-bottom: 1px solid var(--hair); }
.acc__h { font: inherit; letter-spacing: normal; }
.acc__btn {
  width: 100%; display: grid; grid-template-columns: 2.6rem 1fr 1.6rem; align-items: baseline; column-gap: .75rem; row-gap: .2rem;
  padding: 1.35rem 0 1.4rem; text-align: left;
}
.acc__no { font-size: .8rem; color: var(--muted); }
.acc__name {
  font-size: var(--fs-display-s); font-weight: 400; letter-spacing: -.03em; line-height: 1.12;
  transition: transform var(--m-med) var(--ease-editorial), color var(--m-fast) var(--ease-standard);
}
.acc__tag { grid-column: 2; grid-row: 2; font-size: var(--fs-small); color: var(--muted); }
.acc__icon { grid-column: 3; grid-row: 1; position: relative; width: 1rem; height: 1rem; align-self: center; justify-self: end; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor;
  transition: transform var(--m-med) var(--ease-editorial);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__item.is-open .acc__icon::after { transform: rotate(0deg); }
.acc__btn:hover .acc__name, .acc__item.is-open .acc__name { color: var(--petroleo); }
.acc__btn:hover .acc__name { transform: translateX(.35rem); }

.acc__panel { overflow: hidden; }
.acc--js .acc__item:not(.is-open) .acc__panel { height: 0; }
.acc__inner { display: grid; gap: 1.5rem; padding: 0 0 2.25rem 3.35rem; }
.acc__text { font-size: var(--fs-lede); line-height: 1.45; color: var(--fg-soft); max-width: 36rem; }
.sheet { display: grid; border-top: 1px solid var(--hair); max-width: 44rem; }
.sheet > div { display: grid; grid-template-columns: 6.25rem 1fr; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 600px) { .sheet > div { grid-template-columns: 8.5rem 1fr; gap: 1rem; } }
.sheet dd { font-size: var(--fs-small); }
.acc__inner .link--arrow { justify-self: start; }

@media (min-width: 900px) {
  .tx__title { grid-column: 1 / 8; }
  .tx__lede { grid-column: 8 / 13; align-self: end; }
  .acc__btn { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, .8fr) 2rem; padding: 1.6rem 0 1.65rem; }
  .acc__tag { grid-column: 3; grid-row: 1; }
  .acc__icon { grid-column: 4; }
  .acc__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); padding: .25rem 0 2.75rem 5.25rem; }
  .acc__text { grid-column: 1; }
  .sheet { grid-column: 2; grid-row: 1 / 3; }
  .acc__inner .link--arrow { grid-column: 1; }
}

/* ==================================================================
   04 · HOMENS
   ================================================================== */
.men { padding: var(--section-gap) var(--margin); }
.men__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.men__head .section-no { grid-column: 1 / -1; }
.men__title { grid-column: 1 / -1; font-size: var(--fs-display-l); }
.men__lede { grid-column: 1 / -1; max-width: 34rem; }
.men__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; }
/* na sálvia o antes e depois precisa de uma borda clara para não se misturar ao fundo */
.men__fig img { outline: 1px solid rgba(19, 24, 25, .12); outline-offset: -1px; }
.men__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margin)); padding: 0 var(--margin) .5rem;
  scroll-padding-inline: var(--margin);
  scrollbar-width: none;
}
.men__strip::-webkit-scrollbar { display: none; }
.men__fig { margin: 0; scroll-snap-align: start; }
.men__fig figcaption { display: grid; gap: .25rem; margin-top: .85rem; }
.men__fig figcaption span:last-child { font-size: var(--fs-small); color: var(--fg-soft); }

@media (min-width: 900px) {
  .men__title { grid-column: 1 / 7; }
  .men__lede { grid-column: 7 / 13; align-self: end; }
  .men__links { grid-column: 7 / 13; }
  .men__strip { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
}

/* ==================================================================
   05 · RESULTADOS · grade com filtros
   ================================================================== */
.results { padding: var(--section-gap) var(--margin); }
.results__head { display: grid; gap: 1.75rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.results__title { font-size: var(--fs-display-l); }
/* no celular a grade vira faixa deslizável: 11 antes e depois em coluna seriam 5 000 px de rolagem */
.grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin);
  margin: 0 calc(-1 * var(--margin)); padding: 0 var(--margin) .5rem; scrollbar-width: none;
}
.grid::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; }
.results__swipe { margin-top: 1rem; }
.card figure { margin: 0; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--nevoa-2); }
.card figcaption { display: grid; gap: .3rem; margin-top: .8rem; }
.card__t { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-soft); max-width: 26rem; }
.card[hidden] { display: none; }
.results__note { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--hair); font-size: var(--fs-small); color: var(--muted); max-width: 44rem; }

@media (min-width: 600px) {
  .grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 2.25rem var(--gutter); }
  .results__swipe { display: none; }
}
@media (min-width: 900px) {
  .results__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .results__head .section-no { grid-column: 1 / -1; }
  .results__title { grid-column: 1; }
  .filters { grid-column: 2; justify-content: flex-end; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--gutter); }
}
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==================================================================
   06 · AVALIAÇÕES
   ================================================================== */
.reviews { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.reviews__score { grid-column: 1 / -1; display: grid; gap: 1.5rem; align-content: start; }
.score { display: flex; align-items: flex-end; gap: 1rem; }
.score__n { font-size: clamp(6rem, 17vw, 15rem); font-weight: 200; line-height: .8; letter-spacing: -.05em; }
.score__t { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); padding-bottom: .6rem; }
.reviews__list { grid-column: 1 / -1; border-top: 1px solid var(--fg); }
.review { padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--hair); display: grid; gap: .85rem; }
.review blockquote { font-size: var(--fs-display-s); font-weight: 300; line-height: 1.22; letter-spacing: -.025em; text-wrap: pretty; }

@media (min-width: 900px) {
  .reviews__score { grid-column: 1 / 6; position: sticky; top: 7rem; align-self: start; }
  .reviews__list { grid-column: 7 / 13; }
}

/* ==================================================================
   07 · DR. BRUNO
   ================================================================== */
.doc { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; }
.doc__photo { grid-column: 1 / -1; margin: 0; }
.doc__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 30% 30%; }
.doc__photo figcaption { margin-top: .7rem; }
.doc__text { grid-column: 1 / -1; display: grid; gap: 1.25rem; align-content: center; }
.doc__name { font-size: var(--fs-display-xl); line-height: .86; letter-spacing: -.045em; }
.doc__role { font-size: var(--fs-display-s); font-weight: 300; line-height: 1.2; letter-spacing: -.025em; max-width: 24ch; }
.doc__reg { color: var(--petroleo); }
.doc__body { color: var(--fg-soft); max-width: 31rem; }
.doc__quote { font-size: var(--fs-display-s); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; padding: 1.2rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); max-width: 30rem; }
.doc__text .link--arrow { justify-self: start; }

@media (min-width: 900px) {
  .doc__photo { grid-column: 1 / 6; }
  .doc__text { grid-column: 7 / 13; }
}

/* ==================================================================
   08 · ONDE
   ================================================================== */
.where { padding: var(--section-gap) var(--margin); border-top: 1px solid var(--hair); }
.where__title { font-size: var(--fs-display-l); margin-top: 1.75rem; }
.where__grid { display: grid; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--fg); }
.where__grid > div { padding: 1.3rem 0 1.5rem; border-bottom: 1px solid var(--hair); display: grid; gap: .6rem; }
.where__grid dd { line-height: 1.55; }
.where__note { margin-top: 1.75rem; }

@media (min-width: 900px) {
  .where__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
  .where__grid > div { border-bottom: 0; padding-top: 1.5rem; }
}

/* ==================================================================
   09 · CTA
   ================================================================== */
.cta { padding: clamp(6rem, 13vw, 12rem) var(--margin) clamp(4.5rem, 8vw, 7rem); }
.cta__title { font-size: clamp(2.8rem, 7.4vw, 8.8rem); line-height: .9; letter-spacing: -.04em; }
.cta__row {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem 3rem;
}
.cta__hint { font-size: var(--fs-lede); line-height: 1.45; color: var(--fg-soft); }
.cta__phone { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 300; letter-spacing: -.03em; color: var(--fg); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* ==================================================================
   FOOTER
   ================================================================== */
.footer { padding: clamp(4rem, 8vw, 6.5rem) var(--margin) 2rem; }
.footer__grid { display: grid; gap: 3rem; }
.footer__name { font-size: clamp(2.6rem, 6vw, 5.5rem); font-weight: 300; line-height: .9; letter-spacing: -.04em; }
.footer__tag { margin-top: 1rem; }
.footer__info { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gutter); }
.footer__info dt { margin-bottom: .8rem; }
.footer__info dd { font-size: var(--fs-small); line-height: 1.7; color: var(--fg-soft); }
.footer__info dd a[data-wa] { white-space: nowrap; }
.footer__base { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--hair); display: grid; gap: .75rem; }
.footer__demo { max-width: 52rem; text-transform: none; letter-spacing: .01em; font-stretch: 100%; }

@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 5fr 7fr; align-items: end; }
  .footer__info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__base { grid-template-columns: 1fr auto; align-items: start; }
}