/* =========================================================
   DevgruRP
   ========================================================= */

/* ---------- FUENTES (Ubuntu, alojadas en el sitio) ---------- */
@font-face{ font-family:'Ubuntu'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/ubuntu-400.woff2') format('woff2'); }
@font-face{ font-family:'Ubuntu'; font-style:italic; font-weight:400; font-display:swap; src:url('../assets/fonts/ubuntu-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Ubuntu'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/ubuntu-500.woff2') format('woff2'); }
@font-face{ font-family:'Ubuntu'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/ubuntu-700.woff2') format('woff2'); }

/* ---------- TOKENS ---------- */
:root{
  --ground:      #f0f0f0;
  --surface:     #F1F4F6;
  --raised:      #FFFFFF;
  --rule:        #D3DBE1;
  --rule-soft:   #E4E9ED;
  --gold:        #8A6A12;
  --ink:         #071018;
  --ink-dim:     #000000;
  --ink-faint:   #7C8A95;

  --strip-bg:    #000056;
  --strip-rule:  #D3DBE1;
  --strip-label: #4b95ce;
  --strip-mark:  #feb01a;
  --strip-value: #fefefe;

  --f-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* etiquetas, botones y datos */
  --f-display: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-label:  .75rem;
  --tr-label: .1em;

  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2rem;   --s5: 3rem;   --s6: 4.5rem;  --s7: 7rem;

  --wrap: 1200px;
}

html.theme-dark{
  --ground:      #131313;
  --surface:     #242424;
  --raised:      #1e1e1e;
  --rule:        #333333;
  --rule-soft:   #2a2a2a;
  --gold:        #C9A227;
  --ink:         #f4f4f4;
  --ink-dim:     #c7c7c7;
  --ink-faint:   #8f8f8f;

  --strip-bg:    var(--gold);
  --strip-rule:  #3a3a3a;
  --strip-label: #2a2100;
  --strip-mark:  #3a2e00;
  --strip-value: #000000;
}
html.theme-dark .btn--solid{ color:#141414; }

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
}
img{ max-width:100%; height:auto; display:block; -webkit-user-drag:none; }
a{ color:inherit; text-decoration:none; }
.inline-link{
  color:var(--ink);
  border-bottom:1px solid var(--gold);
  transition:color .15s;
}
.inline-link:hover{ color:var(--gold); }
::selection{ background:var(--gold); color:var(--ground); }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.1;
  text-wrap:balance;
}
p{ margin:0; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--s3); }

.label{
  font-family:var(--f-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--gold);
}

/* =========================================================
   HERO FOTOGRÁFICO
   La foto vive solo en la cabecera de cada página, a opacidad
   completa, con un velo del color de fondo donde va el texto.
   ========================================================= */
.page-head,
.enlist,
.gate-main{
  position:relative;
  isolation:isolate;
}
.page-head::before,
.enlist::before,
.gate-main::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:var(--bg) center / cover no-repeat;
}
.page-head::after,
.enlist::after,
.gate-main::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top,
      var(--ground) 0%,
      color-mix(in srgb, var(--ground) 0%, transparent) 38%),
    linear-gradient(90deg,
      var(--ground) 0%,
      color-mix(in srgb, var(--ground) 90%, transparent) 34%,
      color-mix(in srgb, var(--ground) 45%, transparent) 62%,
      color-mix(in srgb, var(--ground) 0%, transparent) 84%);
}
.page-home{      --bg:url('../assets/img/content.webp'); }
.page-doctrine{  --bg:url('../assets/img/bg-2.webp'); }
.page-structure{ --bg:url('../assets/img/bg-struct.webp'); }
.page-ops{       --bg:url('../assets/img/bg-ops.webp'); }
.page-reqs{      --bg:url('../assets/img/bg-reqs.webp'); }
.page-join{      --bg:url('../assets/img/bg-3.webp'); }
.page-404{       --bg:url('../assets/img/404.webp'); }

/* =========================================================
   CLASSIFICATION STRIP
   ========================================================= */
/* franja estetica bajo el header, sin contenido */
.classification{
  height:2rem;
  background:var(--strip-bg);
  border-bottom:1px solid var(--strip-rule);
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead{
  background:var(--ground);
  border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:100;
}
.masthead__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:var(--s3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.masthead__right{ display:flex; align-items:center; gap:var(--s4); }

.seal{ display:flex; align-items:center; gap:.875rem; }
.seal img{ width:44px; height:44px; flex:none; }
.seal__name{
  display:block;
  font-size:.8125rem; font-weight:800;
  letter-spacing:.02em; line-height:1.25;
  text-transform:uppercase;
  color:var(--ink);
}

.nav{ display:flex; align-items:center; gap:var(--s4); }
.nav a{
  font-size:.8125rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-dim);
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--rule); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--gold); }

