/* Piscineiro de Aluguel: estilo do site */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: #33475b; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: #00a6d6; color: #fff; }
a:focus-visible { outline: 2px solid #0086ad; outline-offset: 3px; border-radius: 4px; }
:is(.pa-nav, .meu-slide, .pa-rodape) a:focus-visible { outline-color: #4cc9ec; }
#sobre, #servicos, #contato { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Link para pular direto ao conteúdo, visível só no foco do teclado */
.pular { position: absolute; z-index: 1001; top: 8px; left: 8px; padding: .6em 1em; border-radius: 8px; background: #fff; color: #001e32; font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.pular:focus { transform: none; }

/* Abertura com tema de piscina (só CSS, duração fixa de 2,5s)
   0–0,6s: o logo cai como uma gota e os anéis se abrem em volta
   0,3–1,9s: a água sobe com duas ondas em movimento até cobrir a tela
   1,9–2,5s: a tela inteira sai para cima e revela o slide */
.pa-splash { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; overflow: hidden; background: #001e32; clip-path: inset(0 0 0 0); animation: pa-splash-sai .6s cubic-bezier(.65,0,.35,1) 1.9s forwards; }
.pa-splash__marca { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pa-splash__gota { position: relative; width: 112px; height: 112px; animation: pa-splash-gota .6s cubic-bezier(.34,1.4,.64,1) both; }
.pa-splash__gota img { position: relative; width: 100%; height: 100%; border-radius: 50%; }
.pa-splash__anel { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; opacity: 0; animation: pa-splash-anel 1.4s cubic-bezier(.22,1,.36,1) .45s infinite; }
.pa-splash__anel:nth-child(2) { animation-delay: .75s; }
.pa-splash__anel:nth-child(3) { animation-delay: 1.05s; }
.pa-splash__nome { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.01em; animation: pa-splash-nome .5s ease-out .35s both; }
.pa-splash__mar { position: absolute; inset: 0; display: flex; flex-direction: column; translate: 0 100%; animation: pa-splash-enche 1.6s cubic-bezier(.5,0,.15,1) .3s forwards; }
.pa-splash__crista { flex: none; width: 200%; max-width: none; height: 56px; margin-bottom: -1px; fill: #00a6d6; animation: pa-splash-mare 1.6s linear infinite; }
.pa-splash__crista--tras { position: absolute; top: -18px; left: -30%; fill: #4cc9ec; opacity: .5; animation-duration: 2.3s; animation-direction: reverse; }
.pa-splash__fundo { flex: 1; background: #00a6d6; }
@keyframes pa-splash-gota { from { opacity: 0; translate: 0 -48px; scale: .7; } }
@keyframes pa-splash-anel { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 2.8; } }
@keyframes pa-splash-nome { from { opacity: 0; translate: 0 8px; } }
@keyframes pa-splash-enche { to { translate: 0 -56px; } }
@keyframes pa-splash-mare { to { translate: -50% 0; } }
@keyframes pa-splash-sai { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .pa-splash { display: none; }
}

/* Navbar: transparente sobre a foto, azul-escuro sólido depois de rolar */
.pa-nav { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; background: #001e32; }
.pa-nav__interno { max-width: 1200px; height: 80px; margin: 0 auto; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-sizing: content-box; }
.pa-nav__marca { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.pa-nav__marca img { width: 52px; height: 52px; border-radius: 50%; }
.pa-nav__menu { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); }
.pa-nav__menu a { color: rgba(255,255,255,.9); font-size: 15px; font-weight: 500; text-decoration: none; text-underline-offset: 6px; transition: color .2s; }
.pa-nav__menu a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; }
.pa-nav__menu .pa-nav__botao { padding: .7em 1.4em; border-radius: 999px; background: #00a6d6; color: #fff; font-weight: 600; transition: background .2s; }
.pa-nav__menu .pa-nav__botao:hover { background: #0086ad; text-decoration: none; }
/* Ícone do menu do celular: três linhas para abrir, X para fechar */
.pa-nav__icone { display: none; width: 44px; height: 44px; padding: 10px; border-radius: 8px; }
.pa-nav__icone span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: #fff; }
.pa-nav__fechar span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pa-nav__fechar span:nth-child(2) { opacity: 0; }
.pa-nav__fechar span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .pa-nav__interno { height: 68px; }
  .pa-nav__marca { font-size: 16px; }
  .pa-nav__marca img { width: 44px; height: 44px; }
  .pa-nav__abrir { display: block; }
  .pa-nav__menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 6% 24px; background: #001e32; }
  /* Menu aberto enquanto #menu for o alvo da URL; tocar num item muda o alvo e o menu fecha */
  .pa-nav:has(#menu:target) .pa-nav__abrir { display: none; }
  .pa-nav:has(#menu:target) .pa-nav__fechar { display: block; }
  #menu:target { display: flex; }
  /* !important para vencer a animação de transparência da navbar */
  .pa-nav:has(#menu:target) { background: #001e32 !important; }
  .pa-nav__menu a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 17px; }
  .pa-nav__menu .pa-nav__botao { margin-top: 16px; border-bottom: 0; text-align: center; }
}

/* Slide: rolagem horizontal com encaixe; o arraste com o dedo é nativo do navegador */
.meu-slide { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #001e32; }
/* Escurece o topo da foto para a navbar transparente continuar legível */
.meu-slide::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(rgba(0,30,50,.6), rgba(0,30,50,0)); pointer-events: none; }
.meu-slide__trilho { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.meu-slide__trilho::-webkit-scrollbar { display: none; }
.meu-slide__item { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 0; view-timeline: --pa-slide x; }
.meu-slide__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,50,.78) 0%, rgba(0,30,50,.4) 55%, rgba(0,30,50,.05) 100%); }
.meu-slide__item img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.meu-slide__conteudo { position: absolute; z-index: 2; top: calc(50% + 40px); left: 8%; transform: translateY(-60%); max-width: min(640px, 80%); color: #fff; }
.meu-slide__conteudo :is(h1, h2) { margin-bottom: 2.4vh; color: #fff; font-size: clamp(32px, 6.4vh, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.meu-slide__conteudo p { margin-bottom: 4vh; max-width: 52ch; color: rgba(255,255,255,.9); font-size: clamp(16px, 2.2vh, 20px); line-height: 1.55; text-wrap: pretty; }
.meu-slide__botao { display: inline-block; padding: .95em 1.9em; border-radius: 999px; background: #00a6d6; color: #fff; font-weight: 600; text-decoration: none; transition: background .2s; }
.meu-slide__botao:hover { background: #0086ad; }
.meu-slide__seta { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; transition: background .2s, border-color .2s; }
.meu-slide__seta:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.meu-slide__seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.meu-slide__seta--ant { left: 2%; }
.meu-slide__seta--prox { right: 2%; }
.meu-slide__pontos { position: absolute; bottom: 13vh; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.meu-slide__pontos a { display: block; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.45); transition: background .2s; }
.meu-slide__pontos a:hover { background: rgba(255,255,255,.8); }
.meu-slide__pontos a.ativo { width: 24px; background: #fff; }
.meu-slide__onda { position: absolute; z-index: 2; bottom: -1px; left: 0; width: 100%; height: 12vh; pointer-events: none; }
@media (max-width: 700px) {
  .meu-slide__item::after { background: rgba(0,30,50,.58); }
  .meu-slide__conteudo { left: 50%; transform: translate(-50%, -60%); width: 84%; text-align: center; }
  .meu-slide__conteudo :is(h1, h2) { font-size: clamp(30px, 9vw, 42px); }
  .meu-slide__conteudo p { margin-left: auto; margin-right: auto; }
  .meu-slide__seta { display: none; }
}

/* Quem somos, diferenciais e chamada final */
.pa-sobre { padding: clamp(64px, 10vw, 128px) 6% clamp(56px, 8vw, 104px); }
.pa-sobre__interno { max-width: 1200px; margin: 0 auto; }

.pa-sobre__quem { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(64px, 9vw, 120px); }
.pa-sobre__quem h2 { color: #001e32; font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.pa-sobre__texto p { margin-bottom: 1.1em; max-width: 62ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; text-wrap: pretty; }
.pa-sobre__texto p:first-child { color: #001e32; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; }
.pa-sobre__texto p:last-child { margin-bottom: 0; }

.pa-sobre__painel-titulo { margin-bottom: clamp(28px, 4vw, 40px); color: #001e32; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.pa-sobre__dif { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); }
.pa-sobre__dif li { padding-top: 20px; border-top: 2px solid #00a6d6; }
.pa-sobre__dif h4 { margin-bottom: 8px; color: #001e32; font-size: 18px; font-weight: 600; line-height: 1.3; }
.pa-sobre__dif p { font-size: 15px; line-height: 1.6; }

.pa-sobre__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgba(0,30,50,.12); }
.pa-sobre__cta p { font-size: clamp(18px, 2vw, 22px); line-height: 1.4; }
.pa-sobre__cta strong { color: #001e32; font-weight: 700; }
.pa-sobre__botao { display: inline-block; padding: .95em 1.9em; border-radius: 999px; background: #00a6d6; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s; }
.pa-sobre__botao:hover { background: #0086ad; }

@media (max-width: 960px) {
  .pa-sobre__quem { grid-template-columns: 1fr; }
  .pa-sobre__dif { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pa-sobre__dif { grid-template-columns: 1fr; }
  .pa-sobre__cta { flex-direction: column; align-items: flex-start; }
}

/* Serviços: lista editorial, um serviço por linha */
.pa-serv { padding: clamp(40px, 6vw, 80px) 6% clamp(72px, 10vw, 128px); }
.pa-serv__interno { max-width: 1200px; margin: 0 auto; }
.pa-serv__interno > h2 { margin-bottom: clamp(32px, 5vw, 56px); color: #001e32; font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.pa-serv__item { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(20px, 6vw, 96px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid rgba(0,30,50,.14); }
.pa-serv__item:last-child { border-bottom: 1px solid rgba(0,30,50,.14); }
.pa-serv__item h3 { color: #001e32; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.pa-serv__corpo p { margin-bottom: 16px; max-width: 60ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; }
.pa-serv__corpo ul { margin-bottom: 24px; padding-left: 1.1em; }
.pa-serv__corpo li { margin-bottom: 6px; padding-left: 4px; font-size: 15px; line-height: 1.5; }
.pa-serv__corpo li::marker { color: #00a6d6; }
.pa-serv__link { display: inline-flex; align-items: center; gap: 8px; color: #0086ad; font-weight: 600; text-decoration: none; transition: color .2s, gap .2s cubic-bezier(.22,1,.36,1); }
.pa-serv__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-serv__link:hover { gap: 12px; color: #001e32; }
@media (max-width: 760px) {
  .pa-serv__item { grid-template-columns: 1fr; gap: 14px; }
}

/* Rodapé */
.pa-rodape { background: #001e32; padding: clamp(48px, 7vw, 80px) 6% 0; color: rgba(255,255,255,.72); }
.pa-rodape__grade { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(32px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 56px); }
.pa-rodape__nome { display: block; margin-bottom: 16px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.pa-rodape__marca p { margin-bottom: 12px; max-width: 420px; font-size: 15px; line-height: 1.65; }
.pa-rodape__slogan { color: #4cc9ec; font-weight: 600; }
.pa-rodape h2 { margin-bottom: 16px; color: #fff; font-size: 15px; font-weight: 600; }
.pa-rodape ul { padding: 0; list-style: none; }
.pa-rodape li { margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
.pa-rodape__contato a { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); text-decoration: none; text-underline-offset: 4px; transition: color .2s; }
.pa-rodape__contato a:hover { color: #fff; text-decoration: underline; }
.pa-rodape__contato svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pa-rodape__base { max-width: 1200px; margin: 0 auto; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
@media (max-width: 860px) {
  .pa-rodape__grade { grid-template-columns: 1fr 1fr; }
  .pa-rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pa-rodape__grade { grid-template-columns: 1fr; }
}

/* Movimento (só CSS): um único momento, o slide. Ao arrastar, a foto aproxima e o texto entra e sai com o dedo.
   Só existe para quem não pediu "reduzir movimento"; sem suporte a animation-timeline, tudo fica parado e visível. */
@keyframes pa-transparente { from { background: rgba(0,30,50,0); } to { background: #001e32; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pa-slide-texto { 0%, 15% { opacity: 0; translate: 64px 0; } 50% { opacity: 1; translate: 0 0; } 85%, 100% { opacity: 0; translate: -64px 0; } }
  @keyframes pa-slide-zoom { 0%, 100% { scale: 1.12; } 50% { scale: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .meu-slide__trilho { scroll-behavior: auto; }
}
@supports (animation-timeline: scroll()) {
  /* Navbar transparente no topo, fica sólida nos primeiros 120px de rolagem */
  .pa-nav { animation: pa-transparente linear both; animation-timeline: scroll(root); animation-range: 0px 120px; }
}
@supports (animation-timeline: view()) {
  .meu-slide__item img { animation: pa-slide-zoom linear both; animation-timeline: --pa-slide; }
  .meu-slide__conteudo > * { animation: pa-slide-texto linear both; animation-timeline: --pa-slide; }
  .meu-slide__conteudo > :nth-child(2) { animation-range: cover 5% cover 95%; }
  .meu-slide__conteudo > :nth-child(3) { animation-range: cover 10% cover 90%; }
}