/* ==========================================================================
   MUNDIM3D — style.css
   Design tokens + reset + base tipográfica + grid.
   Paleta extraída por pixel do arquivo real da logo (roxo → azul, preto,
   branco) — fundo claro/gelo, roxo e azul como acento (nunca fundo em
   área grande), pensado para público sensível a estímulo visual
   (neurodivergente) sem perder a identidade da marca.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Cores base — branco / azul-gelo, nunca escuro nem saturado como fundo */
  --color-bg: #f5f8fe;
  --color-bg-elevated: #eaf1fb;
  --color-surface: #ffffff;
  --color-surface-hover: #f2f7fd;
  --color-border: rgba(20, 20, 45, 0.09);
  --color-border-strong: rgba(20, 20, 45, 0.17);

  --color-ink: #17171f;
  --color-muted: #5b5d6e;
  --color-placeholder-bg: #eceffa;

  /* Acentos — extraídos por amostragem de pixel do arquivo real da logo
     (assets/logo/mundim3d-logo.jpg). Todos calibrados p/ contraste AA. */
  --color-purple: #42327c;
  --color-purple-hover: #332560;
  --color-purple-light: #9885cc;
  --color-purple-soft: #ece8f7;

  --color-blue: #2e76b0;
  --color-blue-light: #6fa8d8;
  --color-blue-soft: #e3eef8;

  --color-lavender: #b8a8dc;
  --color-lavender-soft: #f0ecfa;

  /* Âncora escura (só o footer) — preto azulado bem escuro, ecoa o preto
     da logo, nunca preto 100% puro numa área grande */
  --color-midnight: #14121d;
  --color-midnight-border: rgba(255, 255, 255, 0.12);
  --color-on-dark: #fafbff;

  --gradient-brand: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--color-purple-soft) 0%, var(--color-blue-soft) 100%);
  --gradient-text: linear-gradient(90deg, var(--color-purple) 0%, var(--color-blue) 100%);

  --shadow-soft: 0 10px 28px rgba(25, 25, 55, 0.08), 0 2px 8px rgba(25, 25, 55, 0.05);
  --shadow-soft-hover: 0 18px 40px rgba(25, 25, 55, 0.14), 0 4px 14px rgba(25, 25, 55, 0.07);
  --shadow-button: 0 8px 22px rgba(66, 50, 124, 0.28);
  --shadow-button-hover: 0 12px 30px rgba(66, 50, 124, 0.36);

  /* Tipografia — curvas suaves, ainda legível e adulta */
  --font-display: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 5rem;

  /* Espaçamento */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout — cantos bem generosos, sensação macia */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-full: 999px;

  /* Transições — rápidas e suaves, satisfação sem exagero */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;

  --header-height: 84px;
  --announcement-height: 44px;
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

::selection {
  background: var(--color-purple-soft);
  color: var(--color-purple-hover);
}

/* Foco visível para acessibilidade (teclado) */
:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   LAYOUT BASE
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section-heading {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-xs);
}

.section-title {
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
}

.section-subtitle {
  color: var(--color-muted);
  font-size: var(--fs-lg);
  margin-top: var(--space-sm);
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  stroke: currentColor;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-purple);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-button);
}

.btn-primary:hover {
  background: var(--color-purple-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1.5px solid var(--color-border-strong);
}

.btn-secondary:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-purple-light);
  transform: translateY(-2px);
}

