/* ============================================================================
   Dra. Eduarda Coelho · Dermatologia
   Sistema visual conforme brand-brief-eduarda-coelho.md (V1.0 · Abril 2026)
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* Paleta oficial */
  --sage:        #9DAA92;   /* primária */
  --deep-sage:   #6F7E66;   /* contraste */
  --pearl:       #C8D2BC;   /* suporte */
  --cream:       #F0EEE3;   /* fundo */
  --charcoal:    #3A3F36;   /* texto */
  --terracota:   #C4987C;   /* acento — decorativo, nunca texto sobre creme */

  /* Derivados (fora do brief) — necessários para contraste AA em texto pequeno */
  --sage-ink:    #4F5A48;   /* Deep Sage escurecido · 6.2:1 sobre creme */
  --ink-soft:    #4A5046;   /* Charcoal aberto para texto de apoio */
  --cream-soft:  #F7F6F0;   /* superfície levemente acima do fundo */
  --hairline:    rgba(111, 126, 102, .28);

  /* Tipografia */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mark:    "Italiana", "Cormorant Garamond", Georgia, serif;
  --body:    "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* Métrica */
  --shell-max: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section: clamp(4.5rem, 11vw, 9rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ BASE -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure, blockquote, address { margin: 0; }
section[id] { scroll-margin-top: 5.5rem; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sage-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: .5rem;
  z-index: 100;
  background: var(--charcoal);
  color: var(--cream);
  padding: .7rem 1.1rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: .75rem; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------- TIPOGRAFIA -- */
.eyebrow {
  font-family: var(--body);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: 1.4rem;
}
.eyebrow--claro { color: var(--pearl); }

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--charcoal);
}
.display--claro { color: var(--cream); }
.display em { font-style: italic; font-weight: 300; color: var(--deep-sage); }
.display--claro em { color: var(--pearl); }

/* --------------------------------------------------------------- BOTÕES -- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--sage-ink);
  --btn-bd: var(--sage-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .55rem;
  padding: .95rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--body);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), transform .45s var(--ease);
}
.btn--solid { --btn-bg: var(--sage-ink); --btn-fg: var(--cream); --btn-bd: var(--sage-ink); }
.btn--solid:hover { --btn-bg: var(--charcoal); --btn-bd: var(--charcoal); }
.btn--ghost:hover { --btn-bg: var(--sage-ink); --btn-fg: var(--cream); }
.btn--claro { --btn-bg: var(--cream); --btn-fg: var(--charcoal); --btn-bd: var(--cream); }
.btn--claro:hover { --btn-bg: transparent; --btn-fg: var(--cream); }
.btn--bloco { width: 100%; }

/* Estado enquanto WHATSAPP_NUMBER estiver vazio (ver script.js).
   Sem opacidade: o botão fica visivelmente inativo mas o texto mantém contraste AA. */
.btn.is-pending {
  --btn-bg: var(--pearl);
  --btn-fg: var(--charcoal);
  --btn-bd: var(--pearl);
  cursor: default;
}
.btn.is-pending:hover { --btn-bg: var(--pearl); --btn-fg: var(--charcoal); --btn-bd: var(--pearl); }
.btn--solid.is-pending::after,
.btn--claro.is-pending::after {
  content: "em breve";
  flex-basis: 100%;
  text-align: center;
  margin-top: .3rem;
  font-size: .82em;
  letter-spacing: .12em;
  opacity: .72;
}
.social a.is-pending { cursor: default; }

