/* =====================================================================
   Cãopacabana — base v2 "lúdico"
   Cores do sistema (estilo_cao.css): cacau, laranja, creme, manteiga, turquesa.
   Tokens, tipografia, botões, topo, menu, rodapé, botão do WhatsApp, revelações.
   ===================================================================== */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 900;font-display:swap;src:url(../fonts/fraunces-italic.woff2) format("woff2")}

:root{
  --cacau:#2E2723; --cacau-2:#1C1714; --cacau-3:#4A3D35;
  --laranja:#F68E34; --laranja-2:#F9A95E; --laranja-esc:#C2610D;
  --laranja-txt:#9A4A08;            /* fora da paleta: variante de contraste p/ texto laranja PEQUENO sobre claro (5:1 no creme; #C2610D dá 3,4:1, só em título grande) */
  --creme:#EFE7DD; --pessego:#FFF0DD; --manteiga:#FFE7A8; --branco:#FFFFFF;
  --turquesa:#1F96A2;               /* do sistema: destaque, ícones */
  --turquesa-esc:#14727C;           /* fora da paleta: variante de contraste p/ fundo com texto branco (5,8:1; #1F96A2 dá 3,5:1) */
  --turquesa-l:#DDF1F2;             /* fora da paleta: fundo claro de cartão (dica "Unhas") */
  --tinta:#24201D; --tinta-2:#6A615A;
  --linha:#E0D5C6;                  /* fora da paleta: fios e contornos finos (bordas de selos, FAQ, horários) */
  --ok:#186A41;                     /* fora da paleta: verde dos selos "em dia"/"paga" no celular ilustrado (6:1 no fundo #DDF3E7) */
  --whats:#25D366;                  /* verde oficial do WhatsApp (botão flutuante e botões de WhatsApp) */
  /* Cores fixas no SVG do mapa (inc/visite.php) e no celular ilustrado (#DCF8C6 = balão do WhatsApp,
     #DDF3E7 = fundo do selo verde) usam a paleta acima escrita em hexadecimal, por estarem dentro de SVG/ilustração. */
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:28px; --r-m:20px; --r-s:16px;
  --gut:clamp(16px,4vw,48px); --max:1280px; --header-h:76px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --sombra:0 1px 2px rgba(46,39,35,.10),0 6px 18px rgba(46,39,35,.10);
  --sombra-g:0 2px 4px rgba(46,39,35,.08),0 24px 60px -24px rgba(46,39,35,.45);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--creme);color:var(--tinta);font-family:var(--f-body);font-size:clamp(16px,1.05vw,17.5px);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.04;letter-spacing:-.02em;margin:0;font-variation-settings:"SOFT" 50,"WONK" 0}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
