/* Layout: faixa azul-marinho com onda turquesa (como a fachada), conteúdo em coluna única no celular e duas colunas a partir de 860px. */
:root {
  color-scheme: light;
  --marinho: #03307A;
  --marinho-2: #022459;
  --turquesa: #0396B3;
  --turquesa-txt: #00728A;
  --agua: #EAF6F9;
  --agua-2: #D3ECF2;
  --tinta: #0A1A33;
  --suave: #4A5D75;
  --linha: #D5E3EA;
  --papel: #FFFFFF;
  --wa: #17843F;
  --wa-2: #126A32;
  --aberto: #128A55;
  --fechado: #B4442A;

  --f-titulo: "Lexend", "Figtree", system-ui, sans-serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.375rem;
  --t-xl: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
  --t-xxl: clamp(2.1rem, 1.4rem + 3.4vw, 3.5rem);

  --raio: 14px;
  --raio-p: 10px;
  --larg: 1160px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 30; background: var(--papel);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--turquesa-txt); }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: var(--t-xl); font-weight: 600; color: var(--marinho); }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sel { user-select: all; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; border-radius: 4px; }

.wrap {
  max-width: var(--larg);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) {
  .wrap { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
}

.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sobretitulo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--turquesa-txt);
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.25rem; border-radius: 999px;
  font: 600 var(--t-s)/1 var(--f-texto); text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer; transition: background-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-2); }