.link-quiet {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: .3rem;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.link-quiet:hover { color: var(--charcoal); border-color: var(--sage-ink); }

.link-underline {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sage-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: .25rem;
  transition: color .4s var(--ease);
}
.link-underline:hover { color: var(--charcoal); }
.link-underline--claro { color: var(--pearl); }
.link-underline--claro:hover { color: var(--cream); }
.link-underline__seta { font-size: .7em; }

/* ---------------------------------------------------------------- HEADER -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(240, 238, 227, .88);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .9rem;
}
.site-header__logo { display: block; line-height: 0; }
.site-header__logo img { width: clamp(150px, 34vw, 195px); }

.site-nav { display: none; gap: clamp(1.5rem, 3vw, 2.75rem); }
.site-nav a {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.site-nav a:hover { color: var(--charcoal); border-bottom-color: var(--sage-ink); }
.site-header__cta { display: none; padding: .7rem 1.35rem; font-size: .72rem; }

/* ------------------------------------------------------------------ HERO -- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 9vw, 6.5rem) var(--section);
  overflow: hidden;
}

.hero__pearl-bleed {
  position: absolute;
  top: -18vw;
  right: -34vw;
  width: 88vw;
  max-width: 900px;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .32;
}
.hero__pearl-bleed svg { width: 100%; height: 100%; }
.hero__pearl-bleed circle { stroke: var(--sage); stroke-width: .5; fill: none; }
.hero__pearl-bleed .fill { fill: var(--sage); stroke: none; }

.hero__grid { position: relative; z-index: 1; }

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.65rem, 11vw, 5.1rem);
  line-height: 1.0;
  letter-spacing: -.015em;
  margin-bottom: 1.9rem;
}
.hero__title em { font-style: italic; font-weight: 300; color: var(--deep-sage); }

.hero__lede {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.hero__tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.5;
  color: var(--sage-ink);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  max-width: 30ch;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  margin-top: 2.6rem;
}

/* Moldura do retrato — recebe a foto via PORTRAIT em script.js */
.portrait { margin: 3.5rem 0 0; }
.portrait__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 90% at 30% 12%, #D0D8C4 0%, transparent 62%),
    linear-gradient(168deg, var(--pearl) 0%, var(--sage) 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.portrait__frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(240, 238, 227, .55);
  pointer-events: none;
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait__mark { width: 42%; max-width: 190px; opacity: .82; }
.portrait__mark svg { width: 100%; height: 100%; }
.portrait__mark circle { stroke: var(--cream); stroke-width: 1.1; fill: none; }
.portrait__mark .fill { fill: var(--cream); stroke: none; }
.portrait.has-foto .portrait__mark { display: none; }

/* --------------------------------------------------------------- SEÇÕES -- */
.section { padding-block: var(--section); }
.section__head { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }

.sobre { border-top: 1px solid var(--hairline); }
.sobre__intro { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }

.credenciais { display: grid; gap: 0; margin-bottom: 3rem; }
.credenciais li {
  display: grid;
  gap: .35rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--hairline);
}
.credenciais li:first-child { border-top: 1px solid var(--hairline); }
.credenciais__chave {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.credenciais__valor { color: var(--charcoal); line-height: 1.6; }
.credenciais__valor + .credenciais__valor { margin-top: .65rem; }

.sobre__filosofia p + p { margin-top: 1.4rem; }
.sobre__filosofia p { color: var(--ink-soft); max-width: 62ch; }

/* ------------------------------------------------------------ MANIFESTO -- */
.manifesto {
  background: var(--charcoal);
  color: var(--cream);
  padding-block: clamp(4rem, 10vw, 7.5rem);
  text-align: center;
}
.manifesto__inner { display: grid; justify-items: center; }
.manifesto__monograma { width: clamp(56px, 12vw, 78px); margin-bottom: 2.25rem; opacity: .95; }
.manifesto__quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 5.6vw, 3rem);
  line-height: 1.26;
  max-width: 20ch;
  color: var(--cream);
}
.manifesto__quote em { font-style: italic; color: var(--terracota); }
.manifesto__nota {
  margin-top: 2.5rem;
  max-width: 48ch;
  color: var(--pearl);
  font-size: .98rem;
  line-height: 1.8;
}

/* --------------------------------------------------------- PROCEDIMENTOS -- */
.cards { display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.card {
  background: var(--cream);
  padding: clamp(2rem, 5vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  transition: background-color .5s var(--ease);
  display: flex;
  flex-direction: column;
}
.card:hover { background: var(--cream-soft); }
.card__titulo {
  position: relative;
  font-family: var(--mark);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.6vw, 1.28rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--charcoal);
  padding-bottom: 1.15rem;
  margin-bottom: 1.35rem;
}
/* filete que cresce no hover; ancorado na base para alinhar entre os cards */
.card__titulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 32px;
  background: var(--sage-ink);
  transition: width .55s var(--ease);
}
.card:hover .card__titulo::after { width: 100%; }
.card__texto { color: var(--ink-soft); font-size: 1rem; }
.card__nota {
  margin-top: 1.35rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--terracota);
  font-size: .9rem;
  line-height: 1.65;
  color: var(--charcoal);
}
.procedimentos__rodape {
  margin-top: 2.75rem;
  max-width: 52ch;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--sage-ink);
}

