/* Página de links (links/index.html) — mesma identidade da home: céu, rosa, petróleo, Roketto + Monley */
@font-face { font-family: Roketto; src: url(../assets/6920bc73972ac3003a3a188c_Roketto.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Gotham; src: url(../assets/6920bbfe6f1e9b96eb66b9a5_Gotham-Book.otf) format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Gotham; src: url(../assets/6920bbfe11b75cdcb643fdb3_Gotham-Medium.otf) format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Gotham; src: url(../assets/6920bbfe976791a5a6bab328_Gotham-BoldItalic.otf) format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: Monley; src: url(../assets/6920f9c5358d135e45d185ed_Monley.otf) format("opentype"); font-weight: 400; font-display: swap; }

:root {
  --z-pink: #e74477;
  --z-teal: #004d64;
  --z-teal-d: #00303f;
  --z-blue: #00afea;
  --z-yellow: #fff3b9;
  --z-lime: linear-gradient(90deg, #3bdb8b, #c1ff00);
  --z-ease: cubic-bezier(.2, .8, .2, 1);
  --z-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lk-press: 7px; /* altura do "botão de brinquedo" */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lk {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--z-blue);
  color: #fff;
  font-family: Gotham, Arial, sans-serif;
  font-weight: 500;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.lk img { display: block; max-width: 100%; }

/* ---------- céu ---------- */
.lk-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lk-clouds {
  position: absolute;
  inset: -4% -12%;
  background: url(../assets/6926b103b61e90d5ed53c722_8_1_.avif) 50% 100% / cover no-repeat;
  animation: lk-drift 38s ease-in-out infinite alternate;
}
/* duas nuvens soltas passando devagar */
.lk-clouds::before,
.lk-clouds::after {
  content: "";
  position: absolute;
  width: 60vmax;
  height: 22vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  filter: blur(8px);
}
.lk-clouds::before { top: 12%; left: -20%; animation: lk-puff 46s linear infinite; }
.lk-clouds::after { top: 48%; left: -30%; width: 44vmax; height: 16vmax; opacity: .7; animation: lk-puff 64s linear -30s infinite; }

.lk-giant {
  position: absolute;
  top: 34%;
  left: 0;
  display: flex;
  white-space: nowrap;
  font-family: Roketto, Arial, sans-serif;
  font-size: 42vmax;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .2);
  transform: rotate(-8deg);
  transform-origin: 0 50%;
}
.lk-giant span { flex: none; padding-right: .3em; animation: lk-marquee 70s linear infinite; }

@keyframes lk-drift { from { transform: translateX(-5%) scale(1.04); } to { transform: translateX(5%) scale(1.1); } }
@keyframes lk-puff { from { transform: translateX(0); } to { transform: translateX(160vw); } }
@keyframes lk-marquee { to { transform: translateX(-100%); } }

/* ---------- faixa rosa ---------- */
.lk-faixa-box { position: relative; z-index: 2; overflow: hidden; padding-bottom: 16px; margin-bottom: -16px; }
.lk-faixa {
  position: relative;
  z-index: 2;
  margin: -10px -20px 0;
  padding: 18px 0 11px;
  background: var(--z-pink);
  transform: rotate(-2deg);
  transform-origin: 0 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 77, 100, .18);
}
.lk-faixa__track { display: flex; width: max-content; gap: 10px; animation: lk-marquee 24s linear infinite; }
.lk-faixa p {
  flex: none;
  margin: 0;
  font-family: Roketto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  text-transform: uppercase;
}
.lk-faixa .is-y { color: var(--z-yellow); }
.lk-faixa .is-script { margin-top: -7px; font-family: Monley, Arial, sans-serif; font-size: 24px; line-height: 1; text-transform: none; }
.lk-faixa .is-script i { font-family: Gotham, Arial, sans-serif; font-size: 15px; font-style: normal; }

/* ---------- coluna ---------- */
.lk-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 26px 16px calc(36px + env(safe-area-inset-bottom));
  overflow-x: clip; /* o "fantasma" da garrafa 3D não cria rolagem lateral */
}

