/* ==========================================================================
   Hero v2 — hero cinematográfica com 5 temas visuais (heroVariants)
   Estrutura fixa: header overlay + conteúdo centralizado + fundo animado
   + dashboards ilustrativos por tema. Ver js/hero-v2.js para a lógica.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- Header: sempre translúcido/escuro, flutua sobre a hero ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(8,12,20,.32);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s var(--ease-premium);
}
.site-header .logo{ height:42px; }
@media (max-width:1023px){ .site-header .logo{ height:34px; } }
.site-header .main-nav a{ color:rgba(255,255,255,.82); }
.site-header .main-nav a:hover{ color:#fff; }
.header-menu-btn svg{ color:#fff; }
.mobile-panel{ background:rgba(8,12,20,.96); backdrop-filter:blur(14px); }
.mobile-panel a{ color:#fff; border-bottom-color:rgba(255,255,255,.14); }

/* empurra o conteúdo da página para baixo do header fixo */
body.page{ padding-top:76px; }
@media (max-width:1023px){ body.page{ padding-top:68px; } }

/* ---------- Container da hero ---------- */
.hero-v2{
  position:relative;
  margin-top:-76px; /* header fica sobreposto, não empurra a hero */
  height:clamp(640px, 100vh, 1000px);
  min-height:560px;
  overflow:hidden;
  background:#0B1422;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}
@media (max-width:1023px){ .hero-v2{ margin-top:-68px; height:clamp(600px, 100svh, 900px); } }

/* ---------- Camadas de fundo (uma por tema, crossfade) ---------- */
.hv2-bg-layers{ position:absolute; inset:0; z-index:0; }
.hv2-bg-layer{
  position:absolute; inset:0; opacity:0;
  transition:opacity .1s linear;
}
.hv2-bg-layer.active{ opacity:1; z-index:1; }
.hv2-bg-media{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.hv2-bg-gif{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hv2-bg-gradient{
  position:absolute; inset:0;
  background-size:220% 220%;
  animation:hv2GradientMove 22s ease-in-out infinite;
}
.hv2-bg-overlay{ position:absolute; inset:0; }
.hv2-bg-vignette{ position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 48%, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 100%); }

@keyframes hv2GradientMove{
  0%{ background-position:0% 30%; }
  50%{ background-position:100% 70%; }
  100%{ background-position:0% 30%; }
}

/* ---------- Conteúdo central ---------- */
.hv2-content{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  max-width:900px;
  padding:0 24px;
  margin:0 auto;
}
.hv2-logo{
  height:clamp(90px,13vw,180px); width:auto;
  margin:0 0 20px;
  transition:filter .1s linear;
}
/* nos temas de fundo escuro o logo (positivo/navy) precisa virar branco */
.hero-v2[data-theme="industrial"] .hv2-logo,
.hero-v2[data-theme="colorido"] .hv2-logo,
.hero-v2[data-theme="tech"] .hv2-logo{
  filter:brightness(0) invert(1);
}
/* "Sistema Integrado de Gestão para Varejo." — agora o texto de maior
   destaque da composição (leva a fonte temática de cada variante). */
.hv2-eyebrow{
  font-family:var(--font-display); font-size:clamp(1.9rem, 4.6vw, 3.1rem); font-weight:700;
  letter-spacing:-0.01em; text-transform:none;
  line-height:1.14;
  margin:0 0 14px;
  transition:color .1s linear, font-family .1s linear;
  text-wrap:balance;
}
/* "Personalizado para você, como deve ser." — agora a legenda pequena
   de apoio, sempre na fonte de corpo, sem estilo temático. */
.hv2-title{
  margin:0; font-weight:500; font-family:var(--font-body);
  font-size:clamp(.95rem, 1.15vw, 1.05rem); line-height:1.4; letter-spacing:0;
  transition:color .1s linear;
}
.hv2-cta-wrap{ margin-top:clamp(28px,4vw,44px); }
.hv2-cta{
  display:inline-flex; align-items:center; gap:10px;
  height:56px; padding:0 30px; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:16px;
  transition:transform .25s var(--ease-premium), background .1s linear, color .1s linear, box-shadow .25s var(--ease-premium);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.35);
}
.hv2-cta:hover{ transform:translateY(-2px); }
.hv2-cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.hv2-cta svg{ width:18px; height:18px; transition:transform .25s var(--ease-premium); }
.hv2-cta:hover svg{ transform:translateX(3px); }

/* ---------- Controles (indicadores de tema) — discretos ---------- */
.hv2-controls{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:6px;
  background:rgba(8,12,20,.22); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:5px 8px;
  opacity:.7; transition:opacity .25s var(--ease-premium);
}
.hv2-controls:hover, .hv2-controls:focus-within{ opacity:1; }
@media (max-width:1023px){ .hv2-controls{ bottom:12px; } }
.hv2-dot{
  width:12px; height:4px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:background .3s, width .3s;
}
.hv2-dot.active{ background:#fff; width:16px; }
.hv2-dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- Dashboards ilustrativos ---------- */
.hv2-dashboards{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hv2-dash-group{
  position:absolute; inset:0;
  opacity:0; transition:opacity .1s linear;
}
.hv2-dash-group.active{ opacity:1; }

.hv2-card{
  position:absolute;
  display:flex; flex-direction:column; gap:8px;
  padding:18px 20px;
  border-radius:18px;
  font-family:var(--font-body);
  transform:translate(-50%,-50%) scale(var(--hv2-scale,1));
  will-change:transform, opacity;
  opacity:0;
}
/* a animação só existe enquanto o grupo está ativo — isso força o keyframe
   a reiniciar do 0% (entrada) toda vez que o tema volta a ficar ativo,
   em vez de retomar de onde pausou. */
.hv2-dash-group.active .hv2-card{
  animation:hv2CardLife var(--hv2-dur,3.2s) cubic-bezier(.22,1,.36,1) calc(var(--hv2-delay,0s) * .5) 1 both;
}

@keyframes hv2CardLife{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.8) rotate(var(--hv2-rot,0deg)); }
  12%{ opacity:1; transform:translate(-50%,-50%) scale(var(--hv2-scale,1)) rotate(0deg); }
  60%{ transform:translate(-50%,-50%) translateY(-10px) rotate(calc(var(--hv2-rot,0deg) * -1)) scale(var(--hv2-scale,1)); }
  100%{ opacity:1; transform:translate(-50%,-50%) translateY(0) rotate(0deg) scale(var(--hv2-scale,1)); }
}

.hv2-card-label{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; opacity:.65; }
.hv2-card-value{ font-size:25px; font-weight:700; letter-spacing:-.01em; }
.hv2-card-trend{ font-size:13px; font-weight:600; }

.hv2-card--metric{ min-width:175px; }
.hv2-card--chart{ min-width:188px; }
.hv2-chart-bars{ display:flex; align-items:flex-end; gap:5px; height:40px; margin-top:3px; }
.hv2-chart-bars span{ flex:1; border-radius:4px 4px 0 0; opacity:.85; }

.hv2-card--table{ min-width:212px; }
.hv2-table-row{ display:flex; justify-content:space-between; gap:15px; font-size:15px; padding:4px 0; border-top:1px solid rgba(127,127,127,.18); }
.hv2-table-row:first-child{ border-top:none; }

.hv2-card--calendar{ min-width:175px; }
.hv2-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:3px; }
.hv2-cal-grid span{ width:13px; height:13px; border-radius:4px; opacity:.35; }
.hv2-cal-grid span.on{ opacity:1; }

