/* ==========================================================================
   Joyce Oliveira · Fisioterapia domiciliar para pessoas idosas
   Pensado para quem lê com mais calma: letra grande, alto contraste,
   botões largos e nada que dependa de passar o mouse.
   No computador, cada tópico do menu ocupa uma tela inteira (ver "um tópico por tela").
   ========================================================================== */

:root{
  /* marca */
  --tinta:#0f3a40;         /* títulos, botões, fundo escuro */
  --tinta-fundo:#0a2a2f;   /* rodapé */
  --mar:#1e5f60;           /* links e detalhes */
  --latao:#a07a34;         /* o ponto do símbolo: só em detalhes */
  --latao-texto:#76571c;   /* latão legível em texto pequeno */
  --latao-claro:#e0c080;   /* latão sobre fundo escuro */
  /* superfícies */
  --creme:#fbf8f2;
  --areia:#f3ede2;
  --salvia:#e4ede8;
  --papel:#fff;
  /* texto */
  --texto:#1d3034;
  --suave:#43565a;
  --linha:#ddd8cc;
  --borda-campo:#a3b5b0;
  /* ação */
  --whats:#0c7038;
  --whats-h:#095a2d;
  --alerta:#9a3b22;

  --serif:'Lora', Georgia, 'Times New Roman', serif;
  /* Atkinson Hyperlegible foi desenhada para quem tem baixa visão; a Public Sans entra só nos algarismos */
  --sans:'Public Sans', 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --topo:3rem;             /* altura da faixa de conforto de leitura */
  --cab:4.4rem;            /* altura do cabeçalho fixo */
  --respiro:clamp(3.5rem, 8vw, 6.5rem);   /* espaço acima e abaixo de cada seção */
  --raio:20px;
  --sombra:0 24px 50px -28px rgba(15,58,64,.45);
}

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ font-size:112.5%; scroll-behavior:smooth; scroll-padding-top:var(--cab); -webkit-text-size-adjust:100%; }
html.js{ scroll-behavior:auto; }   /* com o script, a passagem entre os tópicos é conduzida por ele, mais devagar */
html[data-letra="1"]{ font-size:125%; }
html[data-letra="2"]{ font-size:140%; }
body{ margin:0; font-family:var(--sans); line-height:1.65; color:var(--texto); background:var(--creme); overflow-wrap:break-word; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote{ margin:0; }
h1, h2, h3{ font-family:var(--serif); font-weight:500; line-height:1.14; letter-spacing:-.012em; color:var(--tinta); text-wrap:balance; }
h2{ font-size:clamp(1.8rem, 3.3vw, 2.55rem); }
h3{ font-size:1.3rem; font-weight:600; }
h4{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); }
a{ color:var(--mar); text-underline-offset:.18em; }
:focus-visible{ outline:3px solid var(--latao); outline-offset:3px; border-radius:6px; }
/* ao chegar por um link, o foco vai para a seção (para o teclado seguir dali), sem contorno em volta dela */
main:focus, section:focus, #topo:focus{ outline:none; }

/* a margem lateral não cresce além de 9% da tela, para a letra ampliada não roubar espaço no celular */
.container{ width:min(1180px, 100% - min(2.5rem, 9vw)); margin-inline:auto; }
/* textos dentro de linhas flexíveis podem encolher e quebrar, em vez de alargar a página */
.selos li > div, .info > li > div, .porque-lista li > div{ min-width:0; }
/* no celular, ao chegar por um link do menu, o título da seção para logo abaixo do cabeçalho */
.secao{ padding:var(--respiro) 0; scroll-margin-top:calc(2.6rem - var(--respiro)); }
.cabeca{ max-width:44rem; }
.intro{ margin-top:1rem; font-size:1.1rem; color:var(--suave); max-width:58ch; }
.nota{ font-size:.86rem; line-height:1.5; color:var(--suave); }

.ic{ width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ic-cheio{ fill:currentColor; stroke:none; }

/* rótulo de seção: o ponto vem do símbolo da marca */
.rotulo{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--latao-texto); }
.rotulo::before{ content:''; width:.6rem; height:.6rem; border-radius:50%; background:var(--latao); flex:none; }
.etiqueta{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--latao-texto); }

