/* PersoLav · site institucional
   Linha clara e editorial: fundo claro, azul-marinho no texto, fotos reais do pátio.
   Cores e letras seguem o guia de marca (Azul Profundo, Azul PersoLav, Archivo). */

:root{
  --bg:#F4F5F7;
  --paper:#FFFFFF;
  --ink:#0B2160;
  --royal:#1A3FA0;
  --text:#28324E;
  --muted:#5F6883;
  --line:rgba(11,33,96,.14);
  --line-strong:rgba(11,33,96,.32);
  --on-ink:#D7DEEF;
  --on-ink-muted:#9AA6C6;
  --line-ink:rgba(255,255,255,.16);
  --max:1280px;
  --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --top-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--top-h); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Archivo',system-ui,sans-serif; font-size:17px; line-height:1.6;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{margin:0; color:var(--ink); font-weight:600}
p{margin:0}
ol,ul{margin:0; padding:0; list-style:none}
figure{margin:0}
:focus-visible{outline:2px solid var(--royal); outline-offset:3px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:10px 14px; z-index:100}
.skip:focus{left:8px}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:54px; padding:0 26px; border-radius:2px;
  font:600 16px/1 'Archivo',sans-serif; letter-spacing:.005em; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-sm{height:42px; padding:0 18px; font-size:15px}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:var(--royal)}
