/* =========================================================
   SPECIALITTÁ — tipografia self-hosted (fontes variáveis)
   Playfair Display + Montserrat servidas do próprio domínio.
   Nenhuma requisicao a fonts.googleapis.com / fonts.gstatic.com.
   Os subsets latin-ext so baixam se a pagina usar caractere
   fora do latin basico (unicode-range faz o carregamento sob
   demanda). Para atualizar: rebaixar do Google Fonts com a
   sintaxe de faixa (wght@100..900) para manter o arquivo variavel.
   As faixas abaixo declaram tudo que o arquivo suporta, entao qualquer
   font-weight novo no site renderiza no peso certo, sem falso negrito.
   ========================================================= */
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Playfair Display";
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/playfair-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Playfair Display";
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/playfair-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/playfair-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/playfair-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   SPECIALITTÁ — Consultórios de Alto Padrão
   Identidade: marca/identidade-visual.md
   Direção: editorial de luxo institucional (sóbrio, premium)
   ========================================================= */

/* ===== TOKENS ===== */
:root{
  --bordo:#4A0F17; --bordo-suave:#661A24; --bordo-hover:#82262E; --bordo-2:#3A0B12; --bronze:#9C6A45; --bronze-sombra:#7C5234;
  --bronze-luz:#C8916E; --cobre:#AD6B45; --creme:#FBF6F0; --creme-2:#F3ECE2;
  --preto-quente:#2A1F1C; --cinza-claro:#EDE6DE; --cinza-medio:#C9BBAE; --cinza-escuro:#5E5249;
  --whatsapp:#25D366;
  /* tons de TEXTO, um passo mais fechados que os decorativos: o bronze e o
     cobre originais dao 4,28 e 3,94 sobre o creme, abaixo do minimo 4,5 do
     WCAG AA. Mesma familia, so escurecidos o suficiente para passar. */
  --bronze-txt:#7C5234; --cobre-txt:#8F5436; --cinza-nota:#5E5249;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1280px; --pad-x:clamp(1.5rem,5vw,5.5rem); --sec-y:clamp(4.5rem,8vw,6.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ===== RESET / BASE ===== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
body{ font-family:var(--sans); background:var(--creme); color:var(--preto-quente); line-height:1.7; font-weight:400; overflow-x:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
/* height:auto neutraliza os atributos width/height do HTML (que existem só para
   reservar a proporção e evitar CLS); regras específicas abaixo seguem mandando */
img{ max-width:100%; height:auto; display:block; }
/* o <picture> é só um envelope para o WebP: display:contents o remove da
   árvore de layout, mantendo a <img> como filho direto do container
   (senão flex/grid passariam a mirar o <picture> e o layout mudaria) */
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--bordo); color:var(--creme); }
body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }

/* ===== TIPOGRAFIA ===== */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.01em; }
/* bronze-sombra, nao bronze: sobre o creme o bronze da 4,28:1 e o minimo
   para texto pequeno e 4,5:1. O mesmo tom, um passo mais fechado, da 6,28:1.
   O .cta-band tem override proprio (bronze-luz sobre fundo escuro). */
.eyebrow{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--bronze-sombra); }
.sec-label{ display:flex; align-items:baseline; gap:1.15rem; margin-bottom:2.6rem; }
.sec-label .num{ font-family:var(--serif); font-size:1.05rem; font-style:italic; color:var(--bronze-txt); }
.sec-label .txt{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cinza-escuro); white-space:nowrap; }
.sec-label .rule{ flex:1; height:1px; background:var(--cinza-medio); }

/* ===== BOTÕES ===== */
.btn{ display:inline-flex; align-items:center; gap:.65rem; font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; padding:1.1rem 2.2rem; border:1px solid transparent; cursor:pointer; transition:all .4s var(--ease); border-radius:2px; }
.btn svg{ width:16px; height:16px; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
/* glifo do WhatsApp nos CTAs: sólido (fill), não de traço como os demais ícones */
.btn .ico-wa{ width:19px; height:19px; fill:currentColor; stroke:none; flex:none; }
.btn:hover .ico-wa{ transform:scale(1.1); }
/* seta para baixo do botão de rolagem (hero secundário) */
.btn:hover .ico-down{ transform:translateY(3px); }
.btn-primary{ background:var(--bordo-suave); color:var(--creme); }
.btn-primary:hover{ background:var(--bordo-hover); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(74,15,23,.35); }
.btn-ghost{ background:transparent; color:currentColor; border-color:currentColor; }

/* ===== NAV ===== */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1rem calc(var(--pad-x) + env(safe-area-inset-right,0px)) 1rem calc(var(--pad-x) + env(safe-area-inset-left,0px)); transition:all .5s var(--ease); }
.nav.scrolled{ background:rgba(251,246,240,.92); backdrop-filter:blur(14px); padding-top:.7rem; padding-bottom:.7rem; box-shadow:0 1px 0 var(--cinza-medio); }
.brand{ display:flex; align-items:center; line-height:1; z-index:120; }
/* Header usa logo-header.png (sem a linha de assinatura, que era ilegível neste
   tamanho). Logo a 56px + padding da .nav em 1rem = barra de 88px, exatamente a
   altura de antes, então o scroll-padding-top:88px do html segue válido.
   O arquivo tem 168px de altura para exibir a 56px: 3x, nítido em retina. */