.pular{ position:absolute; left:1rem; top:-5rem; z-index:100; padding:.8rem 1.2rem; border-radius:10px; background:var(--tinta); color:#fff; font-weight:700; }
.pular:focus{ top:1rem; }
.so-estreito{ display:none; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- botões ---------- */
/* verde = abre o WhatsApp · azul-petróleo = leva a outro ponto da página */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:3.1rem; padding:.8rem 1.4rem; border-radius:14px; border:2px solid transparent; font:inherit; font-weight:700; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.btn-grande{ min-height:3.5rem; padding:.95rem 1.6rem; font-size:1.05rem; }
.btn-whats{ background:var(--whats); color:#fff; }
.btn-whats:hover{ background:var(--whats-h); }
.btn-tinta{ background:var(--tinta); color:#fff; }
.btn-tinta:hover{ background:var(--mar); }
.btn-linha{ border-color:var(--tinta); color:var(--tinta); background:transparent; }
.btn-linha:hover{ background:var(--tinta); color:#fff; }

/* ---------- faixa de conforto de leitura ---------- */
.topo{ background:var(--tinta); color:#d5e3df; font-size:.84rem; }
.topo .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--topo); }
.topo-local{ display:flex; align-items:center; gap:.5rem; min-width:0; line-height:1.35; }
.topo-local .ic{ color:var(--latao-claro); }
.conforto{ display:none; flex:none; align-items:center; gap:.4rem; margin-left:auto; white-space:nowrap; }
.js .conforto{ display:flex; }
.conforto-rot{ margin-right:.3rem; }
.conforto button{ display:inline-flex; align-items:center; gap:.4rem; min-height:2.3rem; min-width:2.6rem; justify-content:center; padding:.2rem .7rem; border-radius:9px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.conforto button:hover{ background:rgba(255,255,255,.14); }
.conforto button[aria-pressed="true"]{ background:#fff; color:var(--tinta); }
.conforto button[aria-disabled="true"]{ opacity:.4; cursor:default; }
#letraMais{ font-size:1.1em; }

/* ---------- cabeçalho ---------- */
/* a altura total (com a linha de baixo) é exatamente --cab: as seções contam com isso para preencher a tela */
.cab{ position:sticky; top:0; z-index:50; background:var(--creme); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; container:cab / inline-size; }
.cab.rolou{ border-color:var(--linha); box-shadow:0 12px 30px -26px rgba(15,58,64,.6); }
.cab .container{ display:flex; align-items:center; gap:1.2rem; min-height:calc(var(--cab) - 1px); }
.marca{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--tinta); }
.marca-simbolo{ width:2rem; height:2.55rem; flex:none; --ponto:var(--latao); }
.marca-nome{ display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem; line-height:1.1; white-space:nowrap; }
.marca-sub{ display:block; margin-top:.25rem; font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--mar); white-space:nowrap; }

/* o padrão é o menu recolhido atrás do botão "Menu" */
.nav, .menu-btn, .cab-cta{ display:none; }
.js .menu-btn{ display:inline-flex; align-items:center; gap:.5rem; margin-left:auto; min-height:2.9rem; padding:.4rem .9rem; border-radius:12px; border:1.5px solid var(--tinta); background:transparent; font:inherit; font-weight:700; color:var(--tinta); cursor:pointer; }
.js .nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; padding:.4rem 1.25rem 1rem; background:var(--creme); border-bottom:1px solid var(--linha); box-shadow:var(--sombra); }
.js .cab.menu-aberto .nav{ display:flex; }
.nav a{ padding:1rem .3rem; border-bottom:1px solid var(--linha); font-size:1.1rem; font-weight:700; color:var(--texto); text-decoration:none; }
.nav a:last-child{ border-bottom:0; }
.nav a.ativo{ color:var(--mar); }

/* o menu completo entra quando há largura para ele. A medida é em rem, então acompanha
   o tamanho da letra: com a letra ampliada, o menu se recolhe sozinho em vez de vazar */
@container cab (min-width:61rem){
  .js .menu-btn{ display:none; }
  .nav, .js .nav, .js .cab.menu-aberto .nav{ position:static; display:flex; flex-direction:row; align-items:center; gap:.15rem; margin-left:auto; padding:0; background:none; border:0; box-shadow:none; }
  .nav a{ padding:.6rem .8rem; border:0; border-radius:10px; font-size:.92rem; white-space:nowrap; }
  .nav a:hover{ background:var(--salvia); }
  .nav a.ativo{ color:var(--tinta); border-radius:0; box-shadow:inset 0 -3px 0 var(--latao); }
  .cab-cta{ display:inline-flex; min-height:2.7rem; padding:.55rem 1.1rem; font-size:.92rem; }
  /* o botão do cabeçalho só aparece quando o do topo já saiu da tela */
  .js .cab-cta{ opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
  .js.cta-on .cab-cta{ opacity:1; visibility:visible; transition-delay:0s; }
}

/* ---------- topo ---------- */
.hero{ padding:clamp(2.2rem, 5vw, 4.2rem) 0 clamp(2.5rem, 5vw, 4rem); overflow-x:clip; }
.hero-grade{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:clamp(1.6rem, 3vw, 2.2rem) clamp(2rem, 5vw, 4.5rem); align-items:center; }
.hero h1{ font-size:clamp(2.2rem, 4.4vw, 3.4rem); line-height:1.08; letter-spacing:-.02em; max-width:18ch; }
.hero h1 em{ font-style:italic; color:var(--mar); white-space:nowrap; }
.lead{ margin-top:1.4rem; font-size:1.2rem; color:var(--suave); max-width:50ch; }
/* "Atendimento humanizado.": assinatura discreta entre a apresentação e os botões */
.lema{ margin-top:1.1rem; font-family:var(--serif); font-style:italic; font-size:1.15rem; line-height:1.35; color:var(--mar); }
.acoes{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.micro{ margin-top:.75rem; font-size:.9rem; color:var(--suave); }

.hero-foto{ position:relative; justify-self:center; width:min(100%, 430px); }
.hero-foto::before{ content:''; position:absolute; inset:-14px -14px 14px 14px; border:1.5px solid var(--latao); border-radius:999px 999px 24px 24px; opacity:.65; pointer-events:none; }
.hero-foto::after{ content:''; position:absolute; z-index:0; left:-14%; bottom:-4%; width:50%; aspect-ratio:1; border-radius:50%; background:var(--salvia); }
.arco{ position:relative; z-index:1; aspect-ratio:4 / 5; border-radius:999px 999px 20px 20px; overflow:hidden; background:var(--salvia); }
.arco img{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; }   /* alinhada pelo alto, para o arco não cortar o cabelo */
/* sem a foto na pasta, o símbolo da marca ocupa o lugar (nada de imagem quebrada) */
.foto-vazia{ display:none; }
.sem-foto img{ display:none; }
.sem-foto .foto-vazia{ display:block; position:absolute; inset:0; margin:auto; width:32%; height:auto; aspect-ratio:116 / 148; color:var(--tinta); --ponto:var(--latao); opacity:.45; }
.hero-foto figcaption{ position:absolute; z-index:2; left:-1.4rem; bottom:1.8rem; padding:.75rem 1.1rem; border-radius:14px; background:var(--papel); box-shadow:var(--sombra); line-height:1.3; }
.hero-foto figcaption strong{ display:block; font-family:var(--serif); font-weight:600; font-size:1.08rem; color:var(--tinta); }
.hero-foto figcaption span{ font-size:.84rem; color:var(--suave); }

/* credenciais: fecham a primeira tela, com folga até a borda */
.selos{ grid-column:1 / -1; list-style:none; padding:1.4rem 0 0; border-top:1px solid var(--linha); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.2rem 2rem; }
.selos li{ display:flex; align-items:flex-start; gap:.8rem; }
.selos .ic{ width:1.7rem; height:1.7rem; margin-top:.1rem; color:var(--latao); }
.selos strong{ display:block; font-family:var(--serif); font-weight:600; font-size:1.12rem; line-height:1.25; color:var(--tinta); }
.selos span{ display:block; font-size:.86rem; line-height:1.4; color:var(--suave); text-wrap:balance; }

/* entrada suave só no topo */
.js .entra{ opacity:0; transform:translateY(14px); animation:entra .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d, 0s); }
@keyframes entra{ to{ opacity:1; transform:none; } }

/* ---------- sobre ---------- */
.sobre{ background:var(--papel); }
.sobre-grade{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(2.2rem, 6vw, 5rem); align-items:center; }
.sobre-foto{ position:relative; justify-self:center; width:min(100%, 410px); }
.sobre-foto::before{ content:''; position:absolute; inset:16px -16px -16px 16px; border-radius:24px; background:var(--salvia); }
.moldura{ position:relative; aspect-ratio:4 / 5; border-radius:20px; overflow:hidden; background:var(--areia); }
.moldura img{ width:100%; height:100%; object-fit:cover; object-position:60% 30%; }
.sobre-texto > p:not(.rotulo){ margin-top:1.1rem; font-size:1.05rem; color:var(--suave); max-width:60ch; }
.citacao{ margin-top:1.6rem; padding-left:1.2rem; border-left:3px solid var(--latao); font-family:var(--serif); font-style:italic; font-size:1.45rem; line-height:1.4; color:var(--tinta); max-width:34ch; }
/* "Cuidar é devolver ___ / nas pequenas coisas do dia a dia.": o script troca a palavra do fim da primeira linha
   e a caixa acompanha a largura dela; a segunda linha não se mexe.
   Sem script, ou com "reduzir movimento" ligado no aparelho, fica a frase completa, parada. */
.cit-linha{ display:block; }
.citacao .gira{ color:var(--mar); }
.citacao.viva .gira{ white-space:nowrap; }
.citacao.quebra .gira{ display:block; }   /* palavra na linha de baixo quando não cabe ao lado (celular) */
.gira-palavra{ display:inline-block; vertical-align:bottom; overflow:hidden; white-space:nowrap; box-shadow:inset 0 -1px 0 rgba(160,122,52,.6); transition:width .45s cubic-bezier(.2,.7,.2,1); }
.gira-palavra > span{ display:inline-block; padding-right:.08em; transition:transform .3s ease, opacity .3s ease; }
.gira-palavra.sai > span{ transform:translateY(-45%); opacity:0; }
.gira-palavra.vem > span{ transform:translateY(45%); opacity:0; transition:none; }
.gira-medidor{ position:absolute; left:-999rem; visibility:hidden; white-space:nowrap; padding-right:.08em; }
.formacao{ list-style:none; margin-top:1.6rem; padding:0; display:grid; gap:.55rem; }
.formacao li{ display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:.96rem; }
.formacao .ic{ width:1.35em; height:1.35em; color:var(--mar); }
/* só aparece quando data-instagram está preenchido no <body> */
.insta{ display:flex; align-items:center; gap:.7rem; }
.sobre-texto > p.insta{ margin-top:.6rem; }
.insta .ic{ width:1.35em; height:1.35em; color:var(--mar); }
.insta a{ display:inline-block; padding:.45rem 0; font-weight:700; }

/* ---------- atendimentos ---------- */
.atendimentos{ background:var(--areia); }
.atendimentos .cabeca{ max-width:none; }
.atendimentos .intro{ margin-top:.6rem; max-width:none; }
.casos{ display:grid; grid-template-columns:minmax(0, 1fr); gap:.4rem; margin-top:1.5rem; }
.caso-t{ font:inherit; letter-spacing:0; }
.caso-b{ width:100%; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:.9rem; padding:.3rem .9rem; border-radius:16px; border:1.5px solid transparent; background:rgba(255,255,255,.6); font:inherit; font-weight:700; font-size:1rem; line-height:1.3; text-align:left; color:var(--tinta); cursor:pointer; scroll-margin-top:.8rem; transition:background-color .2s, border-color .2s, box-shadow .2s; }
.caso-b:hover{ background:var(--papel); }
.caso-b[aria-expanded="true"]{ background:var(--papel); border-color:var(--tinta); box-shadow:var(--sombra); }
/* o arco do símbolo vira moldura dos ícones e dos números */
.caso-ic{ width:2.3rem; height:2.6rem; display:grid; place-items:center; border-radius:999px 999px 9px 9px; background:var(--salvia); color:var(--tinta); transition:background-color .2s, color .2s; }
.caso-ic .ic{ width:1.3rem; height:1.3rem; margin-top:.2rem; }
.caso-b[aria-expanded="true"] .caso-ic{ background:var(--tinta); color:#fff; }
.caso-seta{ color:var(--mar); transform:rotate(90deg); transition:transform .25s; }
.caso-b[aria-expanded="true"] .caso-seta{ transform:rotate(-90deg); }
/* a sétima opção é uma porta lateral ("também atendo adultos"): fica um pouco afastada das demais,
   com contorno dourado e uma linha de apoio, sem competir com as seis situações principais */
.caso-t-extra{ margin-top:.45rem; }
.caso-extra{ padding-block:.5rem; border-color:rgba(160,122,52,.7); background:transparent; }
.caso-extra:hover{ background:rgba(255,255,255,.6); }
.caso-extra .caso-ic{ background:rgba(160,122,52,.16); color:var(--latao-texto); }
.caso-tit, .caso-sub{ display:block; }
.caso-sub{ margin-top:.15rem; font-weight:400; font-size:.86rem; line-height:1.4; color:var(--suave); }
.caso-p{ padding:clamp(1.1rem, 2vw, 1.4rem) clamp(1.3rem, 3vw, 2.4rem); border-radius:var(--raio); background:var(--papel); }
.caso-nome{ margin-top:.3rem; font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem, 2.4vw, 1.9rem); line-height:1.15; color:var(--tinta); }
.caso-desc{ margin-top:.5rem; font-size:1.05rem; color:var(--suave); max-width:52ch; }
.caso-cols{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.2rem 2.4rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--linha); }
.lista-check, .lista-ponto{ list-style:none; margin-top:.7rem; padding:0; display:grid; gap:.35rem; }
.lista-check li, .lista-ponto li{ display:flex; gap:.65rem; align-items:flex-start; line-height:1.45; }
.lista-check li::before{ content:''; width:1.1em; height:1.1em; flex:none; margin-top:.18em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07a34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lista-ponto li::before{ content:''; width:.45em; height:.45em; flex:none; margin:.55em .3em 0; border-radius:50%; background:var(--mar); }

@media (min-width:900px){
  /* lista à esquerda, detalhe à direita; a 7ª linha absorve a sobra de altura */
  .js .casos{ grid-template-columns:minmax(0, 24rem) minmax(0, 1fr); grid-template-rows:repeat(7, auto) 1fr; column-gap:1.6rem; }
  .js .caso-t{ grid-column:1; grid-row:var(--i); }
  .js .caso-p{ grid-column:2; grid-row:1 / -1; }
  .js .caso-seta, .js .caso-b[aria-expanded="true"] .caso-seta{ transform:none; }
}

/* ---------- como funciona ---------- */
/* o quadro "Por que em casa" fica centralizado na altura de toda a coluna da esquerda */
.como-grade{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:center; }
.passos{ list-style:none; margin-top:1.6rem; padding:0; counter-reset:passo; }
.passo{ position:relative; padding:0 0 1.2rem 4.2rem; counter-increment:passo; }
.passo:last-child{ padding-bottom:0; }
.passo::before{ content:counter(passo); position:absolute; left:0; top:0; width:2.7rem; height:3.1rem; padding-top:.3rem; display:grid; place-items:center; border-radius:999px 999px 9px 9px; background:var(--tinta); color:#fff; font-family:var(--serif); font-weight:600; font-size:1.2rem; }
.passo::after{ content:''; position:absolute; left:1.35rem; top:3.4rem; bottom:.3rem; width:1.5px; background:var(--linha); }
.passo:last-child::after{ display:none; }
.passo h3{ padding-top:.15rem; font-size:1.25rem; }
.passo p{ margin-top:.3rem; line-height:1.55; color:var(--suave); max-width:46ch; }
.porque{ padding:clamp(1.4rem, 2.6vw, 2.1rem); border-radius:24px; background:var(--salvia); }
.porque > p:not(.rotulo){ margin-top:.7rem; color:var(--suave); }
.porque-lista{ list-style:none; margin-top:1.3rem; padding:1.3rem 0 0; border-top:1px solid rgba(15,58,64,.18); display:grid; gap:1rem; }
.porque-lista li{ display:flex; gap:.9rem; align-items:flex-start; }
.porque-lista .ic{ width:1.7rem; height:1.7rem; margin-top:.15rem; color:var(--tinta); }
.porque-lista strong{ display:block; color:var(--tinta); }
.porque-lista span{ display:block; font-size:.94rem; line-height:1.45; color:var(--suave); }

/* ---------- avaliações ---------- */
/* fora do menu. Três avaliações curtas em cima; embaixo, a mais longa ao lado do link de conferência */
.avaliacoes{ background:var(--salvia); }
.avals{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:1.6rem; }
.aval{ display:flex; flex-direction:column; padding:1.15rem 1.4rem; border-radius:var(--raio); background:var(--papel); }
.aval-larga{ grid-column:span 2; }
.estrelas{ font-size:1.05rem; line-height:1; letter-spacing:.12em; color:var(--latao); }
.aval blockquote{ margin-top:.6rem; font-size:.95rem; line-height:1.55; }
.aval figcaption{ margin-top:auto; padding-top:.7rem; font-size:.8rem; font-weight:700; color:var(--suave); }
.aval-google{ display:flex; flex-direction:column; justify-content:center; gap:.5rem; padding:1.15rem 1.4rem; border-radius:var(--raio); border:1.5px solid rgba(15,58,64,.25); font-size:.92rem; line-height:1.5; }
.aval-google a{ align-self:flex-start; padding:.45rem 0; font-weight:700; color:var(--tinta); }

/* ---------- dúvidas ---------- */
.duvidas{ background:var(--papel); }
.duvidas-grade{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:2rem clamp(2rem, 5vw, 4rem); align-items:start; }
.faq{ border-top:1px solid var(--linha); }
.pergunta{ border-bottom:1px solid var(--linha); }
.pergunta summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; font-weight:700; font-size:1.08rem; line-height:1.35; color:var(--tinta); cursor:pointer; }
.pergunta summary::-webkit-details-marker{ display:none; }
.abre{ flex:none; width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--borda-campo); color:var(--mar); transition:transform .3s, background-color .2s; }
.abre .ic{ width:1rem; height:1rem; stroke-width:2.4; }
.pergunta summary:hover .abre{ background:var(--salvia); }
.pergunta[open] .abre{ transform:rotate(45deg); background:var(--salvia); }
.pergunta p{ padding:0 3rem 1.3rem 0; color:var(--suave); max-width:65ch; }
.pergunta p:not(:last-child){ padding-bottom:.7rem; }   /* respostas com mais de um parágrafo */

/* ---------- agendar ---------- */
.agendar{ background:var(--tinta); color:#cfe0db; }
.agendar h2{ color:#fff; }
.agendar .rotulo{ color:var(--latao-claro); }
.agendar .rotulo::before{ background:var(--latao-claro); }
.agendar .intro{ color:#c3d6d1; }
/* no computador o formulário ocupa a coluna da direita; no celular ele vem logo depois do convite.
   A coluna da esquerda segue em sequência, com espaços regulares, e começa na mesma linha do formulário. */
.agendar-grade{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows:auto 1fr; gap:1.8rem clamp(2rem, 4vw, 3.5rem); align-items:start; }
.agendar-topo, .agendar-info{ grid-column:1; }
.agendar-info{ padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.18); }
.agendar-grade .form{ grid-column:2; grid-row:1 / span 2; }
.info{ list-style:none; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:1.05rem; }
.info > li{ display:flex; gap:.9rem; align-items:center; }
.bola{ flex:none; width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.1); color:#fff; }
.info small{ display:block; font-size:.8rem; line-height:1.3; color:#a9c3bd; }
.info strong, .info a{ font-weight:700; line-height:1.35; color:#fff; }
.info a{ display:inline-block; padding:.45rem 0; }
/* bairros em texto corrido, alinhados com o texto de "Onde atendo" (largura do ícone + espaço) */
.bairros{ list-style:none; margin-top:.65rem; padding:0 0 0 3.5rem; line-height:1.8; color:#dbe8e4; }
.bairros li{ display:inline-block; white-space:nowrap; transition:color .2s; }
.bairros li:not(:last-child)::after{ content:'\00b7'; display:inline-block; margin:0 .45em; font-weight:700; color:var(--latao-claro); }
.bairros li.achou{ color:var(--latao-claro); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.28em; }
.fora{ margin-top:.7rem; padding-left:3.5rem; font-size:.9rem; line-height:1.5; color:#c3d6d1; }

/* formulário em coluna única, sem título próprio: o convite ao lado já apresenta a seção.
   Só as perguntas ficam em negrito; os campos são brancos, de contorno fino, e três deles abrem para escolher. */
.form{ --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3a40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --seta-sobe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3a40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E"); display:grid; grid-template-columns:minmax(0, 1fr); gap:1.7rem; padding:clamp(1.4rem, 3.5vw, 2.4rem); border-radius:24px; background:var(--papel); color:var(--texto); }
html:not(.js) #form{ display:none; }
.form h3{ font-size:1.6rem; font-weight:500; }   /* só no aviso exibido sem JavaScript */
.form fieldset{ min-width:0; margin:0; padding:0; border:0; }
.form legend, .campo > label, .mais summary{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.75rem; padding:0; font-weight:700; font-size:1.06rem; line-height:1.35; color:var(--tinta); }
.mais summary small{ font-weight:400; font-size:.88rem; color:var(--suave); }
/* número da pergunta: um algarismo em latão, sem moldura */
.n{ flex:none; width:1.1rem; font-family:var(--serif); font-size:1.15rem; font-weight:600; line-height:1; color:var(--latao-texto); }
.campo input, .campo select, .campo textarea, .multi-b{ display:block; width:100%; min-height:3rem; padding:.7rem 1rem; border-radius:12px; border:1.5px solid var(--borda-campo); background-color:var(--papel); font:inherit; line-height:1.5; color:var(--texto); }
/* a seta dos campos que abrem é desenhada aqui, para não ficar colada na borda */
.campo select, .multi-b{ -webkit-appearance:none; appearance:none; padding-right:2.9rem; background-image:var(--seta); background-repeat:no-repeat; background-position:right 1rem center; background-size:1.1rem; cursor:pointer; }
.campo textarea{ resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .multi-b:focus{ outline:none; border-color:var(--tinta); box-shadow:0 0 0 3px rgba(160,122,52,.4); }
/* pergunta 2: o botão tem a cara do campo de bairro; a lista abre por cima do formulário e fica aberta enquanto a pessoa marca */
.multi{ position:relative; }
.multi-b{ text-align:left; }
.multi-b[aria-expanded="true"]{ border-color:var(--tinta); background-image:var(--seta-sobe); }
.multi-p{ position:absolute; z-index:5; top:calc(100% + .35rem); left:0; right:0; padding:.4rem; border-radius:14px; border:1.5px solid var(--borda-campo); background:var(--papel); box-shadow:0 22px 44px -20px rgba(15,58,64,.55), 0 2px 10px rgba(15,58,64,.12); scroll-margin:1rem; }
.multi-o{ display:flex; align-items:center; gap:.75rem; min-height:2.75rem; padding:.3rem .65rem; border-radius:9px; line-height:1.3; cursor:pointer; }
.multi-o:hover{ background:var(--creme); }
.multi-o input{ flex:none; width:1.25rem; height:1.25rem; margin:0; accent-color:var(--tinta); cursor:pointer; }
.multi-ok{ display:block; width:100%; min-height:2.75rem; margin-top:.35rem; padding:.4rem; border:0; border-top:1px solid var(--linha); border-radius:0 0 9px 9px; background:none; font:inherit; font-weight:700; color:var(--tinta); cursor:pointer; }
.multi-ok:hover{ background:var(--creme); }
/* com a lista aberta, os números das perguntas de baixo não ficam soltos ao lado dela */
.lista-aberta fieldset ~ * .n{ visibility:hidden; }
.campo input[aria-invalid="true"]{ border-color:var(--alerta); }
.dica{ margin-top:.5rem; font-size:.92rem; font-weight:700; color:var(--mar); }
.dica:empty{ display:none; }
.erro{ margin-top:.5rem; font-size:.92rem; font-weight:700; color:var(--alerta); }
/* campo opcional: fica recolhido até a pessoa querer escrever */
.mais{ margin-block:-.55rem; }
.mais summary{ list-style:none; align-items:center; min-height:2.75rem; margin-bottom:0; cursor:pointer; }
.mais summary::-webkit-details-marker{ display:none; }
.mais summary:hover > span:last-child{ text-decoration:underline; text-decoration-thickness:1.5px; }
.mais .n{ display:grid; place-items:center; }
.mais .ic{ width:1.05rem; height:1.05rem; stroke-width:2.4; transition:transform .3s; }
.mais[open] .ic{ transform:rotate(45deg); }
.mais[open] summary{ margin-bottom:.35rem; }
.form .btn{ width:100%; }
.form .nota{ margin-top:-.8rem; text-align:center; }
@media (min-width:900px){
  /* no computador os números ficam na margem: perguntas, respostas e botão seguem uma só linha vertical */
  .form{ padding:2.5rem 3rem 2.2rem; }
  .n{ margin-left:-1.7rem; }
}

/* ---------- rodapé ---------- */
/* baixo, em uma linha: marca à esquerda, navegação no meio, contato à direita; créditos embaixo */
.rodape{ padding:1.4rem 0 1.1rem; background:var(--tinta-fundo); color:#a9c0bb; font-size:.9rem; }
.rodape-linha{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; }
.rodape .marca{ color:#fff; }
.rodape .marca-simbolo{ --ponto:var(--latao-claro); }
.rodape .marca-sub{ color:#9fb9b3; }
.rodape ul{ list-style:none; padding:0; }
.rodape-nav{ display:flex; flex-wrap:wrap; gap:.2rem 1.3rem; }
/* WhatsApp e Instagram dividem a primeira linha; o horário vai na de baixo */
.rodape-contato{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 1.3rem; max-width:27rem; line-height:1.5; text-align:right; }
.rodape-insta{ display:flex; align-items:center; gap:.4rem; }
.rodape-insta .ic{ width:1.1em; height:1.1em; color:#fff; }
.rodape a{ color:inherit; text-decoration:none; }
.rodape li a{ display:inline-block; padding:.2rem 0; }
.rodape-contato a{ font-weight:700; color:#fff; }
.rodape-contato li:not(:has(a)){ padding:.2rem 0; }
.rodape a:hover{ color:#fff; text-decoration:underline; }
.rodape-base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 2rem; margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; color:#8fa9a4; }

/* ---------- WhatsApp no canto ---------- */
/* discreto: só o ícone; o nome aparece ao apontar ou ao chegar com o teclado.
   Entra depois que o botão do topo sai da tela e sai de cena no agendamento, onde o contato já está à vista */
.zap{ position:fixed; right:max(1rem, env(safe-area-inset-right, 0px)); bottom:calc(1rem + env(safe-area-inset-bottom, 0px)); z-index:60; display:inline-flex; align-items:center; height:3.3rem; min-width:3.3rem; padding:0 .9rem; border-radius:999px; background:var(--whats); color:#fff; font-weight:700; font-size:.92rem; text-decoration:none; box-shadow:0 10px 24px -10px rgba(0,0,0,.55); }
.zap:hover{ background:var(--whats-h); }
.zap .ic{ width:1.5rem; height:1.5rem; }
.zap-rot{ max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .25s, margin-left .25s; }
.zap:hover .zap-rot, .zap:focus-visible .zap-rot{ max-width:9rem; margin-left:.55rem; }
.js .zap{ opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s, transform .25s, background-color .2s, visibility 0s .25s; }
.js.cta-on .zap{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }

/* ---------- um tópico por tela (computador) ---------- */
/* Cada seção ocupa exatamente a altura da janela abaixo do cabeçalho, com o conteúdo centralizado:
   ao escolher um item do menu, aparece só aquele tópico, sem pedaço do vizinho e sem conteúdo cortado.
   Em janelas muito altas (monitor em pé) a regra não vale, para não sobrar um vazio enorme. */
@media (min-width:900px) and (max-height:1250px){
  :root{ --respiro:clamp(1.6rem, 4.5vh, 3.5rem); }
  .secao{ display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - var(--cab)); min-height:calc(100svh - var(--cab)); scroll-margin-top:0; }
  /* a primeira tela soma faixa de conforto + cabeçalho + topo, com as credenciais fechando embaixo */
  .hero{ display:flex; flex-direction:column; min-height:calc(100vh - var(--cab) - var(--topo)); min-height:calc(100svh - var(--cab) - var(--topo)); padding:clamp(1rem, 2.8vh, 2.6rem) 0 clamp(1.3rem, 3.2vh, 2.2rem); }
  .hero-grade{ flex:1; grid-template-rows:1fr auto; row-gap:clamp(1.3rem, 3vh, 2.2rem); }
  .hero .rotulo{ margin-bottom:.8rem; }
  .selos{ padding-top:clamp(.9rem, 2.2vh, 1.4rem); }
  /* em janelas mais baixas, título, texto e foto encolhem um pouco para tudo caber */
  .hero h1{ font-size:clamp(2.2rem, min(4.4vw, 9vh - 1.4rem), 3.4rem); }
  .lead{ margin-top:clamp(.8rem, 2vh, 1.3rem); font-size:clamp(1.05rem, 2.2vh, 1.2rem); }
  .lema{ margin-top:clamp(.7rem, 1.8vh, 1.1rem); font-size:clamp(1.02rem, 2.1vh, 1.15rem); }
  .acoes{ margin-top:clamp(1.4rem, 3.6vh, 2.2rem); }
  .hero-foto{ width:min(100%, 430px, max(15rem, (100vh - 21rem) * .8)); }
}

/* ---------- telas menores ---------- */
@media (max-width:899px){
  .hero-grade, .sobre-grade, .como-grade, .duvidas-grade, .agendar-grade, .avals{ grid-template-columns:minmax(0, 1fr); }
  .aval-larga{ grid-column:auto; }
  .agendar-grade{ grid-template-rows:none; }
  .agendar-topo, .agendar-info, .agendar-grade .form{ grid-column:auto; grid-row:auto; }
  .agendar-info{ align-self:auto; padding-top:0; border-top:0; }
  .hero-foto{ width:min(82%, 350px); margin-top:.5rem; }
  .hero-foto figcaption{ left:-1rem; bottom:1.2rem; }
  .selos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sobre-foto{ width:min(82%, 360px); }
  .rodape-linha{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .rodape-contato{ justify-content:flex-start; max-width:none; text-align:left; }
  .topo-local{ display:none; }
  .conforto{ flex:auto; margin-left:0; }
  .conforto-rot{ margin-right:auto; }
}
@media (min-width:620px){
  /* texto justificado só onde a coluna é larga o bastante para não abrir buracos entre as palavras */
  .sobre-texto > p:not(.rotulo):not(.insta){ text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
}
@media (max-width:620px){
  .so-largo{ display:none; }
  .so-estreito{ display:inline; }
  /* o cabeçalho é limitado pela largura da tela, para caber mesmo com a letra ampliada */
  .cab .container{ gap:min(.6rem, 2.5vw); }
  .marca{ gap:min(.75rem, 2.8vw); }
  .marca-simbolo{ width:min(2rem, 8.6vw); height:min(2.55rem, 11vw); }
  .marca-nome{ font-size:min(1.2rem, 5.2vw); }
  .marca-sub{ display:none; }
  .js .menu-btn{ gap:min(.5rem, 2vw); padding:.4rem min(.9rem, 3.4vw); font-size:min(1rem, 4.4vw); }
  .topo .container{ padding-block:.35rem; }
  .conforto{ flex-wrap:wrap; }
  /* topo mais enxuto, para o botão de agendar aparecer já na primeira tela do celular */
  .hero{ padding-top:.9rem; }
  .hero h1{ font-size:clamp(1.8rem, 8.3vw, 2.2rem); }
  .hero h1 em{ white-space:normal; }
  .lead{ margin-top:1rem; font-size:1.05rem; line-height:1.5; }
  .lema{ margin-top:.7rem; font-size:1.05rem; }
  .acoes{ margin-top:1.5rem; }
  .acoes .btn{ width:100%; }
  .caso-cols{ grid-template-columns:minmax(0, 1fr); }
  .selos{ gap:1.1rem 1rem; }
  .selos li{ flex-direction:column; gap:.4rem; }
  .pergunta p{ padding-right:0; }
}

/* ---------- alto contraste ---------- */
html[data-contraste="alto"]{
  --creme:#fff; --areia:#fff; --salvia:#fff; --papel:#fff;
  --texto:#000; --suave:#111; --linha:#000; --borda-campo:#000;
  --tinta:#00262b; --tinta-fundo:#000; --mar:#00474a;
  --latao:#6b4e00; --latao-texto:#3d2c00;
  --whats:#00572a; --whats-h:#003f1e;
}
html[data-contraste="alto"] main > section + section{ border-top:2px solid #000; }
html[data-contraste="alto"] :is(.caso-b, .caso-p, .caso-ic, .porque, .hero-foto figcaption, .aval, .aval-google){ border:2px solid #000; }
html[data-contraste="alto"] .cab{ border-bottom-color:#000; }
html[data-contraste="alto"] .zap{ border:2px solid #fff; }
html[data-contraste="alto"] :is(.agendar, .rodape){ color:#fff; }
html[data-contraste="alto"] :is(.agendar .intro, .info small, .fora, .rodape-base, .rodape .marca-sub){ color:#fff; }
html[data-contraste="alto"] .nav a, html[data-contraste="alto"] .rodape a{ text-decoration:underline; }
html[data-contraste="alto"] .hero-foto::after, html[data-contraste="alto"] .sobre-foto::before{ display:none; }

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .entra{ opacity:1; transform:none; }
}

/* ---------- impressão ---------- */
@media print{
  html{ font-size:100% !important; }
  body{ background:#fff; }
  .topo, .cab, .zap, .pular{ display:none !important; }
  .secao, .hero{ min-height:0 !important; }
  .js .entra{ opacity:1; transform:none; animation:none; }
}