.icon-btn{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  background:none;
  border:1px solid var(--rule);
  color:var(--ink-dim);
  line-height:1;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.icon-btn:hover{ border-color:var(--gold); color:var(--ink); }

/* boton del menu (solo en pantallas angostas) */
.menu-btn{ display:none; }
.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after{
  display:block;
  width:16px; height:2px;
  background:currentColor;
  transition:transform .2s ease, background-color .2s ease;
}
.menu-btn__bars{ position:relative; }
.menu-btn__bars::before,
.menu-btn__bars::after{ content:""; position:absolute; left:0; }
.menu-btn__bars::before{ top:-5px; }
.menu-btn__bars::after{ top:5px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars{ background:transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before{ top:0; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after{ top:0; transform:rotate(-45deg); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono);
  font-size:.8125rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.9rem 1.75rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.btn--solid{ background:var(--gold); color:#FFFFFF; font-weight:600; }
.btn--solid:hover{ background:var(--ink); color:var(--ground); }
.btn--outline{ border-color:var(--rule); color:var(--ink); background:none; }
.btn--outline:hover{ border-color:var(--gold); color:var(--gold); }

/* =========================================================
   GATE (home)
   ========================================================= */
html.gate, body.gate{ height:100%; }
body.gate{ overflow:hidden; display:flex; flex-direction:column; }
body.gate .masthead{ position:relative; flex:none; }
body.gate .classification{ flex:none; }
body.gate .gate-main{ flex:1 1 auto; min-height:0; }
body.gate .site-footer{ flex:none; }

.gate-main{
  display:flex; align-items:center;
  overflow:hidden;
}
.gate-inner{
  width:100%; max-width:var(--wrap);
  margin:0 auto; padding:var(--s4) var(--s3);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5);
}
.gate-copy{ flex:1 1 auto; min-width:0; max-width:40rem; }
.gate-title{
  margin:var(--s2) 0 var(--s3);
  font-size:clamp(2.25rem, 7vh, 4.25rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.gate-title span{ display:block; }
.gate-lede{
  max-width:40ch;
  margin-bottom:var(--s4);
  font-size:1.0625rem;
  color:var(--ink-dim);
}
.plate{ flex:0 1 auto; min-width:0; max-width:42%; display:flex; justify-content:center; }
.plate__logo{
  width:clamp(240px, 46vh, 520px);
  max-width:100%;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */
.page-head{
  min-height:clamp(340px, 54vh, 600px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s7) 0 var(--s5);
}
.page-head > .wrap{ width:100%; }
.page-head h1{
  font-size:clamp(2.25rem, 5vw, 4rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.page-head__lede{
  margin-top:var(--s3);
  max-width:54ch;
  font-size:1.125rem;
  color:var(--ink-dim);
}

/* =========================================================
   PROSE + ASIDE
   ========================================================= */
.prose{
  padding:var(--s6) 0 var(--s7);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:var(--s6);
  align-items:start;
}
.prose__body strong{ color:var(--ink); font-weight:600; }

.aside{
  background:var(--surface);
  border-top:2px solid var(--gold);
  padding:var(--s4);
}
.aside h2{
  font-size:1.375rem; text-transform:uppercase; letter-spacing:.02em;
  margin-bottom:var(--s3);
}
/* doctrina: el cuadro iguala la altura de la columna izquierda
   y js/fit.js ajusta el tamaño del texto para llenarlo */
.prose:has(.aside[data-fit]){ align-items:stretch; }
.prose:has(.aside[data-fit]) > .prose__body{ align-self:start; }
.aside[data-fit]{ display:flex; flex-direction:column; }
.aside__body{
  flex:1 1 auto;
  padding-top:var(--s3);
  border-top:1px solid var(--rule);
  font-size:.9375rem;
}
.aside__body p{ font-size:1em; line-height:1.6; color:var(--ink-dim); }
.aside__body p + p{ margin-top:.9em; }
.aside__body p:first-child{ font-size:1.13em; line-height:1.5; color:var(--ink); }
.aside strong{ color:var(--ink); font-weight:600; }

/* =========================================================
   INTRO (estructura)
   ========================================================= */
.intro{
  padding:var(--s6) 0 var(--s5);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:var(--s6);
  align-items:start;
  border-bottom:1px solid var(--rule);
}
.intro__lede{ font-size:1.0625rem; color:var(--ink-dim); max-width:62ch; }

/* =========================================================
   VENTANAS DE DOCUMENTO (estructura y doctrina)
   ========================================================= */
.docwin{
  margin-top:var(--s6);
  position:relative;
  overflow:hidden;
  border:1px solid var(--rule);
  padding:var(--s5) var(--s4);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3) var(--s5); flex-wrap:wrap;
  background:
    linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.64) 55%, rgba(8,12,18,.42) 100%),
    url('../assets/img/comms.webp') center 8% / cover no-repeat;
  color:#f2f2f2;
}
.docwin::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--gold);
}
.docwin__text{ flex:1 1 340px; min-width:0; }
.docwin__text h2{
  font-size:1.75rem; text-transform:uppercase; letter-spacing:.02em;
  margin:.45rem 0 .5rem;
  color:#ffffff;
}
.docwin__text p{ font-size:.9375rem; color:rgba(255,255,255,.85); max-width:72ch; }
.docwin .btn{ flex:none; }
.docwin + .docwin{ margin-top:var(--s3); }
.docwin__actions{ flex:none; display:flex; flex-wrap:wrap; gap:var(--s2); }
.docwin .btn--outline{ color:#ffffff; border-color:rgba(255,255,255,.45); }
.docwin .btn--outline:hover{ color:var(--gold); border-color:var(--gold); }
.docwin--guide{
  background:
    linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.64) 55%, rgba(8,12,18,.42) 100%),
    url('../assets/img/team-staff.webp') center 35% / cover no-repeat;
}
#guia{ scroll-margin-top:110px; }

/* variante: invitacion al Discord dentro de la columna de texto (doctrina) */
.docwin--recruit{
  margin-top:var(--s5);
  flex-direction:column; align-items:stretch;
  gap:var(--s4);
  background:
    linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.64) 55%, rgba(8,12,18,.42) 100%),
    url('../assets/img/bg-ops.webp') center / cover no-repeat;
}
.docwin--recruit .docwin__text{ flex:none; }
.docwin--recruit .btn{ align-self:flex-end; }

/* =========================================================
   ESTRUCTURA: grupos de ventanas (documentos, herramientas, accesos)
   ========================================================= */
.intro--solo{ grid-template-columns:minmax(0,1fr); }
.intro--solo .intro__lede{ max-width:68ch; }

.res-group{ margin-top:var(--s6); }
.res-group:last-child{ margin-bottom:var(--s7); }
.res-group .docwin{ margin-top:0; }
.res-stack{ display:grid; gap:var(--s3); }
.res-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--s3);
}
.res-grid .docwin{
  flex-direction:column; align-items:stretch; justify-content:space-between;
  flex-wrap:nowrap;
  gap:var(--s4);
  min-height:280px;
  padding:var(--s4);
}
.res-grid .docwin__text{ flex:none; }
.res-grid .docwin__actions{ align-self:flex-start; }

