@import url('../fonts/');
:root {
  --soy: #793a80;
  --brand: #de088d;
  --brand-2: #4B1A8A;
  --accent: #f79132;
  --ink: #4B1A8A;
  --hover: #4a1b8b;
  --hero-grad: linear-gradient(120deg, #de078d, #1213a1);
}
/* ===== VARIABLES DE COLORES PERSONALIZABLES ===== */
:root {
  /* 🎨 CAMBIA ESTOS COLORES SEGÚN TU MARCA */
  --primary-color: #4B1A8A;
  --secondary-color: #5A2D91;
  --accent-color: #F7931E;           /* Naranja/Amarillo */
  --success-color: #28A745;          /* Verde */
  --marca-color: #4B1A8A;          /* Verde */
  
  /* Gradientes personalizables */
  --navbar-gradient: linear-gradient(135deg, #4B1A8A 0%, #4B1A8A 50%, #4B1A8A 100%);
  --button-gradient: linear-gradient(135deg, #DF088D 0%, #DF088D 100%);
  --button-gradient-2: linear-gradient(135deg, #4B1A8A 0%, #4B1A8A 100%);
  --hover-gradient: linear-gradient(135deg, #3D6AB0 0%, #2A466D 100%);
  
  /* Sombras */
  --shadow-light: 0 2px 10px rgba(45, 90, 160, 0.1);
  --shadow-medium: 0 4px 20px rgba(45, 90, 160, 0.15);
  --shadow-heavy: 0 8px 30px rgba(45, 90, 160, 0.2);
}



* {
  box-sizing: border-box
}
body {
  color: var(--ink);
  font-family: "FuturaCyrillicMedium", sans-serif;
}
.futura {
  font-family: "FuturaCyrillicMedium", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.cpointer{
    cursor: pointer;
}
.btn-link {
  color: var(--ink) !important;
}
.bg-cocina {
  background: #ee2f5a;
}
.bg-hacer img, .bg-cocina img {
  opacity: 0.2;
}
.bg-hacer {
  background-color: #20b5bb;
}
.bg-alojar {
  background-color: var(--soy);
}
.btn-outline-marca {
  border-color: var(--ink);
}
.btn-outline-marca:hover, .bg-marca {
  background-color: var(--ink) !important;
  color: white;
}
.btn-marca {
  --bs-btn-border-color: var(--brand);
  --bs-btn-bg: var(--brand);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #4a1b8b;
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #FFF;
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #DDD;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.accordion-button:not(.collapsed) {
  background-color: var(--ink);
  color: white;
}
.text-magenta {
  color: #793a80;
}
.link-dark:hover, .text-marca-h:hover, .text-marca {
  color: var(--ink) !important;
}
.nav-blur {
  backdrop-filter: saturate(180%) blur(6px);
}
.navbar .nav-link {
  font-weight: 500;
}
.top-35 {
  top: 35%;
}
.z-100 {
  z-index: 100 !important;
}
.link-dark, .text-marca-h {
  color: black;
}
.hero {
  min-height: 72vh;
  position: relative;
  overflow: clip;
  padding-top: 0rem;
}
.hero-bg {
  display: block;
  width: 100%;
  height: 72vh;
  object-fit: cover;
  filter: brightness(.75);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-grad), linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .15));
  pointer-events: none;
}
.hero-content {
  position: absolute;
  z-index: 1000000;
}
.search-box {
  border: 1px solid rgba(0, 0, 0, .06);
}
.card-listing .btn-fav {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .05);
}
.card-listing img {
  aspect-ratio: 16/11;
  object-fit: cover;
}
.card-listing .price {
  font-size: 1.05rem;
}
.card-listing .rating {
  color: #793a80;
}
.object-fit-cover {
  object-fit: cover;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
.btn-primary {
  --bs-btn-border-color: var(--brand);
  --bs-btn-bg: var(--brand);
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: #4a1b8b;
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #FFF;
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #DDD;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.link-primary {
  color: var(--brand);
}
.text-primary {
  color: var(--brand) !important;
}
.badge.bg-primary-subtle {
  background-color: color-mix(in srgb, var(--brand) 15%, white);
  color: var(--brand);
}
.banner-top {
  position: absolute;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
  height: 200px;        /* altura fija */
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-top img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
}
/* Mantener la lista debajo del input */
.autocomplete-container {
  position: relative;
  width: 100%
}
.autocomplete-list {
  position: absolute;
  z-index: 1050; /* encima de otros elementos */
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow: auto;
}
.autocomplete-item {
  cursor: pointer;
}
.autocomplete-item:hover, .autocomplete-item.active {
  background-color: rgba(0, 0, 0, 0.05);
}



/* ===== NAVBAR PRINCIPAL ===== */
.navbar-custom {
  background-color: var(--ink);
}

/* Efecto de scroll - navbar más compacto */
.navbar-custom.scrolled {
  background: var(--ink);
  padding: 0.25rem 0;
}

/* ===== BRAND/LOGO ===== */
.navbar-brand {
  transition: transform 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

.logo-img {
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.navbar-custom.scrolled .logo-img {
  height: 60px !important;
  transition: height 0.3s ease;
}

.brand-text {
  color: white !important;
  font-size: 1.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ===== NAVEGACIÓN LINKS ===== */
.nav-link-custom {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  padding: 0.75rem 1rem !important;
  border-radius: 8px;
  margin: 0.2rem 0.1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo al hover */
.nav-link-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.nav-link-custom:hover::before {
  left: 100%;
}

.nav-link-custom:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-light);
}

.nav-link-custom.active {
  color: white !important;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* ===== BOTÓN PRINCIPAL ===== */
.btn-custom-primary {
  background: var(--button-gradient);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-medium);
  position: relative;
  overflow: hidden;
  display: inline-block;
}


.btn-custom-primary:hover {
  text-decoration: none;
  color: white!important;
  background: #4a1b8b;
}


.btn-custom-primary i,
.btn-custom-primary span {
  position: relative;
  z-index: 2;
}

/* ===== TOGGLER PERSONALIZADO ===== */
.custom-toggler {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

.custom-toggler:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.custom-toggler:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  outline: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 991.98px) {
  .navbar-custom {
    padding: 0.5rem 0;
  }
  
  .nav-link-custom {
    margin: 0.1rem 0;
    text-align: center;
  }
  
  .btn-custom-primary {
    width: 100%;
    margin-top: 1rem;
    text-align: center;
  }
  
  .navbar-collapse {
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ===== ANIMACIONES DE ENTRADA ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar-nav .nav-item {
  animation: fadeInUp 0.5s ease;
}

.navbar-nav .nav-item:nth-child(1) { animation-delay: 0.1s; }
.navbar-nav .nav-item:nth-child(2) { animation-delay: 0.2s; }
.navbar-nav .nav-item:nth-child(3) { animation-delay: 0.3s; }
.navbar-nav .nav-item:nth-child(4) { animation-delay: 0.4s; }

/* ===== TEMA OSCURO (OPCIONAL) ===== */
@media (prefers-color-scheme: dark) {
  .navbar-custom {
    background-color:var(--ink);
  }
  
  .nav-link-custom:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ===== CLASES ADICIONALES PARA COLORES ALTERNATIVOS ===== */

/* Tema Verde */
.navbar-green {
  --primary-color: #28A745;
  --secondary-color: #1E7E34;
  --navbar-gradient: linear-gradient(135deg, #28A745 0%, #1E7E34 50%, #28A745 100%);
}

/* Tema Morado */
.navbar-purple {
  --primary-color: #4B1A8A;
  --secondary-color: #5A2D91;
  --navbar-gradient: linear-gradient(135deg, #4B1A8A 0%, #5A2D91 50%, #4B1A8A 100%);
}

/* Tema Rojo */
.navbar-red {
  --primary-color: #DC3545;
  --secondary-color: #B02A37;
  --navbar-gradient: linear-gradient(135deg, #DC3545 0%, #B02A37 50%, #DC3545 100%);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}



@media (max-width: 991.98px) {
  .hero {
    min-height: 80vh;
  }
  .hero-content {
    margin-top: 50px;
  }
  .banner-top {
    bottom: -10px;
  }
  .display-4 {
    font-size: 1.8rem
  }
  .display-5 {
    font-size: 1.5rem
  }
}