/* ==========================================================================
   Estilo inspirado en la interfaz de World of Warcraft (WotLK)

   Las imagenes van en /assets/img/ como archivos normales. Mientras no
   existan, cada hueco muestra un marcador con el nombre del archivo y una
   nota: no hay ningun <img> roto ni JavaScript involucrado (el CSP del
   sitio no permite scripts inline). En cuanto el archivo aparece en esa
   carpeta con ese nombre exacto, la imagen sustituye al marcador sola.
   Ver web/IMAGENES-NANOBANANA.md para los prompts de cada una.
   ========================================================================== */

:root {
  --oro:          #c8aa6e;
  --oro-claro:    #f0e0b0;
  --oro-oscuro:   #7a6434;
  --fondo:        #0a0a0c;
  --panel:        #14161c;
  --panel-claro:  #1d212b;
  --borde:        #3a3327;
  --texto:        #d8d3c4;
  --texto-suave:  #9a9385;
  --verde:        #3fa34d;
  --rojo:         #b23b3b;
  --azul:         #4a7ebb;
  --alianza:      #1e5fa8;
  --horda:        #8c1616;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse at 50% -10%, #1c2230 0%, transparent 60%),
    linear-gradient(180deg, #0d0f14 0%, var(--fondo) 100%);
  background-attachment: fixed;
  color: var(--texto);
  font-family: "Segoe UI", "Trebuchet MS", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--oro); text-decoration: none; }
a:hover { color: var(--oro-claro); text-decoration: underline; }

.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- Cabecera ---------- */
.cabecera {
  border-bottom: 2px solid var(--oro-oscuro);
  background: linear-gradient(180deg, #1a1d26 0%, #0e1015 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  position: sticky; top: 0; z-index: 50;
}
.cabecera-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; padding: 14px 20px; max-width: 1080px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-emblema {
  width: 42px; height: 42px; border-radius: 50%;
  background-color: #1a1d26; background-size: cover; background-position: center;
  border: 1px solid var(--oro-oscuro); flex-shrink: 0;
}
.logo-texto {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-oscuro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 8px rgba(200,170,110,.25);
}
.logo-texto span { display: block; font-size: 10px; letter-spacing: 3px;
  color: var(--texto-suave); -webkit-text-fill-color: var(--texto-suave); font-weight: 400; }

nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a {
  padding: 8px 13px; border: 1px solid transparent; border-radius: 3px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
}
nav a:hover, nav a.activo {
  border-color: var(--oro-oscuro);
  background: linear-gradient(180deg, rgba(200,170,110,.16), rgba(200,170,110,.04));
  text-decoration: none;
}

/* ---------- Hero (portada) ---------- */
.hero {
  position: relative;
  min-height: 720px;
  display: flex; align-items: center;
  background-color: #0e1015;
  background-size: cover; background-position: center 50%; background-repeat: no-repeat;
  border-bottom: 2px solid var(--oro-oscuro);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.08) 0%, rgba(10,10,12,.5) 65%, rgba(10,10,12,.8) 100%);
}
.hero-contenido { position: relative; z-index: 1; padding: 60px 20px 150px; max-width: 1080px; margin: 0 auto; width: 100%; text-align: center; }
.hero-etiqueta {
  display: inline-block; padding: 4px 12px; border: 1px solid var(--oro-oscuro);
  border-radius: 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--oro-claro); background: rgba(10,10,12,.6); margin-bottom: 16px;
}
.hero h1 {
  font-family: Georgia, serif; font-size: 42px; color: var(--oro-claro);
  text-shadow: 0 3px 16px rgba(0,0,0,.8); margin: 0 auto 10px; max-width: 640px;
}
.hero p { font-size: 16px; color: var(--texto); max-width: 560px; text-shadow: 0 2px 8px rgba(0,0,0,.8); margin: 0 auto 24px; }
.hero-botones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-botones .boton { width: auto; padding: 13px 28px; }
.hero-botones .boton-secundario {
  padding: 13px 28px; border: 1px solid var(--oro-oscuro); border-radius: 3px;
  color: var(--oro-claro); background: rgba(10,10,12,.55); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; font-size: 14px;
}
.hero-botones .boton-secundario:hover { background: rgba(10,10,12,.8); text-decoration: none; }

