/* =========================================================
   Rodrigues & Sarmento — base.css
   Tokens, tipografia, botões, cabeçalho, rodapé e camadas globais
   ========================================================= */

:root{
  /* cores da marca (mantidas) */
  --petrol:#134B59;
  --petrol-80:#2C5F6B;
  --petrol-10:#E7EDEF;
  --gold:#E9AD66;
  --gold-80:#D9A05C;
  --gold-20:#F7E6CE;
  --white:#fff;
  --ink:#1A1A1A;
  --gray:#5B6870;
  --wa:#25D366;
  --wa-hover:#1FB855;
  /* tons derivados, apenas para profundidade */
  --night:#071F26;
  --gold-soft:#F4DFC0;

  --line-light:rgba(19,75,89,.16);
  --line-dark:rgba(233,173,102,.26);

  --f-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.18,1);

  --header-h:84px;
  --pad:clamp(20px,5vw,72px);
  --max:1280px;
  --cut:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 8px);overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--f-body);font-size:1.0625rem;line-height:1.7;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote,address{margin:0}
address{font-style:normal}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--night)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:20000;background:var(--gold);color:var(--night);padding:12px 20px;font-weight:700;transition:top .25s}
.skip-link:focus{top:16px}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2*var(--pad),var(--max));margin-inline:auto}
.section{padding-block:clamp(84px,11vw,168px);position:relative}
.on-dark{background:var(--petrol);color:rgba(255,255,255,.86)}
.on-dark.night{background:var(--night)}
.on-light{background:var(--white);color:var(--ink)}
.on-light.tint{background:var(--petrol-10)}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{font-family:var(--f-display);font-weight:300;letter-spacing:-.018em;line-height:1.06;font-optical-sizing:auto}
.h2{font-size:clamp(2.2rem,4.6vw,4rem)}
.on-light .h2,.on-light h3{color:var(--petrol)}
.on-dark .h2,.on-dark h3{color:var(--white)}
.lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.75;color:var(--gray)}
.on-dark .lead{color:rgba(255,255,255,.74)}

.mark{display:inline-flex;align-items:center;gap:12px;font:600 .95rem/1.2 var(--f-body);letter-spacing:.02em}
.mark::before{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none}
.on-light .mark{color:var(--petrol-80)}
.on-dark .mark{color:var(--gold)}

.sec-head{display:grid;gap:22px;max-width:780px;margin-bottom:clamp(44px,6vw,88px)}
.sec-head .lead{max-width:60ch}

/* corte de 45° — assinatura tirada do losango do logotipo */
.cut{--cut:14px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}