/* fondos de cada ventana */
.docwin--docs{
  background:
    linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.64) 55%, rgba(8,12,18,.42) 100%),
    url('../assets/img/banner.webp') center 10% / cover no-repeat;
}
.docwin--mods{
  background:
    linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.7) 60%, rgba(8,12,18,.5) 100%),
    url('../assets/img/bg-1.webp') center / cover no-repeat;
}
.docwin--servers{
  background:
    linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.64) 55%, rgba(8,12,18,.42) 100%),
    url('../assets/img/bg-struct.webp') center 30% / cover no-repeat;
}

/* ventanas de marca: texto a la izquierda, logo o banner a la derecha */
.docwin--brand .docwin__text,
.docwin--brand .docwin__actions{ max-width:56%; }
.docwin--ts{
  background:
    linear-gradient(90deg, rgba(8,12,18,.96) 0%, rgba(8,12,18,.92) 50%, rgba(8,12,18,.25) 68%, rgba(8,12,18,0) 78%),
    url('../assets/img/win-teamspeak.webp') right 6% center / 38% auto no-repeat,
    #eef1f6;
}
.docwin--discord{
  background:
    linear-gradient(90deg, rgba(8,12,18,.95) 0%, rgba(8,12,18,.88) 45%, rgba(8,12,18,.2) 80%, rgba(8,12,18,.05) 100%),
    url('../assets/img/win-discord.webp') 72% center / cover no-repeat,
    #5865f2;
}
.docwin--radmin{
  background:
    linear-gradient(90deg, rgba(8,12,18,.95) 0%, rgba(8,12,18,.85) 48%, rgba(8,12,18,0) 70%),
    url('../assets/img/win-radmin.webp') right 2% center / 46% auto no-repeat,
    #001d3d;
}

.sect-head{
  display:flex; align-items:baseline; gap:.9rem;
  margin-bottom:var(--s4);
}
.sect-head .label{ flex:none; white-space:nowrap; }
.sect-head::after{
  content:""; flex:1 0 1.5rem; align-self:center;
  height:1px; background:var(--rule);
}
.sect-head h2{
  font-size:1.75rem;
  text-transform:uppercase; letter-spacing:.02em;
}

.roster__list{
  margin:var(--s4) auto 0;
  max-width:40rem;
  font-size:clamp(.85rem, 1.6vw, .9375rem);
  border-top:1px solid var(--rule);
}
.roster__list li{
  position:relative;
  display:flex; align-items:baseline;
  gap:.85rem;
  padding:.62rem .6rem .62rem .55rem;
  border-bottom:1px solid var(--rule-soft);
  transition:background .18s ease;
}
.roster__list li:last-child{ border-bottom-color:var(--rule); }
.roster__list li::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--gold);
  transform:scaleY(0);
  transition:transform .18s ease;
}
.roster__list li:hover{ background:var(--surface); }
.roster__list li:hover::before{ transform:scaleY(1); }

