/* ==========================================================================
   Elegance Piscinas — folha de estilo gerada de template-base/styles.css.tpl
   Toda a paleta e derivada de tres cores do site.json via color-mix().
   ========================================================================== */

:root{
  /* --- cores base (site.json) --- */
  --primaria:#2C93B4;
  --secundaria:#0E4A63;
  --destaque:#F5C451;

  /* --- paleta derivada --- */
  --primaria-clara: color-mix(in oklab, var(--primaria) 14%, white);
  --primaria-escura: color-mix(in oklab, var(--primaria) 78%, black);
  --tinta: color-mix(in oklab, var(--secundaria) 92%, black);
  --tinta-suave: color-mix(in oklab, var(--secundaria) 55%, white);
  --tinta-fraca: color-mix(in oklab, var(--secundaria) 32%, white);
  --fundo:#fff;
  --fundo-alt: color-mix(in oklab, var(--primaria) 5%, #fbfaf8);
  --borda: color-mix(in oklab, var(--secundaria) 12%, white);
  --borda-forte: color-mix(in oklab, var(--secundaria) 22%, white);

  /* --- escala de espacamento --- */
  --e1:.5rem; --e2:.75rem; --e3:1rem; --e4:1.5rem;
  --e5:2.5rem; --e6:4rem;
  --sec-y: clamp(3.5rem, 8vw, 7rem);

  /* --- forma e profundidade --- */
  --raio:16px;
  --raio-sm:10px;
  --sombra-1: 0 1px 2px rgba(23,20,17,.04), 0 4px 14px rgba(23,20,17,.05);
  --sombra-2: 0 2px 4px rgba(23,20,17,.05), 0 18px 44px rgba(23,20,17,.10);
  --wrap:1160px;

  /* --- tipografia --- */
  --f-titulo:"Sora", Georgia, serif;
  --f-texto:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs:.78rem; --t-sm:.925rem; --t-base:1.0625rem;
  --t-lg: clamp(1.1rem, 1.6vw, 1.25rem);
  --t-h3: clamp(1.15rem, 1.8vw, 1.35rem);
  --t-h2: clamp(1.75rem, 3.6vw, 2.6rem);
  --t-h1: clamp(2.25rem, 5.6vw, 4rem);

  --transicao: 220ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-texto);
  font-size:var(--t-base);
  line-height:1.7;
  color:var(--tinta);
  background:var(--fundo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,iframe,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--primaria);outline-offset:3px;border-radius:4px}

h1,h2,h3{
  font-family:var(--f-titulo);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0 0 var(--e3);
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.012em}
p{margin:0 0 var(--e3);text-wrap:pretty}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,40px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:12px 18px;border-radius:var(--raio-sm);box-shadow:var(--sombra-2)}

/* --- rotulo de secao: traco curto + caixa alta ------------------------- */
.rotulo{
  display:block;
  font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--primaria);margin-bottom:var(--e2);
}
.hero .rotulo,.cta .rotulo{color:var(--destaque)}
.hero .rotulo{text-shadow:0 1px 12px rgba(4,40,58,.9)}
.cta .rotulo{text-align:center}

/* --- botoes ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--primaria);color:#fff;
  font-family:var(--f-texto);font-weight:600;font-size:var(--t-sm);
  text-decoration:none;white-space:nowrap;
  padding:.9rem 1.65rem;border:1.5px solid transparent;border-radius:999px;
  box-shadow:0 6px 18px color-mix(in oklab, var(--primaria) 30%, transparent);
  transition:transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--primaria-escura);
  box-shadow:0 12px 28px color-mix(in oklab, var(--primaria) 38%, transparent);
}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.6rem 1.15rem;font-size:.875rem}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.85)}
.btn-destaque{
  background:var(--destaque);color:var(--tinta);
  box-shadow:0 6px 20px color-mix(in oklab, var(--destaque) 40%, transparent);
}
.btn-destaque:hover{background:var(--destaque);filter:brightness(1.06)}

/* --- cabecalho --------------------------------------------------------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, white 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
.topo.rolado{border-bottom-color:var(--borda);box-shadow:0 4px 20px rgba(23,20,17,.05)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);min-height:74px}
.marca{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-titulo);font-weight:700;font-size:1.3rem;
  letter-spacing:-.02em;text-decoration:none;color:var(--secundaria);
}
.marca-img{height:44px;width:auto;display:block;flex:none}
@media (max-width:520px){ .marca-img{height:36px} .marca{font-size:1.05rem} }
.nav{display:flex;align-items:center;gap:var(--e4)}
.nav a{
  position:relative;text-decoration:none;font-size:var(--t-sm);font-weight:500;
  color:var(--tinta-suave);transition:color var(--transicao);
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--primaria);border-radius:2px;transition:right var(--transicao);
}
.nav a:not(.btn):hover{color:var(--tinta)}
.nav a:not(.btn):hover::after{right:0}
.nav a.btn{color:#fff}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.menu-btn span{width:22px;height:2px;background:var(--secundaria);border-radius:2px;transition:var(--transicao)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- hero -------------------------------------------------------------- */
.hero{
  position:relative;color:#fff;isolation:isolate;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--secundaria) 42%, transparent) 0%,
      color-mix(in oklab, var(--secundaria) 22%, transparent) 40%,
      color-mix(in oklab, var(--secundaria) 62%, transparent) 100%),
    var(--hero) center 30%/cover no-repeat,
    var(--secundaria);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:-1;
  background:linear-gradient(to top, color-mix(in oklab, var(--secundaria) 70%, transparent), transparent);
}
.hero-in{
  min-height:min(78vh,760px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(4.5rem,13vw,9rem);
}
.hero h1{margin-bottom:var(--e4);max-width:17ch;text-shadow:0 2px 4px rgba(4,40,58,.55), 0 4px 28px rgba(4,40,58,.85)}
.hero .lead{max-width:54ch;font-size:var(--t-lg);color:rgba(255,255,255,.92);
  margin-bottom:0;text-shadow:0 1px 3px rgba(4,40,58,.7), 0 2px 18px rgba(4,40,58,.9)}
.acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e5)}