/* ---------- botões ---------- */
.btn{--cut:12px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 34px;font:600 .96rem/1.2 var(--f-body);letter-spacing:.02em;text-align:center;cursor:pointer;overflow:hidden;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background-color .35s,color .35s,transform .5s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s var(--ease-io)}
.btn:hover::after{transform:translateX(130%)}
.btn svg{width:20px;height:20px;flex:none}
.btn:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--night),inset 0 0 0 5px var(--gold-soft)}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ink{background:var(--petrol);color:#fff}
.btn-ink:hover{background:var(--night)}
.btn-wa{background:var(--wa);color:var(--night)}
.btn-wa:hover{background:var(--wa-hover)}
.btn-line{--fill:var(--petrol);background:var(--gold);color:var(--gold-soft)}
.btn-line::before{content:"";position:absolute;inset:1px;z-index:-2;background:var(--fill);
  clip-path:polygon(calc(var(--cut) - .6px) 0,100% 0,100% calc(100% - var(--cut) + .6px),calc(100% - var(--cut) + .6px) 100%,0 100%,0 calc(var(--cut) - .6px));transition:opacity .35s}
.btn-line:hover{color:var(--night)}
.btn-line:hover::before{opacity:0}
.night .btn-line{--fill:var(--night)}
.btn-sm{min-height:46px;padding:0 24px;--cut:9px;font-size:.9rem;white-space:nowrap}
.btn-lg{min-height:72px;padding:0 52px;font-size:1.12rem;--cut:16px}

.link{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:inherit;padding-block:6px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;background-size:100% 1px;position:relative}
.link::after{content:"";width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .45s var(--ease)}
.link:hover::after{transform:translateX(5px) rotate(45deg)}
.on-light .link{color:var(--petrol)}
.on-dark .link{color:var(--gold)}

/* ---------- cabeçalho ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);display:flex;align-items:center;
  transition:transform .55s var(--ease),background-color .4s,height .4s,box-shadow .4s}
.site-header::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,31,38,.72),transparent);opacity:1;transition:opacity .4s;pointer-events:none}
.site-header.is-solid{height:72px;background:rgba(7,31,38,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line-dark)}
.site-header.is-solid::before{opacity:0}
.site-header.is-hidden{transform:translateY(-100%)}
.header-in{position:relative;width:min(100% - 2*clamp(20px,2.4vw,48px),1560px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;color:#fff;min-width:0}
.brand img{width:46px;height:auto;border-radius:9px;flex:none}
.brand-name{display:grid;line-height:1.15}
.brand-name b{font:400 1.12rem/1.1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
.brand-name small{font:500 .74rem/1.2 var(--f-body);letter-spacing:.06em;color:rgba(255,255,255,.72);white-space:nowrap}
.nav{display:none;align-items:center;gap:clamp(15px,1.5vw,32px)}
.nav a{position:relative;white-space:nowrap;font:500 .9rem/1 var(--f-body);color:rgba(255,255,255,.88);padding:10px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--gold)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.header-tools{display:flex;align-items:center;gap:14px}
.header-cta{display:none;padding:0 20px}
.sound-btn{width:46px;height:46px;display:grid;place-items:center;color:var(--gold);border:1px solid var(--line-dark);border-radius:50%;transition:background-color .3s,border-color .3s}
.sound-btn:hover{background:rgba(233,173,102,.12);border-color:var(--gold)}
.sound-btn svg{width:20px;height:20px}
.sound-btn .off{display:none}
.sound-btn[aria-pressed="false"] .on{display:none}
.sound-btn[aria-pressed="false"] .off{display:block}
.burger{width:46px;height:46px;position:relative;border:1px solid var(--line-dark);border-radius:50%}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:var(--gold);transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:26px}
.burger[aria-expanded="true"] i:nth-child(1){top:22.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){top:22.5px;transform:rotate(-45deg)}
@media (min-width:1240px){
  .nav{display:flex}
  .header-cta{display:inline-flex}
  .burger{display:none}
}
@media (max-width:520px){
  :root{--header-h:68px}
  .brand img{width:40px}
  .brand-name b{font-size:1.02rem}
  .brand-name small{font-size:.66rem}
  .header-tools{gap:10px}
  .sound-btn,.burger{width:42px;height:42px}
  .burger i{left:12px;right:12px}
  .burger i:nth-child(1){top:17px}
  .burger i:nth-child(2){top:23.5px}
  .burger[aria-expanded="true"] i:nth-child(1),.burger[aria-expanded="true"] i:nth-child(2){top:20px}
}

/* menu de tela cheia (mobile) */
.menu{position:fixed;inset:0;z-index:99;background:var(--night);display:flex;flex-direction:column;justify-content:center;gap:34px;padding:calc(var(--header-h) + 24px) var(--pad) 40px;
  visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io),visibility 0s .9s;overflow-y:auto}