.roster__id{
  flex:none; width:2.1em;
  font-family:var(--f-mono);
  font-size:.8em; font-weight:500; letter-spacing:.06em;
  color:var(--gold);
}
.roster__name{
  flex:0 1 auto; min-width:0;
  font-weight:500; letter-spacing:.01em;
  color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.roster__list li::after{
  content:"";
  order:1; flex:1 1 auto;
  align-self:center;
  height:1px; min-width:1.5rem;
  margin:0 .9rem;
  background-image:linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:6px 1px;
}
.roster__role{
  flex:none; order:2;
  font-family:var(--f-mono);
  font-size:.72em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
  text-align:right;
}
.roster__msg{
  justify-content:center;
  font-family:var(--f-mono);
  font-size:.75em; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.roster__list li.roster__msg:hover{ background:none; }
.roster__list li.roster__msg::before,
.roster__list li.roster__msg::after{ display:none; }

/* =========================================================
   DOSSIER (ops)
   ========================================================= */
.dossier{
  margin:var(--s6) 0 var(--s7);
  background:var(--raised);
  border:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.dossier::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--gold);
}
.dossier__bar,
.reqs-window__bar{
  background:var(--strip-bg);
  padding:.55rem var(--s4);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem;
  font-family:var(--f-mono);
  font-size:.6875rem; letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--strip-label);
}
.dossier__head{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4);
  border-bottom:1px solid var(--rule);
}
.dossier__seal{ width:56px; height:56px; flex:none; }
.dossier__head-text{ flex:1; min-width:0; }
.dossier__head-text h2{
  font-size:clamp(2rem, 3.8vw, 2.875rem);
  font-weight:800;
  line-height:1.04;
  text-transform:uppercase;
  margin:.4rem 0 .5rem;
}
.dossier__sub{ font-size:.9375rem; color:var(--ink-dim); max-width:56ch; }
.dossier__status{
  font-family:var(--f-mono);
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--rule);
  padding:.35rem .75rem;
  white-space:nowrap;
}
.dossier__body{
  padding:var(--s4);
  display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:var(--s5);
  align-items:start;
}
.dossier__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--rule);
  filter:grayscale(.15);
}
.dossier__photo figcaption{
  margin-top:.6rem;
  font-family:var(--f-mono);
  font-size:.75rem; letter-spacing:.04em;
  color:var(--ink);
}
.dossier__photo figcaption span{
  display:block; margin-top:.25rem;
  color:var(--ink-faint);
  text-transform:none; letter-spacing:0;
}
.dossier__info p{ font-size:1rem; color:var(--ink-dim); margin-bottom:var(--s3); max-width:68ch; }
.dossier__info dl{
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s4);
  margin:var(--s4) 0;
  padding-top:var(--s3);
  border-top:1px solid var(--rule);
}
.dossier__info dt{
  font-family:var(--f-mono);
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--gold);
  padding-top:var(--s2);
}
.dossier__info dd{ margin:.3rem 0 0; font-size:.9375rem; color:var(--ink-dim); }
.dossier__info .btn{ margin-top:var(--s2); }

/* grano de papel sobre los expedientes */
.dossier::after,
.reqs-window::after{
  content:"";
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.09;
  mix-blend-mode:multiply;
}
html.theme-dark .dossier::after,
html.theme-dark .reqs-window::after{
  mix-blend-mode:screen;
  opacity:.05;
}

/* =========================================================
   OPERACIONES: galeria + archivo (desde assets/data/operaciones.js)
   ========================================================= */
.ops-wrap{ padding-bottom:var(--s7); }
.ops-wrap .dossier{ margin-bottom:0; }
#op-dossier{ scroll-margin-top:110px; }
.dossier__body--solo{ grid-template-columns:minmax(0,1fr); }

.gallery, .archive{ margin-top:var(--s6); }
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--s3);
}
.gallery__item{ margin:0; }
.gallery__item figcaption{
  margin-top:.5rem;
  font-family:var(--f-mono);
  font-size:var(--t-label); letter-spacing:.04em;
  color:var(--ink-faint);
}
.gallery__thumb,
.gallery__video{
  position:relative;
  display:block; width:100%;
  aspect-ratio:16/9;
  padding:0;
  background:var(--surface);
  border:1px solid var(--rule);
  overflow:hidden;
  cursor:zoom-in;
}
.gallery__video{ cursor:pointer; }
.gallery__thumb img,
.gallery__video img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s ease;
}
.gallery__thumb:hover img,
.gallery__video:hover img{ transform:scale(1.03); }
.gallery__play{
  position:absolute; left:50%; top:50%;
  width:58px; height:58px;
  transform:translate(-50%,-50%);
  background:rgba(8,12,18,.78);
  border:2px solid var(--gold);
}
.gallery__play::after{
  content:"";
  position:absolute; left:52%; top:50%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #ffffff;
}
.gallery__item--video iframe{
  display:block; width:100%; aspect-ratio:16/9;
  border:1px solid var(--rule);
}

