/* ═══════════════════════════════════════════════════════════════════
   Planejar Piscinas — folha de estilo única
   Paleta: água profunda + areia/travertino + ouro do sol (do logo)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* água */
  --abismo:#062435;
  --fundo-agua:#0b3550;
  --agua:#1478b4;
  --agua-clara:#4fb4dc;
  --espuma:#dceef4;

  /* areia / papel */
  --papel:#fbf7f0;
  --areia:#f2e9db;
  --travertino:#e2d5c1;
  --tinta:#20313c;
  --tinta-fraca:#5c6f7b;

  /* sol */
  --ouro:#dda21c;
  --ouro-suave:#f0c95e;
  --verde:#3f9e5a;

  --raio:18px;
  --raio-g:32px;
  --sombra:0 18px 44px -22px rgba(6,36,53,.42);
  --sombra-g:0 40px 90px -40px rgba(6,36,53,.55);
  --borda:1px solid rgba(32,49,60,.12);

  --largura:1240px;
  --respiro:clamp(1.25rem,4vw,4.5rem);

  --display:"Fraunces",Georgia,serif;
  --corpo:"Archivo","Segoe UI",sans-serif;

  --curva:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--corpo);
  font-size:clamp(1rem,.94rem + .25vw,1.075rem);
  line-height:1.65;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;margin:0}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--agua)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg use{pointer-events:none}

.pular{
  position:fixed;top:.6rem;left:.6rem;z-index:200;
  padding:.7rem 1.1rem;border-radius:999px;
  background:var(--fundo-agua);color:#fff;font-weight:600;
  text-decoration:none;transform:translateY(-160%);
  transition:transform .25s var(--curva);
}
.pular:focus-visible{transform:translateY(0)}

:where(a,button,[tabindex]):focus-visible{
  outline:2.5px solid var(--ouro);
  outline-offset:3px;
  border-radius:6px;
}

