/* Arupi Sucos — identidade lida do vídeo de lançamento e dos mockups */
:root {
  --mata: #17502a;        /* verde-escuro da marca */
  --mata-funda: #0f3d1f;
  --lima: #a7da5b;        /* verde-lima das ondas */
  --suco: #f0ca0d;        /* amarelo do copo no logo */
  --laranja: #f59a1b;     /* percentual de polpa no rótulo */
  --papel: #f6f5ee;
  --tinta: #10321c;
  --branco: #fff;

  --cor-sabor: #e0261c;
  --texto-sabor: #fff;

  --largura: 1180px;
  --raio: 28px;
  --fonte: "Outfit", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, dd, ul, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--suco); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.9rem, 7.4vw, 6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h1 > span, .revenda h2 span { display: block; }
.amarelo { color: var(--suco); }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--suco); color: var(--tinta); padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.pular:focus { top: 12px; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.botao:active { transform: translateY(1px); }
.botao--amarelo { background: var(--suco); color: var(--tinta); }
.botao--amarelo:hover { background: #ffd92a; }
.botao--contorno { border-color: rgba(255, 255, 255, .7); color: var(--branco); }
.botao--contorno:hover { background: rgba(255, 255, 255, .12); }
.botao--cheio { width: 100%; }

/* ---------- topo ---------- */
.topo {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--largura); margin: 0 auto; padding: 22px 24px;
  color: var(--branco);
}
.topo__marca img { width: 132px; }
.topo__nav { display: flex; align-items: center; gap: 28px; font-weight: 600; }
.topo__nav a:not(.botao) { text-decoration: none; padding: 8px 0; }
.topo__nav a:not(.botao):hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.topo__nav .botao { min-height: 42px; padding: 0 20px; }

/* ---------- abertura ---------- */
.abertura {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, #1f6a37 0%, var(--mata) 55%, var(--mata-funda) 100%);
  color: var(--branco);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px;
  padding: 150px max(24px, calc((100vw - var(--largura)) / 2 + 24px)) 190px;
}
.abertura__sub { max-width: 30em; margin-top: 26px; font-size: 1.2rem; color: rgba(255, 255, 255, .9); }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.abertura__foto { justify-self: end; width: min(100%, 460px); }
.abertura__foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 46% 54% 44% 56% / 38% 40% 60% 62%;
  box-shadow: 0 0 0 10px rgba(167, 218, 91, .28), 0 30px 60px rgba(4, 25, 12, .45);
}
.onda { position: absolute; left: 0; width: 100%; pointer-events: none; }
.onda--abertura { bottom: -1px; height: clamp(70px, 10vw, 140px); fill: var(--cor-sabor); transition: fill .45s ease; }

