:root{--bg1:#1a1a2e;--bg2:#16213e;--bg3:#0e172c;--gold1:#ffcc00;--gold2:#d4a300;--text0:#ffffff;--text1:#e9e9e9;--text2:#bdbdbd;--red: #ff0000;--glass1:rgba(255,255,255,0.04);--glass2:rgba(255,255,255,0.1);--glass3:rgba(0,0,0,0.25);--glass4:rgba(0,0,0,0.5);}
*{box-sizing:border-box;margin:0;padding:0;}
body {font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);color: var(--text2);min-height: 100vh;}
.site-header {position: sticky;top: 0;z-index: 1000;background: var(--glass4);padding:0px 24px;display: flex;justify-content: space-between;align-items: center;}
.brand{display:flex;gap:12px;align-items:center;}
.logo img {width:auto;height:auto;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.brand-text{color: var(--gold1);font-weight:700;}
.subtitle{font-size:12px;color:var(--text2);font-weight:500;}
nav{display:flex;gap:8px}
.btn{padding:7px 24px;border-radius:10px;font-weight:600;text-decoration:none;align-items:center;margin: 0 3px;}
.btn-success{background:transparent;border:1px solid var(--gold2);color:var(--gold1);}
.btn-success:hover{background:transparent;border:1px solid var(--text2);color:var(--text2);}
.btn-outline{background:transparent;border:1px solid var(--gold2);color:var(--gold1);}
.btn-outline:hover{background:transparent;border:1px solid var(--text2);color:var(--text2);}
.btn-primary{background:var(--gold1);border:1px solid var(--gold2);color:var(--bg3);}
.btn-primary:hover{background:var(--bg3);border:1px solid var(--text2);color:var(--text0);}
.container{max-width:1100px;margin:18px auto;padding:0 18px;}
.card{background:var(--bg3);padding:18px;border-radius:12px;box-shadow:0 6px 18px var(--glass4);}
.hero{position:relative;}
.slider {width:100%;height:450px;overflow:hidden;border-radius:12px;border:1px solid var(--glass2);display:flex;position:relative;}
#slider{display:flex;width:100%;height:100%;transition:transform .6s ease;}
.slide{flex:0 0 100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:flex-end;padding:18px;}
.slide img {width: 100%;height: 100%;object-fit: contain;object-position: bottom;border-radius: 12px;position: absolute;top: 0;left: 0;z-index: 0;}
.slide .txt{background:linear-gradient(90deg,var(--glass4),transparent);padding:14px;border-radius:10px;max-width:80%;}
.slide-btn {margin-top: 8px;display: inline-block;padding: 10px 18px;border-radius: 8px;background: var(--gold1);border:1px solid var(--gold2);color: var(--bg3);font-weight: 700;text-decoration: none;}
.slide-btn:hover {background: transparent;border:1px solid var(--text2);color: var(--text2);}
.slider-controls{position:absolute;top:47%;left:4px;transform:translateY(-50%);display:flex;gap:10px;}
.icon-btn{background:var(--glass4);border:0;color:var(--text0);padding:8px 14px;border-radius:8px;cursor:pointer;}
.btn-promo{display: none;}
.marquee-wrap {margin-top: 12px;background:linear-gradient(90deg,var(--glass4),transparent);padding: 10px;border-radius: 8px;display: flex;align-items: center;gap: 12px;overflow: hidden;}
.marquee-left {display: flex;align-items: center;gap: 6px;font-family: "Inter", sans-serif;font-size: 12px;color: var(--text2);flex-shrink: 0;}
.marquee-left i {font-size: 14px;color: var(--text0);}
.marquee {white-space: nowrap;overflow: hidden;flex-grow: 1;}
.marquee > span {display: inline-block;padding-left: 100%;animation: marquee 12s linear infinite;}
@keyframes marquee {0% { transform: translateX(0); } 100% { transform: translateX(-100%); }}
#indoTimeText i {margin-right: 6px;font-size: 14px;color: var(--gold1);}
.hero-buttons {display: flex;gap: 16px;margin: 26px auto;align-items: flex-start;}
.hero-buttons-vertical {display: flex;flex-direction: column;gap: 12px;min-width: 200px;}
.hero-buttons-vertical .btn {width: 100%;}
.hero-banners {display: flex;gap: 12px;flex: 1;}
.slider-mini {flex: 1;height: 200px;overflow: hidden;position: relative;}
.slider-inner {display: flex;width: 100%;height: 100%;transition: transform 0.5s ease;}
.slider-controls-mini {position: absolute;top: 50%;width: 100%;display: flex;justify-content: space-between;transform: translateY(-50%);padding: 0 8px;}
.slider-controls-mini button {background: var(--glass4);border: none;color: var(--text2);padding: 6px 10px;border-radius: 6px;cursor: pointer;}
.content {margin-top: 18px;}
h1, h2, h3 {color: var(--gold1);font-size: 23px;font-weight: 500;margin-bottom: 8px;line-height: 1.3;font-family: "Inter", sans-serif;}
p {color: var(--text2);line-height: 1.6;}
#h1Content, #h2Content, #h3Content {margin-top: 8px;line-height: 1.7;}
#h1Content a, #h2Content a, #h3Content a {color: var(--gold2);font-weight: 500;text-decoration: none;}
.site-footer {text-align: center;padding: 18px;color: var(--text2);margin-top: 18px;font-size: 13px;}
.site-footer a {color: var(--gold1);text-decoration: none;}
.site-footer a:hover {text-decoration: underline;}

@media (max-width: 900px) {
.site-header {flex-direction: row;align-items: center;justify-content: space-between;padding: 12px 16px;}
.brand {display: flex;gap: 8px;align-items: center;}
.logo img {max-width: 80%;}
.brand-text {display: none; }
nav a { display: inline-flex; }
#loginBtn, #registerBtn {display: none;}
#whatsappBtn {display: inline-flex;align-items: center;gap: 6px;}
.container {padding: 0 8px;margin: 12px auto;}
.card {padding: 12px;border-radius: 10px;}
.slider {height: 200px;overflow: hidden;}
.slide img {width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 10px;}
.slide {background-size: cover;background-position: center;background-repeat: no-repeat;}
.slide .txt {padding: 10px;max-width: 90%;font-size: 14px;}
.slide-btn {padding: 8px 14px;font-size: 12px;}
.slider-controls {gap: 6px;left: 8px;top: 40%;}
.icon-btn {padding: 6px 10px;}
.btn-promo {padding: 8px 16px;font-size: 14px;}
.hero-banners{display: none;}
.marquee {padding: 0px;}
.marquee > span {font-size: 14px;}
.hero-buttons {flex-direction: column;align-items: center;gap: 8px;}
.hero-buttons-vertical {flex-direction: row;width: 100%;justify-content: center;}
.hero-buttons-vertical .btn {width: auto;flex: 1;text-align: center;padding: 12px 0;}
h1, h2, h3 {font-size: 18px;font-weight: 500;line-height: 1.25;}
p {font-size: 14px;line-height: 1.5;}
.content {margin-top: 12px;}
.site-footer {padding: 12px;font-size: 11px;margin-top: 12px;}
.site-footer a {font-size: 14px;}}