.btn-line{border-color:var(--line-strong); color:var(--ink)}
.btn-line:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:var(--on-ink)}
.btn-line-light{border-color:rgba(255,255,255,.4); color:#fff}
.btn-line-light:hover{background:#fff; color:var(--ink); border-color:#fff}

/* ---------- Cabeçalho ---------- */
.top{
  position:sticky; top:0; z-index:50; height:var(--top-h);
  background:rgba(244,245,247,.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:transform .4s var(--ease), border-color .3s;
}
.top.scrolled{border-bottom-color:var(--line)}
.top.hide{transform:translateY(-100%)}
.top-in{height:100%; display:flex; align-items:center; gap:32px}
.brand img{width:148px; height:auto}
.menu{display:flex; align-items:center; gap:28px; margin-left:auto}
.menu a{font-size:15px; font-weight:500; color:var(--text); text-decoration:none; position:relative; padding:6px 0}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease)}
.menu a:hover{color:var(--ink)}
.menu a:hover::after{transform:scaleX(1); transform-origin:left}
.menu-tel{color:var(--ink)!important; font-weight:600!important; font-variant-numeric:tabular-nums}
.burger{display:none; width:44px; height:44px; border:0; background:none; padding:0; cursor:pointer; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease)}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding:clamp(40px,7vw,96px) 0 0}
.hero-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:end}
.hero-text{grid-column:1 / 8; padding-bottom:8px}
.hero-title{
  font-size:clamp(44px,5.8vw,90px); line-height:.96; letter-spacing:-.035em;
  font-weight:620; font-variation-settings:'wdth' 108;
}
.hero-title .line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.hero-title .line > span{display:block}
.hero-lead{margin-top:32px; max-width:34em; font-size:clamp(17px,1.35vw,19px); color:var(--text)}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero-photo{grid-column:8 / 13}
.frame{overflow:hidden; background:#DDE1E8}
.frame img{width:100%; height:100%; object-fit:cover}
.hero-photo .frame{aspect-ratio:1/1}
.hero-photo img{transform:scale(1.08)}
figcaption{margin-top:12px; font-size:14px; color:var(--muted)}
figcaption b{color:var(--ink); font-weight:600}

.facts{
  margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.facts li{padding:24px 24px 28px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:4px}
.facts li:first-child{border-left:0; padding-left:0}
.facts b{color:var(--ink); font-weight:600; font-size:17px}
.facts span{color:var(--muted); font-size:15px; line-height:1.45}

/* ---------- Manifesto ---------- */
.manifest{padding:clamp(96px,12vw,170px) 0; border-top:1px solid var(--line)}
.manifest-text{
  max-width:21em; color:var(--ink);
  font-size:clamp(28px,3.5vw,52px); line-height:1.16; letter-spacing:-.022em; font-weight:500;
  font-variation-settings:'wdth' 104;
}
.js .manifest-text .w{opacity:.16; transition:opacity .45s var(--ease)}
.js .manifest-text .w.on{opacity:1}

/* ---------- Cabeçalho de seção ---------- */
.sec-head{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.sec-title{grid-column:1 / 8; font-size:clamp(38px,4.8vw,72px); line-height:1; letter-spacing:-.03em; font-weight:600; font-variation-settings:'wdth' 106}
.sec-note{grid-column:9 / 13; color:var(--muted); font-size:16px}
.sec-note a{color:var(--ink); text-underline-offset:3px}

/* ---------- Serviços ---------- */
.services{background:var(--paper); padding:clamp(88px,10vw,140px) 0}
.svc{border-bottom:1px solid var(--line)}
.svc li{border-top:1px solid var(--line)}
.svc a{
  position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 40px; gap:24px; align-items:center;
  padding:26px 0; text-decoration:none; isolation:isolate;
}
.svc a::before{content:""; position:absolute; inset:0 calc(var(--pad) * -1); background:var(--bg); z-index:-1; transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease)}
.svc a:hover::before,.svc a:focus-visible::before{transform:scaleY(1)}
.svc .n{font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums}
.svc .name{font-size:clamp(22px,2.2vw,32px); line-height:1.15; color:var(--ink); font-weight:560; letter-spacing:-.015em; font-variation-settings:'wdth' 104; transition:transform .45s var(--ease)}
.svc .desc{color:var(--muted); font-size:16px}
.svc .go{color:var(--line-strong); justify-self:end; transition:transform .45s var(--ease), color .3s}
.svc a:hover .name{transform:translateX(10px)}
.svc a:hover .go{color:var(--royal); transform:translateX(4px)}

/* ---------- Pátio ---------- */
.patio{padding:clamp(88px,10vw,140px) 0}
.ba{margin-bottom:clamp(56px,7vw,96px)}
.ba-pair{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.ba figure{position:relative}
.ba .frame{aspect-ratio:2/1}
.ba img{object-position:50% 100%}
.ba .tag{
  position:absolute; left:16px; top:16px; padding:7px 12px;
  background:#fff; color:var(--ink); font-size:13px; font-weight:600; letter-spacing:.02em;
}
.ba figure:last-child .tag{background:var(--ink); color:#fff}
.ba-cap{margin-top:14px; font-size:14px; color:var(--muted)}
.ba-cap b{color:var(--ink); font-weight:600}
.js .ba[data-reveal]{transform:none}
.js .ba .frame{clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease)}
.js .ba figure:last-child .frame{transition-delay:.15s}
.js .ba.in .frame{clip-path:inset(0 0 0 0)}
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:24px 24px}
.gallery figure .frame{height:var(--h)}
.g-a{grid-column:1 / 8; --h:clamp(260px,30vw,430px)}
.g-b{grid-column:8 / 13; --h:clamp(260px,30vw,430px)}
.g-c{grid-column:1 / 5; --h:clamp(220px,23vw,330px); margin-top:24px}
.g-d{grid-column:5 / 11; --h:clamp(220px,23vw,330px); margin-top:24px}
.g-more{
  grid-column:11 / 13; margin-top:24px; height:clamp(220px,23vw,330px);
  display:flex; flex-direction:column; justify-content:space-between; padding:20px;
  border:1px solid var(--line-strong); color:var(--ink); text-decoration:none; font-weight:560; font-size:19px; line-height:1.25;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.g-more svg{transition:transform .45s var(--ease)}
.g-more:hover{background:var(--ink); color:#fff}
.g-more:hover svg{transform:translateX(6px)}
.gallery img{transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.035)}

/* ---------- Como funciona ---------- */
.how{background:var(--paper); padding:clamp(88px,10vw,140px) 0}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.steps li{border-top:2px solid var(--ink); padding-top:22px}
.steps .n{display:block; font-size:clamp(44px,4.4vw,64px); line-height:1; color:var(--royal); font-weight:300; font-variation-settings:'wdth' 112; margin-bottom:28px}
.steps h3{font-size:22px; letter-spacing:-.01em; margin-bottom:8px}
.steps p{color:var(--muted); max-width:24em}

/* ---------- Loja ---------- */
.loja{background:var(--ink); color:var(--on-ink); padding:clamp(88px,10vw,140px) 0}
.loja-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start}
.loja-text{grid-column:1 / 7}
.loja .sec-title{color:#fff; max-width:11em}
.info{margin:44px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 24px}
.info div{border-top:1px solid var(--line-ink); padding:18px 0 22px}
.info dt{font-size:14px; color:var(--on-ink-muted); margin-bottom:4px}
.info dd{margin:0; color:#fff; font-size:17px; line-height:1.5}
.info a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.info a:hover{border-bottom-color:#fff}
.info div:last-child{grid-column:1 / -1}
.loja-photo{grid-column:8 / 13; margin-top:8px}
.loja-photo .frame{aspect-ratio:640/335; background:#16306F}
.loja figcaption{color:var(--on-ink-muted)}
.map{margin-top:clamp(48px,6vw,80px); height:clamp(320px,34vw,460px); background:#16306F; overflow:hidden}
.map iframe{display:block; width:100%; height:100%; border:0}

/* ---------- Rodapé ---------- */
.foot{background:var(--paper); padding:72px 0 28px}
.foot-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start}
.foot-logo{grid-column:1 / 5; width:220px}
.foot-col{font-size:15px; color:var(--muted)}
.foot-col:nth-of-type(1){grid-column:6 / 9}
.foot-col:nth-of-type(2){grid-column:9 / 12}
.foot-col:nth-of-type(3){grid-column:12 / 13; justify-self:end}
.foot a{text-decoration:none; color:var(--ink); white-space:nowrap}
.foot a:hover{text-decoration:underline; text-underline-offset:3px}
.foot-base{position:relative; margin-top:64px; padding-top:20px; display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--muted)}
.foot-base::before{content:""; position:absolute; top:0; left:var(--pad); right:var(--pad); height:1px; background:var(--line)}

/* ---------- Ícones sociais ---------- */
.social{display:flex; gap:6px}
.ico-btn{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink); border:1px solid var(--line-strong);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.ico-btn:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.foot-social{display:flex; gap:8px}

/* ---------- Botões flutuantes: Instagram e WhatsApp ---------- */
.float{position:fixed; right:20px; bottom:20px; z-index:40; display:flex; flex-direction:column; gap:12px}
.float-btn{
  position:relative; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 8px 22px rgba(11,33,96,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.float-btn.wa{background:#25D366}
.float-btn.ig{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
.float-btn:hover{transform:scale(1.07)}
.float-label{
  position:absolute; right:calc(100% + 10px); top:50%; transform:translate(6px,-50%);
  padding:7px 12px; background:var(--ink); color:#fff; font-size:14px; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.float-btn:hover .float-label,.float-btn:focus-visible .float-label{opacity:1; transform:translate(0,-50%)}
.js .float{opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease) .9s, transform .6s var(--ease) .9s}
.js.loaded .float{opacity:1; transform:none}

/* ---------- Animações (só com JS) ---------- */
.js .hero-title .line > span{transform:translateY(105%); transition:transform 1.1s var(--ease)}
.js .hero-title .line:nth-child(2) > span{transition-delay:.08s}
.js .hero-title .line:nth-child(3) > span{transition-delay:.16s}
.js.loaded .hero-title .line > span{transform:none}
.js .hero-photo .frame{clip-path:inset(100% 0 0 0); transition:clip-path 1.3s var(--ease) .15s}
.js.loaded .hero-photo .frame{clip-path:inset(0 0 0 0)}
.js .hero-photo figcaption{opacity:0; transition:opacity .8s var(--ease) .9s}
.js.loaded .hero-photo figcaption{opacity:1}

.js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js [data-reveal].in{opacity:1; transform:none}
.js figure[data-reveal]{transform:none}
.js figure[data-reveal] .frame{clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease)}
.js figure[data-reveal].in .frame{clip-path:inset(0 0 0 0)}
.js .svc li[data-reveal]{transform:translateY(10px)}
.js .svc li[data-reveal].in{transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important; transition-delay:0s!important; animation:none!important}
  .js .manifest-text .w{opacity:1}
  .hero-photo img{transform:none}
}

/* ---------- Responsivo ---------- */
@media (max-width:1080px){
  .menu{gap:20px}
  .menu-tel{display:none}
}
@media (max-width:900px){
  :root{--top-h:64px}
  .top-in{gap:12px}
  .brand img{width:124px}
  .social{margin-left:auto}
  .burger{display:block}
  .top-cta{display:none}
  .float{right:14px; bottom:14px; gap:10px}
  .float-btn{width:52px; height:52px}
  .menu{
    position:fixed; inset:var(--top-h) 0 auto 0; height:calc(100svh - var(--top-h));
    flex-direction:column; align-items:flex-start; gap:0; margin:0; padding:16px var(--pad) 40px;
    background:var(--bg); border-top:1px solid var(--line);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s .3s;
  }
  .menu.open{opacity:1; visibility:visible; transition:opacity .3s var(--ease)}
  .menu a{font-size:28px; font-weight:560; color:var(--ink); padding:14px 0; width:100%; border-bottom:1px solid var(--line)}
  .menu a::after{display:none}
  .menu-tel{display:block}
  .top.menu-open{transform:none; background:var(--bg)}

  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-text,.hero-photo{grid-column:1 / -1}
  .hero-photo .frame{aspect-ratio:4/3}
  .facts{grid-template-columns:1fr 1fr}
  .facts li{padding:20px 16px 22px}
  .facts li:nth-child(odd){border-left:0; padding-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}

  .sec-head{grid-template-columns:1fr; gap:14px}
  .sec-title,.sec-note{grid-column:1 / -1}

  .svc a{grid-template-columns:40px minmax(0,1fr) 24px; gap:6px 12px; padding:22px 0}
  .svc .n{grid-row:1}
  .svc .name{grid-column:2}
  .svc .desc{grid-column:2; grid-row:2; font-size:15px}
  .svc .go{grid-column:3; grid-row:1}
  .svc a:hover .name{transform:none}

  .ba-pair{grid-template-columns:1fr; gap:14px}
  .gallery{grid-template-columns:1fr 1fr; gap:20px 14px}
  .g-a{grid-column:1 / -1; --h:58vw}
  .g-b,.g-c{grid-column:span 1; --h:44vw; margin-top:0}
  .g-d{grid-column:1 / -1; --h:52vw; margin-top:0}
  .g-more{grid-column:1 / -1; height:auto; margin-top:0; flex-direction:row; align-items:center; gap:16px}

  .steps{grid-template-columns:1fr; gap:36px}
  .steps .n{margin-bottom:16px}

  .loja-grid{grid-template-columns:1fr; gap:48px}
  .loja-text,.loja-photo{grid-column:1 / -1}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px 20px}
  .foot-logo{grid-column:1 / -1; width:200px}
  .foot-col,.foot-col:nth-of-type(n){grid-column:span 1; justify-self:start}
  .foot{padding-bottom:110px}
  .loja{padding-bottom:0}
  .map{height:340px; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1)}
}
@media (max-width:560px){
  body{font-size:16px}
  .actions .btn{width:100%}
  .info{grid-template-columns:1fr 1fr; gap:0 16px; margin-top:32px}
  .info div:nth-child(1),.info div:nth-child(2){grid-column:1 / -1}
  .info div{padding:14px 0 16px}
  .foot-base{flex-direction:column}
}