.brand-logo{ height:56px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a.link{ font-family:var(--sans); font-size:.77rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--preto-quente); position:relative; padding:.2rem 0; transition:color .4s var(--ease); }
.nav-links a.link::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--bronze); transition:width .35s var(--ease); }
.nav-links a.link:hover{ color:var(--bronze); }
.nav-links a.link:hover::after{ width:100%; }
.nav-cta{ font-family:var(--sans); font-weight:600; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; background:var(--bordo-suave); color:var(--creme); padding:.82rem 1.55rem; border-radius:2px; transition:all .4s var(--ease); }
.nav-cta:hover{ background:var(--bordo-hover); transform:translateY(-2px); }
.nav-toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:0; cursor:pointer; width:44px; height:44px; padding:0; margin-right:-.5rem; z-index:120; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.nav-toggle span{ width:26px; height:2px; background:var(--bordo); transition:all .4s var(--ease); }

/* ===== HERO (editorial claro + mosaico em movimento) ===== */
.hero{ position:relative; min-height:100svh; background:var(--creme); overflow:hidden; }
.hero-inner{ z-index:2; width:56%; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:10.75rem clamp(2rem,4vw,3.5rem) 4rem clamp(1.5rem,5vw,5.5rem); }
.hero .eyebrow{ color:var(--bronze-sombra); display:block; font-weight:700; margin-bottom:1.7rem; }
.hero h1{ font-size:clamp(2.05rem,3.4vw,3.4rem); font-weight:500; color:var(--bordo); max-width:21ch; margin-bottom:1.8rem; line-height:1.08; }
.hero h1 em{ font-style:italic; color:var(--bronze); }
.hero p.sub{ font-size:clamp(1rem,1.4vw,1.2rem); font-weight:400; max-width:48ch; color:var(--cinza-escuro); margin-bottom:2.6rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:2.8rem; padding-top:1.9rem; border-top:1px solid var(--cinza-medio); }
.hero .btn-ghost{ border-color:var(--bordo); color:var(--bordo); }
.hero .btn-ghost:hover{ background:var(--bordo-hover); color:var(--creme); }
/* nota de desatrito sob os CTAs principais (reduz hesitacao antes do clique no WhatsApp) */
.cta-note{ font-family:var(--sans); font-size:.82rem; font-weight:400; line-height:1.6; color:var(--cinza-escuro); margin-top:1.1rem; }
.hero-actions + .cta-note{ margin-top:1.2rem; }
/* fecho do bloco 01, acima do botao — mesma tipografia das heads que antecedem
   botao nas secoes 02 e 04. Precisa de .lead p.X: classe sozinha perde para
   .lead p, que e serifada, bordo e grande por padrao. */
