/* ==========================================
   PEGACER SIKAN
   VERSION 1.0
========================================== */

:root{

    --azul:#003A7D;
    --azul-hover:#0057A8;

    --dorado:#E5B200;
    --dorado-hover:#f5c400;

    --oscuro:#0F172A;

    --gris:#64748B;
    --gris-claro:#F8FAFC;

    --blanco:#FFFFFF;

    --sombra:
    0 10px 30px rgba(0,0,0,.08);

    --radio:16px;

}

/* ==========================================
   GENERALES
========================================== */

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    color:var(--oscuro);

    background:var(--blanco);

    overflow-x:hidden;

}

a{
    text-decoration:none;
}

.section-title{

    font-size:40px;

    font-weight:700;

    color:var(--azul);

    margin-bottom:15px;

}

.section-subtitle{

    color:var(--gris);

    max-width:700px;

    margin:auto;

}

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

.btn-pegacer{

    background:var(--dorado);

    color:#000;

    font-weight:600;

    border:none;

    padding:14px 30px;

    border-radius:10px;

    transition:.3s;

}

.btn-pegacer:hover{

    background:var(--dorado-hover);

    transform:translateY(-3px);

}

.btn-pegacer-blue{

    background:var(--azul);

    color:#fff;

    font-weight:600;

    border:none;

    padding:14px 30px;

    border-radius:10px;

    transition:.3s;

}

.btn-pegacer-blue:hover{

    background:var(--azul-hover);

    transform:translateY(-3px);

}

/* ==========================================
   TOPBAR
========================================== */

.topbar{

    background:var(--azul);

    color:white;

    font-size:14px;

    padding:8px 0;

}

.topbar i{

    color:var(--dorado);

    margin-right:5px;

}

/* ==========================================
   NAVBAR
========================================== */

.navbar{

    background:white !important;

    padding:15px 0;

    box-shadow:0 2px 20px rgba(0,0,0,.05);

}

.navbar-brand img{

    max-height:70px;

}

.nav-link{

    color:var(--oscuro)!important;

    font-weight:600;

    margin:0 10px;

    position:relative;

}

.nav-link:hover{

    color:var(--azul)!important;

}

.nav-link::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:3px;

    background:var(--dorado);

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}




.dropdown-menu{

    border:none;

    border-radius:15px;

    box-shadow:0 15px 35px rgba(0,0,0,.10);

    padding:10px;

}

.dropdown-item{

    border-radius:10px;

    padding:10px 15px;

}

.dropdown-item:hover{

    background:#F5F7FA;

    color:var(--azul);

}






/* ==========================================
   HERO
========================================== */

.hero{

    min-height:650px;

    display:flex;

    align-items:center;

    position:relative;

    color:white;

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    url('../img/hero.png');

    background-size:cover;

    background-position:center;

}



.categoria-total{

    display:inline-block;

    background:#EFF6FF;

    color:var(--azul);

    font-size:14px;

    font-weight:600;

    padding:6px 12px;

    border-radius:30px;

    margin-bottom:15px;

}

.categoria-total i{

    color:var(--dorado);

    margin-right:5px;

}





.page-banner{

    background:
    linear-gradient(
    rgba(0,58,125,.85),
    rgba(0,58,125,.85)
    ),
    url('../img/hero.png');

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

    color:white;

    padding:120px 0;

    text-align:center;

}

.page-banner h1{

    font-size:55px;
    font-weight:800;

}

.page-banner p{

    font-size:20px;
    opacity:.9;

}


.hero h1{

    font-size:70px;

    font-weight:800;

    line-height:1.1;

}

.hero h1 span{

    color:var(--dorado);

}

.hero p{

    font-size:22px;

    margin:25px 0;

    max-width:650px;

}

/* ==========================================
   BENEFICIOS
========================================== */

.beneficios{

    background:var(--azul);

    color:white;

    padding:30px 0;

}

.beneficio-item{

    text-align:center;

}

.beneficio-item i{

    color:var(--dorado);

    font-size:40px;

    margin-bottom:10px;

}

.beneficio-item h4{

    font-size:28px;

    font-weight:700;

}

.beneficio-item p{

    margin:0;

}

/* ==========================================
   CATEGORIAS
========================================== */

.categoria-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--sombra);

    transition:.3s;

    height:100%;

}

.categoria-card:hover{

    transform:translateY(-8px);

}

.categoria-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.categoria-body{

    padding:20px;

}

.categoria-body h4{

    font-size:22px;

    font-weight:700;

    color:var(--azul);

}

.categoria-body p{

    color:var(--gris);

    min-height:60px;

}

/* ==========================================
   NOSOTROS
========================================== */

.nosotros{

    background:var(--gris-claro);

}

.nosotros img{

    border-radius:20px;

    box-shadow:var(--sombra);

}

.nosotros h2{

    color:var(--azul);

    font-weight:700;

}

