/* ============================================================
   ANA CAROLINE MORAIS — FISIOTERAPEUTA
   Sistema visual + Header + Hero + Faixa + Tratamentos + Domiciliar
   ------------------------------------------------------------
   Sumário
   01. Design tokens
   02. Reset e base
   03. Tipografia utilitária
   04. Botões e links
   05. Header e navegação
   06. Hero
   07. Faixa de informações
   08. Tratamentos
   09. Atendimento domiciliar
   10. Sobre a profissional
   11. Perguntas frequentes
   12. Rodapé
   13. WhatsApp flutuante
   14. Animações de entrada
   15. Responsivo
   16. Movimento reduzido
   ============================================================ */

/* ---------- 01. DESIGN TOKENS ---------- */
:root{
  color-scheme: light;

  /* Cor — extraída da identidade da marca */
  --verde-marca:      #13A97F;   /* verde do logotipo — uso decorativo */
  --verde-profundo:   #1F5C4F;   /* texto e superfícies escuras */
  --verde-texto:      #14705C;   /* verde legível sobre fundo claro */
  --verde-escuro:     #17443B;
  --menta:            #A6DDD1;
  --menta-clara:      #DCEFE8;
  --menta-fundo:      #EDF6F2;
  --sage:             #8EBEB5;

  --off-white:        #F5F3EC;
  --branco:           #FFFFFF;
  --bege:             #E9E3D8;
  --bege-escuro:      #DDD5C6;
  --cinza-quente:     #C2B8B7;   /* cinza-malva do símbolo do logotipo */

  --grafite:          #2E3734;
  --grafite-suave:    #5A6661;
  --linha:            rgba(46,55,52,.12);
  --linha-clara:      rgba(245,243,236,.22);

  /* Tipografia */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui:      "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: .72rem;
  --fs-sm:      .875rem;
  --fs-body:    1.0rem;
  --fs-lead:    1.125rem;
  --fs-h3:      clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  --fs-h2:      clamp(2.1rem, 1.35rem + 2.9vw, 3.6rem);
  --fs-h1:      clamp(2.6rem, 1.5rem + 4.4vw, 5rem);

  /* Espaçamento */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);

  /* Formas */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 26px;  --r-xl: 40px;  --r-pill: 999px;

  /* Sombras — sempre suaves e esverdeadas */
  --sh-sm: 0 2px 10px rgba(31,92,79,.06);
  --sh-md: 0 14px 34px -18px rgba(31,92,79,.28);
  --sh-lg: 0 40px 80px -42px rgba(31,92,79,.42);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  --header-h: 82px;

  /* Movimento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .2s var(--ease);
  --t-med:  .4s var(--ease);
}

/* ---------- 02. RESET E BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body{
  margin:0;
  background:var(--off-white);
  color:var(--grafite);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
h1,h2,h3{ margin:0 0 .4em; font-weight:400; }
a{ color:inherit; }
hr{ border:0; }
button{ font:inherit; color:inherit; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.anchor-stub{ height:1px; }
.br-desktop{ display:none; }

:where(a,button,input,summary):focus-visible{
  outline:2.5px solid var(--verde-texto);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--verde-profundo); color:var(--off-white);
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- 03. TIPOGRAFIA UTILITÁRIA ---------- */
.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--verde-texto);
  margin:0 0 var(--sp-4);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1.5px; background:currentColor; opacity:.55; flex:none;
}
.eyebrow--sm{ margin-bottom:var(--sp-2); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:26px; height:1.5px; background:currentColor; opacity:.55; flex:none; }
.eyebrow--light{ color:var(--menta); }

