/* =========================================================================
   Bruna Souza — Nutricionista
   Estética neoclássica: serifa de alto contraste, letra manuscrita solta
   dentro das palavras, oliva sobre creme, fotografia difusa.
   ========================================================================= */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --olive:      #4F5937;
  --olive-dark: #3C4429;
  --olive-mid:  #5F6B43;
  --olive-soft: #8A9568;
  --sage:       #A9B48C;
  --sage-pale:  #C9D1B4;

  --cream:      #F6F5F1;
  --cream-deep: #EDEAE1;
  --sand:       #D9D3C3;
  --sand-pale:  #E6E1D4;

  --taupe:      #645948;
  --taupe-soft: #8C8273;
  --ink:        #2E2A22;

  --font-display: 'Oranienbaum', 'Times New Roman', serif;
  --font-script:  'Parisienne', 'Brush Script MT', cursive;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Em rem, não em px: a escala de telas grandes (bloco 13) aumenta a raiz,
     e a largura do conteúdo tem que crescer junto com a tipografia. */
  --larg: min(77.5rem, 92vw);
  --raio: 10px;
  --raio-sm: 6px;

  --sombra: 0 18px 50px -24px rgba(46, 42, 34, .35);
  --sombra-sm: 0 8px 24px -14px rgba(46, 42, 34, .3);

  --t: cubic-bezier(.22, .61, .36, 1);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;          /* rem, para seguir a raiz e a preferência do usuário */
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; cursor: pointer; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--olive);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 999;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ── 3. Tipografia ─────────────────────────────────────────────────────── */
.titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.1vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--taupe);
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.titulo--centro { text-align: center; }
.titulo--claro  { color: var(--cream); }

.verde { color: var(--olive); }
.claro { color: var(--sage-pale); }

/* O acento manuscrito é sempre uma palavra ou frase inteira, numa linha só.
   No original russo ele substitui uma letra dentro da palavra; no alfabeto
   latino isso lê como erro de digitação, então aqui a segunda voz entra
   por bloco de sentido, não por letra. */
.ms {
  display: block;
  font-family: var(--font-script);
  font-size: 1.5em;
  line-height: .95;
  letter-spacing: 0;
  text-transform: none;
  color: var(--olive);
  margin: .12em 0 .06em;
}
.ms--inline {
  display: inline-block;
  font-size: 1.26em;
  line-height: 0;
  margin: 0 .08em;
  transform: translateY(.02em);
}
.titulo--claro .ms { color: var(--sage-pale); }

.script { font-family: var(--font-script); text-transform: none; }

.olho {
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: var(--taupe-soft);
  text-align: center;
  margin: 0 0 1.1rem;
}
.olho--claro { color: var(--sage); }

.subtitulo {
  text-align: center;
  max-width: 46ch;
  margin: -.4rem auto 3rem;
  color: var(--taupe-soft);
}

.destaque { font-weight: 500; color: var(--ink); font-size: 1.07rem; }

.rotulo {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: lowercase;
  color: var(--taupe-soft);
  margin: 2rem 0 .3rem;
  text-align: center;
}

/* aviso ético recorrente */
.aviso {
  max-width: 62ch;
  margin: 3.2rem auto 0;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--sand);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .45);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--taupe-soft);
  text-align: center;
}
.aviso strong { color: var(--taupe); font-weight: 500; }

/* ── 4. Botões e círculos ──────────────────────────────────────────────── */
.botao {
  display: inline-block;
  padding: .95rem 2.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background .35s var(--t), color .35s var(--t), transform .35s var(--t);
}
.botao--olive { background: var(--olive); color: var(--cream); }
.botao--olive:hover { background: var(--olive-dark); transform: translateY(-2px); }
.botao--areia { background: var(--sand); color: var(--taupe); }
.botao--areia:hover { background: var(--sand-pale); transform: translateY(-2px); }
.botao--claro { background: var(--cream); color: var(--olive); }
.botao--claro:hover { background: #fff; transform: translateY(-2px); }
.botao--vazado { background: none; border-color: rgba(246, 245, 241, .4); color: var(--cream); }
.botao--vazado:hover { border-color: var(--cream); }
.botao--bloco { display: block; width: 100%; }

.circulo {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--olive);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: transform .5s var(--t), background .4s var(--t);
}
.circulo:hover { transform: scale(1.06); background: var(--olive-dark); }
.circulo--sm { width: 128px; height: 128px; font-size: .8rem; }
.circulo--claro { background: var(--cream); color: var(--olive); }
.circulo--claro:hover { background: #fff; }

.link-seta {
  display: inline-block;
  margin-top: 1rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
  padding-bottom: 4px;
  color: var(--olive);
  transition: border-color .3s var(--t);
}
.link-seta::after { content: ' \2192'; }
.link-seta:hover { border-color: var(--olive); }

.seta { width: 58px; height: 44px; color: var(--sage); opacity: .85; }

/* ── 5. Cabeçalho ──────────────────────────────────────────────────────── */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background .4s var(--t), box-shadow .4s var(--t), padding .4s var(--t);
}
.topo.encolhido {
  background: rgba(246, 245, 241, .93);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(217, 211, 195, .8);
  padding: .55rem 0;
}