/* --- onda: divisor entre secoes ------------------------------------- */
.onda{
  display:block;line-height:0;position:relative;z-index:2;
  height:56px;margin-top:-56px;pointer-events:none;
}
.onda svg{display:block;width:100%;height:56px}
.onda-clara svg{fill:var(--fundo)}
.onda-alt svg{fill:var(--fundo-alt)}
.onda-escura svg{fill:var(--secundaria)}
.onda + .stats, .onda + .sec{margin-top:-1px}

/* --- barra de numeros -------------------------------------------------- */
.stats{background:var(--fundo);border-bottom:1px solid var(--borda)}
.stats-in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--e3);padding-block:var(--e5);
}
.stat{text-align:center;padding-inline:var(--e3);position:relative}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--borda);
}
.stat strong{
  display:block;font-family:var(--f-titulo);font-size:clamp(1.7rem,3.2vw,2.3rem);
  line-height:1.1;color:var(--primaria);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat span{font-size:var(--t-sm);color:var(--tinta-suave)}

/* --- secoes ------------------------------------------------------------ */
.sec{padding-block:var(--sec-y)}
.sec-alt{
  background:
    radial-gradient(120% 80% at 15% 0%, color-mix(in oklab, var(--primaria) 8%, transparent), transparent 60%),
    var(--fundo-alt);
  border-block:1px solid var(--borda);
}
.sec-cabeca{max-width:60ch;margin-bottom:var(--e5)}
.sec-cabeca p{color:var(--tinta-suave);font-size:var(--t-lg);margin-bottom:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--e3)}
.card{
  background:var(--fundo);border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e4);box-shadow:var(--sombra-1);
  transition:transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:var(--borda-forte)}
.card p{color:var(--tinta-suave);font-size:var(--t-sm)}
.ico{
  width:52px;height:52px;display:grid;place-items:center;font-size:1.5rem;
  border-radius:14px;margin-bottom:var(--e3);
  background:linear-gradient(160deg,
    color-mix(in oklab, var(--primaria) 18%, white),
    color-mix(in oklab, var(--primaria) 6%, white));
  border:1px solid color-mix(in oklab, var(--primaria) 22%, white);
}

.depo{margin:0;display:flex;flex-direction:column}
.depo::before{
  content:"\201C";font-family:var(--f-titulo);font-size:3.2rem;line-height:.75;
  color:color-mix(in oklab, var(--primaria) 32%, white);margin-bottom:var(--e1);
}
.depo p{font-size:var(--t-base);color:var(--tinta);font-style:italic}
.depo cite{
  display:block;margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--borda);
  font-style:normal;font-weight:600;font-size:var(--t-sm);color:var(--primaria);
}

/* --- como funciona: passos numerados ---------------------------------- */
.passos{
  list-style:none;counter-reset:passo;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--e4);
}
.passos li{counter-increment:passo;position:relative;padding-top:var(--e4)}
.passos li::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--f-titulo);font-size:1.5rem;font-weight:700;
  color:var(--primaria);letter-spacing:-.02em;
}
.passos li::after{
  content:"";position:absolute;top:2.35rem;left:0;right:var(--e4);height:2px;
  background:linear-gradient(90deg,var(--primaria),transparent);
}
.passos h3{margin:var(--e4) 0 .4rem}
.passos p{color:var(--tinta-suave);font-size:var(--t-sm)}

