/* Piscineiro Online — base.
   Conceito: olhar a piscina de cima num dia de sol. Branco de azulejo, azul de água limpa,
   texto no azul do fundo da piscina. Cor forte só para o estado da água (semáforo). */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/static/v/be01014cfd/fontes/inter.woff2) format("woff2"); }

:root {
  --branco: #FFFFFF;
  --agua: #E8F6FA;          /* superfícies: água rasa */
  --agua-media: #CDEBF4;
  --piscina: #0A84C6;       /* ação */
  --piscina-escura: #076A9F;
  --fundo: #0C3B4F;         /* texto: o azul do fundo da piscina */
  --raia: #557583;          /* texto secundário */
  --borda: #D6E6EC;
  --ok: #1F8A5B;      --ok-fundo: #E3F4EC;
  --atencao: #B26A00; --atencao-fundo: #FDF1DC;
  --pare: #C2332B;    --pare-fundo: #FBE8E6;
  --verde-agua: #5E9E3A;    /* água verde no disco */
  --raio: 14px;
  --raio-grande: 22px;
  --fonte: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  --fonte-titulo: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, Inter, sans-serif;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--branco); color: var(--fundo);
  font: 400 18px/1.5 var(--fonte);
}
img { max-width: 100%; display: block; }
a { color: var(--piscina-escura); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--piscina); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--fonte-titulo); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .45em; font-weight: 700; }
h1 { font-size: clamp(2rem, 7vw, 3.4rem); }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; font-weight: 650; }
p { margin: 0 0 1em; }
.discreto { color: var(--raia); }
.pequeno { font-size: .9rem; }

/* ---------- botões: grandes, um principal por tela ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: 16px; border: 0;
  font: 600 1.06rem/1.2 var(--fonte); text-decoration: none; cursor: pointer;
  background: var(--agua); color: var(--fundo); width: 100%;
}
.botao.principal { background: var(--piscina); color: #fff; }
.botao.principal:active { background: var(--piscina-escura); }
.botao.contorno { background: transparent; box-shadow: inset 0 0 0 2px var(--borda); }
.botao.texto { background: transparent; color: var(--piscina-escura); min-height: 48px; width: auto; padding: 0 8px; }
.botao.perigo { background: var(--pare-fundo); color: var(--pare); }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.botao.escuro { background: #000; color: #fff; }
.botao svg { width: 22px; height: 22px; flex: none; }

/* ---------- campos ---------- */
label.rotulo { display: block; font-weight: 600; margin: 0 0 6px; }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; font: 400 1.1rem/1.3 var(--fonte); color: var(--fundo); background: var(--branco);
  border: 2px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; min-height: 56px;
}
input:focus, select:focus, textarea:focus { border-color: var(--piscina); outline: none; }
.marcar { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; line-height: 1.45; cursor: pointer; }
.marcar input { width: 26px; height: 26px; margin: 2px 0 0; flex: none; accent-color: var(--piscina); }

/* ---------- o disco d'água: a assinatura visual ---------- */
.disco {
  --cor-a: #4FC3E8; --cor-b: #0A84C6;
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, var(--cor-a), var(--cor-b) 75%);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.55), 0 18px 50px -18px rgba(10,132,198,.55);
  isolation: isolate;
}
.disco::before, .disco::after {
  content: ""; position: absolute; inset: -30%; z-index: -1; opacity: .55; mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse 18% 9% at 30% 40%, #fff 0 40%, transparent 70%),
    radial-gradient(ellipse 14% 7% at 62% 28%, #fff 0 35%, transparent 70%),
    radial-gradient(ellipse 22% 8% at 55% 66%, #fff 0 35%, transparent 70%),
    radial-gradient(ellipse 12% 6% at 22% 72%, #fff 0 35%, transparent 70%),
    radial-gradient(ellipse 16% 7% at 80% 55%, #fff 0 35%, transparent 70%);
  animation: luz 14s ease-in-out infinite alternate;
}
.disco::after { animation-duration: 19s; animation-direction: alternate-reverse; transform: rotate(40deg); opacity: .4; }
@keyframes luz { from { transform: translate(-4%, -3%) scale(1); } to { transform: translate(5%, 4%) scale(1.08) rotate(6deg); } }
.disco.verde { --cor-a: #A8C95A; --cor-b: var(--verde-agua); }
.disco.turva { --cor-a: #CFE3E6; --cor-b: #8FB4BC; }
.disco.atencao { --cor-a: #7FD3EE; --cor-b: #2C8FB8; }
.disco.pare { --cor-a: #9ED8EA; --cor-b: #2E7FA0; box-shadow: inset 0 0 0 10px rgba(194,51,43,.35), 0 18px 50px -18px rgba(194,51,43,.45); }
@media (prefers-reduced-motion: reduce) { .disco::before, .disco::after { animation: none; } }

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.08rem; color: var(--fundo); text-decoration: none; letter-spacing: -0.01em; }
.gota { width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(135deg); margin-top: 6px;
  background: radial-gradient(circle at 70% 30%, #6fd0ee, var(--piscina) 70%); flex: none; }

/* ---------- páginas de texto (termos, privacidade) ---------- */
.pagina-texto { background: var(--branco); }
.topo-simples { padding: 18px 20px; border-bottom: 1px solid var(--borda); }
.texto-legal { max-width: 720px; margin: 0 auto; padding: 32px 20px 48px; font-size: 1.05rem; }
.texto-legal h1 { font-size: 2.1rem; }
.texto-legal h2 { font-size: 1.3rem; margin-top: 1.8em; }
.texto-legal li { margin-bottom: .5em; }
.resumo-legal { background: var(--agua); border-radius: var(--raio-grande); padding: 20px 22px 8px; }
.resumo-legal h2 { margin-top: 0; }
.tabela-rolavel { overflow-x: auto; }
.tabela-rolavel table { border-collapse: collapse; min-width: 560px; font-size: .95rem; }
.tabela-rolavel th, .tabela-rolavel td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.rodape { text-align: center; padding: 28px 20px calc(28px + var(--seguro-baixo)); color: var(--raia); font-size: .95rem; }
.rodape a { color: var(--raia); margin: 0 8px; }