/* ================================================================
   CHAMPION — Saúde Animal | Design System
   ================================================================ */

:root {
  /* Brand */
  --orange: #EC4815;
  --orange-soft: #FF6A33;
  --orange-deep: #C13808;
  --black: #0A0A0A;
  --ink: #15191F;
  --graphite: #2B2F36;
  --steel: #5A6270;
  --mist: #E9ECF1;
  --bone: #F6F5F1;
  --paper: #FFFFFF;
  --gold: #E0A92F;

  /* Functional */
  --bg: #FAFAF7;
  --text: #15191F;
  --muted: #6E7480;
  --line: rgba(10,10,10,0.08);
  --line-strong: rgba(10,10,10,0.14);

  /* Effects */
  --shadow-sm: 0 2px 6px rgba(15,15,15,0.06);
  --shadow-md: 0 10px 30px rgba(15,15,15,0.08);
  --shadow-lg: 0 24px 60px rgba(15,15,15,0.12);
  --shadow-xl: 0 40px 80px rgba(15,15,15,0.18);

  /* Type */
  --f-display: 'Sora', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;

  /* Layout */
  --container: 1280px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Easings */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background:
    linear-gradient(180deg, #fff 0, var(--bg) 460px, #f5f4ef 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.site-intro-active {
  overflow: hidden;
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
/* Acessível a leitores de tela e ao Google, invisível na tela.
   Usado p/ dar um H1 com palavras-chave à home, cujo hero é só imagem. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--f-display); margin: 0; line-height: 1.15; letter-spacing: 0; font-weight: 700; }
p { margin: 0; }
.brand, .header-actions, .section-head > *, .shop-grid > *, .toolbar-right { min-width: 0; }

/* Intro */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 100000; /* acima dos FABs (whatsapp-float usa z-index:10000) */
  background: var(--black);
  overflow: hidden;
  transition: opacity 0.95s ease, visibility 0.95s ease;
}
.site-intro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Os FABs (WhatsApp, carrinho, menu, scroll-top) ficam cobertos pela
   intro graças ao z-index alto dela — não precisam ser escondidos via
   display:none, o que arriscava deixá-los ocultos caso a intro não
   removesse a classe site-intro-active no mobile. */
.site-intro.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

::selection {
  background: rgba(236,72,21,0.18);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid rgba(236,72,21,0.32);
  outline-offset: 3px;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  background: var(--black);
  color: #cfd1d6;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.topbar-info { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 8px; }
.topbar-info svg { width: 14px; height: 14px; opacity: 0.8; }
.topbar-social { display: flex; gap: 14px; align-items: center; }
.topbar-social a { opacity: 0.7; transition: opacity 0.2s; }
.topbar-social a:hover { opacity: 1; color: var(--orange); }
.topbar-social svg { width: 15px; height: 15px; }
.topbar .pill {
  background: var(--orange);
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ================================================================
   HEADER
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.98);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand img { height: 44px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 12px 12px;
  border-radius: 8px;
  color: var(--ink);
  transition: color 0.2s;
}
.nav a:hover { color: var(--orange); }
.nav a.active { color: var(--orange); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch {
  position: relative;
  width: 76px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.lang-switch svg {
  position: absolute;
  left: 11px;
  width: 17px;
  height: 17px;
  pointer-events: none;
  color: currentColor;
}
.lang-switch select {
  width: 100%;
  height: 100%;
  padding: 0 25px 0 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 13px center / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) right 8px center / 5px 5px no-repeat,
    white;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.lang-switch:hover,
.lang-switch:focus-within {
  color: var(--orange);
}
.lang-switch select:focus {
  border-color: var(--orange);
}
.icon-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--ink);
  position: relative;
  transition: background 0.2s, color 0.2s;
}
.icon-btn:hover { background: var(--mist); color: var(--orange); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .badge {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--orange);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(236,72,21,0.45);
}

.menu-toggle { display: none; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, box-shadow 0.25s;
  min-height: 48px;
  text-align: center;
  white-space: nowrap;
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.btn-primary {
  background: linear-gradient(135deg, var(--orange-soft) 0%, var(--orange) 55%, var(--orange-deep) 100%);
  background-size: 200% auto;
  background-position: 0% 50%;
  color: white;
  box-shadow: 0 8px 22px rgba(236,72,21,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background-position 0.45s var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 16px 34px rgba(236,72,21,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.7);
}
.btn-ghost:hover { background: white; color: var(--ink); }
.btn-dark {
  background: var(--black);
  color: white;
}
.btn-dark:hover { background: var(--graphite); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
}
.btn-outline:hover { border-color: var(--orange); color: var(--orange); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 18px 30px; font-size: 16px; border-radius: 14px; }

/* ================================================================
   HERO CAROUSEL
   ================================================================ */
.hero {
  position: relative;
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}
.hero-track {
  display: flex;
  width: 100%;
  transition: transform 0.9s var(--ease);
}
.hero-slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.hero-slide a {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 320px;
  max-height: 620px;
  background: var(--black);
  overflow: hidden;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.0);
  transform-origin: center;
  transition: transform 8s linear;
}
.hero-slide.is-active img { transform: scale(1.025); }
@media (max-width: 720px) {
  /* Hero ocupa a tela inteira no mobile (sem header acima) */
  .hero {
    height: 100vh;       /* fallback p/ navegadores sem suporte a dvh */
    height: 100dvh;
    min-height: 560px;
    max-height: 100vh;   /* fallback p/ navegadores sem suporte a dvh */
    max-height: 100dvh;
    background: #0A0A0A;
  }
  .hero-track { height: 100%; }
  .hero-slide {
    height: 100%;
    background: #0A0A0A;
  }
  .hero-slide a,
  .hero-slide .hero-slide-static {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    position: relative;
  }
  .hero-slide picture {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: none;
    transition: opacity 0.6s var(--ease);
  }
  .hero-slide.is-active img { transform: none; }
  /* Vinheta para legibilidade do conteúdo sobreposto */
  .hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(10,10,10,0.32) 0%,
      rgba(10,10,10,0) 28%,
      rgba(10,10,10,0) 55%,
      rgba(10,10,10,0.55) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .hero-slide > a,
  .hero-slide > div { position: relative; }
  .hero-caption { z-index: 2; padding: 0 0 96px; }
  .hero-dots { z-index: 3; bottom: 90px; }
}
.hero-caption {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 0 0 56px;
}
.hero-caption-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  color: white;
  max-width: 620px;
  margin-left: max(24px, calc((100vw - var(--container))/2 + 24px));
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(236,72,21,0.18);
  border: 1px solid rgba(236,72,21,0.4);
  color: #ffd5c5;
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.hero-title {
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 18px 0 14px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--orange-soft), #ffd28a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-bottom: 28px;
  line-height: 1.55;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero controls */
.hero-controls {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 18px;
}
.hero-controls .hero-btn { pointer-events: auto; }
.hero-btn {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(10,10,10,0.4);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  transition: background 0.2s, transform 0.2s;
}
.hero-btn:hover { background: var(--orange); border-color: var(--orange); transform: scale(1.06); }
.hero-btn svg { width: 18px; height: 18px; }

.hero-dots {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  bottom: 18px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.hero-dot {
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
  border: 0;
  padding: 0;
}
.hero-dot.is-active {
  width: 56px;
  background: var(--orange);
}

/* ================================================================
   HERO SCROLL INDICATOR (mobile only)
   ================================================================ */
.hero-scroll-indicator {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  color: white;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: scroll-indicator-appear 1.2s 0.6s var(--ease) both;
  padding: 6px 4px 4px;
  border-radius: 16px;
  transition: opacity 0.4s var(--ease);
}
.hero-scroll-indicator:hover .hero-scroll-indicator-mouse,
.hero-scroll-indicator:active .hero-scroll-indicator-mouse {
  border-color: white;
  background: rgba(236,72,21,0.55);
}
.hero-scroll-indicator-mouse {
  width: 28px;
  height: 46px;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 16px;
  position: relative;
  background: rgba(10,10,10,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero-scroll-indicator-mouse::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: white;
  transform: translateX(-50%);
  animation: scroll-wheel 1.8s var(--ease) infinite;
}
.hero-scroll-indicator-label {
  font-family: var(--f-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  margin-top: 2px;
}
.hero-scroll-indicator-arrow {
  display: inline-flex;
  animation: scroll-arrow 1.8s var(--ease) infinite;
  margin-top: -2px;
}
.hero-scroll-indicator-arrow svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
@keyframes scroll-indicator-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes scroll-wheel {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0); }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
@keyframes scroll-arrow {
  0%   { opacity: 0.5; transform: translateY(-4px); }
  50%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 0.5; transform: translateY(-4px); }
}
/* Esconde quando o usuário rolou */
.hero.is-scrolled .hero-scroll-indicator {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}
/* Desktop: nunca mostrar */
.hero-scroll-indicator { display: none; }
@media (max-width: 720px) {
  .hero-scroll-indicator { display: inline-flex; }
  /* Garante que dots não sobreponham (ficam acima) */
  .hero-dots { bottom: 110px !important; }
}
@media (max-width: 480px) {
  .hero-scroll-indicator { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .hero-dots { bottom: 100px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-indicator { animation: none; }
  .hero-scroll-indicator-mouse::before,
  .hero-scroll-indicator-arrow { animation: none; }
}

/* ================================================================
   STAT STRIP
   ================================================================ */
.stat-strip {
  background: var(--black);
  color: white;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(236,72,21,0.2), rgba(236,72,21,0.05));
  border: 1px solid rgba(236,72,21,0.3);
  color: var(--orange-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-item h4 { font-size: 22px; font-weight: 800; color: white; letter-spacing: 0; }
.stat-item p { font-size: 13px; color: rgba(255,255,255,0.65); }

/* ================================================================
   SECTIONS
   ================================================================ */
.section { padding: 96px 0; position: relative; }
.section-tight { padding: 72px 0; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.section-eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--orange);
  display: inline-block;
}
.section-title {
  font-size: 42px;
  letter-spacing: 0;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ink);
  overflow-wrap: break-word;
}
.section-title em { font-style: normal; color: var(--orange); }
.section-sub {
  color: var(--muted);
  font-size: 16px;
  max-width: 580px;
  margin-top: 14px;
  line-height: 1.6;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.section-head .right { display: flex; gap: 8px; }

/* ================================================================
   CATEGORY RAIL
   ================================================================ */
.category-showcase {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease);
}
/* Crossfade stack — two stacked layers swap on hover */
.cat-bg-stack {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.cat-bg-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.cat-bg-layer.is-active {
  opacity: 1;
  transform: scale(1);
}
/* Dark overlay — only fades in once any background is shown */
.category-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.76), rgba(10,10,10,0.42) 54%, rgba(10,10,10,0.72)),
    linear-gradient(180deg, rgba(10,10,10,0.12), rgba(10,10,10,0.76));
  transition: opacity 0.6s var(--ease);
}
.category-showcase.is-bg-visible::after { opacity: 1; }
.category-showcase .container {
  position: relative;
  z-index: 1;
}
.category-showcase.is-bg-visible .section-eyebrow,
.category-showcase.is-bg-visible .section-sub,
.category-showcase.is-bg-visible .section-title {
  color: white;
}
.category-showcase.is-bg-visible .section-title em {
  color: var(--orange-soft);
}
.cat-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.cat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 18px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s;
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: auto -40% -60% -40%;
  height: 120%;
  background: radial-gradient(circle, rgba(236,72,21,0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.cat-card:hover,
.cat-card.is-active {
  transform: translateY(-6px);
  border-color: rgba(236,72,21,0.4);
  box-shadow: var(--shadow-md);
}
.cat-card:hover::before,
.cat-card.is-active::before { opacity: 1; }
.category-showcase.is-bg-visible .cat-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 14px 40px rgba(0,0,0,0.16);
  backdrop-filter: blur(10px);
}
.category-showcase.is-bg-visible .cat-card:not(.is-active):not(:hover) {
  opacity: 0.9;
}
.cat-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--mist);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(13, 16, 22, 0.06);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.cat-card:hover .cat-icon,
.cat-card.is-active .cat-icon {
  background: var(--orange);
  color: white;
  box-shadow: inset 0 0 0 2px rgba(236,72,21,0.28);
}
.cat-icon svg { width: 32px; height: 32px; }
.cat-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}
.cat-card:hover .cat-icon img,
.cat-card.is-active .cat-icon img { transform: scale(1.08); }
.cat-card h4 { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.cat-card p { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ================================================================
   PRODUCTS
   ================================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.product-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(10,10,10,0.04);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(236,72,21,0.3);
}
.product-card:hover::after { transform: scaleX(1); }
.product-placeholder { cursor: default; }
.product-placeholder:hover {
  transform: translateY(-4px);
  border-color: rgba(236,72,21,0.3);
  box-shadow: var(--shadow-md);
}
.product-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, #f8f6f0, #ecebe5);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  filter: none;
  transform: scale(1);
  transition: transform 0.45s var(--ease);
}
.product-card:hover .product-photo { transform: scale(1.04); }
.product-thumb.has-photo { background: #f6f5f1; }
.detail-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  filter: none;
}
.product-thumb-empty {
  background:
    repeating-linear-gradient(45deg, rgba(10,10,10,0.025) 0 12px, transparent 12px 24px),
    linear-gradient(140deg, #f6f5f1, #ecebe5);
  border-bottom: 2px dashed rgba(10,10,10,0.1);
}
.product-thumb-art {
  width: 70%;
  height: 70%;
  display: flex; align-items: center; justify-content: center;
}
.product-thumb-art svg { max-width: 100%; max-height: 100%; }
.placeholder-ico {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(236,72,21,0.1);
  border: 1px dashed rgba(236,72,21,0.4);
  color: var(--orange);
  display: inline-flex;
  align-items: center; justify-content: center;
}
.placeholder-ico svg { width: 28px; height: 28px; }
.product-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--orange);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
}
.product-fav {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.product-fav:hover { background: var(--orange); color: white; transform: scale(1.08); }
.product-fav svg { width: 18px; height: 18px; }

.product-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.product-placeholder .product-cat { color: var(--muted); }
.product-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--ink);
}
.product-placeholder .product-name { color: var(--muted); }
.product-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}
.product-placeholder .product-desc { color: var(--muted); opacity: 0.8; }
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.product-price-block { display: flex; flex-direction: column; gap: 2px; }
.product-price-label { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.product-price-label:empty { display: none; }
.product-price {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0;
}
.product-price-empty { color: var(--muted); }
.product-price-consult {
  font-size: 18px;
  color: var(--ink);
}
.product-price small { font-size: 13px; color: var(--muted); font-weight: 500; }
.product-add {
  width: 46px; height: 46px;
  background: var(--ink);
  color: white;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s, transform 0.25s;
}
.product-add:hover { background: var(--orange); transform: translateY(-2px); }
.product-add svg { width: 18px; height: 18px; }
.product-add-disabled {
  background: var(--mist);
  color: var(--muted);
  pointer-events: none;
}
.product-add-disabled:hover { background: var(--mist); transform: none; }

/* Specific product art backgrounds */
.bg-difly  { background: linear-gradient(140deg, #fff7d6, #f3da66); }
.bg-difly-s3 { background: linear-gradient(140deg, #18233a, #34466c); }
.bg-vermisal { background: linear-gradient(140deg, #1a1a1a, #2c2c2c); }
.bg-nucleo { background: linear-gradient(140deg, #d8e8f5, #a8c5e0); }
.bg-vermifugo { background: linear-gradient(140deg, #f5e8d8, #d8b690); }
.bg-cipermetrina { background: linear-gradient(140deg, #e8d8f5, #b690d8); }
.bg-vitaminico { background: linear-gradient(140deg, #efe7ff, #c7a4f4); }
.bg-diazinon { background: linear-gradient(140deg, #1c1c1c, #6b6258); }
.bg-supera { background: linear-gradient(140deg, #dff4e5, #78b987); }
.bg-force { background: linear-gradient(140deg, #e8f3ff, #7fb7e7); }
.bg-boost { background: linear-gradient(140deg, #ffe4e4, #dc6b6b); }
.bg-andro { background: linear-gradient(140deg, #dcecff, #4f8fcf); }
.bg-propoxur { background: linear-gradient(140deg, #ead8c5, #9b6d45); }
.bg-domifly { background: linear-gradient(140deg, #dff7ff, #37abc8); }
.bg-equinos { background: linear-gradient(140deg, #eee1d4, #b88f65); }
.bg-aves { background: linear-gradient(140deg, #fff1d4, #f1b84c); }
.bg-suinos { background: linear-gradient(140deg, #ffe1e7, #d97889); }
.bg-calcio { background: linear-gradient(140deg, #eee9de, #cbbf9c); }
.bg-difly .product-name-overlay,
.bg-difly-s3 .product-name-overlay,
.bg-vermisal .product-name-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* Pack illustration */
.pack {
  position: relative;
  width: 70%;
  height: 78%;
  border-radius: 14px 14px 8px 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 16% 14% 14%;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25), inset 0 -20px 40px rgba(0,0,0,0.18), inset 0 4px 0 rgba(255,255,255,0.25);
  transform: rotate(-3deg) translateY(2%);
  transition: transform 0.5s var(--ease);
}
.product-card:hover .pack { transform: rotate(-1deg) translateY(-1%) scale(1.03); }
.pack::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 14%;
  background: rgba(0,0,0,0.18);
  border-radius: 14px 14px 0 0;
}
.pack-difly { background: linear-gradient(180deg, #ffd83b, #f0b400); color: var(--ink); }
.pack-difly-s3 { background: linear-gradient(180deg, #1f3258, #14213d); color: white; }
.pack-vermisal { background: linear-gradient(180deg, #1a1a1a, #0a0a0a); color: #ffd640; }
.pack-nucleo { background: linear-gradient(180deg, #f0f5fa, #d2e2f0); color: #1f3258; }
.pack-vermifugo { background: linear-gradient(180deg, #c46b2e, #9c4d1a); color: white; }
.pack-cipermetrina { background: linear-gradient(180deg, #5a3380, #3d1f5e); color: white; }
.pack-vitaminico { background: linear-gradient(180deg, #7b46bc, #4f247f); color: white; }
.pack-diazinon { background: linear-gradient(180deg, #2d2d2d, #0d0d0d); color: #f1d38a; }
.pack-supera { background: linear-gradient(180deg, #1f8a49, #0f5630); color: white; }
.pack-force { background: linear-gradient(180deg, #f7fbff, #bcd9f2); color: #174d82; }
.pack-boost { background: linear-gradient(180deg, #c62828, #7f1515); color: white; }
.pack-andro { background: linear-gradient(180deg, #1f6eb3, #0d3e73); color: white; }
.pack-propoxur { background: linear-gradient(180deg, #b97a40, #704321); color: white; }
.pack-domifly { background: linear-gradient(180deg, #0e9fc2, #06667d); color: white; }
.pack-equinos { background: linear-gradient(180deg, #7a4c28, #3c2514); color: #ffe4bc; }
.pack-aves { background: linear-gradient(180deg, #f5c54f, #d38a16); color: #30200a; }
.pack-suinos { background: linear-gradient(180deg, #d85d76, #933148); color: white; }
.pack-calcio { background: linear-gradient(180deg, #f8f5ec, #d6caaa); color: #56442d; }
.pack-brand {
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: 0;
  font-size: 34px;
  line-height: 1;
  text-align: center;
}
.pack-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.8;
}
.pack-stripe {
  margin-top: 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ================================================================
   ABOUT BAND
   ================================================================ */
.about-band {
  background: var(--bone);
  position: relative;
  overflow: hidden;
}
.about-band::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(236,72,21,0.08), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.about-image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1f29, #0a0d12);
  box-shadow:
    0 30px 60px -20px rgba(15,15,15,0.28),
    0 12px 28px -10px rgba(15,15,15,0.2);
}
.about-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1s var(--ease);
}
.about-image:hover img { transform: scale(1.05); }

/* Top-left floating dark card */
.about-overlay-top {
  position: absolute;
  top: 28px; left: 28px;
  width: 196px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 14%, rgba(236,72,21,0.18), transparent 55%),
    linear-gradient(165deg, rgba(17,22,30,0.96) 0%, rgba(10,13,18,0.96) 100%);
  color: white;
  display: grid;
  gap: 8px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
  isolation: isolate;
  z-index: 2;
}
.about-overlay-dash {
  display: block;
  width: 28px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
  margin-bottom: 4px;
}
.about-overlay-title {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: white;
  display: block;
  margin: 0;
}
.about-overlay-title strong, .about-overlay-title em { color: var(--orange-soft); font-style: normal; font-weight: 800; }
.about-overlay-rule {
  display: block;
  width: 36px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
  margin: 6px 0;
}
.about-overlay-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.about-overlay-ico {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--orange-soft);
}
.about-overlay-ico svg { width: 100%; height: 100%; }
.about-overlay-row-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

/* Bottom dark strip with 4 mini cards */
.about-overlay-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 24px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(10,13,18,0.45) 25%, rgba(10,13,18,0.95) 100%);
  z-index: 2;
}
.about-pill {
  display: grid;
  gap: 4px;
  text-align: left;
  color: white;
  padding: 4px;
}
.about-pill-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--orange-soft);
  margin-bottom: 6px;
}
.about-pill-ico svg { width: 22px; height: 22px; }
.about-pill strong {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: white;
  line-height: 1.25;
}
.about-pill span {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  line-height: 1.35;
}

/* Right column */
.about-text { max-width: 560px; }
.about-text .section-eyebrow { margin-bottom: 16px; }
.about-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 22px;
}
.about-title em {
  font-style: normal;
  color: var(--orange);
}
.about-lead {
  margin: 12px 0 0;
  color: var(--steel);
  font-size: 16px;
  line-height: 1.65;
}
.about-lead strong { color: var(--ink); font-weight: 700; }

/* Highlighted callout */
.about-callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  margin: 20px 0 0;
  border-radius: 14px;
  background: rgba(236,72,21,0.05);
  border-left: 3px solid var(--orange);
}
.about-callout-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(236,72,21,0.18), rgba(236,72,21,0.05));
  border: 1px solid rgba(236,72,21,0.28);
  color: var(--orange);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.about-callout-ico svg { width: 22px; height: 22px; }
.about-callout p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}
.about-callout strong { font-weight: 700; color: var(--ink); }

/* Awards card */
.about-awards {
  margin-top: 22px;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: var(--bone);
  border: 1px solid var(--line);
}
.about-awards h6 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  text-align: center;
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.award {
  display: grid;
  gap: 6px;
  text-align: left;
}
.award-ico {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--orange);
  margin-bottom: 4px;
}
.award-ico svg { width: 100%; height: 100%; }
.award strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.award span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* Mini checklist */
.about-checklist-title {
  margin: 22px 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.about-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-checklist-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 22px;
}
.about-checklist-mini li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  padding: 0;
  border-bottom: 0;
}
.about-checklist-mini .check {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.about-checklist-mini .check svg { width: 12px; height: 12px; }

/* CTA row */
.about-cta-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  margin-top: 26px;
}
.about-cta-btn {
  width: 100%;
  justify-content: center;
  padding: 18px 22px;
  font-size: 15px;
  letter-spacing: 0.005em;
}
.about-cta-btn svg { width: 18px; height: 18px; }
.about-cta-row .btn-outline {
  width: 100%;
  justify-content: center;
  padding: 18px 22px;
  font-size: 15px;
  border-color: var(--ink);
  color: var(--ink);
}
.about-cta-row .btn-outline:hover {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.about-cta-row .btn-outline svg { width: 14px; height: 14px; }

.about-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--steel);
  font-size: 14px;
  font-weight: 500;
  margin: 16px 0 0;
}
.about-trust svg { width: 18px; height: 18px; color: var(--steel); flex-shrink: 0; opacity: 0.8; }

@media (max-width: 1024px) {
  .about-grid { gap: 48px; grid-template-columns: 1fr; }
  .about-image { max-width: 540px; aspect-ratio: 4/5; margin: 0 auto; }
  .about-text { max-width: 100%; }
  .about-title { font-size: 40px; }
}
@media (max-width: 720px) {
  .about-image { aspect-ratio: 4/5; border-radius: 20px; }
  .about-overlay-top { width: 156px; padding: 14px 14px 16px; top: 16px; left: 16px; gap: 6px; }
  .about-overlay-title { font-size: 19px; }
  .about-overlay-row-text { font-size: 11px; }
  .about-overlay-bottom { padding: 16px 14px 16px; gap: 8px; grid-template-columns: repeat(2, 1fr); }
  .about-pill strong { font-size: 10px; }
  .about-pill span { font-size: 10px; }
  .about-pill-ico { width: 24px; height: 24px; margin-bottom: 4px; }
  .about-pill-ico svg { width: 18px; height: 18px; }
  .about-cta-row { grid-template-columns: 1fr; }
  .about-cta-btn { padding: 15px 18px; font-size: 14.5px; }
  .about-callout { padding: 14px 16px; gap: 12px; }
  .about-callout-ico { width: 36px; height: 36px; }
  .about-callout p { font-size: 14px; }
  .awards-grid { grid-template-columns: 1fr; gap: 14px; }
  .about-checklist-mini { grid-template-columns: 1fr; gap: 8px; }
}

/* ================================================================
   STORY (video band)
   ================================================================ */
.story {
  position: relative;
  background: var(--black);
  color: white;
  padding: 0;
  overflow: hidden;
}
.story-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.story-video iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  pointer-events: none;
}
/* Video placeholder section */
.video-section {
  padding: clamp(60px, 9vw, 110px) 0;
  background: var(--bone);
  position: relative;
}
.video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 580px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  cursor: pointer;
  background: #15191F;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  text-decoration: none;
  isolation: isolate;
}
.video-placeholder::before {
  /* Thumbnail do YouTube (definida via --video-thumb no inline style) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--video-thumb, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.02);
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.video-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.25) 0%,
    rgba(10,10,10,0.45) 60%,
    rgba(10,10,10,0.78) 100%);
  z-index: 1;
  transition: background 0.4s var(--ease);
}
.video-placeholder:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -20px rgba(0,0,0,0.5);
}
.video-placeholder:hover::before {
  transform: scale(1.08);
  filter: brightness(1.08);
}
.video-placeholder:hover::after {
  background: linear-gradient(180deg,
    rgba(10,10,10,0.15) 0%,
    rgba(10,10,10,0.35) 60%,
    rgba(10,10,10,0.65) 100%);
}
.video-placeholder > * { position: relative; z-index: 2; }

.video-placeholder-ico {
  width: 88px; height: 88px;
  border-radius: 999px;
  background: rgba(236,72,21,0.95);
  color: white;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 22px;
  box-shadow:
    0 12px 32px rgba(236,72,21,0.55),
    0 0 0 0 rgba(236,72,21,0.6);
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s var(--ease);
  animation: video-pulse 2.4s ease-out infinite;
}
@keyframes video-pulse {
  0%   { box-shadow: 0 12px 32px rgba(236,72,21,0.55), 0 0 0 0 rgba(236,72,21,0.6); }
  70%  { box-shadow: 0 12px 32px rgba(236,72,21,0.55), 0 0 0 22px rgba(236,72,21,0); }
  100% { box-shadow: 0 12px 32px rgba(236,72,21,0.55), 0 0 0 0 rgba(236,72,21,0); }
}
.video-placeholder:hover .video-placeholder-ico {
  transform: scale(1.1);
  background: var(--orange-deep);
}
.video-placeholder-ico svg { width: 32px; height: 32px; margin-left: 4px; }
.video-placeholder h4 {
  color: white;
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  max-width: 720px;
}
.video-placeholder p {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  letter-spacing: 0.02em;
  max-width: 560px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  line-height: 1.55;
}
.video-placeholder-duration {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 3;
  padding: 5px 10px;
  background: rgba(10,10,10,0.78);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.video-placeholder-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,0,0,0.92);
  color: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.video-placeholder-badge svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
  .video-placeholder { padding: 24px 18px; aspect-ratio: 4/3; }
  .video-placeholder-ico { width: 70px; height: 70px; margin-bottom: 16px; }
  .video-placeholder-ico svg { width: 26px; height: 26px; }
  .video-placeholder h4 { font-size: 20px; }
  .video-placeholder p { font-size: 13.5px; }
  .video-placeholder-duration { bottom: 12px; right: 12px; font-size: 11px; padding: 4px 8px; }
  .video-placeholder-badge { top: 12px; left: 12px; font-size: 10px; padding: 5px 10px; }
}

/* ================================================================
   VIDEO LIGHTBOX (toca o vídeo dentro do site)
   ================================================================ */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(5,7,12,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.video-lightbox.is-open {
  display: flex;
  opacity: 1;
}
.video-lightbox-panel {
  position: relative;
  width: min(1180px, 100%);
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 80px);
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.42s var(--ease-bounce), opacity 0.32s var(--ease);
}
.video-lightbox.is-open .video-lightbox-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.video-lightbox-panel iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-lightbox-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: white;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.video-lightbox-close:hover {
  background: rgba(236,72,21,0.92);
  transform: rotate(90deg) scale(1.05);
}
.video-lightbox-close svg { width: 20px; height: 20px; }

@media (max-width: 720px) {
  .video-lightbox { padding: 0; align-items: stretch; }
  .video-lightbox-panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
    display: flex;
    align-items: center;
    background: #000;
  }
  .video-lightbox-panel iframe {
    position: relative;
    inset: auto;
    width: 100%;
    height: 56.25vw;
    max-height: 100dvh;
  }
  .video-lightbox-close {
    top: 16px;
    right: 16px;
    background: rgba(0,0,0,0.6);
    width: 42px; height: 42px;
  }
}

/* Botões inline (.btn) que abrem vídeo: ícone play vermelho */
.btn[data-video] svg { color: inherit; }
.story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.65) 50%, rgba(10,10,10,0.9) 100%);
  z-index: 1;
}
.story-inner {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 14vw, 180px) 24px;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.story-inner .section-eyebrow { color: var(--orange-soft); }
.story-inner .section-eyebrow::before { background: var(--orange-soft); }
.story-title {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 16px 0 22px;
  color: white;
}
.story-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--orange-soft), #ffe9b0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.story-text {
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto 36px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}
.story-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.play-button {
  width: 78px; height: 78px;
  border-radius: 999px;
  background: var(--orange);
  color: white;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin: 0 auto 28px;
  box-shadow: 0 12px 32px rgba(236,72,21,0.5);
  transition: transform 0.3s var(--ease-bounce);
  position: relative;
}
.play-button::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid var(--orange);
  opacity: 0.5;
  animation: pulse 2.5s ease-out infinite;
}
.play-button svg { width: 30px; height: 30px; margin-left: 4px; }
.play-button:hover { transform: scale(1.08); }
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}

.story-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.story-stat h3 {
  font-size: 40px;
  color: white;
  font-weight: 800;
  letter-spacing: 0;
}
.story-stat h3 span { color: var(--orange-soft); }
.story-stat p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ================================================================
   CTA / REPRESENTANTES
   ================================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px circle at 80% 30%, rgba(236,72,21,0.18), transparent 60%),
    linear-gradient(135deg, #181b22, #0a0a0a);
  color: white;
  padding: clamp(64px, 9vw, 110px) 0;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cta-logo {
  display: block;
  height: 44px;
  width: auto;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.cta-band h2 { font-size: 44px; color: white; line-height: 1.1; letter-spacing: 0; }
.cta-band p { color: rgba(255,255,255,0.72); margin-top: 16px; font-size: 16px; line-height: 1.6; max-width: 540px; }
.cta-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.cta-side {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(10px);
}
.cta-side h4 {
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.cta-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.cta-input::placeholder { color: rgba(255,255,255,0.5); }
.cta-input:focus { border-color: var(--orange); background: rgba(255,255,255,0.12); }
.cta-side .btn { width: 100%; margin-top: 8px; }
.cta-side form { display: flex; flex-direction: column; gap: 10px; }
.cta-side form .cta-input { margin: 0; }
#contactFeedback[data-type="error"]   { color: #FFB3A0; }
#contactFeedback[data-type="success"] { color: #A0F0C0; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,0.65);
  padding: 64px 0 32px;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand img { height: 44px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer-brand p { font-size: 14px; line-height: 1.7; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: white;
  transition: background 0.2s, transform 0.2s;
}
.footer-social a:hover { background: var(--orange); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h5 {
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col ul a { font-size: 14px; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--orange); }
.footer-contact { display: grid; gap: 12px; }
.footer-contact div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.footer-contact svg { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; margin-top: 2px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}
.footer-bottom a:hover { color: var(--orange); }

/* ================================================================
   FLOATING WHATSAPP
   ================================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 60px; height: 60px;
  border-radius: 999px;
  background: #25D366;
  color: white;
  display: inline-flex;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(37,211,102,0.4);
  z-index: 10000;
  transition: transform 0.25s var(--ease-bounce);
}
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #25D366;
  opacity: 0.5;
  animation: pulse 2.4s ease-out infinite;
}
.cart-float {
  position: fixed !important;
  bottom: 96px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange-soft) 0%, var(--orange) 55%, var(--orange-deep) 100%);
  color: white;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 30px -8px rgba(236,72,21,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18);
  z-index: 51;
  border: 0;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s var(--ease);
}
/* Tooltip on hover (desktop only) */
.cart-float .cart-float-label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 8px 14px;
  background: var(--ink);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  box-shadow: 0 8px 22px -6px rgba(0,0,0,0.3);
}
.cart-float .cart-float-label::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--ink);
}
@media (hover: hover) {
  .cart-float:hover .cart-float-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}
.cart-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--orange);
  opacity: 0;
  pointer-events: none;
}
.cart-float[data-has-items="true"]::before {
  opacity: 0.45;
  animation: pulse 2.4s ease-out infinite;
}
.cart-float:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 18px 38px -8px rgba(236,72,21,0.7),
    inset 0 1px 0 rgba(255,255,255,0.24);
}
.cart-float:active { transform: scale(1.02); }
.cart-float svg {
  width: 26px;
  height: 26px;
}
.cart-float .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  border: 2px solid white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}
@media (max-width: 720px) {
  .cart-float { width: 54px; height: 54px; right: 16px; bottom: 86px; }
  .cart-float svg { width: 24px; height: 24px; }
}

/* Account Modal */
.account-trigger.is-signed {
  color: var(--orange);
}
.account-trigger.is-signed::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 2px white;
}
.account-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.account-modal.is-open {
  display: flex;
  opacity: 1;
}
.account-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,10,14,0.58);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.account-panel {
  position: relative;
  width: min(100%, 1020px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: white;
  border-radius: 22px;
  box-shadow:
    0 50px 100px -28px rgba(8,10,14,0.55),
    0 18px 50px -16px rgba(8,10,14,0.35);
  border: 1px solid rgba(255,255,255,0.5);
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform 0.45s var(--ease-bounce), opacity 0.35s var(--ease);
}
.account-modal.is-open .account-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.account-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  z-index: 5;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.account-close:hover {
  background: var(--orange);
  color: white;
  transform: rotate(90deg);
  border-color: var(--orange);
}
.account-close svg {
  width: 18px;
  height: 18px;
}
.account-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) 1fr;
  min-height: 640px;
}
.account-aside {
  padding: 42px 38px;
  background:
    radial-gradient(800px circle at 0% 0%, rgba(236,72,21,0.55), transparent 55%),
    radial-gradient(700px circle at 100% 100%, rgba(255,106,51,0.28), transparent 55%),
    linear-gradient(155deg, #181b22 0%, #0a0d12 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.account-aside::before {
  content: "";
  position: absolute;
  top: -40%; left: -20%;
  width: 140%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(236,72,21,0.18), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.account-aside > * { position: relative; z-index: 1; }
.account-aside-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
}
.account-aside-brand .mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--orange-soft), var(--orange-deep));
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 8px 20px -4px rgba(236,72,21,0.55);
}
.account-aside-brand .mark svg { width: 18px; height: 18px; }
.account-aside .section-eyebrow {
  color: var(--orange-soft);
  margin-bottom: 12px;
}
.account-aside .section-eyebrow::before { background: var(--orange-soft); }
.account-aside h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 6px 0 14px;
}
.account-aside h2 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--orange-soft), #ffd28a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.account-aside p {
  color: rgba(255,255,255,0.74);
  font-size: 15px;
  line-height: 1.55;
  max-width: 320px;
}
.account-perks {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.account-perks div {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
}
.account-perks .ico-bubble {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--orange-soft);
  flex: 0 0 auto;
}
.account-perks svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.account-aside-foot {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.62);
}
.account-aside-foot svg { width: 16px; height: 16px; color: var(--orange-soft); }
.account-main {
  padding: 44px 42px;
}
.account-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--bone);
  color: var(--steel);
  font-size: 14px;
}
.account-status-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.account-status-main span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.account-status strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}
.account-status small {
  display: block;
  color: var(--steel);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.account-status-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.account-status button {
  color: var(--orange);
  font-weight: 700;
}
.account-main-head {
  margin-bottom: 22px;
}
.account-main-head h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}
.account-main-head p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background: var(--bone);
  margin-bottom: 26px;
  border: 1px solid var(--line);
}
.account-tab {
  min-height: 44px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.18s var(--ease);
}
.account-tab:hover {
  color: var(--ink);
}
.account-tab.is-active {
  background: white;
  color: var(--orange);
  box-shadow:
    0 6px 16px -6px rgba(15,15,15,0.18),
    inset 0 0 0 1px rgba(236,72,21,0.18);
}
.account-panel-body {
  display: none;
  animation: account-fade-in 0.45s var(--ease) both;
}
.account-panel-body.is-active {
  display: block;
}
@keyframes account-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-form {
  display: grid;
  gap: 18px;
}
.account-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 6px;
  padding-top: 10px;
}
.account-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(236,72,21,0.22), transparent);
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.account-grid-3 {
  display: grid;
  grid-template-columns: 0.8fr 1fr 0.7fr;
  gap: 14px;
}
.account-field {
  display: grid;
  gap: 6px;
}
.account-field.full {
  grid-column: 1 / -1;
}
.account-field label,
.account-check {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.account-field input,
.account-field select {
  min-height: 50px;
  width: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  padding: 0 16px;
  color: var(--ink);
  background: white;
  outline: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.account-field input:hover,
.account-field select:hover {
  border-color: rgba(10,10,10,0.22);
}
.account-field input:focus,
.account-field select:focus {
  border-color: var(--orange);
  background: #fffbf9;
  box-shadow: 0 0 0 4px rgba(236,72,21,0.12);
}
.account-field input::placeholder { color: rgba(110,116,128,0.65); }
.account-field input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(155,28,16,0.45);
}
.account-password {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: white;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.account-password:hover { border-color: rgba(10,10,10,0.22); }
.account-password:focus-within {
  border-color: var(--orange);
  background: #fffbf9;
  box-shadow: 0 0 0 4px rgba(236,72,21,0.12);
}
.account-password input {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.account-password input:focus { box-shadow: none; }
.account-password button {
  width: 46px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.account-password button:hover {
  color: var(--orange);
  background: rgba(236,72,21,0.06);
}
.account-password svg {
  width: 18px;
  height: 18px;
}
.password-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--mist);
  margin-top: 4px;
}
.password-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d14322, #ec6f3f);
  transition: width 0.35s var(--ease), background 0.25s var(--ease);
  box-shadow: 0 0 12px -2px currentColor;
}
.password-meter[data-score="2"] span { background: linear-gradient(90deg, #ec6f3f, #ec9a3f); }
.password-meter[data-score="3"] span { background: linear-gradient(90deg, #ec9a3f, #d4a017); }
.password-meter[data-score="4"] span { background: linear-gradient(90deg, #2faa5b, #168447); }
.account-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.account-hint.is-error {
  color: #9b1c10;
}
.account-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--steel);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.account-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--orange);
  flex: 0 0 auto;
  cursor: pointer;
}
.account-form .btn {
  width: 100%;
  min-height: 54px;
  font-size: 15px;
  letter-spacing: 0.005em;
}
.account-form .btn:disabled {
  cursor: progress;
  opacity: 0.78;
  transform: none;
}
.account-form-note {
  margin: -4px 0 0;
  text-align: center;
  color: var(--steel);
  font-size: 14px;
}
.account-form-note button {
  color: var(--orange);
  font-weight: 800;
  position: relative;
  transition: color 0.2s var(--ease);
}
.account-form-note button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0.4);
  opacity: 0;
  transform-origin: left;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.account-form-note button:hover { color: var(--orange-deep); }
.account-form-note button:hover::after { transform: scaleX(1); opacity: 1; }
.account-feedback {
  display: none;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}
.account-feedback::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.account-feedback.is-show {
  display: flex;
  animation: account-fade-in 0.3s var(--ease);
}
.account-feedback.is-error {
  color: #9b1c10;
  background: rgba(236,72,21,0.08);
  border-color: rgba(236,72,21,0.22);
}
.account-feedback.is-error::before { background: #d14322 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center / 12px no-repeat; }
.account-feedback.is-success {
  color: #17633a;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
}
.account-feedback.is-success::before { background: #16a34a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 12px no-repeat; }

/* Forgot password link */
.account-forgot {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  transition: color 0.15s var(--ease);
}
.account-forgot:hover { color: var(--orange-deep); text-decoration: underline; }
.account-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Social login buttons */
.account-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.account-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.18s var(--ease);
  cursor: pointer;
}
.account-social-btn:hover {
  border-color: var(--orange);
  background: rgba(236,72,21,0.04);
  transform: translateY(-1px);
}
.account-social-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.account-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 6px 0;
}
.account-divider::before, .account-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ================================================================
   PAGE HEADERS (interior)
   ================================================================ */
.page-hero {
  position: relative;
  height: 380px;
  overflow: hidden;
  background: var(--black);
}
.page-hero-about {
  height: auto;
  min-height: 420px;
  aspect-ratio: 1774 / 626;
}
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.page-hero-about img {
  opacity: 1;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.4), rgba(10,10,10,0.85));
}
.page-hero-about::after {
  display: none;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 44px;
  color: white;
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}
.crumb a { color: rgba(255,255,255,0.7); }
.crumb a:hover { color: white; }
.crumb svg { width: 12px; height: 12px; }
.page-hero h1 {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.page-hero p { color: rgba(255,255,255,0.78); font-size: 17px; }

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-history-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}
.about-history-grid .feature-image {
  border-radius: 0;
  overflow: visible;
  position: relative;
  aspect-ratio: 16/9;
  background: transparent;
  box-shadow: none;
}
.about-history-grid .feature-image img { width: 100%; height: 100%; object-fit: contain; }

/* ================================================================
   MISSÃO, VISÃO E VALORES
   ================================================================ */
.mvv-section {
  background: var(--bone);
  position: relative;
  overflow: hidden;
}

/* Top header — text + image side by side */
.mvv-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}
.mvv-head-text { max-width: 540px; }
.mvv-head-text .section-eyebrow { margin-bottom: 14px; }
.mvv-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 18px;
}
.mvv-title em {
  font-style: normal;
  color: var(--orange);
}
.mvv-rule {
  display: block;
  width: 56px; height: 4px;
  background: var(--orange);
  border-radius: 3px;
  margin-bottom: 18px;
}
.mvv-sub {
  margin: 0;
  color: var(--steel);
  font-size: 17px;
  line-height: 1.55;
}
.mvv-head-image {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1f29, #0a0d12);
  box-shadow:
    0 30px 60px -22px rgba(15,15,15,0.28),
    0 12px 28px -10px rgba(15,15,15,0.18);
  isolation: isolate;
}
.mvv-head-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}
.mvv-head-image:hover img { transform: scale(1.05); }
.mvv-head-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.18) 100%);
  z-index: 1;
}
/* Hidden — replaced by inner gradient */
.mvv-head-image-fade { display: none; }

/* Three cards row */
.mvv-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 48px;
}
.mvv-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 32px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s var(--ease);
}
.mvv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(236,72,21,0.25);
}
.mvv-card-num {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 800;
  color: rgba(236,72,21,0.13);
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.mvv-card-vision .mvv-card-num { color: rgba(34,128,82,0.13); }
.mvv-card-ico {
  width: 60px; height: 60px;
  border-radius: 999px;
  background: rgba(236,72,21,0.12);
  color: var(--orange);
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 26px;
}
.mvv-card-vision .mvv-card-ico {
  background: rgba(34,128,82,0.12);
  color: #228052;
}
.mvv-card-ico svg { width: 28px; height: 28px; }
.mvv-card h3 {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.mvv-card-rule {
  display: block;
  width: 36px; height: 3px;
  border-radius: 2px;
  margin-bottom: 18px;
}
.mvv-card-rule-orange { background: var(--orange); }
.mvv-card-rule-green { background: #228052; }
.mvv-card p {
  font-size: 15.5px;
  color: var(--steel);
  line-height: 1.65;
  margin: 0;
}
.mvv-card p strong { color: var(--ink); font-weight: 700; }

/* Bottom illustration band on Mission/Vision */
.mvv-card-deco {
  margin-top: auto;
  padding: 28px 0 24px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.mvv-card-deco svg {
  width: 100%;
  max-width: 280px;
  height: 80px;
  opacity: 0.8;
}
.mvv-card-mission .mvv-card-deco svg { color: var(--orange); }
.mvv-card-vision  .mvv-card-deco svg { color: #228052; }

/* Values card — list inside */
.mvv-card-values { padding-bottom: 28px; }
.mvv-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.mvv-values li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bone);
  border-radius: 12px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.mvv-values li:hover {
  background: rgba(236,72,21,0.06);
  transform: translateX(2px);
}
.mvv-values .value-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(236,72,21,0.12);
  color: var(--orange);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mvv-values .value-ico svg { width: 18px; height: 18px; }
.mvv-values li > div { display: grid; gap: 2px; min-width: 0; }
.mvv-values strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: -0.005em;
}
.mvv-values span {
  font-size: 13px;
  color: var(--steel);
  line-height: 1.45;
}

/* CTA row + trust */
.mvv-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mvv-btn-primary,
.mvv-btn-outline {
  flex: 0 1 auto;
  min-width: 280px;
  padding: 18px 26px;
  font-size: 15px;
}
.mvv-btn-outline {
  background: white;
  border: 1.5px solid var(--orange);
  color: var(--orange);
}
.mvv-btn-outline:hover {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
.mvv-btn-primary svg, .mvv-btn-outline svg { width: 18px; height: 18px; }
.mvv-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  color: var(--steel);
  font-size: 14px;
  font-weight: 500;
}
.mvv-trust svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; opacity: 0.85; }

/* Responsive */
@media (max-width: 1024px) {
  .mvv-head { grid-template-columns: 1fr; gap: 32px; }
  .mvv-head-image { aspect-ratio: 16/10; }
  .mvv-cards { grid-template-columns: 1fr; }
  .mvv-card { min-height: auto; }
}
@media (max-width: 720px) {
  .mvv-card { padding: 28px 24px 0; border-radius: 18px; }
  .mvv-card-num { font-size: 52px; top: 18px; right: 22px; }
  .mvv-card h3 { font-size: 24px; }
  .mvv-btn-primary, .mvv-btn-outline { width: 100%; min-width: 0; }
}

/* Professional compact layout override for About > Mission, Vision and Values */
.mvv-section {
  padding: clamp(42px, 5vw, 64px) 0;
  background:
    linear-gradient(180deg, #fff 0%, #faf9f5 48%, var(--bone) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mvv-section .container {
  position: relative;
  z-index: 1;
}
.mvv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(22px, 2.8vw, 30px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(10,10,10,0.09);
}
.mvv-head-text {
  width: 100%;
  max-width: 760px;
}
.mvv-head-text .section-eyebrow { margin-bottom: 12px; }
.mvv-title {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0 0 14px;
}
.mvv-rule {
  width: 74px;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), #228052, #2563b8);
  margin-bottom: 16px;
}
.mvv-sub {
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 680px;
}
.mvv-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}
.mvv-card {
  --mvv-accent: var(--orange);
  --mvv-accent-rgb: 236, 72, 21;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: 0 18px 42px -34px rgba(15,15,15,0.42);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.mvv-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--mvv-accent);
}
.mvv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -34px rgba(15,15,15,0.5);
  border-color: rgba(var(--mvv-accent-rgb), 0.34);
}
.mvv-card-vision {
  --mvv-accent: #228052;
  --mvv-accent-rgb: 34, 128, 82;
}
.mvv-card-values {
  --mvv-accent: #2563b8;
  --mvv-accent-rgb: 37, 99, 184;
  padding-bottom: 24px;
}
.mvv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.mvv-card-ico {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  border-radius: 8px;
  background: rgba(var(--mvv-accent-rgb), 0.1);
  color: var(--mvv-accent);
  flex: 0 0 auto;
}
.mvv-card-vision .mvv-card-ico {
  background: rgba(var(--mvv-accent-rgb), 0.1);
  color: var(--mvv-accent);
}
.mvv-card-ico svg {
  width: 24px;
  height: 24px;
}
.mvv-card-num {
  position: static;
  top: auto;
  right: auto;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--mvv-accent);
  background: rgba(var(--mvv-accent-rgb), 0.09);
  border: 1px solid rgba(var(--mvv-accent-rgb), 0.16);
  border-radius: 999px;
  padding: 8px 10px;
}
.mvv-card-vision .mvv-card-num {
  color: var(--mvv-accent);
}
.mvv-card h3 {
  font-size: 24px;
  letter-spacing: 0;
  margin: 0 0 10px;
}
.mvv-card-rule {
  width: 42px;
  margin-bottom: 16px;
  background: var(--mvv-accent);
}
.mvv-card-rule-orange,
.mvv-card-rule-green { background: var(--mvv-accent); }
.mvv-card p {
  font-size: 14.5px;
  line-height: 1.58;
}
.mvv-card p strong {
  color: var(--ink);
  font-weight: 750;
}
.mvv-card-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
}
.mvv-card-tags li {
  color: var(--mvv-accent);
  background: rgba(var(--mvv-accent-rgb), 0.08);
  border: 1px solid rgba(var(--mvv-accent-rgb), 0.13);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.mvv-values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 22px 0 0;
  padding: 0;
  gap: 9px;
}
.mvv-values li {
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8f7f2;
  border: 1px solid rgba(10,10,10,0.06);
  border-radius: 8px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mvv-values li:hover {
  background: rgba(37,99,184,0.07);
  border-color: rgba(37,99,184,0.14);
}
.mvv-values .value-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(37,99,184,0.1);
  color: #2563b8;
}
.mvv-values .value-ico svg {
  width: 17px;
  height: 17px;
}
.mvv-values strong {
  color: var(--ink);
  letter-spacing: 0;
}
.mvv-actions {
  gap: 12px;
  margin-top: 18px;
}
.mvv-btn-primary,
.mvv-btn-outline {
  min-width: 260px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14.5px;
}
.mvv-btn-outline {
  background: white;
  border: 1.5px solid rgba(236,72,21,0.42);
  color: var(--orange);
}
.mvv-trust {
  margin: 18px 0 0;
  font-size: 13.5px;
  font-weight: 650;
}

@media (max-width: 1024px) {
  .mvv-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 720px) {
  .mvv-section {
    padding: 44px 0;
  }
  .mvv-head {
    display: block;
    padding-bottom: 18px;
  }
  .mvv-title {
    font-size: clamp(28px, 9vw, 38px);
  }
  .mvv-sub {
    font-size: 15px;
  }
  .mvv-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mvv-card {
    padding: 22px 20px;
    border-radius: 8px;
  }
  .mvv-values {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
  .mvv-card h3 {
    font-size: 22px;
  }
  .mvv-btn-primary,
  .mvv-btn-outline {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* Culture (Jeito Champion) */
.culture {
  background:
    radial-gradient(800px circle at 0% 20%, rgba(236,72,21,0.14), transparent 60%),
    linear-gradient(180deg, #0e1116, #0a0a0a);
  color: white;
}
.culture .section-eyebrow { color: var(--orange-soft); }
.culture .section-eyebrow::before { background: var(--orange-soft); }
.culture .section-title { color: white; }
.culture .section-sub { color: rgba(255,255,255,0.7); }
.culture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}
.culture-card {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.culture-card:hover {
  transform: translateY(-4px);
  background: rgba(236,72,21,0.08);
  border-color: rgba(236,72,21,0.4);
}
.culture-num {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--orange-soft);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: inline-block;
}
.culture-card h4 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  color: white;
  margin-bottom: 6px;
}
.culture-card p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* Manifesto */
.manifesto {
  background: var(--bone);
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(236,72,21,0.08), transparent 60%);
  pointer-events: none;
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.manifesto-list { display: grid; gap: 16px; }
.manifesto-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.55;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.manifesto-list li:last-child { border-bottom: 0; }
.manifesto-list li::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}
.manifesto h2 { font-size: 42px; }
.manifesto-claim {
  margin-top: 36px;
  padding: 26px;
  border-left: 4px solid var(--orange);
  background: white;
  border-radius: 8px;
}
.manifesto-claim strong {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: 0;
  color: var(--ink);
}

/* Map */
.map-band {
  background: var(--ink);
  color: white;
  padding: 0;
}
.map-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: stretch;
}
.map-info {
  padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.map-info h2 { font-size: 42px; color: white; line-height: 1.1; letter-spacing: 0; }
.map-info p { color: rgba(255,255,255,0.7); margin: 14px 0 26px; line-height: 1.6; }
.map-data { display: grid; gap: 18px; }
.map-data div {
  display: flex; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.map-data div:last-child { border-bottom: none; }
.map-data .ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(236,72,21,0.16);
  color: var(--orange-soft);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.map-data .ico svg { width: 18px; height: 18px; }
.map-data h6 { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; text-transform: uppercase; }
.map-data span { font-size: 15px; color: white; line-height: 1.5; display: block; margin-top: 2px; }
.map-frame {
  min-height: 480px;
  position: relative;
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(0.3) contrast(1.05);
}

/* ================================================================
   PRODUCTS PAGE / DETAIL
   ================================================================ */
.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.product-card.is-hidden { display: none; }
.product-list.is-list {
  grid-template-columns: 1fr;
}
.product-list.is-list .product-card {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  min-height: 230px;
}
.product-list.is-list .product-thumb {
  aspect-ratio: auto;
  min-height: 100%;
}
.shop-empty {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 260px;
  padding: 36px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: white;
  color: var(--muted);
}
.shop-empty strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  margin-bottom: 6px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.detail-art {
  background: linear-gradient(140deg, #f8f6f0, #ecebe5);
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.detail-art.has-photo { background: #f6f5f1; }
.detail-info h1 { font-size: 44px; margin-bottom: 14px; letter-spacing: 0; }
.detail-info .product-cat { margin-bottom: 8px; display: block; }
.detail-info p { color: var(--steel); font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.detail-price-block {
  background: var(--bone);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.detail-price-block .product-price { font-size: 32px; }
.detail-options { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.detail-option {
  padding: 12px 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.detail-option.active, .detail-option:hover {
  border-color: var(--orange);
  background: rgba(236,72,21,0.08);
  color: var(--orange);
}
/* ── Seção de conteúdo SEO do produto ── */
.product-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.product-content-main h2 {
  font-size: 24px;
  margin: 32px 0 14px;
}
.product-content-main h2:first-child { margin-top: 0; }
.product-content-main p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 14px;
}
.product-content-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.product-content-benefits li {
  position: relative;
  padding-left: 30px;
  line-height: 1.55;
}
.product-content-benefits li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 18px; height: 18px;
  background: rgba(236,72,21,0.12);
  border-radius: 50%;
}
.product-content-benefits li::after {
  content: "";
  position: absolute;
  left: 6px; top: 7px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* Ficha rápida (aside sticky) */
.product-content-aside { position: sticky; top: 96px; }
.product-content-card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}
.product-content-card h3 { font-size: 16px; margin-bottom: 14px; }
.product-content-card dl {
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  font-size: 13.5px;
}
.product-content-card dt { color: var(--muted); }
.product-content-card dd { margin: 0; font-weight: 600; text-align: right; }
.product-content-card .btn { width: 100%; justify-content: center; }

/* FAQ acordeão */
.product-faq { display: grid; gap: 10px; }
.product-faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  overflow: hidden;
}
.product-faq-item summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-faq-item summary::-webkit-details-marker { display: none; }
.product-faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--orange);
  transition: transform 0.2s;
  line-height: 1;
}
.product-faq-item[open] summary::after { transform: rotate(45deg); }
.product-faq-answer { padding: 0 18px 18px; }
.product-faq-answer p { color: var(--muted); line-height: 1.65; margin: 0; }

@media (max-width: 860px) {
  .product-content-grid { grid-template-columns: 1fr; gap: 28px; }
  .product-content-aside { position: static; }
}

/* Variante de produto: opção com thumb + nome + preço */
.detail-options-rich { gap: 12px; }
.detail-option-variant {
  padding: 8px 14px 8px 8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: white;
}
.detail-option-thumb {
  width: 48px; height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bone);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.detail-option-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-option-text { display: inline-flex; flex-direction: column; line-height: 1.2; gap: 2px; }
.detail-option-name { font-size: 14px; font-weight: 600; }
.detail-option-price {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.detail-option-variant.active .detail-option-price,
.detail-option-variant:hover .detail-option-price { color: var(--orange); }
.qty {
  display: inline-flex;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  margin-right: 10px;
}
.qty button {
  width: 44px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--ink);
}
.qty button:hover { background: var(--mist); color: var(--orange); }
.qty input {
  width: 48px;
  border: 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  background: transparent;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; align-items: center; }
.detail-features {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.detail-features div {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 14px;
  color: var(--steel);
}
.detail-features svg { width: 20px; height: 20px; color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.detail-features strong { color: var(--ink); display: block; font-weight: 700; margin-bottom: 2px; }

/* Cart Drawer */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100%);
  height: 100vh;
  background: white;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.2);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 199;
  backdrop-filter: blur(4px);
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.cart-head h3 { font-size: 18px; font-weight: 700; }
.cart-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cart-brand img {
  width: 120px;
  height: auto;
  flex: 0 0 auto;
}
.cart-brand div {
  display: grid;
  gap: 2px;
}
.cart-brand span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.cart-brand strong {
  font-size: 18px;
  line-height: 1.1;
  color: var(--ink);
  font-family: var(--f-display);
}
.cart-body { flex: 1; overflow-y: auto; padding: 18px 24px; }
.cart-empty { text-align: center; color: var(--muted); padding: 60px 0; }
.cart-empty svg { width: 60px; height: 60px; opacity: 0.3; margin: 0 auto 14px; }
.cart-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item-thumb {
  width: 70px; height: 70px;
  border-radius: 10px;
  background: var(--mist);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 800;
  color: var(--orange);
  font-size: 18px;
  letter-spacing: 0;
}
.cart-item-thumb.has-photo {
  background: #f6f5f1;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cart-item-body { flex: 1; }
.cart-item-body h5 { font-size: 14px; font-weight: 700; }
.cart-item-body p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cart-item-foot strong { font-size: 15px; color: var(--ink); }
.cart-foot { padding: 22px 24px; border-top: 1px solid var(--line); background: var(--bone); }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 17px; }
.cart-total strong { font-size: 22px; color: var(--ink); font-family: var(--f-display); }
.cart-foot .btn { width: 100%; }

/* Toast */
.toast {
  position: fixed;
  bottom: 100px;
  right: 24px;
  background: var(--ink);
  color: white;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  z-index: 250;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s;
  pointer-events: none;
  display: flex; align-items: center; gap: 10px;
}
.toast.is-show { transform: translateY(0); opacity: 1; }
.toast svg { width: 18px; height: 18px; color: var(--orange); }

/* Reveal animations — elements gracefully arriving on scroll */
.reveal {
  --reveal-x: 0;
  --reveal-y: 36px;
  --reveal-scale: 0.97;
  --reveal-rotate: 0deg;
  --reveal-blur: 6px;
  --reveal-duration: 0.85s;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale)) rotate(var(--reveal-rotate));
  transition:
    opacity var(--reveal-duration) var(--ease),
    transform var(--reveal-duration) var(--ease),
    filter var(--reveal-duration) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.reveal-up    { --reveal-x: 0; --reveal-y: 40px; }
.reveal-down  { --reveal-x: 0; --reveal-y: -40px; }
.reveal-left  { --reveal-x: -42px; --reveal-y: 0; }
.reveal-right { --reveal-x: 42px; --reveal-y: 0; }
.reveal-scale { --reveal-y: 18px; --reveal-scale: 0.9; }
.reveal-pop   { --reveal-y: 0; --reveal-scale: 0.7; --reveal-blur: 0px; --reveal-duration: 0.7s; }
.reveal-zoom  { --reveal-y: 0; --reveal-scale: 1.06; --reveal-blur: 0px; }
.reveal-tilt  { --reveal-y: 24px; --reveal-rotate: -2deg; }
.reveal-soft  { --reveal-y: 18px; --reveal-blur: 14px; --reveal-duration: 1.0s; }

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.reveal-delay-1 { --reveal-delay: 70ms; }
.reveal-delay-2 { --reveal-delay: 140ms; }
.reveal-delay-3 { --reveal-delay: 210ms; }
.reveal-delay-4 { --reveal-delay: 280ms; }
.reveal-delay-5 { --reveal-delay: 350ms; }
.reveal-delay-6 { --reveal-delay: 420ms; }
.reveal-delay-7 { --reveal-delay: 490ms; }
.reveal-delay-8 { --reveal-delay: 560ms; }

/* Stagger children — auto-delays for each direct child */
.stagger > * { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.stagger.is-visible > * { opacity: 1; transform: translate3d(0,0,0); }
.stagger.is-visible > *:nth-child(1)  { transition-delay: 60ms; }
.stagger.is-visible > *:nth-child(2)  { transition-delay: 130ms; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: 200ms; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: 270ms; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: 340ms; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: 410ms; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: 480ms; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: 550ms; }
.stagger.is-visible > *:nth-child(9)  { transition-delay: 620ms; }
.stagger.is-visible > *:nth-child(10) { transition-delay: 690ms; }
.stagger.is-visible > *:nth-child(11) { transition-delay: 760ms; }
.stagger.is-visible > *:nth-child(12) { transition-delay: 830ms; }

/* Section subtle parallax for backgrounds */
.parallax-y { will-change: transform; transition: transform 0.4s linear; }

/* Hover lift utility */
.hover-lift {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ================================================================
   BENEFITS V2 · "Por que Champion" (novo layout split)
   ================================================================ */
.benefits-band.benefits-v2 {
  background: linear-gradient(180deg, #FAFAF7 0%, #F5F4EF 100%);
  padding: clamp(60px, 10vw, 120px) 0;
  position: relative;
}
.benefits-band.benefits-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(236,72,21,0.045), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(37,99,184,0.04), transparent 45%);
  pointer-events: none;
}
.benefits-v2 .container { position: relative; }

.benefits-v2-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 980px) {
  .benefits-v2-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Media (image column) */
.benefits-v2-media {
  position: sticky;
  top: 100px;
}
@media (max-width: 980px) { .benefits-v2-media { position: relative; top: auto; } }

.benefits-v2-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--mist);
  box-shadow: 0 30px 80px -20px rgba(15,15,15,0.18), 0 6px 18px -6px rgba(15,15,15,0.08);
  isolation: isolate;
}
.benefits-v2-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08);
  transition: transform 1.2s var(--ease);
}
.benefits-v2-frame:hover img { transform: scale(1.04); }
.benefits-v2-frame-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(155deg, rgba(13,17,23,0.15) 0%, transparent 38%),
    linear-gradient(0deg, rgba(13,17,23,0.65) 0%, rgba(13,17,23,0.1) 45%, transparent 65%);
  pointer-events: none;
}

/* Badge "60+ anos" no canto superior esquerdo */
.benefits-v2-badge {
  position: absolute;
  top: 22px; left: 22px;
  background: linear-gradient(135deg, #FF6A33, #EC4815 60%, #C13808);
  color: white;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 10px 30px -6px rgba(236,72,21,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}
.benefits-v2-badge strong {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.benefits-v2-badge span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.92;
}

/* Citação na parte inferior da imagem */
.benefits-v2-quote {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 18px 20px;
  z-index: 2;
  box-shadow: 0 6px 24px -6px rgba(0,0,0,0.18);
}
.benefits-v2-quote p {
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.benefits-v2-quote small {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.04em;
}

/* Content (right column) */
.benefits-v2-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.benefits-v2-header { max-width: 620px; }
.benefits-v2-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  margin: 12px 0 16px;
}
.benefits-v2-title em {
  font-style: normal;
  color: var(--orange);
}
.benefits-v2-lead {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--steel);
  max-width: 580px;
}
.benefits-v2-lead strong { color: var(--ink); font-weight: 700; }

/* Cards grid */
.benefits-v2-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.benefit-card-v2 {
  background: white;
  border: 1px solid rgba(15,15,15,0.05);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
  overflow: hidden;
}
.benefit-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), #FF6A33);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.benefit-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(15,15,15,0.18);
  border-color: rgba(236,72,21,0.18);
}
.benefit-card-v2:hover::before { opacity: 1; }

.benefit-ico-v2 {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.benefit-ico-v2 svg { width: 22px; height: 22px; }
.benefit-card-v2:hover .benefit-ico-v2 { transform: scale(1.08); }

.benefit-ico-v2.orange { background: #FFF0EB; color: var(--orange); }
.benefit-ico-v2.blue   { background: #EBF3FE; color: #2563b8; }
.benefit-ico-v2.green  { background: #EDFAF3; color: #1f6f4a; }

.benefit-card-v2 h3 {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}
.benefit-card-v2 p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--steel);
  margin: 0;
}

/* ================================================================
   BENEFITS · "Por que Champion" (layout antigo - mantido como fallback)
   ================================================================ */
.benefits-band {
  background: var(--bone);
  position: relative;
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* Header with right-side fade-in image */
.benefits-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 380px;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--bone);
}
.benefits-hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
  user-select: none;
}
.benefits-hero-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* horizontal: bone left -> transparent right */
    linear-gradient(90deg,
      var(--bone) 0%,
      var(--bone) 36%,
      rgba(246,245,241,0.92) 50%,
      rgba(246,245,241,0.5) 65%,
      rgba(246,245,241,0.18) 80%,
      transparent 100%),
    /* vertical: transparent top -> bone bottom */
    linear-gradient(180deg,
      transparent 0%,
      transparent 60%,
      rgba(246,245,241,0.85) 85%,
      var(--bone) 100%);
}
.benefits-hero-text {
  max-width: 580px;
  position: relative;
  z-index: 1;
}
.benefits-title {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 14px 0 18px;
}
.benefits-title em {
  font-style: normal;
  color: var(--orange);
}
.benefits-lead {
  font-size: 17px;
  color: var(--steel);
  line-height: 1.55;
  max-width: 460px;
  margin: 0;
}
.benefits-lead strong { color: var(--orange); font-weight: 700; }

/* 6 cards grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: clamp(40px, 5vw, 60px);
  position: relative;
  z-index: 2;
}
.benefit-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 30px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: flex-start;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.25s var(--ease);
  --benefit-color: var(--orange);
  --benefit-color-rgb: 236, 72, 21;
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(15,15,15,0.12), 0 8px 18px -8px rgba(15,15,15,0.08);
  border-color: rgba(var(--benefit-color-rgb), 0.32);
}
.benefit-card-orange { --benefit-color: var(--orange);   --benefit-color-rgb: 236, 72, 21; }
.benefit-card-green  { --benefit-color: #1f6f4a;         --benefit-color-rgb: 31, 111, 74; }
.benefit-card-blue   { --benefit-color: #2563b8;         --benefit-color-rgb: 37, 99, 184; }

.benefit-ico {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--benefit-color);
  background: transparent;
  border: 0;
  border-radius: 0;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-bounce);
}
.benefit-card:hover .benefit-ico { transform: scale(1.08) rotate(-3deg); }
.benefit-ico svg { width: 100%; height: 100%; stroke-width: 1.7; }

.benefit-body { display: grid; gap: 8px; min-width: 0; }
.benefit-card h3 {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}
.benefit-card p {
  font-size: 14.5px;
  color: var(--steel);
  line-height: 1.55;
  margin: 0;
}
.benefit-rule {
  display: block;
  width: 36px; height: 3px;
  border-radius: 3px;
  background: var(--benefit-color);
  margin-top: 14px;
  transition: width 0.3s var(--ease);
}
.benefit-card:hover .benefit-rule { width: 56px; }

/* Bottom trust strip — 4 mini cards in a row */
.benefits-strip {
  margin-top: 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
}
.trust-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 6px 24px;
  border-right: 1px solid var(--line);
  --trust-color: var(--orange);
}
.trust-pill:last-child { border-right: 0; }
.trust-pill-orange { --trust-color: var(--orange); }
.trust-pill-blue   { --trust-color: #2563b8; }
.trust-pill-green  { --trust-color: #1f6f4a; }
.trust-pill-ico {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--trust-color);
  flex-shrink: 0;
}
.trust-pill-ico svg { width: 100%; height: 100%; stroke-width: 1.7; }
.trust-pill > div { display: grid; gap: 4px; min-width: 0; }
.trust-pill strong {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.trust-pill span {
  font-size: 13px;
  color: var(--steel);
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 1024px) {
  .benefits-hero { min-height: 380px; }
  .benefits-hero-bg { width: 56%; right: 0; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); margin-top: -24px; }
  .benefits-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .trust-pill { border-right: 0; padding: 6px 14px; }
  .trust-pill:nth-child(1), .trust-pill:nth-child(2) { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
  .trust-pill:nth-child(3), .trust-pill:nth-child(4) { padding-top: 6px; }
}
@media (max-width: 720px) {
  .benefits-hero {
    min-height: 0;
    padding: 280px 0 36px;
    align-items: flex-start;
  }
  .benefits-hero-bg { width: 100%; height: 280px; top: 0; bottom: auto; right: 0; }
  .benefits-hero-fade {
    width: 100%; height: 320px; top: 0; bottom: auto;
    background: linear-gradient(180deg, transparent 45%, rgba(246,245,241,0.7) 70%, var(--bone) 100%);
  }
  .benefits-hero-text { padding-top: 0; }
  .benefits-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
  .benefit-card { padding: 22px 22px 20px; gap: 16px; }
  .benefit-ico { width: 48px; height: 48px; }
  .benefit-card h3 { font-size: 19px; }
  .benefits-strip { grid-template-columns: 1fr; gap: 8px; padding: 18px 18px; }
  .trust-pill { padding: 14px 6px; border-bottom: 1px solid var(--line); }
  .trust-pill:last-child { border-bottom: 0; }
}

/* Testimonials */
.testimonials { background: var(--bone); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testi-card::after {
  content: "“";
  position: absolute;
  top: 6px; right: 22px;
  font-family: var(--f-display);
  font-size: 100px;
  line-height: 1;
  font-weight: 900;
  color: rgba(236,72,21,0.10);
  pointer-events: none;
}
.testi-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--orange);
}
.testi-stars svg { width: 16px; height: 16px; }
.testi-card blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  flex: 1;
}
.testi-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testi-avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  display: block;
  object-fit: cover;
  object-position: center;
  background: var(--bone);
  border: 2px solid white;
  box-shadow: 0 8px 18px rgba(10,10,10,0.12);
  flex-shrink: 0;
}
.testi-foot strong { font-size: 14px; font-weight: 700; color: var(--ink); display: block; }
.testi-foot span { font-size: 12px; color: var(--muted); }
@media (max-width: 1024px) { .testi-grid { grid-template-columns: 1fr; } }

/* Number counter animation */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   BLOG — Editorial / Magazine layout
   ================================================================ */

/* HERO */
.blog-hero {
  height: clamp(390px, 44vh, 460px);
  position: relative;
  overflow: hidden;
}
.blog-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.78;
  transform: scale(1.02);
  filter: saturate(1.05);
}
.blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,10,14,0.92) 0%, rgba(8,10,14,0.62) 42%, rgba(8,10,14,0.22) 80%, transparent 100%),
    linear-gradient(180deg, rgba(8,10,14,0.08) 0%, transparent 28%, transparent 60%, rgba(8,10,14,0.85) 100%);
}
.blog-hero .page-hero-inner {
  max-width: var(--container);
  padding: 0 24px clamp(50px, 7vw, 80px);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  margin: 0 auto;
}
.blog-hero .crumb { color: rgba(255,255,255,0.65); margin-bottom: 18px; }
.blog-hero .crumb a { color: rgba(255,255,255,0.85); }
.blog-hero .crumb a:hover { color: var(--orange-soft); }
.blog-hero .crumb svg { width: 12px; height: 12px; opacity: 0.6; }
.blog-hero .section-eyebrow {
  color: var(--orange-soft);
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.28em;
}
.blog-hero .section-eyebrow::before { background: var(--orange-soft); }
.blog-hero h1 {
  max-width: 820px;
  font-family: var(--f-display);
  font-size: clamp(42px, 5.6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: white;
  margin: 0 0 18px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.blog-hero p {
  max-width: 620px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.blog-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Section background */
.blog-section { background: var(--bg); position: relative; }

/* Toolbar — search + category pills */
.blog-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 44px;
  padding: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 28px -16px rgba(15,15,15,0.12);
}
.blog-search {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--bone);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.blog-search:focus-within {
  border-color: var(--orange);
  background: white;
  box-shadow: 0 0 0 4px rgba(236,72,21,0.1);
}
.blog-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: 0 0 auto;
}
.blog-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  font-size: 14.5px;
}
.blog-search input::placeholder { color: var(--muted); font-weight: 400; }
.blog-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.blog-filter {
  min-height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: white;
  color: var(--steel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
  cursor: pointer;
}
.blog-filter:hover {
  color: var(--orange);
  border-color: var(--orange);
  transform: translateY(-1px);
}
.blog-filter.is-active {
  color: white;
  border-color: var(--ink);
  background: var(--ink);
}

/* Layout: main + sidebar */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.blog-main { min-width: 0; }

/* FEATURED — magazine hero card */
.blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
  overflow: hidden;
  margin-bottom: 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  box-shadow: 0 24px 56px -28px rgba(15,15,15,0.18);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px -28px rgba(15,15,15,0.24);
}
.blog-featured::before {
  content: "Em destaque";
  position: absolute;
  top: 18px; left: 18px;
  z-index: 3;
  padding: 6px 12px;
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: white;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 18px -6px rgba(236,72,21,0.5);
}
.blog-featured-media {
  position: relative;
  min-height: 360px;
  background: var(--mist);
  overflow: hidden;
}
.blog-featured-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 60%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.blog-featured-media img,
.blog-card-media img,
.blog-article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.blog-featured:hover .blog-featured-media img,
.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}
.blog-featured-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  padding: clamp(28px, 3.5vw, 44px);
}

/* Tag / kicker pill */
.blog-kicker,
.blog-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(236,72,21,0.10);
  color: var(--orange);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.blog-featured h2,
.blog-card h3,
.blog-article h1,
.blog-admin-panel h2,
.blog-admin-card h1 {
  overflow-wrap: anywhere;
  font-family: var(--f-display);
}
.blog-featured h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.blog-featured h2:hover { color: var(--orange-deep); }
.blog-featured p,
.blog-card p,
.blog-side-list p {
  color: var(--steel);
  line-height: 1.6;
  margin: 0;
}
.blog-featured p { font-size: 15.5px; }

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  align-items: center;
}
.blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-meta span + span::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--muted);
  margin-right: 12px;
  margin-left: -10px;
  opacity: 0.5;
}

/* GRID of cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.blog-card:hover {
  transform: translateY(-5px);
  border-color: rgba(236,72,21,0.22);
  box-shadow: 0 20px 44px -22px rgba(15,15,15,0.18);
}
.blog-card-media {
  aspect-ratio: 16 / 10;
  background: var(--mist);
  overflow: hidden;
  display: block;
  position: relative;
}
.blog-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.10) 100%);
  pointer-events: none;
}
.blog-card-body {
  display: grid;
  gap: 12px;
  padding: 24px;
}
.blog-card h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--ink);
}
.blog-card h3 a { color: inherit; transition: color 0.2s var(--ease); }
.blog-card h3 a:hover { color: var(--orange); }
.blog-card p { font-size: 14.5px; }

.blog-card-link,
.blog-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 4px;
  transition: gap 0.25s var(--ease), color 0.2s var(--ease);
}
.blog-card-link:hover,
.blog-featured-link:hover { color: var(--orange-deep); gap: 14px; }
.blog-card-link svg,
.blog-featured-link svg {
  width: 14px;
  height: 14px;
}

/* SIDEBAR */
.blog-sidebar {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 20px;
  min-width: 0;
}
.blog-side-box {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}
.blog-side-box h3 {
  margin: 0 0 18px;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-side-box h3::before {
  content: "";
  width: 4px; height: 18px;
  border-radius: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.blog-side-list {
  display: grid;
  gap: 16px;
}
.blog-side-list a {
  display: grid;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.2s var(--ease);
}
.blog-side-list a:hover {
  padding-left: 6px;
}
.blog-side-list a:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.blog-side-list strong {
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.35;
  transition: color 0.2s var(--ease);
}
.blog-side-list p {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}
.blog-side-list a:hover strong { color: var(--orange); }

.blog-empty {
  grid-column: 1 / -1;
  padding: 50px 30px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: white;
  color: var(--muted);
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
}

/* DETAIL VIEW (article reading) */
.blog-detail-section {
  background: linear-gradient(180deg, #f6f7f8 0%, #fff 520px);
}
.blog-detail-wrap {
  max-width: 1080px;
  margin: 0 auto;
}
.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--steel);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.blog-back-link:hover { color: var(--orange); gap: 14px; }
.blog-back-link svg {
  width: 14px;
  height: 14px;
}

.blog-article {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.blog-article-head {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) 24px clamp(32px, 4vw, 52px);
  text-align: center;
}
.blog-article-head .blog-meta {
  font-size: 13px;
  margin-bottom: 4px;
}
.blog-article h1 {
  max-width: 840px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.blog-article-head p {
  max-width: 740px;
  color: var(--steel);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  margin: 0;
  font-weight: 500;
}
.blog-article-hero {
  /* Aspect ratio configurável pelo admin via --hero-aspect (padrão 16:9 ~ panorâmico).
     max-height limita verticalmente para evitar que o hero empurre todo o
     conteúdo abaixo da dobra mesmo com proporções como 1:1 ou 4:3. */
  aspect-ratio: var(--hero-aspect, 16 / 9);
  max-height: min(72vh, 720px);
  width: 100%;
  background: var(--mist);
  overflow: hidden;
  position: relative;
  border-radius: 24px;
  box-shadow: 0 28px 70px -34px rgba(15,15,15,.42);
}
.blog-article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.12) 100%);
  pointer-events: none;
}
.blog-article-content {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(42px, 6vw, 76px) clamp(20px, 3vw, 34px) 20px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.84;
}
/* Drop cap on first paragraph */
.blog-article-content > p:first-child::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 64px;
  line-height: 0.92;
  font-weight: 800;
  color: var(--orange);
  margin: 6px 12px 0 0;
  padding: 0;
}
.blog-article-content p {
  margin: 0 0 26px;
  color: var(--graphite);
  font-size: 18px;
  line-height: 1.84;
}
.blog-article-content h2 {
  margin: 40px 0 16px;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--ink);
  position: relative;
  padding-left: 18px;
}
.blog-article-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; bottom: 8px;
  width: 4px;
  border-radius: 3px;
  background: var(--orange);
}
.blog-article-content h3 {
  margin: 28px 0 12px;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.blog-article-content ul,
.blog-article-content ol {
  margin: 0 0 22px;
  padding-left: 24px;
  color: var(--graphite);
  line-height: 1.78;
}
.blog-article-content ul li,
.blog-article-content ol li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.blog-article-content ul li::marker { color: var(--orange); }
.blog-article-content blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--orange);
  background: rgba(236,72,21,0.05);
  border-radius: 0 12px 12px 0;
  font-family: var(--f-display);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}