/* --------------------------------------- ANTES/DEPOIS · DEPOIMENTOS ------ */
.resultados { background: var(--cream-soft); }

.vazio {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1.25rem;
  border: 1px solid var(--hairline);
}
.vazio__mark { width: 46px; margin-bottom: 1.6rem; opacity: .7; }
.vazio__mark svg { width: 100%; height: 100%; }
.vazio__mark circle { stroke: var(--deep-sage); stroke-width: 1.1; fill: none; }
.vazio__mark .fill { fill: var(--deep-sage); stroke: none; }
.vazio__titulo {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--charcoal);
  margin-bottom: .75rem;
}
.vazio__texto { max-width: 42ch; color: var(--ink-soft); font-size: .96rem; }

.casos, .depo-lista { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.caso__par { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.caso__par figure { margin: 0; position: relative; }
.caso__par img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.caso__rotulo {
  position: absolute;
  bottom: 0; left: 0;
  background: var(--charcoal);
  color: var(--cream);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .4rem .75rem;
}
.caso__meta { margin-top: 1.1rem; }
.caso__procedimento {
  font-family: var(--mark);
  font-size: 1rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.caso__legenda { color: var(--ink-soft); font-size: .94rem; margin-top: .5rem; }

.depo {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--hairline);
  background: var(--cream);
}
.depo__texto {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.5;
  color: var(--charcoal);
}
.depo__autor {
  margin-top: 1.35rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-ink);
}

/* ----------------------------------------------------------- LOCALIZAÇÃO -- */
.localizacao { border-top: 1px solid var(--hairline); }
.endereco {
  font-style: normal;
  margin: 1.9rem 0 1.75rem;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.horarios {
  margin: 0 0 2.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.5rem;
  font-size: .95rem;
}
.horarios dt {
  padding: .55rem 0;
  border-top: 1px solid var(--hairline);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.horarios dd {
  margin: 0;
  padding: .55rem 0;
  border-top: 1px solid var(--hairline);
  color: var(--charcoal);
  text-align: right;
}

.mapa {
  margin-top: 3rem;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  background: var(--pearl);
  overflow: hidden;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.72); }

/* --------------------------------------------------------------- CONTATO -- */
.contato {
  background: var(--charcoal);
  color: var(--cream);
  padding-block: clamp(4.5rem, 11vw, 8rem);
}
.contato__inner { display: grid; justify-items: start; }
.contato__texto {
  margin: 1.9rem 0 2.6rem;
  max-width: 46ch;
  color: var(--pearl);
  font-size: 1.02rem;
}
.contato__alt { margin-top: 2rem; font-size: .95rem; color: var(--pearl); }
.contato__aviso {
  margin-top: 1.25rem;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--pearl);
  max-width: 44ch;
}

/* ---------------------------------------------------------------- RODAPÉ -- */
.rodape {
  background: var(--charcoal);
  color: var(--pearl);
  border-top: 1px solid rgba(240, 238, 227, .12);
  padding-block: clamp(2.75rem, 7vw, 4rem);
}
.rodape__inner { display: grid; gap: 2.25rem; justify-items: start; }
.rodape__logo { width: clamp(170px, 42vw, 215px); }

.social { display: flex; gap: 1.1rem; }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(240, 238, 227, .22);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.social a:hover { background: rgba(240, 238, 227, .1); border-color: var(--pearl); }
.social svg { width: 20px; height: 20px; fill: none; stroke: var(--pearl); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill { fill: var(--pearl); stroke: none; }

.rodape__meta { font-size: .84rem; line-height: 1.9; color: var(--pearl); }
.rodape__ano { margin-top: .75rem; opacity: .8; }

/* --------------------------------------------------- BARRA FIXA (MOBILE) -- */
.barra-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(240, 238, 227, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform .5s var(--ease);
}
.barra-mobile.is-visible { transform: none; }
.barra-mobile[hidden] { display: none; }
body.com-barra { padding-bottom: 5.5rem; }

/* ------------------------------------------------------------- REVELAÇÃO -- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }

/* ============================================================ BREAKPOINTS = */

/* Tablet — 2 colunas nos cards, mapa lado a lado começa a caber */
@media (min-width: 768px) {
  .portrait__frame { aspect-ratio: 4 / 5; }
  .card__titulo { min-height: calc(2.7em + 1.15rem); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card:last-child { grid-column: 1 / -1; }
  .casos { grid-template-columns: repeat(2, 1fr); }
  .depo-lista { grid-template-columns: repeat(2, 1fr); }
  .hero__cta { flex-direction: row; align-items: center; gap: 2rem; }
  .contato__inner { justify-items: start; }
  .rodape__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 3rem;
    row-gap: 2.5rem;
  }
  .rodape__logo { grid-row: 1; }
  .social { grid-row: 1; justify-self: end; }
  .rodape__meta { grid-column: 1 / -1; }
}

/* Desktop — composição assimétrica */
@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .site-header__inner { padding-block: 1.1rem; }

  .cards { grid-template-columns: repeat(3, 1fr); }
  .card:last-child { grid-column: auto; }

  .sobre__grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 6rem);
    align-items: start;
  }
  .sobre__intro { position: sticky; top: 8rem; margin-bottom: 0; }
  .credenciais { margin-bottom: 3.5rem; }

  .localizacao__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
  }
  .mapa { margin-top: 0; aspect-ratio: 16 / 11; }

  .contato__inner { max-width: 44rem; }
}

