/* ============================================================
   MYPODS//LAB :: componentes da vitrine (mobile-first)
   ============================================================ */

/* Os botoes (.btn) vivem em base.css: sao compartilhados com o painel, que
   nao carrega este arquivo. */

/* ---------------- barra de aviso + header ---------------- */

/* Bloco fixo unico: a barra de aviso nunca "descola" do header ao rolar,
   e o conteudo abaixo compensa uma unica altura (--top-total). */
.site-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #040605;
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.topbar__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 8px var(--acid-glow);
  animation: topbar-pulse 3.2s var(--ease-in-out) infinite;
}

@keyframes topbar-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 420px) {
  .topbar__inner {
    letter-spacing: 0.14em;
    gap: var(--sp-2);
  }
}

.header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.header.is-stuck {
  background: rgba(5, 7, 6, 0.86);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.logo__slash {
  color: var(--acid);
}

.nav {
  display: none;
  gap: var(--sp-5);
}

.nav a {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.cart-btn:hover {
  border-color: var(--acid);
}

.cart-btn__icon {
  flex: none;
  opacity: 0.75;
}

/* Em telas estreitas o icone basta; o rotulo textual sai. */
@media (max-width: 560px) {
  .cart-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.cart-btn__count {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--acid);
  color: #04150f;
  font-size: var(--step--2);
  font-weight: 700;
}

.cart-btn__count[data-empty="true"] {
  background: var(--surface-3);
  color: var(--text-faint);
}

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}

.nav-toggle span::before {
  transform: translateY(-5px);
}

.nav-toggle span::after {
  transform: translateY(3.5px);
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: rotate(-45deg) translateY(0);
}

.nav-mobile {
  position: fixed;
  inset: var(--top-total) 0 auto 0;
  z-index: var(--z-overlay);
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) 1.25rem var(--sp-6);
  background: rgba(5, 7, 6, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transform: translate3d(0, -12px, 0);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out),
    visibility var(--dur);
}

.nav-mobile.is-open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
}

.nav-mobile a {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .nav {
    display: flex;
  }

  .nav-toggle,
  .nav-mobile {
    display: none;
  }
}

/* ============================================================
   HERO EDITORIAL — primeira dobra
   Composicao dividida: texto ~40% / produto ~60% no desktop.
   ============================================================ */

.hero {
  position: relative;
  z-index: var(--z-content);
  min-height: 620px;
  height: clamp(620px, 88vh, 820px);
  padding-top: var(--top-total);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

/* ---------- fundo bicolor discreto ---------- */

.hero__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* cor definida por slide via [data-theme] */
  --hero-accent: 0, 245, 160;
}

/* Divisao vertical suave: esquerda mais escura, direita com a cor do produto. */
.hero__split {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, #040605 0%, #040605 46%, rgba(var(--hero-accent), 0.05) 72%, transparent 100%),
    radial-gradient(ellipse 62% 78% at 74% 48%, rgba(var(--hero-accent), 0.12), transparent 70%);
  transition: background 900ms var(--ease-out);
}

/* Circulos tecnicos finos atras do produto. */
.hero__rings {
  position: absolute;
  top: 50%;
  right: 22%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  transform: translate3d(50%, -50%, 0);
  border: 1px solid rgba(245, 247, 246, 0.06);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(245, 247, 246, 0.03),
    0 0 0 clamp(30px, 6vw, 80px) rgba(245, 247, 246, 0.018);
}

.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------- palco dos slides ---------- */

.hero__stage {
  position: relative;
  z-index: 1;
  min-height: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 700ms var(--ease-out),
    visibility 700ms;
  will-change: opacity;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* ---------- coluna de texto ---------- */

.hero-slide__text {
  display: grid;
  gap: var(--sp-4);
  align-content: center;
  max-width: 36ch;
}

.hero-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgb(var(--hero-accent, 0, 245, 160));
}

.hero-slide__eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

/* Headline: no maximo 3 linhas, largura controlada, nunca ocupa a coluna toda. */
.hero-slide__title {
  font-size: clamp(2.6rem, 1.2rem + 4.2vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: none;
}

.hero-slide__title span {
  display: block;
}

.hero-slide__support {
  max-width: 38ch;
  color: var(--text-dim);
  font-size: var(--step-0);
  line-height: 1.55;
}

.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.hero-slide__facts {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- coluna do produto ---------- */

.hero-slide__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

/* Halo apenas para separar do fundo. Sem caixa, sem sombra branca. */
.hero-slide__halo {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--hero-accent, 0, 245, 160), 0.16) 0%,
    rgba(var(--hero-accent, 0, 245, 160), 0.05) 42%,
    transparent 68%
  );
  filter: blur(6px);
}

.hero-slide__visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Produto protagonista: ocupa a altura util, sem distorcer nem ser cortado. */
.hero-slide__product {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  /* sombra de contato discreta, nada de brilho branco */
  filter: drop-shadow(0 30px 42px rgba(0, 0, 0, 0.55));
  will-change: transform;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  transition: transform 700ms var(--ease-out);
}

/* ---------- entrada escalonada ---------- */

.hero-slide.is-active .hero-slide__eyebrow,
.hero-slide.is-active .hero-slide__title,
.hero-slide.is-active .hero-slide__support,
.hero-slide.is-active .hero-slide__actions,
.hero-slide.is-active .hero-slide__facts,
.hero-slide.is-active .hero-slide__visual {
  animation: hero-rise 760ms var(--ease-out) both;
}

