/* ============================================================
   Hiago Márcio — Landing page
   CSS puro, mobile-first, sem dependências externas.
   Sumário:
     1. Tokens (cores, tipografia, espaçamento)
     2. Reset e base
     3. Layout utilitário (wrap, section, eyebrow)
     4. Botões
     5. Header e navegação
     6. Hero
     7. Lista "você se identifica"
     8. Passos do atendimento
     9. Cards de diferenciais
    10. Depoimentos (carrossel)
    10b. Instagram (reels)
    11. Sobre
    12. FAQ (accordion)
    13. Contato
    14. Footer e botão flutuante
    15. Animações de entrada
    16. Breakpoints
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta amadeirada. Os nomes são históricos (--off-white, --white) e hoje
     valem como papéis: fundo da página e fundo de card. Todos os pares de
     texto foram conferidos em >= 4.5:1; ao mexer, refaça essa conta. */
  --off-white:      #e9dcc9;  /* fundo da página */
  --sand-100:       #ded0b8;  /* seções .section--sand */
  --sand-200:       #cdb99b;  /* molduras de imagem; texto do rodapé */
  --sand-300:       #b9a082;  /* barra do carrossel; texto fraco do rodapé */
  --clay-100:       #d8c7ae;  /* seções .section--clay */
  --clay-200:       #c9b394;  /* fundo do ícone de check; títulos do rodapé */

  --accent:         #4a2817;  /* marrom escuro — fundo de botões */
  --accent-hover:   #35190c;
  --accent-text:    #6b3a1f;  /* marrom para texto sobre fundo claro */

  --ink:            #2a1d13;  /* títulos; fundo do rodapé */
  --body:           #3d2f22;  /* corpo de texto */
  --muted:          #564435;  /* texto secundário */
  --line:           #ae9270;  /* bordas */

  --white:          #f6efe4;  /* fundo dos cards — clareia sobre o fundo */

  /* Tipografia */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida — cresce com a viewport, sem media query */
  --fs-h1:   clamp(2rem, 1.35rem + 3.2vw, 3.5rem);
  --fs-h2:   clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
  --fs-h3:   clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  --fs-body: 1.0625rem;

  /* Ritmo vertical generoso */
  --space-section: clamp(4rem, 3rem + 6vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 4.5rem;

  /* Curva das animações: sai rápido e desacelera longo, sem repique.
     A página é de acolhimento — nada aqui deve "saltar". */
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  --shadow-sm: 0 1px 2px rgba(42, 29, 19, .07), 0 6px 18px rgba(42, 29, 19, .07);
  --shadow-md: 0 2px 6px rgba(42, 29, 19, .09), 0 18px 40px rgba(42, 29, 19, .11);
}

/* ---------- 2. Reset e base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Sem overflow-x:hidden aqui de propósito: em body/html ele quebra o
     position:sticky do header em alguns navegadores. */
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

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

ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: var(--white); }

/* ---------- 3. Layout utilitário ---------- */
.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }

.section { padding-block: var(--space-section); }
.section--sand { background: var(--sand-100); }
.section--clay { background: var(--clay-100); }

.section__head {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-align: center;
}
.section__head h2 { margin-bottom: .5em; }
.section__lead {
  font-size: var(--fs-lead);
  color: var(--muted);
}
.section__closing {
  max-width: 40rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  color: var(--ink);
}
.section__cta {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
}

.eyebrow {
  margin-bottom: 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Moldura de imagem — também serve de placeholder quando a foto ainda não existe */
.media-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--sand-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame.is-empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1.5rem;
  text-align: center;
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--muted);
  background: repeating-linear-gradient(45deg, var(--sand-200) 0 12px, var(--sand-100) 12px 24px);
}

/* ---------- 4. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover {
  background: var(--accent-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.0625rem; }
.btn--sm { padding: .6rem 1.1rem; min-height: 40px; font-size: .9375rem; }
.btn__icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
/* Ícones desenhados com traço (ex.: Instagram): sem isto a regra acima
   preenche as formas e o desenho vira um borrão sólido. */
