:root{
--rojo:#b10024;
--rojo2:#e5003b;
--blanco:#ffffff;
/*--gris:#f6f6f8;
--gris2:#ececec;*/
--negro:#111111;
/*--texto:#666;*/
}

/*==============================
GENERAL
==============================*/
body{
background:var(--blanco);
font-family:'Poppins',sans-serif;
color:var(--negro);
overflow-x:hidden;
}

/*.content-wrapper{
background:
radial-gradient(circle at top right,
rgba(229,0,59,.04),
transparent 20%),
#ffffff;
}*/


/*==============================
TOPBAR 
==============================*/
.topbar-premium{
background:#0f0f0f;
color:white;
/*padding:10px 40px;*/
font-size:13px;
font-weight:600;
/*height:42px;*/
height:30px;
display:flex;
align-items:center;
}


.topbar-premium{
position:sticky;
top:0;
z-index:1050;
}


.topbar-premium{
position:sticky;
top:0;
z-index:1050;
}



.topbar-content{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1400px;
margin:auto;
}

.topbar-content i{
/*color:#C2183A;*/
color:#25D366;
margin-right:8px;
}

/* MOBILE */

@media(max-width:768px){

.topbar-premium{
padding:10px 20px;
font-size:11px;
text-align:center;
}

.topbar-content{
flex-direction:column;
gap:6px;
}

}

/*==============================
NAVBAR 
==============================*/
.navbar-premium{
/*background:rgba(255,255,255,.95);*/
/*background:rgba(139,0,30,.95);*/
background:rgba(139, 0, 30, .93);

backdrop-filter:blur(12px);
/*padding:18px 40px;*/
border-bottom:1px solid rgba(0,0,0,.05);
position:sticky;
/*top:0;*/
top:30px; /* <- clave: altura de la topbar */
z-index:1050;

}


/*==============================
BUSCADOR
==============================*/
.ui-autocomplete {
    max-height: 400px; /*200px Altura del cuadro de búsqueda*/
    overflow-y: auto;
    overflow-x: hidden;
    /*padding: 0;*/
    padding: 6px 0;
    margin-top: 4px;/*nuevo*/
    background: #ffffff;/*nuevo*/
    /*font-size: 1em;*/
    font-size: 14px;
    /*border: 1px solid #ddd;*/
    border: 1px solid #e2e2e2;
    /*border-radius: 4px;*/
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);/*nuevo*/
    z-index: 999; /* Asegura que el menú esté por encima de otros elementos */
    position: absolute;
    cursor: pointer;
}

/* Items */
.ui-menu-item {
    /*padding: 8px 12px;*/
    padding: 10px 14px;
    /*margin: 0;*/
    margin: 0 6px;    
    border-bottom: 1px solid #ddd; /*#ddd*/
    transition: all 0.2s ease;/*nuevo*/
    color: #333;/*nuevo*/
}

.ui-menu-item:nth-child(odd) {
    /*background-color: #FCF0F0;/* #f9f9f9 */
    background-color: #fff5f5;
}
.ui-menu-item:nth-child(even) {
    /*background-color: #ff9999; /*#e9e9e9*/
    background-color: #ffffff;
}

/* Hover elegante NUEVO*/
.ui-state-active,
.ui-state-active:hover,
.ui-state-active div,
.ui-state-active a {
    background: #b10024 !important;
    color: #ffffff !important;

}

/* Scroll personalizado NUEVO*/
.ui-autocomplete::-webkit-scrollbar {
    width: 8px;
}


.ui-autocomplete::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.ui-autocomplete::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 10px;
}

.ui-autocomplete::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Contenedor */
.input-group {
    position: relative;
}


/*==============================
LATIDOS DEL CORAZON BYFREE
==============================*/
@keyframes popHeart {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.08); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.05); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}
}

.corazon-animado {
  /*animation: popHeart 0.4s ease;*/
  animation: popHeart 0.4s infinite;
}
.fa-heart {
  animation: popHeart 2.2s ease-in-out infinite;
  /*transition: color 0.2s infinite;*/
  color: red;
}

.far.fa-heart {
  color: #F70000;
}



/*==============================
ICONOS
==============================*/

.fa-heart{
color:var(--rojo)!important;
animation:popHeart 2s ease-in-out infinite;
}



/*==============================
BOTONES PREMIUM 
==============================*/

/*.btn-premium{
background:linear-gradient(135deg,var(--rojo),var(--rojo2));
border:none;
color:white;
padding:14px 28px;
border-radius:50px;
font-weight:600;
letter-spacing:1px;
transition:.4s;

box-shadow:
0 15px 35px rgba(177,0,36,.15);
}

.btn-premium:hover{
transform:translateY(-3px);
box-shadow:
0 20px 50px rgba(177,0,36,.22);
}*/