.hero-slide.is-active .hero-slide__eyebrow { animation-delay: 60ms; }
.hero-slide.is-active .hero-slide__title { animation-delay: 120ms; }
.hero-slide.is-active .hero-slide__support { animation-delay: 190ms; }
.hero-slide.is-active .hero-slide__actions { animation-delay: 250ms; }
.hero-slide.is-active .hero-slide__facts { animation-delay: 310ms; }
.hero-slide.is-active .hero-slide__visual { animation-delay: 40ms; }

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ---------- faixa inferior integrada ---------- */

.hero__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0 var(--sp-5);
  border-top: 1px solid var(--line);
}

.hero__bar[hidden] {
  display: none;
}

.hero__now {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-width: 0;
}

.hero__now-index {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: rgb(var(--hero-accent, 0, 245, 160));
}

.hero__now-name {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__dots {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hero__dot {
  position: relative;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.hero__dot::after {
  content: "";
  position: absolute;
  inset: -14px -5px;
}

.hero__dot:hover {
  background: rgba(245, 247, 246, 0.34);
}

.hero__dot-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(var(--hero-accent, 0, 245, 160));
  transform: scaleX(0);
  transform-origin: left;
}

.hero__dot.is-active .hero__dot-fill {
  transform: scaleX(1);
  transition: transform 260ms var(--ease-out);
}

.hero__dot.is-active.is-running .hero__dot-fill {
  animation: hero-progress var(--hero-autoplay, 7000ms) linear forwards;
  transition: none;
}

@keyframes hero-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.hero__arrow:not(.hero__arrow--next) {
  width: 38px;
  padding: 0;
  justify-content: center;
}

.hero__arrow:hover {
  border-color: rgb(var(--hero-accent, 0, 245, 160));
  color: var(--text);
}

/* ---------- temas por slide ---------- */

.hero__canvas[data-theme="emerald"] { --hero-accent: 0, 245, 160; }
.hero__canvas[data-theme="cyan"] { --hero-accent: 39, 215, 255; }
.hero__canvas[data-theme="ice"] { --hero-accent: 168, 214, 226; }
.hero__canvas[data-theme="crimson"] { --hero-accent: 255, 95, 109; }

.hero[data-theme="emerald"] { --hero-accent: 0, 245, 160; }
.hero[data-theme="cyan"] { --hero-accent: 39, 215, 255; }
.hero[data-theme="ice"] { --hero-accent: 168, 214, 226; }
.hero[data-theme="crimson"] { --hero-accent: 255, 95, 109; }

/* ---------- responsivo ---------- */

/* Mobile: empilhado, produto acima, headline e CTA em destaque. */
@media (max-width: 899px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-bottom: var(--sp-4);
  }

  .hero__stage {
    min-height: clamp(540px, 74svh, 680px);
  }

  .hero-slide {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
  }

  .hero-slide__visual {
    order: -1;
  }

  .hero-slide__product {
    max-height: 32svh;
  }

  .hero-slide__title {
    font-size: clamp(2.6rem, 1.4rem + 6vw, 3.4rem);
  }

  .hero-slide__text {
    max-width: none;
  }

  .hero__rings {
    right: 50%;
    top: 34%;
    width: 74vw;
    transform: translate3d(50%, -50%, 0);
  }

  .hero__split {
    background:
      linear-gradient(180deg, rgba(var(--hero-accent), 0.08) 0%, transparent 46%),
      radial-gradient(ellipse 90% 42% at 50% 26%, rgba(var(--hero-accent), 0.12), transparent 72%);
  }

  .hero__bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
  }

  .hero__arrow--next span {
    display: none;
  }
}

/* Tablet: imagem e texto equilibrados. */
@media (min-width: 700px) and (max-width: 899px) {
  .hero-slide__product {
    max-height: 38svh;
  }
}

/* Desktop: duas colunas assimetricas, produto protagonista. */
@media (min-width: 900px) {
  .hero-slide {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: center;
    gap: var(--sp-6);
    height: 100%;
  }

  .hero-slide__visual {
    height: 100%;
    /* o produto pode avancar discretamente sobre a margem, sem cortar nada */
    margin-right: calc(var(--sp-5) * -1);
  }

  .hero-slide__product {
    max-height: 82%;
  }
}

@media (min-width: 1200px) {
  .hero-slide__title {
    font-size: clamp(3.6rem, 1.6rem + 4vw, 5.4rem);
  }

  .hero-slide__product {
    max-height: 86%;
  }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide.is-active .hero-slide__eyebrow,
  .hero-slide.is-active .hero-slide__title,
  .hero-slide.is-active .hero-slide__support,
  .hero-slide.is-active .hero-slide__actions,
  .hero-slide.is-active .hero-slide__facts,
  .hero-slide.is-active .hero-slide__visual {
    animation: none;
    transition: opacity 1ms linear;
  }

  .hero-slide__product {
    transform: none;
    transition: none;
  }

  .hero__split {
    transition: none;
  }

  .hero__dot.is-active.is-running .hero__dot-fill {
    animation: none;
    transform: scaleX(1);
  }
}

.no-js .hero__bar {
  display: none;
}

/* palco do produto demonstrativo */

.stage {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 245, 160, 0.14), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  overflow: hidden;
}

.stage__ring {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  opacity: 0.5;
}