.topo__nav {
  position: relative;
  z-index: 101;          /* acima do painel do menu, para o X continuar clicável */
  width: var(--larg);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topo__grupo {
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}
.topo__grupo--dir { justify-content: flex-end; }
.topo__grupo a {
  font-size: .8rem;
  text-decoration: none;
  color: var(--taupe);
  transition: color .3s var(--t);
}
.topo__grupo a:hover { color: var(--olive); }
.topo__cta { color: var(--olive) !important; font-weight: 500; }

.topo__marca {
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--olive);
  text-decoration: none;
  line-height: 1;
}

.topo__menu {
  display: none;
  width: 40px;
  height: 32px;
  border: none;
  background: none;
  padding: 0;
  position: relative;
}
.topo__menu span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background: var(--taupe);
  transition: transform .35s var(--t), opacity .25s;
}
.topo__menu span:nth-child(1) { top: 12px; }
.topo__menu span:nth-child(2) { top: 19px; }
.topo__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.topo__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  padding: 5.5rem 8vw 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.menu-mobile ul a {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 6vw, 1.7rem);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--taupe);
}
.menu-mobile .botao { justify-self: start; align-self: flex-start; }

/* ── 6. Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 8rem 0 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero__fundo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 22% 18%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(60% 50% at 82% 72%, rgba(201, 209, 180, .3), transparent 70%),
    var(--cream);
}

.hero__grade {
  position: relative;
  width: var(--larg);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.8rem, 4vh, 3.4rem);
}

.hero__topo { position: relative; }

.hero__base {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.hero__titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 9.2vw, 8.6rem);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--taupe);
  margin: 0;
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.hero__linha { display: block; }
/* As três linhas formam uma escada: profissão recuada, primeiro nome manuscrito
   encostado à esquerda, sobrenome recuado de novo.

   O sobrenome era `text-align: right`, que funcionava só porque VASCONCELOS
   tinha 11 letras e voltava quase até o centro. Com um sobrenome curto a linha
   ia morar na borda direita e abria um buraco de ~470px no meio do título.

   O recuo em porcentagem resolve os dois casos de uma vez: o início não depende
   do comprimento, e o fim é que varia. Sobrenome curto termina antes do retrato
   (que começa em 55%) e fica inteiro legível; sobrenome longo passa por trás
   dele, que é o cruzamento entre foto e título do projeto de referência. */
.hero__linha--1 { text-align: center; color: var(--olive); padding-left: 17%; }
.hero__linha--3 { text-align: left; padding-left: 15%; }

/* o primeiro nome é a segunda voz do hero: palavra inteira, não letra solta */
.hero__linha--script {
  font-family: var(--font-script);
  font-size: 1.18em;
  line-height: .82;
  text-transform: none;
  text-align: left;
  color: var(--olive);
  margin: .04em 0 -.04em;
}

.hero__retrato {
  position: absolute;
  left: 55%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-2.2deg);
  width: clamp(9.875rem, 16.5vw, 14.25rem);
  margin: 0;
  z-index: 4;
  border-radius: var(--raio-sm);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.hero__retrato img { width: 100%; }

.hero__selo {
  position: absolute;
  width: clamp(3.375rem, 6vw, 5.375rem);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
  z-index: 2;
}
/* Encostado à esquerda de propósito: com o sobrenome recuado 15% (ver a escada
   do título), um selo em 10% pousava justamente sobre a primeira letra dele. */
