/* ===== Coluna Pictória - Custom Styles ===== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* Root Variables */
:root {
  --navy-900: #0A1628;
  --navy-800: #0F1F38;
  --navy-700: #1B2A4A;
  --navy-600: #253B63;
  --gold-500: #C5973E;
  --gold-400: #D4A94F;
  --gold-300: #E3C06A;
  --blue-brand: #2563EB;
  --blue-light: #3B82F6;
  --surface: #FAFAFA;
  --white: #FFFFFF;
}

/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: #1a1a2e;
  overflow-x: hidden;
}
.font-display { font-family: 'Playfair Display', serif; }

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300), var(--gold-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-blue {
  background: linear-gradient(135deg, var(--blue-brand), var(--blue-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navigation */
.nav-transparent {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.nav-scrolled {
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Hero Gradient Overlay */
.hero-gradient {
  background: linear-gradient(135deg, rgba(10,22,40,0.92) 0%, rgba(27,42,74,0.85) 50%, rgba(37,59,99,0.78) 100%);
}

/* Animated Gradient Border (Swing Trade) */
.swing-border {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.swing-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(var(--gradient-angle, 0deg), var(--gold-500), var(--blue-brand), var(--gold-300), var(--gold-500));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gradient-rotate 3s linear infinite;
}
@keyframes gradient-rotate {
  0% { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Position Trade - Solid Border */
.position-border {
  border: 2px solid var(--gold-500);
  box-shadow: inset 0 0 0 3px var(--navy-900), inset 0 0 0 5px var(--gold-500);
  border-radius: 1rem;
}

/* Pulse Animation (WhatsApp, Map Markers) */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}
.whatsapp-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0.4; }
}
.map-pulse {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Counter */
.counter-value {
  font-variant-numeric: tabular-nums;
}

/* Scroll Down Chevron */
@keyframes bounce-down {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
  40% { transform: translateY(-10px) translateX(-50%); }
  60% { transform: translateY(-5px) translateX(-50%); }
}
.scroll-chevron {
  animation: bounce-down 2s infinite;
}

/* Card Hover Effect */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(10, 22, 40, 0.15);
}

/* FAQ Accordion */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-content.open {
  max-height: 500px;
}
.faq-chevron {
  transition: transform 0.3s ease;
}
.faq-chevron.rotated {
  transform: rotate(180deg);
}

/* Page Fade In */
.page-enter {
  animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero Word Animation */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
}
.hero-word.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Mobile Menu Overlay */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.open {
  transform: translateX(0);
}

/* SVG Map Routes */
.map-route {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s ease;
}
.map-route.animate {
  stroke-dashoffset: 0;
}

/* Testimonial Carousel */
.testimonial-track {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.testimonial-card {
  scroll-snap-align: center;
}

/* Language Dropdown */
.lang-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.2s ease;
}
.lang-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Timeline */
.timeline-line {
  background: linear-gradient(to bottom, var(--gold-500), var(--blue-brand));
}

/* Section Divider */
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--blue-brand));
}

/* Grain Texture Overlay */
.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb { background: var(--gold-500); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-400); }

/* Smooth transitions for all interactive elements */
a, button { transition: all 0.3s ease; }

/* Print styles */
@media print {
  nav, .whatsapp-float, .mobile-menu, footer { display: none !important; }
  body { color: #000; background: #fff; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}