/* Valdoria: la portada (v1). Se carga después de valdoria.css solo en /. */

/* ---------- Héroe: la Horda contra los elfos, partido por una costura dorada ---------- */
.hero-home {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vh, 44px);
  min-height: min(100vh, 980px); min-height: min(100svh, 980px);
  padding: calc(var(--header) + 26px) 0 0; text-align: center; border-bottom: 1px solid rgba(214, 165, 72, .2);
}
.hero-art { position: absolute; inset: 0; z-index: -1; background: #0a0b10; }
.hero-half { position: absolute; inset: 0; overflow: hidden; }
.hero-half.horde { clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%); }
.hero-half.elves { clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%); }
.hero-img { position: absolute; inset: -3%; background: center / cover no-repeat; filter: saturate(1.12) contrast(1.06) brightness(.82); animation: drift 34s ease-in-out infinite alternate; will-change: transform; }
.hero-half.horde .hero-img { background-position: 22% 62%; transform-origin: 30% 60%; }
.hero-half.elves .hero-img { background-position: 78% 50%; transform-origin: 70% 50%; animation-delay: -12s; }
.hero-half::after { content: ""; position: absolute; inset: 0; }
.hero-half.horde::after { background: linear-gradient(105deg, rgba(74, 14, 4, .62) 0%, rgba(120, 34, 12, .28) 55%, rgba(8, 9, 13, .5) 100%); }
.hero-half.elves::after { background: linear-gradient(255deg, rgba(3, 30, 46, .7) 0%, rgba(10, 66, 78, .34) 55%, rgba(8, 9, 13, .5) 100%); }
/* Viñeta: oscurece el centro (donde va el texto), el borde superior (cabecera) y funde el pie con la página. */
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 52% at 50% 46%, rgba(8, 9, 13, .78) 0%, rgba(8, 9, 13, .38) 62%, transparent 100%),
    linear-gradient(180deg, rgba(8, 9, 13, .7) 0%, transparent 24%, transparent 52%, rgba(8, 9, 13, .86) 86%, var(--bg) 100%);
}
.hero-seam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.hero-seam line { stroke: #f6d98f; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .7; filter: drop-shadow(0 0 6px rgba(246, 217, 143, .9)); animation: seam 5s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes seam { from { opacity: .35; } to { opacity: .85; } }

.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-block: auto; }
.hero-inner > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-inner > :nth-child(2) { animation-delay: .08s; }
.hero-inner > :nth-child(3) { animation-delay: .16s; }
.hero-inner > :nth-child(4) { animation-delay: .26s; }
.hero-inner > :nth-child(5) { animation-delay: .34s; }
.hero-inner > :nth-child(6) { animation-delay: .42s; }
.hero-home .pill { margin-bottom: 20px; }
.hero-home .eyebrow { color: var(--gold-2); margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.wordmark {
  margin: 0; padding: .06em .04em .1em; text-transform: uppercase;
  font: 900 clamp(2.4rem, 12vw, 8.6rem)/.95 var(--display); letter-spacing: .04em;
  background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(44, 26, 4, .95)) drop-shadow(0 16px 36px rgba(0, 0, 0, .8));
}
.hero-tag {
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 18px); margin: 4px 0 18px; padding-left: .34em;
  font: 600 clamp(.8rem, 2.1vw, 1.3rem)/1.2 var(--title); letter-spacing: .34em; text-transform: uppercase; color: #f4ead2; text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.hero-tag::before, .hero-tag::after { content: ""; flex: none; width: clamp(16px, 6vw, 96px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2)); }