.blog-article-content a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.blog-article-content a:hover { color: var(--orange-deep); }
.blog-article-content strong { color: var(--ink); font-weight: 700; }

/* ══════════════════════════════════════════════════
   CMS banners (admin-configurável, por página)
   ══════════════════════════════════════════════════ */

/* Banner genérico em páginas internas */
.cms-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: var(--mist);
}
.cms-banner-carousel {
  position: relative;
  aspect-ratio: var(--banner-aspect, 16 / 9);
  max-height: min(70vh, 720px);
  overflow: hidden;
}
.cms-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
  pointer-events: none;
}
.cms-banner-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.cms-banner-slide img,
.cms-banner-slide picture,
.cms-banner-slide .cms-banner-link,
.cms-banner-slide .cms-banner-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cms-banner-slide picture { display: block; }
.cms-banner-slide img {
  object-fit: cover;
}
.cms-banner-link { text-decoration: none; }

.cms-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(20px, 4vw, 56px);
  color: white;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 38%, rgba(0,0,0,0) 65%);
}
.cms-banner-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cms-banner-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  max-width: 760px;
}
.cms-banner-subtitle {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 620px;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.cms-banner-cta {
  align-self: flex-start;
  margin-top: 12px;
  padding: 12px 24px;
  background: var(--orange);
  color: white;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 20px -4px rgba(236,72,21,0.5);
}
.cms-banner-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -4px rgba(236,72,21,0.6);
}