@media (min-width: 1100px) {
  .hero { padding-block: clamp(2.5rem, 5vw, 5rem) var(--section); }
  .hero__grid {
    max-width: none;
    padding-right: 0;
    padding-left: max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter)));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40vw);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
  .portrait { margin: 0; transform: translateY(2.25rem); }
  .portrait__frame { aspect-ratio: 5 / 6; max-height: 70svh; }
  .hero__pearl-bleed { top: -22vw; right: 30vw; width: 44vw; opacity: .22; }
}

@media (min-width: 1024px) {
  .barra-mobile { display: none !important; }
  body.com-barra { padding-bottom: 0; }
}


/* ============================================================ ADIÇÕES ==== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------- Ícones sociais compactos -- */
.site-header__acoes { display: flex; align-items: center; gap: 1rem; }

.social--compacta { gap: .35rem; }
.social--compacta a {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.social--compacta a:hover { border-color: var(--hairline); background: transparent; }
.social--compacta svg { width: 19px; height: 19px; stroke: var(--sage-ink); }
.social--compacta svg .fill { fill: var(--sage-ink); stroke: none; }

.site-header__acoes .social--compacta { display: none; }

/* ------------------------------------------------- Acordeão dos cards --- */
/* margin-top:auto empurra o acordeão para a base do card. Como os cards da
   grade têm a mesma altura, as três linhas "Ver detalhes" ficam alinhadas. */
.proc { margin-top: auto; padding-top: 1.6rem; }
.proc__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  list-style: none;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-ink);
  transition: color .35s var(--ease);
}
.proc__botao::-webkit-details-marker { display: none; }
.proc__botao:hover { color: var(--charcoal); }
.proc__botao:focus-visible { outline: 2px solid var(--sage-ink); outline-offset: 3px; }

.proc__sinal { position: relative; width: 11px; height: 11px; flex: none; }
.proc__sinal::before,
.proc__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.proc__sinal::after { transform: rotate(90deg); }
.proc[open] .proc__sinal::after { transform: rotate(0deg); }

.proc[open] .proc__rotulo { visibility: hidden; }
.proc[open] .proc__botao::before {
  content: "Fechar";
  letter-spacing: inherit;
  position: absolute;
}
.proc__botao { position: relative; }

.proc__corpo { padding-top: .35rem; }
.proc__corpo p { font-size: .95rem; line-height: 1.75; color: var(--ink-soft); }
.proc__corpo p + p { margin-top: 1rem; }
.proc__cta { margin-top: 1.5rem; font-size: .74rem; }

