/* =====================================================================
   Página única da Surfitness.
   Topo fixo, hero escuro com a prancha, benefícios, kit, vídeo,
   contato e rodapé. Todo botão de venda/contato abre o WhatsApp.
   Quebras: 640px (sm), 768px (md) e 1024px (lg).
   ===================================================================== */

.pagina { min-height: 100vh; overflow-x: clip; background-color: var(--fundo); color: var(--texto); }

.largura { margin-inline: auto; max-width: var(--largura); padding-inline: 1.25rem; }
@media (min-width: 40rem) { .largura { padding-inline: 2rem; } }

.icone-4 { width: 1rem; height: 1rem; }
.icone-5 { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icone-7 { width: 1.75rem; height: 1.75rem; }

/* Luzes e texturas do mar */
.grade-oceano {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--ciano) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ciano) 14%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
.linha-onda { background: linear-gradient(90deg, transparent, var(--ciano), transparent); }
.brilho-ciano {
  border-radius: 9999px;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--ciano) 30%, transparent), transparent);
}

/* Etiqueta acima dos títulos */
.sobretitulo {
  margin-bottom: .75rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--primaria);
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  height: 3.5rem;
  align-items: center;
  gap: .75rem;
  border-radius: 9999px;
  padding-inline: 2rem;
  font-weight: 700;
  transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva);
}
.botao-ciano { background-color: var(--ciano); color: var(--ciano-texto); }
.botao-escuro { background-color: var(--oceano); color: var(--oceano-texto); }
@media (hover: hover) {
  .botao:hover { translate: 0 -.25rem; }
  .botao-ciano:hover { background-color: var(--branco); }
  .botao-escuro:hover { background-color: var(--primaria); }
}

/* ---------- Topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in oklab, var(--linha) 60%, transparent);
  background-color: color-mix(in oklab, var(--fundo) 90%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.topo-conteudo { display: flex; height: 5rem; align-items: center; justify-content: space-between; }
.topo-logo { display: block; width: 10rem; }
.topo-logo img { width: 100%; height: auto; }
.topo-menu { display: none; align-items: center; gap: 2rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; }
.topo-menu a { transition: color .15s var(--curva); }
.topo-contato {
  display: inline-flex;
  height: 2.75rem;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background-color: var(--ciano);
  padding-inline: 1rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 700;
  color: var(--ciano-texto);
  transition: all .15s var(--curva);
}
.topo-contato span { display: none; }
@media (hover: hover) {
  .topo-menu a:hover { color: var(--primaria); }
  .topo-contato:hover { translate: 0 -.125rem; background-color: var(--primaria); color: var(--primaria-texto); }
}
@media (min-width: 40rem) {
  .topo-logo { width: 12rem; }
  .topo-contato { padding-inline: 1.5rem; }
  .topo-contato span { display: inline; }
}
@media (min-width: 64rem) { .topo-menu { display: flex; } }

/* ---------- Hero ---------- */
.hero { padding: 1rem .75rem 0; }
.hero-caixa {
  position: relative;
  margin-inline: auto;
  max-width: var(--largura);
  overflow: hidden;
  border-radius: 2rem;
  background-color: var(--oceano);
  color: var(--oceano-texto);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.hero-grade { position: absolute; inset: 0; opacity: .25; }
.hero-degrade {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-image: linear-gradient(to right in oklab,
    var(--oceano) 0%,
    color-mix(in oklab, var(--oceano) 85%, transparent) 50%,
    color-mix(in oklab, var(--oceano) 10%, transparent) 100%);
}
.hero-brilho { position: absolute; right: -6rem; top: 33.333333%; width: 28rem; height: 28rem; }
.hero-conteudo {
  position: relative;
  margin-inline: auto;
  display: grid;
  max-width: var(--largura);
  align-items: center;
  gap: 1.5rem;
  padding: 2.5rem 1.5rem;
}
.hero-texto { z-index: 10; max-width: 36rem; }
.hero-sobretitulo {
  display: block;
  margin-bottom: 1rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ciano);
}
.hero h1 { font-size: 3rem; line-height: 1.02; font-weight: 800; }
.hero h1 span { display: block; color: var(--ciano); }
.hero-descricao {
  margin-top: 1.5rem;
  max-width: 32rem;
  font-size: 1rem;
  line-height: 1.75rem;
  color: color-mix(in oklab, var(--oceano-texto) 75%, transparent);
}
.hero-acoes { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 600;
  color: color-mix(in oklab, var(--oceano-texto) 80%, transparent);
  transition: color .15s var(--curva);
}
@media (hover: hover) { .hero-link:hover { color: var(--ciano); } }

