/* Main stylesheet for Segurobet website */
:root{
	--primary:#7a2f2f; /* random warm tone */
	--accent:#f2c94c;
	--muted:#6b6b6b;
	--bg:#fafafa;
	--max-width:1100px;
	--radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:var(--bg);color:#222}
body{margin:0;line-height:1.5}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0}
.brand{font-weight:700;color:var(--primary);text-decoration:none;font-size:1.2rem}
.nav{display:flex;gap:1rem}
.nav a{color:#333;text-decoration:none;padding:0.4rem;border-radius:4px}
.nav a.active{background:rgba(122,47,47,0.08)}
#nav-toggle,#nav-toggle-2,#nav-toggle-3,#nav-toggle-4{display:none;background:transparent;border:0;font-size:1.2rem}

.hero{padding:2rem 0;background:linear-gradient(180deg,rgba(122,47,47,0.06),transparent)}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-text h1{margin:0 0 0.6rem;font-size:2rem}
.lead{color:var(--muted);margin-bottom:1rem}
.btn{display:inline-block;padding:0.6rem 1rem;border-radius:6px;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{background:transparent;border:1px solid #ccc;color:#333}
.hero-media img{width:100%;height:auto;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}

.intro{padding:1.4rem 0}
.highlights{display:flex;gap:1rem;list-style:none;padding:0;margin:1rem 0 0}
.highlights li{background:#fff;padding:0.8rem;border-radius:8px;flex:1;border:1px solid #f0f0f0}

.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:#fff;padding:0.8rem;border-radius:8px;border:1px solid #eee}
.card img{width:100%;height:160px;object-fit:cover;border-radius:6px}
.more{text-align:right;margin-top:.6rem}

.news{padding:1.6rem 0}
.news-list{display:grid;gap:1rem}
.news-item{display:flex;gap:1rem;background:#fff;padding:0.6rem;border-radius:8px;border:1px solid #eee}
.news-item img{width:140px;height:90px;object-fit:cover;border-radius:6px}

.cta{background:linear-gradient(90deg,var(--primary),#5a1f1f);color:#fff;padding:1.2rem;border-radius:10px;margin:1.6rem 0;text-align:center}

.site-footer{background:#fff;border-top:1px solid #eee;padding:1.4rem 0;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr 180px 1fr;gap:1rem}
.footer-nav{display:flex;flex-direction:column;gap:.4rem}
.site-footer.small{padding:.8rem 0;font-size:.9rem}
.copyright{margin-top:.8rem;color:var(--muted);font-size:.9rem}

.products-hero{padding:1rem 0}
.filters{display:flex;gap:.5rem;margin:1rem 0;flex-wrap:wrap}
.filter-btn{padding:.5rem .8rem;background:#fff;border:1px solid #eee;border-radius:6px;cursor:pointer}
.filter-btn.active{background:var(--accent);border-color:var(--accent)}
.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.product-card{background:#fff;padding:0.8rem;border-radius:8px;border:1px solid #eee}
.product-card img{width:100%;height:160px;object-fit:cover;border-radius:6px}
.product-card .specs{list-style:none;padding:0;margin:0.6rem 0 0;color:var(--muted);font-size:.95rem}

.about-page .history img,.contact-page img{width:100%;height:auto;border-radius:8px;object-fit:cover}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.member img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1.2rem;align-items:start}
.contact-form label{display:block;margin-bottom:.6rem}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;border-radius:6px;border:1px solid #ddd}
.contact-info{background:#fff;padding:1rem;border-radius:8px;border:1px solid #eee}

.note{margin:1rem 0;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
	.hero-grid{grid-template-columns:1fr;gap:1rem}
	.header-inner{gap:1rem}
	.nav{display:none}
	#nav-toggle,#nav-toggle-2,#nav-toggle-3,#nav-toggle-4{display:block}
	.footer-grid{grid-template-columns:1fr;row-gap:1rem}
	.contact-grid{grid-template-columns:1fr;gap:1rem}
}

/* Animation helpers */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* minor accessibility */
a:focus{outline:3px solid rgba(242,201,76,0.4);outline-offset:2px}