@charset "UTF-8";

/* Andressa Duque - folha principal.
 * Depende de tokens.css. Nenhum valor cru de cor ou fonte aqui: tudo por var().
 * Ordem: fontes > reset > primitivos > nav > hero > secoes > footer > bolha >
 *        movimento > responsivo > reduced-motion.
 */

/* ===========================================================================
   1. FONTES (self-hosted)
   Se os .woff2 nao existirem, a pilha cai para Georgia / system-ui sem quebrar.
   =========================================================================== */
@font-face {
  font-family: "Philosopher";
  src: url("../assets/fonts/philosopher-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Philosopher";
  src: url("../assets/fonts/philosopher-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/opensans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/opensans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ===========================================================================
   2. RESET
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip, nunca hidden: hidden em html quebra position:sticky */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* compensa a nav fixa ao pular por ancora */
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* Titulos sempre romanos. Italico em heading e um dos tells mais confiaveis
 * de layout gerado por IA - e nao existe na referencia. */
h1, h2, h3, .hero__title, .section__title, .cta__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: var(--leading-tight);
  /* impede que palavra longa estoure a caixa em telas de 320px */
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ===========================================================================
   3. PRIMITIVOS
   =========================================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--section-pad); }

.band--paper { background: var(--color-paper); }
.band--cream { background: var(--color-paper-2); }
.band--sand  { background: var(--color-paper-3); }
.band--rose  { background: var(--color-paper-4); }
.band--deep  { background: var(--color-ink-deep); color: var(--color-text-invert); }
.band--accent{ background: var(--color-accent-ink); color: var(--color-text-invert); }

.section__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-lg);
  /* no celular o titulo usa a largura toda; a medida curta entra no tablet */
}
.section__title--invert { color: var(--color-text-invert); }

.section__after {
  margin-top: var(--space-lg);
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--color-text-soft);
}

/* --- Foco. Sempre visivel, e NUNCA animado: precisa aparecer instantaneo. --- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--deep :focus-visible,
.band--accent :focus-visible,
.footer__bar :focus-visible { outline-color: var(--color-paper); }

.skip-link {
  position: absolute; left: var(--space-sm); top: -100%;
  z-index: 999;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink-deep);
  color: var(--color-text-invert);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-sm); }

/* --- Botoes -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* propriedades explicitas. Nunca `transition: all` - o tell da referencia. */
  transition:
    background-color var(--dur-base) var(--ease-out),
    color            var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out),
    transform        var(--dur-base) var(--ease-out);
}
.btn--lg { padding: var(--space-sm) var(--space-xl); font-size: var(--text-base); }

