@font-face{font-family:"Outfit";src:url("fonts/outfit.woff2") format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla.woff2") format("woff2");font-weight:400 700;font-display:swap}
/* AE Climatização: azul-petróleo profundo + coral (destaques e botão). Outfit nos títulos, Karla no texto.
   Rodada 2: foto do técnico na primeira dobra com camada azul-petróleo, foto no topo de cada cartão de serviço. */
:root{
  --navy:#0B3B45; --navy-2:#145563; --navy-3:#0E6170; --ov:11,59,69;
  --acento:#FF7A59; --acento-claro:#FFA88F; --destaque:#FFA88F; --estrela:#FFB547;
  --frost:#EAF4F4; --paper:#F7FAFA; --ink:#0C2328; --muted:#4D6468; --line:#D3E4E5;
  --btn:#FF8F73; --btn-hover:#FFA48D; --btn-ink:#2A0E06; --btn-sombra:rgba(255,122,89,.75);
  --ic-bg:#FF8F73; --ic-ink:#2A0E06; --link:#0E6170;
  --foco:#FF7A59;
  --top-bg:#072B33; --foot-bg:#052127; --onde-bg:#0B3B45;
  --ph-bg:repeating-linear-gradient(135deg,rgba(11,59,69,.06) 0 2px,transparent 2px 12px),linear-gradient(160deg,#E3F1F1,#C9E3E4);
  --ph-borda:rgba(11,59,69,.35);
  --ph-antes:repeating-linear-gradient(90deg,rgba(60,40,15,.14) 0 3px,transparent 3px 11px),linear-gradient(160deg,#E2CCA8,#C9AD80);
  --ph-antes-borda:rgba(90,65,30,.45);
  --faixa-bg:#052127; --faixa-ink:#FFD2C4;
  --aviso-bg:#FFE3DA; --aviso-ink:#6B2412;
  --f-display:"Outfit",system-ui,sans-serif; --f-body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ls-display:-.02em;
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem); --step-1:clamp(1.15rem,1.08rem + .4vw,1.35rem);
  --step-2:clamp(1.4rem,1.25rem + .8vw,1.8rem); --step-3:clamp(1.9rem,1.5rem + 2vw,2.8rem); --step-4:clamp(2.4rem,1.5rem + 3.6vw,4.2rem);
  --r:14px; --r-btn:999px; --wrap:1180px;
  --hero-pos:72% 35%;
}

/* ===== Base (rodada 2): linha da Dedetibem. Primeira dobra com foto e camada escura, faixa de confiança sobreposta,
   cartões de serviço com ícone, seção com fotos, antes e depois, como pedir, horário e endereço, rodapé escuro com colunas.
   As cores e fontes vêm das variáveis acima; a identidade de cada site fica no fim do arquivo. ===== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:120px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.08;letter-spacing:var(--ls-display);margin:0;text-wrap:balance}
p{margin:0}
img,svg{display:block}
img{max-width:100%;height:auto}
.sprite{display:none}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:6px}

.wrap{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:clamp(56px,7vw,92px)}
.section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(24px,3.5vw,40px)}
.section-head h2{font-size:var(--step-3);color:var(--navy)}
.aviso{font-size:.84rem;font-weight:700;color:var(--aviso-ink);background:var(--aviso-bg);padding:5px 12px;border-radius:999px}
.ilustrativa-nota{margin-top:14px;font-size:.84rem;color:var(--muted)}

.pular{position:absolute;left:16px;top:-80px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:700}
.pular:focus{top:8px}

/* Faixa de protótipo (sai na versão final) */
.faixa-prototipo{position:sticky;top:0;z-index:60;background:var(--faixa-bg);color:var(--faixa-ink);font-size:.82rem;font-weight:600;line-height:1.35;text-align:center;padding:8px 16px}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:700 1rem/1.15 var(--f-body);min-height:52px;padding:14px 24px;border-radius:var(--r-btn);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-wa{background:var(--btn);color:var(--btn-ink);box-shadow:0 8px 20px -12px var(--btn-sombra)}
.btn-wa:hover{background:var(--btn-hover)}

/* Topo */
.top{background:var(--top-bg);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:none}
.logo-mark{width:42px;height:42px;flex:none}
.logo-text{display:grid;line-height:1}
.logo-text b{font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:var(--ls-display)}
.logo-text small{font-size:.78rem;font-weight:600;color:var(--acento-claro);margin-top:4px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 12px;border-radius:8px;color:rgba(255,255,255,.84)}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.top .btn{min-height:44px;padding:10px 18px;font-size:.94rem;box-shadow:none}

/* Primeira dobra: foto com camada escura da marca por cima */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:580px;display:flex;align-items:center;padding:72px 0 104px}
.hero > .wrap{width:100%}
.hero-foto{position:absolute;inset:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,70% 40%)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--ov),.96) 0%,rgba(var(--ov),.86) 40%,rgba(var(--ov),.35) 76%,rgba(var(--ov),.15) 100%)}
.hero-copy{position:relative;z-index:2;max-width:40rem}
.hero-local{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.82);margin-bottom:16px}
.hero-local svg{width:18px;height:18px;color:var(--destaque)}
.hero h1{font-size:var(--step-4);color:#fff}
.hero h1 em{font-style:normal;color:var(--destaque)}
.nw{white-space:nowrap}
.hero-lead{margin-top:20px;font-size:var(--step-1);color:rgba(255,255,255,.86);max-width:34rem;line-height:1.5}
.hero-ctas{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.hero-nota{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:#fff;font-weight:500}
.hero-nota b{font-weight:800}
.hero-nota:hover span:last-child{text-decoration:underline}
.estrelas{display:flex;gap:2px;color:var(--estrela)}
.estrelas svg{width:17px;height:17px}
.ilustrativa{position:absolute;right:16px;top:12px;z-index:2;font-size:.75rem;color:rgba(255,255,255,.75)}

/* Faixa de confiança sobreposta ao fim da primeira dobra */
.trust{position:relative;z-index:3;margin-top:-48px}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -22px rgba(var(--ov),.5)}
.trust li{display:flex;gap:14px;align-items:center;padding:22px 24px;font-weight:700;line-height:1.3;min-width:0}
.trust li + li{border-left:1px solid var(--line)}
.trust-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--navy);color:var(--destaque)}
.trust-ic svg{width:22px;height:22px}
.trust small{display:block;font-weight:500;color:var(--muted);font-size:.86rem;margin-top:2px}