/* --- duvidas ----------------------------------------------------------- */
.faq{display:flex;flex-direction:column;gap:10px;max-width:74ch}
.faq details{
  background:var(--fundo);border:1px solid var(--borda);border-radius:var(--raio);
  padding:0 var(--e4);transition:border-color var(--transicao);
}
.faq details[open]{border-color:var(--borda-forte);box-shadow:var(--sombra-1)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 0;
  font-family:var(--f-titulo);font-weight:600;font-size:1.02rem;
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--primaria);border-bottom:2px solid var(--primaria);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--transicao);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{
  padding:0 0 1.2rem;margin:0;color:var(--tinta-suave);font-size:var(--t-sm);
  border-top:1px solid var(--borda);padding-top:1rem;
}

/* --- sobre + horarios / contato + mapa --------------------------------- */
.sobre-in,.contato-in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.contato-in.solo{grid-template-columns:1fr;max-width:62ch}
.sobre-in p{color:var(--tinta-suave)}
.sobre-in .btn{margin-top:var(--e2)}
.horarios{
  background:var(--fundo);border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e4);box-shadow:var(--sombra-1);
}
.horarios h3{margin-bottom:var(--e3)}
.linha{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);
  padding-block:.7rem;border-bottom:1px solid var(--borda);
}
.linha:last-child{border-bottom:0;padding-bottom:0}
.linha span{color:var(--tinta-suave);font-size:var(--t-sm)}
.linha strong{font-variant-numeric:tabular-nums}

.lista{list-style:none;padding:0;margin:var(--e4) 0}
.lista li{padding-block:.85rem;border-bottom:1px solid var(--borda)}
.lista li:last-child{border-bottom:0}
.lista span{
  display:block;font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.12em;color:var(--tinta-fraca);margin-bottom:2px;
}
.lista strong{font-weight:600}
.lista a{text-decoration:none;color:var(--primaria);border-bottom:1px solid transparent;transition:border-color var(--transicao)}
.lista a:hover{border-bottom-color:currentColor}
.social{display:flex;gap:var(--e2);margin-top:var(--e3);flex-wrap:wrap}
.social a{
  text-decoration:none;font-size:var(--t-sm);font-weight:600;color:var(--primaria);
  padding:.5rem 1rem;border:1px solid var(--borda-forte);border-radius:999px;
  transition:background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.social a:hover{background:var(--primaria);color:#fff;border-color:var(--primaria)}
.mapa iframe{width:100%;height:clamp(300px,42vh,420px);border:0;border-radius:var(--raio);box-shadow:var(--sombra-2)}

/* --- chamada final ------------------------------------------------------ */
.cta{
  position:relative;text-align:center;color:#fff;overflow:hidden;
  padding-block:var(--sec-y);
  background:
    radial-gradient(90% 120% at 50% -10%,
      color-mix(in oklab, var(--primaria) 78%, white) 0%,
      color-mix(in oklab, var(--primaria) 70%, var(--secundaria)) 45%,
      var(--secundaria) 100%);
}
.cta h2{margin-bottom:var(--e3)}
.cta p{color:rgba(255,255,255,.82);max-width:50ch;margin:0 auto var(--e5);font-size:var(--t-lg)}

/* --- rodape ------------------------------------------------------------- */
.rodape{background:var(--secundaria);color:rgba(255,255,255,.55);font-size:var(--t-sm);padding-block:var(--e4)}
.rodape-in{display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;align-items:center}
.rodape-logo{height:58px;width:auto;filter:brightness(0) invert(1);opacity:.55;order:-1}

/* --- botao flutuante do WhatsApp ---------------------------------------- */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:.6rem;
  height:58px;padding:0 20px;border-radius:999px;
  background:#25d366;color:#fff;text-decoration:none;font-weight:600;font-size:var(--t-sm);
  box-shadow:0 10px 30px rgba(37,211,102,.42);
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.zap:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(37,211,102,.5)}
.zap svg{flex:none}

/* --- revelacao ao rolar -------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].visivel{opacity:1;transform:none}
.js .cards > [data-reveal]{transition-delay:calc(var(--i,0) * 90ms)}

/* --- responsivo ---------------------------------------------------------- */
@media (max-width:900px){
  .sobre-in,.contato-in{grid-template-columns:1fr}
  .stat + .stat::before{display:none}
}
@media (max-width:820px){
  .menu-btn{display:flex}
  .nav{
    position:absolute;top:74px;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--e1) clamp(20px,5vw,40px) var(--e3);
    background:#fff;border-bottom:1px solid var(--borda);box-shadow:var(--sombra-2);
  }
  .nav.aberto{display:flex}
  .nav a{padding-block:.85rem;border-bottom:1px solid var(--borda);font-size:1rem}
  .nav a:not(.btn)::after{display:none}
  .nav a.btn{margin-top:var(--e2);border-bottom:0}
  .zap{padding:0;width:58px;justify-content:center}
  .zap span{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* --- impressao ----------------------------------------------------------- */
@media print{
  .topo,.zap,.mapa,.acoes{display:none}
  body{font-size:11pt;color:#000}
  .hero{background:none;color:#000}
}