:root {
  /* Paleta muestreada del mockup */
  --gold:        #c9a227;
  --gold-light:  #e8c766;
  --gold-deep:   #8a6d1a;
  --teal:        #2fb3a8;
  --teal-deep:   #1a6b64;
  --ink:         #070a04;
  --ink-2:       #0d0f0b;
  --stone:       #1a1b1a;
  --stone-2:     #232420;
  --silver:      #c8ccd0;
  --text:        #d9d4c8;
  --text-dim:    #9a9184;

  --maxw: 1280px;
  --nav-h: 76px;

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ============================ NAV ============================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(7,10,4,.97) 0%, rgba(7,10,4,.88) 62%, rgba(7,10,4,0) 100%);
  border-bottom: 1px solid rgba(201,162,39,.22);
}
.nav::after {
  /* filo dorado fino bajo el nav */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold) 50%, var(--gold-deep) 82%, transparent);
  opacity: .55;
}
.nav__inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Logo completo (M + "MICTLAN ONLINE") recortado del PNG del usuario y con el
   fondo #202020 hecho transparente, para que no se vea el rectangulo. */
.brand__logo {
  height: 46px; width: auto; display: block;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.75));
}

.nav__menu {
  display: flex; align-items: center; gap: 34px;
  margin-left: 34px;
  flex: 1 1 auto;
}
.nav__menu a {
  font-family: var(--font-display);
  font-size: 13.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text); opacity: .84;
  position: relative; padding: 6px 0;
  transition: color .18s, opacity .18s;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width .22s ease; transform: translateX(-50%);
}
.nav__menu a:hover { color: var(--gold-light); opacity: 1; }
.nav__menu a:hover::after { width: 130%; }

/* Botí³n PLAY NOW: marco dorado + rombos turquesa */
.btn-frame {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-light);
  background:
    linear-gradient(180deg, rgba(38,40,34,.95), rgba(14,16,12,.95));
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.25), 0 4px 18px rgba(0,0,0,.55);
  padding: 12px 30px;
  transition: transform .16s, box-shadow .2s, color .2s;
  white-space: nowrap;
}
.btn-frame::before, .btn-frame::after {
  /* rombos turquesa a los lados */
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  border: 1px solid rgba(200,230,225,.55);
  transform: translateY(-50%) rotate(45deg);
}
.btn-frame::before { left: -5px; }
.btn-frame::after  { right: -5px; }
.btn-frame:hover {
  color: #fff5d4;
  box-shadow: inset 0 0 0 1px rgba(232,199,102,.5), 0 0 22px rgba(47,179,168,.35), 0 6px 22px rgba(0,0,0,.6);
  transform: translateY(-1px);
}
.nav__play { flex: 0 0 auto; font-size: 14px; padding: 11px 34px; margin-left: auto; }

/* --- Server Status EN VIVO del nav (a la derecha del todo, tras PLAY NOW).
       Dos lineas: estado + jugadores, y debajo uptime/monstruos. --- */
