/*
Theme Name: Top Clean Brasil
Theme URI: https://topcleanbrasil.com/
Author: Top Clean Brasil
Description: Tema sob medida para a Top Clean Brasil — limpeza e higienização de estofados em Belém e Região.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: topclean
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Marca */
  --navy:        #0C2438;   /* barra principal, tipografia */
  --navy-soft:   #14304a;
  --teal:        #438A8D;   /* teal da marca — acentos e grafismos */
  --teal-bar:    #1C8C8E;   /* teal das faixas e botões (4.05:1 com branco) */
  --teal-ink:    #2A6A6E;   /* teal para texto sobre fundo claro (6.2:1) */
  --teal-deep:   #2E6E72;   /* estado :hover de superfícies teal */
  --teal-vivo:   #0D8A92;   /* teal vivo do kicker */
  --teal-light:  #79C4C2;   /* teal para texto sobre o azul-marinho */
  --teal-light:  #5FADAF;   /* teal sobre fundo escuro (5.5:1) */
  --wa:          #128C4E;   /* verde do botão de WhatsApp */
  --wa-dark:     #0E7541;

  /* Neutros */
  --bg:          #F5F8F8;
  --surface:     #FFFFFF;
  --ink:         #0C2438;
  --ink-2:       #41556A;
  --line:        #DCE6E7;
  --on-dark:     #FFFFFF;
  --on-dark-2:   rgba(255,255,255,.78);

  /* Métricas do cabeçalho */
  --utility-h: 40px;
  --bar-h: 78px;
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Movimento */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --fast: .18s;
  --slow: .5s;

  /* Camadas */
  --z-header: 100;
  --z-drawer-veil: 110;
  --z-drawer: 120;
}
@media (max-width: 860px){
  :root{ --utility-h: 38px; --bar-h: 66px; }
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--bar-h) + 20px) }
body{
  margin:0;
  padding-top: calc(var(--utility-h) + var(--bar-h));
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; text-wrap:balance; letter-spacing:-.025em; font-weight:800 }
p{ margin:0; text-wrap:pretty }
:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}
.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  background:var(--surface); color:var(--ink);
  padding:10px 16px; border-radius:8px; font-weight:700;
  transform:translateY(-160%);
}
.skip:focus{ transform:none }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:var(--z-header);
  transition:transform var(--slow) var(--ease-out-expo);
  will-change:transform;
}
/* Ao rolar, a faixa de contato sobe e some; a barra principal fica no topo. */
.site-header.is-condensed{
  transform:translate3d(0, calc(var(--utility-h) * -1), 0);
}

/* --- Faixa de contato --- */
.utility{
  height:var(--utility-h);
  background:var(--teal-bar);
  color:var(--on-dark);
  font-size:13.5px;
  font-weight:600;
}
.utility__inner{
  height:100%;
  display:flex; align-items:center; gap:28px;
}
.utility__item{
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  transition:color var(--fast) ease;
}
.utility__item svg{ flex:none; opacity:.85 }
a.utility__item:hover{ color:#E6F4F3 }
.utility__hours{ margin-left:auto; color:rgba(255,255,255,.88); font-weight:500 }

/* --- Tarja deslizante (só no celular) --- */
.tarja{ display:none }
@keyframes desliza{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
@media (max-width: 720px){
  .utility__inner{ display:none }
  .tarja{
    display:flex; align-items:center;
    height:100%; overflow:hidden;
  }
  .tarja__trilho{
    display:flex; flex:none;
    animation:desliza 20s linear infinite;
    will-change:transform;
  }
  .tarja__grupo{
    display:flex; align-items:center; gap:20px;
    padding-right:20px;
    white-space:nowrap;
    font-size:12.5px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase;
  }
  .tarja__grupo > span{ display:inline-flex; align-items:center; gap:7px }
  .tarja__grupo svg{ opacity:.85 }
  /* a tarja não sobe junto com o cabeçalho ao rolar */
  .site-header.is-condensed{ transform:none }
}
@media (prefers-reduced-motion: reduce){
  .tarja__trilho{ animation:none }
}

/* --- Barra principal --- */
.bar{
  height:var(--bar-h);
  background:var(--navy);
  transition:box-shadow var(--slow) var(--ease-out-expo);
}
.site-header.is-condensed .bar{
  box-shadow:0 8px 28px rgba(12,36,56,.22), inset 0 -1px 0 rgba(255,255,255,.12);
}
.bar__inner{
  height:100%;
  display:flex; align-items:center; gap:clamp(20px, 4vw, 44px);
}
.logo{ flex:none; display:block }
.logo img{
  height:clamp(38px, 5.4vw, 50px);
  width:auto;
}

/* --- Navegação --- */
.nav{ margin-left:auto }
.nav ul{
  display:flex; align-items:center; gap:clamp(18px, 2.4vw, 34px);
  margin:0; padding:0; list-style:none;
}
.nav a{
  position:relative;
  display:block;
  padding:6px 0;
  color:var(--on-dark-2);
  font-size:15px; font-weight:600;
  transition:color var(--fast) ease;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--teal);
  transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease-out-expo);
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--on-dark) }
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1) }

