/* Base & Typography */
html { scroll-behavior: smooth; }
body { 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
  background-color: #fcfcf9;
  color: #0c2340;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Animations */
@keyframes gradshift { 
  0% { background-position: 0% 50%; } 
  50% { background-position: 100% 50%; } 
  100% { background-position: 0% 50%; } 
}
@keyframes float { 
  0% { transform: translateY(0); } 
  50% { transform: translateY(-10px); } 
  100% { transform: translateY(0); } 
}
@keyframes sheen { 
  0% { transform: translateX(-120%) skewX(-18deg); } 
  100% { transform: translateX(220%) skewX(-18deg); } 
}

/* Buttons & Interactive Elements */
.btn-red {
  background-image: linear-gradient(90deg, #b42d3d 0%, #b42d3d 55%, #8f1f2a 100%);
  background-size: 200% 200%;
  animation: gradshift 6s ease-in-out infinite;
}

.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  width: 55%;
  transform: translateX(-120%) skewX(-18deg);
  animation: sheen 3.8s ease-in-out infinite;
}

.btn-outline {
  background: #ffffff;
  border: 2px solid #a89968;
  color: #003983;
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Text Effects */
.text-gradient {
  background: linear-gradient(90deg, #003983, #b42d3d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards & Containers */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(12, 35, 64, 0.12);
}

/* Timeline (Hitos) */
/* El contenedor debe ser relativo para que ::before se posicione correctamente */
.hitos-line {
  position: relative !important;
}

.hitos-line::before {
  content: '';
  position: absolute !important;
  left: 24px !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 2px !important;
  height: 100% !important;
  background: linear-gradient(to bottom, transparent, #a89968, #b42d3d, #003983, transparent) !important;
  z-index: 0 !important;
}

.hero-orb {
  position: absolute;
  inset: -6rem -4rem auto -4rem;
  height: 520px;
  background:
    radial-gradient(900px 360px at 18% 28%, rgba(180,45,61,.26), transparent 68%),
    radial-gradient(800px 340px at 78% 18%, rgba(0,57,131,.22), transparent 72%),
    radial-gradient(620px 280px at 60% 70%, rgba(168,153,104,.20), transparent 70%);
  filter: blur(24px);
  animation: float 10s ease-in-out infinite;
  pointer-events: none;
}

/* Fallback for custom colors (Ensures visibility even if JS fails) */
/* Solo aplicamos !important a los colores críticos para evitar conflictos con Tailwind si se carga después */
.bg-mespace-dark { background-color: #0c2340 !important; }
.bg-mespace-blue { background-color: #003983 !important; }
.bg-mespace-red { background-color: #b42d3d !important; }
.text-mespace-dark { color: #0c2340 !important; }
.text-mespace-blue { color: #003983 !important; }
.text-white { color: #ffffff !important; }

/* personalizaciones */
.header-web{
    padding: 0px !important;
}
.img-slider{
padding-left: 0rem !important;
    padding-right: 0rem !important;
}