:root{
  --bg0:#0B0D10; --bg1:#0F1217; --bg2:#131820;
  --text:#ECE9E2; --muted:rgba(236,233,226,.85); --gold:#E3C27E; --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg0),var(--bg1) 60%,var(--bg2));color:var(--text);font-family:Inter,system-ui,Arial,sans-serif}
a{color:var(--gold);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(10,12,16,.55);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--gold)}
.lang{font-size:14px;color:var(--muted)}
.hero{position:relative;overflow:hidden;min-height:72vh}
.hero-inner{padding:120px 0 96px;position:relative;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0))}
.hero h1{font-family:'Playfair Display', Georgia, serif;font-weight:800;line-height:1.06;font-size:64px;max-width:980px;margin:0;text-shadow:0 0 22px rgba(0,0,0,.4)}
.hero h1 .gold{color:var(--gold);text-shadow:0 0 18px rgba(227,194,126,.15)}
.hero p{max-width:820px;color:var(--muted);font-size:19px;margin-top:16px;text-shadow:0 0 14px rgba(0,0,0,.35)}
.tag{display:flex;gap:8px;align-items:center;color:rgba(236,233,226,.8);font-size:14px;margin-top:12px}
.hero-bg{position:absolute;inset:0;background-image:url('imagenes/hero_kael_a.jpg');background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-grad{position:absolute;inset:0;background:radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.05), transparent 60%),radial-gradient(1200px 700px at 50% 120%, rgba(227,194,126,.14), transparent 70%)}
.hero-vignette{position:absolute;inset:0;box-shadow:inset 0 0 280px rgba(0,0,0,.7), inset 0 -180px 240px rgba(0,0,0,.55)}
.hero-noise{position:absolute;inset:0;background-image:url('noise.png');opacity:.08;mix-blend:overlay;pointer-events:none}
.hero-light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.45}
.p{position:absolute;border-radius:50%;background:radial-gradient(circle, rgba(227,194,126,.65), rgba(227,194,126,0) 60%);width:10px;height:10px;filter:blur(1px);animation:float 14s linear infinite}
@keyframes float{0%{transform:translate(var(--x0), var(--y0)) scale(.6);opacity:0}10%{opacity:.9}60%{opacity:.6}100%{transform:translate(var(--x1), var(--y1)) scale(1);opacity:0}}
section{padding:60px 0;border-top:1px solid var(--border)}section:first-of-type{border-top:none}
h2{font-family:'Playfair Display', Georgia, serif;font-size:32px;margin:0 0 18px}
.features{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.feature{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:16px;padding:18px}
.feature p{color:var(--muted);font-size:14px;margin:8px 0 0}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:18px;padding:20px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.card .head{display:flex;align-items:center;gap:14px}
.card .head img{height:42px;width:42px;object-fit:contain;filter:brightness(1.2) drop-shadow(0 0 6px rgba(227,194,126,.25))}
.card .name{font-weight:900;font-size:18px}
.card p{margin:10px 0 0;color:var(--muted);font-size:15px}
.card::after{content:'';position:absolute;right:-12px;bottom:-12px;width:200px;height:200px;background-repeat:no-repeat;background-size:200px;background-position:right bottom;opacity:.12;filter:grayscale(1) brightness(.85);pointer-events:none}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#111;padding:10px 16px;border-radius:12px;font-weight:800;box-shadow:0 4px 12px rgba(227,194,126,.25)}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--border)}
.placeholder{display:grid;place-items:center;aspect-ratio:16/9;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:16px;color:rgba(236,233,226,.8)}
footer{border-top:1px solid var(--border);padding:26px 0;color:rgba(236,233,226,.75);text-align:center;font-size:14px}
.gold{color:var(--gold)}
/* ===== Fondo global con glow, viñeta y grano (ligero) ===== */

/* 1) Capa base con degradiente vertical (nada plano) */
html, body {
  background: linear-gradient(180deg, #0B0D10 0%, #0F1217 60%, #131820 100%);
}

/* 2) Brillo dorado que “sube” muy suave desde abajo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 50% 110%, rgba(227,194,126,0.18), transparent 70%),
    radial-gradient(900px 500px at 50% 120%, rgba(255,255,255,0.03), transparent 65%);
  animation: hdyRise 18s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes hdyRise {
  0%   { background-position: center 110%, center 120%; }
  100% { background-position: center 100%, center 115%; }
}

/* 3) Viñeteado suave en todo el sitio (muy sutil) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  box-shadow:
    inset 0 0 240px rgba(0,0,0,0.55),
    inset 0 -160px 200px rgba(0,0,0,0.45);
}

/* 4) Textura de grano global (usa tu noise.png si ya lo tienes) */
.site-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url('noise.png');
}

/* 5) Respeto a usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
/* === TÍTULOS DORADOS DE SECCIONES PRINCIPALES (no toca el hero) === */
#universo > .container > h2,
#mapa > .container > h2,
#libro  > .container > h2 {
  color: var(--gold); /* #E3C27E */
  text-shadow: 0 0 18px rgba(227,194,126,.12);
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: .2px;
}