/* Serviços */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .2s,box-shadow .2s,transform .2s}
.svc:hover{border-color:var(--navy-3);box-shadow:0 16px 30px -20px rgba(var(--ov),.5);transform:translateY(-2px)}
.svc-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ic-bg);color:var(--ic-ink);margin-bottom:6px}
.svc-ico svg{width:28px;height:28px}
.svc h3{font-size:1.25rem;color:var(--navy)}
.svc > p{color:var(--muted);font-size:.95rem}
.svc .more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:.95rem;color:var(--link);text-decoration:none}
.svc .more svg{width:18px;height:18px;flex:none;transition:transform .2s}
.svc .more:hover svg{transform:translateX(4px)}
.svc .more .some-no-celular{display:none}

/* Espaço reservado de foto (só onde a foto precisa ser do cliente) */
.ph{position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-radius:var(--r);background:var(--ph-bg);border:1.5px dashed var(--ph-borda);color:var(--navy-2)}
.ph-in{display:grid;gap:8px;justify-items:center;padding:18px;max-width:22rem}
.ph svg{width:34px;height:34px;opacity:.75}
.ph b{font-size:.95rem;font-weight:700}
.ph span{font-size:.86rem;color:var(--muted);line-height:1.35}

/* Antes e depois da limpeza: par de espaços de foto */
.hyg{background:var(--frost)}
.hyg-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center}
.hyg-grid > *{min-width:0}
.ad{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ad figure{margin:0;position:relative}
.ad .ph{aspect-ratio:4/5}
.ad .antes .ph{background:var(--ph-antes);border-color:var(--ph-antes-borda);color:#4A3A22}
.ad .antes .ph span{color:#5E4C33}
.ad figcaption{position:absolute;top:12px;left:12px;font-size:.84rem;font-weight:700;padding:4px 12px;border-radius:8px;background:var(--navy);color:#fff}
.ad .antes figcaption{background:#3D2F1C}
.hyg-copy{display:grid;gap:18px;justify-items:start}
.hyg-copy h2{font-size:var(--step-3);color:var(--navy)}
.hyg-copy > p{color:var(--muted);font-size:var(--step-1);line-height:1.5}

/* Como pedir orçamento */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;min-width:0}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--destaque);font-family:var(--f-display);font-weight:800;font-size:1.125rem;margin-bottom:16px}
.steps h3{font-size:1.25rem;color:var(--navy)}
.steps p{margin-top:6px;color:var(--muted)}
.steps-cta{margin-top:32px}

/* Horário e endereço */
.onde{background:var(--onde-bg);color:#fff}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.q-grid > *{min-width:0}
.q-grid h2{font-size:var(--step-3);margin:0 0 6px}
.contact-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:center}
.contact-list .ic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--destaque);flex:none}
.contact-list .ic svg{width:22px;height:22px}
.contact-list small{display:block;color:rgba(255,255,255,.7);font-size:.86rem}
.contact-list b{font-size:1.05rem;font-weight:700}
.contact-list address{font-style:normal}
.contact-list a{text-underline-offset:3px}
.horario{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(22px,3.5vw,34px)}
.horario h3{font-size:var(--step-2);color:var(--navy)}
.horario dl{margin:14px 0 0}
.horario dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.horario dl div:last-child{border-bottom:0}
.horario dt{font-weight:600}
.horario dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy)}
.horario .btn{width:100%;margin-top:18px}