.btn--claro { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--claro:hover { background: rgba(255,255,255,.1); }
.btn--grande { min-height: 54px; padding: 0 1.5rem; font-size: var(--t-m); }
.btn--bloco { width: 100%; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Aviso */
.aviso { background: var(--marinho-2); color: #fff; font-size: var(--t-xs); }
.aviso__in { display: flex; align-items: center; justify-content: center; gap: .5rem; padding-block: .55rem; text-align: center; }
.aviso .ic { color: var(--agua-2); }
.aviso strong { font-weight: 700; }

/* Topo */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo__in { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.topo__marca img { height: 44px; width: auto; }
.topo__nav { display: none; gap: 1.75rem; margin-left: auto; }
.topo__nav a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.topo__nav a:hover { color: var(--turquesa-txt); }
.topo__wa { display: none; }
@media (min-width: 860px) {
  .topo__nav { display: flex; }
  .topo__wa { display: inline-flex; min-height: 44px; }
  .topo__marca img { height: 50px; }
}

/* Hero */
.hero { position: relative; background: var(--marinho); color: #fff; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -12%; top: -30%; width: 70%; aspect-ratio: 1; max-width: 100%;
  background: radial-gradient(closest-side, rgba(3,150,179,.35), transparent 70%); pointer-events: none;
}
.hero__in { position: relative; z-index: 1; display: grid; gap: 2rem; padding-block: 2.5rem 2.75rem; }
.hero .sobretitulo { color: #7FD3E4; }
.hero h1 { font-size: var(--t-xxl); font-weight: 700; margin-block: .6rem 1rem; max-width: 15ch; }
.hero__sub { font-size: var(--t-m); color: #D3E2F2; max-width: 52ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero__cartao {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--raio); padding: 1.25rem; align-self: start;
}
.status {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  padding: .35rem .75rem; border-radius: 999px; background: #fff;
}
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.status.aberto { color: var(--aberto); }
.status.fechado { color: var(--fechado); }
.hero__dados { margin: 0; display: grid; gap: 1rem; }
.hero__dados div { display: grid; gap: .2rem; }
.hero__dados dt { display: flex; align-items: center; gap: .45rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: #8FC9DA; font-weight: 700; }
.hero__dados dd { margin: 0; font-size: var(--t-s); line-height: 1.45; }
@media (min-width: 860px) {
  .hero__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; padding-block: 4rem 4.5rem; gap: 3rem; }
}

/* Faixa da fachada */
.fachada { position: relative; z-index: 1; background: var(--turquesa); color: #fff; }
.fachada::before {
  content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M0 10C20 2 60 2 80 10S140 18 160 10V18H0Z' fill='%230396B3'/%3E%3C/svg%3E") repeat-x 0 100% / 160px 18px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cpath d='M0 12C30 3 90 3 120 12S210 21 240 12V24H0Z' fill='%230396B3' fill-opacity='.45'/%3E%3C/svg%3E") repeat-x 0 100% / 240px 24px;
  animation: onda 9s linear infinite;
}
.fachada p {
  padding-block: .7rem; font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; text-align: center;
}

/* Linhas */
.linhas { background: var(--agua); padding-block: 2rem; }
.linhas__grade { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .linhas__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.linha {
  display: grid; gap: .35rem; align-content: start; height: 100%; padding: 1rem; border-radius: var(--raio);
  background: var(--papel); border: 1px solid var(--agua-2); text-decoration: none; color: var(--tinta);
  transition: border-color .15s, transform .15s;
}
.linha:hover { border-color: var(--turquesa); transform: translateY(-2px); }
.linha__ic { width: 34px; height: 34px; color: var(--turquesa); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.linha__nome { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-m); color: var(--marinho); }
.linha__desc { font-size: var(--t-xs); color: var(--suave); line-height: 1.45; }

/* Catálogo */
.catalogo { padding-block: 3rem; }
.secao__cab { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.secao__cab p { color: var(--suave); max-width: 60ch; }
.filtros { display: grid; gap: .9rem; }
@media (min-width: 860px) { .filtros { grid-template-columns: minmax(260px, 360px) 1fr; align-items: center; } }
.busca {
  display: flex; align-items: center; gap: .6rem; min-height: 50px; padding: 0 1rem;
  border: 1.5px solid var(--linha); border-radius: 999px; background: var(--papel); color: var(--suave);
}
.busca:focus-within { border-color: var(--turquesa); }
.busca input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; color: var(--tinta); background: transparent; height: 46px; }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem;
  border-radius: 999px; border: 1.5px solid var(--linha); background: var(--papel); color: var(--tinta);
  font: 600 var(--t-s)/1 var(--f-texto); cursor: pointer;
}
.chip .n { font-weight: 500; color: var(--suave); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.chip[aria-pressed="true"] .n { color: #A9C4E6; }
.contagem { margin: 1.25rem 0 .9rem; font-size: var(--t-xs); color: var(--suave); }

.grade { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }
.prod { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--papel); }
.prod__img { aspect-ratio: 1; max-width: 100%; background: #F5F9FB; display: grid; place-items: center; }
.prod__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.prod__ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--agua); color: var(--turquesa); }
.prod__ph svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.prod__corpo { display: flex; flex-direction: column; gap: .3rem; padding: .85rem .85rem 1rem; flex: 1; }
.prod__marca { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--turquesa-txt); min-height: 1em; }
.prod__nome { font-family: var(--f-titulo); font-size: var(--t-s); font-weight: 600; line-height: 1.25; color: var(--tinta); }
.prod__apr { font-size: var(--t-xs); color: var(--suave); font-variant-numeric: tabular-nums; }
.prod__desc { font-size: var(--t-xs); color: var(--suave); line-height: 1.45; }
.prod__btn {
  margin-top: auto; padding-top: .6rem;
}
.prod__btn a {
  display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px;
  border-radius: var(--raio-p); background: var(--agua); color: var(--wa-2);
  font-weight: 700; font-size: var(--t-s); text-decoration: none; border: 1.5px solid transparent;
}
.prod__btn a:hover { background: var(--wa); color: #fff; }
@media (max-width: 420px) {
  .prod__desc { display: none; }
  .prod__corpo { padding: .7rem .7rem .8rem; }
}
.vazio { display: grid; gap: 1rem; justify-items: start; padding: 1.5rem; border: 1.5px dashed var(--linha); border-radius: var(--raio); color: var(--suave); }
.catalogo__nota { margin-top: 1.5rem; font-size: var(--t-s); color: var(--suave); }

/* Piscina */
.piscina { background: var(--agua); padding-block: 3rem; }
.piscina__in { display: grid; gap: 2rem; }
.piscina__texto { display: grid; gap: .75rem; align-content: start; }
.piscina__texto p { color: var(--suave); max-width: 52ch; }
.piscina .nota { font-size: var(--t-xs); }
@media (min-width: 860px) { .piscina__in { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 3rem; align-items: center; } }
.calc { display: grid; gap: 1rem; padding: 1.25rem; background: var(--papel); border-radius: var(--raio); border: 1px solid var(--agua-2); }
.calc__forma { display: flex; gap: .5rem; border: 0; margin: 0; padding: 0; }
.calc__forma legend { font-size: var(--t-xs); font-weight: 700; color: var(--suave); margin-bottom: .4rem; letter-spacing: .06em; text-transform: uppercase; }
.calc__forma label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px;
  border: 1.5px solid var(--linha); border-radius: var(--raio-p); font-weight: 600; font-size: var(--t-s); cursor: pointer;
}
.calc__forma label:has(input:checked) { border-color: var(--marinho); background: var(--marinho); color: #fff; }
.calc__forma input { position: absolute; opacity: 0; pointer-events: none; }
.calc__forma label:has(input:focus-visible) { outline: 3px solid var(--turquesa); outline-offset: 2px; }
.calc__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.calc__campos label { display: grid; gap: .3rem; font-size: var(--t-xs); font-weight: 700; color: var(--suave); }
.calc__campos label span { font-weight: 500; }
.calc__campos input {
  min-height: 48px; padding: 0 .9rem; border: 1.5px solid var(--linha); border-radius: var(--raio-p);
  font: 600 var(--t-m) var(--f-texto); color: var(--tinta); background: var(--papel); width: 100%;
  font-variant-numeric: tabular-nums;
}
.calc__campos input:focus { border-color: var(--turquesa); outline: none; }
.calc__res { display: grid; gap: .1rem; padding: 1rem; border-radius: var(--raio-p); background: var(--marinho); color: #fff; }
.calc__litros { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__m3 { font-size: var(--t-xs); color: #B8CDEA; }

/* Empresas */
.empresas { padding-block: 3rem; }
.empresas__in { display: grid; gap: 1.75rem; }
.empresas__in > div { display: grid; gap: .8rem; justify-items: start; }
.empresas__in > div p:not(.sobretitulo) { color: var(--suave); max-width: 52ch; }
.segmentos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-content: center; }
.segmentos li {
  padding: .8rem .9rem; border-radius: var(--raio-p); background: var(--agua);
  font-weight: 600; font-size: var(--t-s); color: var(--marinho);
}
@media (min-width: 860px) { .empresas__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; } }

/* Sobre */
.sobre { border-top: 1px solid var(--linha); padding-block: 2.75rem; }
.sobre__in { display: grid; gap: 1rem; align-items: center; }
.sobre__in p:not(.sobre__ano) { color: var(--suave); max-width: 62ch; margin-top: .6rem; }
.sobre__ano {
  font-family: var(--f-titulo); font-weight: 700; font-size: clamp(3.5rem, 2rem + 7vw, 7rem); line-height: .9;
  color: transparent; -webkit-text-stroke: 2px var(--turquesa); letter-spacing: -.03em;
}
@media (min-width: 860px) { .sobre__in { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; } }

/* Contato */
.contato { background: var(--marinho); color: #fff; padding-block: 3rem; }
.contato h2 { color: #fff; }
.contato__in { display: grid; gap: 2rem; }
.contato__end { margin: .9rem 0; font-size: var(--t-l); line-height: 1.35; font-family: var(--f-titulo); font-weight: 500; }
.link-seta { display: inline-flex; align-items: center; gap: .35rem; color: #7FD3E4; font-weight: 700; text-decoration: none; }
.link-seta:hover { text-decoration: underline; }
.horarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; align-self: start; }
.horarios caption { text-align: left; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8FC9DA; padding-bottom: .5rem; }
.horarios th, .horarios td { padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.15); text-align: left; font-weight: 500; }
.horarios td { text-align: right; }
.horarios tr.hoje th, .horarios tr.hoje td { color: #7FD3E4; font-weight: 700; }
.contato__canais { display: grid; gap: .9rem; align-content: start; justify-items: start; }
.contato__canais p { display: grid; gap: .1rem; }
.rotulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8FC9DA; }
.contato__canais a:not(.btn) { color: #fff; }
@media (min-width: 860px) { .contato__in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }

/* Rodapé */
.rodape { background: var(--marinho-2); color: #A9BDD9; padding-block: 2rem calc(6rem + env(safe-area-inset-bottom, 0px)); font-size: var(--t-xs); }
.rodape__in { display: grid; gap: 1rem; }
.rodape img { width: 150px; height: auto; opacity: .9; }
.rodape__legal { color: #7F94B3; }
@media (min-width: 860px) { .rodape { padding-bottom: 2rem; } }

/* Botão flutuante (celular) */
.flutuante {
  position: fixed; z-index: 25;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #fff; box-shadow: 0 6px 20px rgba(2, 36, 89, .3);
}
.flutuante .ic { width: 28px; height: 28px; }
@media (min-width: 860px) { .flutuante { display: none; } }

/* Movimento: leve, só CSS. Tudo é desligado com "reduzir movimento" (regra no topo do arquivo). */
@keyframes onda { to { background-position: -160px 100%, 240px 100%; } }
@keyframes brilho { to { translate: -10% 12%; } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(18, 138, 85, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(18, 138, 85, 0); } }
@keyframes chega { from { scale: .5; opacity: 0; } }
@keyframes chama {
  0%, 100% { box-shadow: 0 6px 20px rgba(2, 36, 89, .3), 0 0 0 0 rgba(23, 132, 63, .45); }
  50% { box-shadow: 0 6px 20px rgba(2, 36, 89, .3), 0 0 0 14px rgba(23, 132, 63, 0); }
}

.hero::after { animation: brilho 16s ease-in-out infinite alternate; }
.status.aberto::before { animation: pulso 2s ease-out infinite; }
.flutuante { animation: chega .45s cubic-bezier(.2, .9, .3, 1.3) .6s both, chama 1.6s ease-out 1.4s 2; }

.btn { transition: background-color .18s, transform .18s, box-shadow .18s; }
.chip { transition: background-color .18s, border-color .18s, color .18s, transform .12s; }
.prod__btn a { transition: background-color .18s, color .18s, transform .12s; }
.prod__btn a .ic, .linha__ic { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.btn:active, .chip:active, .prod__btn a:active { transform: scale(.97); }

@media (hover: hover) {
  .btn--wa:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 132, 63, .28); }
  .prod { transition: border-color .2s, box-shadow .2s, transform .2s; }
  .prod:hover { border-color: var(--agua-2); box-shadow: 0 10px 24px rgba(3, 48, 122, .08); transform: translateY(-2px); }
  .prod__img img, .prod__ph svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .prod:hover .prod__img img, .prod:hover .prod__ph svg { transform: scale(1.06); }
  .prod__btn a:hover .ic { transform: rotate(-10deg) scale(1.1); }
  .linha:hover .linha__ic { transform: translateY(-3px) rotate(-4deg); }
}

/* Entrada ao rolar: só deslocamento, o conteúdo nunca fica invisível.
   Navegadores sem suporte mostram tudo parado, sem prejuízo. */
@supports (animation-timeline: view()) {
  @keyframes sobe { from { translate: 0 28px; scale: .98; } to { translate: none; scale: none; } }
  .prod, .linha, .segmentos li {
    animation: sobe cubic-bezier(.2, .7, .2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  .prod:nth-child(4n+2), .linhas__grade li:nth-child(2n) .linha, .segmentos li:nth-child(2n) { animation-range: entry 8% entry 78%; }
  .prod:nth-child(4n+3) { animation-range: entry 16% entry 86%; }
  .prod:nth-child(4n) { animation-range: entry 24% entry 94%; }
}