/*---------------------------------------------------------------------
    File Name: barra-superior.css
---------------------------------------------------------------------*/

.container-fluid {
	position: fixed;
	top: 0px;
}

.col-md-3 {
    padding: 0px 0px;
	background-image: linear-gradient(
        to bottom, 
        rgba(188, 136, 61, 0.75),  /* 75% opaco */
        rgba(245, 228, 123, 0.75),
        rgba(188, 136, 61, 0.75)
    );
}

.col-md-9 {
    padding: 0px 0px;
	background-image: linear-gradient(
        to bottom, 
        rgba(188, 136, 61, 0.75),  /* 75% opaco */
        rgba(245, 228, 123, 0.75),
        rgba(188, 136, 61, 0.75)
    );
}


/* Boton hamburguesa */
.c-header__button-nav {
    display: inline-block;
    cursor: pointer;
    width: 30px;
    height: 22px;
	z-index: 999; /* más alto que el overlay */
	position: relative; /* importante para que z-index funcione */
	top: -2px;
	margin-right: 16px; /* se aleja del borde derecho */
    filter:
    	drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
    	drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.c-header__button-nav:hover {
	animation: hover-c-header 3s forwards;
}

@keyframes hover-c-header {
    0% {
        filter:
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));

        transform: scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 5px rgba(245, 212, 119, 0.45))
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
        transform: scale(1.02);
    }
    100% {
        filter:
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
        transform: scale(1);
    }
}

/* =========================================================
   MENÚ HAMBURGUESA - DORADO PREMIUM
   ========================================================= */
.c-header__button-nav-item {
    display: block;
    height: 4px;
    width: 100%;
    margin: 4px 0;
    background: linear-gradient(
        to right,
        #A87522,
        #F5D477,
        #A87522
    );
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25);
    transition:
        0.3s,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

/* =========================================================
   HOVER DEL MENÚ
   ========================================================= */
.c-header__button-nav:hover .c-header__button-nav-item {
    background: linear-gradient(
        to right,
        #C08A2E,
        #FFE39A,
        #C08A2E
    );
    box-shadow:
        0 0 5px rgba(245, 212, 119, 0.45);
}


/* --- LA MAGIA DE LA ANIMACIÓN --- */
.c-header__button-nav.open .c-header__button-nav-item--top {
    transform: rotate(45deg) translate(5px, 5px);
}
.c-header__button-nav.open .c-header__button-nav-item--middle {
    opacity: 0;
}
.c-header__button-nav.open .c-header__button-nav-item--bottom {
    transform: rotate(-45deg) translate(6px, -6px);
}


/* BARRA - CRUZ */
.cont_cruz {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  cursor: pointer;
}

.cont_cruz span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease;
  transform: translate(-50%, -50%);
}

/* Segunda línea: vertical inicial */
.cont_cruz span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Estado activo: se convierte en "-" */
.cont_cruz.active span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(0deg);
}



/* =========================================================
   CANDADO - DORADO PREMIUM
   ========================================================= */
.lock-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	position: relative;
	top: 5px;
	margin-right: -14px;		/* se aleja del boton derecho */
}

.lock-btn .lock {
    width: 30px;
    height: 30px;
    color: #D6A84A;
    filter:
    	drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
    	drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    transition:
        color 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;
}

/* Al pasar el mouse */
.lock-btn:hover .lock {
    color: #F5D477;
    filter:
        drop-shadow(0 0 4px rgba(245, 212, 119, 0.45));
    transform: scale(1.05);
	animation: hoverLock 5s forwards;
}

@keyframes hoverLock {
    0% {
        color: #F5D477;
        filter: drop-shadow(0 0 4px rgba(245, 212, 119, 0.45));
        transform: scale(1.05);
    }

    100% {
        color: #D6A84A;
        filter:
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
        transform: scale(1);
    }
}



/* =========================================================
   BOTÓN LUPA - DORADO PREMIUM
   ========================================================= */
.lupa-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transform: translate(90%, -4%);
    transition:
        transform 0.2s ease,
        filter 0.25s ease;
	margin-right: 2px;			/* se aleja del boton derecho */
}

/* =========================================================
   ICONOS DE LA LUPA
   ========================================================= */
.lupa-btn .icon {
    display: none;
    width: 31px;
    height: 31px;
    color: #D6A84A;
    filter:
    	drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
    	drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    transition:
        color 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;
}

/* =========================================================
   LUPA VISIBLE
   ========================================================= */
.lupa-btn .lupa {
    display: block;
    transform: translateY(6px);
}

/* =========================================================
   HOVER LUPA
   ========================================================= */
.lupa-btn:hover .lupa {
    color: #F5D477;
    filter:
        drop-shadow(0 0 4px rgba(245, 212, 119, 0.45));
    transform: translateY(6px) scale(1.05);
	animation: hoverLupa 3s forwards;
}

@keyframes hoverLupa {
    0% {
        color: #F5D477;
        filter: drop-shadow(0 0 4px rgba(245, 212, 119, 0.45));
        transform: translateY(6px) scale(1.05);
    }

    100% {
        color: #D6A84A;
        filter:
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
        transform: translateY(6px) scale(1);
    }
}



/* =========================================================
   ICONO CLOSE
   ========================================================= */
.close {
    display: block;
    transform: translateY(6px) scale(1.2);
    background: transparent;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #D6A84A;
    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    transition:
        color 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;
}

/* =========================================================
   HOVER CLOSE
   ========================================================= */
.lupa-btn:hover .close {
	color: #F5D477;
	filter: drop-shadow(0 0 4px rgba(245, 212, 119, 0.45));
	transform: translateY(6px) scale(1.2);
	animation: hoverClose 3s forwards;
}

@keyframes hoverClose {
    0% {
        color: #F5D477;
        filter: drop-shadow(0 0 4px rgba(245, 212, 119, 0.45));
        transform: translateY(6px) scale(1.25);
    }

    100% {
        color: #D6A84A;
        filter:
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
        transform: translateY(6px) scale(1.2);
    }
}


/* CONTENEDOR BÚSQUEDA */
/* Contenedor general de los elementos del header */
.header-ul {
    display: flex;
    gap: 0px;
    align-items: center;
}

.buscador-input {
    width: 0;
    opacity: 0;
    padding: 0px 0px;
    border: 2px solid #ccc;
    transform: translate(16%, calc(0% - 5px));
    border-radius: 20px;
    outline: none;
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    font-size: 14px;
    pointer-events: none;
}

.buscador-input.active {
    display: inline-block;
    opacity: 1;
    padding: 0px 10px;
    transform: translate(16%, calc(0% - 5px));
    width: 180px;
    pointer-events: auto;
	margin-right: 16px;			/* se aleja del boton derecho */
}


/* =========================================================
   RESALTADO DE LA BÚSQUEDA
   ========================================================= */
mark{
    background: rgba(255,255,0,.35);
    color: inherit;
    padding: 0;
    border-radius: 2px;
}
mark.current{
    background: rgba(255,140,0,.55);
}