.lightbox{
  padding:0; border:0;
  max-width:min(1400px, 94vw); max-height:92vh;
  background:transparent;
  overflow:visible;
}
.lightbox::backdrop{ background:rgba(6,10,15,.86); }
.lightbox img{ max-width:100%; max-height:84vh; margin:0 auto; border:1px solid rgba(255,255,255,.15); }
.lightbox__cap{
  margin-top:.75rem; text-align:center;
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.06em;
  color:#e6e6e6;
}
.lightbox__close{
  position:absolute; right:0; top:-2.75rem;
  width:36px; height:36px;
  font-size:1.5rem; line-height:1;
  color:#ffffff; background:none;
  border:1px solid rgba(255,255,255,.35);
  cursor:pointer;
}
.lightbox__close:hover{ border-color:var(--gold); color:var(--gold); }

.archive__list{ border-top:1px solid var(--rule); }
.archive__item{
  display:grid;
  grid-template-columns:9rem minmax(0,1fr) auto;
  gap:var(--s3);
  align-items:center;
  padding:var(--s3) 0;
  border-bottom:1px solid var(--rule);
}
.archive__meta{ display:flex; flex-direction:column; gap:.25rem; }
.archive__doc, .archive__date, .archive__now{
  font-family:var(--f-mono);
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
}
.archive__doc{ color:var(--gold); }
.archive__date{ color:var(--ink-faint); }
.archive__main h3{ font-size:1.375rem; text-transform:uppercase; letter-spacing:.02em; }
.archive__main p{ margin-top:.25rem; font-size:.9375rem; color:var(--ink-dim); max-width:66ch; }
.archive__now{ color:var(--ink-faint); }
.archive__item.is-current .archive__main h3{ color:var(--ink-dim); }

/* =========================================================
   REQS
   ========================================================= */
.reqs-layout{
  padding:var(--s6) 0 var(--s7);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:var(--s4);
  align-items:stretch;
}
.reqs-window,
.reqs-figure{
  position:relative;
  background:var(--raised);
  border:1px solid var(--rule);
}
.reqs-window::before,
.reqs-figure::before{
  content:"";
  position:absolute; top:-1px; left:-1px; right:-1px;
  height:2px; background:var(--gold);
}
.reqs-window__body{ padding:var(--s3) var(--s5) var(--s5); }
.reqs-figure{ overflow:hidden; }
.reqs-figure img{ width:100%; height:100%; object-fit:cover; }
.reqs__item{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr); gap:var(--s3);
  padding:var(--s3) 0;
  border-top:1px solid var(--rule);
}
.reqs__item:last-of-type{ border-bottom:1px solid var(--rule); }
.reqs__num{
  font-family:var(--f-mono);
  font-size:.8125rem; letter-spacing:.1em;
  color:var(--gold);
  padding-top:.15rem;
}
.reqs__item h3{ font-size:1.375rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.35rem; }
.reqs__item p{ font-size:.9375rem; color:var(--ink-dim); }

/* =========================================================
   JOIN
   ========================================================= */
.enlist{
  min-height:clamp(480px, 70vh, 760px);
  display:flex; align-items:center;
  padding:var(--s7) 0;
}
.enlist > .wrap{ width:100%; }
.enlist__inner{ max-width:620px; }
.enlist h1{
  font-size:clamp(2.25rem, 5vw, 4rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:var(--s3) 0;
}
.enlist p{ color:var(--ink-dim); font-size:1.125rem; margin-bottom:var(--s4); max-width:54ch; }
.enlist__actions{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }
/* firma: antes la pisaba .enlist p y salia a tamaño de texto */
.enlist .enlist__note{
  display:flex; align-items:center; gap:.75rem;
  margin:var(--s4) 0 0;
  font-family:var(--f-mono);
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--ink-faint);
}
.enlist .enlist__note::before{
  content:""; flex:none;
  width:2rem; height:1px; background:var(--gold);
}

/* =========================================================
   HORARIO DE OPERACIONES (doctrina + reclutamiento)
   ========================================================= */
.sched{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--s3);
  align-items:stretch;
}
.sched--solo{ grid-template-columns:minmax(0,1fr); }
.prose__body > .sched{ margin-top:0; }

