/* =====================================================================
   MARQUES ENERGIA SOLAR: DESIGN SYSTEM
   ===================================================================== */

@import url('assets/fonts/fonts.css'); /* fontes hospedadas aqui mesmo (LGPD: sem pedido ao Google) */

:root{
  /* superfícies */
  --bg: #08090a;
  --bg-alt: #0d0f10;
  --surface: #131516;
  --surface-2: #191c1e;
  --glass: rgba(255,255,255,0.035);
  --glass-strong: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.09);
  --border-soft: rgba(255,255,255,0.06);
  --border-orange: rgba(247,148,30,0.35);

  /* marca */
  --orange: #F7941E;
  --orange-light: #FFB157;
  --orange-deep: #B4590A;
  /* laranja quando usado como COR DE TEXTO: no tema escuro é o próprio laranja;
     no claro vira um laranja queimado (contraste >= 4.5:1 sobre o fundo claro) */
  --orange-text: #F7941E;
  --orange-text-soft: #FFB157;
  --white: #F4F4F3;
  --muted: #93938f;
  --muted-2: #8a8a85;
  --success: #34D399;
  --danger: #F0645A;

  /* tipografia */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* forma */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --max-width: 1220px;

  /* sombra */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-orange: 0 10px 30px -6px rgba(247,148,30,0.35);

  --ease: cubic-bezier(.22,1,.36,1);

  /* fundos semi-transparentes que não dá pra fazer só trocando --bg (header
     grudado no topo com blur, menu mobile por cima do conteúdo) — cada
     tema define o próprio valor, ver bloco do tema claro logo abaixo. */
  --header-bg: rgba(8,9,10,0.72);
  --nav-overlay-bg: rgba(10,11,12,0.98);
  --cart-bar-bg: rgba(19,21,22,0.95);
}

/* ===================== TEMA CLARO =====================
   Ativado via [data-theme="light"] no <html> (ver theme-toggle.js) —
   troca só as cores/sombras, o resto do design system (fontes, forma,
   espaçamento) é o mesmo dos dois temas. Sem ativação explícita (clique
   no botão, guardado no localStorage), o site continua escuro por
   padrão, igual sempre foi. */
:root[data-theme="light"]{
  --bg: #f8f6f2;
  --bg-alt: #f1eee7;
  --surface: #ffffff;
  --surface-2: #f2f0ea;
  --glass: rgba(20,15,5,0.03);
  --glass-strong: rgba(20,15,5,0.05);
  --border: rgba(20,15,5,0.12);
  --border-soft: rgba(20,15,5,0.08);
  --border-orange: rgba(180,89,10,0.3);

  --white: #1a1200;
  --muted: #5c574e;
  --muted-2: #6b655b;
  --orange-text: #9A4D07;
  --orange-text-soft: #8A4306;

  --header-bg: rgba(248,246,242,0.82);
  --nav-overlay-bg: rgba(255,253,249,0.98);
  --cart-bar-bg: rgba(255,255,255,0.95);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

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

img, svg{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select{ font-family: inherit; }

:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.text-orange{ color: var(--orange-text); }
.icon{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm{ width: 16px; height: 16px; }
.icon-lg{ width: 28px; height: 28px; }

/* ---------- textura de ruído global (sutileza premium) ---------- */
.noise-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== VIEWS / ROUTING ===================== */
.view{ display: none; }
.view.active{ display: block; animation: viewIn .5s var(--ease); }
@keyframes viewIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* scroll reveal */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal-delay-1.in-view{ transition-delay: .08s; }
.reveal-delay-2.in-view{ transition-delay: .16s; }
.reveal-delay-3.in-view{ transition-delay: .24s; }

/* ===================== BUTTONS ===================== */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s ease, background .2s ease;
  white-space: nowrap;
  overflow: hidden;
}
.btn-primary{
  background: linear-gradient(135deg, var(--orange-light), var(--orange) 55%, var(--orange-deep));
  color: #1a0f00;
  box-shadow: var(--shadow-orange);
}
.btn-primary::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -6px rgba(247,148,30,0.5); }
.btn-primary:hover::after{ transform: translateX(120%); }
.btn-outline{
  border-color: var(--border);
  color: var(--white);
  background: var(--glass);
  backdrop-filter: blur(6px);
}
.btn-outline:hover{ border-color: var(--border-orange); background: rgba(247,148,30,0.08); transform: translateY(-2px); }
.btn-ghost{
  background: transparent;
  color: var(--muted);
  border-color: var(--border-soft);
}
.btn-ghost:hover{ border-color: var(--border); color: var(--white); }
.btn-lg{ padding: 16px 32px; font-size: 1rem; }
.btn-block{ width: 100%; margin-top: 10px; }
.btn:disabled{ opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ===================== HEADER ===================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.site-header::after{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,148,30,0.5), transparent);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  gap: 16px;
}
.logo{
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.logo-mark-img{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border-orange), 0 4px 14px rgba(247,148,30,0.18);
}
/* Marca da Marques Promotora (tela de crédito): logo angular, não cabe bem
   no recorte circular usado pela Marques Energia Solar. */
.logo-mark-img-promotora{
  width: auto;
  height: 34px;
  border-radius: 0;
  box-shadow: none;
}
.logo-text{
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.15;
  color: var(--white);
  font-weight: 600;
}
.logo-text strong{
  display: block;
  color: var(--orange-text);
  font-size: 0.98rem;
}
.main-nav{
  display: none;
  align-items: center;
  gap: 30px;
}
.nav-link{
  position: relative;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color .15s ease;
  padding: 4px 0;
}
.nav-link::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--orange);
  transition: right .25s var(--ease);
}
.nav-link:hover{ color: var(--white); }
.nav-link:hover::after{ right: 0; }
.nav-link.active{ color: var(--orange-text); }
.nav-link.active::after{ right: 0; background: var(--orange); }
.nav-whatsapp{
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--orange-text);
  border: 1px solid var(--border-orange);
  padding: 8px 16px;
  border-radius: 999px;
}
.nav-whatsapp:hover{ background: rgba(247,148,30,0.08); }
.header-actions{
  display: flex;
  align-items: center;
  gap: 18px;
}
.cart-btn{
  position: relative;
  display: flex;
  align-items: center;
  color: var(--white);
  padding: 6px;
  transition: color .15s ease;
}
.cart-btn:hover{ color: var(--orange-text); }
.cart-badge{
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--orange);
  color: #1a0f00;
  font-size: 0.66rem;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cart-badge.bump{ transform: scale(1.35); }
.hamburger{
  padding: 6px;
  color: var(--white);
}

/* Botão de alternar tema — montado sozinho pelo theme-toggle.js dentro
   do primeiro container que achar (.header-actions no site,
   .admin-topbar-right no painel). */
.theme-toggle-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  color: var(--white);
  border: 1px solid var(--border);
  background: var(--glass);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.theme-toggle-btn:hover{ border-color: var(--border-orange); background: var(--glass-strong); transform: translateY(-1px); }
.theme-toggle-btn .icon{ width: 18px; height: 18px; }
.admin-topbar-right .theme-toggle-btn{ margin-right: 4px; }

/* Botão de alternar idioma — montado sozinho pelo i18n.js, do lado do
   botão de tema (mesmo container). Mostra a sigla do idioma pro qual vai
   trocar. */
.lang-toggle-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--white);
  border: 1px solid var(--border);
  background: var(--glass);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.lang-toggle-btn:hover{ border-color: var(--border-orange); background: var(--glass-strong); transform: translateY(-1px); }
.admin-topbar-right .lang-toggle-btn{ margin-right: 4px; }

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

.main-nav.open{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--nav-overlay-bg);
  backdrop-filter: blur(16px);
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  gap: 18px;
  align-items: flex-start;
}

/* ===================== HERO ===================== */
.hero{
  position: relative;
  padding: 64px 0 56px;
  overflow: hidden;
  isolation: isolate;
}
.hero-mesh{
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(38% 45% at 82% 12%, rgba(247,148,30,0.20), transparent 60%),
    radial-gradient(30% 35% at 8% 30%, rgba(247,148,30,0.10), transparent 65%),
    linear-gradient(180deg, var(--bg-alt), var(--bg) 65%);
}
.hero-inner{
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: center;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange-text-soft);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  background: var(--glass);
  border: 1px solid var(--border-orange);
  padding: 7px 14px;
  border-radius: 999px;
}
.eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(247,148,30,0.25);
}
.hero-text h1{
  font-size: 2.5rem;
  margin-bottom: 18px;
}
.hero-text h1 .line{ display: block; }
.hero-gradient-text{
  background: linear-gradient(100deg, var(--orange-light), var(--orange) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub{
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 480px;
  margin-bottom: 30px;
}
.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
.hero-note{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted-2);
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 480px;
  margin-top: -20px;
  margin-bottom: 10px;
}
.hero-note .icon{ flex-shrink: 0; margin-top: 1px; color: var(--muted-2); }
.hero-stats{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  max-width: 480px;
}
.hero-stat{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 10px;
}
.hero-stat .icon{ color: var(--orange-text); }
.hero-stat strong{ display: block; color: var(--white); font-size: 0.86rem; font-weight: 600; }

/* ---- bullets de modalidade (página de crédito) ---- */
.hero-bullets{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 4px 0 30px;
}
.hero-bullet{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}
.hero-bullet-icon{
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-text);
}

.hero-trust-line{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 18px;
}
.hero-trust-line .icon{ color: var(--muted-2); }

.hero-art{
  position: relative;
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-glow{
  position: absolute;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(247,148,30,0.35), transparent 68%);
  filter: blur(6px);
  animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ transform: scale(1); opacity: .8; }
  50%{ transform: scale(1.08); opacity: 1; }
}
.hero-logo-img{
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border-orange), var(--shadow-md);
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.hero-badge{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(19,21,22,0.85);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  animation: floatY 7s ease-in-out infinite;
}
:root[data-theme="light"] .hero-badge{ background: rgba(255,255,255,0.92); }
.hero-badge .icon{ color: var(--success); width:16px; height:16px; }
.hero-badge-1{ top: 6%; right: -6%; animation-delay: .3s; }
.hero-badge-2{ bottom: 8%; left: -8%; animation-delay: 1.1s; }
.hero-badge-3{ top: 38%; left: -10%; animation-delay: .7s; display: none; }
.hero-badge-4{ bottom: -4%; right: 2%; animation-delay: 1.5s; display: none; }

@media (min-width: 480px){
  .hero-badge-3, .hero-badge-4{ display: flex; }
}

/* Logo 3D da loja: moeda com espessura (camadas em Z) que balança sozinha, inclina com o
   mouse e gira ao arrastar (logo3d.js) — mesma mecânica do celular 3D da página de crédito. */