/* ---------- topo ---------- */
.lk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 300px;
}
.lk-hero__txt > * { animation: lk-rise .9s var(--z-ease) backwards; }
.lk-hero__txt > :nth-child(2) { animation-delay: .08s; }
.lk-hero__txt > :nth-child(3) { animation-delay: .16s; }
.lk-logo { display: inline-block; transition: transform .4s var(--z-spring); }
.lk-logo:hover { transform: rotate(-4deg) scale(1.06); }
.lk-logo img { width: 112px; filter: drop-shadow(0 6px 14px rgba(0, 77, 100, .2)); }

.lk-h1 {
  margin: 14px 0 18px;
  font-family: Roketto, Arial, sans-serif;
  font-size: min(46px, 10.6vw);
  font-weight: 400;
  line-height: 1.02;
  text-shadow: 0 6px 22px rgba(0, 77, 100, .18);
}
.lk-h1 span {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px 0;
  background: var(--z-pink);
  transform: rotate(-3deg);
  box-shadow: 0 6px 0 var(--z-teal);
  text-shadow: none;
  white-space: nowrap;
}

.lk-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 9px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--z-teal);
  font: 500 15px/1 Gotham, Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 77, 100, .18);
  transition: transform .35s var(--z-spring), box-shadow .3s;
}
.lk-handle:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 77, 100, .25); }
.lk-handle:active { transform: scale(.95); }
.lk-handle svg { width: 16px; height: 16px; color: var(--z-pink); }
.lk-handle__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3bdb8b;
  box-shadow: 0 0 0 0 rgba(59, 219, 139, .6);
  animation: lk-ping 2s ease-out infinite;
}
@keyframes lk-ping { 70%, 100% { box-shadow: 0 0 0 8px rgba(59, 219, 139, 0); } }

.lk-hero__bottle { position: relative; animation: lk-rise 1.1s .1s var(--z-ease) backwards; }
.zera-spin.lk-spin { width: 80px; margin: 0 8px 22px 0; }
.lk-seal {
  position: absolute;
  top: -4px;
  left: -58px;
  z-index: 0;
  width: 104px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.lk-seal__ring { position: absolute; inset: 0; width: 100%; animation: lk-spin 16s linear infinite; }
.lk-seal__z { width: 42%; animation: lk-wobble 3.2s ease-in-out infinite; }
.lk-hint {
  position: absolute;
  right: 0;
  bottom: -6px;
  margin: 0;
  font-family: Monley, Arial, sans-serif;
  font-size: 20px;
  white-space: nowrap;
  transform: rotate(-8deg);
  transition: opacity .5s, transform .5s var(--z-ease);
}
.lk-hint::before { content: "↻ "; font-family: Gotham, Arial, sans-serif; font-size: 14px; }
.lk-hint.is-off { opacity: 0; transform: rotate(-8deg) translateY(8px); }

@keyframes lk-spin { to { transform: rotate(360deg); } }
@keyframes lk-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes lk-rise { from { opacity: 0; transform: translateY(26px); } }

/* ---------- cartões ---------- */
.lk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  margin-top: 6px;
}

.lk-card {
  --rx: 0deg; --ry: 0deg; --ty: 0px;
  position: relative;
  display: flex;
  border-radius: 28px;
  color: var(--z-teal);
  text-decoration: none;
  isolation: isolate;
  rotate: var(--rot, 0deg);
  transform: perspective(900px) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 0 var(--lk-press) 0 var(--z-teal), 0 20px 34px rgba(0, 50, 70, .22);
  transition: transform .5s var(--z-ease), rotate .5s var(--z-spring), box-shadow .3s;
  /* entrada "colando adesivo"; só 'backwards' para o hover poder mexer no rotate depois */
  animation: lk-slap .85s calc(.32s + var(--i) * .1s) var(--z-spring) backwards;
}
.lk-card:hover { --ty: -4px; rotate: 0deg; box-shadow: 0 calc(var(--lk-press) + 4px) 0 var(--z-teal), 0 30px 44px rgba(0, 50, 70, .28); }
.lk-card:active { --ty: 5px; box-shadow: 0 2px 0 var(--z-teal), 0 10px 20px rgba(0, 50, 70, .2); transition-duration: .12s; }
.lk-card:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@keyframes lk-slap {
  from { opacity: 0; translate: 0 60px; rotate: -10deg; scale: .85; }
  60% { opacity: 1; }
}