.hero-imagem { position: relative; display: flex; min-height: 250px; align-items: center; justify-content: center; }
.hero-imagem-brilho { position: absolute; left: 2.5rem; right: 2.5rem; bottom: 14%; height: 8rem; opacity: .7; }
.hero-numero {
  position: absolute;
  right: 0;
  top: 1rem;
  font-family: var(--fonte-titulo);
  font-size: 8rem;
  line-height: 1;
  font-weight: 800;
  color: color-mix(in oklab, var(--oceano-texto) 5%, transparent);
}
.hero-imagem img { position: relative; z-index: 10; width: 100%; max-width: 56rem; object-fit: contain; filter: drop-shadow(0 25px 25px rgb(0 0 0 / .15)); }

@media (min-width: 40rem) {
  .hero { padding: 1.5rem 1.25rem 0; }
  .hero-conteudo { padding: 3.5rem 3rem; }
  .hero h1 { font-size: 3.75rem; }
  .hero-descricao { font-size: 1.125rem; }
  .hero-acoes { margin-top: 2.25rem; gap: 1.5rem; }
  .hero-imagem { min-height: 360px; }
  .hero-numero { font-size: 12rem; }
}
@media (min-width: 64rem) {
  .hero-degrade { width: 60%; }
  .hero-conteudo { grid-template-columns: 0.85fr 1.15fr; gap: 2rem; padding-block: 5rem; }
  .hero h1 { font-size: 4.5rem; }
  .hero-imagem { min-height: 600px; }
}

/* ---------- Seções ---------- */
.secao { padding-block: 5rem; }
.secao-clara { background-color: var(--fundo); }
.secao-suave { background-color: var(--suave); }
@media (min-width: 40rem) { .secao { padding-block: 7rem; } }

.cabecalho { margin-inline: auto; max-width: 42rem; text-align: center; }
.cabecalho h2 { font-size: 2.25rem; line-height: calc(2.5 / 2.25); font-weight: 800; }
.cabecalho-barra { margin: 1.5rem auto 0; height: .25rem; width: 6rem; border-radius: 9999px; background-color: var(--ciano); }
.cabecalho p:last-child { margin-top: 1.5rem; font-size: 1.125rem; line-height: 2rem; color: var(--suave-texto); }
@media (min-width: 40rem) { .cabecalho h2 { font-size: 3rem; line-height: 1; } }