.cms-banner-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.cms-banner-dot {
  width: 28px; height: 4px;
  border-radius: 99px;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background .2s, width .25s;
}
.cms-banner-dot.is-active {
  background: white;
  width: 40px;
}

/* Hero da home (extensões para overlay com texto sobreposto) */
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(20px, 4vw, 56px);
  color: white;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.hero-slide-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.hero-slide-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  max-width: 720px;
}
.hero-slide-subtitle {
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(255,255,255,0.9);
  max-width: 580px;
  margin: 0;
}
.hero-slide-cta {
  pointer-events: auto;
  align-self: flex-start;
  margin-top: 10px;
  padding: 11px 22px;
  background: var(--orange);
  color: white !important;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 6px 20px -4px rgba(236,72,21,0.5);
}

/* ── Imagem secundária (capítulo adicional) ── */
.blog-secondary-image {
  margin: 32px 0;
  border-radius: 14px;
  overflow: hidden;
  background: #F4F5F8;
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
}
.blog-secondary-image img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.blog-secondary-image figcaption {
  padding: 14px 22px;
  font-size: 14px;
  color: var(--steel);
  font-style: italic;
  text-align: center;
  background: white;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .blog-secondary-image img { aspect-ratio: 16 / 9; }
}

/* ── Template: Galeria ── */
.blog-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0;
}
.blog-gallery-item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #F4F5F8;
  border: 1px solid var(--line);
}
.blog-gallery-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.blog-gallery-item figcaption {
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--steel);
  font-style: italic;
  text-align: center;
  background: white;
}
@media (max-width: 720px) { .blog-gallery { grid-template-columns: 1fr; } }

/* ── Template: Tutorial ── */
.blog-steps {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.blog-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
}
.blog-step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-soft), var(--orange) 60%, var(--orange-deep));
  color: white;
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -4px rgba(236,72,21,0.45);
}
.blog-step-body h3 {
  margin: 4px 0 12px !important;
  padding-left: 0 !important;
  font-size: 20px !important;
}
.blog-step-body img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin: 6px 0 12px;
  background: #F4F5F8;
}
.blog-step-body p {
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: var(--graphite) !important;
}
@media (max-width: 600px) {
  .blog-step { grid-template-columns: 1fr; }
  .blog-step-num { width: 38px; height: 38px; font-size: 17px; }
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; gap: 48px; }
  .blog-sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .blog-toolbar { grid-template-columns: 1fr; }
  .blog-filter-row { justify-content: flex-start; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-media { min-height: 280px; aspect-ratio: 16/9; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-hero { height: clamp(330px, 44vh, 380px); }
  .blog-hero h1 { font-size: 36px; }
  .blog-hero p { font-size: 15px; }
  .blog-toolbar { padding: 14px; }
  .blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .blog-sidebar { grid-template-columns: 1fr; }
  .blog-featured h2 { font-size: 24px; }
  .blog-featured-body { padding: 26px; gap: 14px; }
  .blog-card h3 { font-size: 18px; }
  .blog-article-head { justify-items: start; padding-left: 4px; padding-right: 4px; text-align: left; }
  .blog-article h1 { font-size: clamp(30px, 10vw, 42px); }
  .blog-article-hero { margin-left: -18px; margin-right: -18px; width: calc(100% + 36px); border-radius: 0; box-shadow: none; }
  .blog-article-content { padding: 34px 0 10px; font-size: 16px; }
  .blog-article-content p { font-size: 16.5px; line-height: 1.75; }
  .blog-article-content > p:first-child::first-letter { font-size: 48px; margin-right: 8px; }
  .blog-article-content blockquote { padding: 18px 20px; font-size: 17px; }
}

/* ================================================================
   BLOG ADMIN
   ================================================================ */
.blog-admin-page {
  background: linear-gradient(180deg, #fff 0, var(--bg) 360px, #f3f2ed 100%);
}
.blog-admin-login {
  min-height: calc(100vh - 132px);
  display: grid;
  place-items: center;
  padding: 58px 18px;
}
.blog-admin-card {
  width: min(100%, 520px);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-lg);
}
.blog-admin-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.blog-admin-brand img {
  width: 150px;
}
.blog-admin-card h1 {
  margin-bottom: 8px;
  font-size: 30px;
  font-weight: 900;
}
.blog-admin-card > p,
.blog-admin-panel > p,
.blog-admin-note {
  color: var(--steel);
  line-height: 1.6;
}
.blog-admin-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.blog-admin-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.blog-admin-field label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.blog-admin-field input,
.blog-admin-field select,
.blog-admin-field textarea {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: white;
  color: var(--ink);
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.blog-admin-field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
.blog-admin-field input:focus,
.blog-admin-field select:focus,
.blog-admin-field textarea:focus {
  border-color: var(--orange);
  background: #fffbf9;
  box-shadow: 0 0 0 4px rgba(236,72,21,0.12);
}
.blog-admin-feedback {
  min-height: 22px;
  color: #9b1c10;
  font-size: 13px;
  font-weight: 800;
}
.blog-admin-feedback.is-success {
  color: #168447;
}
.blog-admin-app {
  padding: 46px 0 80px;
}
.blog-admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}
.blog-admin-top h1 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
}
.blog-admin-top p {
  color: var(--steel);
}
.blog-admin-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}
.blog-admin-panel {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-sm);
}
.blog-admin-panel h2 {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 900;
}
.blog-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.blog-admin-field-full {
  grid-column: 1 / -1;
}
.blog-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.blog-admin-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.blog-admin-post {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.blog-admin-post img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--mist);
}
.blog-admin-post h3 {
  font-size: 15px;
  line-height: 1.35;
}
.blog-admin-post p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.blog-admin-post-actions {
  display: flex;
  gap: 8px;
}
.blog-admin-mini {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: white;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.blog-admin-mini:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.blog-admin-mini.is-danger:hover {
  border-color: #9b1c10;
  color: #9b1c10;
}
.blog-admin-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: rgba(22,132,71,0.12);
  color: #168447;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-admin-status.is-draft {
  background: rgba(90,98,112,0.12);
  color: var(--steel);
}
.blog-admin-note {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bone);
  font-size: 13px;
}