.sched__win{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--rule);
  padding:var(--s3);
}
.sched__win--main{
  background:var(--raised);
  border:2px solid var(--gold);
  padding:var(--s4);
}
.sched__head{ margin-bottom:var(--s2); }
.sched__head h3{
  margin-top:.35rem;
  font-size:1.375rem;
  text-transform:uppercase; letter-spacing:.02em;
}
.sched__list{ border-top:1px solid var(--rule); }
.sched__list li{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2);
  padding:.85rem 0;
  border-bottom:1px solid var(--rule-soft);
}
.sched__when{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.sched__day{
  font-family:var(--f-display);
  font-size:1.25rem; font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.02em;
}
.sched__name{
  font-family:var(--f-mono);
  font-size:var(--t-label); letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--ink-faint);
}
.sched__list li.is-next .sched__name{ color:var(--gold); }
.sched__time{
  flex:none;
  font-family:var(--f-display);
  font-size:2.25rem; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
}
.sched__next{
  margin-top:auto;
  padding-top:var(--s2);
  font-size:.9375rem;
  color:var(--ink-dim);
}
.sched__next b{ color:var(--ink); font-weight:600; }

/* ventana de referencia (hora Colombia), mas discreta */
.sched__win:not(.sched__win--main) .sched__head h3{ font-size:1.125rem; }
.sched__win:not(.sched__win--main) .sched__day{ font-size:1.0625rem; }
.sched__win:not(.sched__win--main) .sched__time{ font-size:1.625rem; color:var(--ink-dim); }

/* =========================================================
   RECLUTAMIENTO: PREGUNTAS FRECUENTES
   ========================================================= */
.join-body{ padding:var(--s6) var(--s3) var(--s7); }

.faq{ margin-top:var(--s6); max-width:56rem; margin-inline:auto; }

/* desplegables: lista de mods y preguntas frecuentes */

.faq__list summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::after{
  content:"+";
  flex:none;
  font-family:var(--f-mono); font-size:1rem; line-height:1;
  color:var(--gold);
  transition:transform .2s ease;
}
.faq__list details[open] summary::after{ transform:rotate(45deg); }

.faq__list{ border-top:1px solid var(--rule); }
.faq__list details{ border-bottom:1px solid var(--rule); }
.faq__list summary{
  padding:var(--s3) 0;
  font-family:var(--f-display);
  font-size:1.25rem; font-weight:700;
  letter-spacing:.01em;
  color:var(--ink);
}
.faq__list summary:hover{ color:var(--gold); }
.faq__list details p{
  padding:0 0 var(--s3);
  max-width:66ch;
  color:var(--ink-dim);
}
.faq__list summary:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* =========================================================
   RECLUTAMIENTO: ventana del personal (foto arriba, fondo negro)
   Usa los valores del tema oscuro dentro de la ventana para que
   el texto se lea igual en ambos temas.
   ========================================================= */