/* grão sutil sobre tudo — fixo, nunca dentro de container que rola */
.grao{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────── botões ─────────────────────── */
.botao{
  --bg:var(--fundo-agua); --fg:#fff;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.78rem 1.35rem;border:0;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-family:var(--corpo);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--curva),box-shadow .3s var(--curva),background .25s;
  box-shadow:0 10px 22px -14px rgba(6,36,53,.6);
}
.botao svg{width:1.15em;height:1.15em;flex:0 0 auto}
.botao:hover{transform:translateY(-3px);box-shadow:0 20px 34px -18px rgba(6,36,53,.65)}
.botao:active{transform:translateY(-1px)}
.botao--grande{padding:1rem 1.7rem;font-size:1.02rem}
.botao--zap{--bg:linear-gradient(140deg,#1a8f4c,#0f6d39)}
.botao--ouro{--bg:linear-gradient(140deg,var(--ouro-suave),var(--ouro));--fg:#3a2a04}
.botao--fantasma{
  --bg:transparent;--fg:var(--fundo-agua);
  box-shadow:inset 0 0 0 1.5px rgba(11,53,80,.3);
}
.botao--fantasma:hover{--bg:rgba(11,53,80,.06);box-shadow:inset 0 0 0 1.5px rgba(11,53,80,.55)}
.botao--claro{
  --bg:#fff;--fg:var(--tinta);
  box-shadow:0 10px 22px -16px rgba(6,36,53,.5),inset 0 0 0 1.5px rgba(32,49,60,.14);
}
.botao--claro:hover{box-shadow:0 20px 34px -20px rgba(6,36,53,.5),inset 0 0 0 1.5px rgba(32,49,60,.3)}
/* o "G" do Google tem cores próprias — não deve herdar currentColor */
.pilula__g,.contato__g{color:initial}

/* ─────────────────────── pílulas sociais ─────────────────────── */
.pilula{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .95rem .5rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1.5px rgba(32,49,60,.12),0 8px 18px -14px rgba(6,36,53,.5);
  font-size:.86rem;font-weight:600;color:var(--fundo-agua);
  text-decoration:none;
  transition:transform .3s var(--curva),box-shadow .3s var(--curva),background .25s;
}
.pilula svg{width:1.15rem;height:1.15rem;flex:0 0 auto}
.pilula:hover{
  transform:translateY(-2px);background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(32,49,60,.24),0 14px 24px -16px rgba(6,36,53,.5);
}
.pilula--insta svg{color:#c1358a}
/* fundo branco para o "G" colorido do Google ficar legível */
.pilula--google{background:#fff}

/* ─────────────────────── sobrancelha / cabeçalhos ─────────────────────── */
.sobrancelha{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-fraca);margin-bottom:1.4rem;
}
.sobrancelha__ponto{
  width:7px;height:7px;border-radius:50%;background:var(--ouro);
  box-shadow:0 0 0 4px rgba(221,162,28,.2);
}
.sobrancelha--ouro{color:var(--ouro-suave)}

.cabecalho{max-width:44ch}
.cabecalho h2{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.8rem)}
.cabecalho__linha{margin-top:1.3rem;color:var(--tinta-fraca);font-size:1.05rem}
.cabecalho--claro .sobrancelha{color:rgba(220,238,244,.7)}
.cabecalho--claro h2{color:var(--papel)}
.cabecalho--claro h2 em{color:var(--agua-clara)}
.cabecalho--claro .cabecalho__linha{color:rgba(220,238,244,.72)}

/* ═══════════════════════════ TOPO ═══════════════════════════ */
.topo{
  position:sticky;top:0;z-index:100;
  padding:.85rem var(--respiro);
  transition:background .35s,box-shadow .35s,padding .35s;
}
.topo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(251,247,240,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  opacity:0;transition:opacity .35s;
}
.topo.colado::before{opacity:1}
.topo.colado{box-shadow:0 1px 0 rgba(32,49,60,.09),0 14px 34px -28px rgba(6,36,53,.5)}

.topo__interno{
  max-width:var(--largura);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marca__selo{
  width:52px;height:52px;border-radius:50%;
  box-shadow:0 6px 18px -8px rgba(6,36,53,.45);
  transition:transform .5s var(--curva);
}
.marca:hover .marca__selo{transform:rotate(-8deg) scale(1.06)}
.marca__texto{display:flex;flex-direction:column;line-height:1}
.marca__texto strong{
  font-family:var(--display);font-size:1.22rem;font-weight:700;
  color:var(--fundo-agua);letter-spacing:-.02em;
}
.marca__texto em{
  font-style:normal;font-size:.68rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ouro);
}

.menu{display:flex;align-items:center;gap:.35rem}
.menu>a:not(.botao){
  position:relative;padding:.5rem .8rem;border-radius:999px;
  font-size:.93rem;font-weight:500;text-decoration:none;color:var(--tinta);
  transition:color .25s;
}
.menu>a:not(.botao)::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.34rem;height:1.5px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--curva);
}
.menu>a:not(.botao):hover{color:var(--fundo-agua)}
.menu>a:not(.botao):hover::after{transform:scaleX(1)}
.menu__zap{margin-left:.6rem}

.hamburguer{
  display:none;width:44px;height:40px;
  background:none;border:0;cursor:pointer;padding:9px 8px;
}
.hamburguer span{
  display:block;height:2px;border-radius:2px;background:var(--fundo-agua);
  transition:transform .32s var(--curva),opacity .2s;
}
.hamburguer span+span{margin-top:5px}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero{
  position:relative;
  padding:clamp(2.5rem,6vw,5.5rem) var(--respiro) 0;
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(79,180,220,.22),transparent 60%),
    radial-gradient(90% 70% at 4% 96%,rgba(221,162,28,.14),transparent 62%),
    linear-gradient(178deg,var(--areia),var(--papel) 55%);
  overflow:hidden;
}

.hero__sol{
  position:absolute;top:-8%;right:-6%;width:min(46vw,540px);aspect-ratio:1;
  color:var(--ouro);opacity:.16;pointer-events:none;
  animation:girar 90s linear infinite;
}
.hero__sol svg{width:100%;height:100%}
@keyframes girar{to{transform:rotate(360deg)}}

.hero__grade{
  position:relative;z-index:1;
  max-width:var(--largura);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-bottom:clamp(5rem,9vw,8rem);
}

.hero__texto h1{
  font-size:clamp(2.05rem,1.1rem + 4.2vw,3.9rem);
  margin-bottom:1.3rem;color:var(--fundo-agua);line-height:1.06;
}
.hero__sub{
  max-width:44ch;margin-bottom:1.1rem;
  font-family:var(--display);font-size:clamp(1.12rem,1rem + .5vw,1.45rem);
  font-weight:600;line-height:1.3;color:var(--agua);
}
.hero__sub strong{
  font-weight:700;color:var(--fundo-agua);
  box-shadow:inset 0 -.42em 0 rgba(240,201,94,.42);
}
.hero__linha{max-width:46ch;color:var(--tinta-fraca);font-size:1.08rem}
.hero__acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero__redes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}