.hero__selo--1 { left: 0; bottom: -10%; transform: rotate(3deg); }
.hero__selo--2 { right: 2%; top: 4%; transform: rotate(-4deg); }

.hero__intro { max-width: 34ch; }
.hero__lead {
  margin: 0;
  font-size: .92rem;
  color: var(--taupe);
}
.hero__registro {
  margin: .5rem 0 0;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
}

.hero__acao {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  max-width: 440px;
}
.hero__acao-texto {
  position: relative;
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--taupe-soft);
  max-width: 27ch;
}
.hero__acao-texto strong { color: var(--taupe); font-weight: 500; }
.hero__acao-texto .seta {
  position: absolute;
  left: -70px;
  bottom: -38px;
  width: 50px;
  height: 38px;
}

.hero__rodape {
  position: relative;
  z-index: 3;
  width: var(--larg);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--taupe-soft);
}
.hero__scroll { animation: respira 2.6s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ── 7. Seções ─────────────────────────────────────────────────────────── */
.secao {
  width: var(--larg);
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8.5rem) 0;
}

/* 7.1 Quatro frentes ---------------------------------------------------- */
.cuidado__grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
  margin-top: 3.2rem;
  align-items: start;
}
.cartao {
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--sand);
  border-radius: var(--raio);
  padding: 1.7rem 1.6rem 1.8rem;
  position: relative;
}
.cartao__num {
  font-size: 1.9rem;
  color: var(--sage);
  line-height: 1;
  display: block;
  margin-bottom: .7rem;
}
.cartao h3 {
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 500;
  margin: 0 0 .55rem;
  color: var(--ink);
}
.cartao p { margin: 0; font-size: .87rem; color: var(--taupe-soft); }

/* grade assimétrica: os cartões não se alinham em linhas iguais */
.cuidado__grade > :nth-child(1) { grid-column: 1 / span 4; }
.cuidado__grade > :nth-child(2) { grid-column: 6 / span 4; margin-top: 2.6rem; }
.cuidado__grade > :nth-child(3) { grid-column: 10 / span 3; }
.cuidado__grade > :nth-child(4) { grid-column: 2 / span 4; margin-top: -1rem; }
.cuidado__grade > :nth-child(5) { grid-column: 7 / span 3; margin-top: 1.4rem; }
.cuidado__grade > :nth-child(6) { grid-column: 10 / span 3; margin-top: -2.4rem; }

.cuidado__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}

/* 7.2 Sobre ------------------------------------------------------------- */
.sobre__caixa {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sobre__texto p { max-width: 46ch; }

.selo-aviso {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: var(--sage);
  color: #38402a;
  padding: 1rem 1.3rem;
  border-radius: var(--raio-sm);
  font-size: .87rem;
  max-width: 40ch;
  margin: 0 0 1.8rem;
}
.selo-aviso__icone {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.sobre__retrato {
  position: relative;
  margin: 0;
  border-radius: var(--raio);
  overflow: visible;
}
.sobre__retrato img {
  width: 100%;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.sobre__retrato .circulo--sm {
  position: absolute;
  right: -34px;
  bottom: 38px;
}
.sobre__retrato 
/* 7.3 Áreas (carrossel) -------------------------------------------------- */
.carrossel { position: relative; margin-top: 3rem; }
.carrossel__trilho {
  display: flex;
  gap: 1.3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
/* Os itens distribuem o espaço do trilho em vez de ficarem presos à largura
   base. Com `flex: 0 0 auto` e um teto fixo, telas largas caíam num meio-termo
   ruim: em 1920 os materiais deixavam 215px vazios à direita — três cartões
   encostados à esquerda sob um título centralizado — e áreas e depoimentos
   escondiam só 78px e 158px, que lê como defeito, não como carrossel.

   Crescendo e encolhendo, eles preenchem o trilho quando cabem. O min-width de
   cada item (abaixo) é o que impede o encolhimento de passar do ponto: ao
   bater nele o trilho volta a transbordar e a rolagem com scroll-snap assume,
   que é o comportamento desejado em tela estreita. */
.carrossel__trilho > * { scroll-snap-align: start; flex: 1 1 auto; }

.area {
  width: clamp(260px, 30%, 360px);
  min-width: 260px;   /* piso do encolhimento: abaixo disto o trilho rola */
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--sand);
  border-radius: var(--raio);
  overflow: hidden;
  position: relative;
}
.area img { width: 100%; height: 190px; object-fit: cover; }
.area__num {
  position: absolute;
  right: 1.1rem;
  top: 1rem;
  font-size: 1.7rem;
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(46, 42, 34, .4);
}
.area h3 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 400;
  margin: 1.3rem 1.4rem .5rem;
  line-height: 1.1;
}
.area p { margin: 0 1.4rem 1.7rem; font-size: .87rem; color: var(--taupe-soft); }

.carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.4rem;
}
/* O `display: flex` acima venceria o [hidden] da folha do navegador, e o JS
   esconde a barra quando o trilho não tem o que rolar. */
.carrossel__controles[hidden] { display: none; }

.carrossel__btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--sand);
  border-radius: 50%;
  background: none;
  color: var(--taupe);
  transition: background .3s var(--t), border-color .3s var(--t);
}
.carrossel__btn:hover { background: var(--sand-pale); border-color: var(--taupe-soft); }
.carrossel__btn:disabled { opacity: .3; cursor: default; }
.carrossel__pontos { display: flex; gap: .5rem; }
.carrossel__pontos button {
  width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--sand);
  transition: background .3s var(--t), transform .3s var(--t);
}
.carrossel__pontos button[aria-current="true"] { background: var(--olive); transform: scale(1.4); }

