/* =========================================================
   FERNANDA LUNA . folha de estilo única, sem framework
   Site de PÁGINA ÚNICA (one page), navegação por âncora.

   Direção de arte vinda do feed @fernanda.de.luna:
   azul marinho profundo dominante, terracota como acento,
   fundo creme/off-white, toques de turquesa e magenta,
   simbolismo sutil (estrelas, portal) sem exagero esotérico.

   ESTRATÉGIA RESPONSIVA: mobile-first de verdade.
   As regras base são as do celular. Tudo que é desktop está
   dentro de @media (min-width: ...) e vem SEMPRE depois da
   regra base, então nenhum override de mobile é anulado.
   =========================================================
   ÍNDICE
   01. Tokens
   02. Reset e base
   03. Utilitários (container, seção, títulos, placeholders)
   04. Decoração (estrelas, orbes)
   05. Botões e links
   06. Cabeçalho e navegação
   07. Hero e portal
   08. Sobre
   09. Atendimentos (cards)
   10. Como funciona (passos)
   11. Faixa de citação
   12. Depoimentos (carrossel)
   13. Dúvidas (FAQ)
   14. CTA final
   15. Rodapé e botão flutuante
   16. Animações e acessibilidade
   17. Ajustes de DESKTOP (min-width)
   ========================================================= */

/* ---------------------------------------------------------
   01. TOKENS
   Cores de texto e de decoração são separadas de propósito:
   a versão "forte" de cada cor é a que passa em contraste.
   --------------------------------------------------------- */
:root{
  color-scheme: light;

  /* Base */
  --creme:#F8F2E9;            /* fundo principal */
  --creme-claro:#FDFAF5;      /* cards sobre o creme */
  --creme-medio:#F1E6D8;      /* seção alternada */

  --marinho:#131A46;          /* azul marinho dominante */
  --marinho-fundo:#0D1236;    /* topo/base dos gradientes escuros */
  --royal:#2A3680;            /* azul royal, brilhos e gradientes */

  --terracota:#C2673C;        /* acento decorativo */
  --terracota-forte:#A24720;  /* fundo de botão (texto branco passa) */
  --terracota-texto:#8F3D1B;  /* terracota legível sobre creme */

  --turquesa:#1B7E7C;         /* toque pontual */
  --magenta:#C2327B;          /* toque pontual, só decorativo */

  --tinta:#1B1F3B;            /* texto principal, nunca preto puro */
  --tinta-suave:#4B527F;      /* texto de apoio */
  --linha:rgba(27,31,59,.14);
  --linha-clara:rgba(248,242,233,.18);

  /* Cabeçalho */
  --cabecalho-fundo:rgba(19,26,70,.82);
  --cabecalho-fundo-rolou:rgba(13,18,54,.96);
  --cabecalho-altura:64px;

  /* Tipografia
     Fraunces: títulos de impacto e números (serifada com personalidade)
     Jost: corpo, navegação, botões e blocos em bold */
  --fonte-base:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-display:"Fraunces", Georgia, "Times New Roman", serif;

  /* Métricas */
  --largura:1140px;
  --gutter:clamp(1.15rem, 5vw, 2.5rem);
  --secao-y:clamp(3.5rem, 9vw, 6.5rem);
  --raio:16px;
  --raio-grande:26px;
  --sombra:0 20px 45px -30px rgba(19,26,70,.65);
  --sombra-alta:0 30px 60px -35px rgba(19,26,70,.8);
  --transicao:.32s cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------
   02. RESET E BASE
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cabecalho-altura) + 12px);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--fonte-base);
  font-weight:300;
  font-size:clamp(1rem, .97rem + .18vw, 1.06rem);
  line-height:1.65;
  /* "clip" em vez de "hidden": hidden transformaria o body em
     container de rolagem e quebraria o position:sticky do
     cabeçalho em alguns navegadores. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1rem; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--fonte-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .6em;
}
em{ font-style:italic; }

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

/* Link de pular para o conteúdo, para quem navega por teclado */
.pular{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--marinho);
  color:var(--creme);
  padding:.75rem 1.15rem;
  border-radius:0 0 12px 0;
  font-size:.92rem;
}
.pular:focus{ left:0; }

/* Barra de progresso de leitura */
.progresso{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:120;
  background:transparent;
  pointer-events:none;
}
.progresso span{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--terracota), var(--magenta) 65%, var(--turquesa));
}

/* ---------------------------------------------------------
   03. UTILITÁRIOS
   --------------------------------------------------------- */