.hero__provas{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-top:2.4rem;
  padding-top:1.6rem;border-top:var(--borda);
}
.hero__provas li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.9rem;font-weight:500;color:var(--tinta-fraca);
}
.hero__provas svg{width:1rem;height:1rem;color:var(--verde);flex:0 0 auto}

/* colagem assimétrica */
.hero__imagens{position:relative;padding:0 0 clamp(3rem,7vw,5rem)}
.hero__grande{
  margin:0;border-radius:var(--raio-g) 6px var(--raio-g) var(--raio-g);
  overflow:hidden;box-shadow:var(--sombra-g);
  transform:rotate(1.1deg);
}
.hero__grande img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__pequena{
  position:absolute;right:-2%;bottom:0;width:clamp(160px,42%,250px);
  margin:0;border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra-g);border:5px solid var(--papel);
  transform:rotate(-2.6deg);
  transition:transform .5s var(--curva);
}
.hero__pequena:hover{transform:rotate(-1deg) translateY(-6px)}
.hero__pequena img{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero__pequena figcaption{
  position:absolute;inset:auto 0 0;padding:1.4rem .7rem .55rem;
  background:linear-gradient(transparent,rgba(6,36,53,.9));
  color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.02em;
}

.onda{position:absolute;left:0;right:0;bottom:-1px;line-height:0;pointer-events:none}
.onda svg{width:100%;height:clamp(52px,7vw,110px)}
.onda path{fill:var(--fundo-agua)}

/* ═══════════════════════════ FAIXA ROLANTE ═══════════════════════════ */
.faixa{
  background:var(--fundo-agua);color:var(--espuma);
  padding:.9rem 0;overflow:hidden;
  border-bottom:1px solid rgba(220,238,244,.12);
}
.faixa__trilha{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:rolar 42s linear infinite;
}
.faixa__trilha span{
  font-family:var(--display);font-size:clamp(1rem,.9rem + .5vw,1.45rem);
  font-weight:600;letter-spacing:-.01em;white-space:nowrap;
}
.faixa__trilha i{color:var(--ouro);font-style:normal;font-size:1.4rem}
@keyframes rolar{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .faixa__trilha{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .hero__sol{animation:none}
}

/* ═══════════════════════════ SERVIÇOS ═══════════════════════════ */
.servicos{
  padding:clamp(4rem,8vw,7rem) var(--respiro);
  max-width:var(--largura);margin:0 auto;
}
.servicos .cabecalho{margin-bottom:clamp(2.5rem,5vw,4rem)}

.servicos__lista{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);
}
/* zig-zag: cada segundo item desce, quebrando a grade regular.
   As tres parcelas do deslocamento (zig-zag, entrada e hover) sao
   variaveis independentes, somadas num unico transform — assim nenhuma
   sobrescreve a outra por especificidade. */
.servico:nth-child(even){--desloca:clamp(1.5rem,4vw,3.2rem)}

.servico{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.15rem;
  padding:clamp(1.6rem,2.6vw,2.2rem);
  background:linear-gradient(165deg,#fff,var(--areia));
  border:var(--borda);border-radius:var(--raio-g) 8px var(--raio-g) var(--raio-g);
  box-shadow:var(--sombra);
  transform:translateY(calc(var(--desloca,0px) + var(--entrada,0px) + var(--erguer,0px)));
  transition:transform .45s var(--curva),box-shadow .45s var(--curva);
}
.servico::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  border-radius:0 0 var(--raio-g) var(--raio-g);
  background:linear-gradient(90deg,var(--agua),var(--agua-clara),var(--ouro));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--curva);
}
.servico:hover{box-shadow:var(--sombra-g);--erguer:-7px}
.servico:hover::after{transform:scaleX(1)}

.servico__num{
  grid-column:1;grid-row:1;
  font-family:var(--display);font-size:.9rem;font-weight:700;
  color:var(--ouro);letter-spacing:.06em;
}
.servico__icone{
  grid-column:1;grid-row:2;align-self:start;
  display:grid;place-items:center;width:46px;height:46px;
  border-radius:14px;background:var(--fundo-agua);color:var(--agua-clara);
}
.servico__icone svg{width:24px;height:24px}
.servico__corpo{grid-column:2;grid-row:1/span 2}
.servico__corpo h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.55rem);color:var(--fundo-agua);margin-bottom:.65rem}
.servico__corpo p{color:var(--tinta-fraca);font-size:.98rem}