/* 7.4 Princípios (bloco oliva) ------------------------------------------ */
.principios {
  width: 100%;
  max-width: none;
  background:
    linear-gradient(rgba(79, 89, 55, .88), rgba(56, 64, 38, .94)),
    url('../assets/img/faixa-olive.jpg') center / cover var(--olive);
  color: var(--cream);
  padding: clamp(4.5rem, 9vw, 8rem) 0;
}
.principios__capa { width: var(--larg); margin: 0 auto; }
.principios__intro {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 3.4rem;
  color: #D7DFC8;
  font-size: .95rem;
}
.principios__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 1.1rem;
}
.principios__lista li {
  border: 1px solid rgba(201, 209, 180, .26);
  border-radius: var(--raio);
  padding: 1.6rem 1.5rem;
  background: rgba(32, 38, 22, .3);
}
.principios__lista h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 .6rem;
  color: var(--cream);
  line-height: 1.15;
}
.principios__lista p { margin: 0; font-size: .86rem; color: rgba(246, 245, 241, .82); }

/* 7.5 Materiais ---------------------------------------------------------- */
.material {
  width: clamp(270px, 32%, 390px);
  min-width: 270px;   /* piso do encolhimento: abaixo disto o trilho rola */
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--sand);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.material > img { width: 100%; height: 230px; object-fit: cover; }
.material__corpo { padding: 1.6rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; position: relative; }
.material__num {
  position: absolute;
  right: 1.4rem;
  top: 1.1rem;
  font-size: 1.6rem;
  color: var(--sage);
}
.material h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 .6rem;
  max-width: 24ch;
}
.material p { margin: 0 0 1rem; font-size: .86rem; color: var(--taupe-soft); }
.material__preco {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--taupe);
  margin: auto 0 1.1rem !important;
}
.material__preco--livre { color: var(--olive); text-transform: uppercase; letter-spacing: .06em; }

/* 7.6 Atendimento -------------------------------------------------------- */
.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.3rem;
  margin-top: 3rem;
}
.plano {
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--sand);
  border-radius: var(--raio);
  padding: 2rem 1.9rem;
  display: flex;
  flex-direction: column;
}
.plano__nome {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--taupe);
  margin: 0 0 1.3rem;
}
.plano__itens { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .8rem; }
.plano__itens li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .87rem;
  color: var(--taupe-soft);
}
.plano__itens li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 9px; height: 5px;
  border-left: 1.4px solid var(--olive);
  border-bottom: 1.4px solid var(--olive);
  transform: rotate(-45deg);
}
.plano__precos { margin: auto 0 1.5rem; display: grid; gap: .1rem; }
.plano__precos > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--sand);
}
.plano__precos dt { font-size: .82rem; color: var(--taupe-soft); }
.plano__precos dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--taupe);
  white-space: nowrap;
}

/* 7.7 Depoimentos -------------------------------------------------------- */
.depoimentos__nota {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  font-size: .9rem;
  color: var(--taupe-soft);
}
.depoimentos__nota strong { color: var(--taupe); font-weight: 500; }