/* --- Botões --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 22px;
  border:0; border-radius:10px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.01em;
  cursor:pointer;
  transition:background-color var(--fast) ease, color var(--fast) ease, transform var(--fast) var(--ease-out-expo);
}
.btn:active{ transform:translateY(1px) }
.btn--primary{ background:var(--teal-bar); color:var(--on-dark) }
.btn--primary:hover{ background:var(--teal-deep) }
.btn--ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover{ background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--teal) }
.bar .btn{ flex:none }

/* --- Botão do menu (mobile) --- */
.menu-toggle{
  display:none;
  width:46px; height:46px; margin-right:-8px;
  align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:10px;
  color:var(--on-dark); cursor:pointer;
}
.menu-toggle:hover{ background:rgba(255,255,255,.08) }

/* ============================================================
   MENU MOBILE
   ============================================================ */
.veil{
  position:fixed; inset:0; z-index:var(--z-drawer-veil);
  background:rgba(12,36,56,.55);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.drawer{
  position:fixed; inset:0 0 0 auto; z-index:var(--z-drawer);
  width:min(400px, 88vw);
  background:var(--navy);
  padding:22px var(--gutter) 32px;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .42s var(--ease-out-expo);
  overflow-y:auto;
}
body.menu-open .veil{ opacity:1; visibility:visible }
body.menu-open .drawer{ transform:none }
body.menu-open{ overflow:hidden }
.drawer__top{ display:flex; justify-content:flex-end; margin-bottom:18px }
.drawer__close{
  width:46px; height:46px; margin-right:-10px;
  display:grid; place-items:center;
  background:transparent; border:0; border-radius:10px;
  color:var(--on-dark); cursor:pointer;
}
.drawer__close:hover{ background:rgba(255,255,255,.08) }
.drawer nav ul{ list-style:none; margin:0; padding:0 }
.drawer nav a{
  display:block;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  color:var(--on-dark);
  font-size:19px; font-weight:700; letter-spacing:-.02em;
}
.drawer nav a:hover{ color:var(--teal) }
.drawer .btn{ width:100%; margin-top:26px; height:52px }
.drawer__contact{
  margin-top:auto; padding-top:28px;
  display:grid; gap:12px;
  color:var(--on-dark-2); font-size:14.5px; font-weight:500;
}
.drawer__contact a{ display:flex; gap:10px; align-items:flex-start }
.drawer__contact svg{ flex:none; margin-top:3px; color:var(--teal) }

@media (max-width: 980px){
  .nav, .bar .btn{ display:none }
  .menu-toggle{ display:flex; margin-left:auto }
  .utility__hours{ display:none }
}
@media (max-width: 620px){
  .utility__address{ display:none }
  .utility__inner{ justify-content:center }
}

/* ============================================================
   HERO — primeira dobra
   Para trocar a foto de fundo, basta apontar --hero-photo
   para o arquivo da imagem em .hero (linha do background-image).
   ============================================================ */
.hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(540px, 82vh, 780px);
  display:grid; place-items:center;
  padding:clamp(64px, 9vw, 110px) 0 clamp(56px, 8vw, 96px);
  background-color:#0A1B2B;
  background-image:var(--hero-photo, none);
  background-size:cover;
  background-position:center 60%;
  text-align:center;
  color:var(--on-dark);
  overflow:hidden;
}
/* Escurecimento da foto: garante leitura do texto em qualquer imagem */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(75% 60% at 50% 42%, rgba(24,62,84,.55), transparent 70%),
    linear-gradient(180deg, rgba(8,20,32,.74) 0%, rgba(8,20,32,.80) 55%, rgba(8,20,32,.90) 100%);
}
.hero__inner{ max-width:920px; margin-inline:auto }

