/* =========================================================
   DE VOLTA À ESSÊNCIA — Jenifer Echeverria
   Mentoria individual cristã para mulheres
   ========================================================= */

:root {
  /* Paleta do briefing */
  --linho:    #F7F3EC;
  --creme:    #EDE4D6;
  --areia:    #D8C7B2;
  --taupe:    #9B8975;
  --cafe:     #5C4A3D;
  --salvia:   #687064;

  /* Complementos da referência enviada + logo */
  --vanilla:  #FAEFE3;
  --latte:    #E8DBD1;
  --mocha:    #B7A49C;
  --tinta:    #3C4043;

  /* Texto: valores escolhidos para passar em contraste AA (4.5:1) sobre
     --linho, --creme e --vanilla. Não clarear sem recalcular. */
  --texto:       #423A33;
  --texto-suave: #675C51;
  --rotulo:      #6E6053;   /* olhos de seção, legendas, selos */
  --mocha-forte: #8B7869;   /* o lado "antes" da travessia */

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.25rem, 5vw, 2rem);
  --secao: clamp(4.5rem, 11vw, 9rem);
  --max: 1180px;

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

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--linho);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: .008em;
  overflow-x: hidden;
}

/* height:auto é obrigatório: sem ele, o atributo height="..." do HTML vira
   altura fixa em CSS e, com width:100%, a imagem estica. */
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--cafe);
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Foco visível em tudo que é navegável pelo teclado */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--salvia);
  outline-offset: 3px;
  border-radius: 2px;
}
.jornada a:focus-visible,
.rodape a:focus-visible { outline-color: var(--areia); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--estreito { max-width: 760px; }

section { padding-block: var(--secao); position: relative; }

/* ---------- Tipos utilitários ---------- */
.olho {
  font-family: var(--sans);
  font-size: .795rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rotulo);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.olho::before {
  content: "";
  width: clamp(24px, 5vw, 46px);
  height: 1px;
  background: var(--areia);
  flex: none;
}
.olho--centro { justify-content: center; }
.olho--centro::after {
  content: "";
  width: clamp(24px, 5vw, 46px);
  height: 1px;
  background: var(--areia);
  flex: none;
}

.titulo   { font-size: clamp(2rem, 5.4vw, 3.35rem); }
.titulo-g { font-size: clamp(2.5rem, 8.4vw, 4.75rem); }
.subtitulo {
  font-size: clamp(1.02rem, 2.2vw, 1.16rem);
  color: var(--texto-suave);
  max-width: 60ch;
}
.destaque { font-style: italic; color: var(--salvia); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.12rem 2.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), transform .45s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--salvia); outline-offset: 4px; }

.btn--cheio { background: var(--cafe); color: var(--vanilla); }
.btn--cheio:hover { background: var(--tinta); }

.btn--linha { border-color: var(--areia); color: var(--cafe); }
.btn--linha:hover { border-color: var(--cafe); background: var(--cafe); color: var(--vanilla); }