/* ---------- Cronograma de fases, superpuesto al hero ---------- */
.hero-cronograma {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.82) 35%, rgba(6,7,10,.95) 100%);
  padding: 22px 20px 16px;
}
.hero-cronograma-titulo {
  display: block; text-align: center; font-size: 11px; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--oro-claro); margin-bottom: 12px;
}
.cronograma-fila {
  display: flex; gap: 20px; justify-content: center; overflow-x: auto;
  max-width: 1080px; margin: 0 auto; padding-bottom: 4px;
}
.cronograma-item { flex: 0 0 110px; text-align: center; opacity: .5; filter: grayscale(.7); }
.cronograma-activa    { opacity: 1;  filter: none; }
.cronograma-siguiente { opacity: .95; filter: grayscale(.1); }

.cronograma-logo {
  height: 44px; background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.cronograma-logo-vacio {
  height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px;
  border: 1px dashed rgba(255,255,255,.15); border-radius: 3px;
}

.cronograma-conector { position: relative; height: 18px; }
.cronograma-conector::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.15); transform: translateY(-50%);
}
.cronograma-item:first-child .cronograma-conector::before { left: 50%; }
.cronograma-item:last-child  .cronograma-conector::before  { right: 50%; }
.cronograma-activa .cronograma-conector::before,
.cronograma-siguiente .cronograma-conector::before { background: var(--oro-oscuro); }

.cronograma-punto {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fondo); border: 2px solid rgba(255,255,255,.25);
}
.cronograma-activa .cronograma-punto {
  border-color: var(--verde); background: var(--verde); box-shadow: 0 0 8px var(--verde);
}
.cronograma-siguiente .cronograma-punto {
  border-color: var(--oro); background: var(--oro); box-shadow: 0 0 8px var(--oro);
}

.cronograma-etiqueta {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin-top: 2px;
}
.cronograma-activa .cronograma-etiqueta,
.cronograma-siguiente .cronograma-etiqueta { color: var(--oro-claro); font-weight: 600; }

@media (max-width: 640px) {
  .hero { min-height: 560px; }
  .hero-contenido { padding-bottom: 190px; }
}

/* ---------- Marcador de imagen (hasta que exista el archivo real) ---------- */
.imagen-espacio {
  background-color: #14161c; background-size: cover; background-position: center;
  border: 1px dashed var(--borde); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  position: relative; overflow: hidden;
}
.imagen-espacio-etiqueta {
  font-size: 11px; color: var(--texto-suave); line-height: 1.6;
  padding: 10px 14px; background: rgba(10,10,12,.55); border-radius: 3px;
}
.imagen-espacio-etiqueta code { font-size: 11px; }

/* ---------- Paneles ---------- */
main { padding: 36px 0 60px; }
/* La portada (con hero) va pegada al encabezado: sin relleno arriba, si no
   se ve el fondo oscuro de la pagina entre el nav y la imagen. */
main.main-con-hero { padding-top: 0; }

.panel {
  background: linear-gradient(180deg, var(--panel-claro) 0%, var(--panel) 100%);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 2px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.panel-centrado { text-align: center; max-width: 460px; margin-left: auto; margin-right: auto; }
.panel h1, .panel h2 {
  font-family: Georgia, serif; color: var(--oro-claro);
  font-size: 24px; font-weight: 600; margin-bottom: 6px;
}
.panel h2 { font-size: 19px; }
.subtitulo { color: var(--texto-suave); font-size: 14px; margin-bottom: 20px; }

.separador { height: 1px; background: linear-gradient(90deg, transparent, var(--borde), transparent); margin: 22px 0; }

.icono-resultado {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700;
}
.icono-ok    { background: rgba(63,163,77,.14); color: var(--verde); border: 2px solid var(--verde); }
.icono-error { background: rgba(178,59,59,.14); color: var(--rojo); border: 2px solid var(--rojo); }

/* ---------- Tarjetas (facciones, pasos, caracteristicas) ---------- */
.tarjetas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 8px; }
.tarjeta {
  border: 1px solid var(--borde); border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, rgba(200,170,110,.05), transparent);
}
.tarjeta-imagen { height: 140px; }
.tarjeta-cuerpo { padding: 18px; }
.tarjeta h3 { font-family: Georgia, serif; color: var(--oro-claro); font-size: 17px; margin-bottom: 6px; }
.tarjeta p { font-size: 13px; color: var(--texto-suave); }