/* ═══════════════════════════ OBRAS ═══════════════════════════ */
.obras{
  position:relative;
  padding:clamp(4rem,8vw,7rem) var(--respiro);
  background:
    radial-gradient(80% 60% at 78% 6%,rgba(20,120,180,.5),transparent 65%),
    linear-gradient(172deg,var(--fundo-agua),var(--abismo));
  color:var(--espuma);
}
.obras .cabecalho{margin-bottom:clamp(2.5rem,5vw,3.6rem)}

/* Mosaico assimétrico com áreas explícitas: as cinco fotos preenchem a
   grade inteira, sem buracos que a auto-alocação deixaria. A foto retrato
   (obra entregue) fica no slot alto "c". */
.galeria{
  max-width:var(--largura);margin:0 auto;
  display:grid;gap:clamp(.7rem,1.4vw,1.1rem);
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(5,clamp(7rem,9vw,10.5rem));
  grid-template-areas:
    "a a a a b b"
    "a a a a b b"
    "a a a a c c"
    "d d e e c c"
    "d d e e c c";
}
.galeria__item{
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--raio);
  background:rgba(220,238,244,.06);
}
.galeria__item:nth-child(1){grid-area:a}
.galeria__item:nth-child(2){grid-area:b}
.galeria__item:nth-child(3){grid-area:d}
.galeria__item:nth-child(4){grid-area:c}
.galeria__item:nth-child(5){grid-area:e}

.galeria__abrir{
  display:block;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:zoom-in;
}
.galeria__abrir img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--curva),filter .5s;
}
.galeria__item:hover .galeria__abrir img{transform:scale(1.07)}

.galeria__lupa{
  position:absolute;top:.8rem;right:.8rem;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(6,36,53,.55);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.7);
  transition:opacity .3s,transform .35s var(--curva);
}
.galeria__lupa svg{width:19px;height:19px}
.galeria__item:hover .galeria__lupa,
.galeria__abrir:focus-visible .galeria__lupa{opacity:1;transform:scale(1)}

.galeria__item figcaption{
  position:absolute;inset:auto 0 0;z-index:1;pointer-events:none;
  padding:3.5rem 1.1rem 1rem;
  background:linear-gradient(transparent,rgba(6,36,53,.92));
  display:flex;flex-direction:column;gap:.15rem;
  transform:translateY(28%);opacity:.92;
  transition:transform .45s var(--curva),opacity .35s;
}
.galeria__item:hover figcaption{transform:translateY(0);opacity:1}
.galeria__item figcaption strong{
  font-family:var(--display);font-size:1.05rem;font-weight:600;color:#fff;
}
.galeria__item figcaption span{font-size:.78rem;color:rgba(220,238,244,.78)}

/* ═══════════════════════════ AREIA TOCANTINS ═══════════════════════════ */
.areia{
  position:relative;overflow:hidden;
  padding:clamp(4rem,8vw,7rem) var(--respiro);
  background:
    radial-gradient(70% 70% at 12% 12%,rgba(221,162,28,.2),transparent 60%),
    linear-gradient(160deg,#0a3049,var(--abismo) 70%);
  color:var(--espuma);
}
.areia::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-58deg,rgba(240,201,94,.05) 0 2px,transparent 2px 22px);
}
.areia__grade{
  position:relative;max-width:var(--largura);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.areia__texto h2{
  font-size:clamp(2.4rem,1.4rem + 4.2vw,4.4rem);color:var(--papel);
  margin-bottom:.6rem;
}
.areia__texto h2 em{color:var(--ouro-suave)}
.areia__slogan{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  color:var(--ouro-suave);margin-bottom:1.5rem;
}
.areia__linha{max-width:48ch;color:rgba(220,238,244,.78)}
.areia__itens{margin:1.9rem 0;display:grid;gap:.85rem}
.areia__itens li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.98rem;color:rgba(220,238,244,.82);
}
.areia__itens strong{color:var(--papel);font-weight:600}
.areia__itens svg{width:1.05rem;height:1.05rem;margin-top:.35rem;color:var(--ouro);flex:0 0 auto}

.areia__nota{
  display:flex;align-items:center;gap:.6rem;
  padding:.8rem 1.1rem;margin-bottom:1.9rem;
  border-radius:var(--raio);
  background:rgba(240,201,94,.1);
  border:1px solid rgba(240,201,94,.25);
  font-size:.9rem;color:var(--ouro-suave);
}
.areia__nota svg{width:1.1rem;height:1.1rem;flex:0 0 auto}