.hero-tag::after { transform: scaleX(-1); }
.hero-home .lead { max-width: 660px; margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: #ebe3d2; text-shadow: 0 2px 12px rgba(0, 0, 0, .95); }
.hero-home .actions { justify-content: center; margin-top: 28px; }
.hero-facts {
  position: relative; z-index: 2; list-style: none; margin: 0 auto; padding: 0; width: min(1000px, 100%);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(246, 217, 143, .28); background: linear-gradient(180deg, rgba(8, 9, 13, .6), rgba(8, 9, 13, .1));
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.hero-facts li { padding: 16px 6px 20px; border-left: 1px solid rgba(255, 255, 255, .08); }
.hero-facts li:first-child { border-left: 0; }
.hero-facts b { display: block; font: 800 clamp(1.5rem, 3.4vw, 2.3rem)/1.05 var(--title); background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-facts span { display: block; margin-top: 5px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #cfc8b8; }
@media (max-width: 640px) {
  .hero-home { min-height: 0; padding-top: calc(var(--header) + 34px); }
  .hero-half.horde { clip-path: polygon(0 0, 78% 0, 22% 100%, 0 100%); }
  .hero-half.elves { clip-path: polygon(78% 0, 100% 0, 100% 100%, 22% 100%); }
  .hero-half.horde .hero-img { background-position: 30% 50%; }
  .hero-half.elves .hero-img { background-position: 62% 50%; }
  .hero-art::after { background: radial-gradient(ellipse 90% 46% at 50% 42%, rgba(8, 9, 13, .8) 0%, rgba(8, 9, 13, .42) 70%, transparent 100%), linear-gradient(180deg, rgba(8, 9, 13, .7) 0%, transparent 20%, transparent 50%, rgba(8, 9, 13, .9) 84%, var(--bg) 100%); }
  .hero-home .eyebrow { letter-spacing: .14em; font-size: .68rem; }
  .hero-home .eyebrow::before, .hero-home .eyebrow::after { display: none; }
  .hero-home .actions { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-facts li { grid-column: span 2; padding: 13px 4px 14px; }
  .hero-facts li:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid rgba(255, 255, 255, .08); }
  .hero-facts li:nth-child(4) { border-left: 0; }
  .hero-facts span { font-size: .64rem; letter-spacing: .12em; }
}

/* ---------- El juego: pilares ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pillar {
  position: relative; overflow: hidden; padding: 28px 24px 24px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(34, 38, 55, .92), rgba(18, 20, 29, .92)); border: 1px solid var(--line);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pillar::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .45; transition: opacity .25s ease; }
.pillar:hover { transform: translateY(-4px); border-color: var(--line-gold); box-shadow: var(--glow), var(--shadow); }
.pillar:hover::before { opacity: 1; }
.pillar-ico {
  width: 50px; height: 50px; display: grid; place-items: center; margin: 4px 0 22px 6px; color: var(--gold-2);
  background: radial-gradient(circle at 50% 30%, #2f3550, #141724); border: 1px solid var(--line-gold); border-radius: 10px; transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(214, 165, 72, .06), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pillar-ico svg { width: 26px; height: 26px; transform: rotate(-45deg); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { font-size: 1.18rem; color: var(--gold-2); margin-bottom: .45em; }
.pillar p { margin: 0; color: #cfc8b8; font-size: .95rem; }
.more-features { margin-top: 18px; }
@media (max-width: 940px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar { padding: 22px 20px 20px; } }

/* ---------- Razas y clases ---------- */
.faction {
  --f: var(--gold); --f2: var(--gold-2); --tint: 30, 30, 40;
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 26px 38px;
  padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-top: 2px solid var(--f); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow);
}
.faction + .faction { margin-top: 22px; }
.faction.horde { --f: var(--orc); --f2: var(--orc-2); --tint: 84, 20, 8; }
.faction.elves { --f: var(--elf); --f2: var(--elf-2); --tint: 6, 52, 66; }
.faction::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art, none) left center / cover no-repeat; opacity: .5; filter: saturate(.9); }
.faction::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--tint), .72) 0%, rgba(12, 13, 19, .93) 44%, rgba(12, 13, 19, .98) 100%); }
.faction-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.faction-crest { width: 62px; height: 62px; flex: none; color: var(--f2); filter: drop-shadow(0 4px 14px rgba(var(--tint), .9)); }
.faction-name { margin: 0; font: 800 clamp(1.6rem, 3vw, 2.15rem)/1.1 var(--title); color: var(--f2); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.faction-sub { margin: 4px 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #d6cfc0; }
.faction .lore { margin: 0 0 14px; }
.racials { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 8px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .9rem; color: #d6cfc0; }
.racials b { color: var(--f2); }
.racials .paid-note { color: var(--muted); }
.roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-content: start; }
.role-card { position: relative; overflow: hidden; background: #0a0b11; border: 1px solid var(--line); border-radius: 10px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.role-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--line); transition: filter .25s ease; filter: saturate(.95) brightness(.95); }
.role-card:hover { transform: translateY(-4px); border-color: var(--f); box-shadow: 0 16px 32px rgba(0, 0, 0, .55), 0 0 24px rgba(var(--tint), .8); }
.role-card:hover img { filter: saturate(1.1) brightness(1.05); }
.role-cap { padding: 10px 12px 13px; }
.role-cap b { display: block; font: 700 .98rem/1.2 var(--title); color: #fff6dc; }
.role-cap .role { display: block; margin: 3px 0 6px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--f2); }
.role-cap p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 1040px) { .faction { grid-template-columns: minmax(0, 1fr); } .faction::after { background: linear-gradient(180deg, rgba(var(--tint), .7) 0%, rgba(12, 13, 19, .95) 34%, rgba(12, 13, 19, .98) 100%); } }
@media (max-width: 720px) {
  /* Las cinco clases en una tira que se desliza dentro del panel (nunca la página). */
  .roster { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .role-card { scroll-snap-align: start; }
  .roster-hint { display: block; }
}
.roster-hint { display: none; margin: 0 0 8px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Tienda: las dos razas de pago ---------- */
.paid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.paid-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(400px, 42vw, 540px); border: 1px solid var(--line); border-radius: 14px; color: var(--text);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.paid-card.theme-undead { --race: #a9c2cf; }
.paid-card.theme-tiger { --race: #dfeff5; }
/* 0.27.x: the cards are written by Tools/StampRaceWeb.py from the table of races and each one carries its colour in
   its style; with more than two the grid has three columns. The races that are earned by playing use the same card. */
.paid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paid.cols-3 .paid-card { min-height: clamp(380px, 34vw, 500px); }
.paid.cols-3 .paid-card h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.paid.cols-3 .paid-foot .btn { padding-inline: 14px; }
@media (max-width: 1100px) { .paid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .paid.cols-3 { grid-template-columns: minmax(0, 1fr); } }
.earned-head { margin-top: clamp(40px, 6vw, 72px); }
.paid.earned .paid-price { font-size: 1.3rem; }
.paid-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.paid-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 13, .22) 0%, rgba(8, 9, 13, .12) 30%, rgba(8, 9, 13, .7) 100%); }
.paid-body { position: relative; padding: 84px clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px); background: linear-gradient(180deg, transparent 0, rgba(8, 9, 13, .76) 68px, rgba(8, 9, 13, .95) 150px); }
.paid-card:hover { text-decoration: none; border-color: var(--line-gold); box-shadow: var(--glow), var(--shadow); transform: translateY(-3px); }
.paid-card:hover > img { transform: scale(1.05); }
.paid-card .kicker { color: var(--race); }
.paid-card h3 { margin: 0 0 .15em; font: 800 clamp(1.8rem, 3.6vw, 2.6rem)/1.1 var(--title); background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .05em; }
.paid-card .lore { margin: 0 0 12px; }
.paid-card .passive { margin: 0 0 16px; font-size: .9rem; color: #d6cfc0; }
.paid-card .passive b { color: var(--gold-2); }
.paid-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.paid-price { font: 800 1.6rem/1 var(--title); color: var(--gold-2); }
.paid-price small { display: block; margin-top: 4px; font: 400 .74rem var(--body); color: var(--muted); letter-spacing: 0; }
.paid-flag { position: absolute; top: 16px; left: 16px; }
.shop-note { max-width: 860px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: .93rem; }
@media (max-width: 780px) { .paid { grid-template-columns: minmax(0, 1fr); } .paid-card { min-height: 420px; } }

/* ---------- El mundo ---------- */
.zones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.zone {
  position: relative; overflow: hidden; grid-column: span 2; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #161927, #0f1119);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.zone.wide { grid-column: span 3; }
/* La foto de cada zona se ve entera, en su propio marco, y el texto va debajo: como fondo, el texto la tapaba. */
.zone-art { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: #05060a; }
.zone-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.zone-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 9, 13, 0) 64%, rgba(22, 25, 39, .92) 100%); }
/* Cumbres y Ceniza: escarcha al norte y fuego al sur, cada mitad con el centro de su captura. */
.zone-art.split img { width: 58%; }
.zone-art.split img:first-child { clip-path: polygon(0 0, 100% 0, 72.4% 100%, 0 100%); }
.zone-art.split img:last-child { left: auto; right: 0; clip-path: polygon(27.6% 0, 100% 0, 100% 100%, 0 100%); }
.zone-body { position: relative; flex: 1; display: flex; flex-direction: column; margin-top: -14px; padding: 0 22px 22px; }
.zone:hover { border-color: var(--line-gold); box-shadow: var(--glow), var(--shadow); }
.zone:hover .zone-art img { transform: scale(1.06); }
.zone-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.lvl { display: inline-flex; padding: 4px 10px; border-radius: 4px; font: 800 .7rem/1.3 var(--title); letter-spacing: .1em; text-transform: uppercase; color: #1d1305; background: linear-gradient(180deg, #fde9ae, #d9a84d); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.zone-tags .tag { background: rgba(8, 9, 13, .7); border-color: rgba(255, 255, 255, .2); }
.zone h3 { margin: 0 0 .35em; font: 800 clamp(1.3rem, 2.3vw, 1.7rem)/1.15 var(--title); color: #fff6dc; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.zone p { margin: 0 0 12px; color: #ddd6c6; font-size: .94rem; }
.zone-places { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zone-places li { padding: 2px 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(8, 9, 13, .6); color: #d6cfc0; font-size: .75rem; }
.zone-boss { display: flex; gap: 8px; align-items: flex-start; margin: auto 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; color: var(--gold-2); }
.zone-boss svg { width: 17px; height: 17px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: clamp(34px, 5vw, 54px) 0 16px; }
.sub-head h3 { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--gold-2); }
.bosses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.boss { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--text); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.boss:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--line-gold); box-shadow: var(--glow); }
.boss img { width: 78px; height: 78px; flex: none; border-radius: 10px; object-fit: cover; border: 1px solid var(--line-gold); background: #05060a; }
.boss b { display: block; font: 700 1rem/1.2 var(--title); color: var(--gold-2); }
.boss span { display: block; margin-top: 4px; font-size: .8rem; color: var(--muted); }
.boss .lvl { display: inline-flex; width: fit-content; margin-top: 7px; font-size: .62rem; padding: 2px 7px; box-shadow: none; color: #1d1305; }
@media (max-width: 1000px) { .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zone, .zone.wide { grid-column: span 1; } .zone:last-child { grid-column: 1 / -1; } .zone:last-child .zone-art { aspect-ratio: 21 / 9; } .bosses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .zones { grid-template-columns: minmax(0, 1fr); } .zone:last-child .zone-art { aspect-ratio: 16 / 9; } .zone-body { padding: 0 18px 18px; } .bosses { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Novedades ---------- */
.timeline { position: relative; display: grid; gap: 22px; max-width: 1000px; margin-inline: auto; padding-left: 36px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--gold), rgba(214, 165, 72, .08)); }
.news { position: relative; padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: var(--shadow); min-width: 0; }
.news::before { content: ""; position: absolute; left: -33px; top: 28px; width: 13px; height: 13px; background: var(--bg); border: 1px solid var(--gold-2); transform: rotate(45deg); box-shadow: 0 0 12px rgba(246, 217, 143, .5); }
.news-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 10px; }
.ver { padding: 3px 10px; border: 1px solid var(--line-gold); border-radius: 4px; background: rgba(214, 165, 72, .09); color: var(--gold-2); font: 700 .76rem/1.4 var(--title); letter-spacing: .1em; text-transform: uppercase; }
.news h3 { margin: 0 0 .4em; font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: #fff6dc; }
.news > p { color: #cfc8b8; margin: 0; }
.news ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; font-size: .92rem; color: #cfc8b8; }
.news li { position: relative; padding-left: 18px; }
.news li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.news li b { color: var(--gold-2); }
.news.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 22px; align-items: center; border-color: var(--line-gold); }
.news.feature > div { min-width: 0; }
.news.feature > div > p { color: #cfc8b8; margin: 0; }
.news-art { display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--line-gold); }
.news-art img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 16%; transition: transform .8s ease; }
.news-art:hover img { transform: scale(1.05); }
.news .actions { margin-top: 16px; }
/* 0.27.x: the piece of news of the new races: their posters in a strip, each with its name. */
.news-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; }
.news-strip a { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 10px; background: #0f1016; }
.news-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.news-strip b { position: absolute; inset: auto 0 0; padding: 20px 10px 8px; font: 700 .88rem var(--title); color: var(--race, var(--gold-2)); background: linear-gradient(180deg, transparent, rgba(8, 9, 13, .92)); }
.news-foot { max-width: 1000px; margin: 20px auto 0; padding-left: 36px; }
@media (max-width: 760px) {
  .timeline, .news-foot { padding-left: 26px; }
  .timeline::before { left: 5px; }
  .news::before { left: -27px; }
  .news ul { grid-template-columns: minmax(0, 1fr); }
  .news.feature { grid-template-columns: minmax(0, 1fr); }
  .news-art { order: -1; }
}

/* ---------- Descargar ---------- */
.download { position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid rgba(214, 165, 72, .22); }
.download::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('/img/zona-frontera-v3.jpg') center 30% / cover no-repeat; opacity: .5; filter: saturate(.9); }
.download::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 9, 13, .95) 0%, rgba(8, 9, 13, .82) 50%, rgba(8, 9, 13, .7) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); }
.download .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px 56px; align-items: center; }
.download .section-head { margin-bottom: 18px; }
.download-info { color: #ddd6c6; font-size: 1.02rem; }
.download .panel { background: rgba(14, 16, 23, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: clamp(20px, 3vw, 30px); border-color: var(--line-gold); }
.download .panel h3 { color: var(--gold-2); font-size: 1.25rem; margin-bottom: 18px; }
.reqs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .download .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .download .actions .btn { width: 100%; } }

/* ---------- Crear cuenta ---------- */
.join .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 36px 64px; align-items: center; }
.join .section-head { margin-bottom: 16px; }
.perks { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; color: #d6cfc0; }
.perks li { position: relative; padding-left: 28px; }
.perks li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border-left: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2); transform: rotate(-45deg); }
.join form.box { padding: clamp(20px, 3vw, 30px); }
.join form.box .btn { width: 100%; margin-top: 4px; }
.form-title { margin: 0 0 18px; font-size: 1.3rem; color: var(--gold-2); }
@media (max-width: 900px) { .join .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Comunidad: quién está y clasificación ---------- */
.live-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px 34px; align-items: start; }
.live-grid h3 { margin: 0 0 6px; font-size: 1.25rem; color: var(--gold-2); }
.live-grid .table-wrap { margin-top: 14px; max-height: 548px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.live-grid th { position: sticky; top: 0; z-index: 1; }
#topRows td:first-child:not([colspan]) { width: 1%; font: 700 .95rem var(--title); color: var(--muted); }
#topRows tr:nth-child(-n + 3) td:first-child:not([colspan]) { color: var(--gold-2); font-size: 1.1rem; }
#topRows tr:nth-child(-n + 3) td:nth-child(2) { font-weight: 700; }
#topRows td:last-child:not([colspan]), #onlineRows td:last-child:not([colspan]) { font: 700 .95rem var(--title); color: var(--gold-2); }
.community-cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(26px, 4vw, 40px); }
.cta-card { display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--text); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.cta-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--line-gold); box-shadow: var(--glow); }
.cta-card b { display: block; font: 700 1.1rem var(--title); color: var(--gold-2); margin-bottom: 4px; }
.cta-card span { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) { .live-grid { grid-template-columns: minmax(0, 1fr); } .community-cta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .live-grid th, .live-grid td { padding: 10px 10px; } }

@media (prefers-reduced-motion: reduce) {
  .hero-img, .hero-seam line, .hero-inner > * { animation: none; }
  .pillar:hover, .role-card:hover, .paid-card:hover, .boss:hover, .cta-card:hover { transform: none; }
  .zone:hover .zone-art img, .paid-card:hover > img, .news-art:hover img { transform: none; }
}

/* >>> web-028 (work/web-028/aplicar_web_028.py; no editar entre estas marcas) */
/* La clasificación dice raza y clase («Hombre tigre · Centinela tigre»): en una pantalla estrecha esa celda parte en dos
   líneas en vez de empujar la columna del nivel fuera de la tabla. Y un precio no se parte entre la cifra y el «€». */
#topRows td:nth-child(3):not([colspan]) { white-space: normal; }
[data-price] { white-space: nowrap; }
/* Entre 761 y 1039 px, la noticia con foto dejaba el texto en dos columnas de veinte letras: la foto sube arriba, como
   en el móvil. */
@media (min-width: 761px) and (max-width: 1039px) {
  .news.feature { grid-template-columns: minmax(0, 1fr); }
  .news.feature .news-art { order: -1; }
}
/* Las tiras de fotos de las noticias, sin fila coja: la de cuatro va de cuatro en cuatro o de dos en dos; la de seis,
   de seis, de tres o de dos. Con otro número de fotos, o sin :has(), queda el reparto automático de antes. */
.news-strip:has(> a:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-strip:has(> a:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 650px) { .news-strip:has(> a:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .news-strip:has(> a:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 480px) { .news-strip:has(> a:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Entre 641 y 1000 px la última tarjeta de zona ocupa las dos columnas con un marco 21:9, que recortaba la foto: se
   queda en 16:9 y la foto se ve entera, como en las demás. */
@media (min-width: 641px) and (max-width: 1000px) { .zone:last-child .zone-art { aspect-ratio: 16 / 9; } }
/* <<< web-028 */

/* >>> web-029 (work/web-029/aplicar_web_029.py) */
@media (min-width: 1001px) { .bosses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* <<< web-029 */