/* =========================================================
   ALFA Climatização — LP
   ÍNDICE
   1. Tokens  2. Base  3. Botões  4. Header  5. Abertura
   6. Hero  7. Serviços realizados  8. Como funciona  9. Região
   10. CTA final  11. Rodapé  12. WhatsApp flutuante
   13. Animações de entrada  14. Responsivo
   ========================================================= */

/* 1. Tokens */
:root{
  --navy-900:#021048;
  --navy-800:#0B1F5E;
  --navy-700:#12307F;
  --blue-500:#5CB6E6;
  --blue-200:#BDE0FA;
  --blue-100:#E3F2FD;
  --bg:#F4F9FF;
  --ink:#0B1F5E;
  --muted:#46557F;
  --font-display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --font-body:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --header-h:72px;
  --radius:22px;
  --gutter:20px;
  --max:1120px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --intro-delay:0s;
  --tilt:2deg;
}
.has-intro{--intro-delay:2.2s}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Lenis (scroll com inércia) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:.02em;line-height:1}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
section[id]{scroll-margin-top:calc(var(--header-h) + 8px)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.ico{width:1.25em;height:1.25em;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--navy-800);padding:8px 12px;border-radius:8px;z-index:400}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px}

/* 3. Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:600 1rem/1 var(--font-body);text-decoration:none;border-radius:999px;padding:.95em 1.5em;min-height:48px;transition:transform .2s,background-color .2s}
.btn--light{background:var(--blue-200);color:var(--navy-800);box-shadow:0 10px 30px rgba(92,182,230,.35)}
.btn--light:hover{background:#d3ebfd;transform:translateY(-2px)}
.btn--lg{font-size:1.05rem;padding:1.05em 1.9em}

/* 4. Header */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);transition:background-color .25s,box-shadow .25s}
.nav.scrolled{background:rgba(11,31,94,.96);box-shadow:0 6px 24px rgba(2,16,72,.35)}
.nav__inner{display:flex;align-items:center;gap:24px;height:100%}
.nav__logo img{height:44px;width:auto}
.nav__links{display:flex;gap:28px;margin-left:auto;margin-right:8px}
.nav__links a{color:#fff;text-decoration:none;font-weight:500;font-size:.95rem;opacity:.92}
.nav__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.nav__cta{padding:.8em 1.2em;min-height:44px;font-size:.92rem}
.nav__burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.nav__burger span{display:block;height:2px;background:#fff;margin:6px 0;transition:transform .25s,opacity .25s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* 5. Abertura (aparece uma vez por sessão; sem JS ou com movimento reduzido nem entra) */
.intro{display:none}
.has-intro .intro{
  display:grid;position:fixed;inset:0;z-index:300;place-items:center;background:var(--navy-900);
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  animation:introOut .85s cubic-bezier(.76,0,.24,1) 1.95s forwards}
.intro__inner{display:grid;justify-items:center;gap:26px;width:min(74vw,330px)}
.intro__logo{width:100%;height:auto;opacity:0;transform:scale(.88);animation:introLogo 1s var(--ease) .15s forwards}
.intro__bar{position:relative;width:100%;height:2px;background:rgba(189,224,250,.18);overflow:hidden}
.intro__bar::after{content:"";position:absolute;inset:0;background:var(--blue-500);transform:scaleX(0);transform-origin:left;animation:introBar 1.5s cubic-bezier(.65,0,.35,1) .3s forwards}
@keyframes introLogo{to{opacity:1;transform:none}}
@keyframes introBar{to{transform:scaleX(1)}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}

/* 6. Hero */
.hero{position:relative;min-height:min(100svh,780px);display:flex;align-items:center;padding:calc(var(--header-h) + 32px) 0 56px;color:#fff;overflow:hidden;background:var(--navy-800)}
.hero__bg{position:absolute;inset:0;background:
  radial-gradient(900px 520px at 85% 20%,rgba(92,182,230,.38),transparent 60%),
  radial-gradient(700px 500px at 0% 100%,rgba(18,48,127,.9),transparent 60%),
  linear-gradient(135deg,#0B1F5E 0%,#12307F 55%,#0B1F5E 100%)}
.hero__bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000 30%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
.hero__mark{position:absolute;right:-6%;top:50%;width:min(62vw,560px);height:auto;transform:translateY(-46%);opacity:.09;pointer-events:none;animation:slowSpin 90s linear infinite}
@keyframes slowSpin{to{transform:translateY(-46%) rotate(360deg)}}
.hero__inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero__photo{position:relative;margin:0;justify-self:end;width:min(100%,460px);transform:rotate(var(--tilt))}
.hero__photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 40%;border-radius:28px;border:6px solid rgba(189,224,250,.9);box-shadow:0 30px 60px rgba(2,16,72,.55)}
.hero h1{font-size:clamp(3.4rem,10.5vw,7.4rem);max-width:11ch}
.hero h1 span{color:var(--blue-500)}
.hero__lead{max-width:34rem;margin-top:22px;font-size:clamp(1rem,2.4vw,1.2rem);color:#e6f1fb}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:32px}
.hero__phone small{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-200)}
.hero__phone a{font-family:var(--font-display);font-size:2rem;letter-spacing:.04em;text-decoration:none}

/* 7. Serviços realizados */
.sec{padding:84px 0}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-700);margin-bottom:12px}
.eyebrow--light{color:var(--blue-200)}
.sec h2{font-size:clamp(2.2rem,5.5vw,3.6rem)}
.sec--soft{background:var(--blue-100);overflow:hidden}
.showcase__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.showcase__lead{margin-top:14px;max-width:34rem;color:var(--muted)}
.showcase__ctrl{display:flex;gap:10px;flex:none}
.arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--navy-800);background:transparent;color:var(--navy-800);cursor:pointer;transition:background-color .2s,color .2s}
.arrow:hover{background:var(--navy-800);color:#fff}
.arrow svg{width:20px;height:20px}
.rail{margin-top:36px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;-webkit-user-select:none}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing}
.rail__track{display:flex;gap:18px;width:max-content;padding:4px var(--gutter)}
.slide{position:relative;flex:none;width:clamp(250px,24vw,340px);aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--navy-800);box-shadow:0 14px 34px rgba(11,31,94,.16)}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;transition:transform .6s var(--ease)}
.slide:hover img{transform:scale(1.05)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,16,72,0) 38%,rgba(2,16,72,.92) 100%)}
.slide__txt{position:absolute;inset:auto 0 0 0;z-index:1;padding:24px 22px;color:#fff}
.slide__n{display:block;font:400 1.05rem/1 var(--font-display);letter-spacing:.14em;color:var(--blue-200)}
.slide h3{margin:6px 0 8px;font-size:2rem}
.slide p{font-size:.88rem;line-height:1.45;color:#e6f1fb}
.note{margin-top:30px;font-size:.95rem;color:var(--muted)}
.note strong{color:var(--navy-800)}

/* 8. Como funciona */
.sec--dark{background:var(--navy-800);color:#fff;background-image:radial-gradient(700px 400px at 100% 0,rgba(92,182,230,.2),transparent 60%)}
.how{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.how__text p{margin:18px 0 28px;color:#dbe9f7;max-width:30rem}
.steps{display:grid;gap:14px}
.steps li{display:flex;gap:18px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(189,224,250,.2);border-radius:var(--radius);padding:22px}
.steps__n{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--blue-200);color:var(--navy-800);font:400 1.6rem/1 var(--font-display)}
.steps h3{font-size:1.6rem;margin-bottom:4px}
.steps p{font-size:.93rem;color:#dbe9f7}

/* 9. Região */
.region{display:grid;grid-template-columns:1fr 1fr;border-radius:28px;overflow:hidden;background:var(--blue-200)}
.region__text{padding:48px 44px}
.region__text p{margin-top:14px;color:var(--navy-700);max-width:30rem}
.region__list{margin-top:22px;display:grid;gap:12px}
.region__list li{display:flex;align-items:center;gap:12px;font-weight:600}
.region__list .ico{padding:7px;box-sizing:content-box;width:1.1em;height:1.1em;border-radius:50%;background:var(--navy-800);color:#fff}
.hours{margin:22px 0 0;display:grid;gap:8px;max-width:22rem}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.55);font-size:.92rem}
.hours dt{font-weight:600}
.hours dd{margin:0;color:var(--navy-700)}
.region__brand{display:grid;place-items:center;padding:40px;background:linear-gradient(135deg,var(--navy-800),var(--navy-700))}
.region__brand img{width:min(320px,80%)}

/* 10. CTA final */
.cta{background:var(--navy-900);color:#fff;text-align:center;padding:84px 0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px}
.cta h2{font-size:clamp(2.6rem,7vw,4.6rem)}
.cta__inner{display:flex;flex-direction:column;align-items:center}
.cta__inner>p{margin-top:16px;max-width:34rem;color:#dbe9f7}
.cta__phone{display:block;margin:36px 0 28px;font:400 clamp(2.8rem,9vw,4.6rem)/1 var(--font-display);letter-spacing:.05em;color:var(--blue-200);text-decoration:none}
.cta__inner>.btn{margin:0}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:560px;margin-top:56px;padding-top:32px;border-top:1px solid rgba(189,224,250,.18)}
.social a{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.1em;border:1px solid rgba(189,224,250,.35);border-radius:999px;color:#fff;text-decoration:none;font-size:.9rem}
.social a:hover{background:rgba(255,255,255,.08)}

/* 11. Rodapé */
.foot{background:var(--bg);padding:36px 0 96px;font-size:.88rem;color:var(--muted)}
.foot__inner{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.foot img{height:56px;width:auto;filter:brightness(0) saturate(100%) invert(11%) sepia(60%) saturate(3000%) hue-rotate(222deg)}
.foot a{text-decoration:none;font-weight:600;color:var(--navy-800)}
.foot__legal{margin-top:4px;font-size:.8rem;font-style:normal}
.foot__credit{max-width:46rem;font-size:.74rem;opacity:.85}
.foot__credit a{font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* 12. WhatsApp flutuante */
.fab{position:fixed;right:16px;bottom:16px;z-index:60;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#128C4A;color:#fff;box-shadow:0 10px 26px rgba(2,16,72,.4);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab svg{width:30px;height:30px}

/* 13. Animações de entrada (o atraso espera a cortina da abertura subir) */
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes photoIn{
  from{opacity:0;clip-path:inset(0 0 100% 0 round 28px);transform:rotate(var(--tilt)) scale(1.08)}
  to{opacity:1;clip-path:inset(0 0 0 0 round 28px);transform:rotate(var(--tilt))}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.nav{animation:fadeIn .8s ease both;animation-delay:var(--intro-delay)}
.hero__copy>*{animation:rise .95s var(--ease) both;animation-delay:calc(var(--intro-delay) + var(--i,0) * .13s)}
.hero__copy>:nth-child(2){--i:1}
.hero__copy>:nth-child(3){--i:2}
.hero__photo{animation:photoIn 1.15s var(--ease) both;animation-delay:calc(var(--intro-delay) + .25s)}

/* 14. Responsivo */
@media (max-width:1023px){
  :root{--tilt:0deg}
  .hero__inner{grid-template-columns:1fr}
  .hero__photo{justify-self:start;width:min(100%,420px);margin-top:8px}
  .how{grid-template-columns:1fr;gap:36px}
}
@media (max-width:820px){
  .nav__burger{display:block;margin-left:auto}
  .nav__cta{display:none}
  .nav__links{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;gap:0;margin:0;background:var(--navy-900);padding:8px var(--gutter) 20px;transform:translateY(-120%);visibility:hidden;transition:transform .3s,visibility .3s}
  .nav__links.open{transform:none;visibility:visible}
  .nav__links a{padding:16px 0;border-bottom:1px solid rgba(189,224,250,.15);font-size:1.05rem}
  .nav.menu-open{background:var(--navy-900)}
  .region{grid-template-columns:1fr}
  .region__text{padding:36px 26px}
  .region__brand{padding:30px}
  .foot__inner{grid-template-columns:1fr;text-align:left}
}
@media (max-width:560px){
  :root{--header-h:64px}
  .sec,.cta{padding:60px 0}
  .showcase__ctrl{display:none}
  .slide{width:min(74vw,300px)}
  .hero__mark{width:96vw;right:-30%;opacity:.07}
  .hero__actions .btn{width:100%}
  .steps li{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}