.areia__arte{
  margin:0;border-radius:var(--raio-g);overflow:hidden;
  box-shadow:var(--sombra-g);transform:rotate(-1.4deg);
  border:6px solid rgba(240,201,94,.18);
  transition:transform .6s var(--curva);
}
.areia__arte:hover{transform:rotate(0) scale(1.015)}
.areia__arte img{width:100%}

/* ═══════════════════════════ ATENDIMENTO / RAIO 400 KM ═══════════════════════════ */
.atendimento{
  padding:clamp(4rem,8vw,7rem) var(--respiro);
  background:linear-gradient(172deg,var(--papel),var(--areia));
}
.atendimento__grade{
  max-width:var(--largura);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.atendimento__texto h2{font-size:clamp(2rem,1.3rem + 3vw,3.5rem);color:var(--fundo-agua)}
.atendimento__texto .cabecalho__linha{max-width:46ch}

.cidades{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.7rem;margin:2rem 0 1.6rem;
}
.cidades li{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem .9rem;border-radius:14px;
  background:rgba(255,255,255,.7);border:var(--borda);
  box-shadow:0 8px 20px -18px rgba(6,36,53,.5);
  transition:transform .3s var(--curva),box-shadow .3s var(--curva);
}
.cidades li:hover{transform:translateY(-3px);box-shadow:0 16px 28px -20px rgba(6,36,53,.55)}
.cidades svg{width:1.1rem;height:1.1rem;flex:0 0 auto;color:var(--agua)}
.cidades strong{
  font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--fundo-agua);
}
.cidades span{
  margin-left:auto;font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-fraca);white-space:nowrap;
}

.atendimento__nota{
  display:flex;align-items:flex-start;gap:.7rem;
  max-width:48ch;margin-bottom:1.8rem;
  font-size:.92rem;line-height:1.6;color:var(--tinta-fraca);
}
.atendimento__nota svg{
  width:1.3rem;height:1.3rem;flex:0 0 auto;margin-top:.15rem;color:var(--ouro);
}
.atendimento__acoes{display:flex;flex-wrap:wrap;gap:.8rem}

/* mapa esquemático: anéis concêntricos de 400 km */
.atendimento__mapa{display:grid;place-items:center}
.raio{
  position:relative;width:min(100%,420px);aspect-ratio:1;
  display:grid;place-items:center;
}
.raio__anel{
  position:absolute;border-radius:50%;
  border:1.5px dashed rgba(20,120,180,.32);
  background:radial-gradient(circle,rgba(79,180,220,.12),transparent 70%);
}
.raio__anel--1{width:40%;height:40%}
.raio__anel--2{width:68%;height:68%;border-color:rgba(20,120,180,.24)}
.raio__anel--3{
  width:96%;height:96%;border-color:rgba(221,162,28,.45);
  background:radial-gradient(circle,rgba(221,162,28,.07),transparent 72%);
}
.raio__centro{
  position:relative;z-index:2;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--fundo-agua);color:var(--ouro-suave);
  box-shadow:0 12px 28px -14px rgba(6,36,53,.7);
}
.raio__centro svg{width:26px;height:26px}
.raio__etiqueta{
  position:absolute;z-index:3;
  padding:.3rem .65rem;border-radius:999px;
  background:#fff;border:var(--borda);
  font-family:var(--corpo);font-size:.72rem;font-weight:600;
  color:var(--fundo-agua);white-space:nowrap;
  box-shadow:0 8px 18px -14px rgba(6,36,53,.6);
}
.raio__etiqueta--sede{
  top:calc(50% + 34px);left:50%;transform:translateX(-50%);
  background:var(--fundo-agua);color:var(--papel);border-color:transparent;
}
.raio__etiqueta--a{top:12%;left:52%}
.raio__etiqueta--b{top:34%;right:88%;transform:translateX(50%)}
.raio__etiqueta--c{bottom:14%;left:56%}
.raio__etiqueta--d{top:60%;right:84%;transform:translateX(50%)}
.raio__km{
  position:absolute;top:2%;right:4%;
  font-family:var(--display);font-style:normal;font-size:.82rem;font-weight:700;
  letter-spacing:.06em;color:var(--ouro);
}