.btn__icon--stroke { fill: none; }

/* ---------- 5. Header e navegação ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(233, 220, 201, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(42, 29, 19, .10);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { text-decoration: none; color: var(--ink); line-height: 1.25; }
.brand__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.brand__role {
  display: block;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile: painel que desce */
.nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  padding: 1rem var(--gutter) 1.75rem;
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.nav.is-open { display: block; }
.nav__list { display: grid; gap: .25rem; margin-bottom: 1.25rem; }
.nav__list a {
  position: relative;
  display: block;
  padding: .75rem .25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: color .25s;
}
.nav__list a:hover { color: var(--accent-text); }
/* Seção em que o leitor está agora — marcada pelo script.js conforme rola */
.nav__list a.is-current { color: var(--accent-text); }
.nav__cta { width: 100%; }

/* ---------- 6. Hero ---------- */
.hero {
  padding-block: clamp(3rem, 2rem + 6vw, 6rem) var(--space-section);
  background:
    radial-gradient(120% 80% at 85% 0%, var(--clay-100) 0%, transparent 60%),
    linear-gradient(180deg, var(--sand-100), var(--off-white));
}
.hero__inner { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
.hero__title { margin-bottom: .5em; }
.hero__sub {
  max-width: 34rem;
  font-size: var(--fs-lead);
  color: var(--muted);
}
/* Última linha do hero: fecha o bloco como afirmação, não como mais um
   parágrafo de apoio. Mesmo tratamento do .section__closing. */
.hero__closing {
  font-family: var(--font-serif);
  color: var(--ink);
}
.hero__actions { margin-top: 2rem; }
.hero__note {
  margin: 1rem 0 0;
  font-size: .875rem;
  color: var(--muted);
}
.hero__figure { aspect-ratio: 4 / 3; }

/* ---------- 7. Lista "você se identifica" ---------- */
.check-list { display: grid; gap: 1rem; }
.check-list__item {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 3.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.check-list__item::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1.85rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--clay-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b3a1f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center / 68% no-repeat;
}
.check-list__item h3 { margin-bottom: .35em; }
.check-list__item p { color: var(--muted); margin: 0; }

/* ---------- 8. Passos do atendimento ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--sand-100);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.step__num {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--clay-200);
}
.step p { color: var(--muted); margin: 0; }

/* ---------- 9. Cards de diferenciais ---------- */
.cards { display: grid; gap: 1.25rem; }
.card {
  padding: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--clay-100);
  color: var(--accent-text);
}
.card__icon svg { width: 1.6rem; height: 1.6rem; }
.card p { color: var(--muted); margin: 0; }

/* ---------- 10. Depoimentos (carrossel) ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Espaço para a sombra dos cards não ser cortada */
  padding: .5rem .25rem 1.5rem;
  margin-inline: -.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sand-300) transparent;
}
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--sand-300); border-radius: 3px; }

.testimonial {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  background: var(--sand-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.stars {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  letter-spacing: .18em;
  color: var(--accent-text);
}
.testimonial blockquote { margin: 0 0 1.25rem; flex: 1; }
.testimonial blockquote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
}
.testimonial blockquote p::before { content: "“"; }
.testimonial blockquote p::after  { content: "”"; }
.testimonial__author {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: .5rem;
}
.carousel__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent-text);
  cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
