/* 
  INMOBBS S.A. - Estilos Premium Personalizados
  Desarrollado para complementar Tailwind CSS.
*/

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

/* Variables CSS para uso en componentes complejos */
:root {
  --brand-green: #249663;
  --brand-dark: #303030;
  --brand-gray: #818281;
  --brand-light: #F8F9FA;
  --brand-green-hover: #1e7d52;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  color: var(--brand-dark);
  background-color: var(--brand-light);
  overflow-x: hidden;
}

/* Tipografía de títulos */
h1, h2, h3, .font-serif-lux {
  font-family: 'Playfair Display', serif;
}

/* Efecto Glassmorphism para navegación y tarjetas flotantes */
.glass-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.glass-nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Micro-animaciones */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
}

.btn-premium:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Estilización premium del slider de la calculadora */
input[type="range"].slider-custom {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #E5E7EB;
  border-radius: 9999px;
  outline: none;
  transition: background 0.3s;
}

/* Para navegadores WebKit (Chrome, Safari, Edge) */
input[type="range"].slider-custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-green);
  cursor: pointer;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 6px -1px rgba(36, 150, 99, 0.3), 0 2px 4px -1px rgba(36, 150, 99, 0.2);
  transition: all 0.15s ease-in-out;
}

input[type="range"].slider-custom::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: var(--brand-green-hover);
  box-shadow: 0 10px 15px -3px rgba(36, 150, 99, 0.4), 0 4px 6px -2px rgba(36, 150, 99, 0.3);
}

/* Para Firefox */
input[type="range"].slider-custom::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-green);
  cursor: pointer;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 6px -1px rgba(36, 150, 99, 0.3), 0 2px 4px -1px rgba(36, 150, 99, 0.2);
  transition: all 0.15s ease-in-out;
}

input[type="range"].slider-custom::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: var(--brand-green-hover);
}

/* Efectos de Hover y Transiciones de la Galería */
.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

@media (min-width: 768px) {
  .carousel-slide {
    flex: 0 0 50%;
    min-width: 50%;
  }
}

@media (min-width: 1024px) {
  .carousel-slide {
    flex: 0 0 33.333333%;
    min-width: 33.333333%;
  }
}

/* Clases de animación */
.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.slide-up {
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilo para los inputs con validación */
.form-input-container {
  position: relative;
}

.form-input-container input {
  transition: all 0.3s ease;
}

.form-input-container input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 150, 99, 0.15);
}

.input-valid {
  border-color: #10B981 !important;
}

.input-invalid {
  border-color: #EF4444 !important;
}

/* Animación del indicador de envío exitoso */
.check-animate {
  animation: scaleUpCheck 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes scaleUpCheck {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}