.lead p.cta-title{ font-family:var(--serif); font-size:clamp(1.4rem,2.5vw,2rem); font-weight:400; line-height:1.32; color:var(--bordo); max-width:40ch; margin:0 auto 1.8rem; }
.lead p.cta-title em{ font-style:italic; color:var(--bronze-txt); }
.cta-band .cta-note{ color:rgba(251,246,240,.72); margin-top:1.6rem; }
.hero-badges{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.9rem; }
.hero-badge{ display:flex; align-items:center; gap:.55rem; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--preto-quente); }
.hero-badge svg{ width:16px; height:16px; stroke:var(--bronze); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* mosaico em movimento */
.hero-mosaic{ position:absolute; top:96px; right:0; bottom:0; width:44%; overflow:hidden; display:flex; gap:16px; padding:0 clamp(1rem,2vw,1.6rem);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.m-col{ flex:1; display:flex; flex-direction:column; gap:16px; will-change:transform; }
.m-col.up{ animation:mUp 34s linear infinite; }
.m-col.down{ animation:mDown 40s linear infinite; }
.hero-mosaic:hover .m-col{ animation-play-state:paused; }
@keyframes mUp{ from{ transform:translateY(0);} to{ transform:translateY(-50%);} }
@keyframes mDown{ from{ transform:translateY(-50%);} to{ transform:translateY(0);} }
@keyframes mLeft{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes mRight{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.m-photo{ overflow:hidden; border-radius:4px; box-shadow:0 22px 48px -26px rgba(74,15,23,.5); aspect-ratio:4/5; flex:none; }
.m-photo img{ width:100%; height:100%; object-fit:cover; }

/* entrada no load */
.reveal-load{ opacity:0; transform:translateY(26px); animation:rise 1s var(--ease) forwards; }
.d1{animation-delay:.15s}.d2{animation-delay:.32s}.d3{animation-delay:.49s}.d4{animation-delay:.66s}.d5{animation-delay:.85s}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ===== LEAD (copy à esquerda + barras à direita) ===== */
.lead{ padding:var(--sec-y) 0; }
.lead-grid{ display:grid; grid-template-columns:1fr .92fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.lead-copy{ text-align:left; }
/* headline e sub seguem o conceito do hero: serifada bordô (peso 500) + sub sans cinza-escuro */
.lead p{ font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2.05rem); font-weight:500; line-height:1.18; max-width:none; margin:0; color:var(--bordo); }
.lead p em{ font-style:italic; color:var(--bronze-txt); }
/* a virada do bloco: as duas negações acumulam, esta frase resolve.
   Vem separada por respiro e por um filete curto, para não ler como continuação. */
.lead p.lead-turn{ margin-top:clamp(1.5rem,2.6vw,2.1rem); padding-top:clamp(1.5rem,2.6vw,2.1rem); position:relative; }
.lead p.lead-turn::before{ content:""; position:absolute; top:0; left:0; width:48px; height:1px; background:var(--bronze); opacity:.55; }
.lead .lead-sub{ font-family:var(--sans); font-size:clamp(1rem,1.4vw,1.2rem); font-weight:400; line-height:1.6; max-width:46ch; margin-top:1.8rem; color:var(--cinza-escuro); }

/* faixa-título acima do bloco (mesmo desenho do .sec-label, fonte maior, sem número) */
.lead-label{ margin-bottom:clamp(2.6rem,5vw,3.8rem); }
.lead-label .num{ font-size:1.2rem; }
.lead-label .txt{ font-size:.86rem; letter-spacing:.26em; color:var(--bronze-sombra); }

/* Painel de barras — % do faturamento comprometido com a estrutura */
.ratio{ background:var(--creme-2); border-radius:18px; padding:clamp(1.8rem,3.2vw,2.6rem); box-shadow:0 30px 70px -38px rgba(42,31,28,.55); }
.ratio-title{ display:block; font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--bordo); line-height:1.7; text-align:center; margin-bottom:clamp(1.8rem,3.2vw,2.4rem); }
.ratio-row + .ratio-row{ margin-top:clamp(1.7rem,3vw,2.3rem); }
.ratio-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.ratio-label{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.ratio-label em{ font-style:normal; font-weight:500; letter-spacing:.06em; text-transform:none; }
.ratio-value{ font-family:var(--serif); line-height:1; white-space:nowrap; }
.ratio-track{ height:15px; border-radius:99px; background:rgba(42,31,28,.09); overflow:hidden; }
.ratio-fill{ display:block; height:100%; width:0; border-radius:99px; transition:width 1.5s var(--ease) .25s; }
.ratio.in .ratio-fill{ width:var(--pct); }
.ratio .ratio-note{ font-family:var(--sans); font-size:.9rem; line-height:1.55; max-width:none; margin:.8rem 0 0; }

/* peso: comissão em vinho, número maior */
.ratio-row.is-sub .ratio-label{ color:var(--bordo); }
.ratio-row.is-sub .ratio-value{ color:var(--bordo); font-weight:600; font-size:clamp(2rem,3.6vw,3rem); }
.ratio-row.is-sub .ratio-note{ color:var(--preto-quente); }
.ratio-fill.sub{ background:linear-gradient(90deg,#1C1412,var(--preto-quente)); }

/* alívio: Specialittá clara, quente e luminosa — número menor, para pesar menos */
.ratio-row.is-spec .ratio-label{ color:var(--cobre-txt); }
.ratio-row.is-spec .ratio-value{ color:var(--cobre-txt); font-size:clamp(1.3rem,2.2vw,1.75rem); }
.ratio-row.is-spec .ratio-note{ color:var(--cinza-escuro); }
.ratio-fill.spec{ background:linear-gradient(90deg,var(--bronze-luz),#E8B98F); box-shadow:0 0 18px rgba(200,145,110,.55); }

/* fecho do bloco — economia em números, entre filetes */
.lead .lead-close{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:center;
  margin-top:clamp(3rem,6vw,4.5rem); padding:clamp(2.2rem,4vw,3.2rem) 0;
  border-top:1px solid rgba(156,106,69,.3); border-bottom:1px solid rgba(156,106,69,.3); }

/* número ancorado no canto, compacto */
.lead .lc-claim{ text-align:center; }
.lead .lc-kicker{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze-sombra); margin-bottom:.3rem; }
.lead .lc-big{ display:block; font-family:var(--serif); font-size:clamp(3.4rem,7vw,5.4rem); font-weight:500; line-height:.88; color:var(--cobre); }
.lead .lc-sub{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--cobre-txt); margin-top:.55rem; }

.lead .lc-line{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.85rem); font-weight:400; line-height:1.42; color:var(--bordo); max-width:none; margin:0;
  padding-left:clamp(1.8rem,4vw,3.5rem); border-left:1px solid rgba(156,106,69,.3); }
.lead .lc-line em{ font-style:normal; font-weight:600; color:var(--bordo); }

/* Locação inteligente na prática — mecanismo em 3 passos.
   Fica entre o quadro comparativo e o fecho de economia: o quadro levanta a
   promessa, estes passos explicam como ela funciona, o fecho quantifica.
   Reaproveita o componente .steps / .step (definido mais abaixo, na seção de
   COMO FUNCIONA): aqui só entram o título, o fecho e a linha da eventual.
   ATENÇÃO: .lead p é serifada, bordô e grande por padrão, então todo parágrafo
   deste bloco precisa de seletor mais específico para sair em Montserrat. */
.howto{ margin-top:clamp(3rem,6vw,4.5rem); }
.howto-title{ font-family:var(--serif); font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:500; line-height:1.2;
  color:var(--bordo); text-align:center; margin-bottom:1.25rem; }
.howto-title em{ font-style:italic; color:var(--bronze); }
.lead p.howto-sub{ font-family:var(--sans); font-size:clamp(.98rem,1.3vw,1.08rem); font-weight:400; line-height:1.75;
  color:var(--cinza-escuro); text-align:center; max-width:70ch; margin:0 auto clamp(2.6rem,5vw,3.6rem); }
.lead p.howto-sub em{ font-style:normal; font-weight:600; color:var(--bordo); }
.lead .step p{ font-family:var(--sans); font-weight:400; max-width:none; margin:0; }
/* passos centralizados: numero, titulo e descricao no mesmo eixo */
.howto .step{ text-align:center; }
/* CTA que fecha a secao 01, logo depois do bloco dos 70% */
.lead-cta{ text-align:center; margin-top:clamp(2.4rem,4.5vw,3.4rem); }
/* nota da locacao eventual. Sem filete: o .lead-close logo abaixo ja tem um,
   e os dois juntos criavam duas linhas horizontais quase coladas. O destaque
   vem do fundo e da pergunta em bordo, nao de borda. */

/* grifo do "Valor fixo por hora." */
.ratio-note .mk{ background:rgba(200,145,110,.3); color:var(--bordo); font-weight:600; padding:.12em .3em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

@media (max-width:980px){
  .lead-grid{ grid-template-columns:1fr; gap:clamp(2.2rem,6vw,3rem); }
  .lead p,.lead .lead-sub{ max-width:44ch; }
  .lead .lead-close{ grid-template-columns:1fr; gap:2rem; }
  .lead .lc-line{ padding-left:0; border-left:0; }
}
@media (max-width:680px){
  .brand-logo{ height:40px; }
  .section-head.is-center p.intro br,
  .section-head h2 br,
  .risco-title br,
  .impact-line p br,
  .cta-inline.is-lead p br{ display:none; }
  .car-nav{ width:44px; height:44px; }
  .lead-label .txt{ white-space:normal; font-size:.76rem; letter-spacing:.2em; }
  .lead-label .rule{ display:none; }
  .ratio-top{ flex-direction:column; align-items:flex-start; gap:.35rem; }
  .ratio-label{ white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  .ratio .ratio-fill{ width:var(--pct); }
}

/* ===== SEÇÕES BASE ===== */
section{ position:relative; z-index:2; }
.section{ padding:var(--sec-y) 0; }
.section.alt{ background:var(--creme-2); }
.section-head{ max-width:52ch; margin-bottom:clamp(2.4rem,4vw,3.4rem); }
.section-head.is-center{ max-width:none; text-align:center; }
.section-head.is-center h2{ max-width:none; margin-inline:auto; }
.section-head.is-center p.intro{ margin-inline:auto; max-width:90ch; }

/* ===== CARROSSEL DE FOTOS ===== */
.carousel{ position:relative; margin-top:clamp(.5rem,2vw,1.5rem); }
.car-track{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:0 8px .5rem; scrollbar-width:none; -ms-overflow-style:none; }
.car-track::-webkit-scrollbar{ display:none; }
.car-item{ position:relative; flex:0 0 calc((100% - 16px) / 3); scroll-snap-align:center; margin:0;
  border-radius:3px; overflow:hidden; }
.car-item img{ display:block; width:100%; height:clamp(320px,42vw,560px); object-fit:cover; transition:transform 1.1s var(--ease), filter .5s var(--ease); }
.car-item:hover img{ transform:scale(1.05); filter:brightness(1.04); }
.car-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:3.2rem 1.4rem 1.15rem; color:var(--creme);
  background:linear-gradient(to top, rgba(42,31,28,.88), rgba(42,31,28,.45) 45%, transparent);
  transition:background .5s var(--ease); }
.car-item .ci-name{ display:block; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.car-item .ci-desc{ display:block; font-family:var(--sans); font-size:.86rem; font-weight:400; line-height:1.5; color:rgba(251,246,240,.88);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease), opacity .45s var(--ease), margin-top .55s var(--ease); }
.car-item:hover figcaption{ background:linear-gradient(to top, rgba(42,31,28,.92), rgba(42,31,28,.6) 60%, rgba(42,31,28,.12)); }
.car-item:hover .ci-desc,
.car-item:focus-within .ci-desc{ max-height:6.5rem; opacity:1; margin-top:.55rem; }
.car-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; display:grid; place-items:center;
  background:var(--creme); color:var(--bordo); border:0; border-radius:50%; cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(42,31,28,.45); transition:all .35s var(--ease); }
.car-nav svg{ width:20px; height:20px; }
.car-nav:hover{ background:var(--bordo-suave); color:var(--creme); }
.car-nav.prev{ left:clamp(.5rem,2vw,1.6rem); }
.car-nav.next{ right:clamp(.5rem,2vw,1.6rem); }
.section-head h2{ font-size:clamp(2rem,4.6vw,3.5rem); color:var(--bordo); }
.section-head h2 em{ font-style:italic; color:var(--bronze); }
.section-head p.intro{ margin-top:1.3rem; color:var(--cinza-escuro); font-size:1.05rem; max-width:54ch; }
.section-head p.intro strong{ color:var(--bordo); font-weight:600; }

/* ===== PASSOS NUMERADOS =====
   Usado pelo bloco "Locação inteligente, na prática" (seção 01). O título, o
   fecho e a linha da eventual ficam em .howto*, junto do CSS da seção lead. */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3.2rem); }
.step{ padding-top:1.9rem; border-top:1px solid var(--cinza-medio); }
.step .n{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,3.6rem); font-weight:600; color:var(--bronze); line-height:1; display:block; margin-bottom:1.1rem; }
.step h3{ font-size:1.45rem; color:var(--bordo); margin-bottom:.6rem; }
.step p{ color:var(--cinza-escuro); font-size:.97rem; line-height:1.65; }

/* ===== CTA BAND ===== */
.cta-band{ background:var(--bordo); color:var(--creme); text-align:center; padding:clamp(3.9rem,8.7vw,7rem) var(--pad-x); position:relative; z-index:2; isolation:isolate; overflow:hidden; }
/* marca d'agua: simbolo "S" oficial da marca (marca/logo/...- S.png),
   nao a letra S da fonte. Silhueta em bronze-luz (#C8916E), alpha proprio, dimensionado pela ALTURA da faixa (height:132%), para acompanhar a secao
   como no conceito original. Exibido a 10%. */
.cta-band::before{ content:""; position:absolute; z-index:-1; height:132%; aspect-ratio:498/760; right:-3rem; top:50%; transform:translateY(-50%); background:url(../img/marca-s.png) center/contain no-repeat; opacity:.1; pointer-events:none; }
.cta-band .eyebrow{ color:var(--bronze-luz); display:block; font-size:clamp(.76rem,1vw,.84rem); font-weight:700; letter-spacing:.34em; margin-bottom:1.7rem; }
/* filete curto acima do eyebrow: dá hierarquia à assinatura da faixa sem
   competir com o H2 */
.cta-band .eyebrow::before{ content:""; display:block; width:52px; height:1px; background:rgba(200,145,110,.6); margin:0 auto 1.2rem; }
.cta-band h2{ font-size:clamp(2.2rem,5vw,4rem); color:var(--creme); max-width:18ch; margin:0 auto 1.5rem; }
.cta-band p{ max-width:58ch; margin:0 auto 2.8rem; color:rgba(251,246,240,.85); font-weight:300; font-size:1.08rem; }
.cta-band .btn-primary{ background:var(--creme); color:var(--bordo); }
.cta-band .btn-primary:hover{ background:var(--bronze-luz); color:var(--bordo); }

/* ===== LOCALIZAÇÃO + RODAPÉ =====
   A seção 06 (.loc-section) fica ENTRE o FAQ e a faixa bordô do CTA final:
   o mapa serve de prova antes do convite para a visita. O rodapé (.footer)
   ficou só com a barra final. As duas dividem o mesmo fundo. */
.loc-section,
.footer{ background:var(--preto-quente); color:var(--creme); position:relative; z-index:2; }
.loc{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(1.5rem,3.5vw,3rem); align-items:stretch; padding:clamp(2.4rem,4.6vw,3.6rem) var(--pad-x); }
.loc-info{ padding:0; display:flex; flex-direction:column; justify-content:center; }
.loc-info .sec-label .num,.loc-info .sec-label .txt{ color:var(--bronze-luz); }
.loc-info .sec-label .rule{ background:rgba(200,145,110,.3); }
.loc-info h2{ font-size:clamp(1.7rem,3vw,2.35rem); color:var(--creme); margin-bottom:1.3rem; max-width:20ch; }
.loc-block{ margin-bottom:1.15rem; }
.loc-block .lbl{ font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--bronze-luz); margin-bottom:.32rem; }
.loc-block .val{ font-size:1.02rem; color:rgba(251,246,240,.9); line-height:1.55; }
.loc-block a.val:hover{ color:var(--bronze-luz); }
/* align-self:center alinha o mapa pelo meio do bloco de texto, em vez de
   esticar junto com a coluna (o grid é stretch) */
.loc-map{ min-height:0; align-self:center; }
.loc-map iframe{ width:100%; height:clamp(390px,48vh,505px); border:0; border-radius:6px; filter:grayscale(.35) contrast(1.05); display:block; }
.foot-bottom{ border-top:1px solid rgba(200,145,110,.2); padding:2.5rem var(--pad-x); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.6rem; max-width:var(--maxw); margin-inline:auto; }
.foot-logo{ height:52px; width:auto; filter:brightness(0) invert(0.95); opacity:.9; }
.foot-meta{ font-size:.74rem; color:var(--cinza-medio); letter-spacing:.04em; line-height:1.8; }
.foot-meta a{ color:var(--bronze-luz); text-decoration:underline; text-underline-offset:3px; }
.foot-social{ display:flex; gap:1.2rem; align-items:center; }
.foot-social a{ color:var(--cinza-medio); transition:color .3s; }
.foot-social a:hover{ color:var(--bronze-luz); }
.foot-social svg{ width:21px; height:21px; }

/* ===== WHATSAPP FLUTUANTE ===== */
.fab{ position:fixed; right:calc(clamp(1.1rem,3vw,2rem) + env(safe-area-inset-right,0px)); bottom:calc(clamp(1.1rem,3vw,2rem) + env(safe-area-inset-bottom,0px)); z-index:200; width:60px; height:60px; border-radius:50%; background:var(--whatsapp); color:#fff; display:grid; place-items:center; box-shadow:0 12px 32px -8px rgba(37,211,102,.6); transition:transform .35s var(--ease); }
.fab:hover{ transform:scale(1.08) translateY(-2px); }
.fab svg{ width:32px; height:32px; fill:#fff; }
/* a onda animava box-shadow, que repinta a cada quadro e o Lighthouse
   marca como "animacao nao composta". Com a sombra FIXA e o movimento
   em transform+opacity, o efeito e o mesmo e roda na GPU. */
.fab::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 14px rgba(37,211,102,.4); animation:pulse 2.6s infinite; pointer-events:none; will-change:transform,opacity; }
@keyframes pulse{ 0%{ transform:scale(.82); opacity:.75; } 70%{ transform:scale(1.12); opacity:0; } 100%{ transform:scale(1.12); opacity:0; } } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ===== REVELAÇÃO NO SCROLL ===== */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===== MENU MOBILE ===== */
.mobile-menu{ position:fixed; inset:0; z-index:110; background:var(--creme); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.5rem; transform:translateY(-100%); transition:transform .6s var(--ease); visibility:hidden; }
.mobile-menu.open{ transform:none; visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:2rem; color:var(--bordo); }
.mobile-menu a.mm-cta{ font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:var(--bordo-suave); color:var(--creme); padding:1rem 2rem; border-radius:2px; margin-top:1rem; }
.mobile-menu .mm-note{ font-family:var(--sans); font-size:.78rem; line-height:1.5; color:var(--cinza-escuro); margin:-.7rem 0 0; text-align:center; }

/* ===== BLOCOS DE COPY (destaques, listas, impacto, FAQ) ===== */


/* ===== FICHA TÉCNICA DO ESPAÇO (dentro da seção 02) =====
   Vive na seção da estrutura, logo depois das fotos: as fotos mostram o espaço,
   estes cards especificam o que ele tem. Grade estática, não carrossel: o lead
   precisa ver tudo de uma vez, não descobrir um a um atrás de setas.
   Ordem dos cards é intencional, do que ele vê ao que nunca vai precisar
   pensar, terminando nos dois itens "por nossa conta". */
.amenities{ margin-top:clamp(2.8rem,5.5vw,4.2rem); }
.amenities-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.8vw,2.15rem); letter-spacing:0;
  text-transform:none; color:var(--bordo); line-height:1.3; margin-bottom:clamp(2rem,3.5vw,2.8rem); }