.hv2-card--alert{ flex-direction:row; align-items:center; min-width:188px; }
.hv2-card--alert svg{ width:20px; height:20px; flex-shrink:0; }
.hv2-card--alert span{ font-size:15px; font-weight:600; }

.hv2-card--flow{ display:flex; flex-direction:row; align-items:center; gap:10px; padding:13px 18px; }
.hv2-flow-dot{ width:10px; height:10px; border-radius:50%; }
.hv2-flow-line{ width:42px; height:2px; position:relative; overflow:hidden; }
.hv2-flow-line::after{
  content:''; position:absolute; inset:0; background:inherit; filter:brightness(1.6);
  animation:hv2FlowDash 2.4s linear infinite;
}
@keyframes hv2FlowDash{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }

@media (prefers-reduced-motion:no-preference){
  .hv2-card{ box-shadow:0 18px 40px -16px rgba(0,0,0,.35); }
}

/* posições base (percentuais, reaproveitadas entre temas)
   top usa max() para garantir margem mínima abaixo do header fixo,
   já que a hero fica puxada -76px por baixo dele (ver .hero-v2). */
.hv2-p1{ top:max(190px,22%); left:18%; }
.hv2-p2{ top:max(190px,18%); left:82%; }
.hv2-p3{ top:50%; left:15%; }
.hv2-p4{ top:52%; left:85%; }
.hv2-p5{ top:80%; left:22%; }
.hv2-p6{ top:82%; left:78%; }