.section-head{ max-width:48rem; margin-bottom:clamp(3rem,2rem + 3vw,5rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .section-head__title,
.section-head--center .section-head__text{ margin-inline:auto; }
.section-head__title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.012em;
  color:var(--verde-escuro);
  max-width:15em;
}
/* text-wrap:balance distribui as linhas de um texto centralizado em larguras
   parecidas, em vez de deixar a última linha sozinha e curta. Só vale para
   blocos de poucas linhas — que é o caso destes textos de abertura. */
.section-head__text{
  max-width:70ch; color:var(--grafite-suave); font-size:var(--fs-lead); margin:0;
  text-wrap:balance;
}
/* Título que deve caber numa única linha em telas de desktop (ex.: Tratamentos) */
.section-head__title--nowrap{ font-size:clamp(1.6rem, .85rem + 2.1vw, 2.85rem); max-width:none; }
@media (min-width:1081px){ .section-head__title--nowrap{ white-space:nowrap; } }

.faq__title-br{ display:none; }
@media (max-width:1080px){ .faq__title-br{ display:inline; } }

/* ---------- 04. BOTÕES E LINKS ---------- */
.btn{
  --btn-bg:var(--verde-profundo); --btn-fg:var(--off-white); --btn-bd:var(--verde-profundo);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.85rem 1.75rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:var(--r-pill);
  font-size:.925rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn:active{ transform:translateY(0); }
.btn--primary:hover{ --btn-bg:var(--verde-escuro); --btn-bd:var(--verde-escuro); }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--verde-profundo); --btn-bd:rgba(31,92,79,.32); }
.btn--outline:hover{ --btn-bg:var(--menta-fundo); --btn-bd:var(--verde-profundo); }
.btn--light{ --btn-bg:var(--off-white); --btn-fg:var(--verde-escuro); --btn-bd:var(--off-white); }
.btn--light:hover{ --btn-bg:var(--menta-clara); --btn-bd:var(--menta-clara); }
.btn--ghost-light{ --btn-bg:transparent; --btn-fg:var(--off-white); --btn-bd:var(--linha-clara); }
.btn--ghost-light:hover{ --btn-bd:var(--off-white); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--verde-profundo); --btn-bd:rgba(31,92,79,.28); }
.btn--sm{ min-height:44px; padding:.55rem 1.3rem; font-size:.855rem; }
.btn--block{ width:100%; }

.link-more{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:var(--verde-texto); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:gap var(--t-fast), border-color var(--t-fast);
}
.link-more span{ transition:transform var(--t-fast); }
.link-more:hover{ border-bottom-color:currentColor; }
.link-more:hover span{ transform:translateX(3px); }

/* ---------- 05. HEADER E NAVEGAÇÃO ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:100;
  background:rgba(245,243,236,0);
  border-bottom:1px solid transparent;
  transition:background var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.site-header.is-stuck{
  background:rgba(245,243,236,.88);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--linha);
  box-shadow:0 1px 24px -16px rgba(31,92,79,.5);
}
.site-header__inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.brand__mark-wrap{ position:relative; display:inline-flex; flex:none; width:42px; }
.brand__mark{ width:42px; height:auto; display:block; }

/* Brilho animado na colunazinha de bolinhas do logo (a "coluna" ao lado do
   "a"). A mesma imagem do logo vira máscara do brilho — assim o gradiente só
   aparece exatamente onde já existem pixels (as bolinhas), sem precisar
   redesenhar a coluna em SVG. O clip-path isola só a metade direita da
   imagem (onde fica a coluna), pra não brilhar por cima do "a". */
.brand__mark-shine{
  position:absolute; inset:0;
  -webkit-mask-image:url("../img/logo-mark.webp");
  mask-image:url("../img/logo-mark.webp");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  clip-path:inset(0 0 0 56%);
  background:linear-gradient(180deg,
    transparent 0%,
    var(--menta) 40%,
    var(--verde-marca) 52%,
    var(--menta) 64%,
    transparent 100%);
  background-size:100% 260%;
  animation:brandColunaBrilho 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes brandColunaBrilho{
  0%{ background-position:0 -80%; }
  100%{ background-position:0 180%; }
}
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  font-family:var(--font-display); font-size:1.24rem; font-weight:500;
  color:var(--verde-escuro); letter-spacing:.005em;
}
.brand__role{
  font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--grafite-suave);
}

.nav__list{ display:flex; align-items:center; gap:clamp(.5rem,.1rem + 1.2vw,1.6rem); }
.nav__link{
  position:relative; display:inline-block; padding:.4rem .2rem;
  font-size:.885rem; font-weight:500; color:var(--grafite); text-decoration:none;
  transition:color var(--t-fast);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px;
  background:var(--verde-marca); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-fast);
}
.nav__link:hover{ color:var(--verde-texto); }
.nav__link:hover::after{ transform:scaleX(1); }

.site-header__actions{ display:flex; align-items:center; gap:.75rem; flex:none; }