.contador { font-variant-numeric: tabular-nums; }

.depo {
  width: clamp(260px, 32%, 380px);
  min-width: 260px;   /* piso do encolhimento: abaixo disto o trilho rola */
  margin: 0;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--sand);
  border-radius: var(--raio);
  padding: 2rem 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.depo::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: .7;
  color: var(--sage);
  display: block;
  margin-bottom: .4rem;
}
.depo blockquote {
  margin: 0 0 1.6rem;
  font-size: .93rem;
  line-height: 1.7;
  color: var(--ink);
  flex: 1;
}
.depo figcaption {
  border-top: 1px solid var(--sand);
  padding-top: .9rem;
  display: grid;
  gap: .15rem;
}
.depo figcaption strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--taupe);
}
.depo figcaption span { font-size: .76rem; color: var(--taupe-soft); }

/* 7.8 Questionário (bloco oliva) ---------------------------------------- */
.questionario { width: 100%; max-width: none; padding: 0; }
.quiz {
  width: var(--larg);
  margin: 0 auto;
  background:
    linear-gradient(rgba(79, 89, 55, .9), rgba(56, 64, 38, .95)),
    url('../assets/img/faixa-olive.jpg') center / cover var(--olive);
  border-radius: var(--raio);
  color: var(--cream);
  padding: clamp(2.8rem, 6vw, 5rem) clamp(1.6rem, 5vw, 5rem);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quiz__capa { max-width: 760px; }
.quiz__capa .titulo { font-size: clamp(1.8rem, 4.4vw, 3.6rem); }
.quiz__lead { max-width: 48ch; color: rgba(246, 245, 241, .85); font-size: .95rem; }
.quiz__lead strong { color: var(--cream); font-weight: 500; }
.quiz__aviso {
  max-width: 50ch;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--sage-pale);
  border-left: 2px solid var(--sage);
  padding-left: 1rem;
  margin: 1.6rem 0 2.4rem;
}
.quiz__aviso strong { color: var(--cream); font-weight: 500; }

.quiz__barra {
  height: 2px;
  background: rgba(201, 209, 180, .25);
  border-radius: 2px;
  overflow: hidden;
  max-width: 620px;
}
.quiz__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sage-pale);
  transition: width .5s var(--t);
}
.quiz__contagem {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--sage);
  margin: 1rem 0 1.6rem;
}
.quiz__contagem i { font-style: normal; font-size: .75rem; opacity: .7; }

.quiz__pergunta {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.1vw, 2.4rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--cream);
  margin: 0 0 2rem;
  max-width: 22ch;
}
.quiz__opcoes { display: grid; gap: .75rem; max-width: 620px; }
.quiz__opcoes button {
  text-align: left;
  background: rgba(246, 245, 241, .07);
  border: 1px solid rgba(201, 209, 180, .32);
  border-radius: var(--raio-sm);
  color: var(--cream);
  padding: 1rem 1.3rem;
  font-size: .9rem;
  transition: background .3s var(--t), border-color .3s var(--t), transform .3s var(--t);
}
.quiz__opcoes button:hover {
  background: rgba(246, 245, 241, .16);
  border-color: var(--sage-pale);
  transform: translateX(5px);
}
.quiz__voltar {
  background: none;
  border: none;
  color: var(--sage);
  font-size: .78rem;
  letter-spacing: .1em;
  padding: 0;
  margin-top: 1.8rem;
}

.quiz__fim { max-width: 640px; }
.quiz__fim-titulo {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 1rem;
}
.quiz__fim-titulo, .quiz__fim .olho { text-align: left; }
.quiz__fim-texto { color: rgba(246, 245, 241, .85); }
.quiz__pontos { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: .8rem; }
.quiz__pontos li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .89rem;
  color: rgba(246, 245, 241, .82);
}
.quiz__pontos li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 1px;
  background: var(--sage);
}
.quiz__fim-acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* 7.9 Formação ----------------------------------------------------------- */
.formacao__lista { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 0; }
.formacao__lista li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 1.7rem 0;
  border-top: 1px solid var(--sand);
}
.formacao__lista li:last-child { border-bottom: 1px solid var(--sand); }
.formacao__lista .script { font-size: 2rem; color: var(--sage); line-height: 1; }
.formacao__lista h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 .3rem;
}
.formacao__lista p { margin: 0; font-size: .87rem; color: var(--taupe-soft); max-width: 60ch; }