.nav__status {
  flex: 0 0 auto;
  margin-left: 16px; padding: 8px 15px;
  border: 1px solid rgba(201,162,39,.28);
  background: linear-gradient(180deg, rgba(22,24,18,.82), rgba(8,10,6,.9));
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
.nav__status-row { display: flex; align-items: center; gap: 9px; }
.nav__status-label {
  font-family: var(--font-display); letter-spacing: .2em;
  color: #b9f0c6; font-weight: 600;
}
.nav__status.is-off .nav__status-label { color: #e79a9a; }
.nav__status-sep { width: 1px; height: 13px; background: rgba(201,162,39,.3); }
.nav__status-players { color: var(--text-dim); }
.nav__status-players b { color: var(--gold-light); font-size: 13.5px; }
.nav__status-sub {
  margin-top: 3px; font-size: 10.5px; letter-spacing: .04em;
  text-transform: none; color: var(--text-dim); opacity: .78;
}
.dot--nav { width: 8px; height: 8px; box-shadow: 0 0 9px rgba(70,209,106,.9); }

/* ============================ HERO ============================ */
/* El escenario es una imagen con proporcion fija (1672x500). Usamos
   aspect-ratio para que se vea COMPLETO y no se amplie/recorte como pasaba
   con `cover`. El fondo oscuro del body cubre lo que sobre en pantallas
   muy altas. */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 500;
  min-height: 420px;
  background: url('../img/hero-scene.png?v=5') center top / 100% auto no-repeat, var(--ink);
  overflow: hidden;
  /* Habilita las unidades de container (cqw = 1% del ancho del hero). Las
     usamos para TODAS las medidas del boton porque el fondo va con
     `100% auto`: el escenario escala solo con el ancho, nunca con el alto. */
  container-type: size;
  /* 1 "px del mockup" expresado en cqw (el mockup mide 1672 de ancho) */
  --u: .0598086cqw;
}

/* Velos para integrar el nav arriba y las tarjetas abajo */
.hero__veil-top {
  position: absolute; inset: 0 0 auto 0; height: 26%;
  background: linear-gradient(180deg, rgba(7,10,4,.94) 0%, rgba(7,10,4,.5) 55%, transparent 100%);
  pointer-events: none;
}
.hero__veil-bottom {
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(0deg, var(--ink) 4%, rgba(7,10,4,.72) 45%, transparent 100%);
  pointer-events: none;
}

/* Botones del hero: marco + rombos + placa salen del atlas obsidian-web-ui,
   que ya trae el boton en sus 4 estados. Se aplican como border-image 9-slice:
     sprite 364x92  ->  border-image-slice: 14 42 20 42  (+ `fill`, la placa es
     opaca y sin texto, asi que se pinta tal cual viene del atlas)
   - los rombos van a caballo del borde del marco (sprite x6..40 y x324..358),
     por eso los slices laterales (42) son mas anchos que el marco (18).
   - la escala s = 0.6854 hace que el marco caiga justo donde el mockup
     (x253..529 y x566..829, y391..452) y que T+B y el alto del boton encajen
     para que los rombos no se deformen. */
/* Estados del atlas (¡ojo con el orden!):
     005_365x90 = REPOSO, es la variante APAGADA (placa acero, marco fino)
     004_364x92 = HOVER,   es la que BRILLA (placa dorada calida con halo)
     006_363x89 = pulsado
   Estaban al reves: 004 en reposo hacia que los botones pareciesen ya
   iluminados sin pasar el raton. */
.hero-cta {
  position: absolute;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  border: 0 solid transparent;
  border-width: calc(9.6 * var(--u)) calc(28.8 * var(--u)) calc(13.7 * var(--u)) calc(28.8 * var(--u));
  border-image: url('../ui/obsidian-web-ui/005_365x90.png') 14 42 20 42 fill stretch;
  background: #14120f; /* por si el spritesheet no carga */
  /* el relleno del atlas ya pinta el centro; sin esto se veria un rectangulo
     de fondo asomando por las esquinas transparentes del sprite */
  background-clip: padding-box;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(18 * var(--u));
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: translate .14s;
}
.hero-cta__text {
  display: block;
  /* degradado dorado del mockup aplicado al texto */
  background: linear-gradient(180deg, #f8e9ba 0%, #e3c26c 46%, #b0862c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-left: .05em; /* compensa el letter-spacing que CSS añade al final */
  /* las mayusculas no tienen descendente: el centrado optico queda algo alto */
  transform: translateY(calc(3.2 * var(--u)));
}
/* Geometria medida sobre el mockup (1672x500) */
.hero-cta--create {
  left: calc(240.7 * var(--u)); top: calc(390.3 * var(--u));
  width: calc(302.1 * var(--u)); height: calc(63.1 * var(--u));
}
.hero-cta--download {
  left: calc(553.7 * var(--u)); top: calc(390.3 * var(--u));
  width: calc(289.1 * var(--u)); height: calc(63.1 * var(--u));
}
/* Al pasar el raton: la variante que BRILLA */
.hero-cta:hover,
.hero-cta:focus-visible {
  border-image-source: url('../ui/obsidian-web-ui/004_364x92.png');
  translate: 0 calc(-2 * var(--u));
}
.hero-cta:active {
  border-image-source: url('../ui/obsidian-web-ui/006_363x89.png');
  translate: 0 0;
}
.hero-cta:focus-visible { outline: none; }
.hero-cta:hover .hero-cta__text,
.hero-cta:focus-visible .hero-cta__text {
  background: linear-gradient(180deg, #fff6d8 0%, #f0d488 46%, #c49a3c 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ============================ SECCIONES ============================ */
.section { position: relative; padding: 92px 0; }
.section--features { padding-top: 60px; }

/* Cabecera de seccion: barra dorada del atlas con rombo turquesa central.
   (El banner de clean-headers trae la piramide DENTRO y chocaba con el texto,
   por eso se usa este divisor en su lugar.) */
.section-title {
  text-align: center;
  margin: 0 auto 58px;
  max-width: 880px;
}
.section-title__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.3vw, 27px);
  letter-spacing: .3em; text-transform: uppercase;
  background: linear-gradient(180deg, #f6e4ab, var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px;
}
.section-title__divider {
  display: block; /* un <span> es inline: sin esto width/height no aplican */
  width: min(580px, 90%); height: 26px; margin: 0 auto;
  background: url('../ui/obsidian-web-ui/015_800x53.png') center / 100% 100% no-repeat;
}

/* --- Tarjetas con marco nine-slice del atlas --- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.card {
  position: relative;
  /* Marco del atlas obsidian-web-ui: esquinas rectas + rombo turquesa arriba */
  border-style: solid;
  border-width: 34px 30px 30px 30px;
  border-image: url('../ui/obsidian-web-ui/001_745x257.png') 63 60 58 60 fill stretch;
  background: rgba(8,8,5,.6);
  padding: 18px 26px 30px;
  text-align: center;
  transition: transform .2s ease, filter .3s ease;
}
.card:hover { transform: translateY(-5px); filter: brightness(1.12); }
.card__icon {
  width: 86px; height: 86px; margin: 2px auto 14px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.8));
}
.card__title {
  font-family: var(--font-display);
  font-size: 23px; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 12px;
  background: linear-gradient(180deg, #f2dd9a, var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card__rule {
  width: 92px; height: 15px; margin: 0 auto 16px;
  background-image: url('../ui/ui-kit/030_472x81.png'); /* divisor del atlas */
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.card__text { margin: 0 auto; color: var(--text-dim); font-size: 15px; max-width: 30ch; }

/* ============================ FOOTER ============================ */
.footer {
  position: relative;
  border-top: 1px solid rgba(201,162,39,.2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(35,32,24,.55) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-2), #050702);
  padding: 58px 0 66px;
}
/* El Server Status se mueve al nav: el footer se queda con una sola columna
   centrada (comunidad), con lineas simetricas a los lados del titulo. */
.footer__grid {
  display: block; max-width: 620px; margin: 0 auto; text-align: center;
}
.panel-head {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 22px;
  display: flex; align-items: center; gap: 14px;
}
.panel-head::before, .panel-head::after {
  content: ""; flex: 1; height: 1px;
}
.panel-head::before { background: linear-gradient(90deg, transparent, rgba(201,162,39,.5)); }
.panel-head::after  { background: linear-gradient(90deg, rgba(201,162,39,.5), transparent); }

/* Semaforo online/offline (lo usa el Server Status del nav) */
.dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #46d16a; box-shadow: 0 0 12px rgba(70,209,106,.85);
  flex: 0 0 auto;
}
.dot--off { background: #d14646; box-shadow: 0 0 12px rgba(209,70,70,.85); }

/* Social */
.social { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.social a {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(201,162,39,.32);
  background: linear-gradient(180deg, rgba(32,34,29,.8), rgba(10,12,8,.8));
  transition: border-color .2s, transform .18s, box-shadow .2s;
}
.social a:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(201,162,39,.28);
}
.social svg { width: 23px; height: 23px; fill: var(--silver); transition: fill .2s; }
.social a:hover svg { fill: var(--gold-light); }

.footer__bottom {
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid rgba(201,162,39,.14);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  color: var(--text-dim); font-size: 13px;
}
.footer__bottom a:hover { color: var(--gold-light); }
.footer__tagline {
  font-family: var(--font-display); letter-spacing: .22em;
  text-transform: uppercase; font-size: 11.5px; color: var(--gold-deep);
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1080px) {
  .nav__menu { gap: 22px; margin-left: 18px; }
  .nav__menu a { font-size: 12px; letter-spacing: .12em; }
  .brand__logo { height: 38px; }
}
/* Botones del hero: por debajo de ~1100px el escenario queda tan pequeño que
   el marco 9-slice (y su texto) serian ilegibles, asi que el hero pasa a flujo
   vertical: imagen a todo el ancho arriba y los botones debajo a tamaño real
   (1 unidad = 1px real), apilados y centrados. */
.hero__stage { display: none; }

@media (max-width: 1100px) {
  .hero {
    --u: 1px;
    container-type: normal; /* deja de ser contenedor: el alto manda el contenido */
    aspect-ratio: auto;
    min-height: 0;
    background: url('../img/hero-scene.png?v=5') center top / 100% auto no-repeat, var(--ink);
    /* el nav es fijo: sin este hueco taparia media imagen en pantallas
       estrechas. background-origin:content-box alinea la imagen con el stage. */
    padding-top: var(--nav-h);
    background-origin: content-box;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 16px; padding-bottom: 34px;
  }
  .hero__stage {
    display: block; width: 100%; flex: 0 0 auto;
    aspect-ratio: 1672 / 500; /* = alto real de la imagen al 100% del ancho */
  }
  .hero__veil-top, .hero__veil-bottom { display: none; }
  .hero-cta {
    position: static;
    left: auto; top: auto; width: auto;
    height: calc(63.1 * var(--u));
    padding: 0 calc(10 * var(--u));
  }
  .hero-cta:hover, .hero-cta:focus-visible { translate: 0 -2px; }
}
@media (max-width: 1080px) {
  .nav__status { padding: 7px 10px; margin-left: 12px; letter-spacing: .08em; }
  .nav__status-sep { display: none; }
  .nav__status-players b { font-size: 13px; }
  .nav__status-sub { display: none; }
}
@media (max-width: 900px) {
  .nav__menu { display: none; }
  .cards { grid-template-columns: 1fr; gap: 32px; }
  .card { border-width: 28px 22px 24px 22px; }
  .section { padding: 62px 0; }
  .header-banner, .section-title { margin-bottom: 38px; }
}
@media (max-width: 560px) {
  .brand__logo { height: 32px; }
  .nav__play { font-size: 12px; padding: 10px 20px; letter-spacing: .12em; }
  /* en el movil mas estrecho el nav no da para todo: dejo solo el semaforo */
  .nav__status { padding: 7px 9px; margin-left: 10px; }
  .nav__status-players, .nav__status-sep, .nav__status-sub { display: none; }
  .card__icon { width: 68px; height: 68px; }
  .social a { width: 46px; height: 46px; }
  .social svg { width: 20px; height: 20px; }
}

/* Misma razon que en el panel de MyAAC: el centro del atlas (625x136) NO se
   estira al tamano de la tarjeta, se repite la baldosa sin costuras sacada de
   esa misma placa. */
.card {
  border-image: url('../ui/obsidian-web-ui/001_745x257.png') 63 60 58 60 stretch;
  background-color: #161717;
  background-image: url('../ui/panel-plate.png');
  background-repeat: repeat;
  background-clip: padding-box;
}