/* =========================
   RESET + BASE
   ========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg:#121212;
  --bg-soft:#1e1e1e;
  --ink:#f1f1f1;
  --ink-dim:#ffffffcc;
  --brand-1:#cee214;  /* lima suave */
  --brand-2:#0d3a6a;  /* azul profundo */
  --brand-3:#27628a;  /* azul acento */
  --panel: linear-gradient(135deg, #092d55c5, #121212);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

html, body { height: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: fadeIn 1.2s ease-in-out;
}

a { color: var(--ink-dim); text-decoration: none; }
ul { list-style: none; }
h2 { margin-bottom: .5em; }

/* =========================
   NAVBAR
   ========================= */
.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; background: var(--panel); box-shadow:0 2px 4px #000;
}
.logo{ font-size:1.8em; color:#00ffcc; }
.logo-img{ height:85px; transition: transform .3s ease; }
.logo-img2{ height:210px; transition: transform .3s ease; }
.logo-img3{ height:2px; transition: transform .3s ease; }

.nav-links{ display:flex; gap:.3rem; }
.nav-links li{ display:inline-block; }
.nav-links a{
  display:inline-block; padding:.5em 1em; border-radius:8px; font-weight:700; color:#fff;
  background:#7f807f3b; transition:.25s ease;
}
.nav-links a:hover{ filter:brightness(1.15); transform: translateY(-1px); }

/* Botones específicos */
.btn-inicio,.btn-sobre,.btn-normativa,.btn-tienda,.btn-whitelist{ background:#7f807f3b; }
.btn-inmobiliaria{ background:#1b6b28; color:#fff; }

/* =========================
   HERO / LANDING
   ========================= */
.hero{
  text-align:center; padding:4em 2em;
  background:url('https://i.imgur.com/rCkO3Tq.jpeg') center/cover no-repeat; color:#fff;
}
.hero .btn{
  display:inline-block; margin:1em; padding:.8em 1.5em; border:none; border-radius:8px;
  background:#7f807f3b; color:#fff; font-weight:700; transition:.25s ease;
}
.hero .btn:hover{ transform: translateY(-1px); }

.landing-header{ position:relative; height:100vh; overflow:hidden; }
.header-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to right, #000000d0, #00000090);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4rem;
}
.header-buttons{ display:flex; gap:2rem; flex-wrap:wrap; }
.header-buttons a{
  padding:.8em 2em; border-radius:10px; font-weight:700; font-size:1.05em; text-transform:uppercase; transition:.25s ease;
}
.btn-discord{ background:#7289da; color:#fff; }
.btn-whitelist{ background:#27628a; color:#fff; }
.btn-inmobiliaria{ background:#1b6b28; color:#fff; }
.btn-play{ background:#e67e22; color:#fff; }
.header-buttons a:hover{ transform:scale(1.05); }

.carousel{ position:absolute; inset:0; z-index:1; }
.carousel-image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 1s ease-in-out;
}
.carousel-image.active{ opacity:1; z-index:1; }

.landing-title{
  position:absolute; top:15%; left:50%; transform:translateX(-50%);
  width:min(680px, 90%); z-index:3; color:#fff; font-size:2.4rem; font-weight:800; text-align:center;
  text-shadow:2px 2px 10px #000; animation: fadeInDown 1.2s ease-in-out; pointer-events:none;
}
@keyframes fadeInDown{
  from{ opacity:0; transform: translate(-50%, -30px); }
  to{ opacity:1; transform: translate(-50%, 0); }
}

/* =========================
   SECCIONES GENERALES
   ========================= */
.section{
  width:100%; max-width:1200px; margin:0 auto; padding:4em 2em; text-align:center;
  background: none; border-top:1px solid #333;
}

/* Tienda */
.store-items{ display:flex; flex-wrap:wrap; gap:2em; margin-top:2em; }
.item{
  flex:1 1 250px; padding:1em; background:#292929; border-radius:12px; box-shadow:0 0 10px #ffffff20;
}
.buy-btn{
  margin-top:1em; padding:.6em 1.2em; background:#7f807f3b; border:none; border-radius:8px;
  color:#fff; font-weight:700; transition:.2s ease;
}
.buy-btn:hover{ background:#7f807f79; }

/* Formularios generales */
form{ display:flex; flex-direction:column; gap:1em; max-width:400px; margin:auto; }
input, button{ padding:.8em; border-radius:8px; border:none; }
button{ background:#7f807f3b; color:#fff; font-weight:700; }
button:hover{ background:#7f807f71; }

/* Footer */
footer{
  text-align:center; padding:2em; background: var(--panel); border-top:1px solid #333;
  color:#bbb;
}

/* Animación FadeIn */
@keyframes fadeIn{ from{opacity:0; transform: translateY(20px);} to{opacity:1; transform: translateY(0);} }

/* =========================
   DISCORD / SERVIDORES
   ========================= */
.discord-section{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  background: var(--panel); padding:4em 2em; border-top:2px solid #cee21420;
}
.discord-content{ flex:1; color:#fff; max-width:600px; }
.discord-content h3{
  font-size:1rem; color:#cee214; opacity:.65; margin-bottom:.5em; text-transform:uppercase; letter-spacing:1px;
}
.discord-content h2{ font-size:2em; margin-bottom:1em; text-align:center; }
.discord-image{ flex:1; display:flex; align-items:center; justify-content:center; margin-top:2em; }
.discord-image img{ max-width:40%; height:auto; }

.server-section{ margin-top:2em; }
.section-title{
  font-size:1.1em; font-weight:800; background: linear-gradient(to right, #00ffcc, #0e8c63);
  padding:.5em 1em; text-align:center; color:#000; border-radius:8px; margin-bottom:1em; text-transform:uppercase;
}
.server-group{ margin-bottom:1.8em; }
.server-label{
  display:inline-block; background: var(--panel); color:#fff; padding:.4em 1em; font-size:.85em; font-weight:700; border-radius:6px; margin-bottom:.8em;
}
.server-label.general{ background: linear-gradient(135deg, #ffffff20, #292929); }
.server-box{
  display:flex; align-items:center; gap:1em; background: linear-gradient(135deg, #00000020, #121212);
  padding:1em; border-radius:12px; transition:.3s ease; box-shadow:0 0 10px rgba(0,0,0,.3);
}
.server-box:hover{ transform: translateY(-2px); box-shadow:0 0 15px #cee21420; }
.server-icon{ width:48px; height:48px; border-radius:8px; object-fit:cover; }

/* =========================
   ABOUT
   ========================= */
.about-section{ padding:4em 2em; background: var(--panel); text-align:center; }
.about-title{
  font-size:2.4em; margin-bottom:2em; color:#fff; text-shadow:0 0 8px #cde21445;
}
.about-cards{ display:flex; flex-wrap:wrap; gap:2em; max-width:1500px; margin:0 auto; }
.about-card{
  flex:1 1 280px; background: linear-gradient(135deg, #00000020, #121212);
  border:1px solid #333; border-radius:12px; padding:2em; box-shadow:0 0 10px #cee21420; transition:.3s ease;
}
.about-card:hover{ transform: translateY(-5px); box-shadow:0 0 20px #cee21420; }
.about-card h3{ margin-bottom:.5em; color:#fff; }
.about-card p{ color:#ddd; line-height:1.5; }

/* =========================
   NORMATIVA
   ========================= */
.normativa{ padding:2rem; line-height:1.7; color:#f1f1f1; background:#111; }
.normativa h2{ font-size:2rem; margin-bottom:1rem; border-bottom:2px solid #555; }
.normativa h3{ font-size:1.6rem; margin-top:2rem; color:#beaa34; }
.normativa h4{ font-size:1.2rem; margin-top:1.5rem; color:#d39014; }
.normativa ul{ list-style: disc; padding-left:1.5rem; margin-bottom:1rem; }
.normativa p{ margin-bottom:.8rem; }

/* =========================
   LOGS
   ========================= */
.logs-section{
  margin-top:2em; background:#292929; padding:1.5em; border-radius:12px; box-shadow:0 0 10px #000;
}
.logs-section h2{ margin-bottom:.8em; color: var(--brand-1); }
.logs-section h3{ margin:.5em 0; color:#ffffffcc; }
.logs-table{ width:100%; border-collapse:collapse; margin-bottom:1.5em; }
.logs-table th, .logs-table td{ padding:.75em; border:1px solid #444; font-size:.95em; text-align:left; }
.logs-table th{ background: linear-gradient(135deg, #cee21420, #121212); color:#fff; }
.logs-table tr:nth-child(even){ background:#1e1e1e; }
.collapsible-content{ text-align:left; }

/* =========================
   DROPDOWNS + SUBMENÚ
   ========================= */
.navbar .nav-links li.dropdown{ position:relative; }
.navbar .nav-links li.dropdown .dropdown-menu,
.navbar .nav-links li.dropdown .dropdown-menu2{
  display:none; position:absolute; top:100%; left:0; background:#2e2e2e; border:1px solid #444; border-radius:8px;
  min-width:200px; padding:0; margin:0; list-style:none; z-index:1000;
}
.navbar .nav-links li.dropdown:hover .dropdown-menu,
.navbar .nav-links li.dropdown:hover .dropdown-menu2{ display:block; }
.navbar .nav-links li.dropdown .dropdown-menu li,
.navbar .nav-links li.dropdown .dropdown-menu2 li{ display:block; width:100%; }
.navbar .nav-links li.dropdown .dropdown-menu li a,
.navbar .nav-links li.dropdown .dropdown-menu2 li a{
  display:block; width:100%; padding:10px 15px; color:#f1f1f1; transition: background .3s ease; text-align:left;
}
.navbar .nav-links li.dropdown .dropdown-menu li a:hover,
.navbar .nav-links li.dropdown .dropdown-menu2 li a:hover{ background:#2a2a2a; }

.dropdown-submenu{ position:relative; }
.dropdown-submenu .dropdown-submenu-menu{
  display:none; position:absolute; top:0; left:100%; background:#2e2e2e; border:1px solid #444;
  border-radius:8px; min-width:200px; z-index:1001;
}
.dropdown-submenu:hover .dropdown-submenu-menu{ display:block; }
.dropdown-submenu > a::after{
  content:"▶"; float:right; margin-left:8px; font-size:.8em; color:#aaa;
}

/* =========================
   SECCIONES SAMS
   ========================= */
.contenido{
  padding:2rem; background: var(--panel); color:#fff;
}
.SAMS-info .info-box{
  background: linear-gradient(135deg, #d83b3bc5, #121212);
  border:1px solid #000000c5; padding:2rem; border-radius:12px;
  box-shadow:0 0 10px rgba(0,0,0,.05); margin: 0 auto 3rem; max-width:1000px;
}
.SAMS-info h2, .SAMS-info h3{ color:#fff; margin-bottom:1rem; }
.SAMS-info p{ margin-bottom:1rem; }
.SAMS-info ul{ list-style:disc; padding-left:2rem; margin-bottom:1rem; }
.SAMS-info li{ margin-bottom:.6rem; }

.ubicaciones{ max-width:1000px; margin:0 auto; text-align:center; }
.ubicaciones h2{ font-size:2rem; margin-bottom:2rem; color:#fff; }
.ubicaciones-grid{ display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; }
.ubicacion{
  background: linear-gradient(135deg, #d83b3bc5, #121212);
  border-radius:12px; padding:1rem; max-width:300px; box-shadow:0 0 10px rgba(0,0,0,.1); text-align:center;
}
.ubicacion img{ width:100%; border-radius:10px; margin-bottom:1rem; }
.ubicacion h3{ color:#fff; font-size:1.2rem; margin-bottom:.5rem; }
.ubicacion p{ color:#fff; font-size:.95rem; }

/* =========================
   BOTÓN CERRAR SESIÓN
   ========================= */
.btn-cerrar{
  display:inline-block; margin: 0 auto; padding:.6em 1.2em; background:#7f807f3b; color:#fff; font-weight:700;
  border:none; border-radius:8px; transition:.25s ease; cursor:pointer;
}
.btn-cerrar:hover{ filter:brightness(1.2); }

/* =========================
   WHITELIST — DISEÑO FORM OOC/IC
   ========================= */
.progress-container{
  width:100%; max-width:980px; height:12px; background:#2a2a2a;
  border-radius:999px; overflow:hidden; margin: 1rem auto 2rem; box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
.progress-bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--brand-1), #4aa3ff); transition: width .3s ease; }

/* Tarjetas/pasos centrados */
.form-step {
  background: linear-gradient(145deg, #0d1b2a, #1b263b);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  color: #fff;
  max-width: 800px;     /* ya lo tienes, mantenlo centrado */
  margin: 2rem auto;    /* centrado vertical/horizontal */
  position: relative;
  margin: 2rem auto;
  max-width: 800px;
}

.form-step.active{ display:flex; flex-direction:column; gap:1em; }

/* Header billete */
.ticket-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:1.25rem; }
.ticket-logo{ height:46px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.ticket-title{
  margin:0; font-size:1.1rem; font-weight:800; letter-spacing:.6px;
  padding:.45rem .9rem; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  text-transform:uppercase;
}

/* Grid responsive para el contenido de cada paso */
.ticket-layout{
  display: grid;
  grid-template-columns: 1fr !important;  /* 1 columna siempre */
  gap: 1.25rem;
}

.ticket-left{
  display: grid;
  grid-template-columns: 1fr !important;  /* inputs uno debajo del otro */
  gap: 1rem;
}

.ticket-right{
  width: 100%;
}
/* Campos */
.ticket-field{ display:flex; flex-direction:column; }
.ticket-field label{ font-weight:700; font-size:.95rem; color:#eaeef3; margin-bottom:.35rem; }
.ticket-field input, .ticket-field select, .ticket-field textarea,
.ticket-box textarea, input, textarea{
  width:100%; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:.75rem .9rem; color:#f7f9fc; font-size:.98rem; outline:none;
}
.ticket-field input::placeholder, .ticket-field textarea::placeholder, .ticket-box textarea::placeholder{ color: rgba(255,255,255,.55); }
.ticket-field input:focus, .ticket-field textarea:focus, .ticket-field select:focus, .ticket-box textarea:focus{
  border-color:#9ad2ff; box-shadow:0 0 0 3px rgba(154,210,255,.15);
}

/* Caja de texto grande en derecha */
.ticket-box{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1rem;
}
.ticket-box label{ font-weight:700; margin-bottom:.4rem; color:#fff; }
.ticket-box textarea{ width:100%; min-height:120px; }

/* Botonera */
.button-group{
  display:flex; justify-content:flex-end; gap:.75rem; margin-top:1rem;
}
button{
  padding:.8rem 1.2rem; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(20,150,226,.25), rgba(20,150,226,.18));
  color:#fff; font-weight:700; letter-spacing:.3px; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
button:hover{ transform: translateY(-1px); box-shadow:0 10px 18px rgba(0,0,0,.25); }
button:active{ transform: translateY(0); }

/* Contadores */
#contador-historia, #contador-reglas{
  display:block; text-align:right; font-size:.8rem; color:#aaa; margin-top:4px; margin-right:4px;
}

/* Errores */
textarea.input-error, input.input-error, select.input-error{
  border:1px solid #e74c3c !important; box-shadow:0 0 0 3px rgba(231,76,60,.18);
}

/* Popup recordatorio */
#popup-recordatorio{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.popup-hidden{ display:none !important; }
.popup-card{
  background:#1f1f1f; color:#fff; padding:2rem; border-radius:12px; max-width:420px; width:90%;
  box-shadow:0 0 20px rgba(255,255,255,.1); position:relative; text-align:center; animation: fadeIn .5s ease;
}
.popup-card h3{ margin:0; color: var(--brand-1); }
.popup-card p{ margin-top:1rem; font-size:.95rem; }
.popup-close{ position:absolute; top:10px; right:15px; font-size:1.5rem; cursor:pointer; }

/* Resultado del submit */
#resultado.hidden{ display:none; }
#resultado{ margin-top:1rem; font-weight:700; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px){
  .ticket-layout{ grid-template-columns: 1fr; }
  .ticket-left{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .discord-section{ flex-direction:column; }
  .discord-image img{ max-width:70%; }
  .landing-title{ font-size:1.7rem; }
}
@media (max-width: 560px){
  .form-step{ padding:1.2rem; }
  .ticket-title{ font-size:1rem; }
  .whitelist-banner{ width:240px; }
}