/* ===========================================================
   FAN Embalagens — PREMIUM LAYER (premium.css)
   Refinamento de nível multinacional: tipografia, ritmo,
   profundidade, micro-interações. Carrega DEPOIS do kit.css.
   Usa apenas tokens do design system.
   =========================================================== */

/* ---------- 1. Tipografia refinada ---------- */
.fan-h1, .hero h1, .page-head h1 {
  letter-spacing: -0.022em;
  line-height: 1.02;
  font-weight: 700;
}
.fan-h2 {
  letter-spacing: -0.018em;
  line-height: 1.06;
}
.fan-h3 { letter-spacing: -0.012em; }
.fan-lead, .lead {
  font-size: 1.075rem;
  line-height: 1.62;
  color: var(--fg-2);
  letter-spacing: -0.003em;
}
.fan-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.26em !important;
  opacity: 0.95;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- 2. Ritmo vertical mais generoso ---------- */
section.fan-section { padding: 104px 0; }
@media (max-width: 768px) { section.fan-section { padding: 64px 0; } }
.fan-section-head { margin-bottom: 56px; }
.fan-container, .fan-section > .container { max-width: 1240px; }

/* ---------- 3. NAV — vidro fosco premium ---------- */
.fan-nav {
  background: rgba(39, 65, 85, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(234, 113, 83, 0.5);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 30px -12px rgba(20,41,59,0.5);
  transition: background 240ms var(--ease-out);
}
.fan-nav-link { font-size: 12.5px; letter-spacing: 0.12em; opacity: 0.92; transition: opacity 180ms, color 180ms; }
.fan-nav-link:hover { opacity: 1; }
.fan-topbar { letter-spacing: 0.18em; }

/* ---------- 4. Botões — profundidade sutil + brilho ---------- */
.btn {
  letter-spacing: 0.07em;
  border-radius: var(--r-sm);
  transition: transform 180ms var(--ease-out), box-shadow 220ms var(--ease-out), background 180ms;
  position: relative;
  overflow: hidden;
}
.btn-coral, .btn-primary {
  background: linear-gradient(180deg, #ef7d61 0%, var(--coral) 55%, #e26646 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 24px -10px rgba(234,113,83,0.7), 0 2px 6px -2px rgba(20,41,59,0.3);
}
.btn-coral:hover, .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 16px 34px -10px rgba(234,113,83,0.8), 0 3px 8px -2px rgba(20,41,59,0.35);
}
.btn-coral:active, .btn-primary:active { transform: translateY(0); }
.btn-ghost, .btn-ghost-light {
  backdrop-filter: blur(4px);
  transition: transform 180ms, border-color 180ms, background 180ms;
}
.btn-ghost:hover, .btn-ghost-light:hover { transform: translateY(-2px); }
/* shine sweep on primary hover */
.btn-coral::before, .btn-primary::before {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  transition: left 600ms var(--ease-out);
}
.btn-coral:hover::before, .btn-primary:hover::before { left: 140%; }

/* ---------- 5. Cards — elevação e profundidade refinadas ---------- */
.prod-card, .dif-card, .blog-card, .recurso-card, .case-card, .box {
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(20,41,59,0.04), 0 8px 24px -16px rgba(20,41,59,0.28);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 200ms;
  overflow: hidden;
}
.prod-card:hover, .dif-card:hover, .blog-card:hover, .recurso-card:hover, .case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(20,41,59,0.06), 0 28px 48px -24px rgba(20,41,59,0.42);
  border-color: rgba(234,113,83,0.45);
}
/* Image zoom inside cards */
.prod-card img, .blog-card img, .case-card img, .gallery-item img {
  transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1);
  will-change: transform;
}
.prod-card:hover img, .blog-card:hover img, .case-card:hover img { transform: scale(1.06); }

/* ---------- 6. HERO — overlay mais cinematográfico ---------- */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 18% 30%, rgba(20,41,59,0.15), transparent 60%),
    linear-gradient(180deg, rgba(20,41,59,0.30) 0%, rgba(20,41,59,0.55) 55%, rgba(15,28,38,0.86) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero > * { position: relative; z-index: 2; }
.hero h1 { text-shadow: 0 2px 28px rgba(0,0,0,0.28); }
.hero .lead, .hero-sub { text-shadow: 0 1px 12px rgba(0,0,0,0.30); }
.hero-eyebrow, .hero .fan-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before, .hero .fan-eyebrow::before {
  content: ''; width: 28px; height: 2px; background: var(--coral); display: inline-block;
}

/* ---------- 7. Eyebrow premium (dot accent) ---------- */
.fan-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--coral);
  font-family: var(--font-stencil);
  text-transform: uppercase;
}

/* ---------- 8. Section dividers — linha fina elegante ---------- */
section.fan-section + section.fan-section { position: relative; }
.fan-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  border: 0; margin: 0;
}

/* ---------- 9. Imagens — tratamento warm grain sutil ---------- */
.prod-card .img, .blog-card .img, figure img, .case-card .img {
  position: relative;
}
.hero img, .page-head img {
  filter: saturate(1.05) contrast(1.04);
}

/* ---------- 10. Footer — refinamento ---------- */
.fan-footer { background: var(--navy-deep); }
.fan-footer a { transition: color 160ms, opacity 160ms; }
.fan-footer a:hover { color: var(--coral); opacity: 1; }

/* ---------- 11. Inputs premium ---------- */
input, textarea, select {
  border-radius: var(--r-sm);
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 3px rgba(234,113,83,0.16) !important;
  outline: none;
}

/* ---------- 12. Entrada suave de seções (respeitando reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fan-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .fan-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 13. Stats / números — destaque premium ---------- */
.stat .n, .stats .num, .stat-num {
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1;
  background: linear-gradient(180deg, #fff 0%, #e8eef3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
section.fan-section:not(.dark):not(.darker) .stat .n,
section.fan-section:not(.dark):not(.darker) .stat-num {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 14. Scrollbar refinada (desktop) ---------- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--pine-50); }
  ::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 99px; border: 3px solid var(--pine-50); }
  ::-webkit-scrollbar-thumb:hover { background: var(--navy); }
}

/* ---------- 15. Seleção de texto on-brand ---------- */
::selection { background: rgba(234,113,83,0.28); color: var(--navy-deep); }

/* ---------- 16. WhatsApp FAB — glow premium ---------- */
.whatsapp-fab, .fab-whatsapp {
  box-shadow: 0 8px 24px -6px rgba(37,211,102,0.6), 0 4px 10px -4px rgba(0,0,0,0.3) !important;
  transition: transform 220ms var(--ease-out), box-shadow 220ms !important;
}
.whatsapp-fab:hover, .fab-whatsapp:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px -6px rgba(37,211,102,0.7), 0 6px 14px -4px rgba(0,0,0,0.35) !important;
}

/* ---------- 17. Links de conteúdo refinados ---------- */
.fan-article a, .article-body a, .content a {
  color: var(--coral);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 160ms;
}
.fan-article a:hover { color: var(--coral-600); }

/* ---------- 18. Plank divider hi-fi ---------- */
.fan-plank {
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--coral) 0 40px, var(--navy) 40px 80px);
  opacity: 0.9;
}