.logo-coin{
  position: relative;
  width: 260px; height: 260px;
  perspective: 1000px;
  animation: floatY 6s ease-in-out infinite;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.logo-coin.is-dragging{ cursor: grabbing; }
.coin-body{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-18deg);
  will-change: transform;
}
.coin-face, .coin-back{
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 3px #f7941e, 0 0 0 4px rgba(255,255,255,0.18);
}
.coin-face{ transform: translateZ(9px); }
.coin-back{ transform: translateZ(-9px) rotateY(180deg); }
.coin-face-img, .coin-back-img{ width: 100%; height: 100%; display: block; border-radius: 50%; }
.coin-back-img{ filter: brightness(.85); }
.coin-face::after{ /* reflexo que desliza conforme o giro */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.16) 48%, transparent 60%);
  background-size: 250% 100%;
  background-position: var(--sheen, 50%) 0;
}
.coin-layer{ /* borda: cada camada é um disco recuado em Z, formando a espessura */
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffb84d, #b8650a);
  transform: translateZ(calc(9px - var(--i) * 1.5px));
  pointer-events: none;
}
.coin-layer:nth-child(even){ background: linear-gradient(160deg, #e8860f, #9a5207); }
.coin-shadow{
  position: absolute; left: 50%; bottom: -26px; width: 62%; height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .logo-coin{ animation: none; }
}

/* ===================== MOCKUP DE CELULAR (página de crédito) ===================== */
.hero-phone-wrap{ max-width: 340px; padding: 30px 0; }
.hero-phone-bg{
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px dashed var(--border-orange);
  background: radial-gradient(circle, rgba(247,148,30,0.14), transparent 70%);
}
.hero-phone-bg::after{
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px dotted var(--border-orange);
  opacity: .6;
}

/* Celular 3D: .phone-mockup é o palco (perspectiva + flutuação); .phone-body gira
   em 3D (phone3d.js) e empilha camadas para dar espessura real às laterais. */
.phone-mockup{
  position: relative;
  width: 200px;
  height: 410px;
  perspective: 1100px;
  animation: floatY 6s ease-in-out infinite;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.phone-mockup.is-dragging{ cursor: grabbing; }
.phone-body{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -9px;
  transform: rotateX(6deg) rotateY(-20deg) rotateZ(3deg);
  will-change: transform;
}
.phone-face{
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1c1e20, #0a0b0c);
  border-radius: 36px;
  border: 6px solid #2d3033;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.phone-face::after{ /* reflexo que desliza conforme o giro */
  content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 48%, transparent 60%);
  background-size: 250% 100%;
  background-position: var(--sheen, 50%) 0;
}
.phone-layer{ /* espessura: cada camada é uma cópia do contorno, recuada em Z */
  position: absolute; inset: 0;
  border-radius: 36px;
  background: linear-gradient(160deg, #3b3f43, #1b1d1f);
  border: 1px solid #4a4e53;
  transform: translateZ(calc(var(--i) * -2px));
  pointer-events: none;
}
.phone-layer:nth-child(even){ background: linear-gradient(160deg, #34383c, #17191b); }
.phone-back{
  position: absolute; inset: 0;
  border-radius: 36px;
  background: linear-gradient(150deg, #2a2d31, #0f1011 70%);
  border: 6px solid #2d3033;
  transform: translateZ(-18px) rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.phone-camera{
  position: absolute; top: 14px; left: 14px;
  width: 56px; height: 56px; border-radius: 16px;
  background: #0c0d0e; border: 2px solid #3b3f43;
}
.phone-camera::before, .phone-camera::after{
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4b5bb0 0 12%, #10121a 40%, #000 70%);
  border: 2px solid #55595e;
}
.phone-camera::before{ top: 6px; left: 6px; }
.phone-camera::after{ top: 28px; left: 18px; }
.phone-logo-back{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,148,30,0.9), rgba(247,148,30,0.25) 70%);
  opacity: .85;
}
.phone-btn{ position: absolute; width: 4px; border-radius: 2px; background: #3b3f43; } /* botões laterais */
.phone-btn.pb-power{ right: -3px; top: 110px; height: 52px; transform: translateZ(-9px); }
.phone-btn.pb-vol1{ left: -3px; top: 96px; height: 34px; transform: translateZ(-9px); }
.phone-btn.pb-vol2{ left: -3px; top: 140px; height: 34px; transform: translateZ(-9px); }
.phone-shadow{
  position: absolute; left: 50%; bottom: -34px; width: 70%; height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .phone-mockup{ animation: none; }
}
.phone-notch{
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 14px;
  background: #0a0b0c;
  border-radius: 12px;
  z-index: 2;
}
.phone-screen{
  position: absolute;
  inset: 10px 4px 8px;
  background: linear-gradient(170deg, var(--surface), var(--bg));
  border-radius: 22px;
  padding: 28px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  overflow: hidden;
}
.phone-screen-title{ font-size: 0.66rem; color: var(--muted); font-family: var(--font-display); letter-spacing: 0.02em; }
.phone-check-circle{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--success);
  display: flex; align-items: center; justify-content: center;
  margin: 10px 0 6px;
}
.phone-check-circle .icon{ color: var(--success); width: 22px; height: 22px; }
.phone-status-text{ font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
.phone-status-text .accent{ color: var(--orange-text); display: block; }
.phone-value-label{ font-size: 0.6rem; color: var(--muted); margin-top: 8px; }
.phone-value{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--orange-text-soft); margin-bottom: 4px; }
.phone-checklist{ display: flex; flex-direction: column; gap: 6px; align-self: flex-start; margin: 8px 0 12px 2px; }
.phone-checklist li{ display: flex; align-items: center; gap: 6px; font-size: 0.62rem; color: var(--white); text-align: left; }
.phone-checklist .icon{ color: var(--success); width: 12px; height: 12px; flex-shrink: 0; }
.phone-cta-btn{
  margin-top: auto;
  width: 100%;
  background: var(--orange);
  color: #1a1200;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 10px;
  border-radius: 999px;
  text-align: center;
}

.phone-badge-1, .phone-badge-2, .phone-badge-3{ display: none; }
@media (min-width: 560px){
  .phone-badge-1, .phone-badge-2, .phone-badge-3{ display: flex; }
  .phone-badge-1{ top: 8%; left: -8%; animation-delay: .3s; }
  .phone-badge-2{ top: 46%; right: -12%; animation-delay: 1s; }
  .phone-badge-3{ bottom: 6%; right: -4%; animation-delay: 1.6s; }
}

@media (min-width: 960px){
  .hero-phone-wrap{ max-width: 380px; }
  .hero-phone-bg{ width: 340px; height: 340px; }
  .phone-mockup{ width: 230px; height: 470px; }
  .phone-notch{ width: 62px; height: 15px; }
  .phone-badge-1{ left: -16%; }
  .phone-badge-2{ right: -20%; }
  .phone-badge-3{ right: -10%; }
}

@media (min-width: 960px){
  .hero{ padding: 56px 0 64px; }
  /* gap fixo (em vez de space-between) evita tanto um vão vazio enorme em
     telas muito largas quanto a sobreposição dos badges flutuantes com o
     texto em telas de notebook (ex: 1366px), que é o que causava a
     "formatação bugada" só no desktop.
     align-items:flex-start garante que o texto (que costuma ser mais alto
     que o círculo) fique sempre colado no topo da seção, sem nenhum vão
     vertical de centralização acima do título; o hero-art usa align-self
     próprio para continuar centralizado ao lado do texto. */
  .hero-inner{ flex-direction: row; justify-content: flex-start; gap: 150px; text-align: left; align-items: flex-start; }
  .hero-text{ flex: 0 1 500px; }
  .hero-text h1{ font-size: 3.4rem; }
  /* align-self:flex-start (em vez de center) sobe o círculo pro mesmo nível
     do título, ocupando o espaço que antes ficava vazio acima dele,
     em vez de sobrar vão em cima e a arte "boiar" no meio da seção. */
  .hero-art{ flex-shrink: 0; align-self: flex-start; margin-top: 48px; }
  .hero-badge-1{ right: 0%; }
  .hero-badge-2{ left: 0%; }
  /* badge-3 fica na altura do meio do círculo (top:38%), onde ele é mais
     largo, por isso precisa de mais deslocamento pra não cair em cima
     da logo, diferente dos badges perto do topo/base onde o círculo já
     estreita. */
  .hero-badge-3{ left: -20%; }
  .hero-badge-4{ right: 6%; }
}

@media (min-width: 1400px){
  .hero-inner{ gap: 180px; }
}

/* ===================== STATS BAND ===================== */
.stats-band{
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-alt);
  padding: 36px 0;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item{ display: flex; flex-direction: column; gap: 4px; }
.stat-number{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--orange-text-soft);
  background: linear-gradient(100deg, var(--orange-light), var(--orange) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label{ font-size: 0.8rem; color: var(--muted); }

@media (min-width: 700px){ .stats-grid{ grid-template-columns: repeat(4, 1fr); } }

/* ===================== VALUE PROPS ===================== */
.value-props{ padding: 30px 0 60px; position: relative; }
.vp-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.vp-card{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.vp-card:hover{
  border-color: var(--border-orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.vp-icon-badge{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(247,148,30,0.22), rgba(247,148,30,0.05));
  border: 1px solid var(--border-orange);
  margin-bottom: 16px;
  color: var(--orange-text);
}
.vp-card h3{ font-size: 1.02rem; margin-bottom: 7px; font-weight: 600; }
.vp-card p{ color: var(--muted); font-size: 0.88rem; }

.tag-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  justify-content: center;
}
.tag{
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--glass);
}
.tag.tag-highlight{
  border-color: var(--border-orange);
  color: var(--orange-text-soft);
  background: rgba(247,148,30,0.1);
  font-weight: 700;
}
.frete-gratis-tag{ color: var(--success); font-weight: 700; }

@media (min-width: 700px){ .vp-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .vp-grid{ grid-template-columns: repeat(4, 1fr); } }

/* ===================== FEATURED PRODUCTS (home) ===================== */
.featured{ padding: 60px 0; }
.section-sub{
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: -30px;
  margin-bottom: 36px;
}
.featured .product-grid{ padding-bottom: 0; margin-bottom: 30px; }
.featured-cta{ text-align: center; }

/* ===================== TESTIMONIALS ===================== */
.testimonials{ padding: 64px 0; background: var(--bg-alt); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.testimonial-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.testimonial-card{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .25s ease, transform .25s var(--ease);
}
.testimonial-card:hover{ border-color: var(--border-orange); transform: translateY(-3px); }
.stars{ color: var(--orange-text); font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card p{ font-size: 0.92rem; color: var(--white); line-height: 1.6; margin-bottom: 18px; }
.testimonial-author{ display: flex; align-items: center; gap: 12px; }
.author-avatar{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(247,148,30,0.25), rgba(247,148,30,0.08));
  border: 1px solid var(--border-orange);
  color: var(--orange-text-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
  flex-shrink: 0;
}
.testimonial-author div{ display: flex; flex-direction: column; font-size: 0.82rem; }
.testimonial-author strong{ color: var(--white); font-weight: 600; }
.testimonial-author span{ color: var(--muted-2); font-size: 0.76rem; }

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

/* ===================== FAQ ===================== */
.faq{ padding: 64px 0; }
.faq-list{
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-item.open{ border-color: var(--border-orange); }
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--white);
}
.faq-chevron{ color: var(--orange-text); transition: transform .25s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-chevron{ transform: rotate(180deg); }
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
}
.faq-answer p{ padding: 0 18px 18px; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }

/* ===================== HOW IT WORKS ===================== */
.how-it-works{ padding: 64px 0; background: var(--bg-alt); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); position: relative; }
.section-kicker{
  display: block;
  text-align: center;
  color: var(--orange-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-title{
  font-size: 1.7rem;
  margin-bottom: 44px;
  text-align: center;
}
.steps-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  position: relative;
}
.step-card{ text-align: center; position: relative; }
.step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-light), var(--orange-deep));
  color: #1a0f00;
  font-weight: 700;
  font-family: var(--font-display);
  margin-bottom: 16px;
  box-shadow: var(--shadow-orange);
  position: relative;
  z-index: 1;
}
.step-card h3{ margin-bottom: 8px; font-size: 1.04rem; font-weight: 600; }
.step-card p{ color: var(--muted); font-size: 0.88rem; max-width: 260px; margin: 0 auto; }

@media (min-width: 700px){
  .steps-grid{ grid-template-columns: repeat(3, 1fr); }
  .steps-grid::before{
    content: "";
    position: absolute;
    top: 23px;
    left: 16%;
    right: 16%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--border-orange) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
}

/* ===================== HOME CTA ===================== */
.home-cta{ padding: 0; }
.home-cta-inner{
  margin: 60px auto;
  padding: 56px 40px;
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(60% 120% at 15% 0%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(120deg, var(--orange-deep), var(--orange) 55%, var(--orange-light));
  position: relative;
  overflow: hidden;
}
.home-cta-inner h2{ color: #1a0f00; font-size: 1.7rem; margin-bottom: 24px; max-width: 560px; margin-left:auto; margin-right:auto; }
.home-cta-inner .btn-primary{ --orange-text-soft: #FFB157; background: #16100a; color: var(--orange-text-soft); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.home-cta-inner .btn-primary::after{ background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 48%, transparent 66%); }

/* ===================== PAGE TITLES ===================== */
.page-kicker{ color: var(--orange-text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display:block; margin-top: 36px; }
.page-title{ font-size: 1.9rem; margin: 6px 0 6px; }
.page-sub{ color: var(--muted); margin-bottom: 30px; font-size: 0.95rem; }

/* ===================== BREADCRUMB ===================== */
.breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 0.78rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.breadcrumb a{ color: var(--muted); transition: color .15s ease; }
.breadcrumb a:hover{ color: var(--orange-text); }
.breadcrumb .crumb-sep{ color: var(--muted-2); }
.breadcrumb .crumb-current{ color: var(--orange-text-soft); font-weight: 600; }

/* ===================== TABS ===================== */
.tabs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 22px;
  -webkit-overflow-scrolling: touch;
}
.tab{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: all .2s var(--ease);
}
.tab .icon{ width: 17px; height: 17px; }
.tab:hover{ border-color: var(--border-orange); color: var(--white); }
.tab.active{
  background: linear-gradient(135deg, var(--orange-light), var(--orange-deep));
  color: #1a0f00;
  border-color: transparent;
  box-shadow: var(--shadow-orange);
}

/* ===================== LAYOUT DO CATÁLOGO (sidebar + grid) ===================== */
.filters-toggle-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.catalog-layout{
  display: block;
}

.filters-sidebar{
  display: none;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  height: fit-content;
}
.filters-sidebar.open{ display: block; }

.filter-group{ margin-bottom: 22px; }
.filter-group h3{
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-text);
  margin-bottom: 12px;
}
.filter-list{ display: flex; flex-direction: column; gap: 4px; }
.filter-option{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.filter-option:hover{ background: var(--glass-strong); color: var(--white); }
.filter-option input{ accent-color: var(--orange); width: 15px; height: 15px; flex-shrink: 0; }
.filter-option span:nth-child(2){ flex: 1; color: var(--white); }
.filter-count{ color: var(--muted-2); font-size: 0.78rem; }

@media (min-width: 900px){
  .filters-toggle-btn{ display: none; }
  .catalog-layout{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
  }
  .filters-sidebar{
    display: block;
    position: sticky;
    top: 90px;
  }
}

.search-box{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  color: var(--muted);
  transition: border-color .15s ease;
}
.search-box:focus-within{ border-color: var(--orange); }
.search-box input{
  flex: 1;
  background: none;
  border: none;
  color: var(--white);
  font-size: 0.92rem;
}
.search-box input:focus{ outline: none; }
.search-box input::placeholder{ color: var(--muted-2); }

.catalog-toolbar{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.sort-label{
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sort-label select{
  background: var(--surface);
  color: var(--white);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
}
.compare-hint{ font-size: 0.8rem; color: var(--muted-2); display:flex; align-items:center; gap:6px; }

@media (min-width: 700px){
  .catalog-toolbar{ flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ===================== PRODUCT GRID / CARD ===================== */
.product-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: 110px;
}
@media (min-width: 640px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px){ .product-grid{ grid-template-columns: repeat(3, 1fr); } }

.product-card{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.product-card:hover{ border-color: var(--border-orange); transform: translateY(-5px); box-shadow: var(--shadow-md); }

.product-image{
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f4f3f1, #e6e5e1);
  border-bottom: 1px solid var(--border-soft);
}
.product-image .icon{ width: 52px; height: 52px; color: #23231f; opacity: .5; stroke-width: 1.2; }
.product-image .product-photo{ width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.product-image .image-caption{
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.6rem;
  color: #6b6a63;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.spec-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--orange);
  color: #1a0f00;
  font-weight: 800;
  font-size: 0.68rem;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}
.launch-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  background: #14110c;
  color: var(--orange-text-soft);
  border: 1px solid var(--orange);
  font-weight: 800;
  font-size: 0.62rem;
  padding: 5px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.promo-badge{
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: var(--danger);
  color: #2a0603;
  font-weight: 800;
  font-size: 0.62rem;
  padding: 5px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-sm);
}
.catalog-load-error{
  grid-column: 1 / -1;
  background: rgba(240,100,90,0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.88rem;
  margin-bottom: 20px;
}
.price-original{
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted-2);
  text-decoration: line-through;
  font-family: var(--font-body);
}
.launch-tag{
  display: none;
  align-items: center;
  background: #14110c;
  color: var(--orange-text-soft);
  border: 1px solid var(--orange);
  font-weight: 800;
  font-size: 0.68rem;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-link{ display: block; color: inherit; }

.product-body{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-body-price{ padding-top: 0; padding-bottom: 6px; flex: 0; }
.product-brand{
  font-size: 0.72rem;
  color: var(--orange-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-name{ font-size: 1.03rem; font-weight: 600; font-family: var(--font-display); line-height: 1.3; }
.product-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.72rem;
  color: var(--muted-2);
}
.product-specs{
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}
.product-specs li{ display: flex; justify-content: space-between; gap: 8px; }
.product-specs li span:first-child{ color: var(--muted-2); }
.product-specs li span:last-child{ color: var(--white); font-weight: 500; text-align: right; }

.product-price{
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--white);
  margin-top: auto;
  font-family: var(--font-display);
}
.product-price small{
  display: block;
  font-size: 0.72rem;
  color: var(--muted-2);
  font-weight: 400;
  font-family: var(--font-body);
  margin-top: 2px;
}
.partner-commission-tag{
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--border-orange, rgba(247,148,30,0.35));
  background: rgba(247,148,30,0.08);
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 400; color: var(--orange-text-soft);
}
.partner-commission-tag strong{ color: var(--orange-text-soft); font-weight: 700; }
/* Escolha do tipo de estrutura do kit (página do produto) */
.estrutura-picker{ margin: 14px 0 6px; }
.estrutura-picker[hidden]{ display: none; }
.estrutura-label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.estrutura-options{ display:flex; flex-wrap:wrap; gap:8px; }
.estrutura-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--white); cursor:pointer; text-align:left; font:inherit; min-width:150px; transition: border-color .15s, background .15s; }
.estrutura-opt:hover{ border-color:var(--border-orange); }
.estrutura-opt.active{ border-color:var(--orange); background:rgba(247,148,30,.12); }
.estrutura-opt-nome{ font-size:.88rem; font-weight:600; }
.estrutura-opt-preco{ font-size:.8rem; color:var(--muted); }
.estrutura-opt.active .estrutura-opt-preco{ color:var(--orange-text-soft); }
.price-from{ font-size:.72rem; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-right:4px; }
.cart-item-estrutura{ display:block; font-size:.8rem; color:var(--orange-text-soft); }
.install-included-note{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success);
  margin-top: 6px;
  font-family: var(--font-body);
}
.install-included-note .icon{ width: 14px; height: 14px; }
.product-page-price + .install-included-note{ font-size: 0.85rem; margin-top: 8px; margin-bottom: 4px; }
.product-page-price + .install-included-note .icon{ width: 17px; height: 17px; }
.install-included-note[hidden]{ display: none; }

.product-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 18px 18px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}
.compare-check{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
}
.compare-check input{
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  display: grid; place-content: center;
  transition: all .15s ease;
}
.compare-check input::before{
  content: "";
  width: 9px; height: 9px;
  border-radius: 2px;
  transform: scale(0);
  transition: transform .15s ease;
  background: var(--orange);
}
.compare-check input:checked{ border-color: var(--orange); }
.compare-check input:checked::before{ transform: scale(1); }

.product-actions-row{ display: flex; align-items: center; gap: 10px; }
.product-actions-row .btn{ flex: 1; padding: 11px 14px; font-size: 0.84rem; }
.product-actions-row .compare-check{ flex-shrink: 0; }

#featuredGrid .compare-check{ display: none; }

/* ===================== COMPARE BAR ===================== */
.compare-bar{
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(19,21,22,0.9);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius);
  padding: 14px 18px;
  transform: translateY(140%);
  transition: transform .3s var(--ease);
  z-index: 90;
  box-shadow: var(--shadow-md);
  max-width: var(--max-width);
  margin: 0 auto;
}
.compare-bar.visible{ transform: translateY(0); }
.compare-bar-inner{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.compare-chips{ display: flex; gap: 8px; flex-wrap: wrap; }
.compare-chip{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-chip button{
  color: var(--muted);
  font-weight: 700;
  display: flex;
  width: 16px; height:16px;
  align-items: center; justify-content: center;
  border-radius: 50%;
}
.compare-chip button:hover{ background: rgba(255,255,255,0.1); color: var(--white); }
.compare-actions{ display: flex; gap: 10px; }

@media (min-width: 700px){
  .compare-bar-inner{ flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===================== COMPARE TABLE ===================== */
.compare-table-wrap{ overflow-x: auto; padding-bottom: 70px; border-radius: var(--radius); }
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.88rem;
  transition: color .15s ease;
}
.back-link:hover{ color: var(--orange-text); }
.compare-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
  margin-top: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.compare-table th, .compare-table td{
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding: 14px 16px;
  text-align: left;
  font-size: 0.87rem;
}
.compare-table th:last-child, .compare-table td:last-child{ border-right:none; }
.compare-table th{
  background: var(--surface);
  color: var(--orange-text-soft);
  font-weight: 600;
}
.compare-table tbody tr:nth-child(even){ background: rgba(255,255,255,0.015); }
.compare-table td.spec-label{
  color: var(--muted);
  font-weight: 600;
  background: var(--bg-alt);
  white-space: nowrap;
}
.compare-table .compare-product-header{ text-align: center; }
.compare-table .compare-product-header .mini-thumb{ margin: 0 auto 10px; }
.compare-table .compare-price{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--orange-text-soft);
  font-family: var(--font-display);
}

.mini-thumb{
  width: 64px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-thumb .icon{ width: 24px; height: 24px; color: var(--orange-text); }

.empty-compare{
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}
.empty-compare .btn{ margin-top: 18px; }

/* ===================== CART ===================== */
.cart-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 20px 0 70px;
}
.cart-items{ display: flex; flex-direction: column; gap: 14px; }
.empty-msg{
  color: var(--muted);
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.empty-msg a{ color: var(--orange-text); font-weight: 600; }

.cart-item{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  align-items: center;
  transition: border-color .2s ease;
}
.cart-item:hover{ border-color: var(--border-orange); }
.cart-item-thumb{
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-item-thumb .icon{ width: 24px; height: 24px; color: var(--orange-text); }
.cart-item-info{ display: flex; flex-direction: column; gap: 4px; }
.cart-item-name{ font-weight: 600; font-size: 0.94rem; }
.cart-item-cat{ font-size: 0.7rem; color: var(--orange-text); text-transform: uppercase; letter-spacing: 0.03em; }
.cart-item-price{ font-size: 0.83rem; color: var(--muted); }
.cart-item-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  grid-column: 1 / -1;
  gap: 10px;
  flex-wrap: wrap;
}
.qty-control{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px 6px;
}
.qty-control button{
  color: var(--orange-text);
  width: 22px; height: 22px;
  display: flex; align-items:center; justify-content:center;
  border-radius: 50%;
  transition: background .15s ease;
}
.qty-control button:hover{ background: rgba(247,148,30,0.12); }
.qty-control span{ min-width: 16px; text-align: center; font-weight: 600; font-size: 0.88rem; }
.remove-btn{
  display: flex; align-items: center; gap: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  transition: color .15s ease;
}
.remove-btn:hover{ color: var(--danger); }
.item-line-total{ font-weight: 700; font-family: var(--font-display); margin-left: auto; }

.cart-summary{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 90px;
}
.cart-summary h2{ font-size: 1.1rem; margin-bottom: 18px; font-weight: 600; }
.summary-row[hidden]{ display: none; }
.summary-row{
  display: flex;
  justify-content: space-between;
  font-size: 0.89rem;
  color: var(--muted);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.summary-total{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  border-bottom: none;
  font-family: var(--font-display);
}

@media (min-width: 900px){ .cart-layout{ grid-template-columns: 2fr 1fr; } }

/* ===================== CHECKOUT ===================== */
.checkout-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 20px 0 70px;
}
.form-section{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.form-section legend{
  display: flex; align-items: center; gap: 8px;
  color: var(--orange-text-soft);
  font-weight: 600;
  padding: 6px 14px;
  font-size: 0.95rem;
  font-family: var(--font-display);
  background: transparent;
  border: 1.5px solid var(--orange);
  border-radius: var(--radius-sm);
  opacity: 0.9;
}
.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}
.form-grid label{
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 0;
}
.form-grid input{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-grid input:focus{ outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,148,30,0.15); }
.col-span-2{ grid-column: 1 / -1; }
.field-hint{
  font-size: 0.74rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted-2);
}
.field-hint.field-hint-error{ color: var(--danger); }
.field-hint.field-hint-ok{ color: var(--success); }

@media (min-width: 640px){ .form-grid{ grid-template-columns: repeat(2, 1fr); } }

.payment-placeholder{
  background: linear-gradient(180deg, rgba(247,148,30,0.07), rgba(247,148,30,0.02));
  border: 1px dashed var(--border-orange);
  border-radius: var(--radius-sm);
  padding: 18px;
  font-size: 0.85rem;
  color: var(--muted);
}
.payment-placeholder-title{ display: flex; align-items:center; gap:8px; color: var(--orange-text-soft); font-weight: 700; margin-bottom: 8px; }
.payment-placeholder p{ margin-bottom: 8px; }
.payment-options-mock{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.payment-mock-option{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--white);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease;
}
.payment-mock-option:has(input:checked){ border-color: var(--orange); background: rgba(247,148,30,0.08); }
.payment-mock-option .icon{ color: var(--orange-text); width: 17px; height: 17px; }
.payment-mock-hint{ color: var(--muted-2); font-size: 0.76rem; font-weight: 400; }

.payment-installments{ margin-top: 14px; }
.payment-installments label{
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.payment-installments select{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: normal;
}
.payment-installments select:focus{ outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,148,30,0.15); }

.checkout-summary{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  height: fit-content;
  position: sticky;
  top: 90px;
}
.checkout-summary h2{ font-size: 1.05rem; margin-bottom: 16px; font-weight: 600; }

.checkout-partner-box{
  background: rgba(247,148,30,0.08);
  border: 1px solid var(--border-orange, rgba(247,148,30,0.35));
  border-radius: calc(var(--radius) - 4px);
  padding: 16px;
  margin-bottom: 18px;
}
.checkout-partner-box[hidden]{ display: none; }
.checkout-partner-head{ display: flex; align-items: center; gap: 8px; color: var(--orange-text-soft); margin-bottom: 4px; }
.checkout-partner-box p{ font-size: 0.82rem; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.checkout-partner-tiers{ display: grid; gap: 8px; margin-bottom: 12px; }
.checkout-partner-tier{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border-soft); background: var(--surface);
  font-size: 0.85rem; cursor: pointer;
}
.checkout-partner-tier:has(input:checked){ border-color: var(--orange); background: rgba(247,148,30,0.12); }
.checkout-partner-tier input{ margin-right: 8px; }
.checkout-partner-tier span{ flex: 1; color: var(--white); }
.checkout-partner-tier small{ color: var(--muted); }
.checkout-partner-commission{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  font-size: 0.78rem !important; color: var(--muted) !important; margin: 0 !important;
}
.checkout-partner-commission strong{ font-size: 0.85rem; color: var(--success); }
.checkout-partner-commission span{ color: var(--muted); }
.checkout-items-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  max-height: 240px;
  overflow-y: auto;
}
.checkout-item-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 8px;
}
.checkout-parcelamento{ font-size: 0.8rem; color: var(--orange-text-soft); text-align: right; margin-top: -8px; margin-bottom: 4px; }
.checkout-note{ font-size: 0.76rem; color: var(--muted-2); margin-top: 12px; text-align: center; }
.checkout-error{
  font-size: 0.82rem;
  color: var(--danger);
  background: rgba(240,100,90,0.1);
  border: 1px solid rgba(240,100,90,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 12px;
  text-align: center;
}

@media (min-width: 950px){ .checkout-layout{ grid-template-columns: 2fr 1fr; align-items: start; } }

/* ===================== CONFIRMATION ===================== */
.confirmation-box{
  text-align: center;
  padding: 90px 20px 110px;
  max-width: 560px;
}
.confirmation-icon{
  width: 76px; height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,211,153,0.18), transparent 70%);
  border: 1px solid rgba(52,211,153,0.4);
  display: flex; align-items: center; justify-content: center;
  animation: popIn .5s var(--ease);
}
.confirmation-icon .icon{ width: 36px; height:36px; color: var(--success); }
@keyframes popIn{ from{ transform: scale(.5); opacity:0; } to{ transform: scale(1); opacity:1; } }
.confirmation-box h1{ font-size: 1.7rem; margin-bottom: 16px; }
.confirmation-box p{ color: var(--muted); margin-bottom: 10px; }
.order-number-chip{
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border-orange);
  color: var(--orange-text-soft);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-display);
}
.confirmation-box a:not(.btn){ color: var(--orange-text); font-weight: 600; }
.confirmation-box .btn{ margin-top: 24px; }

/* ===================== SOLICITAÇÃO DE ANÁLISE DE CRÉDITO ===================== */
.credit-lead{ padding: 70px 0; }
.credit-sim-lead-cta{ margin-top: 18px; }

.lead-form{
  max-width: 780px;
  margin: 0 auto;
}
.lead-form-modalidade{
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}
.lead-form-modalidade select{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: normal;
}
.form-grid select{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-grid select:focus{ outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,148,30,0.15); }

.lead-form-consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 20px;
}
.lead-form-consent input{ margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--orange); }

.lead-form-error{
  font-size: 0.82rem;
  color: var(--danger);
  background: rgba(240,100,90,0.1);
  border: 1px solid rgba(240,100,90,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 14px;
  text-align: center;
}
.lead-form-note{ font-size: 0.76rem; color: var(--muted-2); margin-top: 12px; text-align: center; }

.lead-form-success{
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 20px 10px;
}
.lead-form-success h3{ font-size: 1.4rem; margin-bottom: 16px; }
.lead-form-success p{ color: var(--muted); margin-bottom: 10px; }
.lead-form-success-text{ max-width: 460px; margin-left: auto; margin-right: auto; }
.lead-form-success .btn{ margin-top: 18px; }

.fgts-auth-reopen-btn{
  display: block;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fgts-auth-reopen-btn:hover{ color: var(--orange-text-soft); }
.fgts-auth-reopen-btn-inline{
  margin: 18px auto 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange-text-soft);
}

/* ---- popup de autorização dos bancos parceiros (FGTS) ---- */
.fgts-auth-kicker{
  display: inline-block;
  color: var(--orange-text-soft);
  background: rgba(247,148,30,0.12);
  border: 1px solid var(--border-orange);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.modal #fgtsAuthTitle{ font-size: 1.3rem; margin-bottom: 12px; padding-right: 24px; }
.fgts-auth-intro{ color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin-bottom: 18px; }
.fgts-auth-steps{
  list-style: none;
  counter-reset: fgts-step;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
}
.fgts-auth-steps li{
  counter-increment: fgts-step;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.fgts-auth-steps li::before{
  content: counter(fgts-step);
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: #1a1200;
  font-weight: 700;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
}
.fgts-auth-step-body{
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--white);
  line-height: 1.5;
  padding-top: 2px;
}
.fgts-auth-step-body p{ margin: 0; }
.fgts-auth-steps li strong{ color: var(--orange-text-soft); }
.fgts-auth-banks{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
}
.fgts-auth-bank{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--white);
}
.fgts-auth-bank .icon{ color: var(--success); flex-shrink: 0; width: 18px; height: 18px; }
.fgts-auth-note{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 20px 0 20px;
}
.fgts-auth-note .icon{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--orange-text); }

/* ===================== MODAL ===================== */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(4,4,5,0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal-overlay.open{ display: flex; animation: fadeBg .2s ease; }
@keyframes fadeBg{ from{opacity:0;} to{opacity:1;} }
.modal{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-orange);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow-md);
  animation: modalIn .25s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
.modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--muted);
  width: 32px; height: 32px;
  display: flex; align-items:center; justify-content:center;
  border-radius: 50%;
  transition: all .15s ease;
}
.modal-close:hover{ color: var(--white); background: rgba(255,255,255,0.08); }

/* ===================== CONTACT STRIP (persistente) ===================== */
.contact-strip{
  background:
    radial-gradient(60% 160% at 90% 50%, rgba(247,148,30,0.14), transparent 65%),
    var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  padding: 44px 0;
}
.contact-strip-inner{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
}
.contact-strip-text h2{ font-size: 1.3rem; margin-bottom: 6px; }
.contact-strip-text p{ color: var(--muted); font-size: 0.9rem; }

@media (min-width: 800px){
  .contact-strip-inner{ flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===================== MOBILE CART BAR ===================== */
.mobile-cart-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cart-bar-bg);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-orange);
  padding: 12px 18px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  z-index: 95;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}