/* Rodapé escuro com colunas */
.foot{background:var(--foot-bg);color:rgba(255,255,255,.76);padding:56px 0 calc(48px + env(safe-area-inset-bottom,0px));font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:32px}
.foot-sub{margin-top:12px}
.foot-titulo{font-weight:800;color:#fff;margin-bottom:10px;font-family:var(--f-display)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a:not(.logo){color:#fff;font-weight:700;text-underline-offset:3px}

/* No computador, o topo acompanha a rolagem logo abaixo da faixa */
@media (min-width:761px){
  .faixa-prototipo{height:36px;padding:0 16px;display:flex;align-items:center;justify-content:center}
  .top{position:sticky;top:36px;z-index:55}
}
@media (max-width:1080px){
  .services{grid-template-columns:1fr 1fr}
  .nav a{padding:10px 8px;font-size:.9rem}
}
@media (max-width:960px){
  .nav{display:none}
  .top .btn{margin-left:auto}
}
@media (max-width:900px){
  .hyg-grid,.q-grid{grid-template-columns:1fr}
}

.zap-fixo{display:none}
.so-celular{display:none}

/* ---------- Celular ---------- */
@media (max-width:760px){
  html{scroll-padding-top:16px}
  .faixa-prototipo{font-size:.75rem;padding:6px 12px}
  .top .wrap{height:64px;gap:12px}
  .logo-mark{width:36px;height:36px}
  .some-no-celular{display:none}
  .so-celular{display:inline}
  .logo-text b{font-size:1.05rem}
  .logo-text small{font-size:.72rem}
  .top .btn{padding:8px 14px;font-size:.88rem;white-space:nowrap;min-height:42px}
  .top .btn svg{display:none}

  .hero{min-height:0;padding:36px 0 80px}
  .hero::after{background:linear-gradient(180deg,rgba(var(--ov),.6) 0%,rgba(var(--ov),.86) 50%,rgba(var(--ov),.97) 100%)}
  .hero h1{font-size:2.15rem}
  .hero-local{font-size:.875rem;margin-bottom:12px}
  .hero-lead{font-size:1.05rem;margin-top:14px}
  .hero-ctas{margin-top:22px;gap:8px}
  .hero-ctas .btn{width:100%}
  .hero-nota{width:100%;justify-content:center}

  .trust{margin-top:-40px}
  .trust ul{grid-template-columns:1fr}
  .trust li{padding:14px 18px}
  .trust li + li{border-left:0;border-top:1px solid var(--line)}

  .band{padding-block:52px}
  .section-head{margin-bottom:22px}
  .services{gap:10px}
  .svc{padding:16px 14px;gap:6px}
  .svc-ico{width:42px;height:42px;margin-bottom:2px}
  .svc-ico svg{width:22px;height:22px}
  .svc h3{font-size:1.0625rem}
  .svc > p{font-size:.875rem;line-height:1.45}
  .svc .more{font-size:.84rem;gap:4px;white-space:nowrap}
  .svc .more svg{width:15px;height:15px}

  .ad{gap:10px}
  .ad .ph-in{padding:10px}
  .ad .ph span{font-size:.78rem}
  .ad figcaption{top:10px;left:10px;font-size:.78rem}
  .hyg-copy{gap:14px}
  .hyg-copy .btn,.steps-cta .btn{width:100%}

  .steps{grid-template-columns:1fr;gap:12px}
  .steps li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px}
  .steps li::before{grid-row:span 2;margin:0}
  .steps-cta{margin-top:24px}

  .foot{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .foot-grid{grid-template-columns:1fr;gap:24px}

  .zap-fixo{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;z-index:50;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:54px;border-radius:var(--r-btn);background:var(--btn);color:var(--btn-ink);font-weight:700;text-decoration:none;box-shadow:0 14px 28px -10px rgba(0,0,0,.5);visibility:hidden;opacity:0;transform:translateY(140%);transition:transform .25s,opacity .25s,visibility 0s .25s}
  .zap-fixo svg{width:22px;height:22px}
  .zap-fixo.visivel{visibility:visible;opacity:1;transform:none;transition:transform .25s,opacity .25s}
}
@media (max-width:330px){.services{grid-template-columns:1fr}}

/* Página 404 */
.erro{min-height:100vh;display:grid;align-items:center;background:var(--paper)}
.erro h1{font-size:var(--step-3);color:var(--navy)}
.erro p{margin-top:12px;color:var(--muted)}
.erro .erro-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.erro .link-forte{font-weight:700;color:var(--navy-3)}

/* Animações sutis, só com CSS. Navegador que não entende mostra tudo parado;
   quem pediu "menos movimento" no aparelho não vê animação nenhuma. */
@keyframes chegar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes surgir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-copy{animation:chegar .6s ease-out both}
  @supports (animation-timeline:view()){
    .section-head,.svc,.galeria > *,.ad figure,.hyg-copy,.steps li,.q-grid > *{animation:surgir linear both;animation-timeline:view();animation-range:entry 5% entry 40%}
  }
}
@media (prefers-reduced-motion:reduce){.zap-fixo,.zap-fixo.visivel,.btn,.svc,.svc .more svg{transition:none}}

/* Identidade AE: foto no topo de cada cartão de serviço, com o ícone coral encostado na borda da foto */
.svc{padding:0 0 18px;overflow:hidden}
.svc-foto{width:100%;aspect-ratio:10/7;object-fit:cover}
.svc-ico{margin:-30px 0 4px 22px;position:relative;border:4px solid #fff;box-sizing:content-box}
.svc h3,.svc > p,.svc .more{margin-left:22px;margin-right:22px}
.hero h1{max-width:15ch}
@media (max-width:760px){
  .svc{padding:0 0 10px}
  .svc-ico{margin:-24px 0 2px 12px;border-width:3px}
  .svc h3,.svc > p,.svc .more{margin-left:14px;margin-right:12px}
}