/* brilho que segue o cursor (js/links.js) */
.lk-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.lk-card:hover .lk-glare { opacity: 1; }

.lk-title {
  display: block;
  font-family: Roketto, Arial, sans-serif;
  font-weight: 400;
  line-height: .98;
}
.lk-sub { display: block; font-size: 14px; line-height: 1.3; }
.lk-tag {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 10px 5px;
  border-radius: 999px;
  background: rgba(0, 175, 234, .14);
  color: var(--z-blue);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lk-tag.is-light { background: #fff; color: var(--z-pink); }

.lk-go {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--z-teal);
  color: #fff;
  transition: transform .45s var(--z-spring), background-color .3s;
}
.lk-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-card:hover .lk-go { transform: rotate(45deg) scale(1.1); background: var(--z-pink); }

/* site */
.lk-site {
  --rot: -1.2deg;
  grid-column: 1 / -1;
  min-height: 176px;
  background: #fff;
  overflow: hidden;
}
.lk-site__txt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 58%;
  padding: 22px 0 22px 22px;
}
.lk-site .lk-title { margin-bottom: 8px; font-size: 34px; }
.lk-site .lk-sub { color: var(--z-pink); }
.lk-site__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.lk-site__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--z-ease); }
.lk-site:hover .lk-site__img img { transform: scale(1.1) rotate(-3deg); }
.lk-site .lk-go { background: #fff; color: var(--z-teal); box-shadow: 0 6px 16px rgba(0, 50, 70, .25); }
.lk-site:hover .lk-go { color: #fff; }

/* instagram + tiktok */
.lk-tile {
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1.05;
  padding: 18px;
}
.lk-tile__icon { width: 54px; height: 54px; transition: transform .5s var(--z-spring); }
.lk-tile__icon img { width: 100%; height: 100%; object-fit: contain; }
.lk-card:hover .lk-tile__icon { animation: lk-jiggle .6s var(--z-ease); }
.lk-tile .lk-title { margin-bottom: 4px; font-size: 25px; }
.lk-pre { display: block; margin-bottom: 3px; font-size: 12px; line-height: 1.2; opacity: .75; }
@keyframes lk-jiggle {
  25% { transform: rotate(-12deg) scale(1.15); }
  50% { transform: rotate(9deg) scale(1.1); }
  75% { transform: rotate(-4deg) scale(1.05); }
}

.lk-ig { --rot: 1.6deg; background: #fff; }
.lk-ig .lk-sub { color: var(--z-pink); }

.lk-tt { --rot: -1.8deg; background: var(--z-teal); color: #fff; box-shadow: 0 var(--lk-press) 0 var(--z-teal-d), 0 20px 34px rgba(0, 50, 70, .22); }
.lk-tt:hover { box-shadow: 0 calc(var(--lk-press) + 4px) 0 var(--z-teal-d), 0 30px 44px rgba(0, 50, 70, .28); }
.lk-tt:active { box-shadow: 0 2px 0 var(--z-teal-d), 0 10px 20px rgba(0, 50, 70, .2); }
.lk-tt .lk-sub { color: #7fd8f6; }
.lk-tt .lk-go { background: #fff; color: var(--z-teal); }
.lk-tt:hover .lk-go { color: #fff; }
/* ícone branco com o "glitch" do TikTok nas cores da ZERA */
.lk-tt .lk-tile__icon img { filter: brightness(0) invert(1) drop-shadow(-3px -2px 0 var(--z-blue)) drop-shadow(3px 2px 0 var(--z-pink)); }

/* seja um revendedor */
.lk-rev {
  --rot: .8deg;
  grid-column: 1 / -1;
  margin-top: 34px;
  min-height: 236px;
  background: radial-gradient(120% 90% at 0% 0%, #f2688f, var(--z-pink) 55%, #d6336a);
  color: #fff;
}
.lk-rev__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
}
.lk-rev__bg span {
  position: absolute;
  top: 50%;
  left: 0;
  white-space: nowrap;
  font-family: Roketto, Arial, sans-serif;
  font-size: 92px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .09);
  transform: translateY(-50%) rotate(-10deg);
  animation: lk-slide 26s linear infinite;
}
@keyframes lk-slide { from { translate: 0; } to { translate: -50%; } }

.lk-rev__mascote {
  position: absolute;
  top: -64px;
  right: -6px;
  z-index: 2;
  width: 124px;
  filter: drop-shadow(0 12px 18px rgba(0, 50, 70, .3));
  transform-origin: 50% 100%;
  animation: lk-dance 2.4s ease-in-out infinite;
  transition: scale .45s var(--z-spring);
}
.lk-rev:hover .lk-rev__mascote { scale: 1.08; animation-duration: .9s; }
@keyframes lk-dance {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-8px); }
}

.lk-rev__txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 22px 22px;
}
.lk-rev .lk-title { font-size: 40px; text-shadow: 0 4px 0 rgba(0, 77, 100, .25); }
.lk-rev .lk-title em { font-style: normal; color: var(--z-yellow); }
.lk-rev .lk-sub { max-width: 60%; margin-top: 10px; font-weight: 400; }
.lk-cta {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 20px 13px;
  border-radius: 999px;
  background: var(--z-lime);
  color: var(--z-teal);
  font: italic 700 15px/1 Gotham, Arial, sans-serif;
  text-transform: uppercase;
  box-shadow: 0 5px 0 var(--z-teal);
  overflow: hidden;
}
/* reflexo passando no botão */
.lk-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: lk-shine 3.4s 1.6s ease-in-out infinite;
}
@keyframes lk-shine { 40%, 100% { transform: translateX(120%); } }
.lk-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--z-spring); }
.lk-rev:hover .lk-cta svg { transform: translateX(5px); }