/* Subtítulo junto al brand (solo en desktop) */
.brand-sub{
  color: var(--gold);
  opacity:.9;
  font-weight:500;
  letter-spacing:.2px;
  margin-left:.35rem;
  display:none;
}
@media (min-width: 980px){
  .brand-sub{ display:inline; }
}
/* Aclarado suave de tarjetas de clanes (solo dentro de UNIVERSO) */
#universo .container .grid > div{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

/* Iconos un pelín más visibles sin reventar negros */
#universo .container .grid > div img,
#universo .container .grid > div svg{
  filter: brightness(1.15) contrast(1.06);
  opacity: .95;
}

/* Títulos dorados de secciones principales */
#universo > .container > h2,
#mapa > .container > h2,
#libro  > .container > h2 {
  color: var(--gold); /* #E3C27E */
  text-shadow: 0 0 18px rgba(227,194,126,.12);
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: .2px;
}
/* Oculta el link textual bajo el mapa, pero la IMAGEN sigue siendo clicable */
#mapa .container > div a[href*="inkarnate.com"] {
  display: none !important;
}
/* Oscurecer ligeramente la capita del hero */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65) 0%,   /* más oscuro a la izquierda */
    rgba(0, 0, 0, 0.40) 40%,  /* se suaviza */
    rgba(0, 0, 0, 0.20) 100%  /* se desvanece */
  );
  z-index: 1;
}
/* Añadir un margen izquierdo al texto del hero */
.hero .container {
  padding-left: 6vw; /* antes pegaba al borde, ahora respira */
  padding-right: 3vw; /* equilibra con el lado derecho */
  position: relative;
  z-index: 2; /* mantiene el texto por encima de la capita */
}
/* Estilo para cada clan */
.clan {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.clan h3 {
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.clan blockquote {
  font-style: italic;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.4rem 0;
}
.clan p {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  line-height: 1.4;
}
/* ===== Colores de clan (fáciles de ajustar) ===== */
:root{
  --hielo:   #8fd3ff;   /* celeste */
  --sol:     #ffd36a;   /* dorado/amarillo */
  --volcan:  #ff6b6b;   /* rojo volcánico */
  --sombra:  #b8b8c4;   /* gris frío */
  --mar:     #6bc7ff;   /* azul océano */
  --pantano: #9be15d;   /* verde musgo */
}

/* Títulos por clan (usa el orden de tus .card) */
#universo .card:nth-child(1) .name{ color: var(--hielo);  }
#universo .card:nth-child(2) .name{ color: var(--sol);    }
#universo .card:nth-child(3) .name{ color: var(--volcan); }
#universo .card:nth-child(4) .name{ color: var(--sombra); }
#universo .card:nth-child(5) .name{ color: var(--mar);    }
#universo .card:nth-child(6) .name{ color: var(--pantano);}

/* Un subrayado/acento muy sutil bajo el título */
#universo .card .name{
  display:inline-block;
  padding-bottom: .2rem;
  border-bottom: 2px solid currentColor;
  border-bottom-color: color-mix(in oklab, currentColor 35%, transparent);
}

/* Tinte en los iconos (sin tocar los archivos). Ajusta hue/sat si quieres */
#universo .card .head img{
  filter: grayscale(1) brightness(1.15) contrast(1.1);
  opacity:.95;
}

/* Un tinte por clan usando filtros (valores aproximados a cada color) */
#universo .card:nth-child(1) .head img{ /* Hielo (celeste)  */
  filter: invert(84%) sepia(12%) saturate(734%) hue-rotate(175deg) brightness(104%) contrast(98%);
}
#universo .card:nth-child(2) .head img{ /* Sol (amarillo) */
  filter: invert(87%) sepia(63%) saturate(426%) hue-rotate(357deg) brightness(101%) contrast(98%);
}
#universo .card:nth-child(3) .head img{ /* Volcán (rojo) */
  filter: invert(65%) sepia(58%) saturate(1154%) hue-rotate(323deg) brightness(96%) contrast(101%);
}
#universo .card:nth-child(4) .head img{ /* Sombra (gris) */
  filter: invert(79%) sepia(6%) saturate(182%) hue-rotate(202deg) brightness(92%) contrast(90%);
}
#universo .card:nth-child(5) .head img{ /* Mar (azul) */
  filter: invert(81%) sepia(14%) saturate(1421%) hue-rotate(179deg) brightness(101%) contrast(97%);
}
#universo .card:nth-child(6) .head img{ /* Pantano (verde) */
  filter: invert(83%) sepia(17%) saturate(830%) hue-rotate(55deg) brightness(101%) contrast(96%);
}