.carousel__btn:hover:not(:disabled) { background: var(--accent); color: var(--white); border-color: var(--accent); }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn svg { width: 1.25rem; height: 1.25rem; }
.carousel__status {
  margin: 0;
  min-width: 5ch;
  text-align: center;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ---------- 10b. Instagram (reels) ---------- */
/* Reaproveita .carousel / .carousel__track da seção acima; só o card muda. */
.reel { scroll-snap-align: start; }
.reel__link {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.reel__link:hover { transform: translateY(-4px); }
.reel__frame {
  display: block;              /* é um <span>: sem isto ficaria inline */
  aspect-ratio: 4 / 5;
}
/* Os reels são 9:16, mais estreitos que a moldura 4:5, então sobra altura
   para cortar. A legenda do vídeo fica na faixa de baixo: puxar o ponto de
   corte para 70% preserva ela e ainda mantém o rosto inteiro no quadro. */
.reel__frame img { object-position: center 70%; }

/* Botão de play sobre a miniatura. O gradiente escurece só a base, para o
   texto queimado no vídeo continuar legível sobre qualquer thumbnail. */
.reel__play {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(42, 29, 19, .55);
  color: var(--white);
  backdrop-filter: blur(2px);
  transition: background-color .25s, transform .25s var(--ease-out);
}
.reel__link:hover .reel__play { background: var(--accent); transform: scale(1.08); }
.reel__play svg { width: 1.05rem; height: 1.05rem; margin-left: 2px; }

/* Palavra destacada no título da seção */
.highlight { color: var(--accent-text); }

/* Texto só para leitores de tela: dá destino ao link sem poluir o visual */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 11. Sobre ---------- */
.about { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
.about__figure { aspect-ratio: 4 / 5; max-width: 26rem; }
.about__credential {
  margin-top: -.5em;
  margin-bottom: 1.5em;
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.about__text p { color: var(--muted); }
.about__grid {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.about__block h3 {
  margin-bottom: .8em;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.about__block ul { display: grid; gap: .6rem; }
.about__block li { color: var(--muted); font-size: 1rem; line-height: 1.5; }
/* Precisa ser mais específico que ".about__block ul" logo acima, senão o
   display:grid daquela regra vence e as tags empilham uma por linha. */
.about__block .tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li {
  padding: .4rem .9rem;
  background: var(--clay-100);
  border-radius: 999px;
  font-size: .9375rem;
  color: var(--ink);
}

/* ---------- 12. FAQ (accordion) ---------- */
.faq { display: grid; gap: .75rem; }
.faq__item {
  background: var(--sand-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background-color .2s;
}
.faq__item[open] { background: var(--white); box-shadow: var(--shadow-sm); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--clay-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b3a1f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 62% no-repeat;
  transition: transform .25s;
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__body {
  padding: 0 1.35rem 1.35rem;
  color: var(--muted);
}

/* ---------- 13. Contato ---------- */
/* Atendimento é só online: sem mapa, o bloco vira uma coluna centrada. */
.contact {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}
.contact__list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.contact__list dt {
  margin-bottom: .25rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.contact__list dd { margin: 0; color: var(--body); }

/* ---------- 13b. Páginas de texto corrido (privacidade) ---------- */
.legal { color: var(--muted); }
.legal h2 {
  margin-top: 2.5em;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
}
.legal__meta {
  margin-bottom: 2.5em;
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.legal ul {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.5em;
  padding-left: 1.25rem;
}
.legal li { list-style: disc; }
.legal li::marker { color: var(--clay-200); }
.legal__back {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* ---------- 14. Footer e botão flutuante ---------- */
.site-footer {
  padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 2rem;
  background: var(--ink);
  color: var(--sand-200);
  font-size: .9375rem;
}
.site-footer a { color: var(--sand-200); }
.site-footer a:hover { color: var(--white); }
.footer__inner { display: grid; gap: 2.5rem; }
.footer__name {
  margin-bottom: .25em;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--white);
}
.footer__brand p { margin: 0; color: var(--sand-300); }
.footer__title {
  margin-bottom: .9em;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay-200);
}
.footer__col p { margin: 0 0 .5em; color: var(--sand-300); }
.footer__col ul { display: grid; gap: .5rem; }
.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(205, 185, 155, .20);
  font-size: .8125rem;
  color: var(--sand-300);
}
.footer__bottom p { margin: 0 0 .5em; }
.footer__disclaimer { max-width: 52rem; opacity: .85; }

.whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform .2s, background-color .2s, opacity .3s, visibility .3s;
}
.whatsapp-float svg { width: 1.85rem; height: 1.85rem; fill: currentColor; }
.whatsapp-float:hover { background: var(--accent-hover); color: var(--white); transform: scale(1.06); }
.whatsapp-float[hidden] { display: none; }

/* ---------- 15. Animações de entrada ---------- */
/* O estado inicial escondido só é aplicado quando há JS para revelar
   (a classe .js vem do script inline no <head>). Sem JS, tudo aparece.
   Quem recebe a classe .reveal é o script.js — assim você pode reescrever
   os textos do HTML sem se preocupar em manter classes de animação. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
/* Variações de direção: usadas onde a peça tem um lado natural de entrada
   (a foto do "Sobre" vem da margem, o mapa entra pela direita). */
.js .reveal--left  { transform: translateX(-30px); }
.js .reveal--right { transform: translateX(30px); }
.js .reveal--soft  { transform: scale(.96); }

.js .reveal.is-visible { opacity: 1; transform: none; }

/* A regra .reveal substitui a propriedade transition inteira do elemento.
   O item de FAQ é o único que já tinha a sua, então ela é devolvida aqui —
   sem isto, a mudança de fundo ao abrir a pergunta ficaria seca. */
.js .faq__item.reveal {
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), background-color .2s;
}

/* Entrada do hero: acontece no carregamento, não no scroll — é a única
   parte da página que já está visível quando ela abre. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-settle {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}
.js .hero__text > * {
  opacity: 0;
  animation: hero-rise .85s var(--ease-out) forwards;
}
.js .hero__text > *:nth-child(1) { animation-delay: .05s; }
.js .hero__text > *:nth-child(2) { animation-delay: .16s; }
.js .hero__text > *:nth-child(3) { animation-delay: .27s; }
.js .hero__text > *:nth-child(4) { animation-delay: .38s; }
.js .hero__figure {
  opacity: 0;
  animation: hero-settle 1.1s var(--ease-out) .2s forwards;
}

/* Parallax: a moldura fica parada e só a imagem desliza dentro dela.
   A escala extra dá a folga necessária para o deslocamento não revelar
   borda vazia. O valor do deslocamento vem do script.js. */
.js [data-parallax] img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.14);
}

/* Barra de progresso da leitura, na borda inferior do header.
   Escala horizontal controlada pelo script (--scroll-progress: 0 a 1). */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  opacity: .6;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel__track { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__text > *,
  .js .hero__figure { opacity: 1; animation: none; }
  /* O parallax é enfeite e não responde a uma intenção do usuário: sai. */
  .js [data-parallax] img { transform: none; }
}

/* ---------- 16. Breakpoints ---------- */
@media (min-width: 600px) {
  .check-list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .carousel__track { grid-auto-columns: calc(50% - .625rem); }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
  .hero__note { margin-top: 0; }
}

@media (min-width: 900px) {
  :root { --header-h: 5rem; }

  /* Navegação horizontal */
  .nav-toggle { display: none; }
  .nav {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__list {
    display: flex;
    gap: 1.75rem;
    margin: 0;
  }
  .nav__list a { padding: .25rem 0; border: 0; font-size: .9375rem; }
  /* Traço que desliza sob o link da seção atual (e no hover) */
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .3s var(--ease-out);
  }
  .nav__list a:hover::after,
  .nav__list a.is-current::after { transform: scaleX(1); }
  .nav__cta { width: auto; }

  .hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .hero__figure { aspect-ratio: 4 / 5; }

  .steps { grid-template-columns: repeat(3, 1fr); }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .carousel__track { grid-auto-columns: calc(33.333% - .834rem); }

  .about { grid-template-columns: .8fr 1.2fr; }
  .about__figure { position: sticky; top: calc(var(--header-h) + 2rem); max-width: none; }


  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
  .footer__bottom { display: flex; flex-direction: column; gap: .25rem; }

  .whatsapp-float { right: 1.75rem; bottom: 1.75rem; }
}

@media (min-width: 1100px) {
  .check-list { grid-template-columns: repeat(3, 1fr); }
}

/* Impressão: remove elementos flutuantes e fundos escuros */
@media print {
  .site-header, .whatsapp-float, .carousel__controls, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .site-footer { background: #fff; color: #000; }
  .faq__body { display: block !important; }
}