.stage__ring--2 {
  width: 92%;
  border-style: dashed;
  opacity: 0.28;
  animation: spin 42s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.stage__object {
  position: relative;
  width: 58%;
  will-change: transform;
  animation: float 7s var(--ease-in-out) infinite;
  filter: drop-shadow(0 24px 48px rgba(0, 245, 160, 0.2));
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, -8px, 0);
  }
  50% {
    transform: translate3d(0, 8px, 0);
  }
}

.stage__code {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  color: var(--text-faint);
}

.stage__code--tl {
  top: var(--sp-4);
  left: var(--sp-4);
}

.stage__code--tr {
  top: var(--sp-4);
  right: var(--sp-4);
  color: var(--cyan);
}

.stage__code--bl {
  bottom: var(--sp-4);
  left: var(--sp-4);
}

.stage__code--br {
  bottom: var(--sp-4);
  right: var(--sp-4);
  color: var(--acid);
}

.stage__crosshair {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 25% 25%;
  opacity: 0.45;
  mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 72%);
}



/* ---------------- secoes ---------------- */

.section {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--sp-8);
}

.section__head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.section__title {
  font-size: var(--step-3);
}

.section__lede {
  max-width: 56ch;
  color: var(--text-dim);
}

@media (min-width: 900px) {
  .section {
    padding-block: var(--sp-9);
  }

  .section__head {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: var(--sp-6);
  }
}

/* faixa de specs / manifesto */

.specs {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.specs__item {
  padding: var(--sp-5);
  background: var(--surface);
}

.specs__item h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--step-1);
}

.specs__item p {
  color: var(--text-dim);
  font-size: var(--step--1);
}

.specs__index {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  color: var(--acid);
}

@media (min-width: 760px) {
  .specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------- grade de produtos ---------------- */

.grid-products {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: var(--line-strong);
}

.card__media {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(0, 245, 160, 0.1), transparent 62%),
    var(--surface-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.card__media img {
  width: 66%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img {
  transform: scale3d(1.06, 1.06, 1);
}

.card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 3px 8px;
  border: 1px solid var(--acid);
  border-radius: 3px;
  background: rgba(0, 245, 160, 0.1);
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
}

.card__index {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

.card__name {
  font-size: var(--step-1);
}

.card__tagline {
  color: var(--text-dim);
  font-size: var(--step--1);
}

.card__stock {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.card__foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
}

.price__old {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  text-decoration: line-through;
}

/* ---------------- pagina de produto ---------------- */

.product {
  position: relative;
  z-index: var(--z-content);
  padding-top: calc(var(--top-total) + var(--sp-6));
  padding-bottom: var(--sp-8);
}

.product__layout {
  display: grid;
  gap: var(--sp-6);
}

.product__gallery {
  display: grid;
  gap: var(--sp-3);
}

.product__thumbs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.product__thumb {
  width: 76px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.product__thumb[aria-pressed="true"],
.product__thumb:hover {
  border-color: var(--acid);
}

.product__title {
  font-size: var(--step-4);
}

.product__desc {
  color: var(--text-dim);
}

.field {
  display: grid;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  min-height: 42px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.chip[aria-pressed="true"] {
  border-color: var(--acid);
  background: var(--acid-dim);
  color: var(--acid);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qty button {
  width: 44px;
  height: 46px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  transition: background-color var(--dur-fast);
}

.qty button:hover {
  background: var(--surface-3);
}

.qty output {
  min-width: 46px;
  text-align: center;
  font-family: var(--font-mono);
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.datalist {
  display: grid;
  gap: 1px;
  margin-top: var(--sp-6);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.datalist div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.datalist dt {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--step--2);
}

@media (min-width: 900px) {
  .product__layout {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

/* ---------------- carrinho lateral ---------------- */

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(5, 7, 6, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility var(--dur);
  will-change: transform;
}

.drawer.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.drawer__title {
  font-size: var(--step-2);
}

.drawer__close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.drawer__order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
}

.drawer__order strong {
  color: var(--acid);
  letter-spacing: 0.06em;
}

.drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.line {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.line__media {
  width: 62px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.line__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  text-transform: uppercase;
}

.line__variation {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
}

.line__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.line__controls button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--font-mono);
}

.line__controls button:hover {
  border-color: var(--acid);
}

.line__qty {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.line__right {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.line__remove {
  color: var(--text-faint);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--dur-fast);
}

.line__remove:hover {
  color: var(--danger);
}

.drawer__empty {
  display: grid;
  gap: var(--sp-3);
  place-items: center;
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--text-faint);
}

.drawer__foot {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
}

.drawer__note {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  line-height: 1.5;
}

/* ---------------- toast ---------------- */

.toaster {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  z-index: 90;
  display: grid;
  gap: var(--sp-2);
  width: min(420px, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--acid);
  border-radius: var(--radius-sm);
  background: rgba(12, 17, 16, 0.96);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.toast--error {
  border-left-color: var(--danger);
}

/* ---------------- rodape ---------------- */

.footer {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(12, 17, 16, 0.6));
}

.footer__grid {
  display: grid;
  gap: var(--sp-5);
}

.footer__note {
  max-width: 60ch;
  color: var(--text-faint);
  font-size: var(--step--1);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.age-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  border: 1px solid var(--warn);
  border-radius: 3px;
  color: var(--warn);
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-6);
  }
}

/* ---------------- aviso de placeholder ---------------- */

.placeholder-note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 182, 72, 0.05);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
}

.placeholder-note strong {
  color: var(--warn);
}

/* ============================================================
   COMPONENTES EDITORIAIS DA HOME
   ============================================================ */

/* ---------------- marca no header e rodape ---------------- */

.logo__img {
  display: block;
  width: clamp(112px, 12vw, 152px);
  height: auto;
  object-fit: contain;
}

.logo__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
}

.header__cta {
  display: none;
}

.footer__logo {
  width: 128px;
  height: auto;
  object-fit: contain;
  margin-bottom: var(--sp-4);
}

@media (min-width: 900px) {
  .header__cta {
    display: inline-flex;
  }
}

.section--tight {
  padding-block: var(--sp-7);
}

/* ---------------- trilho horizontal ---------------- */

.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.rail__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail[hidden] {
  display: none;
}

.rail__track {
  display: grid;
  grid-auto-flow: column;
  /* mobile: 1,15 card — o proximo aparece parcialmente e convida ao swipe */
  grid-auto-columns: min(78%, 300px);
  gap: var(--sp-3);
  padding-block: var(--sp-2) var(--sp-4);
  align-items: stretch;
}

@media (min-width: 700px) {
  .rail__track {
    /* tablet: 2,5 cards */
    grid-auto-columns: min(38%, 300px);
    gap: var(--sp-4);
  }
}

@media (min-width: 1100px) {
  .rail__track {
    /* desktop: ~3,5 a 4 cards */
    grid-auto-columns: minmax(0, 300px);
  }
}

/* ---------------- card de variante ---------------- */

.vcard {
  scroll-snap-align: start;
  display: flex;
  min-width: 0;
}

.vcard__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.vcard__link:hover {
  /* deslocamento contido, no maximo 4px */
  transform: translate3d(0, -4px, 0);
  border-color: var(--line-strong);
}

.vcard__link:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.vcard__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgba(0, 245, 160, 0.07), transparent 62%);
  border-bottom: 1px solid var(--line);
}