.atendimento__sede{
  max-width:var(--largura);margin:clamp(2.2rem,5vw,3.4rem) auto 0;
  display:flex;align-items:center;gap:.9rem;
  padding:1.1rem 1.3rem;border-radius:var(--raio);
  background:var(--fundo-agua);color:var(--espuma);
  box-shadow:var(--sombra);
}
.atendimento__sede>svg{width:26px;height:26px;flex:0 0 auto;color:var(--ouro-suave)}
.atendimento__sede span{display:flex;flex-direction:column;min-width:0}
.atendimento__sede small{
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(220,238,244,.6);
}
.atendimento__sede a{
  font-family:var(--display);font-size:1.02rem;font-weight:600;
  color:var(--papel);text-decoration:none;
  border-bottom:1.5px solid transparent;transition:border-color .25s;
}
.atendimento__sede a:hover{border-bottom-color:var(--ouro)}

/* ═══════════════════════════ CONTATO ═══════════════════════════ */
.contato{padding:clamp(4rem,8vw,7rem) var(--respiro);background:var(--papel)}
.contato__caixa{
  max-width:var(--largura);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding:clamp(1.8rem,4vw,3.4rem);
  background:linear-gradient(160deg,#fff,var(--areia));
  border:var(--borda);
  border-radius:var(--raio-g) var(--raio-g) 10px var(--raio-g);
  box-shadow:var(--sombra-g);
}
.contato__texto h2{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);color:var(--fundo-agua)}
.contato__linha{margin-top:1.2rem;max-width:44ch;color:var(--tinta-fraca)}

.contato__lista{margin:2rem 0;display:grid;gap:1rem}
.contato__lista li{display:flex;align-items:center;gap:.9rem}
.contato__lista li>svg{
  width:42px;height:42px;padding:10px;flex:0 0 auto;
  border-radius:13px;background:var(--fundo-agua);color:var(--agua-clara);
}
.contato__lista span{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.contato__lista small{
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-fraca);
}
.contato__lista a,.contato__lista b{
  font-family:var(--display);font-size:1.1rem;font-weight:600;
  color:var(--fundo-agua);text-decoration:none;overflow-wrap:anywhere;
}
.contato__lista a{border-bottom:1.5px solid transparent;transition:border-color .25s}
.contato__lista a:hover{border-bottom-color:var(--ouro)}
/* o "G" colorido precisa de fundo claro para ficar legível */
.contato__lista li>svg.contato__g{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(32,49,60,.12)}

.contato__acoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}

.contato__foto{
  margin:0;border-radius:var(--raio-g) 10px var(--raio-g) var(--raio-g);
  overflow:hidden;box-shadow:var(--sombra);
}
.contato__foto img{width:100%;aspect-ratio:4/3.2;object-fit:cover;
  transition:transform .8s var(--curva)}
.contato__foto:hover img{transform:scale(1.05)}