.btn--accent {
  /* accent-ink, nao accent: branco sobre accent da 3.86:1 e reprova em AA */
  background: var(--color-accent-ink);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-rest);
}
.btn--accent:hover { background: var(--color-ink-deep); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.btn--accent:active { transform: translateY(0); box-shadow: var(--shadow-rest); }

.btn--onAccent { background: var(--color-paper); color: var(--color-accent-ink); box-shadow: var(--shadow-rest); }
.btn--onAccent:hover { background: var(--color-paper-2); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.btn--onAccent:active { transform: translateY(0); }

.icon-wa {
  width: 1.15em; height: 1.15em; fill: currentColor; flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .icon-wa { transform: translateX(2px); }

.link-quiet {
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  padding-bottom: 2px;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-quiet:hover { color: var(--color-ink-deep); border-color: var(--color-ink-deep); }

/* --- Marca --------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: inherit; }
.brand__mark {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 50%;
  border: var(--rule-hair) solid var(--color-rule-strong);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-accent-ink);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-size: var(--text-lg); }
.brand__role {
  font-size: var(--text-xs); color: var(--color-text-soft);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ===========================================================================
   4. NAV - fixa, com scroll-morph
   =========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: var(--space-md);
  background: transparent;
  transition:
    padding-block    var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out);
}
.nav.is-stuck {
  padding-block: var(--space-2xs);
  background: oklch(95.31% 0.0173 99.6 / 0.88);
  box-shadow: 0 1px 0 var(--color-rule), var(--shadow-rest);
}
@supports (backdrop-filter: blur(1px)) {
  .nav.is-stuck {
    background: oklch(95.31% 0.0173 99.6 / 0.72);
    backdrop-filter: blur(12px) saturate(1.4);
  }
}

.nav__shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--space-md);
}
.nav__cta { white-space: nowrap; margin-left: auto; }

/* Barra de progresso de leitura - colada na base do nav. Reflete a
 * posicao de scroll 1:1 via transform (setupNav em main.js), sem
 * transition propria: e leitura direta do scroll, nao uma animacao
 * a ser suavizada, entao nao ha nada para o reduced-motion cortar. */
.nav__progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* ===========================================================================
   5. HERO
   =========================================================================== */
.hero { padding-block: clamp(7rem, 5rem + 9vw, 10rem) var(--section-pad); }

/* Badge de localidade (Leblon-RJ / Online), acima do titulo do hero. */
.locality { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.locality__item {
  display: inline-flex; align-items: center;
  padding: var(--space-3xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-accent-ink);
}

/* Base = celular: uma coluna, texto e depois a foto. */
.hero__shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
  display: grid;
  /* minmax(0, Nfr), nunca `1fr` puro: `1fr` deixa a foto estourar a coluna */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.hero__title {
  font-size: var(--text-display);
  max-width: var(--measure-tight);
  margin-bottom: var(--space-md);
}
.hero__title .line { display: block; }

.hero__lede {
  max-width: 46ch;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-soft);
  margin-bottom: var(--space-lg);
}

/* Base = celular: o botao ocupa a largura toda, alvo de toque generoso. */
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.hero__actions .btn { width: 100%; justify-content: center; }

.credential {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: 34ch;
}

/* Retrato: mascara em arco + bloco rose deslocado atras, ancorando a foto
 * na paleta e neutralizando o verde do fundo original. */
.hero__figure { position: relative; margin: 0; justify-self: stretch; width: 100%; }
.hero__figure::before {
  content: "";
  position: absolute; inset: 8% -5% -6% 12%;
  background: var(--color-paper-4);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  z-index: 0;
}
.hero__photo {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover; object-position: 50% 22%;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  filter: saturate(0.92);
  box-shadow: var(--shadow-lift);
}

/* ===========================================================================
   6. CHECKLIST ("Talvez voce se reconheca aqui")
   =========================================================================== */
.checklist { display: grid; gap: var(--space-sm); }
.checklist__item {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-lg);
}
.checklist__item::before {
  content: "";
  position: absolute; left: var(--space-2xs); top: 1.55em;
  width: 1.25rem; height: var(--rule-hair);
  background: var(--color-accent);
}

/* Duas colunas (checklist + callout) a partir do tablet; empilha no celular. */
.identify {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.identify__main { max-width: var(--measure); }

.callout {
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  display: grid; gap: var(--space-md); justify-items: start;
}
.callout__body { font-size: var(--text-lg); color: var(--color-text-soft); }
.callout__body strong { color: var(--color-ink-deep); font-weight: 600; }
.callout__note { font-size: var(--text-xs); color: var(--color-text-soft); }

/* Comparativo. Colunas ficam lado a lado a partir do tablet (secao 15). */
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule-strong);
}
.compare__col { padding: var(--space-lg); background: var(--color-paper); }
.compare__col--accent { background: var(--color-ink-deep); color: var(--color-text-invert); }
.compare__label {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-soft);
  margin-bottom: var(--space-md);
}
.compare__col--accent .compare__label { color: var(--color-paper-3); }
.compare__list { display: grid; gap: var(--space-sm); }
.compare__list li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-text-soft);
}
.compare__list li::before {
  content: "\2013"; /* travessao curto - "outras clinicas" */
  position: absolute; left: 0; color: var(--color-text-soft);
}
.compare__col--accent .compare__list li { border-color: var(--color-rule-strong); color: var(--color-paper-2); }
.compare__col--accent .compare__list li::before { content: "\2713"; color: var(--color-accent); }
.compare__list li:last-child { border-bottom: none; }

/* ===========================================================================
   7. SOBRE
   =========================================================================== */
/* Base = celular: texto e depois o quadro de formacao, empilhados. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
.about__main p { max-width: var(--measure); margin-bottom: var(--space-md); }

.about__aside {
  padding: var(--space-lg);
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
}
.about__photo {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 50% 15%;
  border-radius: var(--radius-card);
  margin-bottom: var(--space-md);
  filter: saturate(0.92);
}
.about__asideTitle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-sm);
}
.factlist { display: grid; gap: var(--space-xs); }
.factlist li { padding-left: var(--space-md); position: relative; font-size: var(--text-sm); }
.factlist li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}

/* ===========================================================================
   8. COMO FUNCIONA O ACOMPANHAMENTO - passos numerados sobre banda escura
   (band--deep). Divisor fino no topo de cada card, no mesmo espirito das
   linhas do grid de tecnologias, mas fluido (auto-fit) em vez de colunas
   fixas por breakpoint - a contagem de passos pode mudar sem reescrever CSS.
   =========================================================================== */
.stepgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.stepcard {
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-strong);
}
.stepcard__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.stepcard__title { font-size: var(--text-lg); color: var(--color-text-invert); margin-bottom: var(--space-xs); }
.stepcard__body { font-size: var(--text-sm); color: var(--color-paper-3); }

/* ===========================================================================
   9. AREAS DE ATUACAO
   =========================================================================== */
.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-lg);
}
.area {
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
  border: var(--rule-hair) solid var(--color-rule);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.area:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.area__title { font-size: var(--text-2xl); color: var(--color-ink-deep); margin-bottom: var(--space-sm); }
.area__body { margin-bottom: var(--space-md); }
.area__list {
  display: grid; gap: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.area__list li { position: relative; padding-left: var(--space-md); font-size: var(--text-sm); color: var(--color-text-soft); }
.area__list li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 8px; height: var(--rule-hair); background: var(--color-accent);
}
.areas__cta { margin-top: var(--space-xl); }

/* Texto de apoio usado antes de uma grade (variante de .section__after,
 * que fica depois). Mesma voz visual, so muda a posicao da margem. */
.section__lede {
  margin-bottom: var(--space-lg);
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--color-text-soft);
}

/* ---- Exames: cards com icone-em-circulo, centralizados (igual print
 * de referencia). .shell--center centraliza titulo/lede/nota desta secao. */
.shell--center { text-align: center; }
.shell--center .section__title,
.shell--center .section__lede,
.shell--center .section__after { margin-inline: auto; }

.examgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.examcard {
  padding: var(--space-lg);
  background: var(--color-paper);
  border-radius: var(--radius-card);
  border: var(--rule-hair) solid var(--color-rule);
}
.examcard__icon {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  border: var(--rule-hair) solid var(--color-rule-strong);
  color: var(--color-accent-ink);
}
.examcard__icon svg { width: 1.25rem; height: 1.25rem; }
.examcard__title { font-size: var(--text-lg); color: var(--color-ink-deep); margin-bottom: var(--space-xs); }
.examcard__body { font-size: var(--text-sm); color: var(--color-text-soft); }

.examgrid__cta {
  display: grid; justify-items: center; gap: var(--space-2xs);
  margin-top: var(--space-xl); /* mesma distancia usada em .areas__cta */
}

/* ---- Tecnologias: grid 2 colunas com linhas divisorias (igual a
 * referencia patriciadavidson.com.br/lp) - border-top/left no grid e
 * border-right/bottom em cada celula forma as linhas internas sem
 * duplicar hairlines na borda externa. */
.techgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  border-left: var(--rule-hair) solid var(--color-rule-strong);
}
.techcard {
  padding: var(--space-lg);
  border-right: var(--rule-hair) solid var(--color-rule-strong);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}
.techcard__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-soft);
  margin-bottom: var(--space-2xs);
}
.techcard__title { font-size: var(--text-lg); color: var(--color-ink-deep); margin-bottom: var(--space-2xs); }
.techcard__body { font-size: var(--text-sm); color: var(--color-text-soft); }

/* ===========================================================================
   10. FAQ - accordion animado por grid-template-rows (0fr -> 1fr).
   Nao mede altura em JS, e anima de verdade.
   Sem JS (html sem a classe .js) o conteudo fica aberto e acessivel.
   =========================================================================== */
.faq { display: grid; gap: var(--space-2xs); }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__h { margin: 0; }

.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-ink-deep);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.faq__q:hover { color: var(--color-accent-ink); }

.faq__icon { position: relative; width: 1rem; height: 1rem; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--color-accent-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__a { display: grid; grid-template-rows: 1fr; }
.js .faq__a {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-in-out);
}
.js .faq__item:has(.faq__q[aria-expanded="true"]) .faq__a { grid-template-rows: 1fr; }
.faq__aInner { overflow: hidden; }
.faq__aInner p { max-width: var(--measure); padding-bottom: var(--space-md); color: var(--color-text-soft); }