/* ---------- sabores ---------- */
.sabores {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--cor-sabor); color: var(--texto-sabor);
  padding: 34px 24px 90px;
  transition: background-color .45s ease, color .45s ease;
}
.sabores[data-sabor="acerola"]  { --cor-sabor: #e0261c; --texto-sabor: #fff; }
.sabores[data-sabor="caja"]     { --cor-sabor: #f5a81f; --texto-sabor: #10321c; }
.sabores[data-sabor="goiaba"]   { --cor-sabor: #ef5a52; --texto-sabor: #fff; }
.sabores[data-sabor="graviola"] { --cor-sabor: #a5cf62; --texto-sabor: #10321c; }
.sabores[data-sabor="maracuja"] { --cor-sabor: #ecc044; --texto-sabor: #10321c; }
.sabores[data-sabor="uva"]      { --cor-sabor: #6b2d8f; --texto-sabor: #fff; }

.sabores__cabeca, .sabores__seletor, .vitrine { max-width: var(--largura); margin-inline: auto; }
.sabores__cabeca p { margin-top: 12px; font-size: 1.15rem; }

.sabores__seletor { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.sabores__seletor button {
  min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit;
  background: transparent; border: 2px solid currentColor;
  transition: background-color .15s ease, color .15s ease;
}
.sabores__seletor button:hover { background: rgba(255, 255, 255, .22); }
.sabores__seletor button[aria-pressed="true"] { background: var(--mata); border-color: var(--mata); color: var(--branco); }

.vitrine {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: clamp(28px, 6vw, 84px);
  margin-top: 44px;
}
.vitrine__foto img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 180px 180px var(--raio) var(--raio);
  border: 8px solid rgba(255, 255, 255, .55);
  transition: opacity .25s ease;
}
.vitrine__foto img.trocando { opacity: 0; }

/* o selo repete o rótulo da garrafa: painel verde, % em laranja, nome em branco */
.selo {
  background: var(--mata); color: var(--branco);
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--raio) 120px var(--raio) var(--raio);
}
.selo__polpa { color: var(--laranja); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }
.selo__polpa strong { display: block; font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.selo h3 { margin-top: 14px; font-size: clamp(2.4rem, 6vw, 4.6rem); }
.selo #sabor-tipo { margin-top: 10px; font-size: 1.15rem; color: rgba(255, 255, 255, .88); }
.selo__ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 30px 0 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .25); }
.selo__ficha dt { font-size: .9rem; color: var(--lima); }
.selo__ficha dd { font-weight: 600; }

/* ---------- faixas onduladas (do vídeo "Mesmo suco") ---------- */
.faixas { background: var(--cor-faixa, #e0261c); margin-top: -1px; }
.faixas svg { width: 100%; height: clamp(110px, 16vw, 220px); }
.faixas .f1 { fill: #e9712a; }
.faixas .f2 { fill: var(--suco); }
.faixas .f3 { fill: var(--lima); }
.faixas .f4 { fill: var(--papel); }

/* ---------- a marca ---------- */
.marca {
  max-width: var(--largura); margin: 0 auto; padding: 70px 24px 110px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 56px 72px; align-items: center;
}
.marca__texto h2 { color: var(--mata); }
.marca__texto p { max-width: 34em; margin-top: 20px; font-size: 1.15rem; }
.marca__texto .marca__relpi { margin-top: 30px; font-size: 1rem; font-weight: 600; color: var(--mata); }
.marca__midia { position: relative; }
.marca__video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 36px; background: var(--mata); box-shadow: 0 24px 50px rgba(16, 50, 28, .28); }
.marca__play {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; background: var(--branco); color: var(--tinta); white-space: nowrap;
}
.marca__fotos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.marca__fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio); }
.marca__fotos img:nth-child(2) { border-radius: 140px 140px var(--raio) var(--raio); }

/* ---------- revenda ---------- */
.revenda {
  position: relative;
  background: var(--mata); color: var(--branco);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: start;
  padding: 170px max(24px, calc((100vw - var(--largura)) / 2 + 24px)) 110px;
}
.onda--revenda { top: -1px; height: clamp(60px, 9vw, 120px); fill: var(--papel); }
.revenda__texto p { max-width: 30em; margin-top: 24px; font-size: 1.15rem; color: rgba(255, 255, 255, .9); }
.revenda__lista { margin-top: 28px; display: grid; gap: 12px; }
.revenda__lista li { position: relative; padding-left: 30px; font-weight: 500; }
.revenda__lista li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--lima); }

.formulario {
  background: var(--papel); color: var(--tinta);
  padding: clamp(24px, 3.4vw, 40px); border-radius: var(--raio);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.campo { grid-column: 1 / -1; display: grid; gap: 6px; }
.campo--meio { grid-column: span 1; }
fieldset.campo { display: block; }
.campo label, .campo legend { font-weight: 600; }
.campo legend { margin-bottom: 8px; }
.opcional { font-weight: 400; color: #4d6456; }
.campo input[type="text"], .campo input[type="tel"], .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; color: inherit; background: var(--branco);
  border: 2px solid #c9d6c4; border-radius: 14px;
}
.campo textarea { resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--mata); outline-offset: 1px; border-color: var(--mata); }
.campo .invalido { border-color: #c0261c; }
.opcao { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 18px; font-weight: 500; cursor: pointer; }
.opcao input { width: 20px; height: 20px; accent-color: var(--mata); }
.formulario .botao { grid-column: 1 / -1; }
.formulario__aviso { grid-column: 1 / -1; min-height: 1.5em; font-weight: 600; color: var(--mata); }
.formulario__aviso.erro { color: #b0221a; }

/* ---------- rodapé ---------- */
.rodape {
  background: var(--mata-funda); color: rgba(255, 255, 255, .88);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding: 40px max(24px, calc((100vw - var(--largura)) / 2 + 24px));
}
.rodape img { width: 120px; }
.rodape nav { display: flex; gap: 24px; font-weight: 600; }
.rodape nav a { text-decoration: none; padding: 8px 0; }
.rodape__sac { min-height: 44px; padding: 0 18px; border: 2px solid var(--lima); border-radius: 999px; background: transparent; color: var(--branco); font: inherit; font-weight: 700; cursor: pointer; }
.rodape__sac:hover { background: rgba(167, 218, 91, .18); }
.rodape nav { align-items: center; flex-wrap: wrap; }
.rodape nav a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- telas menores ---------- */
@media (max-width: 900px) {
  .abertura { grid-template-columns: 1fr; padding-top: 120px; padding-bottom: 130px; gap: 40px; }
  .abertura__foto { justify-self: center; width: min(100%, 380px); }
  .vitrine { grid-template-columns: 1fr; }
  .vitrine__foto { width: min(100%, 300px); margin-inline: auto; }
  .marca { grid-template-columns: 1fr; }
  .marca__midia { width: min(100%, 300px); margin-inline: auto; }
  .revenda { grid-template-columns: 1fr; padding-top: 130px; gap: 40px; }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .topo { padding: 16px; }
  .topo__marca img { width: 104px; }
  .topo__nav { gap: 0; }
  .topo__nav a:not(.botao) { display: none; }
  .abertura, .revenda, .rodape { padding-left: 16px; padding-right: 16px; }
  .sabores, .marca { padding-left: 16px; padding-right: 16px; }
  .selo { border-radius: var(--raio) 72px var(--raio) var(--raio); }
  .selo__ficha { grid-template-columns: 1fr; gap: 10px; }
  .marca__fotos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .marca__fotos img:nth-child(3) { display: none; }
  .campo--meio { grid-column: 1 / -1; }
  .rodape { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   MOVIMENTO
   ===================================================================== */

/* ondas que deslizam sem parar, como no vídeo de lançamento */
.desliza { animation: deslizar 22s linear infinite; }
.desliza--volta { animation-direction: reverse; animation-duration: 28s; }
.faixas .f1 { animation-duration: 30s; }
.faixas .f2 { animation-duration: 21s; animation-direction: reverse; }
.faixas .f3 { animation-duration: 26s; }
.faixas .f4 { animation-duration: 17s; animation-direction: reverse; }
@keyframes deslizar { to { transform: translateX(-1440px); } }

/* entrada da abertura */
.js .abertura h1 .linha { overflow: hidden; padding-bottom: .08em; }
.js .abertura h1 .linha > span { display: block; animation: subir .9s cubic-bezier(.2, .9, .2, 1) both; }
.js .abertura h1 .linha:nth-child(2) > span { animation-delay: .14s; }
.js .abertura__sub { animation: surgir .8s ease .42s both; }
.js .abertura__acoes { animation: surgir .8s ease .56s both; }
.js .topo { animation: surgir .7s ease .1s both; }
.js .abertura__foto { animation: pousar 1.2s cubic-bezier(.2, .9, .25, 1.1) .2s both; }
@keyframes subir { from { transform: translateY(110%) rotate(4deg); } }
@keyframes surgir { from { opacity: 0; transform: translateY(18px); } }
@keyframes pousar { from { opacity: 0; transform: translateY(70px) scale(.82) rotate(-7deg); } }

/* a foto respira: flutua e a moldura muda de forma devagar */
.abertura__foto { perspective: 900px; }
.abertura__foto img {
  animation: flutuar 7s ease-in-out infinite, moldar 13s ease-in-out infinite;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
  will-change: transform;
}
@keyframes flutuar { 50% { translate: 0 -16px; } }
@keyframes moldar {
  33% { border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%; }
  66% { border-radius: 42% 58% 38% 62% / 58% 38% 62% 42%; }
}

/* troca de sabor: a cor nova se derrama a partir do botão clicado */
.sabores__derrama {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--cor-derrama, transparent);
  clip-path: circle(0 at var(--dx, 50%) var(--dy, 30%));
}
.sabores__derrama.ativo { animation: derramar .85s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes derramar { to { clip-path: circle(150% at var(--dx, 50%) var(--dy, 30%)); } }

.vitrine__foto img { transition: opacity .28s ease, transform .5s cubic-bezier(.2, .9, .25, 1.15); }
.vitrine__foto img.trocando { opacity: 0; transform: translateY(40px) rotate(-5deg) scale(.94); }
.selo.pulsa { animation: pulsar .6s cubic-bezier(.2, .9, .25, 1.2); }
@keyframes pulsar { from { transform: scale(.965); } }
.sabores__seletor button { transition: background-color .15s ease, color .15s ease, transform .2s cubic-bezier(.2, .9, .25, 1.4); }
.sabores__seletor button:hover { transform: translateY(-3px); }
.sabores__seletor button[aria-pressed="true"] { transform: scale(1.06); }

/* revelação ao rolar */
.js [data-revelar] { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .9, .2, 1); transition-delay: calc(var(--i, 0) * .14s); }
.js [data-revelar].visto { opacity: 1; transform: none; }
.js [data-revelar="cortina"] { opacity: 1; transform: scale(1.06); clip-path: inset(100% 0 0 0 round 28px); transition: clip-path 1.1s cubic-bezier(.2, .9, .2, 1), transform 1.4s cubic-bezier(.2, .9, .2, 1); transition-delay: calc(var(--i, 0) * .16s); }
.js [data-revelar="cortina"].visto { clip-path: inset(0 0 0 0 round 28px); transform: none; }

.botao { transition: transform .2s cubic-bezier(.2, .9, .25, 1.4), background-color .15s ease, box-shadow .2s ease; }
.botao--amarelo:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(240, 202, 13, .35); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js [data-revelar], .js [data-revelar="cortina"] { opacity: 1; transform: none; clip-path: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}