.mobile-cart-bar.visible{ display: flex; transform: translateY(0); }
.mobile-cart-info{ display: flex; flex-direction: column; font-size: 0.78rem; color: var(--muted); }
.mobile-cart-info strong{ font-size: 1rem; color: var(--white); font-family: var(--font-display); }
.mobile-cart-bar .btn{ padding: 10px 20px; font-size: 0.86rem; }

@media (min-width: 900px){
  .mobile-cart-bar{ display: none !important; }
}
@media (max-width: 899px){
  body.mobile-cart-visible{ padding-bottom: 78px; }
}

/* ===================== PÁGINA DE PRODUTO ===================== */
.product-page-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 26px 0 40px;
}
.gallery-main{ margin-bottom: 12px; }
.gallery-main .product-image{ aspect-ratio: 1 / 1; border-radius: var(--radius); border-bottom: none; }
.gallery-main .product-image .icon{ width: 88px; height: 88px; }
.gallery-thumbs{ display: flex; gap: 10px; }
.gallery-thumb{
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #f4f3f1, #e6e5e1);
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 6px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.gallery-thumb .icon{ width: 26px; height: 26px; color: #23231f; opacity: .5; }
.gallery-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb.active{ border-color: var(--orange); }

.product-page-tags{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.brand-chip{
  display: inline-block;
  border: 1px solid var(--border-orange);
  color: var(--orange-text-soft);
  background: rgba(247,148,30,0.08);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 999px;
}
.product-page-title{ font-size: 1.6rem; margin-bottom: 14px; line-height: 1.25; }
.product-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.product-page-price{
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.product-page-price small{ display: block; font-size: 0.78rem; color: var(--muted-2); font-weight: 400; font-family: var(--font-body); }
.product-page-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.specs-highlight-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.spec-highlight-item{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  padding: 12px 16px;
  font-size: 0.86rem;
}
.spec-highlight-label{ color: var(--muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; }
.spec-highlight-value{ color: var(--white); font-weight: 700; text-align: right; }

.product-page-extra{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: 30px;
  border-top: 1px solid var(--border-soft);
  padding-top: 30px;
}
.features-block, .warranty-block{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
}
.features-block h2, .warranty-block h2{ font-size: 1.05rem; margin-bottom: 16px; }
.features-list{ display: flex; flex-direction: column; gap: 12px; }
.features-list li{ display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--muted); }
.features-list .icon{ color: var(--success); margin-top: 2px; flex-shrink: 0; }
.bundle-item-thumb{
  width: 44px; height: 44px; flex-shrink: 0;
  object-fit: contain;
  background: linear-gradient(160deg, #f4f3f1, #e6e5e1);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.warranty-block p{ font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

@media (min-width: 860px){
  .product-page-layout{ grid-template-columns: 1fr 1fr; }
  .product-page-extra{ grid-template-columns: 3fr 2fr; }
  .specs-highlight-grid{ grid-template-columns: repeat(2, 1fr); gap: 1px; }
}

/* ===================== TEASER "MONTE SEU PROJETO" (home) ===================== */
.configurator-teaser{ padding: 10px 0 50px; }
.configurator-teaser-inner{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(247,148,30,0.1), rgba(247,148,30,0.02));
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.configurator-teaser-icon{
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--orange-light), var(--orange-deep));
  color: #1a0f00;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.configurator-teaser-text h2{ font-size: 1.3rem; margin-bottom: 8px; }
.configurator-teaser-text p{ color: var(--muted); font-size: 0.92rem; }

@media (min-width: 800px){
  .configurator-teaser-inner{ flex-direction: row; align-items: center; }
  .configurator-teaser-text{ flex: 1; }
}

/* ===================== MONTE SEU PROJETO: LANDING (métodos) ===================== */
.methods-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 24px;
  padding: 20px 0 16px;
}
.method-card{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.method-card:hover{ border-color: var(--border-orange); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.method-card-image{
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(8,9,10,0.15), rgba(8,9,10,0.85)),
    radial-gradient(circle at 30% 30%, rgba(247,148,30,0.25), transparent 60%),
    var(--bg-alt);
}
.method-card-image .icon{ position: absolute; top: 18px; left: 18px; color: var(--orange-text); opacity: .5; width: 34px; height: 34px; }
.method-card-title{ color: var(--white); font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.method-card-body{ padding: 22px; }
.method-card-body > p{ color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }
.method-card-body strong{ color: var(--white); }
.method-bullets{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.method-bullets li{ display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--muted); }
.method-bullets .icon{ color: var(--orange-text); margin-top: 2px; flex-shrink: 0; }
.methods-note{ text-align: center; color: var(--muted-2); font-size: 0.85rem; margin-bottom: 40px; }

/* ===================== WIZARD ===================== */
.wizard{ padding: 10px 0 60px; }
.wizard-cancel{
  display: flex; align-items: center; gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 26px;
  transition: color .15s ease;
}
.wizard-cancel:hover{ color: var(--orange-text); }

.wizard-stepper{
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
}
.wizard-stepper::before{
  content: "";
  position: absolute;
  top: 17px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border-soft);
  z-index: 0;
}
.wizard-step{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.wizard-step-circle{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-display);
  transition: all .25s ease;
}
.wizard-step-label{ font-size: 0.7rem; color: var(--muted-2); text-align: center; display: none; }
.wizard-step.active .wizard-step-circle{
  background: linear-gradient(135deg, var(--orange-light), var(--orange-deep));
  border-color: transparent;
  color: #1a0f00;
  box-shadow: var(--shadow-orange);
}
.wizard-step.active .wizard-step-label{ color: var(--orange-text-soft); font-weight: 600; }
.wizard-step.done .wizard-step-circle{ border-color: var(--orange); color: var(--orange-text); }
.wizard-step.done .wizard-step-circle .icon{ width: 16px; height: 16px; }

.wizard-progress-text{ text-align: center; color: var(--muted); font-size: 0.85rem; margin-bottom: 30px; }

@media (min-width: 600px){
  .wizard-step-label{ display: block; }
}

.wizard-step-title{ font-size: 1.3rem; margin-bottom: 8px; }
.wizard-step-sub{ color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }

.wizard-qty-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 320px;
}

.wizard-option-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px){ .wizard-option-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .wizard-option-grid{ grid-template-columns: repeat(3, 1fr); } }

.wizard-option-card{
  display: block;
  background: var(--surface);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
  position: relative;
}
.wizard-option-card:hover{ border-color: var(--border-orange); transform: translateY(-2px); }
.wizard-option-card.selected{ border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.wizard-option-card input{ position: absolute; opacity: 0; pointer-events: none; }
.wizard-option-card .product-image{ aspect-ratio: 16/10; }
.wizard-option-body{ padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.wizard-option-body h4{ font-size: 0.92rem; font-weight: 600; font-family: var(--font-display); }
.wizard-option-price{ font-weight: 700; color: var(--white); font-family: var(--font-display); margin-top: 4px; }
.recommended-tag{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 4px;
}
.recommended-tag .icon{ width: 13px; height: 13px; }

.wizard-summary-list{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.wizard-summary-row{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.wizard-summary-thumb{
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wizard-summary-thumb .icon{ width: 20px; height: 20px; color: var(--orange-text); }
.wizard-summary-info{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wizard-summary-cat{ font-size: 0.7rem; color: var(--orange-text); text-transform: uppercase; letter-spacing: 0.03em; }
.wizard-summary-name{ font-size: 0.88rem; font-weight: 600; }
.wizard-summary-price{ font-weight: 700; font-family: var(--font-display); }
.wizard-summary-total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(247,148,30,0.12), rgba(247,148,30,0.02));
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.wizard-nav{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}

/* ---------- itens fixos do wizard (cabo + conector padrão) ---------- */
.wizard-fixed-item{
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.wizard-fixed-item .product-image{
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  aspect-ratio: unset;
}
.wizard-fixed-item-body{ flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wizard-fixed-item-body h4{ font-size: 0.95rem; font-weight: 600; font-family: var(--font-display); }
.wizard-fixed-item-note{ font-size: 0.8rem; color: var(--muted); }
.wizard-fixed-item-hint{ font-size: 0.82rem; color: var(--muted-2); margin-top: 4px; }
.wizard-fixed-item-hint a{ color: var(--orange-text); text-decoration: underline; }
.wizard-fixed-item .qty-control{ flex-shrink: 0; }

.wizard-summary-kwp{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px dashed var(--border-orange);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--orange-text-soft);
}

/* ===================== NAV: BOTÃO COMPRAR ===================== */
.nav-buy-btn{
  padding: 9px 22px;
  font-size: 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ===================== DIMENSIONAMENTO (calculadora de kWp) ===================== */
.sizing-calc{ padding: 70px 0; }
.sizing-calc-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  max-width: 760px;
  margin: 0 auto;
}
.sizing-calc-inputs{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.sizing-calc-inputs label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  flex: 1;
  min-width: 180px;
}
.sizing-calc-inputs input{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--white);
  font-size: 0.95rem;
}
.sizing-calc-inputs input:focus{ border-color: var(--border-orange); }
.sizing-calc-or{ color: var(--muted-2); font-size: 0.8rem; padding-bottom: 12px; }
.sizing-calc-result[hidden]{ display: none; }
.sizing-calc-result{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
}
.sizing-result-item{ display: flex; flex-direction: column; gap: 2px; }
.sizing-result-value{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--orange-text); }
.sizing-result-label{ font-size: 0.78rem; color: var(--muted); }
.sizing-calc-formula{ margin-top: 20px; font-size: 0.76rem; color: var(--muted-2); line-height: 1.55; }

/* ===================== SIMULAÇÃO DE CRÉDITO ===================== */
.credit-sim{ padding: 70px 0; background: var(--bg-alt); }

.credit-layout{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 880px){
  .credit-layout{ flex-direction: row; align-items: flex-start; }
}

.credit-modes{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  flex-shrink: 0;
}
@media (min-width: 420px){
  .credit-modes{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px){
  .credit-modes{ grid-template-columns: 1fr; width: 280px; }
}

.credit-mode-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
  transition: all .15s var(--ease);
}
.credit-mode-card:hover{ border-color: var(--border-orange); }
.credit-mode-card.active{
  border-color: var(--orange);
  background: linear-gradient(135deg, rgba(247,148,30,0.14), rgba(247,148,30,0.03));
  box-shadow: 0 0 0 1px var(--orange) inset;
}

.credit-mode-icon{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
}
.credit-mode-icon .icon{ width: 20px; height: 20px; }
.credit-mode-card.active .credit-mode-icon{ background: var(--orange); color: #1a1200; }
.credit-mode-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.credit-mode-title{ font-size: 0.9rem; font-weight: 700; color: var(--white); font-family: var(--font-display); }
.credit-mode-tag{ font-size: 0.74rem; color: var(--muted); }
.credit-mode-card.active .credit-mode-tag{ color: var(--orange-text-soft); }

.credit-panel{ flex: 1; min-width: 0; }

.credit-sim-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.credit-sim-card-head{ display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.credit-mode-icon-lg{ width: 48px; height: 48px; background: var(--surface-2); }
.credit-mode-icon-lg .icon{ width: 22px; height: 22px; color: var(--orange-text); }
.credit-sim-card-head h3{ font-size: 1.2rem; margin-bottom: 6px; }
.credit-sim-card-head p{ color: var(--muted); font-size: 0.88rem; line-height: 1.55; max-width: 560px; }

.lead-sim-summary{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--white);
  background: var(--surface-2);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 20px;
  line-height: 1.5;
}
.lead-sim-summary .icon{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--orange-text); }
.lead-sim-summary strong{ color: var(--orange-text-soft); }
.lead-sim-summary a{ color: var(--orange-text); text-decoration: underline; margin-left: 4px; white-space: nowrap; }

.credit-sim-form{ display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
@media (min-width: 640px){ .credit-sim-form{ grid-template-columns: repeat(2,1fr); } }
.credit-sim-form label{ display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.credit-sim-form input, .credit-sim-form select{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--white);
  font-size: 0.95rem;
}
.credit-sim-form input:focus, .credit-sim-form select:focus{ border-color: var(--border-orange); }
.credit-field-hint{ font-size: 0.74rem; color: var(--muted-2); font-weight: 400; line-height: 1.4; }

/* Cartão de grupo da Compra Programada — bloco simples (não grid), porque
   reaproveitar .credit-sim-form aqui esticava o botão "Contratar" (único
   filho sobrando na 2ª coluna do grid) até virar uma elipse gigante. */
.consorcio-grupo-card{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
}
/* [hidden] tem a mesma especificidade da classe — sem essa regra, o
   display:flex abaixo vence o [hidden]{display:none} do navegador e o
   formulário fica visível o tempo todo, mesmo com o atributo "hidden". */
.consorcio-contratar-form[hidden]{ display: none; }
.consorcio-contratar-form{ display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.consorcio-contratar-form label{ display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.consorcio-contratar-form input{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--white);
  font-size: 0.95rem;
}
.consorcio-contratar-form input:focus{ border-color: var(--border-orange); }

.credit-sim-cta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.credit-sim-cta > p:first-child{ font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.5; }
.credit-sim-cta .btn{ flex-shrink: 0; }
@media (min-width: 560px){
  .credit-sim-cta{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.credit-sim-disclaimer{
  font-size: 0.76rem;
  color: var(--muted-2);
  line-height: 1.65;
  margin: 0;
  flex-basis: 100%;
  width: 100%;
}

.credit-value-props{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 44px;
}
@media (min-width: 768px){ .credit-value-props{ grid-template-columns: repeat(3, 1fr); } }
.credit-value-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 0.86rem;
  color: var(--white);
  line-height: 1.5;
}
.credit-value-item .icon{ width: 20px; height: 20px; flex-shrink: 0; color: var(--orange-text); margin-top: 1px; }

/* ===================== BADGES DE CONFIANÇA (trust band) ===================== */
.trust-band{ padding: 50px 0 70px; }
.trust-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 18px;
  text-align: center;
}
.trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.trust-item .icon{ color: var(--orange-text); width: 26px; height: 26px; }
.trust-item strong{ font-family: var(--font-display); font-size: 1.1rem; }
.trust-item span{ font-size: 0.8rem; color: var(--muted); }

/* ===================== WHATSAPP FAB ===================== */
.whatsapp-fab{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-light), var(--orange-deep));
  color: #1a0f00;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-orange);
  z-index: 96;
  transition: transform .2s var(--ease), bottom .25s ease;
  animation: fabPulse 2.6s ease-in-out infinite;
}
.whatsapp-fab:hover{ transform: scale(1.08); }
.whatsapp-fab .icon{ width: 26px; height: 26px; stroke-width: 2; }
@keyframes fabPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(247,148,30,0.45), var(--shadow-orange); }
  50%{ box-shadow: 0 0 0 10px rgba(247,148,30,0), var(--shadow-orange); }
}

body.mobile-cart-visible .whatsapp-fab{ bottom: 96px; }
body.compare-bar-visible .whatsapp-fab{ bottom: 110px; }
body.mobile-cart-visible.compare-bar-visible .whatsapp-fab{ bottom: 150px; }

@media (min-width: 900px){
  body.compare-bar-visible .whatsapp-fab{ bottom: 100px; }
}

/* ===================== FOOTER ===================== */
.site-footer{
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  padding: 50px 0 30px;
  margin-top: 50px;
  position: relative;
}
.site-footer::before{
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,148,30,0.5), transparent);
}
.footer-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.footer-brand{ display: flex; flex-direction: column; gap: 12px; }
.footer-brand-row{ display: flex; align-items: center; gap: 10px; }
.footer-logo-img{ width: 38px; height: 38px; border-radius: 50%; }
.footer-logo-img-promotora{ width: auto; height: 32px; border-radius: 0; }
.footer-brand p{ color: var(--muted); font-size: 0.85rem; }
.footer-social{ display: flex; gap: 10px; margin-top: 4px; }
.footer-social a{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items:center; justify-content:center;
  color: var(--muted);
  transition: all .2s ease;
}
.footer-social a:hover{ color: var(--orange-text); border-color: var(--border-orange); transform: translateY(-2px); }
.footer-contact h4{ color: var(--orange-text); font-size: 0.85rem; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-contact p{ display:flex; align-items:center; gap:8px; font-size: 0.87rem; color: var(--muted); margin-bottom: 10px; }
.footer-contact a:hover{ color: var(--orange-text); }
.footer-note{ font-size: 0.8rem; color: var(--muted-2); }
/* Acesso da equipe — de propósito discreto (não é pra chamar atenção do
   cliente), mas continua sendo um link de verdade, sempre no mesmo lugar. */
.footer-admin-link{
  color: var(--muted-2);
  opacity: 0.35;
  text-decoration: none;
  padding: 0 4px;
}
.footer-admin-link:hover{ opacity: 0.9; color: var(--orange-text-soft); }

@media (min-width: 700px){ .footer-inner{ grid-template-columns: repeat(3, 1fr); } }

/* ===================== TOAST ===================== */
.toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  border: 1px solid var(--border-orange);
  backdrop-filter: blur(10px);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: all .3s var(--ease);
  z-index: 300;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.toast .icon{ color: var(--success); width:17px; height:17px; }
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================== TELAS GRANDES (desktop XL) ===================== */
@media (min-width: 1400px){
  .container{ max-width: 1360px; }
  .hero-text h1{ font-size: 3.8rem; }
  .hero-sub{ font-size: 1.14rem; max-width: 520px; }
  .logo-coin{ width: 300px; height: 300px; }
  .product-grid{ grid-template-columns: repeat(4, 1fr); }
  .testimonial-grid{ grid-template-columns: repeat(3, 1fr); }
  .stats-grid{ gap: 40px; }
  .stat-number{ font-size: 2.3rem; }
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--orange-deep); }

/* ===================== PÁGINAS LEGAIS (Privacidade / Termos) ===================== */
.legal-page{ padding: 140px 0 100px; }
.legal-page .container{ max-width: 820px; }
.legal-page h1{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 8px;
}
.legal-page .legal-updated{ color: var(--muted); font-size: 0.9rem; margin-bottom: 40px; }
.legal-page h2{
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--orange-text-soft);
  margin: 36px 0 12px;
}
.legal-page p, .legal-page li{ color: var(--muted); font-size: 0.98rem; line-height: 1.75; }
.legal-page p{ margin-bottom: 14px; }
.legal-page ul{ padding-left: 22px; margin-bottom: 14px; }
.legal-page li{ margin-bottom: 8px; }
.legal-page strong{ color: var(--white); }
.legal-page a{ color: var(--orange-text-soft); }
.legal-page .legal-back{ margin-bottom: 30px; display: inline-flex; }

/* ---- checkbox de consentimento (formulários com dados pessoais) ---- */
.consent-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  cursor: pointer;
}
.consent-check input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
  flex-shrink: 0;
  cursor: pointer;
}
.consent-check span{ font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.consent-check a{ color: var(--orange-text-soft); }

/* ---- link de conta no header (Entrar / nome do cliente logado) ---- */
.nav-account-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nav-account-link:hover{ color: var(--white); border-color: var(--border); }
.nav-account-link-logged{ color: var(--orange-text-soft); border-color: var(--border-orange); background: rgba(247,148,30,0.06); }

/* =====================================================================
   CONTA DO CLIENTE (login / cadastro / minha conta)
   ===================================================================== */
.account-page{ padding: 140px 0 100px; position: relative; overflow: hidden; isolation: isolate; }
.account-page .container{ max-width: 900px; }
.account-page.account-narrow{ min-height: calc(100vh - 73px); display: flex; align-items: center; justify-content: center; }
.account-page.account-narrow .container{ max-width: 460px; margin: 0 auto; width: 100%; }

.account-card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.account-card h1{
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 6px;
}
.account-card h2{
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 6px;
}
.account-sub{ color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; }

.account-error, .account-success{
  display: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-bottom: 18px;
  line-height: 1.5;
}
.account-error{ background: rgba(240,100,90,0.1); border: 1px solid rgba(240,100,90,0.35); color: var(--danger); }
.account-success{ background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.35); color: var(--success); }
.account-error.show, .account-success.show{ display: block; }

