/* Sitio de Ancestrales 3D — estilos compartidos */
:root{
  --bg:#010a13; --bg2:#050f1c; --panel:#0a1626; --panel2:#0d1d31; --line:#2a2418;
  --gold:#c8aa6e; --gold-hi:#f0e6d2; --gold-lo:#785a28; --gold-dk:#463714;
  --ink:#a09b8c; --ink-hi:#cfc8b6; --teal:#0ac8b9; --red:#e0463a;
  --display:"Cinzel",Georgia,serif; --ui:"Barlow Semi Condensed","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink-hi);font-family:var(--ui);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- barra superior ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:76px;z-index:50;display:flex;align-items:center;gap:30px;padding:0 max(20px,4vw);
  background:linear-gradient(180deg,rgba(1,10,19,.92),rgba(1,10,19,.5) 70%,rgba(1,10,19,0));transition:background .25s,box-shadow .25s}
.nav.solid,.nav.always{background:rgba(1,10,19,.96);box-shadow:0 1px 0 #1d1a14,0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo svg{width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(200,170,110,.3))}
.logo b{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.3em;color:var(--gold)}
.nav ul{display:flex;gap:28px;list-style:none;margin:0 0 0 8px;padding:0}
.nav li a{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--gold-hi);padding:8px 0;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;white-space:nowrap}
.nav li a:hover,.nav li a.on{border-color:var(--gold);color:#fff}
.nav .grow{flex:1}
.nav-right{display:flex;align-items:center;gap:12px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--gold-lo);background:rgba(1,10,19,.6);cursor:pointer}
.burger svg{width:20px;height:20px;fill:var(--gold-hi);margin:auto}

