/* MaresmeRP - Web actualizada */
:root {
    --bg: #0f172a;
    --bg-soft: #111c33;
    --panel: #1e293b;
    --blue: #1e40af;
    --blue-light: #3b82f6;
    --green: #22c55e;
    --green-dark: #15803d;
    --text: #e2e8f0;
    --muted: #cbd5e1;
    --border: rgba(59, 130, 246, .55);
    --shadow-blue: 0 0 20px rgba(30, 64, 175, .45), 0 0 40px rgba(30, 58, 138, .22);
    --shadow-green: 0 0 20px rgba(34, 197, 94, .45), 0 0 40px rgba(21, 128, 61, .20);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; background: radial-gradient(circle at top, #172554 0%, var(--bg) 40%, #020617 100%); color: var(--text); line-height: 1.6; cursor: default; }
a, button, .info-card, .feature-card, .faction-card, .pack-card, .gallery-card { cursor: pointer; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
header { position: sticky; top: 0; z-index: 50; border-bottom: 2px solid var(--border); background-color: rgba(15, 23, 42, .86); backdrop-filter: blur(10px); }
nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.brand { display: flex; align-items: center; gap: .75rem; color: white; text-decoration: none; font-family: 'Space Mono', monospace; font-weight: 700; }
.logo { height: 3rem; width: auto; transition: transform .25s ease, filter .25s ease; }
.brand:hover .logo { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(59, 130, 246, .9)); }
.nav-links { display: none; gap: 1.4rem; align-items: center; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a, .footer-section a { color: var(--text); text-decoration: none; position: relative; transition: color .25s ease; }
.nav-links a::after, .footer-section a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--green); transition: width .25s ease; }
.nav-links a:hover, .nav-links a.active, .footer-section a:hover { color: var(--green); }
.nav-links a:hover::after, .nav-links a.active::after, .footer-section a:hover::after { width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem 1.25rem; border: 2px solid var(--blue); border-radius: .45rem; color: white; background: var(--blue); font-size: .9rem; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-blue); text-decoration: underline; text-underline-offset: 4px; }
.btn-outline { background: transparent; color: var(--blue-light); }
.btn-outline:hover { background: rgba(59, 130, 246, .12); }
.btn-fivem, .btn-whatsapp { background: linear-gradient(135deg, var(--green), var(--green-dark)); border-color: var(--green); color: #052e16; }
.btn-fivem:hover, .btn-whatsapp:hover { box-shadow: var(--shadow-green); color: white; }
.nav-cta { white-space: nowrap; }
.hero, .page-hero { position: relative; overflow: hidden; padding: 6rem 0; }
.hero::before, .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(30, 64, 175, .20), transparent 45%, rgba(34, 197, 94, .12)); pointer-events: none; }
.hero-content { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 850px) { .hero-content { grid-template-columns: 1fr 1fr; } }
.server-status { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.2rem; padding: .55rem .85rem; border: 1px solid rgba(34, 197, 94, .7); border-radius: 999px; background: rgba(34, 197, 94, .10); color: var(--green); font-family: 'Space Mono', monospace; font-weight: 700; box-shadow: var(--shadow-green); }
.status-dot { width: .8rem; height: .8rem; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 0 rgba(34, 197, 94, .9); animation: pulseGreen 1.6s infinite; }
.status-dot.offline { background: #ef4444; animation: none; box-shadow: 0 0 14px rgba(239, 68, 68, .7); }
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .8); } 70% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
h1, .section-title, .cta h2, .page-hero h1 { font-family: 'Space Mono', monospace; font-weight: 700; text-shadow: 0 0 10px var(--blue), 0 0 20px var(--blue); }
.hero-text h1, .page-hero h1 { font-size: clamp(3rem, 8vw, 5rem); line-height: 1.05; margin-bottom: 1.5rem; }
.primary { color: var(--blue-light); }
.hero-text p, .page-hero p, .section-subtitle { color: var(--muted); font-size: 1.1rem; max-width: 48rem; margin-bottom: 1.5rem; }
.small-note { font-size: .82rem !important; opacity: .8; margin-top: 1rem; }
.hero-buttons, .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-image, .feature-card, .faction-card, .stat-card, .testimonial-card, .pack-card, .info-card, .gallery-card { border: 2px solid var(--border); border-radius: .7rem; background: rgba(30, 41, 59, .82); box-shadow: 0 0 12px rgba(30,64,175,.25), inset 0 0 10px rgba(59,130,246,.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hero-image { padding: 1rem; }
.hero-image:hover, .feature-card:hover, .faction-card:hover, .stat-card:hover, .testimonial-card:hover, .pack-card:hover, .info-card:hover, .gallery-card:hover { transform: translateY(-7px); border-color: var(--green); box-shadow: var(--shadow-green); }
.hero-image img, .faction-image img, .gallery-card img { width: 100%; height: auto; display: block; border-radius: .45rem; }
.quick-info, .features, .packs, .stats, .cta, .gallery-section { border-top: 2px solid var(--border); background: linear-gradient(135deg, rgba(15,23,42,.9), rgba(30,41,59,.75)); }
.quick-info, .features, .factions, .packs, .stats, .community, .cta, .gallery-section { padding: 5rem 0; }
.info-grid, .features-grid, .packs-grid, .testimonials-grid, .gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .info-grid, .features-grid, .packs-grid, .testimonials-grid { grid-template-columns: repeat(3, 1fr); } .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.info-card { padding: 1.4rem; color: var(--text); text-decoration: none; }
.info-card:hover strong, .gallery-card:hover h3, .pack-card:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.green-card { border-color: rgba(34,197,94,.75); }
.info-kicker, .pack-tag { display: inline-block; color: var(--green); font-family: 'Space Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; margin-bottom: .55rem; }
.info-card strong { display: block; font-size: 1.25rem; margin-bottom: .25rem; }
.info-card small { color: var(--muted); }
.section-title { font-size: clamp(2rem, 5vw, 3rem); text-align: center; margin-bottom: 1.2rem; }
.section-subtitle { margin: 0 auto 3rem; text-align: center; }
.feature-card, .faction-card, .pack-card, .testimonial-card, .stat-card { padding: 1.5rem; }
.feature-card h3, .faction-card h3, .pack-card h3 { font-family: 'Space Mono', monospace; font-size: 1.35rem; margin-bottom: .65rem; }
.feature-card p, .faction-card p, .pack-card p, .testimonial-text { color: var(--muted); }
.factions-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 760px) { .factions-grid { grid-template-columns: repeat(2, 1fr); } }
.faction-image { margin-bottom: 1rem; overflow: hidden; border-radius: .45rem; background: rgba(15, 23, 42, .6); }
.faction-image img { aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.faction-card:hover .faction-image img, .gallery-card:hover img { transform: scale(1.06); filter: saturate(1.2) contrast(1.08); }
.packs-grid { align-items: stretch; }
.pack-card { display: flex; flex-direction: column; }
.pack-card .btn { margin-top: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 760px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { text-align: center; }
.stat-value { font-family: 'Space Mono', monospace; font-size: 2.2rem; font-weight: 700; color: var(--green); text-shadow: 0 0 12px rgba(34,197,94,.7); }
.stat-label, .testimonial-role { color: var(--muted); font-size: .9rem; }
.testimonial-text { font-style: italic; margin-bottom: 1rem; }
.cta { text-align: center; }
.cta p { margin-left: auto; margin-right: auto; }
.cta-buttons { justify-content: center; }
.page-hero { text-align: center; }
.page-hero .server-status { margin-left: auto; margin-right: auto; }
.page-hero .hero-buttons { justify-content: center; }
.gallery-card { position: relative; overflow: hidden; min-height: 280px; }
.gallery-card img { height: 300px; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.gallery-caption { position: absolute; inset: auto 0 0 0; padding: 1.2rem; background: linear-gradient(transparent, rgba(2,6,23,.92)); transform: translateY(34%); transition: transform .25s ease; }
.gallery-card:hover .gallery-caption { transform: translateY(0); }
.gallery-caption h3 { font-family: 'Space Mono', monospace; }
footer { border-top: 2px solid var(--border); background: #020617; padding: 2rem 0; }
.footer-content { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 760px) { .footer-content { grid-template-columns: repeat(3, 1fr); } }
.footer-section h4 { font-family: 'Space Mono', monospace; color: var(--green); margin-bottom: .85rem; }
.footer-section p, .footer-section li, .footer-bottom { color: var(--muted); font-size: .9rem; }
.footer-section ul { list-style: none; }
.footer-section li { margin-bottom: .55rem; }
.footer-bottom { border-top: 1px solid rgba(59,130,246,.35); padding-top: 1.2rem; text-align: center; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 560px) { .nav-cta { padding: .65rem .75rem; font-size: .78rem; } .brand span { display: none; } .hero, .page-hero { padding: 4rem 0; } .stats-grid { grid-template-columns: 1fr; } }