.account-footer-link{ text-align: center; margin-top: 18px; font-size: 0.88rem; color: var(--muted); }
.account-footer-link a{ color: var(--orange-text-soft); font-weight: 600; }

.account-consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.account-consent input[type="checkbox"]{ margin-top: 3px; width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; cursor: pointer; }
.account-consent a{ color: var(--orange-text-soft); }

.account-panel{ display: none; }
.account-panel.active{ display: block; }

.account-list{ display: flex; flex-direction: column; gap: 12px; }
.account-list-item{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--bg-alt);
}
.account-list-item .item-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.account-list-item .item-number{ font-weight: 700; color: var(--white); font-family: var(--font-display); }
.account-list-item .item-date{ font-size: 0.78rem; color: var(--muted-2); }
.account-list-item .item-detail{ font-size: 0.85rem; color: var(--muted); }
.account-list-empty{ color: var(--muted); font-size: 0.9rem; padding: 30px 0; text-align: center; }

.account-status-badge{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(247,148,30,0.12);
  color: var(--orange-text-soft);
  border: 1px solid var(--border-orange);
  flex-shrink: 0;
}
.account-status-badge.status-neutral{ background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.account-status-badge.status-success{ background: rgba(52,211,153,0.12); color: var(--success); border-color: rgba(52,211,153,0.35); }
.account-status-badge.status-danger{ background: rgba(240,100,90,0.12); color: var(--danger); border-color: rgba(240,100,90,0.35); }
.account-status-badge.status-warning{ background: rgba(255,193,7,0.14); color: #ffd166; border-color: rgba(255,193,7,0.4); }

/* =====================================================================
   MINHA CONTA: layout tipo loja real (sidebar + conteúdo)
   ===================================================================== */
.account-shell{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
.account-sidebar{
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
}
.account-profile-card{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
}
.account-avatar{
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--orange-light), var(--orange-deep));
  color: #1a1200;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.account-profile-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-profile-info strong{ color: var(--white); font-size: 0.92rem; }
.account-profile-info span{ color: var(--muted-2); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-nav{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.account-nav-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.account-nav-btn:last-child{ border-bottom: none; }
.account-nav-btn:hover{ color: var(--white); background: var(--surface-2); }
.account-nav-btn.active{ color: var(--orange-text-soft); background: rgba(247,148,30,0.08); }
.account-nav-btn .icon{ width: 18px; height: 18px; flex-shrink: 0; }
.account-nav-logout{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.account-nav-logout:hover{ background: rgba(240,100,90,0.08); border-color: rgba(240,100,90,0.3); }
.account-nav-logout .icon{ width: 18px; height: 18px; }

.account-content{ min-width: 0; }

/* ---- cards de pedido/solicitação (estilo "acompanhar pedido") ---- */
.order-card{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
}
.order-card-head{ display: flex; align-items: center; gap: 12px; }
.order-card-icon{
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-text);
}
.order-card-icon .icon{ width: 18px; height: 18px; }
.order-card-head-info{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.order-card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.order-card-total{ color: var(--white); font-family: var(--font-display); font-size: 0.95rem; }

.order-card-alert{
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(240,100,90,0.12);
  border: 1px solid rgba(240,100,90,0.35);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 0.85rem;
  line-height: 1.4;
}
.order-card-note{
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Painel do parceiro: com vários pedidos/solicitações na lista, um cartão
   fraco demais confunde qual é qual — aqui ganham fundo próprio, borda
   mais forte e uma faixa lateral laranja pra ficar fácil escanear. */
#partnerOrdersList .order-card,
#partnerLeadsList .order-card{
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
#partnerOrdersList .order-card:last-child,
#partnerLeadsList .order-card:last-child{ margin-bottom: 0; }

.order-stepper{
  display: flex;
  align-items: flex-start;
  margin: 18px 2px 4px;
}
.order-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 76px;
}
.order-step-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
}
.order-step.done .order-step-dot{ background: var(--orange); border-color: var(--orange); }
.order-step.current .order-step-dot{ box-shadow: 0 0 0 3px rgba(247,148,30,0.25); }
.order-step-label{ font-size: 0.66rem; color: var(--muted-2); text-align: center; line-height: 1.3; }
.order-step.done .order-step-label{ color: var(--muted); }
.order-step.current .order-step-label{ color: var(--orange-text-soft); font-weight: 600; }
.order-step-line{
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: 5px;
}
.order-step-line.done{ background: var(--orange); }

@media (max-width: 860px){
  .account-shell{ grid-template-columns: 1fr; }
  .account-sidebar{ position: static; }
  .order-stepper{ overflow-x: auto; }
}

/* ---- login por biometria (entrar.html e Minha Conta > Segurança) ---- */
.passkey-login{ margin-top: 18px; }
.passkey-divider{ display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.8rem; margin-bottom: 14px; }
.passkey-divider::before, .passkey-divider::after{ content: ""; flex: 1; height: 1px; background: var(--border); }
.passkey-hint{ text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.passkey-list{ list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.passkey-list li{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.9rem; }
.passkey-list small{ color: var(--muted); }

/* ---- verificação em duas etapas (Minha Conta > Segurança) ---- */
.two-fa-status{ display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 16px; }
.two-fa-status-off{ color: var(--muted); }
.two-fa-status-off .icon{ color: var(--muted-2); }
.two-fa-status-on{ color: var(--success); }
.two-fa-status-on .icon{ color: var(--success); }
.two-fa-step{ font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.two-fa-code-label input{ max-width: 200px; letter-spacing: 0.1em; }
.two-fa-secret{
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
  word-break: break-all;
}
.two-fa-backup-codes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.two-fa-backup-code{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--white);
  letter-spacing: 0.03em;
}

/* =====================================================================
   PRÉVIA DO APP "CONTA DIGITAL MARQUES" (conta-digital-app.html)
   ===================================================================== */
.app-preview-body{ background: var(--bg); }
.app-preview-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 28px 20px 60px;
  position: relative;
  overflow: hidden;
}
.app-preview-page::before{
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  z-index: -1;
  background: radial-gradient(45% 60% at 50% 0%, rgba(247,148,30,0.14), transparent 65%);
}
.app-preview-topbar{
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.app-preview-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.app-preview-back:hover{ color: var(--white); }
.app-preview-tag{ margin-top: 0; }
.app-preview-cta{ margin-top: 6px; }

/* ---- moldura do celular (prévia do app, distinta do .phone-mockup do hero) ---- */
.app-phone-frame{
  width: 100%;
  max-width: 390px;
  aspect-ratio: 390 / 812;
  background: #050505;
  border: 10px solid #050505;
  border-radius: 46px;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-phone-notch{
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px;
  background: #050505;
  border-radius: 0 0 16px 16px;
  z-index: 5;
}
.app-phone-screen{
  flex: 1;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-alt), var(--bg) 60%);
  padding: 34px 16px 14px;
  scrollbar-width: none;
}
.app-phone-screen::-webkit-scrollbar{ display: none; }

.app-view{ display: none; }
.app-view.active{ display: block; animation: viewIn .35s var(--ease); }

.app-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.app-greeting{ display: flex; flex-direction: column; }
.app-greeting-hi{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--white); }
.app-greeting-sub{ font-size: 0.72rem; color: var(--muted-2); }
.app-icon-btn{
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}
.app-icon-btn-dot{
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 2px var(--surface-2);
}

.balance-card{
  background: linear-gradient(135deg, var(--orange-deep), var(--orange) 70%);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: #1a1200;
  margin-bottom: 16px;
  box-shadow: var(--shadow-orange);
}
.balance-card-head{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; font-weight: 600; opacity: 0.85;
  margin-bottom: 6px;
}
.balance-eye-btn{ color: #1a1200; opacity: 0.8; }
.balance-eye-btn:hover{ opacity: 1; }
.balance-card-value{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin-bottom: 12px; }
.balance-card-foot{
  display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 600; opacity: 0.85;
}

.app-quick-actions{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.app-quick-action{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 600; color: var(--muted);
}
.app-quick-action-icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-text);
}

.cashback-widget{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.cashback-widget-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cashback-widget-icon{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(52,211,153,0.12);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
}
.cashback-widget-head strong{ display: block; font-size: 0.82rem; color: var(--white); }
.cashback-widget-head span{ font-size: 0.72rem; color: var(--muted); }
.cashback-widget-bar{
  height: 6px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; margin-bottom: 8px;
}
.cashback-widget-bar span{ display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--success)); border-radius: 999px; }
.cashback-widget-note{ font-size: 0.7rem; color: var(--muted-2); line-height: 1.5; }

.app-section-title{ font-size: 0.82rem; color: var(--white); margin-bottom: 10px; }

.app-tx-list{ display: flex; flex-direction: column; gap: 2px; }
.app-tx{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.app-tx:last-child{ border-bottom: none; }
.app-tx-icon{
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.app-tx-icon-in{ color: var(--success); background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.3); }
.app-tx-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-tx-body strong{ font-size: 0.8rem; color: var(--white); font-weight: 600; }
.app-tx-body span{ font-size: 0.7rem; color: var(--muted-2); }
.app-tx-value{ font-size: 0.8rem; font-weight: 700; color: var(--white); flex-shrink: 0; }
.app-tx-value-in{ color: var(--success); }

.app-subview-head{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.app-subview-head strong{ font-family: var(--font-display); font-size: 1rem; color: var(--white); }
.app-back-btn{ background: var(--surface-2); }

.app-pix-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.app-pix-action{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 8px;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
}
.app-pix-action .icon{ color: var(--orange-text); }
.app-empty-note{ font-size: 0.76rem; color: var(--muted-2); line-height: 1.6; text-align: center; padding: 0 10px; }

.virtual-card{
  background: linear-gradient(135deg, #1c1e20, #0d0f10 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--white);
  margin-bottom: 18px;
  aspect-ratio: 16 / 9.5;
  display: flex; flex-direction: column; justify-content: space-between;
}
.virtual-card-top{ display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 700; }
.virtual-card-number{ font-size: 1.02rem; letter-spacing: 0.06em; font-family: var(--font-display); }
.virtual-card-bottom{ display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.03em; }

.app-toggle-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.84rem; color: var(--white);
}
.app-toggle{
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center;
  padding: 2px;
}
.app-toggle-dot{ width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .2s var(--ease), background .2s; }
.app-toggle-on{ background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.4); }
.app-toggle-on .app-toggle-dot{ background: var(--success); transform: translateX(16px); }

.app-bottom-nav{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-alt);
}
.app-bottom-nav.hidden{ display: none; }
.app-nav-btn{
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 12px;
  font-size: 0.62rem; font-weight: 600;
  color: var(--muted-2);
}
.app-nav-btn .icon{ color: var(--muted-2); }
.app-nav-btn.active{ color: var(--orange-text-soft); }
.app-nav-btn.active .icon{ color: var(--orange-text); }

/* ---- widget "rende todo dia" (home do app) ---- */
.yield-widget{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
}
.yield-widget-icon{
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(52,211,153,0.15);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
}
.yield-widget-text{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.yield-widget-text strong{ font-size: 0.76rem; color: var(--white); }
.yield-widget-text span{ font-size: 0.68rem; color: var(--muted-2); }

/* ---- linhas de link (tela Perfil) ---- */
.app-link-row{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.82rem; color: var(--white);
}
.app-link-row:last-child{ border-bottom: none; }
.app-link-row .icon{ color: var(--muted-2); width: 16px; height: 16px; }
.app-link-row:hover .icon{ color: var(--orange-text); }

/* ---- onboarding (prévia "como funciona abrir a conta") ---- */
.onboarding-progress{ display: flex; gap: 5px; margin: 4px 0 6px; }
.onboarding-progress span{ flex: 1; height: 4px; border-radius: 999px; background: var(--surface-2); }
.onboarding-progress span.done{ background: var(--orange); }
.onboarding-step-label{ font-size: 0.72rem; color: var(--muted-2); margin-bottom: 18px; }
.onboarding-fields{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.onboarding-fields label{ display: flex; flex-direction: column; gap: 6px; font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.onboarding-fields input{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}
.onboarding-fields input:disabled{ opacity: 0.75; }
.onboarding-upload-box{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 34px 20px;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 22px;
}
.onboarding-upload-box .icon{ color: var(--orange-text); }
.onboarding-upload-circle{ border-radius: 50%; aspect-ratio: 1; justify-content: center; margin-left: auto; margin-right: auto; max-width: 220px; }
.onboarding-success{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  padding: 50px 10px 10px;
}
.onboarding-success-icon{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(52,211,153,0.12);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.onboarding-success h3{ font-family: var(--font-display); font-size: 1.15rem; color: var(--white); }

/* =====================================================================
   MARQUES PAY — PRÉVIA DA CONTA DIGITAL (VERSÃO DESKTOP/NAVEGADOR)
   Protótipo visual, sem dados reais. Ver conta-digital-dashboard.html.
   ===================================================================== */
.pay-page{ background: var(--bg); min-height: 100vh; }

.pay-topbar{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-alt);
  position: sticky;
  top: 0;
  z-index: 20;
}
.pay-topbar-logo{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.pay-topbar-logo img{ width: 36px; height: 36px; }
.pay-topbar-logo-text{ font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; color: var(--white); }
.pay-topbar-logo-text strong{ display: block; color: var(--orange-text); }
.pay-topbar-search{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  color: var(--muted);
  max-width: 480px;
}
.pay-topbar-search input{ background: none; border: none; color: var(--white); font-size: 0.85rem; width: 100%; }
.pay-topbar-search input::placeholder{ color: var(--muted-2); }
.pay-topbar-search .icon{ color: var(--muted-2); flex-shrink: 0; }
.pay-topbar-actions{ display: flex; align-items: center; gap: 18px; margin-left: auto; flex-shrink: 0; }
.pay-bell-btn{ position: relative; color: var(--muted); }
.pay-bell-btn:hover{ color: var(--white); }
.pay-bell-dot{
  position: absolute; top: -3px; right: -3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--orange); color: #1a1200;
  font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-alt);
}
.pay-user-menu{ display: flex; align-items: center; gap: 10px; }
.pay-user-avatar{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pay-user-menu-text{ display: flex; flex-direction: column; line-height: 1.2; }
.pay-user-menu-text small{ color: var(--muted-2); font-size: 0.7rem; }
.pay-user-menu-text strong{ color: var(--white); font-size: 0.85rem; }
.pay-user-menu .icon{ color: var(--muted-2); }

.pay-body{ display: grid; grid-template-columns: 250px 1fr; align-items: start; }

.pay-sidebar{
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 16px;
  border-right: 1px solid var(--border-soft);
  overflow-y: auto;
}
.pay-nav{ display: flex; flex-direction: column; gap: 2px; }
.pay-nav-btn{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
}
.pay-nav-btn:hover{ color: var(--white); background: var(--surface-2); }
.pay-nav-btn.active{ color: var(--orange-text); background: rgba(247,148,30,0.1); }
.pay-nav-btn .icon{ width: 18px; height: 18px; flex-shrink: 0; }

.pay-sidebar-promo{
  margin-top: auto;
  background: linear-gradient(160deg, var(--surface-2), var(--bg-alt));
  border: 1px solid var(--border-orange);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-sidebar-promo strong{ font-family: var(--font-display); font-size: 0.95rem; color: var(--white); }
.pay-sidebar-promo strong .orange{ color: var(--orange-text); }
.pay-sidebar-promo p{ font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 0; }
.pay-sidebar-promo a{ font-size: 0.8rem; font-weight: 700; color: var(--orange-text-soft); display: inline-flex; align-items: center; gap: 4px; }

.pay-main{ padding: 28px 32px 60px; min-width: 0; }

.pay-main-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pay-main-head h1{ font-family: var(--font-display); font-size: 1.7rem; color: var(--white); margin-bottom: 4px; }
.pay-main-head p{ color: var(--muted); font-size: 0.9rem; }

.pay-stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.pay-stat-card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pay-stat-icon{
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pay-stat-icon.is-green{ background: rgba(52,211,153,0.15); color: var(--success); }
.pay-stat-icon.is-red{ background: rgba(240,100,90,0.15); color: var(--danger); }
.pay-stat-icon.is-blue{ background: rgba(90,160,240,0.15); color: #5AA0F0; }
.pay-stat-icon.is-orange{ background: rgba(247,148,30,0.15); color: var(--orange-text); }
.pay-stat-body{ min-width: 0; }
.pay-stat-body span{ display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.pay-stat-body strong{ display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--white); }
.pay-stat-trend{ font-size: 0.72rem; color: var(--muted-2); margin-top: 4px; }
.pay-stat-trend.is-up{ color: var(--success); }

.pay-content{ display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.pay-col-main{ display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pay-col-side{ display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.pay-card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
}
.pay-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pay-card-head h2{ font-family: var(--font-display); font-size: 1.05rem; color: var(--white); }
.pay-card-sub{ font-size: 0.78rem; color: var(--muted); margin-bottom: 18px; }
.pay-card-link{ font-size: 0.78rem; font-weight: 700; color: var(--orange-text-soft); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pay-legend{ display: flex; align-items: center; gap: 14px; font-size: 0.76rem; color: var(--muted); }
.pay-legend-item{ display: flex; align-items: center; gap: 6px; }
.pay-legend-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.pay-bar-chart{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  height: 200px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.pay-bar-col{ display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; height: 100%; justify-content: flex-end; }
.pay-bar-pair{ display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.pay-bar{ width: 16px; border-radius: 5px 5px 0 0; }
.pay-bar.is-in{ background: var(--success); }
.pay-bar.is-out{ background: var(--danger); }
.pay-bar-label{ font-size: 0.75rem; color: var(--muted-2); }

.pay-boletos-list{ display: flex; flex-direction: column; gap: 14px; }
.pay-boleto-row{ display: flex; align-items: center; gap: 12px; }
.pay-boleto-icon{
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem;
}
.pay-boleto-body{ min-width: 0; flex: 1; }
.pay-boleto-body strong{ display: block; font-size: 0.85rem; color: var(--white); }
.pay-boleto-body span{ display: block; font-size: 0.74rem; color: var(--muted-2); margin-top: 1px; }
.pay-boleto-value{ font-size: 0.85rem; font-weight: 700; color: var(--white); white-space: nowrap; }
.pay-boleto-pay-btn{
  background: var(--orange);
  color: #1a1200;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.pay-boleto-pay-btn:hover{ background: var(--orange-light); }

.pay-quick-actions{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pay-quick-action{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.pay-quick-action:hover{ color: var(--white); border-color: var(--border); }
.pay-quick-action.is-primary{ background: rgba(247,148,30,0.1); border-color: var(--border-orange); color: var(--orange-text-soft); }
.pay-quick-action .icon{ width: 22px; height: 22px; }

.pay-tx-list{ display: flex; flex-direction: column; gap: 14px; }
.pay-tx-row{ display: flex; align-items: center; gap: 12px; }
.pay-tx-icon{
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(240,100,90,0.12); color: var(--danger);
}
.pay-tx-icon.is-in{ background: rgba(52,211,153,0.12); color: var(--success); }
.pay-tx-body{ min-width: 0; flex: 1; }
.pay-tx-body strong{ display: block; font-size: 0.83rem; color: var(--white); }
.pay-tx-body span{ display: block; font-size: 0.72rem; color: var(--muted-2); margin-top: 1px; }
.pay-tx-value{ font-size: 0.85rem; font-weight: 700; color: var(--danger); white-space: nowrap; }
.pay-tx-value.is-in{ color: var(--success); }

.pay-donut-wrap{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pay-donut{
  width: 130px; height: 130px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pay-donut::after{
  content: ""; position: absolute; inset: 16px;
  border-radius: 50%; background: var(--surface);
}
.pay-donut-center{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pay-donut-center strong{ font-family: var(--font-display); font-size: 0.95rem; color: var(--white); }
.pay-donut-center span{ font-size: 0.62rem; color: var(--muted-2); max-width: 80px; }
.pay-donut-legend{ display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; }
.pay-donut-legend-item{ display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.pay-donut-legend-item strong{ color: var(--white); margin-left: auto; }
.pay-donut-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.pay-goal-row{ display: flex; align-items: center; gap: 16px; }
.pay-goal-ring{
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pay-goal-ring::after{ content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.pay-goal-ring span{ position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--white); }
.pay-goal-body{ min-width: 0; flex: 1; }
.pay-goal-body strong{ display: block; font-size: 0.88rem; color: var(--white); margin-bottom: 2px; }
.pay-goal-body span{ font-size: 0.76rem; color: var(--muted-2); }
.pay-goal-bar{ height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.pay-goal-bar span{ display: block; height: 100%; background: var(--orange); border-radius: 999px; }

.pay-promo-card{
  background: linear-gradient(150deg, rgba(247,148,30,0.14), var(--surface));
  border: 1px solid var(--border-orange);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-promo-card strong{ font-family: var(--font-display); font-size: 1rem; color: var(--white); }
.pay-promo-card p{ font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin: 0; }
.pay-promo-card .btn{ align-self: flex-start; margin-top: 4px; }

.pay-toggle-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 0.85rem; color: var(--white);
}
.pay-toggle-row:last-child{ border-bottom: none; }
.pay-toggle{ width: 40px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; flex-shrink: 0; }
.pay-toggle-dot{ position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: 0.2s; }
.pay-toggle.is-on{ background: rgba(247,148,30,0.25); border-color: var(--border-orange); }
.pay-toggle.is-on .pay-toggle-dot{ left: 20px; background: var(--orange); }

.pay-virtual-card{
  background: linear-gradient(135deg, #2a2c2e, #17181a);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 340px;
  border: 1px solid var(--border);
}
.pay-virtual-card-top{ display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 700; }
.pay-virtual-card-number{ font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.08em; }
.pay-virtual-card-bottom{ display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); }

.pay-empty-note{ font-size: 0.8rem; color: var(--muted-2); line-height: 1.5; }

.pay-locked-card{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 40px 24px;
}
.pay-locked-icon{
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted); margin-bottom: 6px;
}
.pay-locked-icon .icon{ width: 22px; height: 22px; }
.pay-locked-badge{
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: rgba(247,148,30,0.15); color: var(--orange-text);
}
.pay-locked-value{ font-family: var(--font-display); font-size: 1.8rem; color: var(--muted); margin-top: 6px; }
.pay-locked-label{ font-size: 0.85rem; color: var(--muted-2); }
.pay-locked-note{ font-size: 0.82rem; color: var(--muted-2); line-height: 1.5; max-width: 420px; margin-top: 10px; }
.pay-virtual-card.is-locked{ opacity: 0.55; filter: grayscale(0.4); }
.pay-contract-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.pay-contract-grid span{ display: block; font-size: 0.74rem; color: var(--muted-2); margin-bottom: 4px; }
.pay-contract-grid strong{ font-size: 0.9rem; color: var(--white); font-family: var(--font-display); }
/* ---- Contratos de participação nos lucros (lista recolhível) ---- */
/* O bloco inteiro (toggle + corpo) leva a borda do status do contrato —
   "Encerrado"/"Ativo" não fica só na etiqueta perto do número, abraça
   todo o card. Expandir só acrescenta um realce por cima, no toggle. */
.ps-contract-block{
  margin-bottom: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.ps-contract-block.is-ativo{ border-color: rgba(52,211,153,0.35); }
.ps-contract-block.is-encerrado, .ps-contract-block.is-quitado{ border-color: var(--border-soft); }
.ps-contract-block.is-cancelado{ border-color: rgba(240,100,90,0.3); }
.ps-contract-toggle{
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; background: var(--surface); border: none;
  cursor: pointer; text-align: left; font: inherit;
}
.ps-contract-toggle-main{ display: flex; align-items: center; gap: 10px; }
.ps-contract-toggle-main strong{ font-family: var(--font-display); color: var(--white); font-size: 0.95rem; }
.ps-contract-toggle-sub{ margin-left: auto; font-size: 0.85rem; color: var(--muted); font-family: var(--font-display); }
.ps-contract-chevron{ width: 18px; height: 18px; color: var(--muted); transition: transform 0.2s ease; flex-shrink: 0; }
.ps-contract-toggle[aria-expanded="true"] .ps-contract-chevron{ transform: rotate(180deg); }
.ps-contract-toggle[aria-expanded="true"]{ background: rgba(247,148,30,0.06); }
.ps-contract-body{ padding: 16px 20px 20px; background: var(--surface); border-top: 1px solid var(--border-soft); }
.ps-contract-body[hidden]{ display: none; }

/* ---- ROI da participação nos lucros ---- */
.roi-summary{ display: flex; gap: 24px; margin-bottom: 8px; }
.roi-summary span{ display: block; font-size: 0.8rem; color: var(--muted); }
.roi-summary strong{ font-family: var(--font-display); font-size: 2.1rem; color: var(--white); display: block; margin: 2px 0 4px; }
.roi-summary small{ font-size: 0.78rem; color: var(--muted-2); }
.roi-chart{ display: flex; align-items: flex-end; justify-content: center; gap: 48px; height: 160px; padding-top: 28px; }
.roi-bar-col{ display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: flex-end; width: 90px; }
.roi-bar-value{ font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--white); }
.roi-bar-track{ width: 56px; flex: 1; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 10px; overflow: hidden; }
.roi-bar-fill{ width: 100%; height: 0%; border-radius: 10px 10px 0 0; transition: height 0.6s ease; }
.roi-bar-fill.is-investido{ background: var(--success); }
.roi-bar-fill.is-ganhos{ background: var(--orange); }
.roi-bar-label{ font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.roi-dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.roi-dot.is-investido{ background: var(--success); }
.roi-dot.is-ganhos{ background: var(--orange); }

.pay-comprovante-btn{ background: transparent; border: 1px solid var(--border-orange); color: var(--orange-text-soft); }
.pay-comprovante-btn:hover{ background: rgba(247,148,30,0.1); }
.pay-link-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; border-bottom: 1px solid var(--border-soft);
  font-size: 0.85rem; color: var(--white);
}
.pay-link-row:last-child{ border-bottom: none; }
.pay-link-row:hover{ color: var(--orange-text-soft); }
.pay-link-row .icon{ color: var(--muted-2); width: 16px; height: 16px; }

.pay-panel{ display: none; }
.pay-panel.active{ display: block; }

.pay-open-consent{ display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 18px; font-size: .85rem; color: var(--muted); }
.pay-open-consent input{ margin-top: 3px; }
.pay-open-note{ margin: 14px 0 0; font-size: .78rem; color: var(--muted-2, var(--muted)); }
.pay-preview-tag{
  display: inline-block;
  font-size: 0.7rem;
  color: var(--muted-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}

@media (max-width: 1100px){
  .pay-content{ grid-template-columns: 1fr; }
  .pay-stats-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .pay-topbar-search{ display: none; }
  .pay-body{ grid-template-columns: 1fr; }
  .pay-sidebar{ position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
  .pay-nav{ flex-direction: row; flex-wrap: wrap; }
  .pay-sidebar-promo{ display: none; }
}
@media (max-width: 640px){
  .pay-stats-grid{ grid-template-columns: 1fr; }
  .pay-quick-actions{ grid-template-columns: repeat(2, 1fr); }
  .pay-main{ padding: 20px 16px 40px; }
  .pay-topbar{ padding: 12px 16px; }
}
.onboarding-success p{ font-size: 0.8rem; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }

.kyc-h{ font-family: var(--font-display); font-size: 1.05rem; color: var(--white); margin: 28px 0 12px; }
.kyc-h:first-of-type{ margin-top: 8px; }
.kyc-radios{ display: flex; gap: 22px; flex-wrap: wrap; }
.kyc-radios label{ display: flex; align-items: center; gap: 8px; }
.kyc-docs{ display: grid; gap: 10px; }
.kyc-doc{ display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 12px; font-size: .9rem; }
.kyc-doc em{ font-style: normal; font-size: .8rem; color: var(--muted); }
.kyc-doc em.is-ok{ color: var(--success); }
.kyc-doc em.is-error{ color: var(--danger); }
.kyc-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
#pepDetalheWrap[hidden], #pepNomeWrap[hidden], #pepCpfWrap[hidden], #pepGrauWrap[hidden]{ display: none; }
.money-field{ display: flex; align-items: center; border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 10px; background: var(--surface-2, rgba(255,255,255,0.03)); }
.money-field em{ font-style: normal; padding: 0 4px 0 14px; color: var(--muted); }
.money-field input{ border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 6px; flex: 1; min-width: 0; }
.money-field:focus-within{ border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,148,30,0.15); }
.cep-hint{ display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); min-height: 1em; }

/* ---- Programa de Parceiros ---- */
.partner-benefits{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.partner-benefits div{ padding: 14px 16px; background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 12px; }
.partner-benefits strong{ display: block; margin-bottom: 4px; color: var(--white); }
.partner-benefits span{ font-size: .88rem; color: var(--muted); }
.partner-links{ display: grid; gap: 12px; margin-top: 8px; }
.partner-link-row{ display: grid; grid-template-columns: 1fr; gap: 6px; }
.partner-link-row span{ font-size: .82rem; color: var(--muted); }
.partner-link-row input{ width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,0.1)); background: var(--surface-2, rgba(255,255,255,0.03)); color: var(--white); }
.partner-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.partner-stat{ padding: 16px; border-radius: 14px; background: var(--surface, #141518); border: 1px solid var(--border, rgba(255,255,255,0.08)); display: grid; gap: 4px; }
.partner-stat span{ font-size: .8rem; color: var(--muted); }
.partner-stat strong{ font-size: 1.3rem; color: var(--white); }
.partner-stat small{ color: var(--muted); font-size: .76rem; }
.partner-table{ display: grid; gap: 10px; }
.partner-row{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 12px; }
.partner-row small{ display: block; color: var(--muted); margin-top: 2px; }
.partner-row-right{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.partner-lancar-form{ display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.partner-lancar-form[hidden]{ display: none; }
.partner-lancar-form label{ flex: 1; min-width: 140px; font-size: 0.82rem; color: var(--muted); }
.partner-lancar-form input{ display: block; width: 100%; margin-top: 4px; }
.partner-badge{ padding: 3px 10px; border-radius: 999px; font-size: .75rem; background: rgba(247,148,30,0.15); color: var(--orange-text-soft); }
.partner-badge.is-liberada{ background: rgba(79,142,247,0.15); color: #7fb0ff; }
.partner-badge.is-paga{ background: rgba(52,211,153,0.15); color: var(--success); }
.partner-badge.is-cancelada{ background: rgba(240,100,90,0.12); color: var(--danger); }
#secApply[hidden], #secIntro[hidden], #secStatus[hidden], #secDashboard[hidden]{ display: none; }

/* Dossiê da OS na área do parceiro */
/* Checklist e documentos do dossiê (usados na área do parceiro e no painel) */
.dos-list{ list-style:none; padding:0; margin:0 0 14px; }
.dos-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.dos-row:last-child{ border-bottom:0; }
.dos-label small{ display:block; margin-top:2px; font-size:.75rem; color:var(--muted-2); }
.dos-badge{ flex-shrink:0; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 11px; border-radius:999px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.dos-badge.ok{ color:var(--success); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1); }
.dos-badge.pend{ color:var(--orange-text-soft); border-color:var(--border-orange); background:rgba(247,148,30,.1); }
.dos-doc{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); margin-top:10px; }
.dos-doc-info{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.dos-doc-info strong{ font-size:.9rem; font-weight:600; }
.dos-doc-meta{ font-size:.76rem; color:var(--muted); overflow-wrap:anywhere; }
.dos-doc-actions{ display:flex; gap:8px; flex-shrink:0; }
.dos-section{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.dos-section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.dos-section-head span{ font-size:.78rem; color:var(--muted); }
.dos-resumo{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border); font-size:.84rem; color:var(--muted); }
.dos-note{ font-size:.84rem; color:var(--muted); margin:0 0 12px; line-height:1.5; }
.dos-confirm{ margin-top:16px; padding:16px; border:1px solid var(--border-orange); border-radius:var(--radius-sm); background:rgba(247,148,30,.06); display:flex; flex-direction:column; gap:12px; }
.dos-confirm label{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; line-height:1.45; cursor:pointer; }
.dos-confirm input[type=checkbox]{ margin-top:3px; width:auto; flex-shrink:0; }
.dos-confirmed{ margin-top:14px; padding:12px 14px; border:1px solid rgba(52,211,153,.35); border-radius:var(--radius-sm); background:rgba(52,211,153,.08); color:var(--success); font-size:.86rem; }
@media (max-width: 560px){ .dos-doc{ flex-direction:column; align-items:flex-start; } .dos-doc-actions{ width:100%; } .dos-doc-actions > *{ flex:1; text-align:center; justify-content:center; } }
.os-details summary{ cursor:pointer; font-size:.8rem; color:var(--muted); margin-top:6px; }
.os-details[open] summary{ margin-bottom:4px; }
.os-dossie-check{ list-style:none; padding:0; margin:10px 0; display:flex; flex-direction:column; gap:3px; font-size:.86rem; color:var(--muted); }
.os-dossie-check li.ok{ color: var(--white); }
.os-dossie-form{ display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.os-dossie-form label{ font-size:.82rem; color:var(--muted); display:block; }
.os-dossie-form input{ display:block; width:100%; margin-top:4px; padding:10px 12px; border-radius:10px; border:1px solid var(--border, rgba(255,255,255,0.1)); background:var(--surface-2, rgba(255,255,255,0.03)); color:var(--white); font:inherit; }
.os-dossie-form input:focus{ outline:none; border-color:var(--border-orange); }
.os-dossie-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.os-dossie-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.os-hint{ color:var(--muted-2); font-size:.76rem; }
.os-doc-list{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.os-doc-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.86rem; }
.os-doc-actions{ display:flex; gap:6px; }
@media (max-width: 560px){ .os-dossie-grid{ grid-template-columns: 1fr 1fr; } .os-dossie-grid label[style]{ grid-column: span 2 !important; } }

/* ===================== ACESSIBILIDADE ===================== */
.skip-link{
  position: fixed; top: 8px; left: 8px; z-index: 10000;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--orange); color: #1a1200; font-weight: 700; font-size: 0.9rem;
  transform: translateY(-200%);
}
.skip-link:focus{ transform: translateY(0); }
main:focus, section.view h1:focus{ outline: none; }
/* o foco do teclado sempre aparece, mesmo nos campos que escondiam o contorno padrão */
.form-grid input:focus-visible, .form-grid select:focus-visible, .search-box input:focus-visible,
.sizing-calc-inputs input:focus-visible, .credit-sim-form input:focus-visible, .credit-sim-form select:focus-visible,
.os-dossie-form input:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; }
:root[data-theme="light"] a:focus-visible, :root[data-theme="light"] button:focus-visible{ outline-color: #9A4D07; }

/* ===================== AVISO DE COOKIES ===================== */
.cookie-notice{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 0.86rem; line-height: 1.55; color: var(--muted);
}
.cookie-notice p{ margin: 0; flex: 1; }
.cookie-notice a{ color: var(--orange-text); text-decoration: underline; font-weight: 600; }
.cookie-notice-btn{ flex-shrink: 0; padding: 10px 22px; }
@media (max-width: 560px){
  .cookie-notice{ flex-direction: column; align-items: stretch; bottom: 76px; }
}

/* ---- contrato no painel do parceiro ---- */
.dos-contrato{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.dos-contrato-btns{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }