/* ==========================================================================
   ALEXANDRIA - Estilo "parecido al oficial"
   ==========================================================================
   Rasgos de la web oficial de World of Warcraft, hechos por nosotros:
     1. Fondo oscuro con TEXTURA (no liso)
     2. Paneles con DOBLE BORDE dorado
     3. ESQUINAS doradas (lo mas caracteristico)
     4. Tiras doradas en los titulos
     5. Botones con degradado y resplandor
     6. Sombras profundas

   Todo con CSS: sin imagenes, sin copiar nada de nadie.
   ========================================================================== */

/* ---------------------------------------------------- 1) FONDO CON TEXTURA */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    /* una rejilla muy suave */
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    /* y un brillo dorado arriba */
    radial-gradient(1100px 380px at 50% -8%, rgba(248,183,0,.09), transparent 70%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
}

/* ------------------------------------------- 2 y 3) PANELES CON ESQUINAS */
/* El doble borde + las esquinas, con degradados. Se aplica a las tarjetas
   y a los bloques principales. */
.tarjeta,
.ventanaCuentaCaja,
.ventanaCaja {
  position: relative;
  border: 1px solid rgba(248,183,0,.32);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.65),          /* separacion interior */
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 44px rgba(0,0,0,.55);
}

/* Las 4 esquinas doradas: se dibujan con 4 degradados en las esquinas */
.tarjeta::after,
.ventanaCuentaCaja::after,
.ventanaCaja::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    /* esquina arriba-izquierda */
    linear-gradient(135deg, rgba(255,224,131,.95) 0 2px, transparent 2px),
    linear-gradient(45deg,  rgba(255,224,131,.95) 0 2px, transparent 2px),
    linear-gradient(315deg, rgba(255,224,131,.95) 0 2px, transparent 2px),
    linear-gradient(225deg, rgba(255,224,131,.95) 0 2px, transparent 2px);
  background-repeat: no-repeat;
  background-position:
    left 3px top 3px,
    right 3px top 3px,
    right 3px bottom 3px,
    left 3px bottom 3px;
  background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px;
  opacity: .9;
}

.tarjeta:hover {
  border-color: rgba(248,183,0,.7);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 22px 54px rgba(0,0,0,.65),
    0 0 26px rgba(248,183,0,.18);
}

/* -------------------------------------------------- 4) TIRAS DORADAS */
/* El titulo de seccion: mas ancho, con un remate */
.titulo-seccion::after {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, #ffe083, #f8b700 40%, rgba(248,183,0,0) 100%);
  box-shadow: 0 0 14px rgba(248,183,0,.5);
}

/* -------------------------------------------------- 5) BOTONES */
.boton {
  position: relative;
  overflow: hidden;
}
.boton::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.boton-principal {
  border-radius: 12px;
}
.boton-principal::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg);
  animation: brillo 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brillo {
  0%, 62% { left: -80%; }
  82%, 100% { left: 130%; }
}

/* -------------------------------------------------- 6) LA CABECERA */
.cabecera {
  background: linear-gradient(180deg, rgba(9,12,17,.99), rgba(6,9,13,.94));
  border-bottom: 1px solid rgba(248,183,0,.22);
  box-shadow: 0 6px 26px rgba(0,0,0,.6);
}
.marca-texto strong {
  text-shadow: 0 0 18px rgba(248,183,0,.35);
}
.navegacion a.activo {
  color: #ffe083;
  text-shadow: 0 0 12px rgba(248,183,0,.4);
}

/* -------------------------------------------------- EL PIE */
.pie {
  background: linear-gradient(180deg, #05080b, #030507);
  border-top: 1px solid rgba(248,183,0,.2);
}
.pie h4 { text-shadow: 0 0 12px rgba(248,183,0,.25); }

/* -------------------------------------------------- CIFRAS Y AVISOS */
.cifra {
  border: 1px solid rgba(248,183,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.45);
}
.cifra strong { text-shadow: 0 0 16px rgba(248,183,0,.35); }

.aviso { border-left-color: #f8b700; box-shadow: 0 8px 22px rgba(0,0,0,.4); }

/* -------------------------------------------------- SEPARADORES */
.seccion-oscura {
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 40%),
    rgba(8,12,17,.72);
  border-top: 1px solid rgba(248,183,0,.14);
  border-bottom: 1px solid rgba(248,183,0,.14);
}