.container{
  position:relative;   /* garante que o conteúdo fique acima */
  z-index:1;           /* das estrelas e dos orbes decorativos */
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--estreito{ max-width:760px; }

.secao{
  position:relative;
  padding-block:var(--secao-y);
  overflow:hidden;
}
.secao--creme{ background:var(--creme-medio); }
.secao--escura{
  background:linear-gradient(175deg, var(--marinho) 0%, var(--marinho-fundo) 100%);
  color:var(--creme);
}
.secao--escura p{ color:rgba(248,242,233,.82); }

.secao__cabeca{ max-width:600px; margin-bottom:2.5rem; }
.secao__linha{ font-size:1.02rem; }

.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--fonte-base);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--terracota-texto);
  margin-bottom:.9rem;
}
.etiqueta::before{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  opacity:.7;
}
.etiqueta--claro{ color:#E9A67C; }

.titulo{
  font-size:clamp(1.95rem, 7.5vw, 3.35rem);
  color:var(--marinho);
}
.titulo em{ color:var(--terracota-texto); }
.titulo--claro{ color:var(--creme); }
.titulo--claro em{
  color:transparent;
  background-image:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%),
    linear-gradient(100deg, #E9A67C, #F2C9A0 55%, #9FD8D2);
  background-size:250% 100%, 100% 100%;
  background-position:-60% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  animation:brilho-holografico 2s ease-in-out infinite;
}

/* Placeholder visível: precisa incomodar um pouco, para ninguém
   publicar o site esquecendo de substituir. */
.nota-placeholder{
  display:block;
  border:1px dashed var(--terracota);
  background:rgba(194,103,60,.08);
  color:var(--terracota-texto);
  border-radius:10px;
  padding:.7rem .9rem;
  font-size:.9rem;
  line-height:1.5;
}
.secao--escura .nota-placeholder{
  border-color:rgba(233,166,124,.6);
  background:rgba(233,166,124,.1);
  color:#F2C9A0;
}

.lista-check{ margin:0 0 1.5rem; display:grid; gap:.6rem; }
.lista-check li{
  position:relative;
  padding-left:1.75rem;
  font-size:.98rem;
}
.lista-check li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:-.1em;
  color:var(--terracota);
  font-size:.95rem;
}

/* ---------------------------------------------------------
   04. DECORAÇÃO: estrelas e orbes
   Geradas por JS (main.js). Nas seções escuras usam a cor
   creme; nas seções de fundo claro (.estrelas--sutil) usam
   terracota bem discreto, para não sumir no fundo.
   --------------------------------------------------------- */
.estrelas{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.estrelas i{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#FFF6E9;
  opacity:.25;
  animation:cintilar 4s ease-in-out infinite;
}
.estrelas i.grande{
  width:3px;
  height:3px;
  box-shadow:0 0 6px 1px rgba(255,246,233,.5);
}
.estrelas--sutil i{
  background:var(--terracota);
  opacity:.28;
}
.estrelas--sutil i.grande{
  box-shadow:0 0 6px 1px rgba(194,103,60,.35);
}

.orbe{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  opacity:.5;
}
.orbe--a{
  width:280px; height:280px;
  top:-90px; right:-110px;
  background:radial-gradient(circle, rgba(194,103,60,.75), transparent 68%);
}
.orbe--b{
  width:240px; height:240px;
  bottom:-120px; left:-110px;
  background:radial-gradient(circle, rgba(42,54,128,.9), transparent 68%);
}
.orbe--c{
  width:300px; height:300px;
  top:-120px; left:50%;
  margin-left:-150px;
  background:radial-gradient(circle, rgba(27,126,124,.55), transparent 68%);
}

/* ---------------------------------------------------------
   05. BOTÕES E LINKS
   Alvo de toque de 48px no mobile, conforme recomendação de
   acessibilidade do Material/WCAG 2.5.8 (target size).
   --------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.85rem 1.5rem;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--fonte-base);
  font-weight:500;
  font-size:.97rem;
  letter-spacing:.01em;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--transicao), background-color var(--transicao),
             color var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
/* Brilho que atravessa o botão no hover */
.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg);
  transition:left .6s ease;
}
.btn:hover::after{ left:130%; }

.btn--terracota{
  background:var(--terracota-forte);
  color:#FFF7F0;
  box-shadow:0 16px 30px -20px rgba(162,71,32,.9);
}
.btn--terracota:hover{ background:var(--terracota); transform:translateY(-2px); }

.btn--vazado-claro{
  border-color:rgba(248,242,233,.45);
  color:var(--creme);
  background:rgba(248,242,233,.05);
}
.btn--vazado-claro:hover{
  border-color:var(--creme);
  background:rgba(248,242,233,.14);
  transform:translateY(-2px);
}

.btn--pequeno{ min-height:44px; padding:.6rem 1.15rem; font-size:.9rem; }
.btn--grande{ padding:1rem 1.9rem; font-size:1.03rem; }

