:root {
  --fondo: #0b0e14;
  --fondo-2: #10141d;
  --tarjeta: #151a26;
  --borde: #262d3d;
  --texto: #e8ebf2;
  --gris: #98a1b5;
  --rojo: #d62839;
  --azul: #2f6fdd;
  --color: #2f6fdd; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.contenedor { width: 1120px; max-width: 92%; margin: 0 auto; }

h1, h2, h3 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 0 0 12px;
}
h1 { font-size: 64px; }
h2 { font-size: 42px; }
h3 { font-size: 28px; }
p { margin: 0 0 14px; }
.gris { color: var(--gris); }

.boton {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1px solid var(--fondo-boton, var(--color));
  background: var(--fondo-boton, var(--color));
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.boton:hover { filter: brightness(0.88); }
.boton svg { width: 18px; height: 18px; fill: currentColor; vertical-align: -3px; margin-right: 8px; }
.boton.borde { background: transparent; border-color: var(--borde); }
.boton.borde:hover { border-color: var(--gris); filter: none; }
.boton.discord { --color: #5865f2; }
.boton.ancho { display: block; text-align: center; }

.menu { background: var(--fondo-2); border-bottom: 1px solid var(--borde); }
.menu-contenido { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: "Bebas Neue", Impact, sans-serif; font-size: 26px; letter-spacing: 1px; }
.marca img { width: 40px; height: 40px; object-fit: contain; }
.marca b { color: var(--rojo); font-weight: normal; }
.enlaces { display: flex; align-items: center; gap: 22px; }
.enlaces a { color: var(--gris); }
.enlaces a:hover, .enlaces a.activo { color: #fff; }
.enlaces a.activo { border-bottom: 2px solid var(--rojo); padding-bottom: 3px; }
.enlaces .pronto { color: #5c6478; }
.enlaces .boton { padding: 8px 18px; color: #fff; }
.btn-menu { display: none; background: none; border: 1px solid var(--borde); color: #fff; padding: 8px 14px; border-radius: 6px; font-family: inherit; font-size: 15px; cursor: pointer; }

.portada { padding: 60px 0; border-bottom: 1px solid var(--borde); }
.portada-grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.portada-texto { max-width: 520px; }
.portada .rojo { color: var(--rojo); }
.portada .azul { color: #5b93f0; }
.portada p.intro { font-size: 20px; color: #c3cadb; margin: 16px 0 26px; }
.portada .botones { display: flex; gap: 12px; flex-wrap: wrap; }
.portada img { width: 400px; }

.seccion { padding: 64px 0; }
.seccion.oscura { background: var(--fondo-2); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.titulo-seccion { margin-bottom: 30px; }
.titulo-seccion p { color: var(--gris); max-width: 620px; }

.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.caja { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px; padding: 24px; }
.caja p { color: var(--gris); margin: 0; }

.mini { display: block; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px; padding: 14px; text-align: center; }
.mini:hover { border-color: var(--color); }
.mini h3 { margin: 8px 0 0; font-size: 26px; }
.mini .precio { color: var(--color); font-size: 22px; font-weight: 700; }

.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.paso { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px; padding: 24px; }
.paso::before { counter-increment: paso; content: counter(paso) "."; font-family: "Bebas Neue", Impact, sans-serif; font-size: 40px; color: var(--rojo); display: block; line-height: 1; margin-bottom: 8px; }
.paso p { color: var(--gris); margin: 0; }

.llamado { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px; padding: 44px 24px; text-align: center; }
.llamado p { color: var(--gris); max-width: 520px; margin: 0 auto 22px; }
.llamado .botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.encabezado { padding: 50px 0 10px; text-align: center; }
.encabezado p { color: #c3cadb; max-width: 620px; margin: 0 auto 10px; }
.encabezado .nota { color: var(--gris); font-size: 15px; }

.vips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 30px 0 20px; }
.vip { display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--borde); border-top: 4px solid var(--color); border-radius: 8px; padding: 18px 22px 24px; }
.vip img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; margin-bottom: 6px; }
.vip h2 { font-size: 32px; margin-bottom: 0; }
.vip .precio { color: var(--color); font-family: "Bebas Neue", Impact, sans-serif; font-size: 40px; line-height: 1.2; margin-bottom: 14px; }
.vip .precio small { color: var(--gris); font-family: "Roboto", Arial, sans-serif; font-size: 14px; }
.vip ul { flex: 1; border-top: 1px solid var(--borde); padding-top: 14px; margin-bottom: 22px; }
.vip li { padding: 4px 0 4px 18px; position: relative; }
.vip li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; background: var(--color); }
.vip li.destacado { font-weight: 700; }

.v-vip { --color: #4a85f0; --fondo-boton: #2a66d4; }
.v-plus { --color: #e0952a; }
.v-plusmas { --color: #b06af0; --fondo-boton: #9340d6; }
.v-deluxe { --color: #e9b730; }
.v-luxury { --color: #3fa9f5; }
.v-premium { --color: #3ddc84; }
.v-elite { --color: #ff5a5f; --fondo-boton: #d62839; }
.v-franzita { --color: #e8368f; --fondo-boton: #c92577; }
.v-supreme { --color: #ffd95a; }

.v-deluxe .boton, .v-luxury .boton, .v-plus .boton, .v-premium .boton, .v-supreme .boton { color: #111; }

.tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1000px; background: var(--tarjeta); }
th, td { padding: 12px 8px; text-align: center; border-bottom: 1px solid var(--borde); font-size: 14px; }
thead th { background: var(--fondo-2); font-family: "Bebas Neue", Impact, sans-serif; font-weight: normal; font-size: 19px; letter-spacing: 0.5px; color: var(--color); }
tbody th, thead th:first-child { width: 150px; }
tbody th { text-align: left; padding-left: 14px; color: var(--gris); font-weight: 500; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.no { color: #8a94a9; }
td.si { color: #6fcf8e; }

.pie { background: var(--fondo-2); border-top: 1px solid var(--borde); padding: 40px 0 24px; }
.pie-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; }
.pie-titulo { font-family: "Bebas Neue", Impact, sans-serif; font-weight: normal; font-size: 22px; letter-spacing: 1px; margin: 0 0 10px; }
.pie li { margin-bottom: 6px; color: var(--gris); }
.pie a:hover { color: #fff; }
.legal { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--borde); color: #8a93a8; font-size: 13px; }

.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1b2132; border: 1px solid var(--borde); color: #fff; padding: 12px 20px; border-radius: 6px; max-width: 92%; text-align: center; display: none; z-index: 10; }
.aviso.visible { display: block; }

@media (max-width: 900px) {
  h1 { font-size: 50px; }
  .vips { grid-template-columns: repeat(2, 1fr); }
  .tres, .pasos { grid-template-columns: 1fr; }
  .minis { grid-template-columns: repeat(2, 1fr); }
  .portada-grid { flex-direction: column-reverse; text-align: center; }
  .portada .botones { justify-content: center; }
  .portada img { width: 280px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .btn-menu { display: block; }
  .enlaces { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 14px; background: var(--fondo-2); border-bottom: 1px solid var(--borde); padding: 18px 4%; }
  .enlaces.abierto { display: flex; }
  .menu { position: relative; }
}
@media (max-width: 600px) {
  .vips, .pie-grid, .minis { grid-template-columns: 1fr; }
}

.autos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 30px 0 20px; }
.auto { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.auto img { width: 100%; aspect-ratio: 443 / 431; object-fit: cover; }
.auto h2 { margin: 0; padding: 14px 18px; font-size: 28px; border-top: 1px solid var(--borde); }

.incluye { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.incluye .caja { border-top: 4px solid var(--color); padding: 18px; }
.incluye .caja h3 { font-size: 24px; color: var(--color); margin-bottom: 4px; }

@media (max-width: 900px) {
  .autos { grid-template-columns: repeat(2, 1fr); }
  .incluye { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .autos, .incluye { grid-template-columns: 1fr; }
}

.nota a { text-decoration: underline; }
.vacio { text-align: center; color: var(--gris); border: 1px dashed var(--borde); border-radius: 8px; padding: 60px 20px; margin: 30px 0 20px; }

.pie-texto { margin-top: 12px; max-width: 320px; }
.ver-mas { margin-top: 26px; }
.boton.rojo { --color: var(--rojo); }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 20; background: #fff; color: #111; padding: 10px 16px; border-radius: 6px; font-weight: 700; }
.saltar:focus { top: 12px; }

a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
.boton:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25); }

.error { padding: 110px 0 140px; }
.error h1 { font-size: 120px; color: var(--rojo); }
.error .botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.normas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 30px 0 20px; }
.norma { display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--borde); border-top: 4px solid var(--rojo); border-radius: 8px; padding: 24px; }
.norma h2 { font-size: 32px; }
.norma p { flex: 1; color: var(--gris); margin-bottom: 22px; }

.otras ul { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 26px 0 8px; }
.otras a { display: block; padding: 8px 16px; border: 1px solid var(--borde); border-radius: 6px; color: var(--gris); font-size: 15px; }
.otras a:hover { color: #fff; border-color: var(--gris); }
.otras a.activo { color: #fff; border-color: var(--rojo); background: rgba(214, 40, 57, 0.18); }

.normativa { max-width: 860px; margin: 0 auto; padding: 10px 0 30px; }
.normativa h2 { font-size: 34px; margin: 34px 0 12px; }
.normativa h3 { font-size: 26px; margin: 26px 0 10px; color: #c3cadb; }
.normativa p, .normativa li { color: #d5dae6; }
.normativa ul, .normativa ol { padding-left: 24px; margin: 0 0 16px; }
.normativa ul { list-style: disc; }
.normativa li { margin-bottom: 8px; }
.normativa strong { color: #fff; }
.normativa a { color: #8fb4ff; text-decoration: underline; }
.normativa .vacio { margin: 20px 0; }

@media (max-width: 900px) {
  .normas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .normas { grid-template-columns: 1fr; }
}