/* ================================================================
   ADMIN
   ================================================================ */
.admin-page {
  background: #f4f5f7;
}
.admin-root {
  min-height: 100vh;
}
.admin-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: 24px;
  background: var(--black);
  color: white;
}
.admin-brand {
  display: inline-flex;
  width: fit-content;
  padding: 10px 0;
}
.admin-brand img {
  width: 156px;
  filter: brightness(0) invert(1);
}
.admin-nav {
  display: grid;
  align-content: start;
  gap: 8px;
}
.admin-nav button,
.admin-quick a,
.admin-quick button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius);
  color: rgba(255,255,255,0.72);
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  transition: background 0.2s, color 0.2s;
}
.admin-nav button:hover,
.admin-nav button.is-active {
  background: rgba(255,255,255,0.1);
  color: white;
}
.admin-sidebar-foot {
  display: grid;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.68);
  font-size: 12px;
}
.admin-sidebar-foot strong {
  color: white;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.admin-main {
  min-width: 0;
  padding: 32px;
}
.admin-topbar,
.admin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}
.admin-topbar h1,
.admin-section-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
}
.admin-section-head h2 {
  font-size: clamp(24px, 3vw, 34px);
}
.admin-topbar p,
.admin-section-head p {
  color: var(--steel);
  max-width: 680px;
}
.admin-topbar-actions,
.admin-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-panel {
  min-width: 0;
}
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.admin-metrics article {
  min-height: 124px;
  display: grid;
  align-content: space-between;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-sm);
}
.admin-metrics span {
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-metrics strong {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 1;
}
.admin-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-quick a,
.admin-quick button {
  width: auto;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.admin-products-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 24px;
  align-items: start;
}
.admin-product-form,
.admin-list-panel,
.admin-settings-form,
.admin-panel[data-admin-panel="blog"] {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-sm);
}
.admin-search {
  margin-bottom: 16px;
}
.admin-list {
  display: grid;
  gap: 12px;
}
.admin-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.admin-row-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}
.admin-row img {
  width: 72px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--mist);
}
.admin-row-main {
  min-width: 0;
}
.admin-row-main h3 {
  font-size: 15px;
  line-height: 1.35;
}
.admin-row-main p,
.admin-row-main small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.admin-empty {
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--steel);
  background: white;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 1180px) {
  .admin-app,
  .admin-products-layout {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: static;
    height: auto;
  }
  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .admin-main,
  .admin-sidebar {
    padding: 20px;
  }
  .admin-topbar,
  .admin-section-head {
    flex-direction: column;
  }
  .admin-metrics {
    grid-template-columns: 1fr;
  }
  .admin-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .admin-row-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1120px) {
  .blog-layout,
  .blog-admin-shell {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .blog-hero {
    height: 370px;
  }
  .blog-toolbar {
    grid-template-columns: 1fr;
  }
  .blog-filter-row {
    justify-content: flex-start;
  }
  .blog-featured,
  .blog-grid,
  .blog-sidebar {
    grid-template-columns: 1fr;
  }
  .blog-featured-media {
    min-height: 220px;
  }
  .blog-featured-body,
  .blog-admin-card,
  .blog-admin-panel {
    padding: 24px;
  }
  .blog-admin-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .blog-admin-grid {
    grid-template-columns: 1fr;
  }
  .blog-admin-post {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .blog-admin-post-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .img-fade { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ================================================================
   ECOMMERCE UX — global polish (scroll progress, scroll-top, focus, image fade-in)
   ================================================================ */

/* Scroll progress bar — sticky at top */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(10,10,10,0.04);
  z-index: 200;
  pointer-events: none;
}
.scroll-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--orange-soft), var(--orange), var(--orange-deep));
  box-shadow: 0 0 12px rgba(236,72,21,0.45);
  transition: transform 0.08s linear;
}