.nav-toggle{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:1.5px solid var(--linha); border-radius:var(--r-pill);
  cursor:pointer; place-items:center; gap:5px; flex-direction:column;
}
.nav-toggle__bar{
  display:block; width:17px; height:1.6px; background:var(--verde-escuro); border-radius:2px;
  transition:transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{ transform:translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

.nav-mobile{
  background:var(--off-white);
  border-top:1px solid var(--linha);
  padding:var(--sp-4) var(--gutter) var(--sp-6);
}
.nav-mobile__list{ display:flex; flex-direction:column; }
.nav-mobile__list a{
  display:block; padding:.95rem 0; text-decoration:none;
  font-family:var(--font-display); font-size:1.45rem; color:var(--verde-escuro);
  border-bottom:1px solid var(--linha);
}
.nav-mobile__actions{ display:grid; gap:.6rem; margin-top:var(--sp-5); }

/* ---------- 06. HERO ---------- */
.hero{ position:relative; padding-top:clamp(2rem,.5rem + 4vw,4.5rem); padding-bottom:clamp(3.5rem,2rem + 5vw,7rem); }
.hero__wash{
  position:absolute; inset:calc(var(--header-h) * -1) 0 34% 0; z-index:-1;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(166,221,209,.42) 0%, rgba(166,221,209,0) 58%),
    radial-gradient(90% 70% at 4% 0%, rgba(233,227,216,.85) 0%, rgba(233,227,216,0) 62%);
}
.hero__grid{ display:block; }
.hero__copy{ max-width:none; }
.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-h1); font-weight:300; line-height:1.08; letter-spacing:-.018em;
  color:var(--verde-escuro); margin-bottom:.45em;
}
.hero__title em{ font-style:italic; font-weight:300; color:var(--verde-texto); }
@media (min-width:981px){
  .hero__title em{ white-space:nowrap; }
}
.hero__lead{
  font-size:clamp(1.02rem,.96rem + .3vw,1.19rem); color:var(--grafite-suave);
  max-width:46ch; margin-bottom:var(--sp-6);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:var(--sp-7); }

/* Ticker do hero — uma informação de cada vez, em loop suave */
.ticker{
  display:flex; align-items:center; gap:.8rem;
  padding-top:var(--sp-5); border-top:1px solid var(--linha);
}
.ticker__dot{
  width:8px; height:8px; flex:none; border-radius:50%;
  background:var(--verde-marca);
  box-shadow:0 0 0 0 rgba(19,169,127,.45);
  animation:pulso 2.8s ease-out infinite;
}
@keyframes pulso{
  0%{ box-shadow:0 0 0 0 rgba(19,169,127,.45); }
  70%{ box-shadow:0 0 0 11px rgba(19,169,127,0); }
  100%{ box-shadow:0 0 0 0 rgba(19,169,127,0); }
}
.ticker__window{ display:block; height:1.7em; overflow:hidden; }
.ticker__list{
  display:flex; flex-direction:column;
  animation:ticker 16s cubic-bezier(.76,0,.24,1) infinite;
}
.ticker__item{
  height:1.7em; line-height:1.7em; white-space:nowrap;
  font-size:.95rem; font-weight:600; color:var(--verde-escuro);
}
@keyframes ticker{
  0%,18%    { transform:translateY(0); }
  25%,43%   { transform:translateY(-20%); }
  50%,68%   { transform:translateY(-40%); }
  75%,93%   { transform:translateY(-60%); }
  100%      { transform:translateY(-80%); }
}

/* ---------- 07. FAIXA DE INFORMAÇÕES (carrossel contínuo) ---------- */
.strip{
  --marquee-gap: clamp(2.25rem, 1.25rem + 3vw, 4.5rem);
  padding-block:clamp(2.25rem,1.4rem + 2.6vw,3.5rem);
  border-block:1px solid var(--linha);
  background:rgba(233,227,216,.34);
  overflow:hidden;
}
.marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track{
  display:flex; gap:var(--marquee-gap); width:max-content;
  animation:marquee 58s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); }
}
.marquee__set{ display:flex; gap:var(--marquee-gap); }

