/* ===== Columna Exportación - Custom Styles ===== */

@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 {
  --amber-700: #B45309;
  --amber-600: #D97706;
  --amber-500: #F59E0B;
  --amber-400: #FBBF24;
  --earth-900: #1C1208;
  --earth-800: #2D1F10;
  --earth-700: #3E2C18;
  --earth-600: #5C4033;
  --warm: #FFF8F0;
  --surface: #FFFBF5;
  --white: #FFFFFF;
}

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

.gradient-text {
  background: linear-gradient(135deg, var(--amber-600), var(--amber-400), var(--amber-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-transparent {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.nav-scrolled {
  background: rgba(28, 18, 8, 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 {
  background: linear-gradient(135deg, rgba(28,18,8,0.92) 0%, rgba(62,44,24,0.85) 50%, rgba(92,64,51,0.78) 100%);
}

.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(--amber-500), var(--amber-700), var(--amber-400), var(--amber-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-border {
  border: 2px solid var(--amber-600);
  box-shadow: inset 0 0 0 3px var(--earth-900), inset 0 0 0 5px var(--amber-600);
  border-radius: 1rem;
}

@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-value { font-variant-numeric: tabular-nums; }

@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 { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(28, 18, 8, 0.15); }

.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-enter { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.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 { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.mobile-menu.open { transform: translateX(0); }

.map-route { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s ease; }
.map-route.animate { stroke-dashoffset: 0; }

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

.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-line { background: linear-gradient(to bottom, var(--amber-500), var(--amber-700)); }

.section-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--amber-600), var(--amber-400)); }

.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;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--earth-900); }
::-webkit-scrollbar-thumb { background: var(--amber-500); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber-400); }

a, button { transition: all 0.3s ease; }

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

@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; }
}