/* Crystal Tropical — agua viva atras do site inteiro
   O fundo das secoes era azul chapado. Aqui entra uma camada FIXA de agua
   (bolhas subindo + luz que respira) que continua viva do topo ao rodape,
   e as secoes passam a ser translucidas por cima dela.
   Camada fixa: as bolhas nao param nem "acabam" — independem do scroll. */

.agua-fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #0F4A94 0%, transparent 60%),
    linear-gradient(to bottom, #071A3E 0%, #061733 45%, #03102E 100%);
}

/* Luz da superficie que atravessa a agua e respira devagar */
.agua-fundo__luz {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  background:
    linear-gradient(105deg, transparent 42%, rgba(191, 238, 255, .10) 48%, transparent 54%),
    linear-gradient(78deg, transparent 60%, rgba(191, 238, 255, .07) 66%, transparent 72%);
  animation: luz-respira 16s ease-in-out infinite;
}
@keyframes luz-respira {
  0%, 100% { opacity: .5; transform: translate3d(0, 0, 0) scaleY(1); }
  50%      { opacity: 1;  transform: translate3d(-2%, 1.5%, 0) scaleY(1.06); }
}

/* Bolhas: sobem a tela inteira, cada uma no seu tempo */
.agua-fundo__bolha {
  position: absolute;
  bottom: -14vh;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    rgba(255, 255, 255, .55) 0%,
    rgba(159, 221, 244, .16) 55%,
    rgba(234, 251, 255, .30) 88%,
    transparent 100%);
  animation: bolha-sobe var(--t) linear infinite;
  animation-delay: var(--d);
  will-change: transform, opacity;
}
@keyframes bolha-sobe {
  0%   { transform: translate3d(0, 0, 0) scale(.85);            opacity: 0; }
  8%   {                                                         opacity: .75; }
  50%  { transform: translate3d(14px, -60vh, 0) scale(1);       opacity: .55; }
  92%  {                                                         opacity: .2; }
  100% { transform: translate3d(-10px, -122vh, 0) scale(1.06);  opacity: 0; }
}

/* As secoes ficam translucidas para a agua aparecer por tras.
   O alfa alto mantem o contraste do texto em AA. */
.secao--fonte      { background: rgba(7, 26, 62, .82); }
.secao--portas     { background: rgba(10, 42, 94, .80); }
.secao--historia   { background: rgba(8, 35, 79, .82); }
.secao--qualidade  { background: rgba(6, 23, 51, .84); }
.secao--produtos   { background: rgba(11, 47, 107, .78); }
.secao--segmentos  { background: rgba(7, 26, 62, .82); }
.secao--pedir      { background: rgba(10, 42, 94, .80); }
.secao--revenda    { background: rgba(8, 35, 79, .82); }
.secao--eventos    { background: rgba(6, 23, 51, .84); }
.secao--cobertura  { background: rgba(4, 20, 47, .86); }
.rodape            { background: rgba(3, 16, 46, .90); }

/* Divisa entre secoes: uma linha d'agua fina, nao um corte seco */
.secao + .secao::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(109, 207, 246, .28) 22%, rgba(109, 207, 246, .28) 78%, transparent);
}

/* Produto que flutua de leve, como se estivesse submerso */
.produto__foto img,
.copinho__imagem img {
  animation: flutua-produto 7s ease-in-out infinite;
}
.produto:nth-child(2) .produto__foto img { animation-delay: -2.2s; }
.produto:nth-child(3) .produto__foto img { animation-delay: -4.1s; }
.produto:nth-child(4) .produto__foto img { animation-delay: -5.6s; }
@keyframes flutua-produto {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .agua-fundo__luz,
  .agua-fundo__bolha,
  .produto__foto img,
  .copinho__imagem img { animation: none; }
  .agua-fundo__bolha { opacity: .3; }
}

/* ---------- Garrafao que enche conforme voce desce ---------- */
.qualidade__palco {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}
@media (min-width: 880px) {
  .qualidade__palco { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}
.enchendo { text-align: center; }
.enchendo svg { width: min(220px, 60vw); height: auto; margin-inline: auto; }

/* --enche vai de 0 a 1 conforme a secao cruza a tela.
   A agua e um retangulo alto que sobe: em 0 esta toda abaixo do corte. */
.enchendo__agua {
  transform: translate3d(0, calc((1 - var(--enche, 0)) * 250px), 0);
  transition: transform .12s linear;
}
.enchendo__onda { animation: onda-desliza 5s linear infinite; }
@keyframes onda-desliza {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(120px, 0, 0); }
}
.enchendo__rotulo {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--texto-suave);
}
.enchendo__pct {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--azul-agua);
}

/* ---------- Trilha de profundidade ---------- */
.trilha {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.5rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  pointer-events: none;
}
@media (min-width: 1100px) { .trilha { display: flex; } }

.trilha__marca {
  display: flex;
  align-items: center;
  gap: .625rem;
  pointer-events: auto;
}
.trilha__texto {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(191, 238, 255, .45);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.trilha__ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(191, 238, 255, .3);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.trilha__marca:hover .trilha__texto,
.trilha__marca.is-ativa .trilha__texto { opacity: 1; transform: none; }
.trilha__marca.is-ativa .trilha__texto { color: var(--laranja-crystal); }
.trilha__marca.is-ativa .trilha__ponto { background: var(--laranja-crystal); transform: scale(1.55); }

.trilha__prof {
  margin-top: .5rem;
  font-family: 'Poppins', sans-serif;
  font-size: .6875rem;
  letter-spacing: .08em;
  color: rgba(191, 238, 255, .55);
}

@media (prefers-reduced-motion: reduce) {
  .enchendo__agua { transform: none; transition: none; }
  .enchendo__onda { animation: none; }
}