.btn:active {
  transform: scale(0.96);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Placeholder de conteúdo — removido conforme cada seção é implementada */
.placeholder-note {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

/* --------------------------------------------------------------------------
   ACESSIBILIDADE — MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   BREAKPOINTS DE REFERÊNCIA
   mobile: até 767px (padrão, mobile-first)
   tablet: 768px – 1023px
   desktop: 1024px+
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --space-2xl: 8rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-2xl: 10rem;
  }
}

/* Compensa o header fixo (+ a faixa de frete grátis acima dele) ao rolar
   até uma âncora */
.section,
.hero,
.footer {
  scroll-margin-top: calc(var(--announcement-height) + var(--header-height));
}

.btn-sm {
  padding: 0.6rem 1.2rem;
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   FAIXA DE FRETE GRÁTIS
   Fica acima do header fixo — por isso o header (e tudo que depende da
   altura dele: scroll-margin, padding do hero, painel mobile) soma
   --announcement-height à conta. O brilho que passa é só decorativo,
   então cai fora com prefers-reduced-motion (regra global do site).
   -------------------------------------------------------------------------- */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  height: var(--announcement-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: var(--container-padding);
  background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-blue) 100%);
  color: #fff;
  font-weight: 700;
  /* Um pouco maior que --fs-xs: é a mensagem comercial mais importante do
     topo e 11px ficava pequeno demais pra ela. Precisa caber em uma linha
     só até 360px — se quebrar em duas, estoura a altura fixa da faixa e
     desalinha o header inteiro (--announcement-height entra no cálculo de
     posição do header, do hero e do menu mobile). */
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-align: center;
  overflow: hidden;
}

.announcement-bar .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.announcement-bar strong {
  font-weight: 800;
}

/* Brilho diagonal que varre a faixa de tempos em tempos — chama atenção
   sem gritar. */
.announcement-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  animation: announcement-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes announcement-shine {
  0%,
  55% {
    background-position: 120% 0;
  }
  100% {
    background-position: -20% 0;
  }
}

@media (max-width: 480px) {
  .announcement-bar {
    font-size: 0.74rem;
    gap: 0.35rem;
  }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: var(--announcement-height);
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    backdrop-filter var(--duration-base) var(--ease-standard);
}

.header.is-scrolled {
  background: rgba(245, 248, 254, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-link {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-muted);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-purple);
  transition: right var(--duration-base) var(--ease-standard);
}

.nav-link:hover {
  color: var(--color-ink);
}

.nav-link:hover::after {
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-whatsapp {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
  margin-inline: auto;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 29, 0.4);
  z-index: 90;
}

@media (max-width: 1023px) {
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 84vw);
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    padding: calc(var(--announcement-height) + var(--header-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-standard);
    z-index: 95;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .nav-link {
    font-size: var(--fs-lg);
  }
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .header-whatsapp {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--announcement-height) + var(--header-height) + var(--space-lg));
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Grade de pontos sutil no canto superior direito — decoração com padrão
   geométrico claro (não pontos soltos em posições aleatórias) que some
   em degradê pra dentro do fundo. */
.hero-dot-grid {
  position: absolute;
  top: -5%;
  right: -5%;
  width: 55%;
  height: 70%;
  background-image: radial-gradient(var(--color-purple-light) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at top right, black 0%, transparent 72%);
  opacity: 0.35;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.hero-blob-1 {
  width: 320px;
  height: 320px;
  top: -8%;
  right: 5%;
  background: var(--color-blue-soft);
}

.hero-blob-2 {
  width: 260px;
  height: 260px;
  bottom: -10%;
  left: -5%;
  background: var(--color-purple-soft);
}

@keyframes particle-pulse {
  0%,
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.4) translateY(-10px);
    opacity: 0.6;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-purple-hover);
  max-width: 32ch;
}

.hero-title {
  font-size: clamp(var(--fs-4xl), 8vw, var(--fs-5xl));
  margin-top: var(--space-sm);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero-subtitle {
  color: var(--color-muted);
  font-size: var(--fs-lg);
  max-width: 46ch;
  margin-top: var(--space-md);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero-visual {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 65%;
  height: 65%;
  background: var(--gradient-brand-soft);
  filter: blur(50px);
  border-radius: 50%;
  opacity: 0.8;
}

/* Composição em pilha: uma foto grande em destaque na frente, uma segunda
   espiando por trás/acima — alinhamento claro entre as duas, não soltas
   no espaço em branco. */
.hero-stack {
  position: relative;
  width: 240px;
  height: 240px;
}

.hero-photo {
  position: absolute;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 5px solid var(--color-surface);
  box-shadow: var(--shadow-soft-hover);
  animation: float 8s ease-in-out infinite;
  /* As duas fotos do hero (kit 2 e Sylveon) são paisagem 4:3 — moldura
     quadrada cortava as laterais (o boneco e o ovo das pontas do Kit 2). */
  aspect-ratio: 4 / 3;
}

.hero-photo-back {
  width: 170px;
  top: 0;
  right: 0;
  animation-delay: 0.6s;
}

.hero-photo-front {
  width: 210px;
  bottom: 0;
  left: 0;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translateY(-14px) rotate(var(--rot, 0deg));
  }
}

.hero-photo-back {
  --rot: 6deg;
}

.hero-photo-front {
  --rot: -4deg;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-2xl);
  }

  .hero-visual {
    height: 460px;
  }

  .hero-stack {
    width: 340px;
    height: 340px;
  }

  .hero-photo-back {
    width: 230px;
  }

  .hero-photo-front {
    width: 290px;
  }
}