.amenities-title em{ font-style:italic; color:var(--bronze); }
.feats-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,1.8vw,1.4rem); }
/* o card precisa contrastar com o fundo da secao, senao ele desaparece:
   secao clara (creme) pede card creme-2, e secao .alt (creme-2) pede card creme. */
.feat{ padding:clamp(1.4rem,2.2vw,1.9rem); background:var(--creme-2); border-radius:6px; border-top:2px solid var(--bronze);
  opacity:0; transform:translateY(20px);
  transition:opacity .75s var(--ease), transform .75s var(--ease), background .4s var(--ease),
    border-top-color .4s var(--ease), box-shadow .45s var(--ease); }
.section.alt .feat{ background:var(--creme); }
.reveal.in .feat{ opacity:1; transform:none; }
/* entrada escalonada, linha a linha */
.reveal.in .feat:nth-child(1){ transition-delay:.04s }
.reveal.in .feat:nth-child(2){ transition-delay:.10s }
.reveal.in .feat:nth-child(3){ transition-delay:.16s }
.reveal.in .feat:nth-child(4){ transition-delay:.22s }
.reveal.in .feat:nth-child(5){ transition-delay:.28s }
.reveal.in .feat:nth-child(6){ transition-delay:.34s }
.reveal.in .feat:nth-child(7){ transition-delay:.40s }
.reveal.in .feat:nth-child(8){ transition-delay:.46s }
.reveal.in .feat:nth-child(9){ transition-delay:.52s }
.reveal.in .feat:nth-child(10){ transition-delay:.58s }
.feat:hover{ transform:translateY(-6px); background:var(--creme); border-top-color:var(--bordo-suave);
  box-shadow:0 24px 48px -26px rgba(74,15,23,.42); }