.btn--claro { background: var(--vanilla); color: var(--cafe); }
.btn--claro:hover { background: #fff; }

.btn svg { width: 17px; height: 17px; flex: none; }

.acoes { display: flex; flex-wrap: wrap; gap: .85rem; }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding-block: 1.35rem;
  transition: background .5s var(--ease), padding .5s var(--ease),
              box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.topo.fixo {
  background: rgba(247, 243, 236, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: .85rem;
  border-bottom-color: rgba(216, 199, 178, .5);
}
.topo__int { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.topo__logo { display: block; flex: none; padding-block: .6rem; }  /* alvo de toque */
.topo__logo img {
  height: clamp(24px, 4.4vw, 30px);
  width: auto;
  transition: height .5s var(--ease);
}
.topo.fixo .topo__logo img { height: clamp(21px, 4vw, 26px); }

.nav { display: none; gap: 2.1rem; }
.nav a {
  font-size: .83rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-suave);
  position: relative;
  padding-block: .3rem;
  transition: color .35s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--taupe);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: var(--cafe); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.topo .btn { padding: .8rem 1.55rem; font-size: .8rem; display: none; }

/* ---------- Botão do menu (só no celular/tablet) ---------- */
.menu-botao {
  width: 46px; height: 46px;
  margin-right: -10px;
  display: grid;
  place-content: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  flex: none;
}
.menu-botao__risco {
  display: block;
  width: 26px; height: 1.5px;
  background: var(--cafe);
  border-radius: 2px;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s var(--ease);
}
.menu-botao[aria-expanded="true"] .menu-botao__risco:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__risco:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav { display: flex; }
  .topo .btn { display: inline-flex; }
  .menu-botao { display: none; }
}

/* ---------- Painel do menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--linho);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(6rem, 20vw, 8rem) var(--gut) clamp(2rem, 8vw, 3rem);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  overflow-y: auto;
}
.menu.aberto { opacity: 1; transform: none; }

.menu__nav { display: grid; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(.85rem, 3.2vw, 1.15rem);
  border-bottom: 1px solid var(--areia);
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 7vw, 2.1rem);
  font-weight: 300;
  color: var(--cafe);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.menu.aberto .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:nth-child(1) { transition-delay: .06s; }
.menu__nav a:nth-child(2) { transition-delay: .11s; }
.menu__nav a:nth-child(3) { transition-delay: .16s; }
.menu__nav a:nth-child(4) { transition-delay: .21s; }
.menu__nav a:nth-child(5) { transition-delay: .26s; }
.menu__nav a span {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--rotulo);
  flex: none;
}
.menu__nav a:active { color: var(--salvia); }

.menu__pe { display: grid; gap: 1.5rem; justify-items: start; padding-top: 2rem; }
.menu__pe .btn { width: 100%; }
.menu__ig {
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--texto-suave);
  text-decoration: none;
  padding-block: .6rem;
}

body.menu-travado { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu, .menu__nav a { transition: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: 0;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* mobile: texto embaixo, rosto livre em cima */
  overflow: hidden;
}

/* Foto de fundo — cobre a seção inteira, sem esticar */
.hero__fundo { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

/* Véu que garante leitura do texto sobre a foto */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(247, 243, 236, .985) 0%,
    rgba(247, 243, 236, .965) 46%,
    rgba(247, 243, 236, .90) 55%,
    rgba(247, 243, 236, .48) 64%,
    rgba(247, 243, 236, .10) 75%,
    rgba(247, 243, 236, 0) 85%
  );
}

.hero__conteudo {
  padding-top: clamp(2rem, 6vw, 3rem);
  padding-bottom: clamp(2.75rem, 8vw, 4rem);
}
.hero__texto { max-width: 34rem; }

@media (max-width: 899px) {
  /* No celular NADA cobre a foto: ela aparece inteira em cima,
     o texto vem embaixo. Sobrepor texto num retrato vertical
     sempre cai em cima do rosto. */
  .hero {
    min-height: 0;
    display: block;
    padding-top: 4.6rem;      /* espaço do cabeçalho fixo */
    background: var(--linho);
  }
  .hero__fundo {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 4 / 5;
  }
  .hero__fundo img { object-position: 50% 12%; }
  /* dissolve só o pé da foto no fundo da página */
  .hero__fundo::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 16%;
    background: linear-gradient(to top, var(--linho), rgba(247, 243, 236, 0));
    pointer-events: none;
  }
  .hero__veu { display: none; }

  .hero__conteudo { padding-top: 1.75rem; padding-bottom: 3rem; }
  .hero .titulo-g { font-size: clamp(2.05rem, 7.8vw, 2.7rem); }
  .hero__sub { font-size: 1rem; margin-bottom: 2rem; }
  .hero__marca { margin-bottom: 1.1rem; }   /* a cor vem da regra base (--cafe) */
  /* No celular fica só a ação principal — o link secundário já existe no menu */
  .hero .acoes .btn--linha { display: none; }
  .hero .acoes .btn { width: 100%; }
}

@media (min-width: 900px) {
  .hero { justify-content: center; min-height: min(100svh, 880px); }
  /* Ancorado à direita: o corte de "cover" come só o fundo vazio da esquerda,
     nunca o rosto dela. */
  .hero__fundo img { object-position: 100% center; }
  .hero__veu {
    background: linear-gradient(
      to right,
      rgba(247, 243, 236, .98) 0%,
      rgba(247, 243, 236, .95) 34%,
      rgba(247, 243, 236, .72) 48%,
      rgba(247, 243, 236, .18) 60%,
      rgba(247, 243, 236, 0) 70%
    );
  }
  .hero__conteudo { padding-block: clamp(6rem, 12vw, 8rem) 3rem; }
  .hero__texto { max-width: 33rem; }
}