.hero h1{
  font-size:clamp(2.05rem, 5vw, 3.9rem);
  line-height:1.08;
  letter-spacing:-.03em;
}
.hero h1 span{ display:block; color:var(--teal-light) }
.hero__sub{
  margin:20px auto 0;
  max-width:62ch;
  color:rgba(255,255,255,.9);
  font-size:clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight:500;
}
.hero__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:34px;
}
.hero__actions .btn{ height:54px; min-width:216px; font-size:16px }
.btn--light{ background:var(--surface); color:var(--ink) }
.btn--light:hover{ background:#E9F2F2 }
.btn--wa{ background:var(--wa); color:var(--on-dark) }
.btn--wa:hover{ background:var(--wa-dark) }

/* Prova social */
.proof{ margin-top:38px; display:flex; justify-content:center }
.proof__google{ width:min(100%, 420px); height:auto }
@media (max-width: 720px){ .proof__google{ width:85% } }

@media (max-width: 560px){
  .hero__actions .btn{ width:100%; min-width:0 }
}

/* ============================================================
   SERVIÇOS
   ============================================================ */
.services{ background:var(--surface); padding:clamp(64px, 9vw, 108px) 0 }
.section-head{ max-width:56rem; margin-inline:auto; text-align:center }
.section-head .kicker,
.about .kicker{
  margin:0 auto 8px;
  max-width:none;
  color:var(--teal-vivo);
  font-size:14px; font-weight:800; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase;
}
.section-head h2{
  font-size:clamp(1.7rem, 3.6vw, 2.7rem);
  line-height:1.14;
}
.section-head p{
  margin:12px auto 0; max-width:70ch;
  color:var(--ink-2);
  font-size:clamp(1rem, 1.4vw, 1.1rem);
}
.services__grid{
  margin-top:clamp(40px, 6vw, 66px);
  display:grid;
  gap:clamp(38px, 8vw, 52px) clamp(20px, 5vw, 32px);
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width: 880px){ .services__grid{ grid-template-columns:repeat(3, 1fr) } }
@media (min-width: 1180px){ .services__grid{ grid-template-columns:repeat(6, 1fr); gap:32px 24px } }
.service__icon{ display:block; max-width:100%; height:auto }
.service__fig{ height:50px; display:flex; align-items:center; margin-bottom:16px }
.service h3{ font-size:clamp(1.12rem, .8vw + .95rem, 1.2rem) }
.service p{ margin-top:9px; color:var(--ink-2); font-size:15.5px; line-height:1.6 }

/* ============================================================
   SOBRE
   ============================================================ */
.about{
  background:var(--teal-bar);
  color:var(--on-dark);
  padding:clamp(56px, 8vw, 96px) 0;
}
.about__inner{
  display:grid; gap:clamp(36px, 5vw, 72px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width: 940px){
  .about__inner{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr) }
}
.about .kicker{ color:var(--navy) }
.about h2{
  font-size:clamp(1.75rem, 3.8vw, 2.9rem);
  line-height:1.14;
  max-width:20ch;
}
.about p{
  margin-top:16px;
  max-width:62ch;
  color:rgba(255,255,255,.95);
  font-size:clamp(1rem, 1.3vw, 1.08rem);
  line-height:1.62;
}
.about__foto{
  width:100%; height:auto; aspect-ratio:5/4;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(8,32,40,.28);
}

/* ============================================================
   POR QUE ESCOLHER
   ============================================================ */
.why{ background:var(--surface); padding:clamp(64px, 9vw, 108px) 0 }
.why__grid{
  margin-top:clamp(40px, 6vw, 66px);
  display:grid;
  gap:clamp(38px, 8vw, 52px) clamp(20px, 5vw, 32px);
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width: 880px){ .why__grid{ grid-template-columns:repeat(3, 1fr) } }
@media (min-width: 1180px){ .why__grid{ grid-template-columns:repeat(6, 1fr); gap:32px 24px } }
.why h3{ font-size:clamp(1.12rem, .8vw + .95rem, 1.2rem); line-height:1.28; max-width:14ch; min-height:2.56em }
.why p{ margin-top:9px; color:var(--ink-2); font-size:15.5px; line-height:1.6 }

/* ============================================================
   RESULTADOS — comparador antes e depois
   ============================================================ */
.results{ background:var(--teal-bar); color:var(--on-dark); padding:clamp(56px, 8vw, 96px) 0 }
.results .section-head h2{ color:var(--on-dark) }
.results .section-head p{ color:rgba(255,255,255,.95) }
.results .section-head .kicker{ color:var(--navy) }
.results__grid{
  margin-top:clamp(36px, 5vw, 56px);
  display:grid; gap:clamp(20px, 3vw, 28px);
  grid-template-columns:1fr;
}
@media (min-width: 760px){ .results__grid{ grid-template-columns:repeat(3, 1fr) } }

.ba{
  --pos:50%;
  /* impede que a divisória e o botão saiam pela borda do card */
  --x:clamp(28px, var(--pos), calc(100% - 28px));
  margin:0;
  position:relative;
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  background:#0b1f28;
  box-shadow:0 18px 44px rgba(8,32,40,.24);
}
.ba img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
.ba__lado{ position:absolute; inset:0; pointer-events:none }
.ba__lado--antes{ clip-path:inset(0 calc(100% - var(--pos)) 0 0) }
.ba__lado--depois{ clip-path:inset(0 0 0 var(--pos)) }
.ba__linha{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:1px; margin-left:-.5px;
  background:var(--teal-bar);
  pointer-events:none;
}
.ba__pega{
  position:absolute; top:50%; left:var(--x);
  transform:translate(-50%, -50%);
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--teal-bar);
  color:#fff;
  box-shadow:0 4px 14px rgba(8,32,40,.35);
  pointer-events:none;
}
.ba__campo{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none; appearance:none;
  background:transparent;
}
.ba__campo::-webkit-slider-thumb{ -webkit-appearance:none; width:48px; height:100%; cursor:ew-resize }
.ba__campo::-moz-range-thumb{ width:48px; height:100%; border:0; background:transparent; cursor:ew-resize }
.ba--teclado .ba__pega{ outline:2px solid #fff; outline-offset:2px }
.ba__marca{
  position:absolute; bottom:14px;
  padding:7px 16px;
  background:var(--teal-bar);
  color:#fff; font-size:14px; font-weight:700;
  border-radius:5px;
  pointer-events:none;
}
.ba__lado--antes .ba__marca{ left:14px }
.ba__lado--depois .ba__marca{ right:14px }

/* ============================================================
   AVALIAÇÕES
   ============================================================ */
.reviews{ background:var(--surface); padding:clamp(64px, 9vw, 108px) 0; overflow:hidden }
.reviews__nota{ margin-top:clamp(26px, 3.4vw, 38px); text-align:center }
.reviews__nota strong{
  display:block;
  font-size:clamp(1.4rem, 2.4vw, 1.8rem); font-weight:800; letter-spacing:.02em;
  text-transform:uppercase;
}
.estrelas{ display:inline-flex; gap:3px; color:#F2B01E; margin-top:6px }
.estrelas svg{ display:block }
.reviews__base{ margin-top:2px; color:var(--ink-2); font-size:15.5px }
.reviews__base b{ color:var(--ink); font-weight:700 }
.reviews__marca{ display:block; margin:10px auto 0; height:32px; width:auto }

.carrossel{ position:relative; margin-top:clamp(36px, 5vw, 56px) }
.carrossel__trilho{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 2px 8px;
  scrollbar-width:none;
}
.carrossel__trilho::-webkit-scrollbar{ display:none }
.carrossel__seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px;
  display:grid; place-items:center;
  background:var(--surface); color:var(--ink-2);
  border:0; border-radius:50%;
  box-shadow:0 2px 10px rgba(12,36,56,.16);
  cursor:pointer; z-index:2;
  transition:color var(--fast) ease, background-color var(--fast) ease;
}
.carrossel__seta:hover{ color:var(--ink); background:#EDF4F4 }
.carrossel__seta[disabled]{ opacity:.35; cursor:default }
.carrossel--parado .carrossel__seta{ display:none }
.carrossel__seta--ant{ left:-6px }
.carrossel__seta--prox{ right:-6px }
@media (min-width: 1320px){
  .carrossel__seta--ant{ left:-46px }
  .carrossel__seta--prox{ right:-46px }
}
/* No celular as setas descem para baixo do trilho, para não cobrir o texto */
@media (max-width: 699px){
  .carrossel{ padding-bottom:58px }
  .carrossel__seta{ top:auto; bottom:0; transform:none }
  .carrossel__seta--ant{ left:calc(50% - 46px) }
  .carrossel__seta--prox{ right:calc(50% - 46px) }
}

.review{
  flex:0 0 82%;
  scroll-snap-align:start;
  padding:4px 2px;
}
@media (min-width: 700px){ .review{ flex-basis:calc((100% - 24px)/2) } }
@media (min-width: 1000px){ .review{ flex-basis:calc((100% - 72px)/4) } }
.review__topo{ display:flex; align-items:center; gap:12px }
.review__foto{
  flex:none; width:44px; height:44px;
  border-radius:50%; object-fit:cover;
  background:#E4EDED;
}
.review__inicial{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff; font-size:19px; font-weight:700;
}
.review__nome{ font-size:16px; font-weight:800; letter-spacing:-.01em }
.review__quando{ margin-top:2px; color:var(--ink-2); font-size:14px }
.review__linha{ display:flex; align-items:center; gap:8px; margin-top:16px }
.review__linha .estrelas{ margin-top:0 }
.review__selo{ color:#3B7BE8 }
.review__texto{
  margin-top:12px; color:var(--ink);
  font-size:16px; line-height:1.6;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.review.aberto .review__texto{ -webkit-line-clamp:none; overflow:visible }
.review__link{
  display:inline-block; margin-top:14px;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  color:var(--ink-2); font-size:15px;
  text-decoration:underline; text-underline-offset:3px;
}
.review__link:hover{ color:var(--teal-ink) }

/* ============================================================
   DÚVIDAS FREQUENTES
   ============================================================ */
.faq{ background:var(--teal-bar); color:var(--on-dark); padding:clamp(56px, 8vw, 96px) 0 }
.faq .section-head h2{ color:var(--on-dark) }
.faq .section-head p{ color:rgba(255,255,255,.95) }
.faq .section-head .kicker{ color:var(--navy) }
.faq__lista{ margin-top:clamp(36px, 5vw, 54px); display:grid; gap:10px }
.faq__item{
  background:var(--navy);
  border-radius:5px;
  overflow:hidden;
}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px clamp(20px, 3vw, 28px);
  cursor:pointer;
  font-size:clamp(1rem, 1.2vw, 1.06rem); font-weight:600;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary:hover{ background:rgba(255,255,255,.05) }
.faq__item summary svg{
  flex:none;
  transition:transform .3s var(--ease-out-expo);
}
.faq__item[open] summary svg{ transform:rotate(180deg) }
.faq__resposta{
  padding:0 clamp(20px, 3vw, 28px) 24px;
  color:rgba(255,255,255,.92);
  font-size:16px; line-height:1.7;
  max-width:82ch;
}
@media (prefers-reduced-motion: reduce){
  .faq__item summary svg{ transition:none }
}

/* ============================================================
   BLOG
   ============================================================ */
.blog{ background:var(--bg); padding:clamp(64px, 9vw, 108px) 0 }
.blog__grid{
  margin-top:clamp(36px, 5vw, 56px);
  display:grid; gap:clamp(24px, 3vw, 32px);
  grid-template-columns:1fr;
}
@media (min-width: 760px){ .blog__grid{ grid-template-columns:repeat(3, 1fr) } }
.post{
  display:flex; flex-direction:column;
  background:var(--surface);
  border-radius:8px; overflow:hidden;
  box-shadow:0 10px 30px rgba(12,36,56,.07);
  transition:box-shadow var(--fast) ease, transform var(--fast) var(--ease-out-expo);
}
.post:hover{ box-shadow:0 16px 40px rgba(12,36,56,.13); transform:translateY(-2px) }
.post__capa{
  aspect-ratio:16/10;
  display:grid; place-items:center;
  background:linear-gradient(150deg, #17414F 0%, var(--navy) 70%);
}
.post__icone{ width:auto; height:clamp(52px, 7vw, 66px); opacity:.95 }
.post__corpo{ padding:22px clamp(18px, 2vw, 24px) 24px; display:flex; flex-direction:column; flex:1 }
.post__data{ color:var(--ink-2); font-size:14px; font-weight:600 }
.post__titulo{ margin-top:8px; font-size:1.1rem; line-height:1.35; letter-spacing:-.015em }
.post__titulo a{ color:var(--ink) }
.post__titulo a:hover{ color:var(--teal-ink) }
.post__link{
  margin-top:auto; padding-top:16px;
  color:var(--teal-ink); font-size:15px; font-weight:700;
  display:inline-flex; align-items:center; gap:7px;
}
.post__link:hover{ text-decoration:underline; text-underline-offset:3px }
.blog__mais{ display:flex; justify-content:center; margin-top:clamp(28px, 4vw, 40px) }

/* Entrada em cascata: o conteúdo é visível por padrão e a animação apenas o acompanha */
@keyframes rise{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:none }
}
.reveal{ animation:rise .7s var(--ease-out-expo) backwards }
.reveal--2{ animation-delay:.08s }
.reveal--3{ animation-delay:.16s }
.reveal--4{ animation-delay:.24s }

/* Rodapé mínimo do rascunho */
.strip{ background:var(--navy); color:var(--on-dark); padding:38px 0 }
.strip__inner{ display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center }
.strip p{ color:var(--on-dark-2); font-size:15px }
.strip .btn{ margin-left:auto }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */
.capa{ background:var(--navy); color:var(--on-dark); padding:clamp(52px, 8vw, 92px) 0 }
.capa__kicker{
  margin:0 0 10px; color:var(--teal-light);
  font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.capa h1{
  max-width:20ch;
  font-size:clamp(1.9rem, 4.4vw, 3.1rem);
  line-height:1.1;
}
.capa__texto{
  margin-top:16px; max-width:62ch;
  color:rgba(255,255,255,.9);
  font-size:clamp(1rem, 1.4vw, 1.12rem);
}

/* --- Serviços detalhados --- */
.servs{ background:var(--surface); padding:clamp(56px, 8vw, 96px) 0 }
.servs__grid{ display:grid; gap:clamp(32px, 4vw, 48px); grid-template-columns:1fr }
@media (min-width: 860px){ .servs__grid{ grid-template-columns:repeat(2, 1fr) } }
.serv{ padding-top:26px; border-top:1px solid var(--line) }
.serv__topo{ display:flex; gap:18px; align-items:flex-start }
.serv__icone{ flex:none; width:auto; height:44px }
.serv h2{ font-size:clamp(1.2rem, 1.6vw, 1.4rem) }
.serv__resumo{ margin-top:6px; color:var(--ink-2); font-size:15.5px; line-height:1.6 }
.serv__lista{ margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px }
.serv__lista li{
  position:relative; padding-left:26px;
  color:var(--ink-2); font-size:15.5px; line-height:1.6;
}
.serv__lista li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:8px; height:8px; border-radius:50%;
  background:var(--teal);
}

/* --- História --- */
.historia{ background:var(--surface); padding:clamp(56px, 8vw, 96px) 0 }
.historia__grid{ display:grid; gap:clamp(32px, 5vw, 64px); grid-template-columns:1fr; align-items:center }
@media (min-width: 940px){ .historia__grid{ grid-template-columns:1.1fr .9fr } }
.historia h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.2; max-width:22ch }
.historia__texto p{ margin-top:18px; color:var(--ink-2); font-size:1.02rem; line-height:1.72; max-width:62ch }
.historia__foto{ width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; border-radius:8px }

/* --- Números --- */
.numeros{ background:var(--teal-bar); color:var(--on-dark); padding:clamp(38px, 5vw, 56px) 0 }
.numeros__grid{ display:grid; gap:26px; grid-template-columns:repeat(2, 1fr); text-align:center }
@media (min-width: 860px){ .numeros__grid{ grid-template-columns:repeat(4, 1fr) } }
.numero strong{ display:block; font-size:clamp(1.7rem, 3vw, 2.4rem); font-weight:800; letter-spacing:-.02em }
.numero span{ display:block; margin-top:6px; color:rgba(255,255,255,.9); font-size:14.5px; line-height:1.5 }

/* --- Valores --- */
.valores{ background:var(--bg); padding:clamp(56px, 8vw, 96px) 0 }
.valores__grid{
  margin-top:clamp(32px, 4vw, 48px);
  display:grid; gap:28px; grid-template-columns:1fr;
}
@media (min-width: 860px){ .valores__grid{ grid-template-columns:repeat(3, 1fr) } }
.valores h3{ font-size:1.12rem; line-height:1.3 }
.valores p{ margin-top:10px; color:var(--ink-2); font-size:15.5px; line-height:1.65 }

/* --- Contato --- */
.contato{ background:var(--surface); padding:clamp(56px, 8vw, 96px) 0 }
.contato__grid{ display:grid; gap:clamp(32px, 5vw, 64px); grid-template-columns:1fr }
@media (min-width: 940px){ .contato__grid{ grid-template-columns:1fr 1fr } }
.contato__canais{ display:grid; gap:14px; align-content:start }
.canal{
  display:flex; gap:16px; align-items:center;
  padding:18px 20px;
  border:1px solid var(--line); border-radius:8px;
  transition:border-color var(--fast) ease, background-color var(--fast) ease;
}
a.canal:hover{ border-color:var(--teal); background:#F2F8F8 }
.canal__icone{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%; background:#E8F2F2; color:var(--teal-ink);
}
.canal--wa .canal__icone{ background:#E4F5EA; color:var(--wa, #1E8E4E) }
.canal strong{ display:block; font-size:16px; font-weight:800 }
.canal em{ display:block; margin-top:3px; color:var(--ink-2); font-size:15px; font-style:normal; line-height:1.5 }
.contato__ajuda h2{ font-size:clamp(1.3rem, 2vw, 1.6rem) }
.contato__ajuda h3{ margin-top:28px; font-size:1.08rem }
.contato__ajuda p{ margin-top:12px; color:var(--ink-2); font-size:1rem; line-height:1.7; max-width:60ch }
.contato__passos{ margin:18px 0 0; padding-left:22px; display:grid; gap:12px }
.contato__passos li{ color:var(--ink-2); font-size:15.5px; line-height:1.6 }
.contato__passos strong{ color:var(--ink) }

/* --- Artigo --- */
.artigo__capa{ background:var(--navy); color:var(--on-dark); padding:clamp(44px, 6vw, 76px) 0 }
.artigo__voltar{ color:var(--teal-light); font-size:15px; font-weight:700 }
.artigo__voltar:hover{ text-decoration:underline; text-underline-offset:3px }
.artigo__data{ margin-top:22px; color:rgba(255,255,255,.7); font-size:14.5px; font-weight:600 }
.artigo__capa h1{ margin-top:8px; max-width:22ch; font-size:clamp(1.8rem, 4vw, 2.8rem); line-height:1.14 }
.artigo__resumo{ margin-top:16px; max-width:60ch; color:rgba(255,255,255,.88); font-size:1.06rem; line-height:1.6 }
.artigo__corpo{
  max-width:800px;
  padding-top:clamp(40px, 5vw, 64px); padding-bottom:clamp(48px, 6vw, 80px);
}
.artigo__corpo p{ margin-top:20px; color:var(--ink-2); font-size:1.06rem; line-height:1.78 }
.artigo__corpo h2{ margin-top:44px; font-size:clamp(1.3rem, 2.2vw, 1.7rem); line-height:1.25 }
.artigo__corpo h3{ margin-top:32px; font-size:1.12rem }
.artigo__corpo ul{ margin:20px 0 0; padding-left:0; list-style:none; display:grid; gap:12px }
.artigo__corpo li{ position:relative; padding-left:26px; color:var(--ink-2); font-size:1.02rem; line-height:1.7 }
.artigo__corpo ul li::before{
  content:""; position:absolute; left:4px; top:.68em;
  width:8px; height:8px; border-radius:50%; background:var(--teal);
}
.artigo__corpo strong{ color:var(--ink) }
.artigo__cta{
  margin:52px 0 0;
  padding:clamp(24px, 3vw, 34px);
  background:var(--navy); color:var(--on-dark);
  border-radius:8px;
}
.artigo__cta h2{ margin:0; font-size:1.25rem; color:var(--on-dark) }
.artigo__cta p{ margin-top:10px; color:rgba(255,255,255,.88); font-size:1rem; line-height:1.6 }
.artigo__cta .btn{ margin-top:20px }

/* --- Blog: cartão com resumo --- */
.post__resumo{ margin-top:10px; color:var(--ink-2); font-size:15.5px; line-height:1.6 }
@media (min-width: 760px){ .blog__grid--2{ grid-template-columns:repeat(2, 1fr) } }
.blog__mais{ display:flex; justify-content:center; padding-bottom:clamp(56px, 8vw, 96px) }
.pagina-artigo .blog{ background:var(--bg) }

/* --- Chamada final --- */
.cta{ background:var(--teal-bar); color:var(--on-dark); padding:clamp(48px, 7vw, 84px) 0; text-align:center }
.cta h2{ font-size:clamp(1.5rem, 3vw, 2.2rem); max-width:20ch; margin-inline:auto }
.cta p{ margin:14px auto 0; max-width:56ch; color:rgba(255,255,255,.94); font-size:1.02rem; line-height:1.6 }
.cta__botoes{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:28px }
.cta__botoes .btn{ height:54px; min-width:210px; font-size:16px }

/* --- Rodapé --- */
.rodape{ background:var(--navy); color:var(--on-dark-2) }
.rodape__topo{
  display:grid; gap:36px;
  grid-template-columns:1fr;
  padding-top:clamp(44px, 6vw, 68px); padding-bottom:clamp(36px, 5vw, 52px);
}
@media (min-width: 720px){ .rodape__topo{ grid-template-columns:repeat(2, 1fr) } }
@media (min-width: 1040px){ .rodape__topo{ grid-template-columns:1.5fr 1fr 1fr 1.4fr } }
.rodape__marca img{ height:64px; width:auto }
.rodape__marca p{ margin-top:16px; max-width:38ch; font-size:15px; line-height:1.65 }
.rodape__col h2{ font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark) }
.rodape__col ul{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:11px }
.rodape__col a, .rodape__col span{ font-size:15px; line-height:1.5 }
.rodape__col a:hover{ color:var(--on-dark) }
.rodape__contato li a, .rodape__contato li span{ display:flex; gap:11px; align-items:flex-start }
.rodape__contato svg{ flex:none; margin-top:2px; color:var(--teal-light) }
.rodape__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  padding-top:22px; padding-bottom:26px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:14px;
}
.rodape__base p{ margin:0 }


/* ============================================================
   AJUSTES DO WORDPRESS
   ============================================================ */
.nav .current-menu-item > a,
.nav .current_page_item > a{ color:var(--on-dark) }
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after{ transform:scaleX(1) }
.admin-bar .site-header{ top:32px }
@media (max-width: 782px){ .admin-bar .site-header{ top:46px } }

/* imagem de capa real dos posts */
.post__foto{ width:100%; aspect-ratio:16/10; object-fit:cover; background:#DCE6E7 }

/* conteúdo vindo do editor do WordPress */
.artigo__corpo blockquote{
  margin:28px 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--teal);
  color:var(--ink); font-size:1.1rem; line-height:1.65;
}
.artigo__corpo img{ max-width:100%; height:auto; border-radius:8px; margin-top:24px }
.artigo__corpo figure{ margin:28px 0 }
.artigo__corpo figcaption{ margin-top:10px; color:var(--ink-2); font-size:14.5px }
.artigo__corpo ol{ margin:20px 0 0; padding-left:24px; display:grid; gap:12px }
.artigo__corpo ol li{ padding-left:4px; color:var(--ink-2); font-size:1.02rem; line-height:1.7 }
.artigo__corpo a{ color:var(--teal-ink); text-decoration:underline; text-underline-offset:3px }
.artigo__corpo table{ width:100%; border-collapse:collapse; margin-top:24px; font-size:15.5px }
.artigo__corpo th, .artigo__corpo td{ padding:10px 12px; border:1px solid var(--line); text-align:left }

/* paginação da lista de posts */
.paginacao{ display:flex; justify-content:center; gap:8px; margin-top:44px; flex-wrap:wrap }
.paginacao .page-numbers{
  min-width:42px; height:42px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px;
  color:var(--ink-2); font-weight:700; font-size:15px;
}
.paginacao .page-numbers:hover{ border-color:var(--teal); color:var(--teal-ink) }
.paginacao .current{ background:var(--navy); border-color:var(--navy); color:#fff }

/* estado vazio */
.vazio{ padding:60px 0; text-align:center; color:var(--ink-2) }

.post__capa-link{ display:block }
.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;
}


/* ============================================================
   PRIORIDADE SOBRE OS ESTILOS GLOBAIS DO ELEMENTOR (kit antigo) v2
   O kit do site antigo (.elementor-kit-7) imprime CSS inline por
   ultimo e sobrescreve fontes e cores do tema. Este bloco devolve
   o controle ao tema (com !important nas ancoras, replicando as
   regras originais do proprio tema).
   ============================================================ */
body[class*="elementor-kit"]{
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
}
body[class*="elementor-kit"] h1, body[class*="elementor-kit"] h2, body[class*="elementor-kit"] h3, body[class*="elementor-kit"] h4, body[class*="elementor-kit"] h5, body[class*="elementor-kit"] h6{
  font-family:inherit;
  color:inherit;
  font-weight:800;
  letter-spacing:-.025em;
}
body[class*="elementor-kit"] p, body[class*="elementor-kit"] li, body[class*="elementor-kit"] input, body[class*="elementor-kit"] textarea, body[class*="elementor-kit"] select, body[class*="elementor-kit"] button{ font-family:inherit }

/* ancoras: base do tema */
body[class*="elementor-kit"] a{ color:inherit !important; text-decoration:none !important }
/* excecoes do tema, replicadas com prioridade */
body[class*="elementor-kit"] .nav a{ color:var(--on-dark-2) !important }
body[class*="elementor-kit"] .nav a:hover, body[class*="elementor-kit"] .nav a[aria-current="page"], body[class*="elementor-kit"] .nav .current-menu-item > a, body[class*="elementor-kit"] .nav .current_page_item > a{ color:var(--on-dark) !important }
body[class*="elementor-kit"] a.utility__item:hover{ color:#E6F4F3 !important }
body[class*="elementor-kit"] .btn--primary, body[class*="elementor-kit"] .btn--wa{ color:var(--on-dark) !important }
body[class*="elementor-kit"] .btn--ghost, body[class*="elementor-kit"] .btn--light, body[class*="elementor-kit"] .skip{ color:var(--ink) !important }
body[class*="elementor-kit"] .drawer nav a{ color:var(--on-dark) !important }
body[class*="elementor-kit"] .drawer nav a:hover{ color:var(--teal) !important }
body[class*="elementor-kit"] .post__titulo a{ color:var(--ink) !important }
body[class*="elementor-kit"] .post__titulo a:hover{ color:var(--teal-ink) !important }
body[class*="elementor-kit"] .post__link{ color:var(--teal-ink) !important }
body[class*="elementor-kit"] .artigo__voltar{ color:var(--teal-light) !important }
body[class*="elementor-kit"] .artigo__corpo a{ color:var(--teal-ink) !important; text-decoration:underline !important }
body[class*="elementor-kit"] .rodape__col a:hover{ color:var(--on-dark) !important }
body[class*="elementor-kit"] .review__link{ color:var(--ink-2) !important }
body[class*="elementor-kit"] .review__link:hover{ color:var(--teal-ink) !important }
body[class*="elementor-kit"] .paginacao .page-numbers{ color:var(--ink-2) !important }
body[class*="elementor-kit"] .paginacao .page-numbers:hover{ color:var(--teal-ink) !important }
body[class*="elementor-kit"] .paginacao .current{ color:#fff !important }

/* botoes do tema: neutraliza o estilo global de button do kit */
body[class*="elementor-kit"] .menu-toggle, body[class*="elementor-kit"] .drawer__close{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:10px !important;
  color:var(--on-dark) !important;
  width:46px !important;
  height:46px !important;
  min-width:0 !important;
  box-shadow:none !important;
}
body[class*="elementor-kit"] .menu-toggle:hover, body[class*="elementor-kit"] .drawer__close:hover{ background:rgba(255,255,255,.08) !important }
body[class*="elementor-kit"] .carrossel__seta{
  background:var(--surface) !important;
  color:var(--ink-2) !important;
  border:0 !important;
  padding:0 !important;
  width:40px !important;
  height:40px !important;
  min-width:0 !important;
  border-radius:50% !important;
}
body[class*="elementor-kit"] .carrossel__seta:hover{ color:var(--ink) !important; background:#EDF4F4 !important }
body[class*="elementor-kit"] .review__link{ background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important }
body[class*="elementor-kit"] .ba__campo{ background:transparent !important; border:0 !important; padding:0 !important }

/* antes/depois: somente pelo deslize (toque fluido no celular) */
.ba{ touch-action:pan-y; cursor:ew-resize }
.ba__campo{ pointer-events:none }


/* --- WhatsApp flutuante --- */
.zap-flutuante{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--wa);
  box-shadow:0 6px 20px rgba(8,32,40,.30);
  transition:transform var(--fast) var(--ease-out-expo), background-color var(--fast) ease;
}
.zap-flutuante:hover{ background:var(--wa-dark); transform:scale(1.06) }
.zap-flutuante::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(18,140,78,.45);
  animation:zap-pulso 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes zap-pulso{ to{ box-shadow:0 0 0 16px rgba(18,140,78,0) } }
@media (prefers-reduced-motion: reduce){ .zap-flutuante::after{ animation:none } }
body a.zap-flutuante,
body[class*="elementor-kit"] a.zap-flutuante,
body[class*="elementor-kit"] a.zap-flutuante svg{ color:#FFFFFF !important; fill:currentColor }
@media (max-width: 720px){
  .zap-flutuante{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:54px; height:54px }
}