@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

:root {
  --font-montserrat: 'Montserrat', sans-serif;
  
  /* PALETA OFICIAL BINOX */
  --c-bg: #FAFCFF;       /* Blanco hielo de fondo */
  --c-gray: #8C8C8C;     /* Gris acero / bordes / textos secundarios */
  --c-indigo: #4E5380;   /* Azul índigo pizarra / marca principal / encabezados */
  --c-slate-blue: #4E7280; /* Azul petróleo / acento intermedio */
  --c-teal: #4E807D;     /* Verde azulado templado / estado / seguridad */
  
  /* WhatsApp */
  --c-whatsapp: #25D366;
  --c-whatsapp-hover: #20BA5A;
}

* {
  font-family: var(--font-montserrat);
  scroll-behavior: smooth;
}

body {
  background-color: var(--c-bg);
  color: #1e293b;
  overflow-x: hidden;
}

/* Patrón sutil arquitectónico de fondo */
.bg-grid-subtle {
  background-color: #FAFCFF;
  background-image: 
    radial-gradient(rgba(78, 83, 128, 0.07) 1px, transparent 1px),
    radial-gradient(rgba(78, 114, 128, 0.04) 1px, transparent 1px);
  background-size: 32px 32px, 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* Gradientes con la paleta de Binox */
.text-brand-gradient {
  background: linear-gradient(135deg, #4E5380 0%, #4E7280 50%, #4E807D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-brand-gradient {
  background: linear-gradient(135deg, #4E5380 0%, #4E7280 100%);
}

.bg-teal-gradient {
  background: linear-gradient(135deg, #4E7280 0%, #4E807D 100%);
}

/* Tarjetas limpias con borde sutil de la paleta */
.card-binox {
  background-color: #FFFFFF;
  border: 1px solid rgba(140, 140, 140, 0.22);
  box-shadow: 0 4px 20px -2px rgba(78, 83, 128, 0.06);
  transition: all 0.25s ease-in-out;
}

.card-binox:hover {
  border-color: rgba(78, 114, 128, 0.5);
  box-shadow: 0 10px 30px -4px rgba(78, 83, 128, 0.12);
  transform: translateY(-2px);
}

/* Insignia "En Desarrollo" */
.badge-dev {
  background-color: rgba(78, 128, 125, 0.12);
  color: #4E807D;
  border: 1px solid rgba(78, 128, 125, 0.3);
}

/* Muestra de color para acabados */
.finish-swatch-satin {
  background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 50%, #94A3B8 100%);
}

.finish-swatch-black {
  background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
}

/* Botón flotante pulsante de WhatsApp */
.whatsapp-pulse {
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Slider Cotizador */
input[type="range"] {
  accent-color: #4E7280;
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FAFCFF;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8C8C8C;
}