/* Estilos para Trámites Luis - Luis Guillermo Munera */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Outfit:wght@500;600;700;800;900&family=Caveat:wght@600;700&display=swap');

:root {
  --color-flyer-navy: #0a1f38;
  --color-flyer-navy-dark: #071526;
  --color-flyer-navy-card: #0e2744;
  --color-flyer-blue: #0099e6;
  --color-flyer-blue-light: #38bdf8;
  --color-flyer-yellow: #fed100;
  --color-flyer-yellow-hover: #ffdf33;
  --color-whatsapp: #25d366;
  --color-slate-light: #f0f4f8;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #0f172a;
  background-color: #f1f5f9;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', sans-serif;
}

.font-script {
  font-family: 'Caveat', cursive;
}

/* Efectos para el logo oficial */
.logo-glow {
  filter: drop-shadow(0 0 15px rgba(0, 153, 230, 0.45)) drop-shadow(0 0 25px rgba(254, 209, 0, 0.25));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-glow:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 22px rgba(0, 153, 230, 0.65)) drop-shadow(0 0 35px rgba(254, 209, 0, 0.4));
}


/* ============================================================
   REGLAS CRÍTICAS DE CONTRASTE Y LEGIBILIDAD PARA EL INICIO
   (Garantiza que la letra NUNCA quede del mismo color del fondo)
   ============================================================ */

/* Toda la sección #inicio tendrá texto blanco brillante por defecto */
#inicio {
  color: #ffffff !important;
  background: linear-gradient(135deg, #071526 0%, #0a1f38 50%, #0e2744 100%) !important;
}

#inicio h1,
#inicio h2,
#inicio h3,
#inicio h4,
.hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

#inicio .highlight-yellow {
  color: #fed100 !important;
  text-shadow: 0 0 15px rgba(254, 209, 0, 0.5) !important;
}

#inicio .highlight-cyan {
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

#inicio p {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

#inicio p.hero-desc {
  color: #f8fafc !important;
  font-size: 1.05rem;
  line-height: 1.6;
}

#inicio p.hero-desc strong {
  color: #fed100 !important;
  font-weight: 800 !important;
}

#inicio .font-script {
  color: #38bdf8 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

/* Listas y textos dentro de las tarjetas del inicio */
#inicio ul li {
  color: #f8fafc !important;
}

#inicio ul li strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

#inicio .card-moto,
#inicio .card-carro {
  background-color: #0c2340 !important;
  color: #ffffff !important;
}

#inicio .card-moto h3,
#inicio .card-carro h3 {
  color: #ffffff !important;
}

/* Badges inferiores en inicio */
#inicio .badge-pillar {
  background-color: #071526 !important;
  color: #ffffff !important;
  border: 1px solid #1e3a8a !important;
}

#inicio .badge-pillar span.badge-title {
  color: #ffffff !important;
  font-weight: 800 !important;
}

#inicio .badge-pillar span.badge-sub {
  color: #cbd5e1 !important;
}

/* Cinta amarilla idéntica a los volantes */
.yellow-ribbon {
  background-color: #fed100 !important;
  color: #071526 !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 15px rgba(254, 209, 0, 0.45) !important;
}

.yellow-ribbon span,
.yellow-ribbon i {
  color: #071526 !important;
}

/* Header y Barra de navegación */
header {
  background-color: #071526 !important;
  color: #f8fafc !important;
}

header a {
  color: #f8fafc !important;
}

nav {
  background-color: #0a1f38 !important;
}

nav a {
  color: #ffffff !important;
  font-weight: 700 !important;
}

nav a:hover {
  color: #fed100 !important;
}

/* Fondo y olas */
.bg-flyer-gradient {
  background: linear-gradient(135deg, #071526 0%, #0a1f38 45%, #0e2e54 100%) !important;
}

.bg-flyer-wave {
  background: radial-gradient(circle at 10% 20%, rgba(0, 153, 230, 0.22) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(254, 209, 0, 0.15) 0%, transparent 45%) !important;
}

/* Tarjeta de servicio estilo píldora blanca */
.service-pill-white {
  background: #ffffff !important;
  color: #071526 !important;
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(7, 21, 38, 0.06);
  transition: all 0.25s ease-in-out;
}

.service-pill-white:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 153, 230, 0.18);
  border-color: #0099e6;
}

/* Pestañas de selector Carros / Motos */
.vehicle-filter-btn.active {
  background-color: #fed100 !important;
  color: #071526 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(254, 209, 0, 0.4) !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #071526;
}
::-webkit-scrollbar-thumb {
  background: #0099e6;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fed100;
}