.crew{
  --ink:#f4f4f4; --ink-dim:#c7c7c7; --ink-faint:#8f8f8f;
  --rule:#333333; --rule-soft:#2a2a2a; --surface:#1e1e1e;
  --gold:#C9A227;
  position:relative;
  background:#000000;
  color:var(--ink);
  border:1px solid #1f1f1f;
  overflow:hidden;
}
.crew::before{
  content:"";
  position:absolute; top:0; left:0; right:0; z-index:2;
  height:2px; background:var(--gold);
}
.crew__hero{
  position:relative;
  min-height:clamp(260px, 34vw, 440px);
  display:flex; align-items:flex-end;
  padding:var(--s4);
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 45%, #000000 100%),
    url('../assets/img/team-ops.webp') 50% 32% / cover no-repeat;
}
.crew__hero h2{
  margin-top:.45rem;
  font-size:clamp(2rem, 4.5vw, 3.25rem);
  font-weight:800; line-height:1.04;
  text-transform:uppercase; letter-spacing:.01em;
  color:#ffffff;
}
.crew__body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s5);
  padding:var(--s2) var(--s4) var(--s5);
}
/* alto mando en 3 columnas, operadores en 2: listas parejas */
.crew .roster__list{ column-gap:var(--s5); }
.crew #roster-staff{ columns:3; }
.crew #roster-ops{ columns:2; }
.crew .roster__list li{ break-inside:avoid; }
.crew__title{
  font-size:1.375rem;
  text-transform:uppercase; letter-spacing:.02em;
  padding-bottom:var(--s2);
}
.crew .roster__list{ margin:0; max-width:none; }
.join-body{ padding-bottom:var(--s7); }
#personal{ scroll-margin-top:110px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--rule);
  background:var(--ground);
  padding:var(--s5) 0 var(--s4);
}
.site-footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5);
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--rule);
}
.site-footer__col h4{
  font-family:var(--f-mono);
  font-size:var(--t-label); font-weight:500; letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--gold);
  margin-bottom:var(--s2);
}
.site-footer__col h4.site-footer__brand{
  font-family:var(--f-display);
  font-size:2.25rem; font-weight:800;
  letter-spacing:.01em; line-height:1;
  text-transform:none;
  color:var(--ink);
  margin-bottom:var(--s1);
}
.site-footer__col li{ margin-bottom:.5rem; }
.site-footer__col a{
  font-size:.875rem; color:var(--ink-dim);
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.site-footer__col a:hover{ color:var(--ink); border-bottom-color:var(--gold); }
.site-footer__blurb{ font-size:.875rem; color:var(--ink-dim); max-width:42ch; margin-top:var(--s2); }
.site-footer__legal{
  padding-top:var(--s3);
  font-size:.75rem; line-height:1.6;
  color:var(--ink-faint);
  max-width:88ch;
}
.site-footer__legal em{ font-style:italic; }

body.gate .site-footer{ padding:var(--s2) 0; }
body.gate .site-footer__top{ display:none; }
body.gate .site-footer__legal{
  padding-top:0;
  font-size:.6875rem;
  max-width:none;
  text-align:center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .nav{ gap:1.15rem; }
  .nav a{ font-size:.75rem; letter-spacing:.03em; }
  .masthead__right{ gap:1.15rem; }
}
@media (max-width: 1000px){
  .prose{ grid-template-columns:1fr; gap:var(--s5); }
  .prose > .aside{ order:-1; }
  .site-footer__top{ grid-template-columns:1fr 1fr; gap:var(--s4); }
}
@media (max-width: 860px){
  .intro{ grid-template-columns:1fr; }
  .reqs-layout{ grid-template-columns:minmax(0,1fr); }
  .reqs-figure{ aspect-ratio:3/4; }
}
@media (max-width: 840px){
  .masthead__right{ gap:.6rem; }
  .menu-btn{ display:grid; }
  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.25rem var(--s3) var(--s2);
    background:var(--ground);
    border-bottom:1px solid var(--rule);
    box-shadow:0 18px 30px rgba(0,0,0,.14);
  }
  .nav.is-open{ display:flex; }
  .nav a{
    padding:.95rem 0;
    font-size:.875rem;
    border-bottom:1px solid var(--rule-soft);
  }
  .nav a:last-child{ border-bottom:0; }
  .nav a:hover{ border-bottom-color:var(--rule-soft); }
  .nav a[aria-current="page"]{
    color:var(--gold);
    border-bottom-color:var(--rule-soft);
    box-shadow:inset 3px 0 0 var(--gold);
    padding-left:.85rem;
  }
  .seal__name{ font-size:.75rem; }
}
@media (max-width: 720px){
  .dossier__head{ flex-wrap:wrap; justify-content:space-between; gap:var(--s3); }
  .dossier__head-text{ flex:1 1 100%; order:3; }
  .dossier__body{ grid-template-columns:1fr; }
  .dossier__photo img{ aspect-ratio:16/10; }
  /* en movil el texto ocupa todo el ancho: velo parejo */
  .page-head::after,
  .enlist::after,
  .gate-main::after{
    background:
      linear-gradient(to top,
        var(--ground) 0%,
        color-mix(in srgb, var(--ground) 0%, transparent) 40%),
      linear-gradient(
        color-mix(in srgb, var(--ground) 70%, transparent),
        color-mix(in srgb, var(--ground) 86%, transparent));
  }
  .page-head{ min-height:clamp(300px, 46vh, 440px); padding-top:var(--s6); }
}
@media (max-width: 1000px){
  .crew #roster-staff{ columns:1; }
}
@media (max-width: 760px){
  .res-grid{ grid-template-columns:minmax(0,1fr); }
  .res-grid .docwin{ min-height:0; }
  /* en movil el logo pasa arriba y el texto ocupa todo el ancho */
  .docwin--brand{ padding-top:7.5rem; }
  .docwin--brand .docwin__text,
  .docwin--brand .docwin__actions{ max-width:none; }
  .docwin--ts{
    background:
      linear-gradient(180deg, rgba(8,12,18,0) 0, rgba(8,12,18,0) 6.5rem, rgba(8,12,18,.96) 6.5rem),
      url('../assets/img/win-teamspeak.webp') center 1.6rem / auto 3.4rem no-repeat,
      #eef1f6;
  }
  .docwin--discord{
    background:
      linear-gradient(180deg, rgba(8,12,18,.1) 0, rgba(8,12,18,.92) 7rem),
      url('../assets/img/win-discord.webp') center top / auto 11rem no-repeat,
      #0b0f16;
  }
  .docwin--radmin{
    background:
      linear-gradient(180deg, rgba(0,29,61,0) 0, rgba(0,29,61,0) 6.5rem, rgba(8,12,18,.9) 7.5rem),
      url('../assets/img/win-radmin.webp') center .5rem / auto 6.5rem no-repeat,
      #001d3d;
  }
  .crew #roster-ops{ columns:1; }
  .crew__body{ gap:var(--s4); }
}
@media (max-width: 640px){
  .reqs-window__body{ padding:var(--s2) var(--s3) var(--s4); }
  .reqs__item{ grid-template-columns:2.5rem minmax(0,1fr); gap:var(--s2); }
  .crew__hero{ padding:var(--s3); }
  .crew__body{ padding:var(--s2) var(--s3) var(--s4); }
  .sched{ grid-template-columns:minmax(0,1fr); }
  .archive__item{ grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .join-body{ padding-top:var(--s5); }
  .site-footer__top{ grid-template-columns:1fr; }
  .gate-inner{
    flex-direction:column-reverse; align-items:flex-start;
    gap:var(--s3);
    padding:var(--s5) var(--s3);
  }
  .gate-copy{ align-self:stretch; max-width:none; }
  .plate{ align-self:center; max-width:none; }
  .plate__logo{ width:min(220px, 58vw); max-width:none; }
  .gate-title{ font-size:clamp(1.85rem, 9.5vw, 3rem); }
  .sect-head::after{ display:none; }
}
/* pantallas chicas: la portada deja de bloquear el scroll */
@media (max-width: 640px), (max-height: 620px){
  html.gate, body.gate{ height:auto; min-height:100%; }
  body.gate{ overflow:visible; }
}
@media (max-width: 560px){
  .docwin{ flex-direction:column; align-items:flex-start; }
  .docwin__text{ flex:none; }
  .docwin .btn{ width:100%; justify-content:center; }
  .docwin__actions{ width:100%; }
}
@media (max-width: 430px){
  .docwin__text h2{ font-size:1.5rem; overflow-wrap:anywhere; }
  .docwin{ padding:var(--s4) var(--s3); }
  .roster__list li{ flex-wrap:wrap; row-gap:.15rem; }
  .roster__role{
    width:100%; margin-left:0;
    padding-left:calc(2.1em + .85rem);
    text-align:left;
  }
}
@media (max-height: 620px){
  .gate-title{ font-size:clamp(1.85rem, 8vh, 2.75rem); }
  .plate__logo{ width:clamp(140px, 30vh, 220px); }
  .btn{ padding:.65rem 1.35rem; font-size:.75rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* =========================================================
   VISOR DE DOCUMENTOS
   ========================================================= */
.docv{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.75rem, 3vw, 2.5rem);
  background:rgba(6,10,15,.66);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .24s ease, visibility 0s linear .24s;
}
.docv.is-open{
  opacity:1; visibility:visible;
  transition:opacity .24s ease, visibility 0s linear 0s;
}

.docv__win{
  position:relative;
  width:min(1020px, 100%); height:100%;
  display:flex; flex-direction:column;
  background:var(--raised);
  color:var(--ink);
  border:1px solid var(--rule);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  transform:scale(.9);
  opacity:0;
  transition:transform .26s cubic-bezier(.2,.85,.3,1), opacity .22s ease;
}
.docv.is-open .docv__win{ transform:scale(1); opacity:1; }

.docv__win::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--gold); z-index:2;
}