.vcard__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.vcard__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}

.vcard__link:hover .vcard__img {
  transform: scale3d(1.04, 1.04, 1);
}

.vcard__body {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  margin-top: auto;
}

.vcard__index {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--acid);
}

.vcard__line {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  line-height: 1.05;
}

.vcard__variant {
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.35;
}

.vcard__action {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease-out);
}

.vcard__link:hover .vcard__action {
  color: var(--acid);
}

/* ---------------- chips / tabs ---------------- */

.chips--tabs {
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
  padding-bottom: 2px;
}

.chips--tabs::-webkit-scrollbar {
  display: none;
}

.chips--tabs .chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.chip.is-active {
  border-color: var(--acid);
  background: var(--acid-dim);
  color: var(--acid);
}

.chip__count {
  font-size: var(--step--2);
  opacity: 0.62;
}

/* ---------------- faixa de numeros ---------------- */

.numbers {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-block: 1px solid var(--line);
}

.numbers__item {
  display: grid;
  gap: var(--sp-1);
}

.numbers__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.2rem + 7vw, 6rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
}

.numbers__value--accent {
  color: var(--acid);
}

.numbers__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (min-width: 760px) {
  .numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
}

/* ---------------- banner intermediario ---------------- */

.feature {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #040605 0%, #0a100e 62%, rgba(0, 245, 160, 0.05) 100%);
  overflow: hidden;
}

.feature__text {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  position: relative;
  z-index: 1;
}

.feature__title {
  font-size: var(--step-3);
  line-height: 0.98;
  text-transform: none;
  letter-spacing: -0.02em;
}

.feature__support {
  max-width: 40ch;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.feature__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}

.feature__halo {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 160, 0.14), transparent 66%);
  filter: blur(8px);
}

.feature__visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.feature__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

@media (min-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--sp-7);
    padding: var(--sp-7) var(--sp-8);
  }

  .feature__title {
    font-size: var(--step-4);
  }
}

/* ---------------- perguntas frequentes ---------------- */

.faq {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq__item {
  background: var(--surface);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--acid);
  transition: transform var(--dur) var(--ease-out);
}

.faq__item[open] .faq__question::after {
  transform: rotate(45deg);
}

.faq__question:hover {
  color: var(--acid);
}

.faq__question:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: -2px;
}

.faq__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  max-width: 68ch;
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .vcard__link,
  .vcard__img,
  .faq__question::after {
    transition: none;
  }

  .rail {
    scroll-behavior: auto;
  }
}

/* ============================================================
   REFINAMENTO — hero, galeria, cards, ritmo e tipografia
   Este bloco vem por ultimo e prevalece sobre as regras anteriores.
   ============================================================ */

/* Nenhum titulo pode ficar escondido atras do header fixo. */
section[id],
[id^="painel-"] {
  scroll-margin-top: 110px;
}

/* ---------------- ritmo vertical ---------------- */

.section {
  padding-block: 64px;
}

.section--tight {
  padding-block: 56px;
}

.section__head,
.rail__head {
  margin-bottom: 28px;
}

@media (min-width: 900px) {
  .section {
    padding-block: 96px;
  }

  .section--tight {
    padding-block: 72px;
  }

  .section__head,
  .rail__head {
    margin-bottom: 40px;
  }
}

/* ---------------- tipografia ---------------- */

.section__title {
  font-size: clamp(2rem, 1.1rem + 3vw, 3.4rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
}

/* Contraste de escala: nem toda secao merece titulo gigante. */
.section__title--sm {
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.3rem);
}

.section__lede {
  max-width: 52ch;
  margin-top: 10px;
}

.page-head-block {
  padding-top: calc(var(--top-total) + 40px);
  padding-bottom: 28px;
}

.page-title {
  font-size: clamp(2.4rem, 1.2rem + 4vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.page-lede {
  max-width: 46ch;
  margin-top: 12px;
  color: var(--text-dim);
}

/* ---------------- hero ---------------- */

.hero {
  height: auto;
  min-height: 0;
  padding-top: calc(var(--top-total) + 20px);
  padding-bottom: 24px;
}

.hero__stage {
  min-height: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  align-content: start;
}

/* Mobile: imagem primeiro, depois o texto. Estrutura preservada. */
.hero-slide__visual {
  order: -1;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: #080d0b;
}

.hero-slide__visual picture,
.hero-slide__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Mockup preenche o container: nada de imagem transparente flutuando. */
.hero-slide__img {
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
}

.hero-slide__halo {
  display: none;
}

.hero-slide__title {
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  max-width: 13ch;
}

.hero-slide__support {
  max-width: 40ch;
  font-size: var(--step--1);
}

.hero-slide__facts {
  text-transform: uppercase;
}

@media (max-width: 899px) {
  .hero__stage {
    min-height: clamp(600px, 84svh, 760px);
  }

  .hero-slide {
    gap: var(--sp-4);
    padding-block: var(--sp-3);
  }

  .hero-slide__visual {
    max-width: min(340px, 74vw);
  }
}

@media (min-width: 900px) {
  .hero {
    padding-top: calc(var(--top-total) + 32px);
    padding-bottom: 12px;
  }

  .hero__stage {
    min-height: clamp(520px, 62vh, 640px);
  }

  .hero-slide {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    align-items: center;
    align-content: center;
    gap: clamp(2rem, 4vw, 4rem);
  }

  .hero-slide__visual {
    order: 0;
    max-width: clamp(650px, 46vw, 760px);
    margin-inline: 0 auto;
  }

  .hero-slide__text {
    max-width: 620px;
  }

  .hero-slide__title {
    font-size: clamp(3.6rem, 5.4vw, 5.6rem);
    line-height: 0.88;
    max-width: 620px;
  }

  .hero-slide__support {
    max-width: 44ch;
    font-size: var(--step-0);
  }
}

/* ---------------- trilho ---------------- */

.rail__head {
  align-items: flex-end;
}

.rail__nav {
  display: flex;
  gap: var(--sp-2);
  flex: none;
}

.rail__nav[hidden] {
  display: none;
}

.rail__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-dim);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.rail__arrow:hover {
  border-color: var(--acid);
  color: var(--acid);
}

.rail__hint {
  display: none;
}

.rail__track {
  /* mobile: 1,15 card */
  grid-auto-columns: min(74%, 300px);
  gap: 18px;
  padding-block: 2px 20px;
}

@media (min-width: 700px) {
  .rail__track {
    /* tablet: 2,4 cards */
    grid-auto-columns: min(40%, 300px);
    gap: 20px;
  }
}

@media (min-width: 1100px) {
  .rail__track {
    /* desktop: 4 cards inteiros + parte do quinto */
    grid-auto-columns: minmax(280px, calc((100% - 3 * 24px) / 4.35));
    gap: 24px;
  }
}

/* ---------------- card de variante ---------------- */

.vcard__link {
  min-height: 420px;
}

.vcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #080d0b;
  border-bottom: 1px solid var(--line);
  /* imagem ocupa ~62% da altura do card */
  flex: none;
}

.vcard__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.vcard__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.vcard__index {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--acid);
}

.vcard__body {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 20px;
}

.vcard__line {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.vcard__variant {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--text);
  /* no maximo duas linhas, para todos os cards ficarem iguais */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcard__action {
  margin-top: 12px;
}

.vcard__link:hover,
.vcard__link:focus-visible {
  border-color: var(--acid);
}

/* ---------------- card de linha ---------------- */

.grid-lines {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.lcard {
  display: flex;
  min-width: 0;
}

.lcard__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 440px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.lcard__link:hover,
.lcard__link:focus-visible {
  transform: translate3d(0, -4px, 0);
  border-color: var(--acid);
}

.lcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #080d0b;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.lcard__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.lcard__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.lcard__link:hover .lcard__img {
  transform: scale3d(1.04, 1.04, 1);
}

.lcard__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(4, 6, 5, 0.72);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lcard__body {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
}

.lcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.lcard__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.02;
  text-transform: uppercase;
}

.lcard__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acid);
}

.lcard__desc {
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.45;
}

.lcard__action {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease-out);
}

.lcard__link:hover .lcard__action {
  color: var(--acid);
}

/* ---------------- chips / tabs ---------------- */

.chip__badge {
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.chip.is-active .chip__badge {
  border-color: var(--acid);
  color: var(--acid);
}

.chip__count {
  display: none;
}

/* ---------------- faixa editorial ---------------- */

.statement {
  display: grid;
  gap: 20px;
  padding-block: 8px;
}

.statement__lead {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1rem + 5vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.statement__lead span {
  display: block;
}

.statement__accent {
  color: var(--acid);
}

.statement__note {
  max-width: 40ch;
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.55;
}

@media (min-width: 900px) {
  .statement {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 5rem);
  }

  .statement__note {
    padding-bottom: 10px;
  }
}

/* ---------------- banner intermediario ---------------- */

.feature__halo {
  display: none;
}

.feature__visual {
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: #080d0b;
}

.feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}

/* ---------------- galeria da pagina de linha ---------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.breadcrumb a {
  color: var(--text-dim);
  transition: color var(--dur-fast) var(--ease-out);
}

.breadcrumb a:hover {
  color: var(--acid);
}

.gallery {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.gallery__stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: #070b09;
  touch-action: pan-y;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease-out), visibility 420ms;
}

.gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.gallery__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(4, 6, 5, 0.66);
  backdrop-filter: blur(6px);
  color: var(--text-dim);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.gallery__arrow[hidden] {
  display: none;
}

.gallery__arrow:hover {
  border-color: var(--acid);
  color: var(--acid);
}

.gallery__arrow--prev {
  left: 12px;
}

.gallery__arrow--next {
  right: 12px;
}

.gallery__counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(4, 6, 5, 0.66);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.gallery__thumbs {
  display: flex;
  gap: 10px;
  /* width explicito + min-width: 0 impedem o flex de assumir o min-content
     dos 5 thumbs (460px) e esticar a pagina no mobile. */
  width: 100%;
  min-width: 0;
  max-width: 440px;
  margin-inline: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.gallery__thumbs::-webkit-scrollbar {
  display: none;
}

/* A miniatura virou <button>: zera padding e fundo herdados do agente do
   usuario. Sem rotulo, ela e so a imagem. */
.gthumb {
  flex: none;
  scroll-snap-align: start;
  display: block;
  width: 84px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.gthumb__media {
  display: block;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #080d0b;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.gthumb__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gthumb__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.gthumb.is-active .gthumb__media {
  border-color: var(--acid);
}

.gthumb:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------- pagina da linha ---------------- */

.product {
  padding-top: calc(var(--top-total) + 32px);
  padding-bottom: 56px;
}

.product__layout {
  display: grid;
  /* minmax(0,1fr): sem isso a trilha assume o min-content das miniaturas
     e estica a pagina no mobile. */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 20px;
  align-items: start;
}

.product__info {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.product__title {
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.product__desc {
  max-width: 46ch;
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.55;
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: 4px;
}

@media (min-width: 900px) {
  .product__layout {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .gallery__stage,
  .gallery__thumbs {
    max-width: min(100%, 680px);
    max-height: 680px;
    margin-inline: 0;
  }

  .gthumb,
  .gthumb__media {
    width: 96px;
  }

  .gthumb__media {
    height: 96px;
  }
}

/* ---------------- movimento reduzido ---------------- */

@media (prefers-reduced-motion: reduce) {
  .gallery__slide {
    transition: opacity 1ms linear;
  }

  .lcard__link,
  .lcard__img {
    transition: none;
  }

  .rail {
    scroll-behavior: auto;
  }
}

/* ============================================================
   CORRECOES DE VALIDACAO VISUAL
   ============================================================ */

/* A logo e quase quadrada (644x468): limitar pela ALTURA, senao ela
   estoura o header de 66px. */
.logo {
  align-items: center;
}

.logo__img {
  width: auto;
  height: 34px;
  max-width: 160px;
}

.logo picture {
  display: block;
}

@media (min-width: 900px) {
  .logo__img {
    height: 40px;
  }
}

/* Desktop: TEXTO a esquerda (~42%), PRODUTO a direita (~58%).
   No mobile a imagem continua vindo primeiro (order -1). */
@media (min-width: 900px) {
  .hero-slide__text {
    order: 0;
  }

  .hero-slide__visual {
    order: 1;
  }
}

/* Mobile: CTAs lado a lado quando couberem. */
@media (max-width: 899px) {
  .hero-slide__actions {
    flex-wrap: nowrap;
  }

  .hero-slide__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--sp-3);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
  }
}

@media (max-width: 380px) {
  .hero-slide__actions {
    flex-wrap: wrap;
  }

  .hero-slide__actions .btn {
    flex: 1 1 100%;
  }
}

/* Menos vazio entre o hero e a primeira secao. */
.hero__bar {
  padding-bottom: var(--sp-4);
}

@media (min-width: 900px) {
  .hero + .section {
    padding-top: 72px;
  }
}
/* O mockup e quadrado (1254x1254). Se o container quadrado for mais largo que
   a altura disponivel, o cover corta o produto embaixo. Derivando a largura da
   ALTURA, container e imagem ficam na mesma proporcao e nada e cortado. */
@media (min-width: 900px) {
  .hero-slide__visual {
    height: 100%;
    max-height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    max-width: min(58%, 760px);
    margin-inline: auto 0;
    justify-self: end;
  }
}
/* O produto e o protagonista: a coluna visual estica na altura toda do palco
   e o texto se centraliza dentro da sua propria coluna. */
@media (min-width: 900px) {
  .hero__stage {
    min-height: clamp(560px, 66vh, 680px);
  }

  .hero-slide {
    align-items: stretch;
  }

  .hero-slide__text {
    align-content: center;
  }

  .hero-slide__visual {
    align-self: stretch;
    max-width: none;
  }
}
/* O trilho excede a largura do shell de proposito (o proximo card aparece
   cortado). Por isso o alinhamento com a margem vem de padding, nao de
   width+margin auto, que nao centraliza conteudo maior que o container. */
.rail__track {
  width: auto;
  margin-inline: 0;
  padding-inline: max(1.25rem, calc((100vw - var(--shell)) / 2));
}

.rail__track > *:last-child {
  /* respiro no fim do trilho, para o ultimo card nao colar na borda */
  margin-right: max(1.25rem, calc((100vw - var(--shell)) / 2));
}
/* Sem scroll-padding o snap alinha o primeiro card ao inicio do scrollport e
   anula o padding do trilho, desalinhando-o do titulo da secao. */
.rail {
  scroll-padding-inline: max(1.25rem, calc((100vw - var(--shell)) / 2));
}
/* ============================================================
   RODADA DE REFINAMENTO — desktop maior, hero com PNG, novas secoes
   Bloco final: prevalece sobre tudo acima.
   ============================================================ */

:root {
  --shell: min(1540px, calc(100vw - 96px));
}

@media (max-width: 720px) {
  :root {
    /* mobile preservado: mesma margem de antes */
    --shell: min(1540px, calc(100vw - 40px));
  }
}

/* ---------------- barra superior ---------------- */

.topbar__text {
  text-transform: uppercase;
}

/* ---------------- header ---------------- */

.header__cta {
  display: none !important;
}

/* ---------------- hero: palco do recorte ---------------- */

.hero {
  padding-top: calc(var(--top-total) + 24px);
  padding-bottom: 16px;
}

.hero__ring {
  position: absolute;
  top: 46%;
  right: 20%;
  width: min(40vw, 560px);
  aspect-ratio: 1;
  transform: translate3d(50%, -50%, 0);
  border: 1px solid rgba(245, 247, 246, 0.055);
  border-radius: 50%;
}

.hero-slide__visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: visible;
  /* sem card, sem moldura, sem fundo: o recorte flutua */
  background: none;
  border-radius: 0;
  max-width: none;
  aspect-ratio: auto;
  margin-inline: auto;
}

.hero-slide__visual picture {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.hero-slide__img {
  width: auto;
  height: auto;
  max-width: min(92%, 720px);
  max-height: min(74vh, 620px);
  object-fit: contain;
  object-position: center bottom;
  /* sombra de contato discreta, nada de glow */
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.62));
  transform:
    translate(var(--hero-product-x, 0px), var(--hero-product-y, 0px))
    scale(var(--hero-product-scale, 1));
}