/* ==========================================
   EQUIPO
========================================== */

.equipo-card{

    background:white;

    border-radius:18px;

    box-shadow:var(--sombra);

    padding:25px;

    text-align:center;

    transition:.3s;

}

.equipo-card:hover{

    transform:translateY(-6px);

}

.equipo-card img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:15px;

}

.equipo-card h5{

    font-weight:700;

    color:var(--azul);

}

.equipo-card p{

    color:var(--gris);

}

/* ==========================================
   FOOTER
========================================== */

.footer{

    background:var(--oscuro);

    color:white;

    padding:70px 0 20px;

}

.footer-logo{

    max-height:90px;

}

.footer h5{

    color:var(--dorado);

    margin-bottom:20px;

}

.footer a{

    color:white;

}

.footer a:hover{

    color:var(--dorado);

}

.footer hr{

    border-color:rgba(255,255,255,.15);

}

/* ==========================================
   WHATSAPP FLOTANTE
========================================== */

.whatsapp-float{

    position:fixed;

    bottom:25px;

    right:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:9999;

    box-shadow:0 5px 20px rgba(0,0,0,.25);

}

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

@media(max-width:991px){

    .hero{

        min-height:550px;

        text-align:center;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:18px;

    }

}

@media(max-width:768px){

    .section-title{

        font-size:30px;

    }

    .hero{

        min-height:500px;

    }

    .hero h1{

        font-size:34px;

    }

    .navbar-brand img{

        max-height:55px;

    }

}



















/* ==========================
   FOOTER
========================== */

.footer{

	background:#07152f;

	color:white;

	padding:70px 0 20px;

}

.footer-logo{

	max-height:90px;

}

.footer h5{

	color:var(--dorado);

	margin-bottom:20px;

	font-weight:700;

}

.footer-links{

	list-style:none;

	padding:0;

	margin:0;

}

.footer-links li{

	margin-bottom:10px;

}

.footer-links a{

	color:white;

	transition:.3s;

}

.footer-links a:hover{

	color:var(--dorado);

	padding-left:5px;

}

.footer-contact{

	list-style:none;

	padding:0;

	margin:0;

}

.footer-contact li{

	margin-bottom:15px;

}

.footer-contact i{

	color:var(--dorado);

	width:25px;

}

.footer-social{

	display:flex;

	gap:10px;

	margin-top:20px;

}

.footer-social a{

	width:40px;

	height:40px;

	display:flex;

	align-items:center;

	justify-content:center;

	background:rgba(255,255,255,.08);

	border-radius:50%;

	color:white;

	transition:.3s;

}

.footer-social a:hover{

	background:var(--dorado);

	color:#000;

}

.footer-map{

	border-radius:15px;

	overflow:hidden;

	box-shadow:0 10px 20px rgba(0,0,0,.2);

}










/* ==========================
   NAVBAR SCROLL
========================== */

.navbar-scrolled{

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

}

/* ==========================
   VOLVER ARRIBA
========================== */

.btn-top{

    position:fixed;

    bottom:100px;

    right:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--azul);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}

.btn-top.show{

    opacity:1;

    visibility:visible;

}









/*=========================================
MODAL PRODUCTO
=========================================*/

.modal-producto{

    border:none;

    border-radius:25px;

    overflow:hidden;

}

.modal-producto .modal-header{

    background:#F8FAFC;

}

.modal-producto .modal-body{

    min-height:450px;

}

.producto-imagen{

    width:100%;

    border-radius:18px;

}

.producto-titulo{

    font-size:34px;

    font-weight:700;

    color:var(--azul);

}

.producto-info{

    margin-top:25px;

}

.producto-info strong{

    color:var(--azul);

}

.producto-descripcion{

    background:#F8FAFC;

    padding:20px;

    border-radius:15px;

    margin-top:20px;

}

.presentacion-item{

    border:1px solid #E2E8F0;

    padding:12px 15px;

    border-radius:10px;

    margin-bottom:10px;

    cursor:pointer;

    transition:.3s;

}

.presentacion-item:hover{

    border-color:var(--dorado);

    background:#FFF9E5;

}





/*=========================================
PRESENTACIONES
=========================================*/

.btn-presentacion{

    width:100%;

    text-align:left;

    margin-bottom:12px;

    padding:14px 18px;

    border-radius:12px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    color:#0F172A;

    font-weight:500;

    transition:.25s;

}

.btn-presentacion:hover{

    background:var(--azul);

    color:#FFF;

    border-color:var(--azul);

    transform:translateX(5px);

}

.presentacion-activa{

    background:var(--dorado) !important;

    color:#000 !important;

    border-color:var(--dorado) !important;

    font-weight:700;

}















/* ======================================
FRANJA 1
====================================== */

.menu-superior{
	background:#d3ad02;
}

.menu-superior ul{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:30px;
	height:42px;
}