/* 7.10 Dúvidas ----------------------------------------------------------- */
.duvidas__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.duvidas__cabeca .titulo { margin: 0; }
.duvidas__foto {
  width: clamp(6.875rem, 14vw, 11.875rem);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
  transform: rotate(2.5deg);
}

.acordeao { border-top: 1px solid var(--sand); }
.item { border-bottom: 1px solid var(--sand); }
.item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  color: var(--taupe);
  display: flex;
  gap: 1rem;
  align-items: baseline;
  transition: color .3s var(--t);
}
.item summary::-webkit-details-marker { display: none; }
.item summary:hover { color: var(--olive); }
.item__num {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--sage);
  flex: 0 0 auto;
}
.item summary::after {
  content: '';
  position: absolute;
  right: .6rem;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border: 1px solid var(--sand);
  border-radius: 50%;
  background:
    linear-gradient(var(--taupe), var(--taupe)) center / 9px 1px no-repeat,
    linear-gradient(var(--taupe), var(--taupe)) center / 1px 9px no-repeat;
  transition: transform .4s var(--t), background-color .3s var(--t);
}
.item[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--cream), var(--cream)) center / 9px 1px no-repeat,
    linear-gradient(var(--cream), var(--cream)) center / 1px 9px no-repeat,
    var(--olive);
  border-color: var(--olive);
}
.item__corpo { overflow: hidden; }
.item__corpo p {
  margin: 0 0 1.5rem;
  padding-right: 3rem;
  font-size: .9rem;
  color: var(--taupe-soft);
  max-width: 78ch;
}

/* 7.11 Contato ----------------------------------------------------------- */
.contato { padding-bottom: 4rem; }
.contato__caixa {
  background:
    linear-gradient(rgba(79, 89, 55, .9), rgba(56, 64, 38, .95)),
    url('../assets/img/faixa-olive.jpg') center / cover var(--olive);
  border-radius: var(--raio);
  color: var(--cream);
  padding: clamp(2.4rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contato__intro .titulo { font-size: clamp(1.7rem, 3.6vw, 3rem); }
.contato__intro p { color: rgba(246, 245, 241, .82); font-size: .92rem; max-width: 42ch; }
.contato__lgpd { font-size: .76rem !important; color: var(--sage-pale) !important; }

.formulario { display: grid; gap: 1rem; }
.campo { display: grid; gap: .35rem; }
.campo label {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--sage-pale);
}
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: .92rem;
  width: 100%;
  background: rgba(246, 245, 241, .08);
  border: 1px solid rgba(201, 209, 180, .3);
  border-radius: var(--raio-sm);
  color: var(--cream);
  padding: .85rem 1rem;
  transition: border-color .3s var(--t), background .3s var(--t);
}
.campo textarea { resize: vertical; min-height: 100px; }
.campo select option { color: var(--ink); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--sage-pale);
  background: rgba(246, 245, 241, .14);
}
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: #D98C6A; }
.campo__erro { font-size: .74rem; color: #E8A98C; min-height: 1em; }

.consentimento {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .8rem;
  color: rgba(246, 245, 241, .8);
  cursor: pointer;
}
.consentimento input { margin-top: .22rem; accent-color: var(--sage); flex: 0 0 auto; }

.formulario__retorno { font-size: .85rem; color: var(--sage-pale); margin: .2rem 0 0; min-height: 1.2em; }

.contato__direto { text-align: center; padding-top: 3.5rem; }
.contato__grande {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.2vw, 3rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--taupe);
  text-decoration: none;
  word-break: break-word;
  transition: color .3s var(--t);
}
.contato__grande:hover { color: var(--olive); }
.contato__grande--verde { color: var(--olive); }

/* O <address> vem em itálico por padrão do navegador; aqui ele é texto corrido
   como o resto do bloco, só um pouco menor que os contatos em serifa. */
.contato__endereco {
  font-style: normal;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--taupe);
  max-width: 30ch;
  margin: 0 auto;
}