figure{margin:0}
em,.it{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
strong,b{font-weight:700}
::selection{background:var(--laranja);color:var(--cacau)}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px;border-radius:8px}
.on-dark :focus-visible{outline-color:var(--laranja)}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:999;background:var(--laranja);color:var(--cacau);padding:10px 16px;border-radius:12px;font-weight:800;transition:top .2s}
.skip:focus{top:16px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.section{position:relative;padding:clamp(80px,11vw,150px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--laranja-txt)}
.eyebrow .ic{width:18px;height:18px}
.on-dark .eyebrow{color:var(--laranja)}
.h-l{font-size:clamp(2.3rem,5.2vw,4.8rem);font-weight:420;letter-spacing:-.03em}
.h-m{font-size:clamp(1.7rem,3vw,2.6rem)}
h1 em,h2 em,.h-l em{color:var(--laranja-esc)}
.on-dark h1 em,.on-dark h2 em,.on-dark .h-l em{color:var(--laranja)}
.lead{font-size:clamp(1.06rem,1.4vw,1.25rem);line-height:1.6;color:var(--tinta-2);max-width:58ch}
.on-dark{color:var(--creme)}
.on-dark .lead{color:rgba(239,231,221,.82)}
.ic{width:22px;height:22px;flex:none}

/* split de títulos (palavras em máscara) */
.split-line{display:inline-block;vertical-align:top;overflow:hidden;padding:.08em .04em .12em;margin:-.08em -.04em -.12em}
.split-line>span{display:inline-block;will-change:transform}

/* ---------- botões (pílula) ---------- */
.btn{--bg:var(--laranja);--fg:var(--cacau);--hover:var(--cacau);--hover-fg:var(--laranja);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:800;font-size:.98rem;line-height:1.1;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),color .4s,box-shadow .5s var(--ease);box-shadow:0 10px 26px -12px rgba(194,97,13,.65);white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hover);border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--hover-fg)}
.btn .ic{width:20px;height:20px;transition:transform .5s var(--ease)}
.btn:hover .ic{transform:translateX(3px) rotate(-8deg)}
.btn--ghost{--bg:transparent;--fg:currentColor;--hover:var(--laranja);--hover-fg:var(--cacau);box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--laranja)}
.btn--cacau{--bg:var(--cacau);--fg:var(--creme);--hover:var(--laranja);--hover-fg:var(--cacau);box-shadow:0 10px 26px -14px rgba(28,23,20,.7)}
.btn--creme{--bg:var(--creme);--fg:var(--cacau);--hover:var(--manteiga);--hover-fg:var(--cacau);box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}
.btn--turq{--bg:var(--turquesa-esc);--fg:#fff;--hover:var(--cacau);--hover-fg:#fff;box-shadow:0 10px 26px -14px rgba(20,114,124,.8)}
.btn--whats{--bg:var(--whats);--fg:#0B3B1E;--hover:var(--cacau);--hover-fg:#fff;box-shadow:0 10px 26px -14px rgba(37,211,102,.8)}
.btn--p{min-height:44px;padding:10px 18px;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--laranja-txt);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .5s var(--ease)}
.link-arrow:hover{background-size:100% 2px}
.link-arrow .ic{width:18px;height:18px;transition:transform .4s var(--ease)}
.link-arrow:hover .ic{transform:translateX(4px)}
.on-dark .link-arrow{color:var(--laranja)}

/* selo/etiqueta pílula */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips li,.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--branco);box-shadow:inset 0 0 0 1px var(--linha);font-weight:700;font-size:.85rem;line-height:1.3}
.chip .ic{width:16px;height:16px}