.section.alt .feat:hover{ background:var(--creme-2); }
.feat svg{ width:30px; height:30px; stroke:var(--bronze); fill:none; margin-bottom:1rem; transition:transform .55s var(--ease); }
.feat:hover svg{ transform:translateY(-3px) scale(1.06); }
.feat h4{ font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bordo); line-height:1.4; margin-bottom:.6rem; }
.feat p{ font-family:var(--sans); font-size:.9rem; line-height:1.6; color:var(--cinza-escuro); }

.impact-line{ margin-top:clamp(2.5rem,5vw,3.5rem); text-align:center; }
.impact-line p{ font-family:var(--serif); font-style:normal; font-weight:400; font-size:clamp(1.4rem,2.5vw,2rem); color:var(--bordo); line-height:1.32; max-width:34ch; margin:0 auto; }
.impact-line p em{ font-style:italic; color:var(--bronze-txt); }

.faq-list{ max-width:840px; margin:0 auto; border-top:1px solid var(--cinza-medio); }
.faq-list details{ border-bottom:1px solid var(--cinza-medio); }
.faq-list summary{ cursor:pointer; list-style:none; padding:1.6rem 0; font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.35rem); color:var(--bordo); display:flex; justify-content:space-between; align-items:center; gap:1.5rem; transition:color .3s; }
.faq-list summary:hover{ color:var(--bronze); }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; font-family:var(--sans); font-weight:400; font-size:1.6rem; color:var(--bronze); transition:transform .3s var(--ease); line-height:1; }
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{ padding:0 0 1.7rem; color:var(--cinza-escuro); font-size:1rem; line-height:1.7; max-width:72ch; }