.strip__item{
  flex:none; width:clamp(262px, 22vw, 320px);
  display:flex; gap:.85rem; align-items:flex-start;
  padding-left:var(--marquee-gap);
  border-left:1px solid var(--linha);
}
.strip__icon{
  width:26px; height:26px; flex:none; margin-top:.15rem;
  fill:none; stroke:var(--verde-texto); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.strip__title{
  font-family:var(--font-ui); font-size:.95rem; font-weight:700;
  color:var(--verde-escuro); margin:0 0 .25rem; letter-spacing:.005em;
}
.strip__text{ font-size:.83rem; line-height:1.6; color:var(--grafite-suave); margin:0; }

/* ---------- 08. TRATAMENTOS ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,.8rem + 2.4vw,2.5rem); }

.card{
  display:flex; flex-direction:column;
  background:var(--branco);
  border:1px solid rgba(46,55,52,.08);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:.85rem .85rem clamp(2rem,1.4rem + 1.8vw,2.9rem);
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(19,169,127,.3); }

/* Painel de imagem com o título por cima — véu claro garante a leitura */
.card__media{
  position:relative; overflow:hidden;
  border-radius:var(--r-md);
  aspect-ratio:5/4;
  display:grid; align-content:end;
  background:var(--bege);
}
.card__media > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.card:hover .card__media > img{ transform:scale(1.05); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(245,243,236,0) 0%,
    rgba(245,243,236,.08) 26%,
    rgba(245,243,236,.72) 54%,
    rgba(246,244,238,.97) 82%,
    rgba(246,244,238,.99) 100%);
}
.card__head{
  position:relative; z-index:1;
  padding:1.5rem 1.35rem 1.6rem; text-align:center;
}
.card__title{
  font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600;
  line-height:1.22; letter-spacing:.002em;
  color:var(--verde-escuro); margin:0; text-wrap:balance;
}
.card__rule{
  display:block; width:40px; height:2px; margin:.95rem auto 0;
  background:var(--verde-marca); border-radius:2px;
}
.card__body{
  padding:clamp(1.75rem,1.3rem + 1.4vw,2.5rem) clamp(1.1rem,.6rem + 1.6vw,2rem) 0;
  text-align:center;
}
.card__text{ font-size:.92rem; line-height:1.8; color:var(--grafite-suave); margin:0; }

/* Card largo — mesmo tratamento, ritmo diferente */
.card--wide{
  grid-column:1 / -1;
  display:grid; grid-template-columns:.78fr 1fr; align-items:center;
  gap:clamp(1.5rem,1rem + 2.4vw,3.25rem);
  padding:.85rem;
}
.card--wide .card__media{ aspect-ratio:5/4; }
.card--wide .card__body{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.3rem;
  text-align:left;
  padding:clamp(1rem,.4rem + 2.2vw,2.5rem) clamp(1.25rem,.6rem + 2.2vw,2.75rem) clamp(1rem,.4rem + 2.2vw,2.5rem) .25rem;
}
.card--wide .card__title{ font-size:clamp(1.7rem,1.3rem + 1.3vw,2.4rem); font-weight:500; }
.card--wide .card__text{ font-size:1rem; max-width:52ch; text-align:left; margin-bottom:.9rem; }

/* Fecho da seção — banner de CTA, não só um texto solto */
.services__foot{
  display:flex; align-items:center; gap:1.5rem;
  margin-top:clamp(2.75rem,1.75rem + 2.8vw,4.5rem);
  padding:clamp(1.5rem,1rem + 2vw,2.25rem) clamp(1.5rem,1rem + 2.4vw,2.5rem);
  background:var(--menta-fundo);
  border:1px solid rgba(19,169,127,.18);
  border-radius:var(--r-lg);
}
.services__foot-icon{
  flex:none; width:52px; height:52px; display:grid; place-items:center;
  background:var(--branco); color:var(--verde-texto); border-radius:50%;
  box-shadow:var(--sh-sm);
}
.services__foot-copy{ flex:1 1 320px; min-width:0; }
.services__foot-title{
  margin:0 0 .25rem; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); color:var(--verde-escuro);
}
.services__foot-text{ margin:0; font-size:.9rem; line-height:1.55; color:var(--grafite-suave); max-width:52ch; }
.services__foot-btn{ flex:none; margin-left:auto; }