/* ---------- cabecera ---------- */
.docv__head{
  flex:none;
  padding:1rem 1.25rem .8rem;
  border-bottom:1px solid var(--rule-soft);
}
.docv__label{
  display:block;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--gold);
}
.docv__title{
  font-size:1.375rem; text-transform:uppercase; letter-spacing:.02em;
  margin-top:.3rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- area del documento ---------- */
.docv__stage{
  position:relative;
  flex:1 1 auto; min-height:0;
  overflow:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);
  padding:24px;
}
.docv__stage:focus-visible{ outline:none; }

.docv__doc{
  display:flex; flex-direction:column; align-items:center;
  gap:18px;
  width:max-content; min-width:100%;
  margin:0 auto;
}
.docv__page{
  flex:none;
  background:#ffffff;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.12);
  opacity:0;
  transition:opacity .2s ease;
}
.docv__page.is-ready{ opacity:1; }
.docv__page canvas{ display:block; width:100%; height:auto; }

.docv__status{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  padding:0 1.5rem; text-align:center;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em;
  color:var(--ink-faint);
}

/* ---------- barra inferior ---------- */
.docv__bar{
  flex:none;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.4rem .75rem;
  padding:.55rem .7rem;
  border-top:1px solid var(--rule);
  background:var(--raised);
}
.docv__group{ display:flex; align-items:center; gap:.3rem; }
.docv__group--end{ margin-left:auto; }

.docv__btn{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:34px; padding:0 .7rem;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim);
  background:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.docv__btn:hover{ color:var(--ink); border-color:var(--rule); background:var(--surface); }
.docv__btn--close:hover{ border-color:var(--gold); color:var(--gold); }

.docv__zoom, .docv__pages{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.08em;
  color:var(--ink-faint);
  min-width:3.6rem; text-align:center;
}
.docv__sep{
  width:1px; height:18px; flex:none;
  background:var(--rule); margin:0 .3rem;
}

/* iframe auxiliar de impresion */
.docv__printer{
  position:fixed; left:-9999px; top:0;
  width:1px; height:1px; border:0;
  opacity:0; pointer-events:none;
}

@media (max-width: 640px){
  .docv{ padding:.5rem; }
  .docv__head{ padding:.75rem .9rem .6rem; }
  .docv__stage{ padding:12px; }
  .docv__btn span{ display:none; }
  .docv__btn{ padding:0 .55rem; gap:0; }
  .docv__zoom, .docv__pages{ min-width:3rem; font-size:.625rem; }
}