.loc-lead{ color:rgba(251,246,240,.8); font-size:1rem; line-height:1.62; max-width:48ch; margin-bottom:1.6rem; font-weight:300; }

/* ===== TABELA DE CUSTOS ===== */
.costs-wrap{ max-width:940px; margin-inline:auto; }
.costs{ width:100%; border-collapse:collapse; background:var(--creme-2); border-radius:8px; overflow:hidden; }
.costs th,.costs td{ text-align:left; padding:.95rem clamp(.9rem,1.8vw,1.5rem); font-family:var(--sans); font-size:.95rem; font-weight:400; }
.costs thead th{ font-size:.86rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding-top:1.5rem; padding-bottom:1.2rem; vertical-align:bottom; }
.costs thead th:first-child{ color:var(--cinza-escuro); }
.costs thead th:nth-child(2){ color:var(--bordo); }
.costs thead th:nth-child(3){ color:var(--cobre-txt); }
.costs thead th span{ display:block; margin-top:.45rem; font-size:.72rem; font-weight:400; letter-spacing:.01em; text-transform:none; color:var(--cinza-escuro); line-height:1.4; }
.costs tbody tr{ border-top:1px solid rgba(42,31,28,.08); }
.costs tbody th{ font-weight:500; color:var(--preto-quente); }
.costs td{ white-space:nowrap; }
.costs .ic{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; margin-right:.65rem; vertical-align:-.3rem; }
.costs .ic svg{ width:11px; height:11px; }
.costs td.own{ color:var(--preto-quente); }
.costs td.own .ic{ background:rgba(74,15,23,.1); color:var(--bordo); }
.costs td.spec{ color:var(--cobre-txt); }
.costs td.spec .ic{ background:rgba(173,107,69,.16); color:var(--cobre); }
.costs tfoot tr{ border-top:2px solid var(--bronze); }
.costs tfoot th,.costs tfoot td{ padding-top:1.3rem; padding-bottom:1.4rem; }
.costs tfoot th{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bordo); }
.costs tfoot td.own{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; color:var(--bordo); line-height:1; }
.costs tfoot td.spec{ font-size:.92rem; font-weight:600; color:var(--cobre-txt); white-space:normal; max-width:22ch; line-height:1.5; }
.costs-note{ font-family:var(--sans); font-size:.76rem; line-height:1.6; color:var(--cinza-nota); margin-top:1.1rem; }

/* blocos de reforço abaixo da tabela */
/* blocos empilhados em largura total: título à esquerda, texto à direita.
   Não podem parecer colunas de tabela nem comparação entre si. */