.menu.is-open{visibility:visible;clip-path:inset(0);transition:clip-path .9s var(--ease-io)}
.menu nav{display:grid;gap:2px}
.menu-link{display:block;font:300 clamp(1.9rem,8vw,3rem)/1.2 var(--f-display);color:#fff;padding:.16em 0;opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .9s var(--ease),color .3s;transition-delay:calc(var(--i)*55ms + 300ms)}
.menu-link:hover,.menu-link[aria-current]{color:var(--gold)}
.menu.is-open .menu-link{opacity:1;transform:none}
.menu .btn{align-self:flex-start;opacity:0;transition:opacity .7s .8s}
.menu.is-open .btn{opacity:1}
body.menu-open{overflow:hidden}

/* ---------- rodapé ---------- */
.site-footer{background:var(--night);color:rgba(255,255,255,.72);position:relative;overflow:hidden;padding-top:clamp(64px,8vw,110px)}
.foot-mark{font:300 clamp(2.3rem,8.8vw,8.6rem)/.95 var(--f-display);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(233,173,102,.34);white-space:nowrap;margin-bottom:clamp(40px,6vw,84px);user-select:none}
.foot-grid{display:grid;grid-template-columns:1.3fr 1.2fr .8fr;gap:clamp(32px,5vw,80px);padding-bottom:clamp(44px,6vw,80px)}
.foot-brand{display:grid;gap:22px;align-content:start}
.foot-brand .brand b{font-size:1.35rem}
.foot-col h2{font:600 .95rem/1.2 var(--f-body);letter-spacing:.02em;color:var(--gold);margin-bottom:18px}
.foot-col address,.foot-col li{font-size:.98rem;line-height:1.75}
.foot-col a{transition:color .3s}
.foot-col a:hover{color:var(--gold)}
.foot-col li{margin-bottom:6px}
.social{display:flex;gap:12px}
.social a{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:50%;color:#fff;transition:background-color .3s,color .3s,border-color .3s}
.social a:hover{background:var(--gold);color:var(--night);border-color:var(--gold)}
.social svg{width:20px;height:20px}
.foot-bottom{border-top:1px solid var(--line-dark);padding-block:26px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:.88rem;color:rgba(255,255,255,.56)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}

/* ---------- camadas flutuantes ---------- */
.fab-wa{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:90;width:64px;height:64px;border-radius:50%;background:var(--wa);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,.35);transition:transform .45s var(--ease),box-shadow .45s}
.fab-wa svg{width:31px;height:31px;color:#fff}
.fab-wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);opacity:0;animation:ring 4s ease-out infinite}
.fab-wa:hover{transform:scale(1.08);box-shadow:0 16px 38px rgba(37,211,102,.5)}
@keyframes ring{0%,68%{transform:scale(1);opacity:0}72%{opacity:.6}100%{transform:scale(1.75);opacity:0}}

.cookie{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));z-index:91;width:min(470px,calc(100vw - 40px - 84px));display:none;align-items:center;gap:18px;padding:18px 22px;
  background:rgba(7,31,38,.96);color:rgba(255,255,255,.9);font-size:.9rem;line-height:1.55;--cut:14px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.cookie[data-open="true"]{display:flex}
.cookie button{flex:none;background:var(--gold);color:var(--night);font-weight:700;font-size:.88rem;min-height:42px;padding:0 20px;transition:background-color .3s}
.cookie button:hover{background:var(--gold-soft)}
@media (max-width:560px){
  .cookie{left:12px;right:12px;width:auto;bottom:max(12px,env(safe-area-inset-bottom));padding:12px 14px;gap:12px;font-size:.8rem;line-height:1.4}
  .cookie button{min-height:40px;padding:0 14px}
  .has-cookie .fab-wa{bottom:calc(84px + env(safe-area-inset-bottom))}
}

.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;z-index:120;pointer-events:none}

/* cursor em losango e "gota de tinta" no clique */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--gold);transform:translate3d(-100px,-100px,0) rotate(45deg);z-index:9990;pointer-events:none;opacity:0;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .3s}
.cursor.is-on{opacity:.9}
.cursor.is-hover{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(233,173,102,.16)}
.ink{position:fixed;z-index:9991;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(233,173,102,.5) 0,rgba(233,173,102,.22) 38%,transparent 66%);animation:ink .85s var(--ease) forwards}
@keyframes ink{from{transform:scale(.05);opacity:1}to{transform:scale(1);opacity:0}}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- revelações (só ativas com JS) ---------- */
.js [data-split]:not(.is-split){visibility:hidden;animation:unhide 0s 3.5s forwards}
@keyframes unhide{to{visibility:visible}}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .16em 0;margin-bottom:-.16em}
.js [data-split] .wi{display:inline-block;transform:translateY(115%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i)*36ms + var(--d,0ms))}
.js [data-split].is-in .wi{transform:none}
.js [data-fade]{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)}
.js [data-fade].is-in{opacity:1;transform:none}
.js [data-frame]::after{content:"";position:absolute;inset:0;z-index:3;background:var(--night);transform-origin:50% 0;transition:transform 1.25s var(--ease-io) var(--d,0ms);pointer-events:none}
.js [data-frame] img{transform:scale(1.2);transition:transform 1.8s var(--ease) var(--d,0ms)}
.js [data-frame].is-in::after{transform:scaleY(0)}
.js [data-frame].is-in img{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-split] .wi,.js [data-fade],.js [data-frame] img{transform:none!important;opacity:1!important}
  .js [data-frame]::after{display:none}
  .cursor,.ink{display:none}
}