/* CMB Construcciones - Bootstrap Custom Variables */
/* Este archivo contiene solo las variables personalizadas de Bootstrap */

:root {
  /* Colores personalizados */
  --bs-primary: #3dc9b3;
  --bs-primary-rgb: 61, 201, 179;
  --bs-secondary: #ff8c00;
  --bs-secondary-rgb: 255, 140, 0;
  --bs-dark: #242830;
  --bs-dark-rgb: 36, 40, 48;
  
  /* Espaciado personalizado */
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  
  /* Bordes redondeados */
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 12px;
  
  /* Sombras personalizadas */
  --bs-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --bs-box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --bs-box-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  
  /* Transiciones */
  --bs-transition: all 0.3s ease;
  --bs-transition-fade: opacity 0.15s linear;
  --bs-transition-collapse: height 0.35s ease;
}

/* Utilidades personalizadas */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.text-shadow-lg {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--bs-primary), #309383) !important;
}

.bg-gradient-dark {
  background: linear-gradient(135deg, var(--bs-dark), #2c3e50) !important;
}

/* Optimizaciones de rendimiento */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Responsive utilities personalizadas */
@media (max-width: 576px) {
  .display-2 {
    font-size: 2.5rem;
  }
  
  .display-4 {
    font-size: 2rem;
  }
  
  .fs-4 {
    font-size: 1.1rem !important;
  }
  
  .fs-5 {
    font-size: 1rem !important;
  }
}

@media (max-width: 768px) {
  .hero .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .hero .d-flex.flex-column.flex-sm-row {
    flex-direction: column !important;
  }
}