/* Benefícios */
.beneficios { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
.beneficio {
  border-radius: 28px;
  border-width: 1px;
  background-color: var(--cartao);
  padding: 2rem;
  transition: all .3s var(--curva);
}
.beneficio-icone {
  margin-bottom: 2rem;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 24px;
  background-image: linear-gradient(to bottom right in oklab, var(--primaria) 0%, var(--oceano) 100%);
  color: var(--branco);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  transition: transform .3s var(--curva), translate .3s var(--curva), scale .3s var(--curva), rotate .3s var(--curva);
}
.beneficio h3 { font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 700; }
.beneficio p { margin-top: 1rem; line-height: 1.75rem; color: var(--suave-texto); }
@media (hover: hover) {
  .beneficio:hover { translate: 0 -.25rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
  .beneficio:hover .beneficio-icone { scale: 1.1; }
}
@media (min-width: 40rem) {
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beneficio h3 { font-size: 1.5rem; line-height: calc(2 / 1.5); }
}
@media (min-width: 48rem) { .beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Equipamento */
.equipamento { display: grid; gap: 3rem; }
.kit {
  position: relative;
  border-radius: 2rem;
  border-width: 1px;
  background-color: var(--cartao);
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}
.kit-selo {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  border-radius: 9999px;
  background-color: var(--oceano);
  padding: .5rem 1rem;
  font-size: .75rem;
  line-height: calc(1 / .75);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--oceano-texto);
}
.kit img { margin-inline: auto; aspect-ratio: 1 / 1; width: 100%; max-width: 42rem; object-fit: contain; }
.equipamento h2 { font-size: 2.25rem; line-height: 1.25; font-weight: 800; }
.equipamento-descricao { margin-top: 1.5rem; font-size: 1.125rem; line-height: 2rem; color: var(--suave-texto); }
.pecas { margin-top: 2rem; border-block-width: 1px; }
.pecas > :not(:last-child) { border-bottom-width: 1px; }
.peca { display: flex; align-items: center; gap: 1.25rem; padding-block: 1.25rem; }
.peca-numero { font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 800; color: var(--ciano); }
.peca-nome { font-weight: 600; }
.equipamento .botao { margin-top: 2.25rem; }
@media (min-width: 40rem) {
  .kit { padding: 2.5rem; }
  .equipamento h2 { font-size: 3rem; }
}
@media (min-width: 64rem) { .equipamento { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }

/* Vídeo */
.largura-video { max-width: 64rem; }
.video {
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 2rem;
  border-width: 1px;
  background-color: var(--cartao);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.video-quadro { aspect-ratio: 16 / 9; width: 100%; }
.video iframe { width: 100%; height: 100%; }

/* ---------- Contato ---------- */
.contato { position: relative; overflow: hidden; background-color: var(--oceano); color: var(--oceano-texto); }
.contato-brilho { position: absolute; left: -8rem; bottom: 0; width: 26rem; height: 26rem; opacity: .4; }
.contato .linha-onda { position: absolute; left: 0; top: 2.5rem; height: 1px; width: 100%; opacity: .5; }
.contato .largura { position: relative; }
.contato-grade { display: grid; gap: 3rem; }
.contato-logo { margin-bottom: 2.5rem; width: 14rem; }
.contato h2 { max-width: 42rem; font-size: 2.25rem; line-height: 1.25; font-weight: 800; }
.contato-descricao {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 2rem;
  color: color-mix(in oklab, var(--oceano-texto) 75%, transparent);
}
.contato .botao { margin-top: 2rem; }

.canais {
  display: grid;
  gap: 1rem;
  border-radius: 2rem;
  border: 1px solid color-mix(in oklab, var(--branco) 10%, transparent);
  background-color: color-mix(in oklab, var(--branco) 5%, transparent);
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.canais-titulo { font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--ciano); }
.canal {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 24px;
  padding: 1rem 1.25rem;
}
.canal-borda {
  border: 1px solid color-mix(in oklab, var(--branco) 10%, transparent);
  background-color: color-mix(in oklab, var(--branco) 5%, transparent);
  transition: color .15s var(--curva), background-color .15s var(--curva), border-color .15s var(--curva);
}
.canal-borda svg { color: var(--ciano); }
.canal-rotulo { display: block; font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: .05em; color: color-mix(in oklab, var(--oceano-texto) 60%, transparent); }
.canal .whatsapp-botao-rotulo { color: color-mix(in oklab, var(--branco) 70%, transparent); }
.canal-valor { font-weight: 600; }
@media (hover: hover) { .canal-borda:hover { border-color: var(--ciano); } }
@media (min-width: 40rem) {
  .contato-logo { width: 18rem; }
  .contato h2 { font-size: 3.75rem; }
  .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2rem; }
  .canais-titulo { grid-column: span 2 / span 2; }
}
@media (min-width: 64rem) { .contato-grade { grid-template-columns: 1fr 0.9fr; align-items: center; } }

/* ---------- Rodapé ---------- */
.rodape {
  border-top: 1px solid color-mix(in oklab, var(--branco) 10%, transparent);
  background-color: var(--oceano);
  padding-block: 2.5rem;
  color: var(--oceano-texto);
}
.rodape-conteudo { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: center; }
.rodape-logo { width: 10rem; opacity: .8; }
.rodape-redes { display: flex; align-items: center; gap: .75rem; }
.rodape-redes a {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--oceano-texto) 20%, transparent);
  transition: color .15s var(--curva), background-color .15s var(--curva), border-color .15s var(--curva);
}
.rodape-texto { font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--oceano-texto) 55%, transparent); }
.rodape-texto a { font-weight: 600; transition: color .15s var(--curva); }
@media (hover: hover) {
  .rodape-redes a:hover { border-color: var(--ciano); color: var(--ciano); }
  .rodape-texto a:hover { color: var(--ciano); }
}
@media (min-width: 48rem) { .rodape-conteudo { flex-direction: row; text-align: left; } }

/* ---------- WhatsApp (verde da marca, pedido do cliente) ---------- */
.whatsapp-botao {
  background-color: var(--whatsapp);
  color: var(--branco);
  box-shadow: 0 12px 32px -12px rgb(37 211 102 / 55%);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.whatsapp-botao:hover {
  background-color: var(--whatsapp-forte);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgb(37 211 102 / 65%);
}

.whatsapp-flutuante {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}
.whatsapp-flutuante::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  border: 2px solid var(--whatsapp);
  animation: whatsapp-pulso 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes whatsapp-pulso {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}