:root{
	--bg:#EEEFEF;
	--card:#fff;
	--accent:#3b2f2f;
	--muted:#6b6b6b;
	--btn:#b86b3a;
	--maxw:1100px;
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

	/* Bootstrap CSS variable overrides to keep brand consistent */
	--bs-primary: var(--btn);
	--bs-body-bg: var(--bg);
	--bs-body-color: var(--accent);
	--bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body{margin:0;background:var(--bg);color:var(--accent);line-height:1.4}
header{background:transparent;padding:12px 0}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;display:inline-block}
.brand-name{font-weight:700;font-size:18px}
.top-actions{display:flex;gap:8px}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid rgba(0,0,0,0.06)}
/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:20px;padding:36px 0;align-items:center}
h1{
	font-family: "bogart", sans-serif;
	font-weight: 700;
	font-style: normal; 
	font-size:3rem;
	margin:0 0 8px;
	text-transform: uppercase;
}
h3{
	font-family: "bogart", sans-serif;
	font-weight: 700;
	font-style: normal; 
	font-size:1.6rem;
	margin:0 0 8px;
	text-transform: uppercase;
}
p{font-family: "din-2014", sans-serif;
font-weight: 400;
font-style: normal; margin:0 0 12px; 
font-size: 1.3rem;}
.hero-cta{display:flex;gap:10px}
/* Products */
.products{padding:28px 0}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.product-card{background:transparent;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px; border: none;}
.product-visual{border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
.price{font-weight:700;margin-top:auto}
/* Footer */
footer{padding:24px 0;color:var(--muted);font-size:14px;border-top:1px solid rgba(0,0,0,0.04);margin-top:28px}
/* Responsive */
@media (max-width:900px){
	.products-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
	.container{padding:16px}
	.header-row{flex-direction:row;align-items:center}
	.hero{padding:20px 0}
	.h1{font-size:2rem}
	.products-grid{grid-template-columns:1fr}
}
/* Shared hero background for header + first section */
.hero-wrap {
	background-color: #efe1d8; /* fallback color */
	background-image: url('../images/bg-tabaco.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-bottom: 42px;
	padding-top: 14px; /* ensure space for navbar */
	position: relative;
	overflow: hidden;
}

/* subtle overlay for contrast */
.hero-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.06);
	pointer-events: none;
	opacity: 0;
}

/* ensure header and hero content sit above overlay */
.hero-wrap .container, .hero-wrap header, .hero-wrap .brand, .hero-wrap .top-actions {
	position: relative;
	z-index: 2;
}

/* Sticky navbar backdrop when over the hero background * 

/* make the inner visual block blend on top of the shared background */
.hero-visual-bg {
	background: transparent;
	background-image: none;
	border-radius: 12px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: visible;
}
.hero-visual-bg::after { display: none; }
.hero-visual-bg > svg { position: relative; z-index: 3; }
.rodape {
	background-color: #efe1d8; /* fallback color */
	background-image: url('../images/mirage-bolso.webp');
	/* Show the full image without cropping */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding-bottom: 42px;
	padding-top: 14px; /* ensure space for navbar */
	position: relative;
	overflow: hidden;
	min-height: 280px; /* ensure visible area for the contained image */
}
.rodape h1{
	font-family: "bogart", sans-serif;
	font-weight: 700;
	font-style: normal; 
	font-size:4rem;
	line-height: 4rem;
	margin:0 0 8px;
	text-transform: uppercase;
}
.rodape h1 strong {
	color: #F8A501;
}
.rodape h3{
	font-family: "bogart", sans-serif;
	font-weight: 700;
	font-style: normal; 
	font-size:1.6rem;
	margin:0 0 8px;
	text-transform: uppercase;
}
.rodape p{font-size: 1.8rem;}
/* dark overlay to improve text contrast on top of the background image */
.rodape::before{
	content: "";
	position: absolute;
	inset: 0;
	/* lighter overlay so the contained image remains visible */
	background: linear-gradient(rgba(59,47,47,0.36), rgba(59,47,47,0.36));
	pointer-events: none;
}
/* ensure content sits above the overlay and is readable */
.rodape .container, .rodape h2, .rodape p, .rodape a{
	position: relative;
	z-index: 2;
}
.rodape h2, .rodape p{ color: #fff; }
.rodape a{ color: #ffd7b8; text-decoration: underline; }
/* Skip link */
.skip-link{
	position:fixed;left:12px;top:12px;padding:10px 12px;background:#000;color:#fff;border-radius:6px;z-index:999;transform:translateY(-120%);transition:transform .18s ease;box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.skip-link:focus{transform:translateY(0);outline:3px solid rgba(184,107,58,0.25)}

/* Focus-visible helpful outline for interactive elements */
:focus-visible{outline:3px solid rgba(184,107,58,0.25);outline-offset:2px}

a.wpp {
	font-family: "din-2014", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 2rem;
	-webkit-text-stroke: 0.08rem #000; /*stroke size and color */
	padding: 10px 40px;
	border-radius: 40px;
	color: #fff;
	border: 0;
	background-color: #49CF46;
	margin-top: 50px;
	text-decoration: none;
}

/* Mobile tuning: stronger overlay and tighter spacing */
@media (max-width:640px){
	.hero-wrap{
		padding-bottom:20px;
	}

	/* Darken overlay on small screens for improved contrast */
	.hero-wrap::before{
		background: rgba(0,0,0,0.28);
	}

	/* Reduce vertical padding so content sits closer to the fold */
	.hero-wrap .container{padding-top:18px;padding-bottom:18px}
	header{padding:8px 0}
	.hero{padding:16px 0}

	/* Slightly smaller headings for narrow viewports */
	h1{font-size:2rem;line-height:1.2}
	p {font-size:1rem;}
	.brand-name{font-size:16px}

	/* Tighter action buttons */
	.top-actions .btn{padding:8px 10px;font-size:14px}

	/* Scale down visual block height */
	.hero-visual-bg{height:160px}
	a.wpp {
		font-size: 1.4rem;
		-webkit-text-stroke: 0.05rem #000; /*stroke size and color */
		padding: 5px 20px;
	}
}