@media (min-width: 900px) and (max-width: 1119px) {
  /* Tablet: headline menor para o CTA caber na primeira dobra */
  .hero .titulo-g { font-size: clamp(2.4rem, 5.4vw, 3.4rem); }
  .hero__sub { font-size: 1rem; margin-bottom: 2rem; }
  .hero__texto { max-width: 27rem; }
}

@media (min-width: 1120px) {
  /* Espaço para os dois CTAs lado a lado, sem alargar a headline */
  .hero__texto { max-width: 41rem; }
  .hero__texto h1, .hero__sub { max-width: 33rem; }
}

.hero__marca {
  font-family: var(--serif);
  font-size: clamp(.8rem, 2.6vw, .88rem);
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--cafe);
  margin: 0 0 1.6rem;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: italic; color: var(--salvia); }
.hero__sub { font-size: clamp(1.02rem, 2.3vw, 1.14rem); color: var(--texto-suave); max-width: 46ch; margin-bottom: 2.4rem; }

/* Faixa de conceito */
.faixa {
  background: var(--cafe);
  color: var(--latte);
  padding-block: clamp(1.1rem, 3vw, 1.4rem);
  overflow: hidden;
}
.faixa__pista {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  animation: correr 44s linear infinite;
}
.faixa span {
  font-family: var(--serif);
  font-size: clamp(.95rem, 2.4vw, 1.2rem);
  font-style: italic;
  letter-spacing: .07em;
  white-space: nowrap;
  opacity: .92;
}
.faixa span::after { content: "·"; margin-left: 2.6rem; opacity: .5; }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .faixa__pista { animation: none; }
}

/* =========================================================
   IDENTIFICAÇÃO
   ========================================================= */
.espelho { background: var(--creme); }
.espelho__grade { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 900px) { .espelho__grade { grid-template-columns: .82fr 1.18fr; align-items: start; } }

.perguntas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--areia); }
.perguntas li {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.15rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--areia);
  transition: padding-left .5s var(--ease);
}
.perguntas li:hover { padding-left: .6rem; }
.perguntas b {
  font-family: var(--serif);
  font-size: .92rem;
  font-weight: 500;
  color: var(--rotulo);
  letter-spacing: .08em;
  flex: none;
  min-width: 1.9rem;
}
.perguntas p {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.1vw, 1.6rem);
  line-height: 1.4;
  color: var(--cafe);
  margin: 0;
}
.espelho__fecho {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding: clamp(1.6rem, 4vw, 2.2rem);
  background: var(--linho);
  border-left: 2px solid var(--salvia);
  border-radius: 3px;
}
.espelho__fecho p { color: var(--texto-suave); }
.espelho__fecho strong { font-weight: 400; color: var(--cafe); }

/* =========================================================
   O QUE É
   ========================================================= */
.oque { text-align: center; }
.oque__lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.9vw, 2.05rem);
  line-height: 1.5;
  color: var(--cafe);
  margin-inline: auto;
  max-width: 24ch;
}
.oque__corpo { margin-top: 2.25rem; color: var(--texto-suave); margin-inline: auto; max-width: 62ch; }

.selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 2.75rem;
}
.selos span {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rotulo);
  border: 1px solid var(--areia);
  border-radius: 999px;
  padding: .55rem 1.15rem;
}

/* =========================================================
   TRANSFORMAÇÃO
   ========================================================= */
.travessia { background: var(--vanilla); }
.travessia__cabeca { text-align: center; max-width: 620px; margin-inline: auto; margin-bottom: clamp(2.75rem, 6vw, 4rem); }
.travessia__lista { display: grid; gap: 0; border-top: 1px solid var(--areia); }
.travessia__linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.9rem, 3vw, 2.5rem);
  padding-block: clamp(1.3rem, 3.4vw, 1.85rem);
  border-bottom: 1px solid var(--areia);
}
.travessia__de, .travessia__para {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.4vw, 1.85rem);
  line-height: 1.25;
}
.travessia__de { color: #6F5F51; text-align: right; }
@media (min-width: 900px) {
  /* acima de 24px o mínimo cai para 3:1, então dá para suavizar */
  .travessia__de { color: var(--mocha-forte); }
}
.travessia__para { color: var(--cafe); }
.travessia__seta { color: var(--salvia); flex: none; }
.travessia__seta svg { width: clamp(20px, 4.5vw, 34px); height: auto; }

/* =========================================================
   SOBRE
   ========================================================= */
.sobre { background: var(--creme); overflow: hidden; }
.sobre__grade { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .sobre__grade { grid-template-columns: 1fr 1.12fr; } }

.sobre__foto { position: relative; }
.sobre__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 3px;
}
.sobre__foto figcaption {
  margin-top: 1rem;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rotulo);
}

