:root {
	--dark: #1a1d24;
	--dark-2: #23272f;
	--accent: #ff6a13;
	--accent-dark: #e05a00;
	--text-muted: #6c757d;
	--radius: .5rem;
	--font-heading: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
}

body {
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
	color: #2a2a2a;
	background: #fff;
}

a {
	text-decoration: none;
}

/* ---------- Topbar ---------- */
.topbar {
	background: var(--dark);
	color: #cfd3da;
	font-size: .85rem;
	padding: .4rem 0;
}
.topbar a {
	color: #cfd3da;
	margin-right: 1.25rem;
}
.topbar a:last-child { margin-right: 0; }
.topbar a:hover { color: var(--accent); }
.topbar-social a { margin-right: .75rem; margin-left: 0; font-size: 1rem; }
.topbar-social a:last-child { margin-right: 0; }

/* ---------- Header / Navbar ---------- */
.site-header .navbar {
	background: var(--dark-2);
	padding:  0;
}
.navbar-brand {
	color: #fff !important;
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: .3px;
}
.navbar-brand i { color: var(--accent); margin-right: .35rem; }
.navbar-dark .navbar-nav .nav-link {
	color: #e7e9ec;
	font-weight: 500;
	padding-left: .9rem;
	padding-right: .9rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: var(--accent); }
.dropdown-menu { border-radius: var(--radius); border: 0; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15); }
.dropdown-item:active, .dropdown-item.active { background: var(--accent); }

.btn-accent {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 600;
}
.btn-accent:hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
	color: #fff;
}

/* ---------- Hero ---------- */
.hero {
	background: linear-gradient(120deg, var(--dark) 0%, var(--dark-2) 100%);
	color: #fff;
	padding: 8rem 0;
}
.hero-title { font-weight: 800; font-size: 2.5rem; line-height: 1.15; }
.hero-subtitle { color: #c9ccd2; font-size: 1.1rem; margin: 1rem 0 1.5rem; }
.hero-icon { font-size: 14rem; color: rgba(255,255,255,.08); }

/* ---------- Home slider (banners) ---------- */
.home-slider .carousel-item img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
}
.home-slider .carousel-indicators [data-bs-target] { background-color: var(--accent); }

.slider-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(0, 0, 0, .35);
	padding: 1rem;
	pointer-events: none;
}
.slider-caption-inner { max-width: 900px; }
.slider-caption p {
	color: #fff;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.2;
	text-shadow: 0 2px 10px rgba(0,0,0,.5);
	margin: 0;
}
@media (max-width: 767.98px) {
	.slider-caption p { font-size: 1.4rem; }
}

/* ---------- Categorias destacadas (home) ---------- */
.section-categorias-destacadas { padding: 6.5rem 0; }
.categoria-destacada-card {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4/3;
	color: #fff;
}
.categoria-destacada-card img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .25s ease;
}
.categoria-destacada-card:hover img { transform: scale(1.06); }
.categoria-destacada-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
}
.categoria-destacada-nombre {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: .85rem 1rem;
	font-weight: 700;
	z-index: 1;
}

/* ---------- Servicios (home) ---------- */
.section-servicios { padding: 6.5rem 0; }
.servicio-card {
	text-align: center;
	height: 100%;
	padding: 1rem;
}
.servicio-card i {
	font-size: 2.5rem;
	color: var(--accent);
	margin-bottom: 1rem;
	display: inline-block;
}
.servicio-card h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: .5rem;
}
.servicio-card p {
	color: var(--text-muted);
	margin: 0;
}

/* ---------- Marcas (home) ---------- */
.section-marcas { padding: 6.5rem 0; }
.marcas-carousel { padding: 0 3.5rem; }
.marcas-row {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 1.5rem;
	min-height: 110px;
}
.marca-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 160px;
	height: 90px;
}
.marca-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .6;
	transition: filter .2s ease, opacity .2s ease;
}
.marca-logo img:hover {
	filter: grayscale(0%);
	opacity: 1;
}
.marcas-carousel .carousel-control-prev,
.marcas-carousel .carousel-control-next {
	width: 3rem;
	color: var(--dark);
	filter: none;
}
.marcas-carousel .carousel-control-prev-icon,
.marcas-carousel .carousel-control-next-icon {
	filter: invert(1) grayscale(100);
	background-color: var(--dark);
	border-radius: 50%;
	padding: .6rem;
	width: 2.2rem;
	height: 2.2rem;
}
@media (max-width: 575.98px) {
	.marcas-carousel { padding: 0 2.2rem; }
	.marca-logo { width: 110px; height: 70px; }
}

