/* ==========================================================================
   Colectivo Borondin SA de CV - Estilos generales
   Paleta institucional: Azul marino, Plata y Dorado
   ========================================================================== */

:root {
  --color-primary: #0a1a30;   /* Azul marino profundo */
  --color-navy: #123a63;      /* Azul marino medio */
  --color-accent: #c9a227;    /* Dorado institucional */
  --color-accent-light: #e6c65c;
  --color-accent-dark: #9c7d1c;
  --color-silver: #b8c0cc;    /* Plata */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #c9a227; border-radius: 4px; }

/* Hero background pattern */
.hero-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Fondo institucional: azul marino con brillo plateado/dorado */
.gradient-brand {
  background: linear-gradient(135deg, #050f1e 0%, #0a1a30 35%, #123a63 70%, #1b4d7e 100%);
}

/* Acento dorado institucional */
.gradient-accent {
  background: linear-gradient(135deg, #a9821f 0%, #d4af37 50%, #f0d878 100%);
}

/* Marco plateado sutil */
.gradient-silver {
  background: linear-gradient(135deg, #8b95a3 0%, #d7dbe2 50%, #8b95a3 100%);
}

/* Card hover effect */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(10, 26, 48, 0.25);
}

/* Company logo card */
.company-card {
  transition: all 0.25s ease;
  border: 2px solid transparent;
}
.company-card.selected {
  border-color: var(--color-accent);
  background-color: #fdf8ea;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
}
.company-card img {
  transition: transform 0.2s ease;
}
.company-card:hover img {
  transform: scale(1.06);
}

/* Amount chip */
.amount-chip {
  transition: all 0.2s ease;
  cursor: pointer;
}
.amount-chip.selected {
  background-color: var(--color-accent);
  color: #0a1a30;
  border-color: var(--color-accent);
}

/* Step number circle */
.step-circle {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Mobile nav */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

/* Loading spinner */
.spinner {
  border: 3px solid #e2e8f0;
  border-top: 3px solid var(--color-accent);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade in animation */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Badge pulse (dorado) */
.pulse-dot {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

/* Toast notification */
#toast {
  transition: all 0.3s ease;
}

/* Active nav link */
.nav-link.active {
  color: var(--color-accent-dark);
  font-weight: 600;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
  border-color: var(--color-accent);
}

/* Logo institucional */
.brand-logo-frame {
  background: radial-gradient(circle, #0a1a30 0%, #123a63 100%);
  border: 1px solid rgba(201, 162, 39, 0.5);
}