/* ═══════════════════════════ RODAPÉ ═══════════════════════════ */
.rodape{
  padding:clamp(2.8rem,5vw,4.2rem) var(--respiro) 1.6rem;
  background:var(--abismo);color:rgba(220,238,244,.7);
}
.rodape__interno{
  max-width:var(--largura);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(220,238,244,.12);
}
.rodape__marca{display:flex;align-items:center;gap:.9rem}
.rodape__marca img{width:56px;height:56px;border-radius:50%}
.rodape__marca p{display:flex;flex-direction:column;font-size:.85rem;line-height:1.5}
.rodape__marca strong{
  font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--papel);
}
.rodape__links{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.rodape__links a{font-size:.92rem;text-decoration:none;transition:color .25s}
.rodape__links a:hover{color:var(--ouro-suave)}
.rodape__social{display:flex;gap:.6rem}
.rodape__social a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(220,238,244,.09);color:var(--espuma);
  transition:background .25s,transform .3s var(--curva),color .25s;
}
.rodape__social a:hover{background:var(--ouro);color:var(--abismo);transform:translateY(-3px)}
.rodape__social svg{width:20px;height:20px}
.rodape__social--google{background:#fff}
.rodape__social--google:hover{background:#fff}

/* endereço completo e contatos, sempre visíveis */
.rodape__dados{
  max-width:var(--largura);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.8rem clamp(1.5rem,4vw,3.5rem);
  padding:2.2rem 0;border-bottom:1px solid rgba(220,238,244,.12);
}
.rodape__bloco h3{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:.7rem;
  font-family:var(--corpo);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ouro-suave);
}
.rodape__bloco h3 svg{width:1.1rem;height:1.1rem;flex:0 0 auto}
.rodape__bloco p,.rodape__bloco address{
  font-style:normal;font-size:.92rem;line-height:1.75;
}
.rodape__bloco strong{color:var(--papel)}
.rodape__bloco a{
  text-decoration:none;color:rgba(220,238,244,.78);
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.rodape__bloco a:hover{color:var(--papel);border-bottom-color:var(--ouro)}

.rodape__base{
  max-width:var(--largura);margin:1.5rem auto 0;
  font-size:.78rem;letter-spacing:.03em;color:rgba(220,238,244,.45);
}

/* ═══════════════════════════ CTA FLUTUANTE (WHATSAPP) ═══════════════════════════ */
.zap-flutuante{
  position:fixed;z-index:140;
  right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.3rem;border-radius:999px;
  background:linear-gradient(140deg,#25d366,#0f6d39);color:#fff;
  font-family:var(--corpo);font-size:.95rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 16px 34px -14px rgba(6,60,30,.7),0 0 0 6px rgba(37,211,102,.14);
  transition:transform .35s var(--curva),box-shadow .35s var(--curva),
             opacity .35s var(--curva),visibility .35s;
}
.zap-flutuante>svg{width:1.5rem;height:1.5rem;flex:0 0 auto;position:relative;z-index:2}
.zap-flutuante__texto{position:relative;z-index:2}
.zap-flutuante:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 44px -16px rgba(6,60,30,.75),0 0 0 9px rgba(37,211,102,.18);
}
.zap-flutuante:active{transform:translateY(-1px)}

/* pulso suave para chamar atenção sem piscar */
.zap-flutuante__pulso{
  position:absolute;inset:0;border-radius:inherit;z-index:1;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);
  animation:pulsar 2.8s var(--curva) infinite;
}
@keyframes pulsar{
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* Com JS: entra em cena depois do hero, para não cobrir os botões dele.
   Sem JS: fica visível desde o começo. */
.js .zap-flutuante{opacity:0;visibility:hidden;transform:translateY(16px) scale(.94)}
.js .zap-flutuante.visivel{opacity:1;visibility:visible;transform:none}

@media (prefers-reduced-motion:reduce){
  .zap-flutuante__pulso{animation:none}
}

/* ═══════════════════════════ LIGHTBOX ═══════════════════════════ */
.lupa{
  position:fixed;inset:0;z-index:150;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.4rem,2vw,1.5rem);padding:clamp(1rem,4vw,3rem);
  background:rgba(6,36,53,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:surgir .3s var(--curva);
}
.lupa[hidden]{display:none}
@keyframes surgir{from{opacity:0}to{opacity:1}}

.lupa__palco{
  position:relative;margin:0;display:grid;place-items:center;gap:1rem;
  max-height:100%;min-width:0;
}
.lupa__palco img{
  max-width:100%;max-height:min(74vh,760px);
  border-radius:var(--raio);object-fit:contain;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  opacity:0;transition:opacity .35s;
}
.lupa__palco img.pronta{opacity:1}
.lupa__esqueleto{
  position:absolute;inset:0;margin:auto;
  width:min(70vw,560px);height:min(50vh,400px);border-radius:var(--raio);
  background:linear-gradient(100deg,rgba(220,238,244,.06) 30%,rgba(220,238,244,.16) 50%,rgba(220,238,244,.06) 70%);
  background-size:220% 100%;
  animation:brilhar 1.3s ease-in-out infinite;
}
.lupa__esqueleto[hidden]{display:none}
@keyframes brilhar{from{background-position:110% 0}to{background-position:-110% 0}}

.lupa__palco figcaption{
  text-align:center;color:var(--espuma);font-size:.92rem;
  font-family:var(--display);max-width:60ch;
}
.lupa__fechar,.lupa__nav{
  display:grid;place-items:center;width:48px;height:48px;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(220,238,244,.1);color:var(--espuma);
  transition:background .25s,transform .3s var(--curva);
}
.lupa__fechar svg,.lupa__nav svg{width:22px;height:22px}
.lupa__fechar:hover,.lupa__nav:hover{background:var(--ouro);color:var(--abismo);transform:scale(1.08)}
.lupa__fechar{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:2}
.lupa__contador{
  position:absolute;left:0;right:0;bottom:clamp(.8rem,2.5vw,1.6rem);
  text-align:center;font-size:.8rem;letter-spacing:.16em;
  color:rgba(220,238,244,.6);
}

/* ═══════════════════════════ REVELAR AO ROLAR ═══════════════════════════ */
/* Tudo é escondido apenas quando a classe "js" existe no <html>. Se o
   JavaScript falhar ou for bloqueado, o conteúdo continua visível em vez
   de a página aparecer em branco. */
.js [data-revelar]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--curva),transform .8s var(--curva);
}
.js [data-revelar].visivel{opacity:1;transform:none}
/* os serviços somam a entrada às outras parcelas em vez de trocar o transform */
.js .servico[data-revelar]{--entrada:26px;
  transform:translateY(calc(var(--desloca,0px) + var(--entrada,0px) + var(--erguer,0px)))}