@media (max-width:1279px){
  .hv2-p1{ left:13%; } .hv2-p2{ left:87%; } .hv2-p3{ left:10%; } .hv2-p4{ left:90%; }
}
@media (max-width:900px){
  /* menos dashboards visíveis e mais discretos no tablet/mobile, sem cobrir o texto */
  .hv2-card{ transform:translate(-50%,-50%) scale(.72); padding:10px 12px; }
  .hv2-p1{ top:max(168px,14%); left:15%; } .hv2-p2{ top:max(168px,14%); left:85%; }
  .hv2-p3{ top:88%; left:20%; } .hv2-p4{ top:88%; left:80%; }
  .hv2-p5, .hv2-p6{ display:none; }
}
@media (max-width:560px){
  .hv2-p1, .hv2-p2{ top:max(150px,11%); }
  .hv2-p3, .hv2-p4{ top:91%; }
  .hv2-card{ transform:translate(-50%,-50%) scale(.62); }
}

/* ==========================================================================
   TEMA 1 — Aconchegante
   ========================================================================== */
.hero-v2[data-theme="aconchegante"] .hv2-eyebrow{ color:#3C2A1C; font-family:'Fraunces',var(--font-display); font-weight:600; }
.hero-v2[data-theme="aconchegante"] .hv2-title{ color:#6B4A32; }
.hero-v2[data-theme="aconchegante"] .hv2-cta{ background:#3C2A1C; color:#F6EDE3; }
.hero-v2[data-theme="aconchegante"] .hv2-cta:hover{ background:#4C3626; }
[data-theme-bg="aconchegante"] .hv2-bg-gradient{ background-image:linear-gradient(120deg,#E8D8C4,#D9C3A6,#B7C4A6,#E3B7A0); }
[data-theme-bg="aconchegante"] .hv2-bg-overlay{ background:radial-gradient(65% 55% at 50% 48%, rgba(246,237,227,.55) 0%, rgba(246,237,227,.15) 60%, rgba(60,42,28,.12) 100%); }
[data-theme-dash="aconchegante"] .hv2-card{ background:rgba(246,237,227,.92); border:1px solid rgba(60,42,28,.12); color:#3C2A1C; box-shadow:0 14px 30px -14px rgba(60,42,28,.35); }
[data-theme-dash="aconchegante"] .hv2-chart-bars span{ background:#B36B4A; }
[data-theme-dash="aconchegante"] .hv2-cal-grid span{ background:#8E9C7C; }
[data-theme-dash="aconchegante"] .hv2-card--alert svg{ color:#B36B4A; }
[data-theme-dash="aconchegante"] .hv2-flow-dot{ background:#6B4A32; }
[data-theme-dash="aconchegante"] .hv2-flow-line{ background:rgba(107,74,50,.3); }

/* ==========================================================================
   TEMA 2 — Industrial
   ========================================================================== */
.hero-v2[data-theme="industrial"] .hv2-eyebrow{ color:#F4F4F2; font-family:'Space Grotesk',var(--font-display); font-weight:700; letter-spacing:-0.03em; }
.hero-v2[data-theme="industrial"] .hv2-title{ color:#F4A522; }
.hero-v2[data-theme="industrial"] .hv2-cta{ background:#F4A522; color:#141414; }
.hero-v2[data-theme="industrial"] .hv2-cta:hover{ background:#FFB944; }
[data-theme-bg="industrial"] .hv2-bg-gradient{ background-image:linear-gradient(135deg,#0A0A0A,#1D1D1D,#0A0A0A,#26210F); }
[data-theme-bg="industrial"] .hv2-bg-overlay{ background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%); }
[data-theme-dash="industrial"] .hv2-card{ background:rgba(20,20,20,.82); border:1px solid rgba(244,165,34,.28); border-radius:6px; color:#F4F4F2; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
[data-theme-dash="industrial"] .hv2-chart-bars span{ background:#F4A522; }
[data-theme-dash="industrial"] .hv2-cal-grid span{ background:#5B84A6; }
[data-theme-dash="industrial"] .hv2-card--alert svg{ color:#F4A522; }
[data-theme-dash="industrial"] .hv2-flow-dot{ background:#F4A522; }
[data-theme-dash="industrial"] .hv2-flow-line{ background:rgba(244,165,34,.35); }

/* ==========================================================================
   TEMA 3 — Colorido e criativo
   ========================================================================== */
.hero-v2[data-theme="colorido"] .hv2-eyebrow{ color:#fff; font-weight:700; }
.hero-v2[data-theme="colorido"] .hv2-title{ color:rgba(255,255,255,.78); }
.hero-v2[data-theme="colorido"] .hv2-cta{ background:#fff; color:#7A3F63; }
.hero-v2[data-theme="colorido"] .hv2-cta:hover{ background:#FFF6FB; }
[data-theme-bg="colorido"] .hv2-bg-gradient{ background-image:linear-gradient(120deg,#C9A6E8,#F5A6C0,#9FD8D0,#F6D98A); }
[data-theme-bg="colorido"] .hv2-bg-overlay{ background:radial-gradient(60% 55% at 50% 48%, rgba(70,30,60,.30) 0%, rgba(40,20,50,.45) 60%, rgba(30,15,40,.55) 100%); }
[data-theme-dash="colorido"] .hv2-card{ background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.6); color:#5B3A57; box-shadow:0 14px 30px -14px rgba(90,40,80,.45); }
[data-theme-dash="colorido"] .hv2-chart-bars span:nth-child(1){ background:#C9A6E8; }
[data-theme-dash="colorido"] .hv2-chart-bars span:nth-child(2){ background:#F5A6C0; }
[data-theme-dash="colorido"] .hv2-chart-bars span:nth-child(3){ background:#9FD8D0; }
[data-theme-dash="colorido"] .hv2-chart-bars span:nth-child(4){ background:#F6D98A; }
[data-theme-dash="colorido"] .hv2-cal-grid span{ background:#C9A6E8; }
[data-theme-dash="colorido"] .hv2-card--alert svg{ color:#E88CAE; }
[data-theme-dash="colorido"] .hv2-flow-dot{ background:#9FD8D0; }
[data-theme-dash="colorido"] .hv2-flow-line{ background:rgba(201,166,232,.4); }

/* ==========================================================================
   TEMA 4 — Branco e analítico
   ========================================================================== */
.hero-v2[data-theme="analitico"] .hv2-eyebrow{ color:#191B1D; font-weight:700; }
.hero-v2[data-theme="analitico"] .hv2-title{ color:#54585C; }
.hero-v2[data-theme="analitico"] .hv2-cta{ background:#191B1D; color:#fff; }
.hero-v2[data-theme="analitico"] .hv2-cta:hover{ background:#33373B; }
[data-theme-bg="analitico"] .hv2-bg-gradient{ background-image:linear-gradient(120deg,#F3F4F2,#E7E9EA,#F3F4F2,#DEE3E6); }
[data-theme-bg="analitico"] .hv2-bg-overlay{ background:radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.2) 55%, rgba(255,255,255,0) 100%); }
[data-theme-dash="analitico"] .hv2-card{ background:rgba(255,255,255,.92); border:1px solid rgba(20,25,29,.10); color:#191B1D; box-shadow:0 14px 30px -18px rgba(20,25,29,.25); }
[data-theme-dash="analitico"] .hv2-chart-bars span{ background:#3A6FF5; }
[data-theme-dash="analitico"] .hv2-cal-grid span{ background:#8C6BE0; }
[data-theme-dash="analitico"] .hv2-card--alert svg{ color:#1FA855; }
[data-theme-dash="analitico"] .hv2-flow-dot{ background:#3A6FF5; }
[data-theme-dash="analitico"] .hv2-flow-line{ background:rgba(58,111,245,.3); }

/* ==========================================================================
   TEMA 5 — Azul e tecnológico
   ========================================================================== */
.hero-v2[data-theme="tech"] .hv2-eyebrow{ color:#fff; font-family:'Space Grotesk',var(--font-display); font-weight:600; }
.hero-v2[data-theme="tech"] .hv2-title{ color:#7FDFEE; }
.hero-v2[data-theme="tech"] .hv2-cta{ background:linear-gradient(120deg,#2380FA,#19C3D6); color:#fff; }
.hero-v2[data-theme="tech"] .hv2-cta:hover{ filter:brightness(1.1); }
[data-theme-bg="tech"] .hv2-bg-gradient{ background-image:linear-gradient(135deg,#050B18,#0C1F3D,#081533,#0A2A4D); }
[data-theme-bg="tech"] .hv2-bg-overlay{ background:linear-gradient(180deg, rgba(5,11,24,.25) 0%, rgba(5,11,24,.55) 100%); }
[data-theme-dash="tech"] .hv2-card{ background:rgba(20,40,70,.42); border:1px solid rgba(127,223,238,.28); color:#EAF6FA; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
[data-theme-dash="tech"] .hv2-chart-bars span{ background:#4FD8EA; }
[data-theme-dash="tech"] .hv2-cal-grid span{ background:#8C82DD; }
[data-theme-dash="tech"] .hv2-card--alert svg{ color:#4FD8EA; }
[data-theme-dash="tech"] .hv2-flow-dot{ background:#4FD8EA; }
[data-theme-dash="tech"] .hv2-flow-line{ background:rgba(79,216,234,.4); }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hv2-bg-gradient{ animation:none; }
  .hv2-card, .hv2-dash-group.active .hv2-card{ animation:none; opacity:1; transform:translate(-50%,-50%) scale(var(--hv2-scale,1)); }
  .hv2-flow-line::after{ animation:none; }
}