/* Sombra de contato no chao, elipse muito discreta. */
.hero-slide__contact {
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: min(46%, 320px);
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.62), transparent 70%);
  pointer-events: none;
}

/* WAKA 50K nao possui recorte transparente no pacote: so este slide recebe
   moldura, para nao exibir um quadrado solto no meio do layout. */
.hero-slide__visual.is-framed {
  align-self: center;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

.hero-slide__visual.is-framed .hero-slide__img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: none;
  transform: none;
}

.hero-slide__visual.is-framed .hero-slide__contact {
  display: none;
}

/* ---------------- hero: mobile preservado ---------------- */

@media (max-width: 899px) {
  .hero__stage {
    min-height: clamp(600px, 86svh, 780px);
  }

  .hero-slide__visual {
    order: -1;
    min-height: 280px;
    max-height: 390px;
  }

  .hero-slide__img {
    max-height: 340px;
    max-width: 84%;
  }

  .hero-slide__visual.is-framed {
    width: min(74vw, 320px);
    margin-inline: auto;
  }

  .hero__ring {
    right: 50%;
    top: 30%;
    width: 78vw;
  }
}

/* ---------------- hero: desktop maior ---------------- */

@media (min-width: 900px) {
  .hero__stage {
    min-height: clamp(600px, 72vh, 760px);
  }

  .hero-slide {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4.5rem);
  }

  .hero-slide__text {
    max-width: 680px;
    align-content: center;
  }

  .hero-slide__title {
    font-size: clamp(3.4rem, 4.6vw, 5.2rem);
    line-height: 0.9;
    max-width: 640px;
  }

  .hero-slide__support {
    max-width: 46ch;
    font-size: var(--step-0);
  }

  .hero-slide__visual {
    order: 1;
    min-height: 540px;
    /* o produto pode ultrapassar discretamente a divisao central */
    margin-right: clamp(-2.5rem, -2vw, 0rem);
  }

  .hero-slide__img {
    max-height: min(74vh, 690px);
    max-width: min(96%, 720px);
  }
}

@media (min-width: 1500px) {
  .hero-slide__title {
    font-size: clamp(4rem, 4.4vw, 5.6rem);
  }

  .hero-slide__img {
    max-height: 700px;
  }
}

/* ---------------- vitrines maiores no desktop ---------------- */

@media (min-width: 1100px) {
  .rail__track {
    grid-auto-columns: minmax(300px, calc((100% - 3 * 24px) / 4.3));
  }
}

@media (min-width: 1500px) {
  .rail__track {
    grid-auto-columns: minmax(320px, calc((100% - 3 * 26px) / 4.25));
    gap: 26px;
  }
}

.vcard__link {
  min-height: 0;
}

.vcard__price {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.grid-lines {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}

/* ---------------- cards informativos ---------------- */

.infocards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.infocard {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.infocard__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--acid);
}

.infocard__title {
  font-size: var(--step-1);
  text-transform: uppercase;
  line-height: 1.05;
}

.infocard__text {
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.5;
}

.infocard--plain {
  background: none;
}

.section__note {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ---------------- mapa institucional ---------------- */

.localmap {
  display: grid;
  gap: 24px;
  align-items: center;
}

.localmap__title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin-top: 10px;
}