.link-seta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  font-weight:500;
  font-size:.95rem;
  color:var(--terracota-texto);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:gap var(--transicao), border-color var(--transicao);
}
.link-seta::after{ content:"→"; transition:transform var(--transicao); }
.link-seta:hover{ gap:.75rem; border-color:currentColor; }
.link-seta:hover::after{ transform:translateX(2px); }
.link-seta--claro{ color:#E9A67C; }

/* ---------------------------------------------------------
   06. CABEÇALHO E NAVEGAÇÃO
   Base = mobile: menu sanfona que abre abaixo da barra.
   --------------------------------------------------------- */
.cabecalho{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--cabecalho-fundo);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color var(--transicao), border-color var(--transicao);
}
.cabecalho.rolou{
  background:var(--cabecalho-fundo-rolou);
  border-bottom-color:var(--linha-clara);
}
.cabecalho__interno{
  position:relative;
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:var(--cabecalho-altura);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.marca{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--creme);
}
.marca__selo{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  color:#E9A67C;
  background:rgba(233,166,124,.12);
  border:1px solid rgba(233,166,124,.35);
  animation:respirar 5s ease-in-out infinite;
}
.marca__texto{ display:flex; flex-direction:column; line-height:1.1; }
.marca__texto strong{
  font-family:var(--fonte-display);
  font-weight:500;
  font-size:1.32rem;
  letter-spacing:-.01em;
}
.marca__texto small{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(248,242,233,.62);
}