/* ===== 04 · PERFIS + REVERSÃO DE RISCO ===== */
.perfis{ margin-top:clamp(.5rem,2vw,1.5rem); }
/* grade editorial 2 x 3, sem caixa: os seis perfis cabem quase no mesmo campo de
   visão, então o médico varre os títulos e para no caso que é o dele, em vez de
   ler tudo até se encontrar. O filete curto em bronze abre cada perfil. */
.perfis-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.2rem,4vw,3.2rem) clamp(2.5rem,5vw,4.5rem); }
.pf::before{ content:""; display:block; width:42px; height:2px; background:var(--bronze); margin-bottom:1.15rem; }
.pf h3{ font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.5rem); font-weight:500; color:var(--bordo);
  line-height:1.25; margin-bottom:.65rem; }
.pf p{ font-family:var(--sans); font-size:.98rem; line-height:1.75; color:var(--cinza-escuro); }
/* o .section-head padrao tem max-width:52ch calculado sobre a fonte base (~420px),
   estreito demais para este titulo em Playfair grande: sem isso ele quebra em
   quatro linhas e ignora o <br>. A intro segue limitada pelo max-width proprio. */
#para-quem .section-head{ max-width:850px; }

/* painel bordô: o único bloco escuro do corpo da página, e por isso carrega uma
   ideia só. Composição centralizada, com título e texto de largura controlada
   para o título não esticar pela largura inteira do painel. As quatro ausências
   fecham como faixa de quatro colunas, separadas por filetes verticais, lidas
   como um selo de garantias. */
.risco{ background:var(--bordo); border-radius:10px; padding:clamp(2rem,4vw,3.4rem); text-align:center;
  margin-top:clamp(3rem,5.5vw,4.5rem); box-shadow:0 34px 74px -40px rgba(74,15,23,.6); }
.risco-title{ font-family:var(--serif); font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:500;
  color:var(--creme); line-height:1.3; max-width:46ch; margin:0 auto 1.3rem; }
.risco-title em{ font-style:italic; color:var(--bronze-luz); }
.risco-txt p{ font-family:var(--sans); font-size:1rem; line-height:1.75; color:rgba(251,246,240,.82);
  max-width:66ch; margin:0 auto; }

/* ===== Férias e rotina: problema em cinza, virada em bordô ===== */
/* larguras calibradas para o problema cair em 3 e 5 linhas e a resposta em 2 */
.ac-v1{ max-width:1120px; margin:clamp(2.8rem,5vw,4rem) auto 0; border-top:1px solid var(--cinza-medio); }
.t1{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  gap:clamp(1.2rem,2.4vw,2.2rem); padding:clamp(2.4rem,4vw,3.4rem) 0; border-bottom:1px solid var(--cinza-medio); }
.t1-tag{ grid-column:1 / -1; font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.55rem); font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--bordo); line-height:1.3; max-width:none; margin-bottom:.6rem; }
.t1-prob{ font-family:var(--sans); font-size:.98rem; line-height:1.75; color:var(--cinza-escuro); }
.t1-arrow{ width:clamp(40px,5vw,64px); height:clamp(40px,5vw,64px); color:var(--bronze); flex:none; stroke-width:1.1; }
.t1-ans{ font-family:var(--sans); font-size:1.05rem; font-weight:600; line-height:1.65; color:var(--bordo); }

/* CTA inline (frase + botão) */
.cta-inline{ text-align:center; margin-top:clamp(2.5rem,5vw,3.5rem); }
.cta-inline p{ font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.6rem); color:var(--bordo); margin-bottom:1.4rem; line-height:1.35; }
/* variante com parágrafo corrido, em vez de pergunta curta */
.cta-inline.is-lead{ margin-top:clamp(1.6rem,2.8vw,2.2rem); }
/* na 04 o CTA passou a vir logo apos a grade de perfis (texto solto, sem caixa),
   entao precisa do respiro que antes era do painel .risco */
#para-quem .cta-inline.is-lead{ margin-top:clamp(3rem,5.5vw,4.5rem); }
/* sub da seção 04 em duas linhas no desktop: precisa de um pouco mais de
   largura que o padrão de 64ch, sem afetar o título (.cta-title) */
#para-quem .cta-inline.is-lead p:not(.cta-title){ max-width:74ch; }
.cta-inline.is-lead p{ font-family:var(--sans); font-size:clamp(1rem,1.35vw,1.12rem); font-weight:400; line-height:1.75; color:var(--cinza-escuro); max-width:64ch; margin:0 auto 2.2rem; }
.cta-inline.is-lead p.cta-title{ font-family:var(--serif); font-size:clamp(1.4rem,2.5vw,2rem); font-weight:400; line-height:1.32; color:var(--bordo); max-width:34ch; margin:0 auto .9rem; }
.cta-inline.is-lead p.cta-title em{ font-style:italic; color:var(--bronze-txt); }

@media (max-width:820px){
  .perfis-grid{ grid-template-columns:1fr; }
  .t1{ grid-template-columns:1fr; gap:1rem; }
  .t1-arrow{ transform:rotate(90deg); }
  .costs th,.costs td{ padding:.8rem .75rem; font-size:.88rem; }
  .costs thead th{ font-size:.6rem; letter-spacing:.1em; }
  .costs .ic{ display:none; }
  .costs tfoot td.spec{ max-width:none; }
}