.redes { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; gap: .7rem; justify-content: center; }
.redes a {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--taupe);
  transition: background .3s var(--t), transform .3s var(--t);
}
.redes a:hover { background: var(--sage); transform: translateY(-3px); }
.redes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.contato__retrato {
  position: relative;
  width: clamp(11.25rem, 22vw, 17.5rem);
  margin: 3rem auto 0;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

/* ── 8. Rodapé ─────────────────────────────────────────────────────────── */
.rodape {
  background: var(--cream-deep);
  border-top: 1px solid var(--sand);
  padding: 3rem 0 1.6rem;
  font-size: .8rem;
  color: var(--taupe-soft);
}
.rodape__grade {
  width: var(--larg);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 2.4rem;
}
/* Escopado à grade, não a `.rodape p`: o crédito lá embaixo também é um <p>,
   e `.rodape p` (0,1,1) vencia o `margin: 2.6rem auto 0` de `.rodape__credito`
   (0,1,0) — o `auto` virava 0 e a linha de baixo encostava na borda esquerda,
   desalinhada de todo o resto do rodapé. */
.rodape__grade p { margin: 0 0 .25rem; }
.rodape__nome { font-family: var(--font-display); font-size: 1.25rem; color: var(--taupe); text-transform: uppercase; }
.rodape__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rodape__links a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s var(--t); }
.rodape__links a:hover { border-color: var(--taupe-soft); }
.rodape__etica { font-size: .74rem; line-height: 1.6; }

.rodape__credito {
  width: var(--larg);
  margin: 2.6rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--sand);
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: lowercase;
}
.rodape__credito a { text-decoration: none; }

/* ── 9. Animação de entrada ────────────────────────────────────────────── */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--t), transform .9s var(--t);
  transition-delay: var(--d, 0ms);
}
.revelar.visivel { opacity: 1; transform: none; }

.hero__linha, .hero__lead, .hero__registro, .hero__retrato, .hero__acao, .hero__selo {
  animation: entra 1.1s var(--t) backwards;
}
.hero__linha--1 { animation-delay: .1s; }
.hero__linha--2 { animation-delay: .22s; }
.hero__linha--3 { animation-delay: .34s; }
.hero__retrato  { animation-delay: .46s; }
.hero__lead     { animation-delay: .6s; }
.hero__registro { animation-delay: .68s; }
.hero__acao     { animation-delay: .76s; }
.hero__selo     { animation-delay: .9s; }

@keyframes entra {
  from { opacity: 0; transform: translateY(26px); }
}
.hero__retrato { animation-name: entra-retrato; }
@keyframes entra-retrato {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) rotate(-2.2deg); }
}

/* ── 10. Responsivo ────────────────────────────────────────────────────── */

/* Telas grandes.

   Acima de ~1240px todos os clamp() já tinham batido o teto, calibrado para
   1440. O resultado num monitor Full HD era uma ilha de 1240px no meio de
   creme vazio, com o título em 137px contra um retrato travado em 228px — a
   proporção entre tipografia e imagem quebrava, porque só a tipografia tinha
   chegado perto do seu limite.

   A correção não é mexer em cada clamp: é aumentar a raiz. Quase tudo no
   arquivo está em rem, inclusive os tetos dos clamp e a --larg, então subir a
   raiz faz a composição inteira crescer mantendo as proporções internas. Em
   porcentagem, não em px, para não anular o tamanho de fonte que o usuário
   escolheu no navegador.

   A escala é contínua, não em degraus: em degraus, cruzar o breakpoint
   redimensionava a página inteira de uma vez, e o salto aparecia ao
   redimensionar a janela ou ao arrastar entre monitores de densidades
   diferentes. A reta vai de 16px em 1440 a 19px em 2200 e trava nas duas
   pontas. O 1rem do mínimo é o tamanho de fonte do navegador, então quem
   aumentou a fonte continua enxergando o aumento.

   Nos dois níveis maiores a --larg também abre um pouco além do que a raiz
   daria sozinha: num monitor muito largo, só escalar a fonte ainda deixaria
   margens laterais grandes demais em proporção ao conteúdo. */
:root { font-size: clamp(1rem, 0.645rem + 0.3947vw, 1.1875rem); }

@media (min-width: 1800px) { :root { --larg: min(80rem, 90vw); } }
@media (min-width: 2200px) { :root { --larg: min(84rem, 88vw); } }