.citacao {
  font-family: var(--serif);
  font-size: clamp(1.28rem, 3.5vw, 1.75rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--cafe);
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 1.75rem;
  padding-left: clamp(1.1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--salvia);
}
.sobre__texto p { color: var(--texto-suave); }

/* =========================================================
   ENCONTROS (galeria)
   ========================================================= */
.encontros__cabeca { max-width: 660px; margin-bottom: clamp(2.25rem, 5vw, 3rem); }
.galeria {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gut);
  scroll-behavior: smooth;
  cursor: grab;
  padding-bottom: 1.25rem;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  scrollbar-width: thin;
  scrollbar-color: var(--areia) transparent;
}
.galeria::-webkit-scrollbar { height: 4px; }
.galeria::-webkit-scrollbar-track { background: var(--creme); }
.galeria::-webkit-scrollbar-thumb { background: var(--areia); border-radius: 4px; }
.galeria figure {
  flex: 0 0 clamp(200px, 58vw, 268px);
  height: clamp(250px, 72vw, 335px);
  margin: 0;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 3px;
}
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(.9);
  transition: filter .6s var(--ease), transform .6s var(--ease);
}
.galeria figure:hover img { filter: saturate(1); transform: translateY(-4px); }
.encontros__nota { font-size: .875rem; color: var(--rotulo); margin: 0; }

/* Controles da galeria — sem eles, no desktop só dá para arrastar a barra fina */
.tira__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.tira__setas { display: flex; gap: .6rem; flex: none; }
.tira__seta {
  width: 46px; height: 46px;
  display: grid; place-content: center;
  background: transparent;
  border: 1px solid var(--areia);
  border-radius: 50%;
  color: var(--cafe);
  cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), opacity .35s var(--ease);
}
.tira__seta svg { width: 19px; height: 19px; }
.tira__seta:hover:not(:disabled) { background: var(--cafe); border-color: var(--cafe); color: var(--vanilla); }
.tira__seta:disabled { opacity: .3; cursor: default; }

/* Arrastar com o mouse */
.galeria.arrastando { cursor: grabbing; scroll-behavior: auto; }
.galeria.arrastando img { pointer-events: none; }

/* =========================================================
   JORNADA / TEMAS
   ========================================================= */
.jornada { background: var(--cafe); color: var(--latte); }
.jornada h2, .jornada .titulo { color: var(--vanilla); }
.jornada .olho { color: var(--areia); }
.jornada .olho::before, .jornada .olho::after { background: rgba(216, 199, 178, .35); }
.jornada__cabeca { max-width: 640px; margin-bottom: clamp(2.25rem, 5vw, 3rem); }

/* Duas colunas no desktop — mesmo ritmo da seção de identificação,
   e evita o vazio enorme à direita do texto. */
@media (min-width: 900px) {
  .jornada .wrap {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .jornada__cabeca { margin-bottom: 0; }
}
.jornada__cabeca p { color: rgba(240, 231, 222, .9); }

.jornada__texto {
  border-top: 1px solid rgba(216, 199, 178, .22);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  max-width: 62ch;
}
.jornada__texto p {
  font-size: clamp(1.06rem, 2.4vw, 1.2rem);
  color: rgba(240, 231, 222, .88);
  line-height: 1.75;
}
.jornada__texto strong { color: var(--vanilla); font-weight: 400; }
.jornada__texto .destaque { color: var(--areia); font-style: italic; }
.jornada__nota {
  margin-top: 2rem;
  font-size: .875rem;
  color: rgba(232, 219, 209, .82);
  max-width: 58ch;
}

/* =========================================================
   COMO FUNCIONA
   ========================================================= */
.formato__grade { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 900px) { .formato__grade { grid-template-columns: .9fr 1.1fr; align-items: start; } }

.formato__itens { display: grid; gap: 1.5rem; }
.formato__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}
.formato__item svg { width: 22px; height: 22px; color: var(--salvia); margin-top: .35rem; flex: none; }
.formato__item b { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--cafe); margin-bottom: .25rem; }
.formato__item span { font-size: .96rem; color: var(--texto-suave); line-height: 1.65; }