/* ---------- Sections ---------- */
.section-categorias, .section-productos, .section-cta { padding: 6.5rem 0; }
.bg-light-alt { background: #e9ebef; }
.section-title {
	font-family: var(--font-heading);
	font-weight: 700;
	text-align: center;
	margin-bottom: 1.75rem;
	position: relative;
	padding-bottom: .6rem;
}
.section-title::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: 50px; height: 3px;
	background: var(--accent);
}
.section-cta { background: var(--dark); color: #fff; }
.section-cta h2 { font-weight: 700; }
.section-cta p { color: #c9ccd2; margin-bottom: 1.25rem; }

/* ---------- Categoria card ---------- */
.categoria-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: var(--radius);
	padding: 1.75rem 1rem;
	height: 100%;
	color: #2a2a2a;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.categoria-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
	border-color: var(--accent);
	color: #2a2a2a;
}
.categoria-card i { font-size: 2.25rem; color: var(--accent); margin-bottom: .75rem; }
.categoria-nombre { font-weight: 700; margin-bottom: .25rem; }
.categoria-cantidad { font-size: .8rem; color: var(--text-muted); }

/* ---------- Producto card ---------- */
.producto-card {
	display: block;
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	color: #2a2a2a;
	transition: transform .15s ease, box-shadow .15s ease;
}
.producto-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
	color: #2a2a2a;
}
.producto-card-img {
	aspect-ratio: 4 / 3;
	background: #f6f7f9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.producto-card-img img { width: 100%; height: 100%; object-fit: cover; }
.producto-card-noimg { font-size: 2.5rem; color: #c7cbd1; }
.producto-card-body { padding: 1rem; }
.producto-card-categoria {
	display: inline-block;
	font-size: .7rem;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: .04em;
	margin-bottom: .25rem;
}
.producto-card-nombre { font-size: 1rem; font-weight: 700; margin-bottom: .15rem; }
.producto-card-marca { font-size: .85rem; color: var(--text-muted); margin: 0; }

/* ---------- Page header (breadcrumb/title) shared ---------- */
.page-content { padding: 2rem 0 3.5rem; }
.breadcrumb { margin-top: 1rem; font-size: .85rem; }
.page-title { font-weight: 800; margin-bottom: .25rem; }
.page-subtitle { color: var(--text-muted); margin-bottom: 2rem; }

/* ---------- Sidebar de categorias (pagina de categoria) ---------- */
.categorias-sidebar {
	background: #f6f7f9;
	border-radius: var(--radius);
	padding: 1.25rem;
}
.categorias-sidebar-title {
	font-weight: 700;
	text-transform: uppercase;
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--text-muted);
	margin-bottom: .75rem;
}
.categorias-sidebar-list { list-style: none; margin: 0; padding: 0; }
.categorias-sidebar-list li { border-bottom: 1px solid #e7e9ec; }
.categorias-sidebar-list li:last-child { border-bottom: none; }
.categorias-sidebar-list a {
	display: block;
	padding: .6rem .25rem;
	color: #2a2a2a;
	font-size: .95rem;
}
.categorias-sidebar-list a:hover { color: var(--accent); }
.categorias-sidebar-list a.active {
	color: var(--accent);
	font-weight: 700;
}

/* ---------- Producto detalle ---------- */
.producto-carousel img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
.producto-carousel .carousel-control-prev,
.producto-carousel .carousel-control-next { width: 8%; }
.producto-thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.producto-thumbs button {
	padding: 0; border: 2px solid transparent; border-radius: .35rem;
	overflow: hidden; width: 64px; height: 48px; background: none;
}
.producto-thumbs button.active { border-color: var(--accent); }
.producto-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.producto-noimg {
	aspect-ratio: 4/3; background: #f6f7f9; border-radius: var(--radius);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: #c7cbd1; gap: .5rem;
}
.producto-noimg i { font-size: 3.5rem; }
.producto-categoria-badge {
	display: inline-block; background: #f6f7f9; color: var(--accent);
	font-size: .75rem; font-weight: 700; text-transform: uppercase;
	padding: .25rem .65rem; border-radius: 2rem; margin-bottom: .75rem;
}
.producto-titulo { font-weight: 800; margin-bottom: .75rem; }
.producto-datos { list-style: none; padding: 0; margin-bottom: 1rem; }
.producto-datos li { margin-bottom: .25rem; }
.producto-resumen { font-size: 1.05rem; color: #444; }
.producto-descripcion { margin-top: 2rem; border-top: 1px solid #eceef1; padding-top: 1.5rem; }
.producto-descripcion h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }

/* ---------- Nosotros ---------- */
.feature-icon { font-size: 2.25rem; color: var(--accent); margin-bottom: .5rem; display: block; }
.nosotros-cuerpo { overflow: hidden; }
.nosotros-cuerpo img { max-width: 100%; height: auto; border-radius: var(--radius); }
.nosotros-cuerpo p { margin-bottom: 1rem; }

/* ---------- Pagination ---------- */
.pagination .page-link { color: var(--dark); }
.pagination .page-item.active .page-link {
	background-color: var(--accent);
	border-color: var(--accent);
}
.pagination .page-link:hover { color: var(--accent-dark); }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #c9ccd2; padding: 3.5rem 0 0; }
.footer-brand { color: #fff; font-weight: 700; }
.footer-brand i { color: var(--accent); }
.footer-title { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-links li, .footer-contact li { margin-bottom: .6rem; }
.footer-links a { color: #c9ccd2; }
.footer-links a:hover { color: var(--accent); }
.footer-contact i { color: var(--accent); width: 1.2rem; }
.footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.08); color: #fff; margin-right: .5rem;
}
.footer-social a:hover { background: var(--accent); }
.footer-copyright {
	margin-top: 2.5rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.08);
	font-size: .85rem; color: #9aa0a8;
}

/* ---------- Contacto ---------- */
.contacto-datos { margin-bottom: 0; }
.contacto-mapa iframe { border-radius: var(--radius); display: block; }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25d366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
}
.whatsapp-float:hover { background: #1ebe57; color: #fff; }

@media (max-width: 991.98px) {
	.hero { padding: 4.5rem 0; }
	.hero-title { font-size: 2rem; }
}