/* Floating buttons stack — right side, bottom-up:
   24px:  whatsapp-float (60px)
   96px:  cart-float     (60px)
   168px: scroll-top-btn (46px)  */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 168px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -12px rgba(15,15,15,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 52;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.scroll-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: var(--ink);
  color: white;
  transform: translateY(-3px);
}
.scroll-top-btn:active {
  transform: translateY(-1px);
}
.scroll-top-btn svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .scroll-top-btn { right: 16px; bottom: 158px; width: 42px; height: 42px; }
}

/* Anti-flash for non-PT languages — hides nav text briefly until JS applies translation */
html[data-lang="en"]:not(.lang-ready) #primaryNav a,
html[data-lang="es"]:not(.lang-ready) #primaryNav a,
html[data-lang="en"]:not(.lang-ready) .topbar .pill,
html[data-lang="es"]:not(.lang-ready) .topbar .pill {
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
html.lang-ready #primaryNav a,
html.lang-ready .topbar .pill {
  opacity: 1;
}

/* Image fade-in */
.img-fade {
  opacity: 0;
  filter: blur(6px);
  transform: scale(1.01);
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.img-fade.img-faded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* page-enter animation removed — it was applying opacity:0 to the body briefly,
   hiding position:fixed elements (floating buttons) on every page load. */

/* Better focus rings — accessible + on-brand */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 0.15s var(--ease);
}
:where(.btn, .icon-btn, .nav a, .product-card, .blog-card, .cat-card):focus-visible {
  outline-offset: 4px;
}

/* Smooth tap-highlight on mobile */
* { -webkit-tap-highlight-color: rgba(236,72,21,0.16); }

/* Selection color */
::selection {
  background: rgba(236,72,21,0.22);
  color: var(--ink);
}

/* Hover affordance for product images and category cards */
.product-card .product-thumb,
.blog-card-media,
.blog-featured-media {
  background-color: var(--mist);
}
.product-card .product-thumb img {
  transition: transform 0.5s var(--ease);
}
.product-card:hover .product-thumb img {
  transform: scale(1.04);
}

/* Smooth nav link underline */
.nav a {
  position: relative;
}
.nav a:not(.active)::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: 6px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav a:not(.active):hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Cart badge pop animation when items are added */
@keyframes badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.icon-btn .badge.is-bumped {
  animation: badge-pop 0.4s var(--ease-bounce);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .section { padding: 78px 0; }
  .section-tight { padding: 62px 0; }
  .section-title, .cta-band h2, .map-info h2 { font-size: 36px; }
  .page-hero h1, .story-title, .hero-title { font-size: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .cat-rail { grid-template-columns: repeat(4, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .product-grid, .product-list { grid-template-columns: repeat(2, 1fr); }
  .culture-grid { grid-template-columns: repeat(2, 1fr); }
  .manifesto-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid, .about-history-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-grid { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .mvv-grid { grid-template-columns: 1fr; }
  .story-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .account-shell { grid-template-columns: 1fr; min-height: 0; }
  .account-aside { min-height: 260px; padding: 32px 28px; }
  .account-aside h2 { font-size: 26px; }
  .account-aside p { max-width: 100%; }
  .account-perks { grid-template-columns: 1fr 1fr; gap: 12px; }
  .account-aside-foot { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .container { padding: 0 18px; }
  .section { padding: 56px 0; }
  .section-tight { padding: 48px 0; }
  .section-title, .cta-band h2, .map-info h2 {
    max-width: calc(100vw - 72px);
    font-size: 26px;
    line-height: 1.14;
  }
  .page-hero h1, .story-title, .hero-title { font-size: 36px; line-height: 1.08; }
  .hero-sub, .story-text { font-size: 16px; }
  .topbar-info { gap: 14px; font-size: 12px; }
  .topbar .pill { display: none; }
  .topbar-inner { justify-content: center; padding: 8px 18px; }
  .topbar-social { display: none; }
  .topbar-info span:nth-child(3) { display: none; }
  .header-inner {
    position: relative;
    min-height: 64px;
    padding: 12px 18px;
    gap: 16px;
  }
  .brand img { height: 36px; }
  .header-actions {
    position: absolute;
    right: 18px;
    top: 50%;
    flex-shrink: 0;
    gap: 4px;
    transform: translateY(-50%);
  }
  .lang-switch {
    width: 62px;
    height: 38px;
  }
  .lang-switch svg {
    left: 9px;
    width: 15px;
    height: 15px;
  }
  .lang-switch select {
    padding-left: 27px;
    padding-right: 20px;
    border-radius: 8px;
    font-size: 11px;
    background:
      linear-gradient(45deg, transparent 50%, currentColor 50%) right 10px center / 4px 4px no-repeat,
      linear-gradient(135deg, currentColor 50%, transparent 50%) right 6px center / 4px 4px no-repeat,
      white;
  }
  .icon-btn { width: 38px; height: 38px; border-radius: 8px; }
  .icon-btn .badge { top: 3px; right: 3px; }
  .nav, .header-actions .icon-btn:not(.cart-btn):not(.menu-toggle) { display: none; }
  .header-actions .menu-toggle { display: inline-flex !important; }
  .nav.is-open {
    display: grid;
    position: fixed;
    inset: 64px 0 0 0;
    background: white;
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 32px;
    align-content: start;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    z-index: 99;
    box-shadow: 0 24px 50px -20px rgba(15,15,15,0.18);
    animation: navSlideDown 0.32s var(--ease);
  }
  .nav.is-open a {
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 15px;
    min-height: 52px;
    display: flex;
    align-items: center;
  }
  .nav.is-open a.active {
    color: var(--orange);
    background: rgba(236,72,21,0.06);
    padding-left: 12px;
    margin-left: -12px;
    margin-right: -12px;
    padding-right: 12px;
  }
  .nav.is-open a.active::after { display: none; }
  .hero-caption-inner { margin-left: 24px; padding: 0; max-width: 100%; padding-right: 24px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { padding: 12px 20px; font-size: 14px; }
  .hero-controls { display: none; }
  .hero-dots { left: 18px; bottom: 14px; }
  .cat-rail { grid-template-columns: repeat(3, 1fr); }
  .product-grid, .product-list { grid-template-columns: 1fr; }
  .product-list.is-list .product-card {
    display: flex;
    grid-template-columns: none;
    min-height: 0;
  }
  .product-list.is-list .product-thumb {
    aspect-ratio: 4/3;
    min-height: 0;
  }
  .product-body { padding: 20px; }
  .product-foot { align-items: flex-end; gap: 14px; }
  .culture-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .story-stats { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: start; gap: 18px; }
  .cta-side, .calc-card, .calc-result { padding: 24px; }
  .whatsapp-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .cart-float { width: 54px; height: 54px; right: 16px; bottom: 82px; }
  .account-modal { padding: 12px; align-items: stretch; }
  .account-panel { max-height: calc(100vh - 24px); border-radius: 16px; }
  .account-aside, .account-main { padding: 24px; }
  .account-aside h2 { font-size: 24px; max-width: calc(100vw - 92px); }
  .account-aside-brand { font-size: 12px; }
  .account-perks { grid-template-columns: 1fr; gap: 10px; }
  .account-perks div { font-size: 13px; }
  .account-main-head h3 { font-size: 22px; }
  .account-tab { font-size: 13px; min-height: 42px; }
  .account-grid,
  .account-grid-3 { grid-template-columns: 1fr; }
  .account-status { align-items: flex-start; flex-direction: column; }
  .account-status-actions { width: 100%; justify-content: space-between; }
  .shop-search {
    align-items: stretch;
    flex-wrap: wrap;
    width: 320px;
    max-width: calc(100vw - 60px);
    padding: 14px;
    gap: 10px;
    overflow: hidden;
  }
  .shop-search svg.s-ico { margin: 12px 0 0 6px; }
  .shop-search input {
    min-width: 0;
    max-width: calc(100vw - 120px);
    flex: 1 1 calc(100% - 42px);
    padding: 10px 0;
  }
  .shop-search .btn {
    width: calc(100vw - 88px);
    max-width: calc(100vw - 88px);
  }
  .mobile-filter-btn, .shop-toolbar { width: 320px; max-width: calc(100vw - 60px); }
  .shop-toolbar { align-items: stretch; overflow: hidden; }
  .toolbar-right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .shop-sort { flex: 1 1 100%; justify-content: space-between; }
  .shop-sort select { min-width: 170px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .story-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cat-card { padding: 22px 12px; }
  .cat-icon { width: 58px; height: 58px; }
  .page-hero { height: 320px; }
  .cart-drawer { width: 100%; }
}

/* ================================================================
   RESPONSIVE — Mobile system
   ----------------------------------------------------------------
   Breakpoints
   - 1024px : tablet (já tratado acima onde necessário)
   - 900px  : tablet pequeno / landscape phone
   - 720px  : mobile (default mobile rules)
   - 640px  : phone grande / phablet
   - 480px  : phone padrão
   - 380px  : phone pequeno (iPhone SE, compactos)
   - landscape phones: ajustes específicos
   ================================================================ */

/* ----------------------------------------------------------------
   MOBILE NAV — Bolinha flutuante + painel (substitui o header)
   ---------------------------------------------------------------- */

/* Bolinha flutuante do menu (hidden por default; aparece só em mobile) */
.mobile-menu-fab {
  display: none;
  position: fixed;
  right: 14px;
  /* Stack: WhatsApp (base) -> Carrinho -> Menu (topo) */
  bottom: calc(138px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2B2F36 0%, #15191F 60%, #0A0A0A 100%);
  color: white;
  align-items: center;
  justify-content: center;
  z-index: 60;
  border: 0;
  cursor: pointer;
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s var(--ease);
}
.mobile-menu-fab:hover { transform: scale(1.06); }
.mobile-menu-fab:active { transform: scale(0.98); }
.mobile-menu-fab svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s var(--ease);
}
.mobile-menu-fab[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Painel mobile (drawer bottom sheet) */
.mobile-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.mobile-panel.is-open { display: block; pointer-events: auto; }
.mobile-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.mobile-panel.is-open .mobile-panel-backdrop { opacity: 1; }
.mobile-panel-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  background: white;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -24px 60px -16px rgba(0,0,0,0.4);
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-panel.is-open .mobile-panel-sheet { transform: translateY(0); }
.mobile-panel-grip {
  width: 44px;
  height: 4px;
  background: var(--line-strong);
  border-radius: 999px;
  margin: 8px auto 14px;
}
.mobile-panel-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.mobile-panel-brand img { height: 32px; width: auto; }
.mobile-panel-close {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--mist);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.mobile-panel-close:hover { background: var(--ink); color: white; transform: rotate(90deg); }
.mobile-panel-close svg { width: 16px; height: 16px; }
.mobile-panel-search {
  margin: 12px 0 6px;
  position: relative;
}
.mobile-panel-search input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bone);
  font-size: 16px;
  outline: none;
  color: var(--ink);
  font-family: var(--f-body);
  transition: border-color 0.2s, background 0.2s;
}
.mobile-panel-search input:focus {
  border-color: var(--orange);
  background: white;
}
.mobile-panel-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--muted);
  pointer-events: none;
}
.mobile-panel-nav {
  display: grid;
  margin-top: 8px;
}
.mobile-panel-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  min-height: 52px;
  transition: color 0.15s, padding-left 0.2s var(--ease);
}
.mobile-panel-nav a:last-child { border-bottom: 0; }
.mobile-panel-nav a:hover { color: var(--orange); padding-left: 8px; }
.mobile-panel-nav a.active {
  color: var(--orange);
  background: rgba(236,72,21,0.05);
  margin: 0 -20px;
  padding-left: 24px;
  padding-right: 24px;
}
.mobile-panel-nav a .ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bone);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.mobile-panel-nav a:hover .ico,
.mobile-panel-nav a.active .ico {
  background: rgba(236,72,21,0.12);
  color: var(--orange);
}
.mobile-panel-nav a .ico svg { width: 18px; height: 18px; }
.mobile-panel-nav a .arrow {
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s var(--ease), color 0.2s;
}
.mobile-panel-nav a .arrow svg { width: 14px; height: 14px; }
.mobile-panel-nav a:hover .arrow { color: var(--orange); transform: translateX(4px); }

.mobile-panel-foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mobile-panel-foot button,
.mobile-panel-foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: white;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.mobile-panel-foot button:hover,
.mobile-panel-foot a:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.mobile-panel-foot svg { width: 16px; height: 16px; }

@media (min-width: 721px) {
  .mobile-menu-fab,
  .mobile-panel { display: none !important; }
}

/* ================================================================
   <= 900px — tablet pequeno e abaixo
   Topbar enxuta (esconde itens não essenciais)
   ================================================================ */
@media (max-width: 900px) {
  .topbar-info span:last-child,
  .topbar .pill { display: none; }
  .topbar-inner { padding: 8px 18px; gap: 12px; }
}

/* ================================================================
   <= 720px — MOBILE (regra principal)
   ================================================================ */
@media (max-width: 720px) {
  /* ---------- Base ---------- */
  body { font-size: 15px; line-height: 1.6; }
  .container { padding: 0 18px; }

  /* Inputs sempre com fonte 16px para evitar zoom no iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px;
  }

  /* ---------- Seções e tipografia ---------- */
  .section { padding: 48px 0; }
  .section-tight { padding: 40px 0; }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }
  .section-head .right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .section-title,
  .cta-band h2,
  .map-info h2,
  .manifesto h2,
  .mvv-title {
    max-width: 100%;
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.14;
  }
  .section-sub { font-size: 14.5px; line-height: 1.55; max-width: 100%; }
  .page-hero h1,
  .story-title,
  .hero-title { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.08; }
  .hero-sub, .story-text { font-size: 15px; line-height: 1.55; }

  /* ---------- Topbar + Header inteiros sumem ---------- */
  .topbar { display: none !important; }
  .site-header { display: none !important; }

  /* Mostra a bolinha flutuante do menu */
  .mobile-menu-fab { display: inline-flex; }

  /* Lock body quando painel aberto */
  body.mobile-panel-open { overflow: hidden; }

  /* Adiciona um respiro no topo já que não há mais header */
  body { padding-top: 12px; }

  /* Páginas com page-hero ou hero não precisam do padding extra */
  body:has(.hero, .page-hero, .blog-hero) { padding-top: 0; }

  /* ---------- Buttons ---------- */
  .btn { padding: 13px 22px; font-size: 14.5px; min-height: 48px; }
  .btn-sm { padding: 10px 16px; font-size: 13px; min-height: 40px; }
  .btn-lg { padding: 15px 24px; font-size: 15px; }

  /* ---------- Hero carousel ---------- */
  .hero-caption { padding: 0 0 40px; }
  .hero-caption-inner {
    margin-left: 18px;
    padding-right: 18px;
    max-width: calc(100% - 36px);
  }
  .hero-eyebrow { font-size: 11px; padding: 6px 11px; }
  .hero-title { margin: 12px 0 10px; }
  .hero-sub { margin-bottom: 20px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { flex: 1 1 auto; padding: 13px 18px; font-size: 14px; min-height: 46px; }
  .hero-controls { display: none; }
  .hero-dots { left: 18px; right: 18px; bottom: 12px; gap: 6px; justify-content: center; }
  .hero-dot { width: 22px; height: 3px; }
  .hero-dot.is-active { width: 40px; }

  /* ---------- Stat strip ---------- */
  .stat-strip { padding: 18px 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-item {
    padding: 12px 12px;
    min-height: 64px;
    gap: 10px;
    border-radius: 10px;
  }
  .stat-icon { width: 38px; height: 38px; border-radius: 10px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-item h4 { font-size: 16px; line-height: 1.15; }
  .stat-item p { font-size: 11.5px; line-height: 1.3; }

  /* ---------- Categories rail ---------- */
  .cat-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .cat-card {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  .cat-icon { width: 44px; height: 44px; margin: 0; }
  .cat-card h4 { font-size: 12.5px; line-height: 1.15; margin: 0; }
  .cat-card p { font-size: 10.5px; line-height: 1.25; margin: 0; }

  /* ---------- Product cards ---------- */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-list { grid-template-columns: 1fr; gap: 14px; }
  .product-card { border-radius: 12px; }
  .product-body { padding: 14px; }
  .product-card h3 { font-size: 15px; }
  .product-card .product-cat { font-size: 10.5px; letter-spacing: 0.08em; }
  .product-price { font-size: 18px; }
  .product-foot { gap: 8px; flex-wrap: wrap; align-items: stretch; }
  .product-foot .btn { flex: 1 1 auto; min-height: 42px; }

  /* ---------- Product detail page ---------- */
  .detail-grid { gap: 24px; }
  .detail-art { aspect-ratio: 1 / 1; }
  .detail-info h1 { font-size: 26px; line-height: 1.15; }
  .detail-info > p { font-size: 14.5px; }
  .detail-price-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .detail-price-block #detailPayment { text-align: left !important; }
  .detail-price-block .product-price { font-size: 28px; }
  .detail-actions {
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .detail-actions .qty { margin-right: 0; }
  .detail-actions .btn-primary {
    flex: 1 1 calc(100% - 70px);
    min-width: 0;
  }
  .qty button { width: 44px; height: 48px; }
  .qty input { width: 44px; }
  .detail-options { flex-wrap: wrap; gap: 8px; }
  .detail-option { padding: 11px 16px; font-size: 13px; min-height: 42px; }

  /* ---------- Shop / Catálogo ---------- */
  .shop-catalog { padding-top: 16px; }
  .shop-grid { grid-template-columns: 1fr; gap: 18px; }
  .shop-side { position: static; }
  .shop-brand-head .section-title { font-size: 24px !important; }
  .shop-brand-head {
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }
  /* Reset width hacks dos estilos inline (forçavam 320px) */
  .shop-search,
  .shop-toolbar,
  .mobile-filter-btn {
    width: 100% !important;
    max-width: 100% !important;
  }
  .shop-search {
    padding: 6px 6px 6px 14px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  .shop-search svg.s-ico { margin: 0 !important; flex-shrink: 0; }
  .shop-search input {
    max-width: none !important;
    flex: 1 1 auto !important;
    padding: 12px 4px !important;
    font-size: 16px;
    min-width: 0;
  }
  .shop-search .btn {
    width: auto !important;
    max-width: none !important;
    padding: 10px 16px !important;
    font-size: 13px;
    min-height: 42px;
  }
  .shop-toolbar { padding: 12px 14px !important; gap: 10px !important; }
  .shop-count { font-size: 13px; }
  .shop-count strong { font-size: 16px; }
  .shop-sort {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    align-items: center;
    gap: 8px;
  }
  .shop-sort span { white-space: nowrap; font-size: 12px; }
  .shop-sort select {
    width: 100%;
    min-width: 0 !important;
    padding: 11px 36px 11px 12px;
    min-height: 42px;
  }
  .view-toggle { flex-shrink: 0; }
  .pagination { gap: 4px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
  .pagination button { width: 38px; height: 38px; font-size: 13px; min-height: 38px; }
  .active-filters { gap: 6px; }
  .active-chip { font-size: 11.5px; padding: 5px 6px 5px 10px; }
  .filter-check { min-height: 44px; padding: 11px 10px; }

  /* ---------- About page ---------- */
  .about-history-grid { gap: 0; }
  .about-history-grid .feature-image { display: none; }
  .about-history-item { padding: 18px; }

  /* ---------- Culture (sobre/index) ---------- */
  .culture-grid { gap: 14px; grid-template-columns: 1fr; }
  .culture-card { padding: 22px; }

  /* ---------- Manifesto ---------- */
  .manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .manifesto-list li { font-size: 14.5px; gap: 14px; padding: 12px 0; }
  .manifesto-list li::before { width: 22px; height: 22px; }
  .manifesto-claim { margin-top: 28px; padding: 20px; }
  .manifesto-claim strong { font-size: 18px; line-height: 1.3; }

  /* ---------- MVV ---------- */
  .mvv-head { gap: 22px; margin-bottom: 24px; }
  .mvv-cards { gap: 12px; }

  /* ---------- Map band ---------- */
  .map-grid { grid-template-columns: 1fr; }
  .map-info { padding: 32px 18px; text-align: left; }
  .map-frame { height: 280px; }
  .map-data { gap: 14px; }

  /* ---------- CTA band ---------- */
  .cta-band { padding: 56px 0 !important; }
  .cta-grid { gap: 28px; }
  .cta-band h2 { font-size: 26px !important; }
  .cta-band p { font-size: 14.5px; max-width: 100%; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 auto; }
  .cta-side { padding: 22px !important; border-radius: 14px; }
  .cta-side h4 { font-size: 13px; margin-bottom: 16px; }
  .cta-input { padding: 13px 14px; font-size: 16px; }

  /* ---------- Story (video band) ---------- */
  .story-inner { padding: 72px 16px; text-align: center; }
  .story-text { margin: 0 auto 24px; }
  .play-button { width: 64px; height: 64px; margin: 0 auto 20px; }
  .play-button svg { width: 24px; height: 24px; }
  .story-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 36px;
    padding-top: 32px;
  }
  .story-stat { text-align: center; }
  .story-stat h3 { font-size: 26px; }
  .story-stat p { font-size: 11px; letter-spacing: 0.08em; }

  /* ---------- Testimonials ---------- */
  .testi-grid { grid-template-columns: 1fr; gap: 14px; }
  .testi-card { padding: 22px 20px; }
  .testi-card blockquote { font-size: 14.5px; }

  /* ---------- Benefits v2 ---------- */
  .benefits-v2-grid { gap: 24px; }
  .benefits-v2-media { aspect-ratio: 4/5; }

  /* ---------- Awards / Trust pills ---------- */
  .awards-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ---------- Page hero (interior) ---------- */
  .page-hero { min-height: 280px; height: auto; padding: 80px 0 40px; }
  .page-hero-inner { padding: 0 18px 32px; }
  .page-hero h1 { font-size: clamp(28px, 9vw, 40px); }
  .page-hero p { font-size: 14.5px; }
  .crumb { font-size: 12px; flex-wrap: wrap; gap: 6px; }

  /* ---------- Blog page ---------- */
  .blog-hero { height: clamp(330px, 44vh, 370px); padding: 0; }
  .blog-hero h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .blog-hero p { font-size: 14.5px; }
  .blog-hero .page-hero-inner { padding: 0 18px clamp(30px, 7vw, 50px); }
  .blog-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
  }
  .blog-cats { flex-wrap: wrap; gap: 6px; }
  .blog-cat { font-size: 12px; padding: 9px 14px; min-height: 38px; }
  .blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .blog-card-media { aspect-ratio: 16/10; }

  /* ---------- Cálculo de dose (escopo do styles.css) ---------- */
  .calc-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .calc-card,
  .calc-result { padding: 22px !important; border-radius: 14px; }
  .calc-card h3,
  .calc-result h3 { font-size: 18px; }
  .calc-row { grid-template-columns: 1fr !important; gap: 10px; }
  .calc-actions { flex-direction: column; gap: 10px; }
  .calc-actions .btn { width: 100%; }
  .calc-input,
  .calc-select { padding: 13px 14px; font-size: 16px; }
  .calc-result { min-height: 0 !important; }
  .result-headline { font-size: 28px !important; }
  .result-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .result-foot .btn { width: 100%; }
  .calc-disclaimer { padding: 14px 16px; }
  .calc-disclaimer p { font-size: 12.5px; }
  .guide-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .guide-card { padding: 22px 20px; }

  /* ---------- Checkout (caso classes globais sejam usadas) ---------- */
  .checkout-grid,
  .checkout-layout,
  .cliente-grid,
  .login-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .checkout-side,
  .checkout-summary { position: static !important; }

  /* ---------- Footer ---------- */
  .site-footer { padding: 48px 0 24px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
    text-align: left;
  }
  .footer-brand p { max-width: 100%; font-size: 13.5px; }
  .footer-col h5 { font-size: 13px; margin-bottom: 12px; }
  .footer-col ul a { font-size: 13.5px; }
  .footer-col ul { gap: 8px; }
  .footer-social { margin-top: 16px; gap: 8px; }
  .footer-bottom {
    font-size: 12px;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
  }

  /* ---------- Floating stack (bottom→top): WA → Carrinho → Menu ---------- */
  .whatsapp-float {
    width: 52px !important;
    height: 52px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .cart-float {
    display: inline-flex !important;
    width: 52px !important;
    height: 52px !important;
    right: 14px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cart-float svg { width: 22px !important; height: 22px !important; }
  /* Menu FAB já posicionado em calc(138px + safe-area) por padrão */

  /* Scroll-top sobe para não colidir com FAB */
  .scroll-top-btn {
    right: 14px;
    bottom: calc(200px + env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px;
  }
  .toast {
    left: 14px;
    right: 14px;
    bottom: calc(250px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    text-align: center;
    font-size: 13px;
  }

  /* ---------- Cart drawer ---------- */
  .cart-drawer { width: 100%; max-width: 100%; }
  .cart-head { padding: 18px; }
  .cart-body { padding: 14px 18px; }
  .cart-foot { padding: 18px; }
  .cart-item { gap: 12px; padding: 12px 0; }
  .cart-item-thumb { width: 60px; height: 60px; }

  /* ---------- Account modal ---------- */
  .account-modal { padding: 0; align-items: stretch; }
  .account-panel {
    border-radius: 0;
    max-height: 100dvh;
    height: 100dvh;
    width: 100%;
  }
  .account-shell { grid-template-columns: 1fr; }
  .account-aside {
    padding: 24px 20px;
    min-height: 0;
  }
  .account-main { padding: 24px 20px; }
  .account-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .account-tab { white-space: nowrap; min-height: 44px; }
  .account-grid,
  .account-grid-3 { grid-template-columns: 1fr !important; }

  /* ---------- Reveal: mais snappy em mobile ---------- */
  .reveal {
    --reveal-y: 18px;
    --reveal-blur: 2px;
    --reveal-duration: 0.45s;
  }
  .stagger > * { transition-duration: 0.45s; }
}

/* ================================================================
   <= 640px — phablet / phone grande
   ================================================================ */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }
  .section-tight { padding: 36px 0; }
  .footer-grid { gap: 24px; }
  .product-grid { gap: 10px; }
  .cat-rail { gap: 8px; }
  .stat-grid { gap: 8px; }
}

/* ================================================================
   <= 480px — phone padrão
   ================================================================ */
@media (max-width: 480px) {
  body { font-size: 14.5px; }
  .container { padding: 0 14px; }

  /* Mobile panel/FAB já cobertos no bloco 720; aqui só ajustes finos */
  .mobile-panel-sheet { padding-left: 16px; padding-right: 16px; }
  .mobile-panel-nav a.active { margin: 0 -16px; padding-left: 20px; padding-right: 20px; }

  /* Sections */
  .section { padding: 40px 0; }
  .section-tight { padding: 32px 0; }
  .section-title,
  .cta-band h2,
  .mvv-title { font-size: clamp(22px, 6.5vw, 28px) !important; }

  /* Hero */
  .hero-caption { padding: 0 0 28px; }
  .hero-caption-inner { margin-left: 14px; padding-right: 14px; }
  .hero-actions { flex-direction: column; width: calc(100% - 28px); }
  .hero-actions .btn { width: 100%; }
  .hero-dots { bottom: 10px; }

  /* Stats: 2x2 enxuto */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-item {
    min-height: 64px;
    padding: 10px 12px;
    gap: 10px;
    align-items: center;
  }
  .stat-icon { width: 34px; height: 34px; border-radius: 9px; }
  .stat-icon svg { width: 16px; height: 16px; }
  .stat-item h4 { font-size: 14px; }
  .stat-item p { font-size: 10.5px; }

  /* Categorias: 3 colunas (compacto, 2 linhas) */
  .cat-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cat-card {
    aspect-ratio: 1 / 1;
    padding: 12px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .cat-icon { width: 38px; height: 38px; margin: 0; }
  .cat-card h4 { font-size: 12px; line-height: 1.15; margin: 0; }
  .cat-card p { font-size: 10px; line-height: 1.2; margin: 0; }

  /* Produtos: 1 coluna para leitura confortável */
  .product-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Detail page */
  .detail-info h1 { font-size: 22px; }
  .detail-price-block .product-price { font-size: 24px; }
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-actions .qty {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }
  .detail-actions .btn-primary,
  .detail-actions .btn-outline { width: 100%; flex: 1 1 100%; }

  /* Story / stats */
  .story-inner { padding: 56px 14px; }
  .story-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .story-stat h3 { font-size: 22px; }

  /* Footer */
  .footer-bottom { font-size: 11.5px; }

  /* Floats sem colidir */
  .cart-float { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  .scroll-top-btn { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }

  /* CTA */
  .cta-side h4 { font-size: 12.5px; }

  /* Page hero menor */
  .page-hero { min-height: 240px; height: auto; padding: 60px 0 32px; }

  /* Calc + Guide compactos */
  .calc-card,
  .calc-result { padding: 18px !important; }
  .result-headline { font-size: 24px !important; }
}

/* ================================================================
   <= 380px — phone pequeno (iPhone SE, compactos)
   ================================================================ */
@media (max-width: 380px) {
  body { font-size: 14px; }
  .container { padding: 0 12px; }

  /* FABs menores e stack reposicionada */
  .mobile-menu-fab {
    width: 48px; height: 48px; right: 12px;
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-menu-fab svg { width: 20px; height: 20px; }
  .whatsapp-float {
    width: 48px !important; height: 48px !important; right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .whatsapp-float svg { width: 24px; height: 24px; }
  .cart-float {
    width: 48px !important; height: 48px !important; right: 12px !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hero apertado */
  .hero-caption-inner { margin-left: 12px; padding-right: 12px; }

  /* Categorias: 3 colunas compactas (sem subtítulo) */
  .cat-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cat-card {
    aspect-ratio: 1 / 1;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    gap: 4px;
  }
  .cat-icon { width: 34px; height: 34px; flex: 0 0 34px; margin: 0; }
  .cat-card h4 { font-size: 11px; line-height: 1.1; margin: 0; }
  .cat-card p { display: none; }
  .cat-card p { font-size: 11px; }

  /* Stats: 1 coluna */
  .stat-grid { grid-template-columns: 1fr; gap: 8px; }
  .stat-item { min-height: 56px; }

  /* Section title menor */
  .section-title,
  .cta-band h2 { font-size: clamp(20px, 7vw, 26px) !important; }
}

/* ================================================================
   Landscape phones — evitar header dominar a tela
   ================================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .site-intro img { object-fit: contain; }
  .hero-slide a { aspect-ratio: auto; height: 80vh; min-height: 0; }
  .topbar { display: none; }
  .site-header { position: static; }
}

/* ================================================================
   Reduce motion: respeita preferência do usuário
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hero-slide img { transform: none !important; transition: none !important; }
}

/* ================================================================
   FLOATING BUTTONS — Sistema unificado (todas as páginas)
   ----------------------------------------------------------------
   Stack vertical no canto inferior direito, mesmo tamanho.
   Ordem (de baixo p/ cima): WhatsApp → Carrinho → Menu → ScrollTop
   ================================================================ */
:root {
  --fab-size: 56px;
  --fab-gap: 12px;
  --fab-right: 18px;
  --fab-bottom: 18px;
  /* Posições calculadas */
  --fab-pos-1: var(--fab-bottom);
  --fab-pos-2: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap));
  --fab-pos-3: calc(var(--fab-bottom) + (var(--fab-size) + var(--fab-gap)) * 2);
  --fab-pos-4: calc(var(--fab-bottom) + (var(--fab-size) + var(--fab-gap)) * 3);
}

.whatsapp-float,
.cart-float,
.mobile-menu-fab,
.scroll-top-btn {
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
  right: var(--fab-right) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s var(--ease) !important;
}

/* Stack vertical (bottom-up): WhatsApp → Carrinho → Menu → ScrollTop */
.whatsapp-float    { bottom: calc(var(--fab-pos-1) + env(safe-area-inset-bottom, 0px)) !important; }
.cart-float        { bottom: calc(var(--fab-pos-2) + env(safe-area-inset-bottom, 0px)) !important; }
.mobile-menu-fab   { bottom: calc(var(--fab-pos-3) + env(safe-area-inset-bottom, 0px)) !important; }
.scroll-top-btn    { bottom: calc(var(--fab-pos-4) + env(safe-area-inset-bottom, 0px)) !important; }

/* Tamanho dos ícones internos — proporcional ao botão */
.whatsapp-float svg { width: 28px !important; height: 28px !important; }
.cart-float svg     { width: 24px !important; height: 24px !important; }
.scroll-top-btn svg { width: 20px !important; height: 20px !important; }

/* ============ Mobile Menu FAB: bola BRANCA com ícone Champion ============ */
.mobile-menu-fab {
  background: white !important;
  color: var(--ink) !important;
  border: 1px solid rgba(15,15,15,0.06) !important;
  box-shadow:
    0 14px 28px -8px rgba(15,15,15,0.28),
    0 2px 6px rgba(15,15,15,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  overflow: hidden;
}
.mobile-menu-fab .mobile-menu-fab-icon {
  width: 60%;
  height: 60%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  transition: transform 0.3s var(--ease);
}
.mobile-menu-fab:hover .mobile-menu-fab-icon { transform: scale(1.08); }
.mobile-menu-fab[aria-expanded="true"] {
  background: var(--ink) !important;
}
.mobile-menu-fab[aria-expanded="true"] .mobile-menu-fab-icon {
  filter: brightness(0) invert(1);
}

/* Hover unificado */
.whatsapp-float:hover,
.cart-float:hover,
.mobile-menu-fab:hover,
.scroll-top-btn:hover { transform: scale(1.08) translateY(-2px) !important; }

/* Mobile menu só aparece em ≤720px */
.mobile-menu-fab { display: none !important; }
@media (max-width: 720px) {
  .mobile-menu-fab { display: inline-flex !important; }
}

/* Scroll-top reaparece só quando visível (mantém transform original) */
.scroll-top-btn { opacity: 0; pointer-events: none; }
.scroll-top-btn.is-visible { opacity: 1; pointer-events: auto; }

/* Toast e cart drawer não devem ser cobertos pelos FABs */
.toast {
  right: calc(var(--fab-right) + var(--fab-size) + 14px) !important;
  bottom: calc(var(--fab-pos-1) + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
}

/* Mobile: FABs ligeiramente menores e mais próximos da borda */
@media (max-width: 720px) {
  :root {
    --fab-size: 52px;
    --fab-gap: 10px;
    --fab-right: 14px;
    --fab-bottom: 14px;
  }
  .whatsapp-float svg { width: 26px !important; height: 26px !important; }
  .cart-float svg     { width: 22px !important; height: 22px !important; }
  .scroll-top-btn svg { width: 18px !important; height: 18px !important; }
  .toast {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(var(--fab-pos-4) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  :root {
    --fab-size: 48px;
    --fab-gap: 9px;
  }
  .whatsapp-float svg { width: 24px !important; height: 24px !important; }
  .cart-float svg     { width: 20px !important; height: 20px !important; }
  .scroll-top-btn svg { width: 16px !important; height: 16px !important; }
}

/* ================================================================
   GUIAS (páginas-pilar de SEO) — /guias
   ================================================================ */
.guide-hero {
  background: linear-gradient(135deg, #0f1115 0%, #1c2129 60%, #0a0a0a 100%);
  color: #fff;
  padding: 64px 0 56px;
}
.guide-hero .crumb { color: rgba(255,255,255,0.65); margin-bottom: 16px; }
.guide-hero .crumb a { color: rgba(255,255,255,0.65); }
.guide-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; max-width: 820px; }
.guide-hero p { color: rgba(255,255,255,0.82); font-size: 18px; margin-top: 14px; max-width: 720px; }
.guide-hero .section-eyebrow { color: var(--orange-soft, #ffb38a); }

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; gap: 32px; } }

.guide-article { max-width: 760px; }
.guide-article h2 { font-size: 26px; margin: 38px 0 14px; scroll-margin-top: 96px; }
.guide-article h3 { font-size: 19px; margin: 24px 0 10px; }
.guide-article p { color: var(--muted); line-height: 1.75; margin-bottom: 16px; }
.guide-article ul, .guide-article ol { color: var(--muted); line-height: 1.7; margin: 0 0 18px 20px; }
.guide-article li { margin-bottom: 8px; }
.guide-article strong { color: var(--ink); }
.guide-lead { font-size: 18px; color: var(--ink) !important; font-weight: 500; }

.guide-toc {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 8px 0 28px;
}
.guide-toc strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; }
.guide-toc ol { margin: 0 0 0 18px; color: var(--ink); }
.guide-toc a { color: var(--ink); }
.guide-toc a:hover { color: var(--orange); }

.guide-callout {
  border-left: 4px solid var(--orange);
  background: rgba(236,72,21,0.06);
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  margin: 22px 0;
}
.guide-callout p { margin: 0; color: var(--ink); }

/* Card de produto recomendado dentro do guia */
.guide-product {
  display: flex;
  gap: 18px;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  margin: 26px 0;
  box-shadow: var(--shadow-sm);
}
.guide-product img { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.guide-product-body { flex: 1; min-width: 0; }
.guide-product-body h4 { font-size: 17px; margin-bottom: 4px; }
.guide-product-body p { margin: 0 0 10px; font-size: 14px; }
@media (max-width: 520px) { .guide-product { flex-direction: column; align-items: flex-start; } }

/* Sidebar do guia */
.guide-aside { position: sticky; top: 96px; display: grid; gap: 18px; }
.guide-aside-box { background: var(--bone); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.guide-aside-box h3 { font-size: 15px; margin-bottom: 12px; }
.guide-aside-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.guide-aside-box a { color: var(--ink); font-size: 14px; font-weight: 500; }
.guide-aside-box a:hover { color: var(--orange); }
@media (max-width: 900px) { .guide-aside { position: static; } }

/* FAQ do guia (reusa visual do produto) */
.guide-faq { display: grid; gap: 10px; margin-top: 14px; }
.guide-faq details { border: 1px solid var(--line); border-radius: 12px; background: white; }
.guide-faq summary { cursor: pointer; padding: 16px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: "+"; color: var(--orange); font-size: 22px; line-height: 1; }
.guide-faq details[open] summary::after { content: "\2013"; }
.guide-faq .guide-faq-a { padding: 0 18px 18px; }
.guide-faq .guide-faq-a p { margin: 0; }

/* Grid do hub de guias */
.guide-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; }
.guide-hub-card {
  display: flex; flex-direction: column;
  background: white; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.guide-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 12px 30px rgba(0,0,0,0.08)); }
.guide-hub-card .guide-hub-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.guide-hub-card .guide-hub-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.guide-hub-card h3 { font-size: 18px; line-height: 1.25; }
.guide-hub-card p { color: var(--muted); font-size: 14px; line-height: 1.6; flex: 1; }
.guide-hub-card .guide-hub-link { color: var(--ink); font-weight: 600; font-size: 14px; margin-top: 4px; }
.guide-hub-card:hover .guide-hub-link { color: var(--orange); }