/* --------------------------------------------------------------------------
   MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding-block: var(--space-sm);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-inline-end: var(--space-lg);
}

.marquee-list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.marquee-list li::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-purple-light);
  margin-left: var(--space-lg);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   PRODUTOS — GRID E CARDS
   -------------------------------------------------------------------------- */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.filter-chip:hover {
  border-color: var(--color-purple-light);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.filter-chip.is-active {
  background: var(--color-purple);
  border-color: var(--color-purple);
  color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   KITS SENSORIAIS — carro-chefe, destaque máximo
   -------------------------------------------------------------------------- */
.kits-highlight {
  background: var(--gradient-brand-soft);
  border-block: 1px solid var(--color-border);
}

#kits-grid.kits-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
}

.kits-grid .product-card {
  border-width: 2px;
  border-color: var(--color-purple-light);
}

.kits-grid .product-card--premium {
  border-color: var(--color-purple);
  box-shadow: var(--shadow-soft-hover);
  background: linear-gradient(180deg, var(--color-purple-soft) 0%, var(--color-surface) 38%);
}

/* --------------------------------------------------------------------------
   AVISO DE PERSONALIZAÇÃO — só aparece com o filtro Colecionáveis ativo
   -------------------------------------------------------------------------- */
.customization-notice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: transparent;
  border: 1.5px dashed var(--color-purple-light);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-md);
  margin-top: calc(var(--space-md) * -1 + var(--space-xs));
  margin-bottom: var(--space-lg);
  font-size: var(--fs-sm);
}

.customization-notice .icon {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  color: var(--color-purple);
}

.customization-notice a {
  color: var(--color-purple-hover);
  font-weight: 700;
  text-decoration: underline;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.products-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-xl) 0;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transform: translateY(0) scale(1);
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-8px) scale(1.01);
  border-color: var(--color-purple-light);
  box-shadow: var(--shadow-soft-hover);
}

/* Selo sutil de destaque no lugar do brilho que seguia o mouse — mais
   calmo para quem é sensível a estímulo visual constante. */
.card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--duration-base) var(--ease-standard);
  pointer-events: none;
}

.product-card:hover .card-glow,
.product-card:focus-visible .card-glow {
  box-shadow: inset 0 0 0 2px var(--color-purple-light);
}

.product-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-placeholder-bg);
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
  /* Sem isso, arrastar o dedo bem em cima da foto (o alvo mais óbvio pro
     polegar) faz o navegador tentar "arrastar a imagem" ou abrir o menu
     de salvar em vez de rolar o carrossel — atrapalha justamente o
     arrastar lateral dos Kits Sensoriais no celular. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.product-card:hover .product-card-media img,
.product-card:focus-visible .product-card-media img {
  transform: scale(1.06);
}

/* Setinhas de navegação — só aparecem em produtos com mais de uma foto
   (ex.: exemplos de personalização). Ficam sempre visíveis no mobile
   (sem hover) e aparecem no hover em telas maiores. */
.media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(23, 23, 31, 0.55);
  color: var(--color-on-dark);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.media-nav:hover {
  background: rgba(23, 23, 31, 0.8);
}

.media-prev {
  left: var(--space-xs);
}

.media-next {
  right: var(--space-xs);
}

.media-dots {
  position: absolute;
  bottom: var(--space-xs);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 5px;
}