.menu-btn{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid var(--linha-clara);
  border-radius:12px;
  color:var(--creme);
  cursor:pointer;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after{
  content:"";
  display:block;
  width:20px;
  height:1.5px;
  background:currentColor;
  border-radius:2px;
  transition:transform var(--transicao), opacity var(--transicao);
}
.menu-btn span::before{ transform:translateY(-6px); }
.menu-btn span::after{ transform:translateY(4.5px); }
.menu-btn[aria-expanded="true"] span{ background:transparent; }
.menu-btn[aria-expanded="true"] span::before{ transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after{ transform:rotate(-45deg) translateY(0); }

.navegacao{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--marinho-fundo);
  border-top:1px solid var(--linha-clara);
  border-bottom:1px solid var(--linha-clara);
  padding:1rem var(--gutter) 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.navegacao.aberto{ opacity:1; visibility:visible; transform:translateY(0); }

.navegacao__lista{ display:flex; flex-direction:column; }
.navegacao__lista a{
  display:flex;
  align-items:center;
  min-height:50px;                 /* alvo de toque confortável */
  color:rgba(248,242,233,.88);
  text-decoration:none;
  font-size:1.02rem;
  border-bottom:1px solid rgba(248,242,233,.08);
  transition:color var(--transicao), padding-left var(--transicao);
}
.navegacao__lista a:hover{ color:#E9A67C; padding-left:.35rem; }
.navegacao__lista a[aria-current="location"]{ color:#E9A67C; }
.navegacao .btn{ margin-top:.9rem; color:rgba(248,242,233,.88); }
.navegacao .btn:hover{ color:#E9A67C; }

/* ---------------------------------------------------------
   07. HERO E PORTAL
   --------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #1D2760 0%, transparent 60%),
    linear-gradient(180deg, var(--marinho) 0%, var(--marinho-fundo) 100%);
  color:var(--creme);
  padding-block:clamp(2.75rem, 9vw, 5rem) clamp(4rem, 12vw, 6rem);
}
.hero__grade{ display:grid; gap:2.25rem; }

.hero__titulo{
  font-size:clamp(2.35rem, 11.5vw, 4.6rem);
  font-weight:300;
  color:var(--creme);
  margin-bottom:1.1rem;
}
.hero__titulo span{ display:block; }
.hero__titulo em{
  font-style:italic;
  color:transparent;
  background-image:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%),
    linear-gradient(100deg, #E9A67C 10%, #F2C9A0 45%, #9FD8D2 95%);
  background-size:250% 100%, 100% 100%;
  background-position:-60% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  animation:brilho-holografico 2s ease-in-out infinite;
}

/* Sem suporte a background-clip:text, o texto com gradiente ficaria
   invisível (color:transparent). Rede de segurança: */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__titulo em,
  .titulo--claro em,
  .erro__numero{
    color:#E9A67C;
    background:none;
  }
}

.hero__linha{
  font-size:1.05rem;
  color:rgba(248,242,233,.82);
  max-width:36ch;
  margin-bottom:1rem;
}

.hero__corpo{
  display:grid;
  gap:.85rem;
  max-width:38ch;
  margin-bottom:1.75rem;
}
.hero__corpo p{
  margin:0;
  font-size:.92rem;
  line-height:1.5;
  color:rgba(248,242,233,.7);
}

.hero__acoes{ display:flex; flex-direction:column; gap:.75rem; }
.hero__acoes .btn{ width:100%; }   /* mobile: botão de largura cheia */

.hero__selos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.45rem;
  margin-top:1.5rem;
}
.hero__selos li{
  font-size:.78rem;
  letter-spacing:.04em;
  padding:.4rem .8rem;
  border-radius:999px;
  border:1px solid var(--linha-clara);
  color:rgba(248,242,233,.75);
  background:rgba(248,242,233,.04);
}

.hero__visual{ display:grid; justify-items:center; gap:1rem; }

.portal{
  position:relative;
  width:min(66vw, 280px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.portal__anel{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0 46%,
    rgba(233,166,124,.15) 55%,
    var(--terracota) 72%,
    var(--turquesa) 86%,
    transparent 96%);
  -webkit-mask:radial-gradient(circle, transparent 63%, #000 64%);
  mask:radial-gradient(circle, transparent 63%, #000 64%);
  animation:girar 24s linear infinite;
}
.portal__halo{
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(194,103,60,.35), transparent 62%);
  filter:blur(24px);
  animation:pulsar 7s ease-in-out infinite;
}
.portal__nucleo{
  position:relative;
  width:74%;
  height:74%;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 32% 26%, #26317A 0%, #10164A 55%, #080C2B 100%);
  border:1px solid rgba(248,242,233,.16);
  box-shadow:inset 0 0 50px rgba(0,0,0,.55), 0 26px 50px -28px rgba(0,0,0,.9);
}
.portal__numero{
  font-family:var(--fonte-display);
  font-weight:300;
  font-size:clamp(3.2rem, 18vw, 5rem);
  line-height:1;
  color:var(--creme);
  text-shadow:0 0 26px rgba(233,166,124,.45);
  transition:opacity .45s ease, filter .45s ease, transform .45s ease;
}
.portal__numero.trocando{
  opacity:0;
  filter:blur(6px);
  transform:translateY(-6px) scale(.94);
}
/* Foto real da Fernanda, quando entrar no lugar do número */
.portal__foto{
  position:absolute;
  inset:13%;
  width:74%;
  height:74%;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(248,242,233,.25);
}

.hero__legenda{
  font-family:var(--fonte-display);
  font-style:italic;
  font-size:.98rem;
  text-align:center;
  color:rgba(248,242,233,.66);
  max-width:30ch;
  margin:0;
}

.rolar{ display:none; }   /* só faz sentido no desktop */

/* ---------------------------------------------------------
   08. SOBRE
   --------------------------------------------------------- */
.sobre__grade{ display:grid; gap:2.25rem; }

.sobre__figura{ position:relative; }
.sobre__figura img{
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--raio-grande);
  box-shadow:var(--sombra-alta);
}

.sobre__credencial{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:-1.75rem;
  padding:1rem 1.15rem;
  border-radius:var(--raio);
  background:var(--tinta-suave);
  border:1px solid var(--linha);
  box-shadow:var(--sombra-alta);
}
.sobre__credencial p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  text-align:center;
  color:#FBFBFB;
}

.sobre__texto p{ color:var(--tinta-suave); }

.sobre__destaques{
  display:grid;
  gap:1rem;
  margin-top:2.5rem;
}
.destaque{
  padding:1.1rem 1.25rem;
  border-radius:var(--raio);
  background:var(--creme-claro);
  box-shadow:var(--sombra);
}
.destaque__titulo{
  font-size:1.02rem;
  color:var(--terracota-texto);
  margin-bottom:.4rem;
}
.destaque p{ margin:0; font-size:.94rem; }

/* Seletor composto de propósito: a regra acima é mais específica que
   .nota-placeholder sozinha e apagaria a cor do aviso. */
.sobre__texto .nota-placeholder{
  color:var(--terracota-texto);
  margin-bottom:1.25rem;
}

/* ---------------------------------------------------------
   09. ATENDIMENTOS
   --------------------------------------------------------- */
.cards{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.35rem .2rem 1rem;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  scrollbar-width:none;
}
.cards::-webkit-scrollbar{ display:none; }

.cards__dica{
  margin:.25rem 0 0;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(248,242,233,.7);
}

.card{
  position:relative;
  flex:0 0 min(86%, 340px);
  scroll-snap-align:center;
  padding:1.6rem 1.4rem 1.4rem;
  border-radius:var(--raio-grande);
  background:rgba(248,242,233,.045);
  border:1px solid var(--linha-clara);
  overflow:hidden;
  transition:transform var(--transicao), border-color var(--transicao), background-color var(--transicao);
}
/* Fio de luz que aparece no topo do card no hover */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--terracota), var(--turquesa), transparent);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .55s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(233,166,124,.45);
  background:rgba(248,242,233,.075);
}
.card:hover::before{ transform:scaleX(1); }

.card--destaque{
  background:rgba(233,166,124,.09);
  border-color:rgba(233,166,124,.35);
}

/* Cor de destaque de cada atendimento (tagline, "Para quem", ícones).
   Tons claros da paleta da marca, todos com contraste AA sobre o marinho. */