/* ===== RESPONSIVO ===== */
@media (max-width:940px){
  .steps{ grid-template-columns:1fr; gap:2rem; }
  .feats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .feats-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .hero{ min-height:auto; }
  .hero-inner{ width:100%; min-height:auto; padding:7rem clamp(1.5rem,5vw,3rem) 2.4rem; }
  .hero-mosaic{ position:static; width:auto; height:auto; padding:0;
    /* o movimento continua, girado para a horizontal: duas faixas em sentidos
       opostos. margin-inline negativo cancela o padding do .hero-inner para a
       faixa sangrar ate a borda da tela e o corte virar intencional. */
    flex-direction:column; gap:12px; overflow:hidden;
    margin:2.2rem calc(clamp(1.5rem,5vw,3rem) * -1) 2.6rem; }
  .m-col{ flex:none; flex-direction:row; width:max-content; }
  .m-col.up{ animation:mLeft 46s linear infinite; }
  .m-col.down{ animation:mRight 52s linear infinite; }
  .m-photo{ width:clamp(140px,38vw,190px); }
}
@media (max-width:760px){
  .cta-band p br{ display:none; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .loc{ grid-template-columns:1fr; gap:2.5rem; }
  .loc-map iframe{ height:280px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .hero-badges{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal,.reveal-load{ opacity:1 !important; transform:none !important; }
  .m-col{ animation:none !important; }
}

/* Aviso de cookies — informativo, não bloqueia carregamento das tags */
.cookie-aviso{ position:fixed; left:0; right:0; bottom:0; z-index:210; background:var(--preto-quente); color:var(--creme); padding:1rem clamp(1.1rem,4vw,2rem); padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap; box-shadow:0 -8px 30px -12px rgba(0,0,0,.5); transform:translateY(100%); transition:transform .45s var(--ease); }
.cookie-aviso.show{ transform:translateY(0); }
.cookie-aviso p{ font-size:.8rem; line-height:1.65; max-width:760px; margin:0; color:var(--cinza-claro); }
.cookie-aviso a{ color:var(--bronze-luz); text-decoration:underline; text-underline-offset:3px; }
.cookie-aviso button{ flex:none; font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; background:var(--bordo-suave); color:var(--creme); border:0; border-radius:2px; padding:.8rem 1.7rem; cursor:pointer; transition:background .3s var(--ease); }
.cookie-aviso button:hover{ background:var(--bordo-hover); }

/* O botão flutuante do WhatsApp sobe enquanto o aviso está na tela */
body.cookie-on .fab{ bottom:calc(clamp(1.1rem,3vw,2rem) + 84px); }

@media (max-width:640px){
  .cookie-aviso{ justify-content:flex-start; gap:.9rem; }
  .cookie-aviso button{ width:100%; }
}


/* Ornamento da faixa de CTA em WebP (39KB contra 74KB do PNG). Fica em
   @supports porque image-set() com type() não existe em navegador antigo:
   sem o teste, a regra inteira seria descartada e o ornamento sumiria. */
@supports (background-image: image-set(url("a.webp") type("image/webp"))){
  .cta-band::before{ background-image:image-set(url(../img/marca-s.webp) type("image/webp"),
                                                url(../img/marca-s.png) type("image/png")); }
}

/* Carrossel: 3 fotos em tela larga, 2 no intervalo intermediário (onde 3 ficam
   estreitas) e 1 no celular. A faixa é fechada de propósito: a regra de
   1-por-vez está declarada antes, e sem o min-width esta venceria no celular. */


/* ===== RESPIRO NO MOBILE =====================================================
   O mobile herdava o ritmo do desktop: os clamp() reduzem a fonte, mas o
   espacamento cai para o minimo e fica igual em qualquer tela pequena. Texto
   menor no mesmo aperto e o que gera a sensacao de pagina poluida.
   Nada aqui altera o desktop.
   ========================================================================== */
@media (max-width:820px){
  /* entrelinha de 1.08 serve a titulo grande de desktop, que ocupa 1 ou 2
     linhas. No celular o mesmo titulo quebra em 4 e as linhas se encostam. */
  h1,h2,h3,h4{ line-height:1.18; letter-spacing:0; }
  .hero h1{ line-height:1.18; }
  .section-head h2{ line-height:1.16; }
  /* contraste um pouco maior entre as faixas creme: no celular, com as secoes
     empilhadas, e o fundo que mostra onde um assunto termina e outro comeca.
     Precisa de :root: custom property solta dentro do @media e ignorada. */
  :root{ --creme-2:#F0E7DB; }
  /* grades empilhadas precisam de mais separacao do que quando lado a lado */
  .steps{ gap:2.6rem; }
  .feats-grid{ gap:1.1rem; }
  .hero-badges{ gap:1.15rem 1.9rem; }
}
@media (max-width:560px){
  .feats-grid{ gap:1.25rem; }
}

/* ===== CARROSSEL: QUANTAS FOTOS POR VEZ ======================================
   As tres faixas ficam juntas e DEPOIS da regra base (.car-item, 3 por vez).
   Estavam antes dela no arquivo, e como a especificidade e a mesma, a base
   vencia: o carrossel mostrava 3 fotos ate no celular.
   ========================================================================== */
@media (max-width:680px){
  .car-item{ flex:0 0 calc(100% - 16px); }
  .car-item img{ height:clamp(300px,72vw,420px); }
  .car-item .ci-desc{ max-height:6.5rem; opacity:1; margin-top:.55rem; }
}
@media (min-width:681px) and (max-width:1100px){
  .car-item{ flex:0 0 calc((100% - 8px) / 2); }
}

/* Ajustes finos de mobile (20/08/2026):
   - rótulo da seção de localização ia a 10,2px, pequeno para leitura no celular
   - legenda do carrossel encostava na borda da foto: o tracking de .18em é
     desenhado para foto larga; em tela pequena ele empurra o texto para fora */
@media (max-width:820px){
  .loc-block .lbl{ font-size:.72rem; letter-spacing:.2em; }
  .car-item figcaption{ padding:3rem 1.1rem 1.05rem; }
  .car-item .ci-name{ letter-spacing:.12em; line-height:1.35; }
}