.usuario{position:relative}
.usuario>button{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border:1px solid var(--gold-lo);background:rgba(1,10,19,.6);cursor:pointer;font-weight:600;letter-spacing:.02em;color:var(--gold-hi)}
.usuario>button:hover{border-color:var(--gold)}
.usuario .av{width:24px;height:24px;display:grid;place-items:center;background:linear-gradient(180deg,#e9d6a2,#a68544);color:#1a1206;font-family:var(--display);font-weight:800;font-size:13px}
.menu{position:absolute;right:0;top:48px;min-width:210px;background:var(--panel);border:1px solid var(--gold-lo);box-shadow:0 20px 50px rgba(0,0,0,.7);padding:6px}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:10px 14px;border:0;background:none;cursor:pointer;text-decoration:none;color:var(--ink-hi);font-size:15.5px}
.menu a:hover,.menu button:hover{background:rgba(200,170,110,.12);color:#fff}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--gold-lo);color:var(--gold-hi);background:rgba(1,10,19,.55);cursor:pointer;transition:filter .15s,border-color .15s,background .15s,box-shadow .2s}
.btn:hover{border-color:var(--gold);background:rgba(200,170,110,.14)}
.btn.gold{color:#1a1206;background:linear-gradient(180deg,#e9d6a2 0%,var(--gold) 48%,#a68544 100%);border-color:#f0e6d2;box-shadow:0 0 0 1px var(--gold-dk),0 8px 26px rgba(200,170,110,.2)}
.btn.gold:hover{filter:brightness(1.1);box-shadow:0 0 0 1px var(--gold-lo),0 8px 36px rgba(200,170,110,.4)}
.btn.small{height:42px;padding:0 20px;font-size:12px}
.btn.danger:hover{border-color:var(--red);background:rgba(224,70,58,.14);color:#f6c2bb}
.btn[aria-disabled=true],.btn:disabled{opacity:.55;pointer-events:none;filter:grayscale(.5)}
.btn svg{width:18px;height:18px;fill:currentColor}

/* ---------- secciones ---------- */
section.block{padding:96px max(20px,6vw);position:relative}
section.block.alt{background:linear-gradient(180deg,var(--bg),var(--bg2) 50%,var(--bg))}
.wrap{max-width:1240px;margin:0 auto}
.kicker{margin:0 0 12px;font-size:14px;font-weight:600;letter-spacing:.32em;color:var(--gold);text-transform:uppercase}
h1,h2{font-family:var(--display);font-weight:800;font-style:italic;margin:0}
h2{font-size:clamp(32px,4vw,52px);color:var(--gold-hi);line-height:1.05}
.sub{margin:14px 0 0;max-width:660px;color:var(--ink);font-size:18px}
.rule{width:90px;height:3px;margin:22px 0 0;background:linear-gradient(90deg,var(--gold-hi),var(--gold-lo))}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.pagetop{padding:130px max(20px,6vw) 30px;background:linear-gradient(180deg,#07172a,var(--bg))}

/* ---------- tarjetas de noticias ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.news-grid.first-big .ncard:first-child{grid-column:span 2;grid-row:span 1}
.ncard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.ncard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.ncard .cover{aspect-ratio:16/8.5;background:linear-gradient(135deg,#0b2038,#07121f) center/cover no-repeat;position:relative;border-bottom:1px solid var(--line)}
.ncard .cover.none::after{content:"";position:absolute;inset:0;background:url("/sitio/img/icono.png") center/72px no-repeat;opacity:.25}
.ncard .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.ncard h3{margin:0;font-family:var(--display);font-size:22px;font-weight:700;color:var(--gold-hi);letter-spacing:.02em;line-height:1.2}
.ncard p{margin:0;color:var(--ink);font-size:16px;line-height:1.4}
.ncard .meta{margin-top:auto;padding-top:8px;display:flex;gap:14px;align-items:center;font-size:13.5px;color:#7d786b;letter-spacing:.03em}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--gold-lo);color:var(--gold);background:rgba(1,10,19,.8);align-self:flex-start}
.tag.parche{border-color:#2d7a86;color:#79dcd0}
.tag.equipo{border-color:#8a6a2e;color:#f0d28a}
.tag.comunidad{border-color:#5b4a8a;color:#c8b8ff}
.tag.eventos{border-color:#8a3a30;color:#ffb3a8}
.ncard .cover .tag{position:absolute;left:14px;top:14px}
.ncard .pin{position:absolute;right:14px;top:14px;font-size:11px;font-weight:700;letter-spacing:.18em;padding:4px 9px;background:linear-gradient(180deg,#e9d6a2,#a68544);color:#1a1206;text-transform:uppercase}
.empty{padding:40px;border:1px dashed var(--line);color:var(--ink);text-align:center;margin-top:40px}

/* ---------- filtros ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{padding:9px 18px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-hi);text-decoration:none}
.chip:hover{border-color:var(--gold)}
.chip.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(72,55,20,.85),rgba(20,16,8,.85));color:var(--gold-hi)}

/* ---------- texto de una noticia ---------- */
.prose{font-size:18.5px;line-height:1.65;color:var(--ink-hi)}
.prose h3{margin:1.8em 0 .5em;font-family:var(--display);font-size:26px;font-style:italic;font-weight:800;color:var(--gold-hi);line-height:1.15}
.prose h4{margin:1.5em 0 .4em;font-family:var(--display);font-size:20px;font-weight:700;color:var(--gold)}
.prose p{margin:0 0 1.1em}
.prose ul{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--gold)}
.prose blockquote{margin:1.2em 0;padding:.6em 1.2em;border-left:3px solid var(--gold);background:rgba(200,170,110,.07);color:var(--gold-hi)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--gold-hi)}
.prose strong{color:var(--gold-hi)}

/* ---------- modal de cuenta ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(1,10,19,.82);backdrop-filter:blur(4px)}
.modal .card{width:min(440px,100%);background:var(--panel);border:1px solid var(--gold-lo);box-shadow:0 0 0 1px #010a13,0 40px 90px rgba(0,0,0,.8);padding:30px 30px 26px;position:relative}
.modal .card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold-hi),var(--gold-lo))}
.modal h3{margin:0 0 4px;font-family:var(--display);font-size:26px;font-style:italic;font-weight:800;color:var(--gold-hi)}
.modal .x{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;background:none;cursor:pointer;font-size:24px;color:var(--ink)}
.modal .x:hover{color:#fff}
.tabs{display:flex;gap:6px;margin:16px 0 18px}
.tabs button{flex:1;height:40px;border:1px solid var(--line);background:none;cursor:pointer;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tabs button.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(200,170,110,.1)}
label.f{display:block;margin:0 0 14px}
label.f span{display:block;margin-bottom:5px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
input[type=text],input[type=password],input[type=email],input[type=url],textarea,select{width:100%;background:#07121f;color:var(--gold-hi);border:1px solid var(--gold-lo);padding:11px 13px;font:inherit;font-size:16.5px}
input:focus,textarea:focus,select:focus{outline:1px solid var(--gold);border-color:var(--gold)}
textarea{resize:vertical;min-height:120px;line-height:1.5}
.msg{margin:0 0 14px;padding:10px 14px;font-size:15px;border:1px solid}
.msg.err{background:rgba(224,70,58,.14);border-color:rgba(224,70,58,.55);color:#f6c2bb}
.msg.ok{background:rgba(10,200,185,.1);border-color:rgba(10,200,185,.5);color:#9ef0e6}
.note{margin:16px 0 0;font-size:14px;color:var(--ink)}

/* ---------- pie ---------- */
footer.foot{padding:34px max(20px,6vw);border-top:1px solid #1d1a14;color:#6c675b;font-size:14px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer.foot a{text-decoration:none}footer.foot a:hover{color:var(--gold-hi)}
footer.foot .grow{flex:1}

kbd{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:13px;padding:2px 9px;border:1px solid var(--gold-lo);background:#07121f;color:var(--gold-hi);white-space:nowrap}

@media (max-width:1000px){
  .nav ul{display:none;position:absolute;left:0;right:0;top:76px;flex-direction:column;gap:0;margin:0;padding:8px max(20px,4vw) 18px;background:rgba(1,10,19,.98);border-bottom:1px solid var(--line)}
  .nav ul.open{display:flex}
  .nav li a{display:block;padding:14px 0;border-bottom:1px solid #15130d}
  .burger{display:grid}
  .news-grid{grid-template-columns:1fr 1fr}
  .news-grid.first-big .ncard:first-child{grid-column:span 2}
}
@media (max-width:640px){
  .nav{gap:10px;padding:0 16px}
  .nav-right{gap:8px}
  .logo{gap:8px}
  .logo b{font-size:11px;letter-spacing:.08em}
  .logo svg{width:32px;height:32px}
  .usuario>button{padding:0 10px}
  .news-grid,.news-grid.first-big{grid-template-columns:1fr}
  .news-grid.first-big .ncard:first-child{grid-column:auto}
  .btn{width:100%}
  .nav .btn.play-nav{display:none}
  .usuario>button .nm{display:none}
}
@media (max-width:360px){.logo b{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;scroll-behavior:auto !important}}