.card--mapa{ --acento:#E9A67C; }   /* terracota claro */
.card--acomp{ --acento:#7DD3CC; }  /* turquesa claro */
.card--ano{ --acento:#F2A0C8; }    /* magenta claro */

.card__numero{
  position:absolute;
  top:.5rem;
  right:1rem;
  font-family:var(--fonte-display);
  font-size:3.2rem;
  line-height:1;
  color:var(--acento, #F8F2E9);
  opacity:.16;
  pointer-events:none;
}
.card__titulo{
  font-size:1.45rem;
  color:var(--creme);
  margin-bottom:.7rem;
}
/* Seletores compostos (.card .x) para vencer ".secao--escura p". */
.card .card__tagline{
  font-family:var(--fonte-display);
  font-style:italic;
  font-size:1.12rem;
  line-height:1.35;
  color:var(--acento, #E9A67C);
  margin-bottom:.9rem;
}
.card__quem{ font-size:.94rem; }
.card .link-seta--claro{ color:var(--acento, #E9A67C); }
.card__quem strong{ color:var(--acento, #E9A67C); font-weight:500; }
.card .card__aviso{
  font-size:.92rem;
  font-weight:600;
  color:var(--creme);
}

/* Como funciona / Você recebe em lista com ícones */
.card__info{
  margin:0 0 1.1rem;
  padding:.9rem 1rem;
  border-radius:var(--raio);
  background:rgba(248,242,233,.05);
  border:1px solid var(--linha-clara);
}
.card .card__info-titulo{
  margin:0 0 .45rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acento, #E9A67C);
}
.card__lista + .card__info-titulo{ margin-top:.85rem; }
.card__lista{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.4rem;
}
.card__lista li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  font-size:.88rem;
  line-height:1.45;
  color:rgba(248,242,233,.86);
}
.card__icone{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-top:.12rem;
  fill:none;
  stroke:var(--acento, #E9A67C);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------------------------------------------------------
   10. COMO FUNCIONA
   Linha do tempo vertical no mobile, com a linha à esquerda.
   --------------------------------------------------------- */
.passos{
  position:relative;
  display:grid;
  gap:1.75rem;
  padding-left:2.75rem;
}
/* A linha em si. Cresce quando a seção entra na tela. */
.passos::before{
  content:"";
  position:absolute;
  left:17px;
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg, var(--terracota), rgba(27,126,124,.55));
  transform:scaleY(0);
  transform-origin:50% 0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.passos.ativa::before{ transform:scaleY(1); }

.metodo__cta{
  display:flex;
  justify-content:center;
  margin-top:3rem;
}

.passo{
  position:relative;
  transition:transform var(--transicao);
}
/* Ao passar o mouse, o passo inteiro cresce, como se viesse pra frente */
.passo:hover{ transform:scale(1.07); z-index:2; }
.passo__marca{
  position:absolute;
  left:-2.75rem;
  top:-2px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--creme);
  border:2px solid var(--terracota);
  color:var(--terracota-texto);
  font-family:var(--fonte-display);
  font-size:1.1rem;
  transition:box-shadow var(--transicao), border-color var(--transicao);
}
.passo:hover .passo__marca{
  border-color:var(--turquesa);
  box-shadow:0 12px 26px -14px rgba(162,71,32,.65);
}
/* Brilho holográfico só no número, sem mexer no fundo/borda do círculo */
.passo__numero-brilho{
  color:transparent;
  background-image:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%),
    linear-gradient(100deg, var(--terracota-texto), var(--turquesa));
  background-size:250% 100%, 100% 100%;
  background-position:-60% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  animation:brilho-holografico 2s ease-in-out infinite;
}
.passo__titulo{
  font-size:1.25rem;
  color:var(--marinho);
  margin-bottom:.35rem;
  transition:transform var(--transicao), color var(--transicao);
}
.passo p{
  color:var(--tinta-suave);
  margin:0;
  font-size:.98rem;
  transition:transform var(--transicao), color var(--transicao);
}
.passo:hover .passo__titulo{ transform:translateY(-3px); color:var(--terracota-texto); }
.passo:hover p{ transform:translateY(-2px); color:var(--tinta); }

.passo__servicos{
  display:grid;
  gap:.5rem;
  margin:.75rem 0 0;
}
.passo__servicos li{
  font-size:.92rem;
  color:var(--tinta-suave);
}
.passo__servicos strong{ color:var(--terracota-texto); font-weight:500; }

/* ---------------------------------------------------------
   11. FAIXA DE CITAÇÃO
   --------------------------------------------------------- */
.citacao{
  position:relative;
  overflow:hidden;
  padding-block:clamp(3rem, 10vw, 5rem);
  background:linear-gradient(135deg, #A24720 0%, #C2673C 55%, #A83F5C 100%);
  color:#FFF6EE;
  text-align:center;
}
.citacao .container{ padding-inline:var(--gutter); }
.citacao__texto{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3em;
  font-family:var(--fonte-display);
  font-weight:300;
  font-size:clamp(1.5rem, 6.5vw, 2.6rem);
  line-height:1.25;
  margin:0;
}
/* Flex + align-items:center centraliza cada linha de verdade, mesmo
   quando ela é mais larga que o container (ao contrário de
   text-align:center, que não garante isso em todo navegador). */
/* Mobile: frase maior, quebrando em linhas equilibradas (text-wrap:balance).
   No desktop (min-width:900px) volta a ser uma linha por frase. */
.citacao__linha1,
.citacao__linha2{
  display:block;
  max-width:26ch;
  text-align:center;
  text-wrap:balance;
  font-size:clamp(1.4rem, 6.8vw, 2.1rem);
  line-height:1.3;
}
.citacao__linha2{ margin-top:.5em; }
.citacao__texto em{ font-style:italic; color:#FFE6CE; }

/* ---------------------------------------------------------
   12. DEPOIMENTOS
   Carrossel com scroll-snap. No mobile o dedo arrasta,
   no desktop entram as setas.
   --------------------------------------------------------- */
.carrossel{ position:relative; display:flex; align-items:center; gap:.75rem; }

.carrossel__trilho{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.35rem .2rem 1rem;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  scrollbar-width:none;
}
.carrossel__trilho::-webkit-scrollbar{ display:none; }

.depoimento{
  position:relative;
  flex:0 0 min(84%, 340px);
  scroll-snap-align:center;
  padding:2rem 1.4rem 1.4rem;
  border-radius:var(--raio-grande);
  background:var(--creme-claro);
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
}
.depoimento__aspas{
  position:absolute;
  top:.35rem;
  left:1rem;
  font-family:var(--fonte-display);
  font-size:3.4rem;
  line-height:1;
  color:rgba(194,103,60,.28);
}
.depoimento__texto{
  font-family:var(--fonte-display);
  font-size:1.05rem;
  font-style:italic;
  color:var(--tinta);
  min-height:5.5rem;
}
/* "Ler mais": o main.js só recolhe os depoimentos que passam de ~7 linhas
   e cria o botão. Sem JS, o texto aparece inteiro. */
.depoimento--recolhido .depoimento__texto{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:7;
  line-clamp:7;
  overflow:hidden;
}
.depoimento__mais{
  margin-top:.75rem;
  padding:0;
  background:none;
  border:0;
  font:inherit;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--terracota-texto);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px;
}
.depoimento__mais:hover{ color:var(--terracota-forte); }
.depoimento__autora{
  margin:0 0 .75rem;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--terracota-texto);
}

.carrossel__seta{ display:none; }

.carrossel__dica{
  margin:.25rem 0 0;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  color:var(--tinta-suave);
  opacity:.7;
}

/* ---------------------------------------------------------
   13. DÚVIDAS (FAQ)
   <details> nativo: acessível por teclado sem uma linha de JS.
   --------------------------------------------------------- */
.faq{ display:grid; gap:.7rem; }
.faq__item{
  background:var(--creme-claro);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  overflow:hidden;
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
.faq__item[open]{ border-color:rgba(194,103,60,.45); box-shadow:var(--sombra); }

.faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:52px;
  padding:.9rem 1.1rem;
  cursor:pointer;
  font-weight:500;
  font-size:1rem;
  color:var(--marinho);
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  font-family:var(--fonte-display);
  font-size:1.5rem;
  line-height:1;
  color:var(--terracota);
  transition:transform var(--transicao);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }

.faq__resposta{ padding:0 1.1rem 1.1rem; }
.faq__resposta p{ margin:0; color:var(--tinta-suave); font-size:.97rem; }
.faq__resposta .nota-placeholder{ color:var(--terracota-texto); }

/* ---------------------------------------------------------
   14. CTA FINAL
   --------------------------------------------------------- */
.final{ text-align:center; }
.final__conteudo{ position:relative; z-index:2; }
.final .etiqueta{ justify-content:center; }
.final__linha{ font-size:1.04rem; max-width:46ch; margin-inline:auto; }
.final__acoes{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin:1.75rem 0 1.5rem;
}
.final__acoes .btn{ width:100%; }
.final .final__aviso{
  font-size:.83rem;
  color:rgba(248,242,233,.6);
  max-width:52ch;
  margin-inline:auto;
}

/* ---------------------------------------------------------
   15. RODAPÉ E BOTÃO FLUTUANTE
   --------------------------------------------------------- */
.rodape{
  background:var(--marinho-fundo);
  color:rgba(248,242,233,.75);
  padding-block:2.5rem 1.5rem;
  /* espaço para o botão flutuante não cobrir o conteúdo no mobile */
  padding-bottom:calc(1.5rem + 78px);
  font-size:.92rem;
}
.rodape__interno{
  display:grid;
  gap:1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--linha-clara);
}
.rodape__marca{
  font-family:var(--fonte-display);
  font-size:1.3rem;
  color:var(--creme);
  margin:0 0 .2rem;
}
.rodape__linha{ margin:0; font-size:.88rem; }

.rodape__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.rodape__links a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  text-decoration:none;
  transition:color var(--transicao);
}
.rodape__links a:hover{ color:#E9A67C; }

.rodape__base{
  display:grid;
  gap:.35rem;
  padding-top:1.25rem;
  font-size:.82rem;
  color:rgba(248,242,233,.55);
}
.rodape__base p{ margin:0; }
.rodape__base a{ color:#E9A67C; text-decoration:none; }
.rodape__base a:hover{ text-decoration:underline; }

.flutuante{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:110;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1FA855;
  color:#fff;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.55);
  transition:transform var(--transicao);
}
.flutuante:hover{ transform:scale(1.06); }
.flutuante svg{ position:relative; z-index:2; }
.flutuante__pulso{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(31,168,85,.6);
  animation:pulso 2.6s ease-out infinite;
}

/* ---------------------------------------------------------
   16. ANIMAÇÕES
   --------------------------------------------------------- */
@keyframes entrar{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}
@keyframes girar{
  to{ transform:rotate(360deg); }
}
/* Brilho holográfico: um reflexo de luz atravessa o texto de um lado
   para o outro. A cor de base (segunda camada) fica sempre fixa,
   só a faixa de brilho (primeira camada) se move. */
@keyframes brilho-holografico{
  0%{ background-position:-60% 0, 0 0; }
  100%{ background-position:160% 0, 0 0; }
}
@keyframes pulsar{
  0%,100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.08); opacity:.85; }
}
@keyframes cintilar{
  0%,100%{ opacity:.18; transform:scale(1); }
  50%{ opacity:.85; transform:scale(1.35); }
}
@keyframes respirar{
  0%,100%{ box-shadow:0 0 0 0 rgba(233,166,124,.25); }
  50%{ box-shadow:0 0 0 6px rgba(233,166,124,0); }
}
@keyframes pulso{
  0%{ transform:scale(1); opacity:.9; }
  70%{ transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}
@keyframes flutuar{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* Entrada dos blocos do hero, no carregamento */
.anima{
  opacity:0;
  animation:entrar .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:var(--d, 0ms);
}

/* Entrada por rolagem, ativada pelo IntersectionObserver */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d, 0ms);
}
.reveal--esq{ transform:translateX(-26px); }
.reveal--dir{ transform:translateX(26px); }
.reveal.visivel{ opacity:1; transform:none; }

/* Acessibilidade: quem pede menos movimento recebe o site parado.
   Referência: https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media/prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .anima,.reveal{ opacity:1 !important; transform:none !important; }
  .passos::before{ transform:scaleY(1) !important; }
  .carrossel__trilho{ scroll-behavior:auto; }
}

/* =========================================================
   17. AJUSTES DE DESKTOP
   Tudo daqui para baixo é min-width, ou seja, só entra em
   telas maiores. Nada aqui interfere no mobile.
   ========================================================= */

/* --- Tablet --- */
@media (min-width:640px){
  .hero__acoes{ flex-direction:row; flex-wrap:wrap; }
  .hero__acoes .btn{ width:auto; }
  .hero__selos{ justify-content:flex-start; }
  .final__acoes{ flex-direction:row; justify-content:center; }
  .final__acoes .btn{ width:auto; }
  .cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.15rem;
    overflow-x:visible;
    scroll-snap-type:none;
    margin-inline:0;
    padding-inline:0;
    padding-block:0;
  }
  .card{ flex:initial; scroll-snap-align:none; }
  .cards__dica{ display:none; }
  .depoimento{ flex-basis:min(60%, 340px); }
  .rodape__interno{ grid-template-columns:1fr auto; align-items:center; }
  .rodape__base{ grid-template-columns:1fr auto; }
}

/* --- Desktop --- */
@media (min-width:900px){
  :root{ --cabecalho-altura:76px; }

  /* Menu volta a ser barra horizontal */
  .menu-btn{ display:none; }
  .navegacao{
    position:static;
    flex-direction:row;
    align-items:center;
    gap:1.75rem;
    padding:0;
    background:transparent;
    border:0;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .navegacao__lista{ flex-direction:row; gap:1.6rem; }
  .navegacao__lista a{
    min-height:auto;
    border-bottom:0;
    font-size:.94rem;
    position:relative;
    padding-bottom:3px;
  }
  .navegacao__lista a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:#E9A67C;
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform var(--transicao);
  }
  .navegacao__lista a:hover{ padding-left:0; }
  .navegacao__lista a:hover::after,
  .navegacao__lista a[aria-current="location"]::after{ transform:scaleX(1); }
  .navegacao .btn{ margin-top:0; }

  /* Hero em duas colunas, com o portal maior e flutuando */
  .hero{ padding-block:clamp(3.5rem, 7vw, 6rem) clamp(5rem, 9vw, 7.5rem); }
  .hero__grade{
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:3.5rem;
  }
  .hero__titulo{ font-size:clamp(3rem, 4.6vw, 4.6rem); }
  .hero__linha{ font-size:1.12rem; max-width:42ch; }
  .hero__corpo{ max-width:44ch; }
  .hero__corpo p{ font-size:.98rem; }
  .portal{
    width:min(34vw, 400px);
    animation:flutuar 9s ease-in-out infinite;
  }
  .portal__numero{ font-size:clamp(4.5rem, 7vw, 6.5rem); }

  /* Indicador de rolagem, só no desktop */
  .rolar{
    position:absolute;
    left:50%;
    bottom:1.5rem;
    transform:translateX(-50%);
    display:grid;
    place-items:center;
    width:26px;
    height:44px;
    border:1px solid var(--linha-clara);
    border-radius:14px;
  }
  .rolar span{
    display:block;
    width:4px;
    height:8px;
    border-radius:2px;
    background:#E9A67C;
    animation:flutuar 2.2s ease-in-out infinite;
  }

  .secao__cabeca{ margin-bottom:3.25rem; }

  .sobre__grade{
    grid-template-columns:.85fr 1.15fr;
    align-items:start;
    gap:3.5rem;
  }
  /* Texto do Sobre ficou bem mais longo que a foto: mantém a foto
     "grudada" no topo da coluna, em vez de flutuar centralizada. */
  .sobre__figura{ position:sticky; top:6.5rem; }
  /* Foto mais alta (só no desktop) para reduzir a diferença de altura
     em relação ao texto, que é bem mais longo. */
  .sobre__figura img{ aspect-ratio:.62; }
  .sobre__credencial{ left:1.5rem; right:1.5rem; bottom:-2rem; padding:1.15rem 1.35rem; }

  /* No desktop sobra largura de sobra, então a frase de posicionamento
     pode ficar bem maior do que o mínimo calculado para caber no mobile. */
  .citacao .container{ padding-inline:.3rem; }
  .citacao__linha1,
  .citacao__linha2{ max-width:none; white-space:nowrap; font-size:clamp(.85rem, 4.3vw, 2.6rem); }
  .citacao__linha2{ margin-top:0; }

  .sobre__destaques{ grid-template-columns:repeat(3,1fr); gap:1.35rem; }

  .cards{ grid-template-columns:repeat(3,1fr); gap:1.35rem; }
  .card{ padding:2rem 1.75rem 1.75rem; }
  .card__numero{ font-size:4.2rem; }

  /* Linha do tempo passa a ser horizontal, em 4 colunas */
  .passos{
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
    padding-left:0;
    padding-top:3.25rem;
  }
  .passos::before{
    left:0;
    right:0;
    top:17px;
    bottom:auto;
    width:auto;
    height:2px;
    background:linear-gradient(90deg, var(--terracota), rgba(27,126,124,.55));
    transform:scaleX(0);
    transform-origin:0 50%;
  }
  .passos.ativa::before{ transform:scaleX(1); }
  .passo__marca{
    left:0;
    top:-3.25rem;
    width:36px;
    height:36px;
  }

  /* Carrossel com setas e três cards visíveis */
  .carrossel__trilho{
    margin-inline:0;
    padding-inline:.2rem;
    gap:1.35rem;
  }
  .depoimento{ flex-basis:calc((100% - 2.7rem) / 3); padding:2.25rem 1.75rem 1.75rem; }
  .carrossel__seta{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid var(--linha);
    background:var(--creme-claro);
    color:var(--marinho);
    font-size:1.5rem;
    line-height:1;
    cursor:pointer;
    transition:background-color var(--transicao), color var(--transicao), transform var(--transicao);
  }
  .carrossel__seta:hover{
    background:var(--marinho);
    color:var(--creme);
    transform:scale(1.06);
  }
  .carrossel__dica{ display:none; }

  .faq__item summary{ padding:1.1rem 1.4rem; font-size:1.05rem; }
  .faq__resposta{ padding:0 1.4rem 1.3rem; }

  /* Sem botão flutuante e sem a folga extra no rodapé */
  .flutuante{ display:none; }
  .rodape{ padding-bottom:1.5rem; }

  .orbe--a{ width:420px; height:420px; }
  .orbe--b{ width:380px; height:380px; }
  .orbe--c{ width:460px; height:460px; margin-left:-230px; }
}

/* --- Telas largas --- */
@media (min-width:1200px){
  .titulo{ font-size:clamp(2.6rem, 3.4vw, 3.5rem); }
  .secao__linha{ font-size:1.08rem; }
}

/* --- Impressão: só o essencial --- */
@media print{
  .cabecalho,.flutuante,.progresso,.rolar,.estrelas,.orbe,.carrossel__seta{ display:none !important; }
  body{ background:#fff; color:#000; }
  .secao--escura,.hero,.citacao{ background:#fff !important; color:#000 !important; }
  .titulo--claro,.hero__titulo{ color:#000 !important; }
  .reveal,.anima{ opacity:1 !important; transform:none !important; }
}