.media-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background var(--duration-base) var(--ease-standard);
}

.media-dot.is-active {
  background: var(--color-on-dark);
}

@media (hover: hover) {
  .media-nav {
    opacity: 0;
  }

  .product-card-media:hover .media-nav {
    opacity: 1;
  }
}

.product-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-purple);
  color: var(--color-on-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  max-width: calc(100% - var(--space-md));
}

.product-badge-kit {
  background: var(--color-blue);
}

.product-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  flex: 1;
}

.product-category {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.product-name {
  font-size: var(--fs-lg);
  color: var(--color-ink);
}

.product-description {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.product-pieces {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 1.1rem;
}

.product-pieces li {
  list-style: disc;
  color: var(--color-ink);
  font-size: var(--fs-xs);
}

.product-age-range {
  color: var(--color-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Resumo curto de peças do kit e preço-base de variantes — só existem
   pro card compacto do catálogo mobile (ver media query de mobile mais
   abaixo); no desktop e no modal de detalhe, a versão completa é que vale. */
.product-pieces-summary,
.product-price--from {
  display: none;
}

/* Lista organizada de variantes de preço (cor, tamanho etc.) — em vez de
   espremer tudo numa única linha de texto que quebra de forma estranha. */
.price-variants {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}

.price-variant {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
}

.price-variant span {
  color: var(--color-muted);
}

.price-variant strong {
  color: var(--color-ink);
  font-size: var(--fs-base);
  white-space: nowrap;
}

/* Dentro do modal a variação deixa de ser informativa e vira escolha: é
   ali que o cliente decide cor/tamanho antes de ir pro carrinho, então
   precisa parecer clicável e ter estado selecionado óbvio. */
#modal-price-variants .price-variant {
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

#modal-price-variants .price-variant:hover {
  border-color: var(--color-purple-light);
}

#modal-price-variants .price-variant.is-selected {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
}

#modal-price-variants .price-variant.is-selected span {
  color: var(--color-ink);
  font-weight: 700;
}

/* Placeholder claramente identificado — dado real ainda não definido */
.is-placeholder,
.product-price.is-placeholder,
.product-description.is-placeholder,
.product-age-range.is-placeholder {
  color: var(--color-muted);
  font-style: italic;
}

.product-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-xs);
}

.product-price {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-ink);
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.product-actions .btn {
  width: 100%;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MODAL DE PRODUTO
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-surface);
  opacity: 0;
  /* Trava dupla: [hidden] já derruba pro display:none nativo, mas o
     pointer-events:none garante que nada fique clicável por trás de um
     "invisível" caso o display alguma vez volte a vazar (ver bug histórico
     abaixo). Nunca combine display:flex/grid/block direto no seletor base
     de um elemento que também é escondido via atributo `hidden` — a regra
     de origem do CSS de autor sempre vence a UA stylesheet do [hidden],
     então o elemento fica com display aplicado mesmo com hidden=true. */
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.modal-overlay:not([hidden]) {
  display: flex;
  pointer-events: auto;
}

.modal-overlay.is-open {
  opacity: 1;
}

/* Painel em tela cheia — clicar num produto abre "uma página dentro da
   página", não uma janelinha centralizada. Desliza pela lateral, igual
   o carrinho, só que ocupando a tela inteira. */
.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}

.modal-overlay.is-open .modal {
  transform: translateX(0);
}

.modal-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--container-padding);
  border-bottom: 1px solid var(--color-border);
}

.modal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  transition: background var(--duration-fast) var(--ease-standard);
}

.modal-back-btn:hover {
  background: var(--color-bg-elevated);
}

.modal-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.modal-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-placeholder-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.modal-media .media-nav {
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  opacity: 1;
}

.modal-media img,
.modal-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-body {
  padding: var(--space-lg) var(--container-padding) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 640px;
  margin-inline: auto;
  width: 100%;
}

.modal-body h3 {
  font-size: var(--fs-2xl);
  color: var(--color-ink);
}

.modal-body p {
  color: var(--color-muted);
}

.modal-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.modal-footer .product-actions {
  flex: 1 1 auto;
}

