/* =====================================================================
   NADAR CONSTA — tema piscina (água, limpeza, frescor)
   ===================================================================== */
:root {
  --font-head: "Sora", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --brand: #0a91d6;            /* azul-piscina */
  --brand-2: #4fc3f7;          /* ciano claro */
  --accent: #00c2cb;           /* turquesa */
  --deep: #074b7c;             /* azul profundo */
  --ink: #143447;
  --ink-strong: #06283d;
  --muted: #5b7689;
  --bg: #ffffff;
  --bg-soft: #eef9ff;
  --bg-deep: #06283d;
  --line: #d6ecf7;
  --card: #ffffff;
  --logo-h: 50px;
}

.eyebrow { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* ----- Hero água ----- */
.hero-nadar {
  background: linear-gradient(165deg, #e8f8ff 0%, #c7ecfb 45%, #9fdcf6 100%);
  color: var(--ink-strong);
  padding-block: clamp(130px, 18vw, 210px) 0;
}
.hero-nadar h1 { color: var(--ink-strong); }
.hero-nadar h1 .hl { color: var(--brand); }
.hero-nadar .lead { color: #2d5871; }

/* bolhas decorativas */
.bubbles { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.bubbles span {
  position: absolute; bottom: -60px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.98), rgba(190,232,250,.35) 60%, rgba(120,200,235,.15));
  border: 1.5px solid rgba(255,255,255,.75);
  box-shadow: inset 0 0 10px rgba(255,255,255,.8), 0 4px 14px rgba(10,145,214,.18);
  animation: rise linear infinite; opacity: .85;
}
.bubbles span:nth-child(1){ left:6%;  width:22px; height:22px; animation-duration: 14s; }
.bubbles span:nth-child(2){ left:18%; width:34px; height:34px; animation-duration: 18s; animation-delay:2s; }
.bubbles span:nth-child(3){ left:32%; width:14px; height:14px; animation-duration: 11s; animation-delay:1s; }
.bubbles span:nth-child(4){ left:46%; width:28px; height:28px; animation-duration: 16s; animation-delay:3s; }
.bubbles span:nth-child(5){ left:58%; width:18px; height:18px; animation-duration: 13s; }
.bubbles span:nth-child(6){ left:70%; width:40px; height:40px; animation-duration: 21s; animation-delay:2.5s; }
.bubbles span:nth-child(7){ left:82%; width:16px; height:16px; animation-duration: 12s; animation-delay:1.5s; }
.bubbles span:nth-child(8){ left:92%; width:26px; height:26px; animation-duration: 17s; animation-delay:4s; }
.bubbles span:nth-child(9){ left:38%; width:20px; height:20px; animation-duration: 19s; animation-delay:5s; }
.bubbles span:nth-child(10){ left:64%; width:12px; height:12px; animation-duration: 10s; animation-delay:.5s; }
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .85; }
  50%  { transform: translateY(-55vh) translateX(14px); }
  90%  { opacity: .7; }
  100% { transform: translateY(-115vh) translateX(-10px); opacity: 0; }
}

.hero-nadar .container { position: relative; z-index: 2; }
.hero-nadar__media { position: relative; }
.hero-nadar__media img { border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(7,75,124,.5); }
.float-card {
  position: absolute; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 18px 40px -18px rgba(7,75,124,.4);
  display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink-strong); font-family: var(--font-head);
  animation: bob 4s ease-in-out infinite;
}
.float-card small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; }
.float-card .dot { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); display: grid; place-items: center; }
.float-card--1 { top: 24px; left: -22px; }
.float-card--2 { bottom: 30px; right: -18px; animation-delay: 1.5s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* onda separadora */
.wave-sep { display: block; width: 100%; height: clamp(50px, 8vw, 110px); margin-bottom: -2px; }
.wave-sep + .section { margin-top: -1px; }

/* ----- Serviços ----- */
.service {
  position: relative; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, #fff, #f5fcff);
}
.service .icon-badge { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 12px 24px -10px var(--brand); }
.service h3 { font-size: 1.2rem; margin-bottom: 8px; }
.service p { color: var(--muted); }
.service::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 7%, transparent); transition: transform .4s ease; }
.service:hover::after { transform: scale(1.5); }

/* lista check */
.check-list { display: grid; gap: 14px; margin-top: 8px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.check-list .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); display: grid; place-items: center; margin-top: 2px; }
.check-list strong { display: block; }
.check-list span.txt { color: var(--muted); font-size: .95rem; }

/* ----- processo ----- */
.step { position: relative; text-align: center; padding-top: 14px; }
.step__n { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 14px 28px -12px var(--brand); }
.step h4 { margin-bottom: 6px; }
.step p { color: var(--muted); }

/* ----- bloco água CTA ----- */
.cta-nadar { background: linear-gradient(135deg, var(--deep), var(--brand)); }
.cta-nadar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath fill='%23ffffff' fill-opacity='0.12' d='M0,30 C200,60 400,0 600,30 C800,60 1000,0 1200,30 L1200,60 L0,60 Z'/%3E%3C/svg%3E") repeat-x; background-size: 1200px 60px; }

.section--soft { background: var(--bg-soft); }

/* faixa de confiança */
.trust-bar { display: flex; flex-wrap: wrap; gap: 28px 44px; justify-content: center; align-items: center; }
.trust-bar .ti { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--deep); font-family: var(--font-head); }
.trust-bar .ti svg { width: 26px; height: 26px; color: var(--brand); }

/* ----- Mobile ----- */
@media (max-width: 760px) {
  /* Float cards têm posições negativas que extravasam em mobile */
  .float-card--1, .float-card--2 { display: none; }
  .hero-nadar__media { margin-top: 32px; }
}

@media (max-width: 520px) {
  .hero-nadar { padding-top: 90px; }
  .trust-bar { gap: 16px 22px; }
  .trust-bar .ti { font-size: .92rem; }
}