/* ===========================================================================
   11. CTA FINAL
   =========================================================================== */
/* .section--cta existia na marcacao desde o inicio mas nunca teve regra -
 * toda secao da pagina usava o mesmo --section-pad, inclusive o fechamento.
 * O encerramento e o unico momento de "ultima palavra" da pagina; merece
 * mais ar que uma secao de meio de rolagem. */
.section--cta { padding-block: calc(var(--section-pad) * 1.4); }

.cta { text-align: center; display: grid; justify-items: center; gap: var(--space-md); }
.cta__title { font-size: var(--text-3xl); color: var(--color-text-invert); max-width: 18ch; }
.cta__body { max-width: 48ch; color: var(--color-paper-3); }

/* pulse unico ao entrar em viewport. Uma vez, nunca em loop. */
@keyframes pulse-once {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.btn--onAccent.has-pulsed { animation: pulse-once 620ms var(--ease-in-out) 1; }

/* ===========================================================================
   12. FOOTER
   =========================================================================== */
.footer { background: var(--color-paper-4); color: var(--color-text); }
/* Base = celular: tudo empilhado e alinhado a esquerda. */
.footer__shell {
  display: flex; flex-wrap: wrap;
  flex-direction: column; align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-xl);
}
.footer .brand__mark { border-color: var(--color-ink-deep); color: var(--color-ink-deep); }
.footer .brand__role { color: var(--color-ink-deep); }

.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer__links a {
  position: relative;
  color: var(--color-ink-deep); text-decoration: none; font-size: var(--text-sm);
  white-space: nowrap;
  padding-bottom: 2px;
}
/* sublinhado desenhado no hover/foco, nao so troca de cor - reforca o
 * afordance sem depender so do :hover (funciona em foco de teclado tambem) */
.footer__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--rule-hair);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.footer__links a:hover::after,
.footer__links a:focus-visible::after { transform: scaleX(1); }

.footer__meta { display: grid; gap: var(--space-3xs); justify-items: start; }
.footer__ig {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  color: var(--color-ink-deep); text-decoration: none; font-size: var(--text-sm);
  white-space: nowrap;
}
.footer__ig svg { fill: currentColor; flex: none; }
.footer__ig:hover { text-decoration: underline; }
.footer__crn {
  font-size: var(--text-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-ink-deep);
}

.footer__bar { background: var(--color-ink-deep); color: var(--color-paper-3); }
.footer__bar p {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--space-sm) var(--gutter);
  font-size: var(--text-xs); text-align: center;
}

/* ===========================================================================
   13. BOLHA DO WHATSAPP
   Taupe da pagina, nao o verde generico de plugin. So o icone leva o verde.
   Aparece apos o hero sair da tela (classe adicionada por JS).
   =========================================================================== */
.wabubble {
  position: fixed; z-index: 90;
  right: clamp(var(--space-sm), 3vw, var(--space-lg));
  bottom: clamp(var(--space-sm), 3vw, var(--space-lg));
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs);
  background: var(--color-ink-deep);
  color: var(--color-text-invert);
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: var(--shadow-float);
  /* estado inicial: fora de cena e inerte para teclado e leitor de tela */
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  visibility: hidden;
  transition:
    opacity          var(--dur-base) var(--ease-out),
    transform        var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    visibility       0s linear var(--dur-base);
}
.wabubble.is-shown {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.wabubble:hover { background: var(--color-accent-ink); }

.wabubble__icon {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--color-whatsapp);
}
.wabubble__icon svg { width: 1.5rem; height: 1.5rem; fill: var(--color-paper); }

/* Base = celular: o rotulo ja nasce aberto. Em tela de toque nao existe
 * hover, entao esconder o texto atras dele deixaria so um icone ambiguo. */
.wabubble__label {
  font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap;              /* nunca quebra em duas linhas */
  padding-right: var(--space-sm);
  max-width: 12rem; overflow: hidden; opacity: 1;
  transition:
    max-width var(--dur-base) var(--ease-out),
    opacity   var(--dur-base) var(--ease-out),
    padding   var(--dur-base) var(--ease-out);
}

/* Onde existe cursor de verdade, a bolha descansa como icone e revela o
 * rotulo no hover ou no foco de teclado. */