/* ---------- 09. ATENDIMENTO DOMICILIAR ---------- */
.home-visit{ background:var(--verde-profundo); color:var(--off-white); position:relative; overflow:hidden; }
.home-visit::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%, rgba(19,169,127,.22) 0%, rgba(19,169,127,0) 60%);
}
.home-visit__grid{ position:relative; display:grid; }
.home-visit__grid--sem-imagem{ justify-items:center; text-align:center; }
.dots{
  position:absolute; left:-20px; bottom:-20px; width:150px; height:150px; z-index:0;
  background-image:radial-gradient(var(--menta) 1.7px, transparent 1.8px);
  background-size:15px 15px; opacity:.42; border-radius:8px;
}
/* Largura do bloco central: além do texto respirar em menos linhas, é ela que
   afasta um marcador do outro no protocolo abaixo — as três etapas são um
   grid de 1fr cada, então a distância entre os pontos cresce junto com esta
   medida. Em telas menores o max-width só deixa de agir e o bloco preenche a
   largura disponível, como antes. */
.home-visit__copy--central{ width:100%; max-width:min(64rem, 100%); }
.home-visit__title{
  font-family:var(--font-display); font-size:var(--fs-h2); font-weight:300;
  line-height:1.16; letter-spacing:-.012em; color:var(--off-white); margin-bottom:.35em;
}
.home-visit__title em{ font-style:italic; color:var(--menta); }
.home-visit__text{
  color:rgba(245,243,236,.82); max-width:74ch; margin-inline:auto;
  font-size:var(--fs-lead); text-wrap:balance;
}

/* Protocolo animado — desenha a linha e acende cada etapa em sequência
   quando a seção entra na tela (ver [data-protocol] em main.js). */
.protocol{
  --marcador:3rem;
  position:relative; margin:var(--sp-8) 0 var(--sp-7);
}
.protocol__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 1.5rem;
}
.protocol__line{
  position:absolute; z-index:0;
  top:calc(var(--marcador) / 2); left:16.6667%; right:16.6667%; height:2px;
  background:rgba(245,243,236,.16); border-radius:2px; overflow:hidden;
  transform:translateY(-50%);
}
.protocol__line-fill{
  display:block; width:100%; height:100%; background:var(--menta);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.9s var(--ease) .15s;
}
.protocol.is-active .protocol__line-fill{ transform:scaleX(1); }
.protocol__step{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center;
}
.protocol__marker{
  width:var(--marcador); height:var(--marcador); flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(245,243,236,.07); border:1.5px solid rgba(245,243,236,.28);
  transition:background .6s var(--ease), border-color .6s var(--ease);
}
.protocol__num{
  font-family:var(--font-display); font-size:1.1rem; color:rgba(245,243,236,.6);
  transition:color .6s var(--ease);
}
.protocol__label{ font-size:.97rem; font-weight:700; color:var(--off-white); }
.protocol__desc{
  font-size:.85rem; line-height:1.6; color:rgba(245,243,236,.68);
  max-width:38ch; text-wrap:balance;
}

.protocol.is-active .protocol__step:nth-child(1) .protocol__marker{ background:var(--verde-marca); border-color:var(--verde-marca); transition-delay:.1s; }
.protocol.is-active .protocol__step:nth-child(1) .protocol__num{ color:var(--verde-escuro); transition-delay:.1s; }
.protocol.is-active .protocol__step:nth-child(2) .protocol__marker{ background:var(--verde-marca); border-color:var(--verde-marca); transition-delay:.9s; }
.protocol.is-active .protocol__step:nth-child(2) .protocol__num{ color:var(--verde-escuro); transition-delay:.9s; }
.protocol.is-active .protocol__step:nth-child(3) .protocol__marker{ background:var(--verde-marca); border-color:var(--verde-marca); transition-delay:1.7s; }
.protocol.is-active .protocol__step:nth-child(3) .protocol__num{ color:var(--verde-escuro); transition-delay:1.7s; }

/* ---------- 10. SOBRE A PROFISSIONAL ---------- */
/* O respiro de baixo é menor que o padrão --section-y porque o FAQ vem logo
   abaixo com o fundo emendando no mesmo tom: sem mudança de cor no meio, os
   dois espaços viram um vão só e a soma fica exagerada. */
.about{
  background:linear-gradient(180deg, var(--off-white) 0%, rgba(233,227,216,.55) 100%);
  padding-bottom:clamp(3rem, 2rem + 3.5vw, 5.5rem);
}
.about__grid{
  display:grid; grid-template-columns:1.45fr 1fr;
  column-gap:clamp(3rem, 1.5rem + 6.5vw, 7rem);
  row-gap:clamp(3rem, 2rem + 3vw, 4.5rem);
  align-items:center;
}