.menu-superior a{
	color:#fff;
	text-decoration:none;
	font-weight:600;
	font-size:14px;
}

/* ======================================
FRANJA 2
====================================== */

.header-principal{
	background:#fff;
	padding:12px 0;
	box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.logo-principal{
	max-height:70px;
	width:auto;
}

.buscador-principal{
	display:flex;
	width:100%;
}

.buscador-principal input{

	width:100%;

	border:none;
	outline:none;

	background:#f4f4f4;

	padding:14px 18px;

	border-radius:30px 0 0 30px;

	font-size:14px;
}

.buscador-principal button{

	width:60px;

	border:none;

	background:#d3ad02;

	color:#fff;

	border-radius:0 30px 30px 0;

	flex-shrink:0;
}

.btn-carrito-header{

	position:relative;

	display:flex;

	align-items:center;
	justify-content:center;

	min-width:55px;
	height:50px;

	border:2px solid #d3ad02;

	border-radius:12px;

	text-decoration:none;

	color:#1d2d5a;

	background:#fff;
}

.btn-carrito-header i{
	font-size:20px;
}

.btn-carrito-header span{

	position:absolute;

	top:-8px;
	right:-8px;

	width:22px;
	height:22px;

	border-radius:50%;

	background:#d3ad02;

	color:#fff;

	font-size:11px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-weight:700;
}

/* ======================================
FRANJA 3
====================================== */

.menu-categorias{
	background:#1d2d5a;
}

.categorias-scroll{

	display:flex;

	overflow-x:auto;

	overflow-y:hidden;

	white-space:nowrap;

	-webkit-overflow-scrolling:touch;

	scrollbar-width:none;
}

.categorias-scroll::-webkit-scrollbar{
	display:none;
}

.categoria-item{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:flex-start;

	text-align:center;

	color:#fff;

	text-decoration:none;

	padding:12px 8px;

	min-width:120px;

	max-width:120px;

	flex-shrink:0;
}

.categoria-item:hover{

	background:#d3ad02;

	color:#fff;
}

.categoria-item i{

	font-size:22px;

	margin-bottom:8px;
}

.categoria-item span{

	font-size:11px;

	line-height:13px;

	white-space:normal;

	word-break:break-word;

	font-weight:500;
}

/* ======================================
MOVIL
====================================== */

@media(max-width:768px){

	/* ===== MENU SUPERIOR ===== */

	.menu-superior ul{

		gap:18px;

		justify-content:flex-start;

		overflow-x:auto;

		padding:0 12px;

		white-space:nowrap;

		height:40px;
	}

	.menu-superior a{

		font-size:12px;
	}

	/* ===== HEADER ===== */

	.header-principal{

		padding:10px 0;
	}

	.logo-principal{

		max-height:45px;
	}

	.buscador-principal input{

		padding:10px;

		font-size:12px;
	}

	.buscador-principal button{

		width:42px;
	}

	.btn-carrito-header{

		min-width:42px;

		width:42px;

		height:42px;
	}

	.btn-carrito-header i{

		font-size:16px;
	}

	.btn-carrito-header span{

		width:18px;
		height:18px;

		font-size:10px;

		top:-6px;
		right:-6px;
	}

	/* ===== CATEGORIAS ===== */

	.categoria-item{

		min-width:110px;

		max-width:110px;

		padding:10px 5px;
	}

	.categoria-item i{

		font-size:20px;
	}

	.categoria-item span{

		font-size:10px;

		line-height:12px;

		word-break:break-word;

		white-space:normal;
	}
}










.banner-categoria{
background:#f4f6fb;
padding:50px 0;
}

.banner-categoria h1{
color:#0f2f63;
font-weight:700;
}

.categoria-info span{
margin-right:25px;
font-weight:600;
}

.sidebar-filtro{
background:#fff;
padding:20px;
border-radius:15px;
box-shadow:0 3px 15px rgba(0,0,0,.08);
}

.sidebar-filtro ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar-filtro li{
padding:8px 0;
border-bottom:1px solid #eee;
}

.sidebar-filtro a{
text-decoration:none;
color:#0f2f63;
font-weight:500;
}

.producto-card-v2{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.08);
height:100%;
transition:.3s;
}

.producto-card-v2:hover{
transform:translateY(-5px);
}

.producto-foto{
height:250px;
display:flex;
justify-content:center;
align-items:center;
background:#fafafa;
}

.producto-foto img{
max-width:90%;
max-height:220px;
}

.producto-body{
padding:20px;
}

.producto-medida{
color:#f7941d;
font-weight:700;
}

.producto-marca{
color:#777;
margin-bottom:10px;
}

.producto-precio{
font-size:28px;
font-weight:700;
color:#0f2f63;
margin:10px 0;
}

.beneficio{
font-size:13px;
margin-bottom:5px;
color:#666;
}