@media (hover: hover) and (pointer: fine) {
  .wabubble__label { max-width: 0; opacity: 0; }
  .wabubble:hover .wabubble__label,
  .wabubble:focus-visible .wabubble__label { max-width: 12rem; opacity: 1; }
}

/* ===========================================================================
   14. MOVIMENTO - uma unica entrada orquestrada (o hero).
   Auditoria Hallmark encontrou "animate-on-scroll on everything": toda
   secao da pagina (checklist, areas, exames, tecnologias, faq, cta) tinha
   .reveal com stagger proprio, entao a pagina nunca "assentava" - cada
   scroll disparava mais uma onda de fade-up. Fix: so o .line do hero
   anima na carga da pagina. .reveal vira inerte (conteudo so "esta la"),
   a classe fica nos elementos por compatibilidade mas sem efeito visual.
   =========================================================================== */
.reveal { opacity: 1; transform: none; }

.line {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.line.is-visible { opacity: 1; transform: none; }

/* Sem JS, nada fica invisivel: o conteudo aparece normalmente. */
html:not(.js) .line { opacity: 1; transform: none; }

/* ===========================================================================
   15. RESPONSIVO - MOBILE FIRST
   Tudo acima desta secao ja e o layout de celular. Daqui para baixo so
   existem min-width: cada breakpoint ACRESCENTA, nunca desfaz.
   Verificado em 320 / 375 / 414 / 768 / 1280.
   =========================================================================== */

/* --- >= 30rem (480px). Sai do aperto do celular pequeno. ------------------ */
@media (min-width: 30rem) {
  /* botao volta a ter largura propria em vez de ocupar a linha toda */
  .hero__actions { flex-direction: row; gap: var(--space-md); }
  .hero__actions .btn { width: auto; }
}

/* --- >= 40rem (640px). Tablet em retrato. -------------------------------- */
@media (min-width: 40rem) {
  .section__title { max-width: 22ch; }

  /* a foto para de ocupar a largura inteira e ganha uma medida confortavel */
  .hero__figure { max-width: 22rem; justify-self: start; }

  /* rodape volta a ser uma faixa horizontal */
  .footer__shell { flex-direction: row; align-items: center; gap: var(--space-lg); }
  .footer__links { margin-inline: auto; }

  /* comparativo: as duas colunas ficam lado a lado */
  .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* exames: os 2 cards ficam lado a lado */
  .examgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* tecnologias: grid vira 2 colunas, igual a referencia */
  .techgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- >= 60rem (960px). Desktop: as duas colunas entram. ------------------ */
@media (min-width: 60rem) {
  .hero__shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
    gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  }
  .hero__figure { max-width: 26rem; justify-self: center; }

  .about {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  }

  /* identificacao: checklist e callout lado a lado */
  .identify {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  }
}

/* --- Guarda para telas de celular (<= 440px, cobre 320 ate iPhone Pro Max).
 * Unico max-width da folha, e de proposito: e um teto de excecao, nao um
 * degrau do layout. O valor original (22.5rem/360px) so cobria os celulares
 * mais estreitos - em 390-430px (iPhone 12 ao 15 Pro Max) o nome completo
 * "Andressa Duque / NUTRICIONISTA" + o botao "Falar no WhatsApp" inteiro
 * ainda estouravam a viewport e cortavam o botao. Sem esta guarda a marca
 * tambem quebra em duas linhas no iPhone SE. */
@media (max-width: 27.5rem) {
  .brand__text { display: none; }     /* fica so o disco AD */
  .wabubble__label { display: none; } /* espaco insuficiente: so o icone */

  /* Rotulo de botao NUNCA pode quebrar em duas linhas. Em 320px sobram
   * 280px de conteudo, entao apertamos o padding e o corpo para caber. */
  .btn { padding-inline: var(--space-md); font-size: var(--text-xs); }
  .btn--lg { padding-inline: var(--space-md); font-size: var(--text-sm); }
  .nav__cta { font-size: var(--text-xs); }
}

/* ===========================================================================
   16. REDUCED MOTION
   Movimento espacial some. Sobra apenas um crossfade curto.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .line { transform: none; transition-property: opacity; }
  .reveal.is-visible, .line.is-visible { transform: none; }

  .btn--accent:hover, .btn--onAccent:hover, .area:hover { transform: none; }
  .btn:hover .icon-wa { transform: none; }
  .btn--onAccent.has-pulsed { animation: none; }
  .wabubble, .wabubble.is-shown { transform: none; }
}