.proc[open] .proc__corpo { animation: abre .5s var(--ease) both; }
@keyframes abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Ficha técnica (preenchida em FICHA_TECNICA, no script.js) */
.ficha {
  margin: 1.6rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.25rem;
  font-size: .88rem;
}
.ficha dt {
  padding: .6rem 0;
  border-top: 1px solid var(--hairline);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.ficha dd {
  margin: 0;
  padding: .6rem 0;
  border-top: 1px solid var(--hairline);
  color: var(--charcoal);
  text-align: right;
}

/* ---------------------------------------------------- Teste de pele ----- */
.sem-js .teste { display: none; }

.teste {
  background: #DFE2D3;
  padding-block: var(--section);
  border-block: 1px solid var(--hairline);
}
.teste__lede { margin-top: 1.6rem; max-width: 44ch; color: var(--ink-soft); }
.teste__aviso {
  margin-top: 1.4rem;
  max-width: 44ch;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--sage-ink);
  padding-left: 1.1rem;
  border-left: 2px solid var(--terracota);
}

.quiz {
  margin-top: 3rem;
  background: var(--cream);
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 5vw, 2.5rem);
}
.quiz__cabeca { margin-bottom: 1.9rem; }
.quiz__contador {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: .75rem;
}
.quiz__barra { height: 2px; background: var(--pearl); }
.quiz__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sage-ink);
  transition: width .5s var(--ease);
}

.quiz__campo { border: 0; margin: 0; padding: 0; }
.quiz__pergunta {
  padding: 0;
  margin-bottom: 1.5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 4vw, 1.65rem);
  line-height: 1.3;
  color: var(--charcoal);
}

.quiz__opcao {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--hairline);
  margin-bottom: .6rem;
  cursor: pointer;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--charcoal);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.quiz__opcao:hover { border-color: var(--sage-ink); }
.quiz__opcao:has(input:checked) {
  border-color: var(--sage-ink);
  background: #E2E4D5;
}

.quiz__opcao input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin: .25rem 0 0;
  border: 1px solid var(--sage-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.quiz__opcao input::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-ink);
  transform: scale(0);
  transition: transform .28s var(--ease);
}
.quiz__opcao input:checked::after { transform: scale(1); }

.quiz__navegacao { margin-top: 1.2rem; }
.quiz__voltar {
  background: none;
  border: 0;
  padding: .35rem 0;
  font-family: var(--body);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.quiz__voltar:hover { color: var(--charcoal); border-color: var(--sage-ink); }

.quiz__resultado { animation: abre .55s var(--ease) both; }
.quiz__tipo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.2;
  color: var(--charcoal);
  margin-bottom: 1.1rem;
}
.quiz__texto { color: var(--ink-soft); font-size: .98rem; }
.quiz__acoes {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.quiz__refazer { background: none; border: 0; cursor: pointer; font-family: var(--body); }

/* -------------------------------------------- Barra fixa com os ícones -- */
.barra-mobile { display: flex; align-items: center; gap: .6rem; }
.barra-mobile .btn--bloco { flex: 1; }
.barra-mobile .social--compacta a { border-color: var(--hairline); }

/* ------------------------------------------------------- Breakpoints ---- */
@media (min-width: 768px) {
  .quiz__acoes { flex-direction: row; align-items: center; gap: 2rem; }
}

@media (min-width: 1024px) {
  .site-header__acoes .social--compacta { display: flex; }

  .teste__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
  .quiz { margin-top: 0; }
  .teste__intro { position: sticky; top: 8rem; }
}

/* --------------------------------------------- Área de toque no celular -- */
/* Links de texto têm 28px de altura, o que passa no WCAG 2.2 (mínimo 24px) mas
   é apertado para o dedo. O ::after estende a área clicável sem mexer no
   sublinhado nem no espaçamento do layout. */
@media (pointer: coarse) {
  .link-quiet, .link-underline, .site-nav a { position: relative; }
  .link-quiet::after,
  .link-underline::after,
  .site-nav a::after {
    content: "";
    position: absolute;
    inset: -9px 0;
  }
}

/* ------------------------------------------------------- MOVIMENTO OFF -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .barra-mobile { transition: none; }
  .proc[open] .proc__corpo, .quiz__resultado { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}