.modal-footer .product-price {
  padding-top: 0.6rem;
  font-size: var(--fs-xl);
}

/* A partir de tablet, a "página cheia" vira um cartão centralizado com
   tamanho travado — sem isso, o painel ocupava 100vw/100vh inteiros e
   sobrava muito espaço vazio ao redor de descrições curtas em telas
   largas (o que o motivou essa mudança: print do usuário mostrando o
   painel do produto quase vazio num monitor grande). */
@media (min-width: 768px) {
  .modal-overlay {
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--container-padding);
    background: rgba(20, 20, 45, 0.45);
  }

  .modal {
    width: 100%;
    max-width: 1040px;
    height: min(680px, 88vh);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft-hover);
    overflow: hidden;
    transform: translateY(24px) scale(0.98);
  }

  .modal-overlay.is-open .modal {
    transform: translateY(0) scale(1);
  }

  .modal-content {
    flex-direction: row;
    overflow: hidden;
  }

  .modal-media {
    aspect-ratio: auto;
    width: 50%;
    height: 100%;
  }

  .modal-body {
    width: 50%;
    max-width: 560px;
    margin-inline: 0 auto;
    padding: var(--space-2xl);
    overflow-y: auto;
    height: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   CARRINHO — ÍCONE NO HEADER
   -------------------------------------------------------------------------- */
.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--color-ink);
  transition: background var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.cart-toggle:hover {
  background: var(--color-purple-soft);
}

.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-purple);
  color: var(--color-on-dark);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-bg);
}

@keyframes cart-pulse {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.cart-toggle.cart-pulse {
  animation: cart-pulse 0.4s var(--ease-standard);
}

/* Miniatura "voando" até o carrinho ao clicar em "+ Carrinho" */
.fly-to-cart {
  position: fixed;
  z-index: 300;
  margin: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  pointer-events: none;
  box-shadow: var(--shadow-soft-hover);
  transition: transform 0.55s cubic-bezier(0.55, 0, 0.85, 0.35), opacity 0.55s ease-in;
}

/* --------------------------------------------------------------------------
   CARRINHO — DRAWER
   -------------------------------------------------------------------------- */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  pointer-events: none;
}

.cart-overlay:not([hidden]) {
  pointer-events: auto;
}

.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 29, 0.45);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.cart-overlay.is-open .cart-backdrop {
  opacity: 1;
}

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 92vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft-hover);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}

.cart-overlay.is-open .cart-panel {
  transform: translateX(0);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.cart-header h3 {
  color: var(--color-ink);
}

.cart-close {
  position: static;
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
  background: var(--color-bg-elevated);
  color: var(--color-ink);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cart-empty {
  color: var(--color-muted);
  text-align: center;
  padding-top: var(--space-xl);
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-sm);
  align-items: center;
}

.cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-placeholder-bg);
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cart-item-name {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

.cart-item-price {
  color: var(--color-muted);
  font-size: var(--fs-xs);
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 0.25rem;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1;
  transition: background var(--duration-fast) var(--ease-standard);
}

.qty-btn:hover {
  background: var(--color-purple-soft);
}

.cart-item-remove {
  color: var(--color-muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  transition: color var(--duration-fast) var(--ease-standard);
}

.cart-item-remove:hover {
  color: var(--color-purple);
}

.cart-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.cart-footer .cart-checkout {
  width: 100%;
}

.cart-checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Resumo do carrinho — subtotal e progresso do frete grátis. A hierarquia
   aqui é proposital: subtotal maior, mensagem de frete em destaque de cor,
   barra fina e aviso de orçamento discreto. É um painel estreito no
   celular; empilhar tudo com o mesmo peso vira ruído. */
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
}

.cart-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cart-subtotal span {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.cart-subtotal strong {
  font-size: var(--fs-xl);
  color: var(--color-ink);
}

.cart-shipping {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.cart-shipping .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cart-shipping strong {
  color: var(--color-purple-hover);
}

.cart-shipping.is-free {
  color: var(--color-purple-hover);
  font-weight: 700;
}

.cart-progress {
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.cart-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  transition: width var(--duration-base) var(--ease-standard);
}

.cart-note {
  font-size: 0.7rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   EXPERIÊNCIA VISUAL — GALERIA
   -------------------------------------------------------------------------- */
.experience-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.experience-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-placeholder-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.experience-card video,
.experience-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: linear-gradient(to top, rgba(20, 18, 29, 0.85), transparent);
  color: var(--color-on-dark);
  font-weight: 700;
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .experience-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   COMO FUNCIONA — TIMELINE
   -------------------------------------------------------------------------- */
.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  counter-reset: step;
}

.timeline-step {
  position: relative;
  padding-left: calc(var(--space-lg) + 1rem);
  border-left: 2px solid var(--color-border-strong);
  padding-bottom: var(--space-sm);
}

.timeline-step:last-child {
  border-left-color: transparent;
}

.timeline-number {
  position: absolute;
  left: -1.4rem;
  top: 0;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-purple);
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-button);
}

.timeline-title {
  font-size: var(--fs-lg);
  margin-bottom: 0.35rem;
  color: var(--color-ink);
}

.timeline-desc {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  max-width: 46ch;
}

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
  }

  .timeline-step {
    padding-left: 0;
    padding-top: calc(var(--space-lg) + 1rem);
    border-left: none;
    border-top: 2px solid var(--color-border-strong);
  }

  .timeline-number {
    left: 0;
    top: -1.4rem;
  }
}