.aviso {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--creme);
  border-radius: 4px;
  border: 1px solid var(--areia);
}
.aviso b { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--cafe); margin-bottom: .5rem; }
.aviso p { font-size: .93rem; color: var(--texto-suave); margin: 0; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--vanilla); }
.faq__cabeca { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }
.faq__lista { max-width: 800px; margin-inline: auto; border-top: 1px solid var(--areia); }

.item { border-bottom: 1px solid var(--areia); }
.item__botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: 0;
  padding: clamp(1.2rem, 3vw, 1.55rem) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.7vw, 1.28rem);
  font-weight: 400;
  color: var(--cafe);
  line-height: 1.35;
  transition: color .35s var(--ease);
}
.item__botao:hover { color: var(--salvia); }
.item__botao:focus-visible { outline: 2px solid var(--salvia); outline-offset: 3px; }
.item__mais { position: relative; width: 16px; height: 16px; flex: none; }
.item__mais::before, .item__mais::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--taupe);
  transition: transform .45s var(--ease);
}
.item__mais::after { transform: rotate(90deg); }
.item[aria-expanded="true"] .item__mais::after { transform: rotate(0deg); }

.item__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.item[aria-expanded="true"] .item__corpo { grid-template-rows: 1fr; }
.item__corpo > div { overflow: hidden; }
.item__corpo p {
  font-size: .99rem;
  color: var(--texto-suave);
  padding-bottom: 1.5rem;
  max-width: 66ch;
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.chamado { text-align: center; background: var(--creme); }
.chamado__titulo {
  font-size: clamp(2rem, 6vw, 3.4rem);
  max-width: 17ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.chamado__titulo em { font-style: italic; color: var(--salvia); }
.chamado p { color: var(--texto-suave); max-width: 52ch; margin-inline: auto; margin-bottom: 2.5rem; }
.chamado .acoes { justify-content: center; }
.chamado__versiculo {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  color: var(--rotulo);
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { background: var(--cafe); color: var(--latte); padding-block: clamp(3.25rem, 8vw, 4.5rem) 2rem; }
.rodape__topo {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid rgba(216, 199, 178, .2);
}
@media (min-width: 760px) { .rodape__topo { grid-template-columns: 1.3fr 1fr 1fr; } }
.rodape__logo img { height: 30px; width: auto; margin-bottom: 1.25rem; }
.rodape__topo p { font-size: .95rem; color: rgba(240, 231, 222, .88); max-width: 36ch; }
.rodape h3 {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--areia);
  margin: 0 0 1.15rem;
  margin-bottom: 1.15rem;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; }
.rodape ul a {
  display: inline-block;
  font-size: .95rem;
  color: rgba(240, 231, 222, .9);
  text-decoration: none;
  padding-block: .62rem;   /* alvo de toque >= 44px */
  transition: color .35s var(--ease);
}
.rodape ul a:hover { color: var(--vanilla); }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: .83rem;
  color: rgba(232, 219, 209, .8);
}
.rodape__base a { text-decoration: none; display: inline-block; padding-block: .68rem; }
.rodape__base a:hover { color: var(--vanilla); }

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.zap {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--salvia);
  color: var(--vanilla);
  text-decoration: none;
  padding: .95rem 1.35rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(92, 74, 61, .22);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              visibility .5s var(--ease), background .4s var(--ease);
}
.zap.visivel { opacity: 1; visibility: visible; transform: none; }
.zap:hover { background: var(--cafe); }
.zap svg { width: 20px; height: 20px; flex: none; }
.zap span { display: none; }
@media (min-width: 620px) { .zap span { display: inline; } }

/* =========================================================
   ANIMAÇÃO DE ENTRADA
   ========================================================= */
/* Só esconde se o JS estiver ativo — sem JS, tudo aparece normalmente. */
.js .surge { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .surge.dentro { opacity: 1; transform: none; }

/* Entrada escalonada: os itens de lista/grade sobem um depois do outro.
   O atraso vem de --i, definido no main.js. */
.js .escalona > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.js .escalona.dentro > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .surge,
  .js .escalona > * { opacity: 1; transform: none; transition: none; }
  .btn:hover, .galeria figure:hover img { transform: none; }
  .faixa__pista { animation: none; }
}

/* Blocos aguardando dados da Jenifer — ver PENDENCIAS.md */
[data-pendente] { display: none !important; }