/* ---------- rodapé ---------- */
.lk-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 46px;
  text-align: center;
}
.lk-foot__script {
  margin: 0;
  font-family: Monley, Arial, sans-serif;
  font-size: 34px;
  line-height: 1;
  transform: rotate(-4deg);
  text-shadow: 0 4px 16px rgba(0, 77, 100, .2);
}

/* ---------- aviso "link copiado" ---------- */
.lk-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 10;
  padding: 13px 20px 12px;
  border-radius: 999px;
  background: var(--z-teal);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 16px 34px rgba(0, 50, 70, .3);
  transform: translate(-50%, calc(100% + 40px));
  visibility: hidden;
  transition: transform .5s var(--z-spring), visibility .5s;
  pointer-events: none;
}
.lk-toast.is-on { transform: translate(-50%, 0); visibility: visible; }

/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
  .lk-faixa p { font-size: 18px; }
  .lk-faixa .is-script { font-size: 30px; }
  .lk-wrap { padding-top: 44px; }
  .lk-hero { min-height: 380px; }
  .lk-logo img { width: 140px; }
  .lk-h1 { font-size: 54px; }
  .zera-spin.lk-spin { width: 108px; margin: 10px 30px 26px 0; }
  .lk-seal { width: 128px; left: -74px; }
  .lk-grid { gap: 20px 18px; }
  .lk-site { min-height: 200px; }
  .lk-site .lk-title { font-size: 42px; }
  .lk-tile { padding: 22px; }
  .lk-tile__icon { width: 64px; height: 64px; }
  .lk-tile .lk-title { font-size: 30px; }
  .lk-rev { min-height: 260px; }
  .lk-rev .lk-title { font-size: 50px; }
  .lk-rev__mascote { width: 150px; top: -78px; right: 6px; }
  .lk-rev__txt { padding: 28px; }
  .lk-sub { font-size: 15px; }
  .lk-pre { font-size: 13px; }
}
@media (max-width: 370px) {
  .lk-h1 { font-size: 38px; }
  .zera-spin.lk-spin { width: 72px; }
  .lk-tile .lk-title { font-size: 21px; }
  .lk-site .lk-title { font-size: 29px; }
  .lk-rev .lk-title { font-size: 34px; }
  .lk-rev__mascote { width: 104px; top: -54px; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-clouds, .lk-clouds::before, .lk-clouds::after, .lk-giant span, .lk-faixa__track,
  .lk-seal__ring, .lk-seal__z, .lk-rev__bg span, .lk-rev__mascote, .lk-cta::after, .lk-handle__dot { animation: none; }
  .lk-card, .lk-hero__txt > *, .lk-hero__bottle { animation: none; }
  .lk-card { transform: none; }
}