.about__media{ position:relative; padding-bottom:clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.about__figure{ margin:0; position:relative; z-index:1; }
.about__figure--main{
  border-radius:190px 190px var(--r-xl) var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-lg);
}
.about__figure--main img{ position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.about__figure--sec{
  position:absolute; right:-1.75rem; bottom:.5rem; z-index:4;
  width:clamp(120px, 15vw, 172px);
  border-radius:var(--r-lg); overflow:hidden;
  border:6px solid var(--off-white);
  box-shadow:var(--sh-md);
}
.about__figure--sec img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 15%; display:block; }
.dots--about{ left:auto; right:-26px; top:-24px; bottom:auto; width:150px; height:150px;
  background-image:radial-gradient(var(--sage) 1.8px, transparent 1.9px); opacity:.6; }

.about__title{
  font-family:var(--font-display); font-size:var(--fs-h2); font-weight:300;
  line-height:1.16; letter-spacing:-.012em; color:var(--verde-escuro); margin-bottom:.4em;
}
.about__title em{ font-style:italic; color:var(--verde-texto); }
.about__lead{
  font-size:clamp(1.05rem, .98rem + .35vw, 1.22rem); line-height:1.7;
  color:var(--verde-escuro); max-width:46ch;
  padding-left:1.1rem; border-left:2px solid var(--verde-marca);
}
.about__text{ font-size:.97rem; line-height:1.82; color:var(--grafite-suave); max-width:56ch; }

.about__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- 11. PERGUNTAS FREQUENTES ---------- */
/* Sanfona nativa com <details>/<summary>: sem JS, já acessível por teclado.
   O degradê continua de onde a seção "Sobre" termina (bege) e volta para o
   off-white, para a emenda entre as duas não aparecer. */
.faq{
  background:linear-gradient(180deg, rgba(233,227,216,.55) 0%, var(--off-white) 55%);
  padding-top:clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}
.faq__list{ max-width:52rem; margin-inline:auto; border-top:1px solid var(--linha); }
.faq__item{ border-bottom:1px solid var(--linha); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:500; line-height:1.3;
  font-size:clamp(1.25rem, 1.05rem + .7vw, 1.6rem); color:var(--verde-escuro);
  transition:color var(--t-fast);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--verde-texto); }

/* Sinal de "+" que vira "−" quando o item abre: são dois traços cruzados e
   o de cima gira para se alinhar ao de baixo. */
.faq__icon{
  position:relative; flex:none; width:26px; height:26px; border-radius:50%;
  border:1.5px solid rgba(31,92,79,.28);
  transition:background var(--t-fast), border-color var(--t-fast);
}
.faq__icon::before,
.faq__icon::after{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px;
  background:var(--verde-texto); border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform var(--t-med), background var(--t-fast);
}
.faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__icon{ background:var(--verde-profundo); border-color:var(--verde-profundo); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after{ background:var(--off-white); }
.faq__item[open] .faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg); }

.faq__a{ padding:0 0 1.5rem; max-width:64ch; }
.faq__a p{ margin:0; font-size:.97rem; line-height:1.8; color:var(--grafite-suave); }
.faq__item[open] .faq__a{ animation:faqAbre .35s var(--ease); }
@keyframes faqAbre{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

.faq__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.5rem; margin-top:clamp(2.5rem,1.5rem + 2vw,3.5rem);
}
.faq__foot-text{ margin:0; color:var(--grafite-suave); font-size:var(--fs-lead); }

/* ---------- 12. RODAPÉ ---------- */
.footer{ background:var(--verde-escuro); color:var(--off-white); padding-top:clamp(3rem,2rem + 3vw,5rem); }
.footer__grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(2rem,1rem + 3vw,4rem); padding-bottom:clamp(2.5rem,1.5rem + 2.5vw,4rem);
  text-align:center; justify-items:center;
}
.footer__brand img{ width:140px; height:auto; margin-bottom:1.1rem; margin-inline:auto; }
.footer__note{ font-size:.83rem; line-height:1.7; color:rgba(245,243,236,.66); margin:0; }
.footer__hours{ font-size:.8rem; color:rgba(245,243,236,.6); margin:.55rem 0 0; }
.footer__bar{
  display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center; align-items:center;
  text-align:center; gap:.5rem 1.5rem;
  padding-block:1.4rem; border-top:1px solid var(--linha-clara);
}
.footer__bar p{ margin:0; font-size:.78rem; color:rgba(245,243,236,.55); }
.footer__bar a{ color:inherit; }
.footer__bar a:hover{ color:var(--menta); }
.footer__bar-legal{ display:flex; flex-direction:column; flex-wrap:wrap; align-items:center; gap:.35rem; }
/* Crédito do desenvolvedor — usa o verde-menta da própria marca, não o
   cinza apagado do copyright/política ao lado. */