@media (max-width: 1080px) {
  .cuidado__grade > :nth-child(n) { grid-column: span 6; margin-top: 0; }

  .sobre__caixa { grid-template-columns: 1fr; }
  .sobre__retrato { max-width: 420px; }
  .sobre__retrato .circulo--sm { right: 0; }

  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .topo__grupo { display: none; }
  .topo__menu { display: block; }
  .topo__nav { justify-content: space-between; }
  .topo__marca { font-size: 1.5rem; }

  .contato__caixa { grid-template-columns: 1fr; }
  .duvidas__cabeca { align-items: center; }
}

/*  A versão mobile não é o desktop reduzido: menos carrossel, menos
    sobreposição, blocos que trocam de forma.  */
@media (max-width: 760px) {
  body { font-size: 15px; }

  .hero { padding: 6.5rem 0 1.5rem; min-height: auto; }
  .hero__titulo { font-size: clamp(2.3rem, 12vw, 4rem); line-height: .94; }
  .hero__linha--1, .hero__linha--2, .hero__linha--3 { text-align: left; padding-left: 0; }
  .hero__retrato {
    position: static;
    transform: none;
    width: 100%;
    max-width: 330px;
    margin: 1.8rem 0 0;
  }
  @keyframes entra-retrato { from { opacity: 0; transform: translateY(26px); } }
  .hero__selo { display: none; }
  .hero__base { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .hero__intro { max-width: none; }
  .hero__acao {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: none;
  }
  .hero__acao-texto { max-width: none; }
  .hero__acao-texto .seta { display: none; }
  .circulo { width: 140px; height: 140px; font-size: .85rem; }
  .hero__rodape { flex-direction: column; gap: .3rem; margin-top: 2.4rem; }

  .titulo { font-size: clamp(1.65rem, 7.2vw, 2.3rem); }
  .titulo--centro { text-align: left; }
  .olho { text-align: left; }
  .subtitulo { text-align: left; margin-left: 0; }

  /* cards 01–04 viram lista vertical, sem as fotos intercaladas */
  .cuidado__grade { display: grid; grid-template-columns: 1fr; gap: .8rem; }
  .cuidado__grade > * { grid-column: 1 / -1 !important; }
  .cuidado__foto { display: none; }
  .cartao { display: grid; grid-template-columns: 54px 1fr; gap: .6rem 1rem; padding: 1.4rem 1.3rem; }
  .cartao__num { margin: 0; font-size: 1.6rem; }
  .cartao h3 { grid-column: 2; margin: 0 0 .4rem; }
  .cartao p { grid-column: 2; }

  /* carrosséis viram pilha — sem controles */
  .carrossel__trilho {
    flex-direction: column;
    overflow: visible;
    gap: 1rem;
  }
  .carrossel__trilho > * { width: 100% !important; }
  .carrossel__controles { display: none; }
  .area img { height: 150px; }
  .material > img { height: 170px; }
  .area h3 { margin-left: 1.2rem; margin-right: 1.2rem; }
  .area p { margin-left: 1.2rem; margin-right: 1.2rem; }

  .depoimentos__nota { text-align: left; }
  .depo::before { font-size: 3.4rem; }

  .quiz { border-radius: 0; padding: 3rem 6vw; min-height: auto; }
  .questionario { width: 100%; }
  .quiz__pergunta { max-width: none; }

  .formacao__lista li { grid-template-columns: 1fr; gap: .4rem; }
  .formacao__lista .script { font-size: 1.6rem; }

  .duvidas__foto { display: none; }
  .item summary { font-size: .94rem; padding-right: 2.6rem; }
  .item__corpo p { padding-right: 0; }

  .contato__direto { padding-top: 2.5rem; text-align: left; }
  /* o bloco é centrado no desktop; aqui ele acompanha o alinhamento à esquerda
     dos rótulos, e solta a largura para o endereço não quebrar no meio */
  .contato__endereco { margin-left: 0; max-width: none; }
  .rotulo { text-align: left; }
  .redes { justify-content: flex-start; }
  .contato__retrato { margin-left: 0; }

  .rodape__grade { grid-template-columns: 1fr; gap: 1.8rem; }
  .rodape__credito { flex-direction: column; gap: .5rem; }

  .principios__intro { text-align: left; margin-bottom: 2.2rem; }
}

/* ── 11. Preferências do sistema ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .topo, .menu-mobile, .carrossel__controles, .quiz { display: none; }
  body { background: #fff; }
}