/* ---------- topo ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);color:var(--creme);transition:transform .6s var(--ease),background .4s,box-shadow .4s,color .4s}
.hdr__in{height:100%;display:flex;align-items:center;gap:20px}
.hdr__logo{display:flex;align-items:center;gap:10px;flex:none}
.hdr__logo img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 2px rgba(239,231,221,.25);transition:transform .6s var(--ease)}
.hdr__logo:hover img{transform:rotate(-12deg)}
.hdr__logo b{display:block;font-family:var(--f-display);font-size:1.45rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.hdr__logo small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-top:3px}
.hdr.is-solid{background:rgba(239,231,221,.9);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);box-shadow:0 1px 0 rgba(46,39,35,.08);color:var(--cacau)}
.hdr.is-hidden{transform:translateY(-110%)}
.hdr:focus-within{transform:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{position:relative;padding:10px 14px;font-weight:700;font-size:.93rem;border-radius:999px}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--laranja);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{display:flex;gap:10px;align-items:center}
.hdr__tutor{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-weight:800;font-size:.9rem;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .3s,color .3s,box-shadow .3s}
.hdr__tutor:hover{background:var(--laranja);color:var(--cacau);box-shadow:inset 0 0 0 1.5px var(--laranja)}
.hdr__tutor .ic{width:18px;height:18px}
.hdr__sos{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--laranja);color:var(--cacau);font-weight:800;font-size:.9rem}
.hdr__sos .dot{width:8px;height:8px;border-radius:50%;background:var(--cacau);animation:pulso 1.6s infinite}
.hdr__sos .ic{width:20px;height:20px;display:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(46,39,35,.6)}70%{box-shadow:0 0 0 9px rgba(46,39,35,0)}100%{box-shadow:0 0 0 0 rgba(46,39,35,0)}}
.burger{display:none;width:48px;height:48px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1.5px currentColor}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:currentColor;border-radius:2px;transition:transform .5s var(--ease)}
.burger span:nth-child(1){top:19px}.burger span:nth-child(2){top:27px}
body.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* menu do celular: tela cheia abrindo em círculo a partir do botão */
.mmenu{position:fixed;inset:0;z-index:95;background:var(--cacau);color:var(--creme);clip-path:circle(0% at calc(100% - 44px) 38px);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility 0s linear .8s;display:flex;flex-direction:column;padding:calc(var(--header-h) + 24px) var(--gut) 32px;overflow:auto}
.mmenu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 50% at 100% 100%,rgba(246,142,52,.28),transparent 65%)}
body.menu-open .mmenu{clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible;transition:clip-path .8s var(--ease-io),visibility 0s}
body.menu-open .hdr{color:var(--creme);background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{font-family:var(--f-display);font-size:clamp(2.1rem,9vw,3.2rem);line-height:1.15;padding:6px 0;display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease)}
.mmenu nav a small{font-family:var(--f-body);font-size:.8rem;color:var(--laranja);font-weight:800;letter-spacing:.1em}
.mmenu nav a em{color:var(--laranja)}
body.menu-open .mmenu nav a{opacity:1;transform:none}
body.menu-open .mmenu nav a:nth-child(1){transition-delay:.15s}body.menu-open .mmenu nav a:nth-child(2){transition-delay:.2s}body.menu-open .mmenu nav a:nth-child(3){transition-delay:.25s}body.menu-open .mmenu nav a:nth-child(4){transition-delay:.3s}body.menu-open .mmenu nav a:nth-child(5){transition-delay:.35s}body.menu-open .mmenu nav a:nth-child(6){transition-delay:.4s}
.mmenu__foot{margin-top:auto;padding-top:32px;display:grid;gap:12px}
.mmenu__foot .btn{white-space:normal}
.mmenu__mascote{position:absolute;right:var(--gut);bottom:200px;width:110px;height:110px;border-radius:50%;opacity:.95;transform:rotate(12deg)}
@media (max-width:1100px){.nav,.hdr__cta .hdr__tutor{display:none}.burger{display:block}.hdr__cta{margin-left:auto}}
@media (max-width:560px){
  .hdr__logo small{display:none}
  .hdr__logo img{width:42px;height:42px}
  .hdr__logo b{font-size:1.3rem}
  .hdr__sos .t,.hdr__sos .dot{display:none}
  .hdr__sos .ic{display:block}
  .hdr__sos{padding:0;width:46px;height:46px;justify-content:center;animation:sosPulso 2s infinite}
  .burger{width:46px;height:46px}.burger span{left:13px;right:13px}.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
  .mmenu__mascote{width:80px;height:80px;bottom:190px}
}
@keyframes sosPulso{0%{box-shadow:0 0 0 0 rgba(246,142,52,.6)}70%{box-shadow:0 0 0 12px rgba(246,142,52,0)}100%{box-shadow:0 0 0 0 rgba(246,142,52,0)}}