.footer__credit{ font-size:.78rem; color:rgba(245,243,236,.55); }
.footer__credit a{
  color:var(--menta); font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(166,221,209,.45);
  transition:border-color var(--t-fast), color var(--t-fast);
}
.footer__credit a:hover{ color:var(--off-white); border-color:var(--off-white); }

/* ---------- 13. WHATSAPP FLUTUANTE ---------- */
.whatsapp-fab{
  position:fixed; right:clamp(1rem,.5rem + 1.5vw,1.75rem); bottom:clamp(1rem,.5rem + 1.5vw,1.75rem);
  z-index:90; width:56px; height:56px; display:grid; place-items:center;
  background:var(--verde-profundo); color:var(--off-white); border-radius:50%;
  box-shadow:var(--sh-md); transition:transform var(--t-fast), background var(--t-fast);
}
.whatsapp-fab:hover{ transform:translateY(-3px) scale(1.04); background:var(--verde-marca); }

/* ---------- 14. ANIMAÇÕES DE ENTRADA ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal--delay{ transition-delay:.12s; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 15. RESPONSIVO ---------- */
@media (min-width:1100px){ .br-desktop{ display:inline; } }

@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:980px){
  :root{ --header-h:72px; }
  .nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .hero__copy{ max-width:none; }
  .hero__wash{ inset:calc(var(--header-h) * -1) 0 20% 0; }
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:560px; }
  .about__figure--main{ border-radius:130px 130px var(--r-xl) var(--r-xl); }
  .card--wide{ grid-template-columns:1fr; }
  .card--wide .card__media{ aspect-ratio:16/9; min-height:0; }
  .card--wide .card__body{ text-align:center; align-items:center; padding:clamp(1.75rem,1.3rem + 1.4vw,2.5rem) clamp(1.1rem,.6rem + 1.6vw,2rem) .5rem; }
  .card--wide .card__text{ text-align:center; }
}

