:root{
  --ags-orange:#FF6A00;
  --ags-black:#111111;
  --ags-white:#FFFFFF;
  --ags-gray:#f6f7f9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222;background:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand-logo{width:38px;height:38px;border-radius:12px;background:var(--ags-orange);box-shadow:0 6px 24px rgba(255,106,0,.35)}
.navlinks{display:flex;gap:10px;flex-wrap:wrap}
.navlinks a{padding:8px 12px;border-radius:10px;font-weight:600;color:#333}
.navlinks a:hover{background:rgba(0,0,0,.06)}
.cta-mini{display:flex;gap:10px;align-items:center}

.hero{position:relative;overflow:hidden;background:
 radial-gradient(900px 480px at 20% 0%, rgba(255,106,0,.18), transparent 60%),
 radial-gradient(700px 360px at 95% 10%, rgba(255,106,0,.14), transparent 60%),
 linear-gradient(180deg, #fff, #fff)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:42px 0}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr;padding:26px 0}}
h1{font-size:40px;line-height:1.1;margin:0 0 14px;font-weight:900;color:#1a1a1a}
.lead{font-size:18px;color:#555;margin:0 0 18px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(17,17,17,.1);background:#fff;font-weight:700;font-size:12px;color:#111}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--ags-orange);box-shadow:0 0 0 6px rgba(255,106,0,.12)}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:12px;font-weight:800;letter-spacing:.2px;transition:.25s transform, .25s box-shadow;will-change:transform}
.btn:active{transform:translateY(1px)}
.btn-ags{
  color:#fff;background:linear-gradient(90deg, #ff7d22, #ff6a00, #ff7d22);
  background-size:200% 100%;animation:agsShimmer 3.6s linear infinite;
  box-shadow:0 12px 28px rgba(255,106,0,.35), inset 0 -2px 0 rgba(0,0,0,.15);
}
.btn-ags:hover{box-shadow:0 14px 36px rgba(255,106,0,.45)}
.btn-ghost{color:#111;border:2px solid #111;background:#fff}
.btn-ghost:hover{background:#111;color:#fff}
@keyframes agsShimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:720px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:14px 16px;box-shadow:0 10px 26px rgba(0,0,0,.05)}
.kpi strong{display:block;font-size:22px}
.kpi span{font-size:12px;color:#666}

.section{padding:42px 0}
.section-title{font-size:26px;margin:0 0 14px;font-weight:900}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.06);transition:.25s transform,.25s box-shadow}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.08)}
.card-body{padding:14px}
.card-title{font-weight:800;margin:4px 0 6px}
.card-text{font-size:14px;color:#666}

.carousel{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#000}
.carousel-track{display:flex;transition:transform .6s ease}
.slide{min-width:100%;height:380px;position:relative}
.slide img{width:100%;height:100%;object-fit:cover;opacity:.9}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.55)}
.dot.active{background:#fff}

.chat-box{border:2px dashed rgba(0,0,0,.12);background:var(--ags-gray);border-radius:16px;min-height:360px;display:flex;align-items:center;justify-content:center;color:#666}
.notice{font-size:12px;color:#888}

.cta-bar{background:#111;color:#fff;border-radius:16px;padding:18px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.cta-bar a{color:#fff}

.site-footer{border-top:1px solid rgba(0,0,0,.06);padding:28px 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.footer-col h4{margin:0 0 8px;font-weight:800}
.footer-col p,.footer-col a{font-size:14px;color:#666}
.footer-col a:hover{color:#000}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

.badge-pill{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08);
}
.badge-pill:before{
  content:"";position:absolute;inset:0;border-radius:999px;
  padding:1px;background:conic-gradient(from 90deg, #ff6a00, transparent 40%, #ff6a00, transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

/* --- Auth / Roles --- */
.lock{pointer-events:none; opacity:.55; filter:grayscale(1); position:relative}
.lock:after{
  content:"\1F512"; /* candado */
  position:absolute; right:10px; top:10px; font-size:16px; opacity:.8;
}
.role-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; background:#111; color:#fff; font-weight:800; font-size:12px;
}
.auth-panel .field{display:grid; gap:6px; margin-bottom:10px}
.auth-panel input, .auth-panel select{
  border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:10px 12px; font-size:14px;
}
.auth-panel details{border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:10px 12px; background:#fff; margin-bottom:10px}
.auth-panel summary{cursor:pointer; font-weight:800}

/* --- Admin Users --- */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#666;text-align:left;padding:4px 8px}
.table tbody tr{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.table tbody td{padding:10px 12px;vertical-align:middle}
.table tbody tr.edit-row td{background:#fafafa}
.muted{color:#777;font-size:12px}
.actions .btn.sm{padding:8px 10px;border-radius:10px}
.btn.danger{border-color:#c43; color:#c43}
.row-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.row-grid label{font-size:12px;color:#444;display:grid;gap:6px}
.row-grid input, .row-grid select{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:8px 10px}
@media(max-width:900px){.row-grid{grid-template-columns:1fr 1fr}}

/* --- Password eye toggle --- */
.pass-wrap{position:relative}
.pass-wrap .toggle-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:1px solid rgba(0,0,0,.15); background:#fff; padding:6px 8px; border-radius:10px;
  font-size:12px; cursor:pointer;
}