/* Sutileza extra: borde/acento del panel con el color de clan */
#universo .card{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
#universo .card:nth-child(1){ box-shadow: 0 8px 24px rgba(143,211,255,.08); }
#universo .card:nth-child(2){ box-shadow: 0 8px 24px rgba(255,211,106,.08); }
#universo .card:nth-child(3){ box-shadow: 0 8px 24px rgba(255,107,107,.08); }
#universo .card:nth-child(4){ box-shadow: 0 8px 24px rgba(184,184,196,.08); }
#universo .card:nth-child(5){ box-shadow: 0 8px 24px rgba(107,199,255,.08); }
#universo .card:nth-child(6){ box-shadow: 0 8px 24px rgba(155,225,93,.08); }

/* Hover: un pelín más de presencia (opcional) */
#universo .card:hover{
  transform: translateY(-2px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lang-switch{ display:flex; gap:10px; align-items:center; margin-left:auto }
.lang-switch .lang{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,0.02); text-decoration:none; color:var(--text);
  transition:transform .15s ease, background .2s ease;
}
.lang-switch .lang:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.06); }
.lang-switch .lang:active{ transform:translateY(0); }
.lang-switch .lang-label{ font-weight:600; letter-spacing:.4px; font-size:.9rem }

.flag{ width:20px; height:14px; display:inline-block; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.35) inset }
.flag-es{
  background:
    linear-gradient(#AA151B 0 33.33%, #F1BF00 0 66.66%, #AA151B 0);
}
.flag-gb{
  background:
    conic-gradient(#012169 0 25%, #fff 0 50%, #C8102E 0 75%, #fff 0) content-box,
    #012169;
  padding:1px;
  background-blend-mode:normal;
  /* simple stylized union flag (no heavy SVG) */
}
.lang-switch{ display:flex; gap:10px; align-items:center; margin-left:auto }
.lang-switch .lang{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border, rgba(255,255,255,.12));
  background:rgba(255,255,255,0.05); text-decoration:none; color:var(--text, #eee);
  transition:transform .15s ease, background .2s ease;
  font-weight:600; letter-spacing:.3px; font-size:.9rem
}
.lang-switch .lang:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.12) }
.lang-switch .lang:active{ transform:translateY(0) }
.flag{ width:20px; height:14px; display:inline-block; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.35) inset }
.flag-es{ background:linear-gradient(#AA151B 0 33.33%, #F1BF00 0 66.66%, #AA151B 0) }
.flag-gb{
  background:
    conic-gradient(#012169 0 25%, #fff 0 50%, #C8102E 0 75%, #fff 0) content-box,
    #012169;
  padding:1px;
}
/* Coloca el header en relativo para poder anclar a la derecha */
header, .topbar, .site-header { position: relative; }

/* Selector a la derecha */
.lang-switch{
  position:absolute; top:14px; right:16px;
  display:flex; gap:10px; align-items:center;
  z-index:5;
}
.lang-switch .lang{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border, rgba(255,255,255,.12));
  background:rgba(255,255,255,.06); text-decoration:none; color:var(--text,#eee);
  font-weight:600; letter-spacing:.3px; font-size:.9rem;
  transition:transform .15s ease, background .2s ease;
}
.lang-switch .lang:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12) }
.lang-switch .flag{ line-height:1; }

/* Header básico en una línea, con selector a la derecha */
header { position:relative; }
.container.nav {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Selector idioma */
.lang-switch{ display:flex; gap:10px; align-items:center; }
.lang-switch .lang{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border, rgba(255,255,255,.12));
  background:rgba(255,255,255,.06); text-decoration:none; color:var(--text,#eee);
  font-weight:600; letter-spacing:.3px; font-size:.9rem;
  transition:transform .15s ease, background .2s ease;
}
.lang-switch .lang:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12) }
.lang-switch .flag{ line-height:1; }
/* Slider 21:9 con fade, sin botones ni dots */
.slider21x9{
  position:relative; width:100%; max-width:1100px; margin:16px auto 0;
  aspect-ratio:21/9; overflow:hidden; border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35); background:#111;
}
.slider21x9 img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .8s ease;
}
.slider21x9 img.is-active{ opacity:1; }
/* Muestra ES/EN y ajusta separación */
.lang-switch .lang-label{ display:inline; font-weight:600; letter-spacing:.3px; }
.lang-switch .flag{ margin-right:6px; }
/* Dorado para títulos de galería (ES y EN) */
#galeria h2, #gallery h2 { color: #f1d28a; }
.libro-datos{ margin:12px 0 6px; padding-left:18px; color:#ddd }
.libro-datos li{ margin:4px 0 }
.pull{
  margin:12px 0; padding:10px 14px; border-left:3px solid #f1d28a;
  background:rgba(255,255,255,.04); border-radius:8px; color:#eaeaea; font-style:italic;
}
.social-links {
  text-align: center;
  margin-top: 1.5rem;
}

.social-links p {
  color: #c9b87a;
  font-family: 'Cinzel', serif;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.social-links a {
  color: #c9b87a;
  font-size: 1.6rem;
  margin: 0 10px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
  color: #ffffff;
  transform: scale(1.15);
}