/* ---------- botão redondo do WhatsApp ---------- */
.fab{position:fixed;right:clamp(14px,2vw,28px);bottom:calc(clamp(14px,2vw,28px) + env(safe-area-inset-bottom));z-index:90;width:62px;height:62px;border-radius:50%;background:var(--whats);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(37,211,102,.75);transition:transform .5s var(--ease)}
.fab:hover{transform:scale(1.08) rotate(-6deg)}
.fab svg{width:32px;height:32px}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--whats);animation:anel 2.4s var(--ease) infinite}
@keyframes anel{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.fab__tip{position:absolute;right:76px;top:50%;transform:translateY(-50%) translateX(10px);background:var(--cacau);color:var(--creme);padding:9px 14px;border-radius:12px;font-size:.85rem;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.fab:hover .fab__tip{opacity:1;transform:translateY(-50%)}
body.menu-open .fab{opacity:0;pointer-events:none}

/* ---------- onda do calçadão (detalhe) ---------- */
.onda{display:block;width:100%;height:calc(var(--h) * 1px * var(--escala,.6))}
@media (min-width:1100px){.onda{--escala:.8}}
.onda path{fill:none;stroke:var(--onda-cor,var(--laranja));stroke-width:var(--traco);stroke-linecap:round}
.onda--andar .onda__g{animation:andar var(--dur,22s) linear infinite}
.onda--andar.parado .onda__g{animation-play-state:paused}
@keyframes andar{from{transform:translateX(0)}to{transform:translateX(calc(var(--p) * -1))}}
.onda--creme{--onda-cor:var(--creme)}
.onda--cacau{--onda-cor:var(--cacau)}

/* ---------- rodapé ---------- */
.ftr{position:relative;background:var(--cacau-2);color:rgba(239,231,221,.78);padding:0 0 30px;font-size:.95rem}
.ftr__onda{padding:34px 0 0;opacity:.9}
.ftr__onda .onda{--escala:.5}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(30px,4vw,60px);padding-top:clamp(50px,6vw,80px)}
.ftr__marca{display:flex;align-items:center;gap:14px;margin-bottom:18px;color:var(--creme)}
.ftr__marca img{width:72px;height:72px;border-radius:50%}
.ftr__marca b{display:block;font-family:var(--f-display);font-size:1.8rem;font-weight:500;line-height:1}
.ftr__marca small{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.ftr h2{font-family:var(--f-body);font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--laranja);margin:0 0 18px}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr a:hover{color:var(--laranja)}
.ftr__big{font-family:var(--f-display);font-size:clamp(3rem,12.5vw,12rem);font-weight:300;letter-spacing:-.06em;line-height:.85;color:rgba(239,231,221,.07);margin:clamp(50px,7vw,90px) 0 26px;white-space:nowrap;overflow:hidden;user-select:none}
.ftr__big em{color:rgba(246,142,52,.16)}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;padding-top:24px;border-top:1px solid rgba(239,231,221,.12);font-size:.85rem}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(239,231,221,.28);transition:background .3s,color .3s,box-shadow .3s}
.social a:hover{background:var(--laranja);color:var(--cacau);box-shadow:none}
.social svg{width:20px;height:20px}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}.ftr__big{font-size:17vw}.ftr{padding-bottom:96px}}

/* ---------- revelações (estado inicial só com JS) ---------- */
/* "anim" só existe quando o site.js vai mesmo animar (ver inc/head.php: trava de 3 s se ele falhar) */
html.anim [data-reveal]{opacity:0;transform:translateY(36px)}
html.anim [data-reveal=fade]{transform:none}
html.anim [data-reveal=scale]{transform:scale(.9)}
html.anim [data-clip]{clip-path:inset(100% 0 0 0 round var(--r))}
html.anim [data-split]{opacity:0}                 /* opacidade (não visibility): o título continua na árvore de acessibilidade e na busca da página */
html.anim [data-split].is-split{opacity:1}

/* ---------- celular ---------- */
@media (max-width:600px){
  .section{padding:72px 0}
  .btn{white-space:normal;text-align:center}
  .btn-row{flex-direction:column;align-items:stretch}
  .h-l{font-size:clamp(2.1rem,9.5vw,2.9rem)}
  .fab{width:56px;height:56px}
  .fab__tip{display:none}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.anim [data-reveal],html.anim [data-clip],html.anim [data-split]{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ---------- impressão: tudo visível, sem elementos flutuantes ---------- */
@media print{
  html.anim [data-reveal],html.anim [data-clip],html.anim [data-split],[data-reveal],[data-clip]{opacity:1!important;transform:none!important;clip-path:none!important}
  .hdr,.mmenu,.fab,.faixa,.bubbles,.hero__ondas,.phero__ondas,.ftr__onda,.skip{display:none!important}
  .pillar{position:static!important}
  body{background:#fff}
}