.tarjeta-alianza .tarjeta-imagen { border-bottom: 2px solid var(--alianza); }
.tarjeta-horda .tarjeta-imagen { border-bottom: 2px solid var(--horda); }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 18px; }
label { display: block; font-size: 13px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--oro); margin-bottom: 6px; }
.ayuda { display: block; font-size: 12px; color: var(--texto-suave);
  text-transform: none; letter-spacing: 0; margin-top: 5px; }

input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: 11px 13px; font-size: 15px;
  background: #0a0b0f; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 3px;
  font-family: inherit;
}
input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(200,170,110,.12); }

.boton {
  display: inline-block; width: 100%; padding: 13px 22px; cursor: pointer;
  font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  color: #17140c; font-family: inherit;
  background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro) 50%, var(--oro-oscuro) 100%);
  border: 1px solid var(--oro-oscuro); border-radius: 3px;
  transition: filter .15s; text-align: center;
}
.boton:hover { filter: brightness(1.12); text-decoration: none; }
.boton:active { filter: brightness(.92); }

/* Boton compacto, de ancho segun contenido -- para varios en una misma
   fila (ej. los items de la tienda del perfil). .boton es width:100% a
   proposito para formularios de una sola accion; este es el caso contrario. */
.boton-chico {
  display: inline-block; width: auto; padding: 9px 16px; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: .5px;
  color: var(--oro-claro); font-family: inherit;
  background: rgba(200,170,110,.08);
  border: 1px solid var(--oro-oscuro); border-radius: 3px;
  transition: filter .15s, background .15s; text-align: center;
}
.boton-chico:hover { background: rgba(200,170,110,.16); text-decoration: none; }
.boton-chico:active { filter: brightness(.92); }
.boton-chico:disabled { opacity: .4; cursor: not-allowed; }

.enlace-discreto { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--texto-suave); }
.enlace-discreto a { color: var(--texto-suave); text-decoration: underline; }

/* La trampa para bots: invisible para personas, los robots la rellenan */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Mensajes ---------- */
.aviso { padding: 14px 16px; border-radius: 3px; margin-bottom: 20px;
  border-left: 3px solid; font-size: 14px; }
.aviso-error   { background: rgba(178,59,59,.12);  border-color: var(--rojo);  color: #f0b4b4; }
.aviso-ok      { background: rgba(63,163,77,.12);  border-color: var(--verde); color: #b4e5bd; }
.aviso-info    { background: rgba(74,126,187,.12); border-color: var(--azul);  color: #b8d4f0; }

/* ---------- Estadisticas ---------- */
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
  text-align: center; padding: 18px 12px; border: 1px solid var(--borde); border-radius: 4px;
  background: linear-gradient(180deg, rgba(200,170,110,.06), transparent);
}
.stat .numero { font-family: Georgia, serif; font-size: 30px; color: var(--oro-claro); display: block; }
.stat .etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--texto-suave); }