.localmap__data {
  display: grid;
  gap: 1px;
  margin-top: 24px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.localmap__data > div {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  background: var(--surface);
}

.localmap__data dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.localmap__data dd {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.localmap__canvas {
  position: relative;
  width: 100%;
  height: clamp(320px, 42vw, 420px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #070b09;
}

/* O mapa e um SVG externo servido por <img>. object-fit: cover recorta a
   sobra sem distorcer a escala das ruas — mapa esticado desinforma. */
.localmap__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Credito do OpenStreetMap: exigencia da licenca ODbL, nao enfeite.
   Fica sobre o mapa, legivel, e nao deve ser removido. */
.localmap__legend {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(4, 6, 5, 0.92), rgba(4, 6, 5, 0));
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--text-dim);
}

.localmap__credit {
  color: var(--text-faint);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .localmap {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 5rem);
  }

  .localmap__canvas {
    height: clamp(400px, 34vw, 520px);
  }
}

/* ---------------- pagina de produto ---------------- */

.product__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem);
  letter-spacing: -0.02em;
}

.field--inline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.field--inline .field__label {
  margin: 0;
}

@media (min-width: 900px) {
  .gallery__stage,
  .gallery__thumbs {
    max-width: min(100%, 680px);
  }
}

/* ---------------- ritmo ---------------- */

@media (min-width: 1500px) {
  .section {
    padding-block: 104px;
  }

  .section--tight {
    padding-block: 80px;
  }
}

/* O recorte nao pode encostar nem ultrapassar o palco: limitar pela ALTURA do
   palco (nao por vh) garante que nenhum produto seja cortado em qualquer
   viewport, e deixa o respiro que a composicao editorial pede. */
.hero-slide__img {
  max-height: 88%;
}

@media (min-width: 900px) {
  .hero-slide__img {
    max-height: 88%;
    max-width: min(96%, 720px);
  }
}

@media (max-width: 899px) {
  .hero-slide__img {
    max-height: 92%;
  }
}
/* ============================================================
   HERO — dimensionamento definitivo do recorte
   max-height percentual nao resolve quando a altura do pai vem de stretch.
   Solucao robusta: a IMAGEM PREENCHE a caixa e object-fit: contain faz o
   ajuste. Nada e cortado em nenhum viewport, e o tamanho passa a ser
   controlado pelo padding do palco.
   ============================================================ */

.hero-slide__visual {
  padding: 0 0 3% 0;
}

.hero-slide__img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.hero-slide__visual.is-framed {
  padding: 0;
}

@media (min-width: 900px) {
  .hero-slide__img {
    max-width: 100%;
    max-height: 100%;
  }
}

@media (max-width: 899px) {
  .hero-slide__img {
    max-height: 100%;
  }
}
/* Altura DEFINIDA no palco (nao herdada de stretch): so assim height:100% +
   object-fit:contain resolvem e o recorte nunca ultrapassa a area. */
.hero-slide__visual {
  align-self: center;
  height: clamp(280px, 52vw, 390px);
  min-height: 0;
}

@media (min-width: 900px) {
  .hero-slide__visual {
    height: clamp(420px, 42vw, 620px);
    min-height: 0;
  }
}

@media (min-width: 1500px) {
  .hero-slide__visual {
    height: clamp(520px, 38vw, 660px);
  }
}

.hero-slide__visual picture {
  width: 100%;
  height: 100%;
}

.hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* Dimensionamento determinístico do recorte.
   height:100% dentro de grid centralizado nao resolve contra a celula; com
   posicionamento absoluto no palco (que tem altura definida) o encaixe e
   exato e object-fit:contain garante que nada seja cortado. */
.hero-slide__visual {
  position: relative;
  display: block;
}

.hero-slide__visual picture {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
}

.hero-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
}

.hero-slide__visual.is-framed picture,
.hero-slide__visual.is-framed .hero-slide__img {
  position: absolute;
  inset: 0;
}

.hero-slide__contact {
  z-index: 0;
}

/* ---------------- descricao e ficha tecnica do produto ---------------- */

.prodinfo {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .prodinfo {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

.prodinfo__text {
  display: grid;
  gap: var(--sp-3);
}

.prodinfo__p {
  color: var(--text-dim);
  max-width: 62ch;
}

.prodinfo__specs {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.prodinfo__specs-title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acid);
  margin-bottom: var(--sp-3);
}

.prodinfo__note {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-faint);
}

/* ---------------- CTA flutuante de sabor (mobile) ---------------- */

/*
 * Aparece so no mobile e so enquanto o seletor de sabor esta fora de vista.
 * z-index 50: acima do conteudo, ABAIXO do overlay (70) e da gaveta (80) —
 * assim o carrinho aberto cobre o botao em vez de disputar espaco com ele.
 */
.flavor-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  padding: 14px max(1.25rem, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5, 7, 6, 0.97) 45%, rgba(5, 7, 6, 0));
  transform: translate3d(0, 130%, 0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.flavor-cta.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}

/* A sombra e o que separa o botao do fundo escuro e sustenta a leitura de
   "acao principal". Sem ela o CTA some no preto da pagina. */
.flavor-cta__btn {
  box-shadow:
    0 10px 28px rgba(0, 245, 160, 0.34),
    0 2px 8px rgba(0, 0, 0, 0.55);
}

.flavor-cta__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  animation: flavor-cta-hint 2.4s var(--ease-in-out) infinite;
}

@keyframes flavor-cta-hint {
  0%,
  62%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  76% {
    transform: translate3d(0, 3px, 0);
  }
}

/* Acima de 900px o seletor de sabor ja esta visivel ao lado da galeria:
   o botao nao teria funcao. */
@media (min-width: 900px) {
  .flavor-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flavor-cta {
    transition: none;
  }

  .flavor-cta__arrow {
    animation: none;
  }
}