/*==============================
CARDS PREMIUM
==============================*/
.card{
border:none!important;
border-radius:28px!important;
overflow:hidden;
background:white;

box-shadow:
0 15px 45px rgba(0,0,0,.05)!important;

transition:.4s;
}

.card:hover{
transform:translateY(-6px);

box-shadow:
0 25px 70px rgba(177,0,36,.08)!important;
}

.card-header{
background:white!important;
border-bottom:1px solid rgba(0,0,0,.04)!important;
padding:24px 28px!important;
}

.card-title{
font-weight:700!important;
font-size:24px!important;
font-family:'Playfair Display',serif;
}




/*==============================
RESPONSIVE BANNER
==============================*/

@media(max-width:768px){

.producto-titulo{
font-size:24px;
}

.card-title{
font-size:22px!important;
}

}


/*AGREGADO AL CSS*/
.hero-premium{
min-height:85vh;
height:auto;


background:
linear-gradient(90deg,
rgba(255,255,255,.92),
rgba(255,255,255,.65)),
url('https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

display:flex;
align-items:center;
}

.hero-content{
max-width:700px;
}

.hero-subtitle{
font-size:14px;
letter-spacing:4px;
font-weight:700;
color:var(--rojo);
margin-bottom:20px;
font-family: 'Allura', cursive;
}



.hero-content h1{
font-size:82px;
font-family: 'Montserrat', sans-serif;
font-weight:700;
line-height:1;
margin-bottom:25px;
}

.hero-content p{
font-size:20px;
line-height:1.9;
color:#666;
max-width:600px;
margin-bottom:35px;
}


/* =========================================
RESPONSIVE PREMIUM FLORISTEL BANNER
========================================= */

@media (max-width: 1200px){

.hero-content h1{
font-size:68px;
}

.producto-titulo{
font-size:26px;
}

}

/* =========================================
TABLETS BANNER
========================================= */

@media (max-width: 992px){

.hero-premium{
height:auto;
padding:120px 30px 80px;
text-align:center;
}

.hero-content{
max-width:100%;
margin:auto;
}

.hero-content h1{
font-size:58px;
line-height:1.1;
}

.hero-content p{
font-size:18px;
max-width:100%;
}

.producto-card{
margin-bottom:30px;
}

.producto-titulo{
font-size:24px;
}

.producto-precio{
font-size:26px;
}

.btn-cart{
width:52px;
height:52px;
font-size:18px;
}

.card-title{
font-size:22px!important;
}

.navbar-custom-red{
padding:10px 15px!important;
}

}

/* =========================================
MOBILE BANNER
========================================= */

@media (max-width: 768px){

body{
overflow-x:hidden;
}

.container,
.container-fluid{
padding-left:15px!important;
padding-right:15px!important;
}

.hero-premium{
height:auto;
padding:90px 20px 60px;
background-position:center;
}

.hero-content{
width:100%;
text-align:center;
}

.hero-content h1{
font-size:42px;
line-height:1.1;
margin-bottom:20px;
}

.hero-content p{
font-size:16px;
line-height:1.7;
}

.hero-subtitle{
font-size:12px;
letter-spacing:3px;
}

.btn-premium{
width:100%;
padding:15px;
font-size:13px;
}

.producto-card{
border-radius:24px;
}

.producto-info{
padding:22px;
}

.producto-titulo{
font-size:22px;
}

.producto-descripcion{
font-size:14px;
line-height:1.7;
}

.producto-footer{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

.producto-precio{
font-size:24px;
}

.btn-cart{
width:50px;
height:50px;
font-size:18px;
}

.card{
border-radius:24px!important;
}

.card-header{
padding:18px!important;
}

.card-title{
font-size:20px!important;
}

.txtmenu{
font-size:14px;
}

.navbar-brand img{
max-height:40px;
}

.ui-autocomplete{
width:95%!important;
left:10px!important;
right:10px!important;
}

footer{
padding:40px 20px;
text-align:center;
}

}

/* =========================================
SMALL MOBILE BANNER
========================================= */

@media (max-width: 480px){

.hero-content h1{
font-size:34px;
}

.hero-content p{
font-size:15px;
}

.producto-titulo{
font-size:20px;
}

.producto-precio{
font-size:22px;
}

.btn-premium{
font-size:12px;
letter-spacing:1px;
}

.badge-premium{
font-size:10px;
padding:8px 14px;
}

}