.indicador { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto-on  { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.punto-off { background: var(--rojo);  box-shadow: 0 0 8px var(--rojo); }

/* ---------- Pasos y codigo ---------- */
ol.pasos { list-style: none; counter-reset: p; }
ol.pasos li { counter-increment: p; position: relative; padding: 0 0 18px 44px; }
ol.pasos li::before {
  content: counter(p); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; line-height: 28px; text-align: center;
  border: 1px solid var(--oro-oscuro); border-radius: 50%;
  color: var(--oro); font-family: Georgia, serif; font-size: 14px;
  background: rgba(200,170,110,.08);
}

code, .codigo {
  font-family: Consolas, "Courier New", monospace; font-size: 14px;
  background: #06070a; color: var(--oro-claro);
  border: 1px solid var(--borde); border-radius: 3px;
  padding: 2px 7px;
}
.codigo { display: block; padding: 13px 15px; margin: 10px 0; overflow-x: auto; white-space: pre; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borde); }
th { color: var(--oro); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

.proximamente { opacity: .5; }
.etiqueta-pronto {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  border: 1px solid var(--borde); border-radius: 10px; padding: 2px 9px;
  color: var(--texto-suave); margin-left: 8px; vertical-align: middle;
}

/* ---------- Barra de progreso (hacia la siguiente fase) ---------- */
.progreso {
  height: 14px; border-radius: 8px; overflow: hidden;
  background: #06070a; border: 1px solid var(--borde); margin: 14px 0 8px;
}
.progreso-barra {
  height: 100%; min-width: 3%;
  background: linear-gradient(90deg, var(--oro-oscuro), var(--oro) 60%, var(--oro-claro));
  box-shadow: 0 0 10px rgba(200,170,110,.5);
  transition: width .4s;
}

/* ---------- Hoja de ruta (fases): cronograma con conector, estilo linea de tiempo ---------- */
.ruta { display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 12px; }
.ruta-item {
  flex: 0 0 148px; text-align: center;
  opacity: .5; filter: grayscale(.7);
}
.ruta-activa    { opacity: 1; filter: none; }
.ruta-siguiente { opacity: .95; filter: grayscale(.1); }

.ruta-imagen {
  height: 72px; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center; padding: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.ruta-imagen-vacia {
  background-color: rgba(255,255,255,.03); border: 1px dashed var(--borde); border-radius: 4px; margin: 0 8px;
}
.ruta-imagen-vacia span { font-size: 11px; color: var(--texto-suave); text-align: center; padding: 0 8px; }

/* La linea horizontal: cada tramo cubre el ancho de SU tarjeta, asi que al
   ponerlas una junto a otra la linea se ve continua de punta a punta. */
.ruta-conector { position: relative; height: 22px; }
.ruta-conector::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  background: var(--borde); transform: translateY(-50%);
}
.ruta-item:first-child .ruta-conector::before { left: 50%; }
.ruta-item:last-child  .ruta-conector::before  { right: 50%; }
.ruta-activa .ruta-conector::before,
.ruta-siguiente .ruta-conector::before { background: var(--oro-oscuro); }

.ruta-punto {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fondo); border: 2px solid var(--borde);
}
.ruta-activa .ruta-punto {
  border-color: var(--verde); background: var(--verde); box-shadow: 0 0 10px var(--verde);
}
.ruta-siguiente .ruta-punto { border-color: var(--oro); background: var(--oro); box-shadow: 0 0 8px var(--oro); }

.ruta-etiqueta strong { display: block; font-size: 12px; color: var(--texto); margin-bottom: 5px; }
.ruta-activa .ruta-etiqueta strong, .ruta-siguiente .ruta-etiqueta strong { color: var(--oro-claro); }

.ruta-badge {
  display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 9px; border: 1px solid var(--borde); color: var(--texto-suave);
}
.ruta-badge-activa    { border-color: var(--verde); color: var(--verde); }
.ruta-badge-siguiente { border-color: var(--oro); color: var(--oro-claro); }

/* ---------- Noticias ---------- */
.noticias { display: flex; flex-direction: column; gap: 14px; }
.noticia { border: 1px solid var(--borde); border-radius: 4px; padding: 14px 16px; background: rgba(255,255,255,.015); }
.noticia-destacada { border-color: var(--oro-oscuro); background: linear-gradient(180deg, rgba(200,170,110,.06), transparent); }
.noticia-cabecera { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.noticia-icono { font-size: 18px; line-height: 1.3; }
.noticia-cabecera strong { display: block; color: var(--oro-claro); font-size: 14px; }
.noticia-fecha { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; }
.noticia p { font-size: 13px; color: var(--texto); margin: 0; padding-left: 28px; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); padding: 26px 0; text-align: center;
  color: var(--texto-suave); font-size: 13px; }
.pie a { color: var(--texto-suave); text-decoration: underline; }

@media (max-width: 640px) {
  .cabecera-inner { flex-direction: column; align-items: flex-start; }
  .logo-texto { font-size: 22px; }
  .hero h1 { font-size: 30px; }
  .panel { padding: 20px; }
}