@media (max-width:720px){
  /* Grade de 2 colunas (3 fileiras) — mantém o grid-template-columns:repeat(2,1fr)
     herdado de @media (max-width:1080px), só encolhe o espaçamento e a
     tipografia dos cards para caber melhor em telas estreitas. */
  .cards{ gap:.85rem 1rem; }
  .card:not(.card--wide){ padding:.6rem .6rem 1.4rem; }
  .card__head{ padding:1.05rem .85rem 1.15rem; }
  .card:not(.card--wide) .card__title{ font-size:1.02rem; }
  .card__rule{ margin-top:.7rem; }
  .card__body{ padding:1.15rem .85rem 0; }
  .card__text{ font-size:.82rem; line-height:1.6; }
  .link-more{ font-size:.8rem; }

  /* No mobile o card de CTA empilha (ícone, texto, botão). O bug que já
     apareceu aqui: ".services__foot-copy" tem "flex:1 1 320px" pensado pro
     layout em linha do desktop — nele, 320px é uma largura mínima razoável.
     Ao empilhar em coluna, esse mesmo "320px" vira altura mínima, e o texto
     (bem mais baixo que isso) deixa um vão vazio enorme antes do botão.
     Por isso o flex-basis é zerado aqui, junto com um padding mais enxuto
     para a caixa ficar do tamanho do conteúdo, não maior. */
  .services__foot{
    flex-direction:column; align-items:flex-start; text-align:left; gap:.85rem;
    padding:1.35rem 1.25rem;
  }
  .services__foot-icon{ width:44px; height:44px; }
  .services__foot-copy{ flex:0 1 auto; }
  .services__foot-btn{ margin-left:0; width:100%; }

  /* Atendimento domiciliar: título numa linha só, e o texto/protocolo
     "esticados" — a seção ganha uma margem lateral menor que o --gutter
     padrão só aqui, pra caber mais por linha e quebrar menos (o parágrafo
     é longo e as 3 colunas do protocolo são estreitas). */
  .home-visit .container{ padding-inline:14px; }
  .home-visit__title-br{ display:none; }
  .home-visit__title{ font-size:clamp(1.6rem, 1.1rem + 3vw, 2.1rem); }
  .home-visit__text{ font-size:.95rem; }

  /* Protocolo: mantém o mesmo formato horizontal do desktop no mobile
     (linha + 3 colunas lado a lado) — só encolhe marcador, espaçamento
     e textos para caber nas colunas mais estreitas. */
  .protocol{ --marcador:2.3rem; margin:var(--sp-7) 0 var(--sp-6); }
  .protocol__list{ gap:0 .45rem; }
  .protocol__step{ gap:.4rem; }
  .protocol__num{ font-size:.8rem; }
  .protocol__label{ font-size:.72rem; line-height:1.25; }
  .protocol__desc{ font-size:.64rem; line-height:1.42; max-width:none; }

  /* Botões do hero lado a lado no mobile também (mesmo formato do desktop),
     em vez de empilhados — cada um ocupa metade da largura disponível. */
  .hero__actions{ flex-wrap:nowrap; gap:.5rem; }
  .hero__actions .btn{
    flex:1 1 0; min-width:0;
    padding:.75rem .9rem; font-size:.8rem; white-space:normal; line-height:1.25;
  }

  /* Sobre: no mobile a foto fica empilhada acima do texto. Sem max-width nem
     margem negativa, ela estica pra preencher a coluna do grid — a mesma
     largura do texto abaixo (mesmo respiro do --gutter dos dois lados),
     maior que o tamanho antigo mas sem colar nas bordas da tela. */
  .about__grid{ grid-template-columns:1fr; row-gap:1.75rem; }
  .about__media{ padding-bottom:2.75rem; }
  .about__figure--main{ border-radius:110px 110px var(--r-xl) var(--r-xl); }
  .about__figure--sec{
    width:92px; right:-.75rem; bottom:.25rem; border-width:5px;
  }
  .dots--about{ display:block; width:84px; height:84px; right:-14px; top:-14px; }
  .about__title-br{ display:none; }
  .about__title{ font-size:clamp(1.6rem, 1.1rem + 3vw, 2.1rem); }
  .about__lead{ font-size:1rem; line-height:1.6; margin-bottom:.9rem; }
  .about__text{ font-size:.92rem; line-height:1.75; max-width:none; margin-bottom:.85rem; }
  .about__actions{ margin-top:.15rem; }
  .about__actions .btn{ width:100%; }

  /* FAQ: pergunta e resposta mais compactas, e o botão do fim ocupa a
     largura toda, como os outros CTAs do mobile. */
  .faq__q{ padding:1.25rem 0; gap:1rem; font-size:1.18rem; }
  .faq__icon{ width:23px; height:23px; }
  .faq__a{ padding-bottom:1.25rem; }
  .faq__a p{ font-size:.92rem; line-height:1.75; }
  .faq__foot{ gap:.85rem; }
  .faq__foot-text{ font-size:1rem; }
  .faq__foot .btn{ width:100%; }

  .ticker{ gap:.6rem; }
  .ticker__item{ font-size:.82rem; }
  .whatsapp-fab{ width:52px; height:52px; }
  .card__media{ aspect-ratio:3/4; }
  .card:not(.card--wide) .card__title{ font-size:.92rem; }
  .card__head{ padding:.85rem .7rem .95rem; }
}

@media (max-width:420px){
  .brand__name{ font-size:1.08rem; }
  .brand__mark-wrap{ width:36px; }
  .brand__mark{ width:36px; }
}


/* ---------- 16. MOVIMENTO REDUZIDO: carrossel vira lista rolável ---------- */
@media (prefers-reduced-motion: reduce){
  .marquee{
    overflow-x:auto; scrollbar-width:none;
    -webkit-mask-image:none; mask-image:none;
  }
  .marquee::-webkit-scrollbar{ display:none; }
  .marquee__track{ animation:none !important; transform:none !important; }
  .marquee__set + .marquee__set{ display:none; }
  .strip__item:first-child{ padding-left:0; border-left:0; }
  .ticker__list{ animation:none !important; }
  .ticker__dot{ animation:none !important; }
  .ticker__window{ height:auto; }
  .ticker__item + .ticker__item{ display:none; }
}