/* --------------------------------------------------------------------------
   PERSONALIZAÇÃO
   -------------------------------------------------------------------------- */
.personalizacao-inner {
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--container-padding);
  background: var(--gradient-brand-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.personalizacao-inner .section-title,
.personalizacao-inner .section-eyebrow {
  color: var(--color-ink);
}

.personalizacao-inner .btn {
  margin-top: var(--space-sm);
}

.audience-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.audience-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   ENVIO — MAPA DO BRASIL
   -------------------------------------------------------------------------- */
.envio-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shipping-network {
  width: min(380px, 100%);
  height: auto;
}

.route-dot {
  fill: var(--color-purple);
  filter: drop-shadow(0 0 5px rgba(66, 50, 124, 0.5));
  animation: particle-pulse 3.5s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* --------------------------------------------------------------------------
   AVALIAÇÕES
   -------------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

.testimonial-card {
  background: linear-gradient(165deg, var(--color-surface) 60%, var(--color-bg-elevated) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-purple-light);
  box-shadow: var(--shadow-soft-hover);
}

.testimonial-stars .star {
  color: var(--color-border-strong);
  font-size: var(--fs-sm);
}

.testimonial-stars .star.is-filled {
  color: var(--color-purple);
}

.testimonial-text {
  color: var(--color-ink);
  font-size: var(--fs-base);
  flex: 1;
}

.testimonial-author {
  font-weight: 700;
  color: var(--color-ink);
}

.testimonial-location {
  color: var(--color-muted);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   INSTAGRAM
   -------------------------------------------------------------------------- */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.instagram-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-placeholder-bg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.instagram-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.instagram-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 29, 0.38);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.instagram-tile-icon {
  position: absolute;
  z-index: 1;
  width: 26px;
  height: 26px;
  color: var(--color-on-dark);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.instagram-tile-icon .icon {
  width: 100%;
  height: 100%;
}

.instagram-tile:hover,
.instagram-tile:focus-visible {
  transform: scale(1.04);
}

.instagram-tile:hover img,
.instagram-tile:focus-visible img {
  transform: scale(1.08);
}

.instagram-tile:hover::after,
.instagram-tile:focus-visible::after {
  opacity: 1;
}

.instagram-tile:hover .instagram-tile-icon,
.instagram-tile:focus-visible .instagram-tile-icon {
  opacity: 1;
}

.instagram-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .instagram-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final {
  text-align: center;
  background: var(--gradient-brand-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.cta-final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.cta-final .section-title {
  max-width: 20ch;
  color: var(--color-ink);
}

.cta-final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   FOOTER — âncora escura (preto azulado, contraste de ritmo no fim da página)
   -------------------------------------------------------------------------- */
.footer {
  padding-block: var(--space-xl) var(--space-lg);
  background: var(--color-midnight);
  color: var(--color-on-dark);
}

.footer .logo-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.footer-tagline {
  color: rgba(250, 251, 255, 0.7);
  font-size: var(--fs-sm);
  margin-top: 0.35rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.footer-links a,
.footer-link {
  color: rgba(250, 251, 255, 0.75);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-links a:hover,
a.footer-link:hover,
button.footer-link:hover {
  color: var(--color-on-dark);
}

.footer-social {
  margin-top: -0.5rem;
}

.footer-link.is-placeholder {
  color: rgba(250, 251, 255, 0.35);
  cursor: default;
  font-style: italic;
}

.footer-copy {
  color: rgba(250, 251, 255, 0.55);
  font-size: var(--fs-xs);
  margin-top: var(--space-sm);
}

@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
  }

  .footer-copy {
    margin-top: 0;
    width: 100%;
    text-align: center;
    order: 3;
  }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL — fallback sem GSAP (IntersectionObserver)
   Só anima opacidade (não transform) para não conflitar com elementos que
   já controlam o próprio transform (ex.: .product-card no hover).
   -------------------------------------------------------------------------- */
.reveal-pending {
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
}

.reveal-pending.is-visible {
  opacity: 1;
}

/* ==========================================================================
   MOBILE — CATÁLOGO COMPACTO (referência: Mercado Livre)
   Tudo aqui é exclusivo de telas até 767px — o desktop (já redesenhado)
   não é tocado por nenhuma regra deste bloco. Objetivo: grid de 2 colunas
   nas listagens de produto, card compacto (imagem quadrada + nome curto +
   preço em destaque, sem descrição/botões), e seções institucionais mais
   enxutas — o cartão inteiro já é clicável (role="button" + delegação de
   clique existente) e abre o modal de detalhe, que continua com tudo.
   ========================================================================== */
@media (max-width: 767px) {
  /* --- Institucional: menos altura de tela por seção --- */
  .section {
    padding-block: 3.25rem;
  }

  .section-heading {
    margin-bottom: var(--space-lg);
  }

  .section-title {
    font-size: var(--fs-2xl);
  }

  .section-subtitle {
    font-size: var(--fs-base);
    margin-top: var(--space-xs);
  }

  /* --- Hero: sair da primeira dobra rápido --- */
  .hero {
    min-height: 0;
    padding-top: calc(var(--announcement-height) + var(--header-height) + var(--space-md));
    padding-bottom: var(--space-lg);
  }

  .hero-tagline {
    font-size: var(--fs-sm);
  }

  .hero-title {
    font-size: 2.5rem;
    margin-top: var(--space-xs);
  }

  .hero-subtitle {
    font-size: var(--fs-base);
    margin-top: var(--space-sm);
  }

  .hero-actions {
    margin-top: var(--space-md);
    gap: var(--space-xs);
  }

  .hero-actions .btn {
    width: 100%;
    padding: 0.75rem 1.4rem;
    font-size: var(--fs-sm);
  }

  .hero-visual {
    height: 190px;
    margin-top: var(--space-sm);
  }

  .hero-stack {
    width: 180px;
    height: 180px;
  }

  .hero-photo-back {
    width: 125px;
  }

  .hero-photo-front {
    width: 158px;
  }

  /* --- Filtros de categoria: scroll horizontal, nunca quebra linha --- */
  .category-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
    padding-bottom: 2px;
  }

  .category-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex-shrink: 0;
  }

  /* --- Kits Sensoriais: carrossel horizontal, um botão só ---
     No toque, quem rola é o navegador (overflow-x + scroll-snap nativo).
     O arrasto via JS (initKitsCarouselDrag, em script.js) atende só mouse
     — quando os dois atuavam no mesmo gesto de toque, brigavam e o
     carrossel ia e voltava.
     justify-content precisa ser flex-start: o "center" herdado do desktop
     jogava metade do excesso pra esquerda, fora do alcance do scroll, e o
     primeiro kit ficava ~80% escondido. Sem touch-action:pan-x — ele
     chegou a travar o scroll vertical da página quando o gesto começava
     em cima do carrossel. */
  #kits-grid.kits-grid {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-padding);
    gap: var(--space-sm);
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
    padding-bottom: var(--space-xs);
  }

  /* Durante o arrasto com mouse o snap fica desligado — senão cada
     scrollLeft definido pelo JS seria puxado de volta pro card. */
  #kits-grid.kits-grid.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  #kits-grid.kits-grid.is-dragging .product-card {
    pointer-events: none;
  }

  #kits-grid.kits-grid .product-card {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  /* No toque o :hover "gruda" — o card subia/crescia ao encostar o dedo e
     descia ao começar o arrasto, tremendo durante o gesto. */
  #kits-grid.kits-grid .product-card:hover,
  #kits-grid.kits-grid .product-card:focus-visible,
  #kits-grid.kits-grid .product-card:hover .product-card-media img,
  #kits-grid.kits-grid .product-card:focus-visible .product-card-media img {
    transform: none;
  }

  #kits-grid .product-card-media {
    aspect-ratio: 16 / 10;
  }

  #kits-grid .product-pieces {
    display: none;
  }

  #kits-grid .product-pieces-summary {
    display: block;
    color: var(--color-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  #kits-grid .buy-btn {
    display: none;
  }

  /* --- Catálogo e Mais Vendidos: grid de 2 colunas, card compacto --- */
  .products-grid:not(.kits-grid) {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .products-grid:not(.kits-grid) .product-card-media {
    aspect-ratio: 1 / 1;
  }

  .products-grid:not(.kits-grid) .product-card:hover,
  .products-grid:not(.kits-grid) .product-card:focus-visible {
    transform: none;
  }

  .products-grid:not(.kits-grid) .product-card-body {
    padding: 0.6rem 0.65rem 0.75rem;
    gap: 0.25rem;
  }

  .products-grid:not(.kits-grid) .product-category {
    font-size: 0.62rem;
  }

  .products-grid:not(.kits-grid) .product-name {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  /* Sem descrição, sem lista de peças e sem faixa etária na listagem —
     isso continua fora do card compacto. O botão "+ Carrinho" já volta
     mais abaixo (ajuste pontual: só ele, não o "Finalizar Compra"). */
  .products-grid:not(.kits-grid) .product-description,
  .products-grid:not(.kits-grid) .product-pieces,
  .products-grid:not(.kits-grid) .product-pieces-summary,
  .products-grid:not(.kits-grid) .product-age-range {
    display: none;
  }

  /* Preço é o 2º elemento mais importante do card — maior e mais forte
     que o nome do produto. */
  .products-grid:not(.kits-grid) .product-footer {
    margin-top: var(--space-xs);
    padding-top: 0;
    gap: 0.4rem;
  }

  /* Preço do card compacto. O --from ("a partir de R$ X") entra junto:
     a listagem não comporta a lista de variações, então mostra só o valor
     inicial e a escolha da variação acontece no modal. */
  .products-grid:not(.kits-grid) .product-price,
  .products-grid:not(.kits-grid) .product-price--from {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-purple-hover);
  }

  .products-grid:not(.kits-grid) .price-variants {
    display: none;
  }

  /* Botão "+ Carrinho" de volta no rodapé do card — só ele (nunca o
     "Finalizar Compra"), com altura proporcional ao card compacto em vez
     de uma cópia espremida do botão grande do desktop. Continua com a
     mesma função (addToCart) já usada em todo o site — o clique nele não
     propaga pro card (delegação de evento já trata isso antes de abrir o
     modal), então "+ Carrinho" adiciona direto e o resto do card continua
     abrindo o detalhe do produto. */
  .products-grid:not(.kits-grid) .product-actions {
    display: block;
  }

  .products-grid:not(.kits-grid) .buy-btn {
    display: none;
  }

  .products-grid:not(.kits-grid) .add-to-cart-btn {
    width: 100%;
    padding: 0.5rem 0.4rem;
    font-size: 0.72rem;
    border-radius: var(--radius-full);
  }
}