:root{
    --bg:#0f1720;
    --card:#0b1220;
    --muted:#9aa6b2;
    --accent:#ff5a5f;
    --glass: rgba(255,255,255,0.03);
    --max-w:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial; background:linear-gradient(180deg,#071023 0%, #0b1220 100%); color:#e6eef3}
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px}

.site-header{padding:18px 0}
.site-header .logo{display:inline-block;margin:0;font-size:18px;font-weight:700}
.nav{float:right}
.nav-link{color:var(--muted);text-decoration:none;margin-left:18px}
.nav-link:hover{color:#fff}

.hero{display:block;margin:20px 0;border-radius:12px;overflow:hidden}
.hero-link{display:block;position:relative;background-image:url('https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1800&q=60');background-size:cover;background-position:center;height:360px;text-decoration:none;color:inherit}
.hero-overlay{background:linear-gradient(180deg, rgba(2,6,23,0.4) 0%, rgba(2,6,23,0.8) 100%);height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:40px}
.hero-title{font-size:28px;margin:0 0 8px;text-shadow:2px 2px 8px rgba(0,0,0,0.8);font-weight:700}
.hero-sub{color:var(--muted);margin:0 0 16px;text-shadow:1px 1px 4px rgba(0,0,0,0.9);font-size:16px;font-weight:500}

.btn{padding:10px 16px;border-radius:8px;border:0;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ff7b7f);color:#fff;font-weight:600}

.cards{display:flex;flex-wrap:nowrap;gap:18px;margin:28px auto;justify-content:center;align-items:stretch;max-width:1400px;padding:0 20px;overflow-x:auto}
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,0.6);transition:transform .18s ease,box-shadow .18s ease;width:320px;flex:0 0 320px;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.7)}
.card-media{height:140px;background-size:cover;background-position:center}
.card-body{padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.card-title{font-size:16px;margin:0 0 6px}
.card-sub{color:var(--muted);font-size:13px;margin:0 0 10px}
.card-desc{font-size:14px;color:#dbe9f2;margin:0 0 12px}
.card-actions{text-align:center}
.card a.btn{display:inline-block}

.site-footer{padding:18px 0;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted);margin-top:40px;text-align:center}
.site-footer .container{text-align:center}

/* Tablets e telas médias */
@media (max-width:1024px){
    .cards{max-width:100%;flex-wrap:wrap}
    .card{width:280px;flex:0 0 280px}
    .site-header .nav{float:none;margin-top:10px}
}

/* Tablets pequenos */
@media (max-width:768px){
    .hero-link{height:280px}
    .hero-overlay{padding:30px}
    .hero-title{font-size:24px}
    .hero-sub{font-size:14px}
    .cards{max-width:100%;gap:12px}
    .card{width:100%;max-width:340px;flex:1 1 auto}
    .site-header{padding:12px 0}
    .site-header .logo{font-size:16px}
    .nav-link{margin-left:12px;font-size:14px}
}

/* Celulares */
@media (max-width:600px){
    .hero-link{height:220px}
    .hero-overlay{padding:20px}
    .hero-title{font-size:18px}
    .hero-sub{font-size:12px}
    .btn{padding:8px 14px;font-size:14px}
    .cards{max-width:100%;padding:0 10px;gap:10px;flex-wrap:wrap}
    .card{width:100%;flex:1 1 auto;max-width:none}
    .card-media{height:120px}
    .card-body{padding:10px}
    .card-title{font-size:14px}
    .card-sub{font-size:12px}
    .card-desc{font-size:12px;margin:0 0 8px}
    .site-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
    .site-header .logo{font-size:14px}
    .nav{float:none;width:100%;margin-top:8px}
    .nav-link{display:inline-block;margin-left:8px;font-size:12px}
    .affiliate-note{padding:10px;font-size:13px}
}

/* Celulares muito pequenos */
@media (max-width:400px){
    .hero-title{font-size:16px}
    .hero-sub{font-size:11px}
    .card{min-width:100%}
    .card-title{font-size:13px}
    .card-sub{font-size:11px}
    .card-desc{font-size:11px}
    .btn{padding:6px 12px;font-size:12px}
}

.affiliate{padding:18px 0}
.affiliate-note{background:var(--glass);padding:14px;border-radius:10px;color:#e6eef3;max-width:900px;margin:0 auto;text-align:center}