.js .servico[data-revelar].visivel{--entrada:0px}

/* entrada escalonada do hero */
.js .hero__texto [data-revelar]:nth-child(1){transition-delay:.04s}
.js .hero__texto [data-revelar]:nth-child(2){transition-delay:.11s}
.js .hero__texto [data-revelar]:nth-child(3){transition-delay:.18s}
.js .hero__texto [data-revelar]:nth-child(4){transition-delay:.25s}
.js .hero__texto [data-revelar]:nth-child(5){transition-delay:.32s}
.js .hero__texto [data-revelar]:nth-child(6){transition-delay:.39s}
.js .hero__texto [data-revelar]:nth-child(7){transition-delay:.46s}
.js .hero__imagens[data-revelar]{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .js [data-revelar]{opacity:1!important;transform:none!important;transition:none!important}
  .js .servico[data-revelar]{--entrada:0px;
    transform:translateY(calc(var(--desloca,0px) + var(--erguer,0px)))!important}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ═══════════════════════════ RESPONSIVO ═══════════════════════════ */
@media (max-width:1000px){
  .hero__grade,.areia__grade,.contato__caixa,.atendimento__grade{grid-template-columns:1fr}
  .atendimento__mapa{order:-1}
  .raio{width:min(100%,340px)}
  .hero__imagens{order:-1;max-width:560px}
  .areia__arte{max-width:420px;margin-inline:auto}
  .galeria{
    grid-template-areas:none;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:none;grid-auto-rows:13rem;
  }
  .galeria__item:nth-child(n){grid-area:auto}
  .galeria__item:nth-child(1){grid-column:1/-1}
}

@media (max-width:820px){
  .hamburguer{display:block}
  .menu{
    position:absolute;top:100%;left:var(--respiro);right:var(--respiro);
    flex-direction:column;align-items:stretch;gap:.1rem;
    padding:.7rem;border-radius:var(--raio);
    background:var(--papel);border:var(--borda);
    box-shadow:var(--sombra-g);
    opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98);
    transform-origin:top;
    transition:opacity .28s var(--curva),transform .28s var(--curva),visibility .28s;
  }
  .menu.aberto{opacity:1;visibility:visible;transform:none}
  .menu>a:not(.botao){padding:.85rem 1rem;border-radius:12px}
  .menu>a:not(.botao)::after{display:none}
  .menu>a:not(.botao):hover{background:var(--areia)}
  .menu__zap{margin:.5rem 0 .2rem;justify-content:center}
  .servicos__lista{grid-template-columns:1fr}
  .servico:nth-child(even){--desloca:0px}
  .rodape__interno{flex-direction:column;align-items:flex-start}
}

@media (max-width:640px){
  /* no celular o botão flutuante fica compacto, só com o ícone */
  .zap-flutuante{padding:0;width:60px;height:60px;justify-content:center;gap:0}
  .zap-flutuante__texto{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .zap-flutuante>svg{width:1.85rem;height:1.85rem}
  /* espaço extra no fim da página para o botão não cobrir o rodapé */
  .rodape__base{padding-bottom:4.5rem}
}

@media (max-width:560px){
  .cidades{grid-template-columns:1fr}
  .raio__etiqueta{font-size:.64rem;padding:.24rem .5rem}
  .atendimento__sede{flex-direction:column;align-items:flex-start;gap:.6rem}
  .galeria{grid-template-columns:1fr;grid-auto-rows:14rem}
  .galeria__item:nth-child(n){grid-column:1;grid-row:auto}
  .galeria__item figcaption{transform:translateY(0);opacity:1}
  .hero__pequena{width:44%;right:0}
  .botao{width:100%;justify-content:center}
  .menu__zap{width:auto}
  .pilula{width:auto}
  .hero__redes{gap:.5rem}
  .hero__acoes{flex-direction:column;align-items:stretch}
  .lupa{grid-template-columns:1fr}
  .lupa__nav{position:absolute;bottom:3.4rem;z-index:2}
  .lupa__nav--ant{left:clamp(1rem,6vw,3rem)}
  .lupa__nav--prox{right:clamp(1rem,6vw,3rem)}
  .marca__selo{width:44px;height:44px}
}