/* ============================================================
   GamerID · by InDrive — design system
   ============================================================ */

/* ------------------------------------------------------------
   PALETA — verde lima de marca #C1F11D
   Cambiar SOLO estos valores repinta toda la web: no hay ni un
   color escrito a mano fuera de este bloque.

   Si cambias --green, cambia también --green-rgb con el MISMO
   color en formato "R, G, B": de ahí salen todos los fondos
   translúcidos (badges, chips, tarjetas activas, brillos).
     --green*   acento: botones, links, estado aprobado
     --on-green texto SOBRE el acento (el lima es claro -> va oscuro)
     --bg/panel fondos, de claro a oscuro
     --ink/soft/muted  jerarquía de texto
     --b1..b6   bordes, de más sutil a más marcado
   ------------------------------------------------------------ */
:root {
  /* Fondos: gris muy oscuro con un punto de oliva, para que el lima
     se sienta parte de la paleta y no un color pegado encima. */
  --bg: #16190F;
  --panel: #1E2216;
  --panel-2: #191D11;
  --panel-3: #14170E;
  --panel-4: #11140B;

  --ink: #ECEFE4;
  --soft: #CBD0BF;
  --muted: #B0B6A4;
  --muted-2: #9FA593;
  --muted-3: #8C9280;
  --muted-4: #5E6354;

  /* Acento de marca */
  --green: #C1F11D;
  --green-rgb: 193, 241, 29;
  --green-hi: #D3FF43;   /* hover: un paso más brillante */
  --green-lo: #8CB40E;   /* extremo bajo de los degradados */
  --on-green: #0C1203;   /* casi negro: el lima es demasiado claro para texto blanco */

  --b1: #2B2F1F;
  --b2: #383D2D;
  --b3: #343926;
  --b4: #26291B;
  --b5: #212517;
  --b6: #2F3422;

  /* Estados. Se mantienen bien separados del lima para no confundirlos. */
  --amber: #F0A63C;
  --amber-rgb: 240, 166, 60;
  --blue: #6B9BFF;
  --blue-rgb: 107, 155, 255;
  --red: #F0705C;
  --red-rgb: 240, 112, 92;
  --neutral-rgb: 140, 146, 128;

  /* Para sombras, velos y degradados sobre fotos. */
  --ink-rgb: 236, 239, 228;
  --black-rgb: 5, 6, 4;

  /* Derivados: superficies y bordes teñidos con el acento. */
  --tint-soft: rgba(var(--green-rgb), .05);
  --tint: rgba(var(--green-rgb), .12);
  --border-hi: rgba(var(--green-rgb), .38);
  --scrim: rgba(0, 0, 0, .68);

  --stripes: repeating-linear-gradient(135deg, #141610, #141610 14px, #101208 14px, #101208 28px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

::placeholder { color: var(--muted-4); }
input, select, textarea, button { font-family: 'Poppins', system-ui, sans-serif; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 8px; }

a { color: inherit; text-decoration: none; }

.page {
  min-height: 100vh;
  background: radial-gradient(900px 460px at 70% -120px, rgba(var(--green-rgb), .10), transparent 70%), var(--bg);
}

.mono { font-family: ui-monospace, monospace; }
.accent { color: var(--green); }
.container { max-width: 1160px; margin: 0 auto; }

/* ---------- Barra de demo ---------- */
.demo-nav {
  position: relative; z-index: 60;
  background: var(--panel-4); border-bottom: 1px solid var(--b6);
  padding: 9px 18px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center;
}
.demo-nav__title { font: 700 11.5px Poppins; letter-spacing: .24em; color: var(--muted-4); }
.demo-nav__group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.demo-nav__label { font: 700 10px Poppins; letter-spacing: .18em; margin-right: 2px; }
.demo-nav__label--p { color: var(--green); }
.demo-nav__label--s { color: var(--muted-3); }
.demo-nav__sep { width: 1px; height: 20px; background: var(--b6); }
.demo-pill {
  padding: 5px 12px; border-radius: 7px; font: 600 13px Poppins; letter-spacing: .02em;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  border: 1px solid var(--b2); background: transparent; color: var(--muted-2);
}
.demo-pill.is-active { border-color: var(--green); background: var(--green); color: var(--on-green); }

/* ---------- Mensajes ---------- */
.messages { max-width: 1160px; margin: 14px auto 0; padding: 0 32px; display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 12px 15px; border-radius: 10px; font: 600 13.5px Poppins; border: 1px solid var(--b2); }
.msg--success { color: var(--green); background: rgba(var(--green-rgb), .10); border-color: var(--green); }
.msg--error { color: var(--red); background: rgba(var(--red-rgb), .10); border-color: var(--red); }

/* Aviso en bloque (inscripción cerrada, torneo lleno…) */
.notice {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--b2); border-left: 3px solid var(--amber);
  border-radius: 10px; padding: 14px 16px; background: rgba(var(--amber-rgb), .07);
  margin-bottom: 20px;
}
.notice__title { font: 700 14px Poppins; color: var(--amber); }
.notice__text { font: 400 13.5px Poppins; color: var(--soft); line-height: 1.5; }
.notice__text a { color: var(--green); text-decoration: underline; }

/* ---------- Marca / logo ---------- */
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--green), var(--green-lo));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid; place-items: center;
  font: 700 13px Poppins; color: var(--on-green); letter-spacing: .02em;
  flex: none;
}
/* Cuando exista el archivo de logo real, se usa <img> y no el hexágono CSS. */
.brand-logo--img { clip-path: none; background: none; object-fit: contain; width: auto; height: 38px; }
.brand-logo--sm { width: 32px; height: 32px; font-size: 12px; }
.brand-logo--sm.brand-logo--img { width: auto; height: 32px; }
.brand-logo--lg { width: 48px; height: 48px; font-size: 16px; }
.brand-logo--lg.brand-logo--img { width: auto; height: 48px; }
.brand-name { font: 700 16px Poppins; letter-spacing: .06em; }
.brand-tag { font: 600 9.5px Poppins; letter-spacing: .2em; color: var(--green); }
.brand-text { line-height: 1.1; }

/* ---------- Header público ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 18px 32px; border-bottom: 1px solid var(--b1);
}
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-link {
  background: none; border: none; color: var(--muted-2);
  font: 600 14.5px Poppins; padding: 8px 12px; cursor: pointer;
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-active { color: var(--ink); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 10px; padding: 14px 26px;
  font: 700 15.5px Poppins; letter-spacing: .03em; cursor: pointer; transition: all .15s;
}
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { background: var(--green-hi); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--b2); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-disabled {
  background: transparent; color: var(--muted-4);
  border: 1px dashed var(--b2); cursor: not-allowed;
}
.btn-sm { padding: 10px 18px; font-size: 14px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-link { background: none; border: none; color: var(--green); font: 600 14px Poppins; cursor: pointer; padding: 0; }
.btn-back { background: none; border: none; color: var(--muted-3); font: 600 13.5px Poppins; cursor: pointer; padding: 0; }
.btn-back:hover { color: var(--ink); }

/* ---------- Eyebrow / badges ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  border: 1px solid var(--b2); border-radius: 999px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.eyebrow span:last-child { font: 600 12px Poppins; letter-spacing: .14em; color: var(--muted-2); }
.kicker { font: 600 12.5px Poppins; letter-spacing: .16em; color: var(--green); }

.badge { font: 600 11.5px Poppins; letter-spacing: .05em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.badge--abierto, .badge--aprobado { color: var(--green); background: rgba(var(--green-rgb), .13); }
.badge--pocos, .badge--pendiente { color: var(--amber); background: rgba(var(--amber-rgb), .13); }
.badge--proximo { color: var(--muted-3); background: rgba(var(--neutral-rgb), .13); }
.badge--revision { color: var(--blue); background: rgba(var(--blue-rgb), .13); }
.badge--rechazado { color: var(--red); background: rgba(var(--red-rgb), .13); }
.badge-lg { font-size: 12px; padding: 5px 13px; }
.badge__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pill-mini {
  font: 600 10.5px Poppins; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--green-rgb), .13); color: var(--green); margin-left: 8px; white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero {
  max-width: 1160px; margin: 0 auto; padding: 54px 32px 30px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: center;
}
.hero-title { font-family: Poppins; font-weight: 800; font-size: 52px; line-height: .96; letter-spacing: .01em; margin: 16px 0; text-wrap: balance; }
/* Segunda línea de la marca: mismo bloque, tamaño menor y con aire. */
.hero-title__by { display: inline-block; font-size: .40em; letter-spacing: .18em; margin-top: 6px; }
.hero-lead { font: 400 17.5px Poppins; color: var(--muted); max-width: 460px; line-height: 1.55; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.stats { display: flex; gap: 34px; margin-top: 38px; flex-wrap: wrap; }
.stat-num { font: 700 24px Poppins; color: var(--ink); }
.stat-label { font: 500 12.5px Poppins; color: var(--muted-3); letter-spacing: .08em; }
/* El recuadro del hero aloja el reproductor de la transmisión (o, si no hay
   canal, el key art del torneo destacado). La ficha del torneo va debajo,
   fuera del vídeo, para no taparlo. */
.hero-art {
  position: relative; border: 1px solid var(--b3); border-radius: 18px; overflow: hidden;
  background: var(--stripes); display: flex; flex-direction: column;
}
.hero-art__player { position: relative; width: 100%; padding-top: 56.25%; }  /* 16:9 */
.hero-art__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hero-art__placeholder { position: relative; flex: 1; min-height: 260px; }
.hero-art__ghost { font: 500 11.5px ui-monospace, monospace; color: var(--muted-4); position: absolute; top: 50%; left: 0; right: 0; text-align: center; }
.hero-art__caption {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-top: 1px solid var(--b3); background: var(--panel-2);
}
.hero-art__name { font: 700 22px Poppins; letter-spacing: -.01em; line-height: 1.05; }
.live-badge {
  position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px;
  background: var(--scrim); border: 1px solid var(--b2); padding: 5px 11px; border-radius: 8px;
}
.live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.live-badge span:last-child { font: 700 10.5px Poppins; letter-spacing: .16em; color: var(--ink); }

/* ---------- Secciones ---------- */
.section { max-width: 1160px; margin: 0 auto; padding: 34px 32px 10px; }
.section--gap { padding: 40px 32px 20px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.section-title { font: 700 21px Poppins; letter-spacing: -.005em; margin: 0; }
.page-title { font: 800 33px Poppins; letter-spacing: -.015em; margin: 0 0 6px; }
.lead { font: 400 16px Poppins; color: var(--muted-3); margin: 0 0 26px; line-height: 1.5; }

.grid-auto { display: grid; gap: 16px; }
.grid-auto--250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-auto--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-auto--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--b1); border-radius: 14px; padding: 18px; background: var(--panel); }
.card:hover { border-color: var(--border-hi); }
.card-static:hover { border-color: var(--b1); }
.card-note { font: 400 13px Poppins; color: var(--muted-3); margin: 0 0 14px; line-height: 1.5; }

.game-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.tag-box {
  width: 42px; height: 42px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--b3);
  display: grid; place-items: center; font: 700 14px Poppins; color: var(--green); letter-spacing: .04em;
}
.tag-box--lg { width: 46px; height: 46px; font-size: 15px; }
.game-card__name { font: 700 17px Poppins; letter-spacing: -.005em; }
.game-card__meta { font: 500 14px Poppins; color: var(--muted-3); margin: 2px 0 14px; }
.game-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--b4); }
.game-card__slots { font: 500 13.5px Poppins; color: var(--muted); }

/* Tarjeta de torneo (listado) */
.tcard { border: 1px solid var(--b1); border-radius: 16px; overflow: hidden; background: var(--panel); }
.tcard__banner { height: 120px; background: var(--stripes); position: relative; display: flex; align-items: flex-end; padding: 14px; }
.tcard__banner .badge { position: absolute; top: 12px; right: 12px; }
.tcard__body { padding: 18px; }
.tcard__name { font: 700 19px Poppins; letter-spacing: -.005em; }
.tcard__meta { font: 500 14px Poppins; color: var(--muted-3); margin: 3px 0 14px; }
.tcard__stats { display: flex; gap: 18px; margin-bottom: 16px; }
.tcard__stat-num { font: 700 17px Poppins; }
.tcard__stat-label { font: 500 11.5px Poppins; color: var(--muted-3); letter-spacing: .06em; }
.tcard__actions { display: flex; gap: 9px; }

/* Pasos "cómo participo" */
.step { border: 1px solid var(--b1); border-radius: 14px; padding: 22px; background: var(--panel); }
.step__n { font: 800 21px Poppins; color: var(--green); margin-bottom: 10px; }
.step__t { font: 700 17px Poppins; margin-bottom: 6px; }
.step__d { font: 400 14.5px Poppins; color: var(--muted-3); line-height: 1.5; }

/* Filtros de torneos */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-chip { padding: 8px 15px; border-radius: 8px; border: 1px solid var(--b2); color: var(--muted-2); font: 600 13.5px Poppins; cursor: pointer; }
.filter-chip.is-active { border-color: var(--green); background: rgba(var(--green-rgb), .13); color: var(--green); }

/* ---------- Contacto ---------- */
.contact-card__k { font: 500 11.5px Poppins; color: var(--muted-3); letter-spacing: .08em; margin-bottom: 7px; }
.contact-card__v { display: block; font: 700 17px Poppins; letter-spacing: .02em; color: var(--green); word-break: break-word; }
.contact-card__d { font: 400 13.5px Poppins; color: var(--muted-3); line-height: 1.5; margin-top: 8px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item { border: 1px solid var(--b1); border-radius: 12px; padding: 16px 18px; background: var(--panel); }
.faq__q { font: 700 15px Poppins; margin-bottom: 6px; }
.faq__a { font: 400 14px Poppins; color: var(--muted); line-height: 1.55; }

/* ---------- Footer ---------- */
.site-footer { max-width: 1160px; margin: 30px auto 0; padding: 24px 32px; border-top: 1px solid var(--b1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer span { font: 500 12.5px Poppins; color: var(--muted-4); }
.site-footer span:first-child { font-weight: 600; letter-spacing: .1em; }

/* ---------- Detalle de torneo ---------- */
.detail-wrap { max-width: 1100px; margin: 0 auto; padding: 26px 32px; }
.detail-banner {
  border: 1px solid var(--b3); border-radius: 18px; overflow: hidden;
  background: var(--stripes); padding: 28px; position: relative; margin-bottom: 22px;
  min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end;
}
/* Velo bajo el texto: sin él, el título se pierde sobre un banner claro. */
.detail-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--black-rgb), .30) 0%, rgba(var(--black-rgb), .55) 45%, rgba(var(--black-rgb), .88) 100%);
}
.detail-banner > * { position: relative; z-index: 1; }
.detail-banner h1 { font: 800 34px Poppins; letter-spacing: -.015em; margin: 12px 0 6px; text-shadow: 0 3px 18px rgba(var(--black-rgb), .7); }
.detail-banner p { font: 400 15px Poppins; color: var(--soft); margin: 0; max-width: 620px; line-height: 1.55; text-shadow: 0 2px 12px rgba(var(--black-rgb), .8); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 26px; }
.info-box { border: 1px solid var(--b1); border-radius: 12px; padding: 16px; background: var(--panel); }
.info-box__k { font: 500 12px Poppins; color: var(--muted-3); letter-spacing: .08em; }
.info-box__v { font: 700 18px Poppins; margin-top: 4px; }
.progress-card { border: 1px solid var(--b1); border-radius: 12px; padding: 18px; background: var(--panel); margin-bottom: 30px; }
.progress-card__top { display: flex; justify-content: space-between; margin-bottom: 10px; }
.progress-card__k { font: 600 13.5px Poppins; color: var(--muted); }
.progress-card__v { font: 700 15px Poppins; }
.progress { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.progress__bar { height: 100%; background: linear-gradient(90deg, var(--green-lo), var(--green)); }
.group-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.group-label .dot { width: 9px; height: 9px; border-radius: 50%; }
.group-label span:last-child { font: 700 13.5px Poppins; letter-spacing: .06em; }
.dot--aprobado { background: var(--green); } .text--aprobado { color: var(--green); }
.dot--revision { background: var(--blue); } .text--revision { color: var(--blue); }
.dot--pendiente { background: var(--amber); } .text--pendiente { color: var(--amber); }
.dot--rechazado { background: var(--red); } .text--rechazado { color: var(--red); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 24px; }
.team-row { border: 1px solid var(--b1); border-radius: 12px; padding: 15px; background: var(--panel); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.team-row__name { font: 700 16px Poppins; }
.team-row__meta { font: 500 13px Poppins; color: var(--muted-3); margin-top: 2px; }

/* ---------- Formularios públicos ---------- */
.form-wrap { max-width: 680px; margin: 0 auto; padding: 34px 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.field-group { margin-bottom: 18px; }
.field-label { display: block; font: 600 12.5px Poppins; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 8px; }
.field {
  width: 100%; background: var(--panel-2); border: 1px solid var(--b2); border-radius: 10px;
  padding: 12px 13px; color: var(--ink); font: 400 15.5px Poppins; outline: none;
}
.field:focus { border-color: var(--green); }
select.field { cursor: pointer; font-weight: 500; }
textarea.field { resize: vertical; }
.field--file { padding: 10px 13px; font-size: 13.5px; cursor: pointer; }
.field--file::file-selector-button {
  background: var(--b1); color: var(--soft); border: 1px solid var(--b2);
  border-radius: 7px; padding: 6px 12px; margin-right: 12px; cursor: pointer; font: 600 12.5px Poppins;
}
.field-hint { font: 500 12.5px Poppins; color: var(--muted-4); margin-top: 7px; line-height: 1.45; }
.section-label { font: 700 13.5px Poppins; letter-spacing: .06em; color: var(--muted); margin: 6px 0 14px; }
.team-box { border: 1px solid var(--b3); border-radius: 12px; padding: 16px; background: var(--tint-soft); margin-bottom: 20px; }
.team-box__label { display: block; font: 600 12.5px Poppins; letter-spacing: .07em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.members-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.member-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 22px; cursor: pointer; }
.checkbox input[type="checkbox"] { accent-color: var(--green); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.checkbox--inline { align-items: center; margin: 0 0 20px; }
.checkbox--inline input[type="checkbox"] { width: 16px; height: 16px; margin-top: 0; }
.checkbox--inline span { font-size: 13px; }
.checkbox span:last-child { font: 400 13.5px Poppins; color: var(--muted); line-height: 1.5; }
.field-error { color: var(--red); font: 500 12.5px Poppins; margin-top: 6px; }

/* Lista de torneos abiertos (cuando el elegido está cerrado) */
.open-list { display: flex; flex-direction: column; gap: 10px; }
.open-list__item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid var(--b1); border-radius: 12px; padding: 14px 16px; background: var(--panel);
}
.open-list__item:hover { border-color: var(--green); }
.open-list__name { display: block; font: 700 15px Poppins; }
.open-list__meta { display: block; font: 500 12.5px Poppins; color: var(--muted-3); margin-top: 2px; }

/* ---------- Confirmación ---------- */
.confirm-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.confirm-card { max-width: 480px; width: 100%; text-align: center; }
.confirm-title { font: 700 33px Poppins; letter-spacing: .02em; margin: 0 0 8px; }
.confirm-lead { font: 400 15.5px Poppins; color: var(--muted); line-height: 1.55; margin: 0 0 24px; }
.confirm-lead b { color: var(--ink); }
.confirm-note { font: 400 13.5px Poppins; color: var(--muted-3); line-height: 1.55; margin: 0 0 24px; }
.check-circle { width: 74px; height: 74px; border-radius: 50%; background: rgba(var(--green-rgb), .13); border: 1.5px solid var(--green); display: grid; place-items: center; margin: 0 auto 22px; font: 300 38px Poppins; color: var(--green); }
.code-box { border: 1px solid var(--b3); border-radius: 14px; padding: 20px; background: var(--panel); margin-bottom: 18px; }
.code-box__k { font: 500 12px Poppins; letter-spacing: .1em; color: var(--muted-3); margin-bottom: 6px; }
.code-box__v { font: 700 31px Poppins; letter-spacing: .08em; color: var(--green); }

/* ---------- Login staff ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-inner { max-width: 400px; width: 100%; }
.login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; text-align: center; }
.login-brand__name { font: 700 21px Poppins; letter-spacing: .13em; margin-top: 14px; }
.login-brand__tag { font: 600 10.5px Poppins; letter-spacing: .18em; color: var(--green); margin-top: 2px; }
.login-card { border: 1px solid var(--b3); border-radius: 16px; padding: 26px; background: var(--panel); }
.login-foot { text-align: center; font: 500 12.5px Poppins; color: var(--muted-4); margin-top: 16px; }

/* Campo de contraseña con botón mostrar/ocultar */
.pwd-wrap { position: relative; }
.pwd-wrap .field { padding-right: 44px; }
.pwd-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted-3); cursor: pointer;
  display: grid; place-items: center; padding: 6px; border-radius: 7px;
}
.pwd-toggle:hover { color: var(--green); }

/* ---------- Layout staff ---------- */
.staff-layout { display: flex; flex-wrap: wrap; }
/* Sin altura forzada: flexbox la estira sola hasta igualar la columna
   principal. Antes tenía min-height:100vh, que sumado a la barra de demo
   (que va encima y ocupa alto) hacía la página más larga que la pantalla y
   dejaba el botón de cerrar sesión cortado abajo. */
.sidebar { width: 236px; flex: 0 0 236px; background: var(--panel-3); border-right: 1px solid var(--b1); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; margin-bottom: 8px; border-bottom: 1px solid var(--b4); }
.sidebar__brand-name { font: 700 14px Poppins; letter-spacing: .1em; }
.sidebar__brand-tag { font: 600 8.5px Poppins; letter-spacing: .13em; color: var(--green); }
.sidebar-item { color: var(--muted-2); padding: 11px 12px; border-radius: 8px; font: 600 14.5px Poppins; cursor: pointer; display: block; }
.sidebar-item:hover { color: var(--ink); }
.sidebar-item.is-active { background: var(--tint); color: var(--green); border-left: 2px solid var(--green); }
.sidebar__spacer { flex: 1; }
.sidebar__user { padding: 12px; border-top: 1px solid var(--b4); display: flex; align-items: center; gap: 10px; }
.sidebar__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--b1); display: grid; place-items: center; font: 700 12.5px Poppins; color: var(--green); flex: none; }
.sidebar__uname { font: 600 13px Poppins; }
.sidebar__urole { font: 500 11px Poppins; color: var(--muted-3); }
/* Botón real, no texto suelto: es la única forma de cambiar de cuenta. */
.sidebar-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--b2); background: var(--panel-2);
  color: var(--muted-2); font: 600 13.5px Poppins; cursor: pointer; transition: all .15s;
}
.sidebar-logout:hover { border-color: var(--red); color: var(--red); background: rgba(var(--red-rgb), .08); }
.sidebar-logout svg { flex: none; }
.staff-main { flex: 1; min-width: 300px; padding: 26px 28px; background: var(--bg); }

/* ---------- "App shell" del panel de staff ----------
   De tablet hacia arriba la página NO scrollea: ocupa exactamente la pantalla
   y es la columna de contenido la que se desplaza por dentro. Así el usuario y
   "Cerrar sesión" quedan pegados al borde inferior siempre, haya 4 torneos o
   400 inscripciones.

   Se resuelve con flexbox puro: la barra de demo es un hermano que ocupa su
   alto natural y el resto se lo queda el panel. Sin 100vh a mano, sin medir
   nada por JavaScript y sin depender de que la barra esté encendida o no. */
@media (min-width: 861px) {
  body.staff-shell,
  body.staff-shell .page { height: 100vh; min-height: 0; }
  body.staff-shell .page { display: flex; flex-direction: column; overflow: hidden; }
  body.staff-shell .demo-nav,
  body.staff-shell .messages { flex: none; }
  body.staff-shell .staff-layout { flex: 1 1 auto; min-height: 0; }
  body.staff-shell .sidebar { height: 100%; overflow-y: auto; }
  body.staff-shell .staff-main { height: 100%; overflow-y: auto; }
}
.staff-title { font: 700 26px Poppins; letter-spacing: -.01em; margin: 0; }
.staff-sub { font: 400 14.5px Poppins; color: var(--muted-3); margin: 4px 0 0; }
.staff-foot { font: 500 12.5px Poppins; color: var(--muted-4); margin-top: 14px; }

/* Bandeja */
.toolbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.search-input { background: var(--panel-2); border: 1px solid var(--b2); border-radius: 10px; padding: 11px 14px; color: var(--ink); font: 400 14.5px Poppins; outline: none; min-width: 240px; }
.search-input:focus { border-color: var(--green); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 16px; }
.chip { padding: 8px 14px; border-radius: 8px; font: 600 13.5px Poppins; cursor: pointer; white-space: nowrap; border: 1px solid var(--b2); background: transparent; color: var(--muted-2); }
.chip.is-active { border-color: var(--green); background: rgba(var(--green-rgb), .13); color: var(--green); }
.table-wrap { border: 1px solid var(--b1); border-radius: 14px; overflow: hidden; background: var(--panel); }
.table-scroll { overflow-x: auto; }
.table { min-width: 720px; }
.table--tournaments { min-width: 960px; }
.table-head, .table-row { display: grid; grid-template-columns: 100px 1.7fr 1fr 1fr 1.1fr 110px; gap: 12px; padding: 13px 18px; align-items: center; }
/* La última columna es fija y debe caber "Inscripciones abiertas" entero;
   con 120px el badge se salía y quedaba cortado por el borde de la tarjeta. */
.table--tournaments .table-head, .table--tournaments .table-row { grid-template-columns: 1.8fr 1fr 1.1fr .8fr 1.1fr .9fr 178px; }
.table-head { border-bottom: 1px solid var(--b1); font: 600 12px Poppins; letter-spacing: .08em; color: var(--muted-3); }
.table-row { border-bottom: 1px solid var(--b5); cursor: pointer; }
.table-row:hover { background: var(--tint-soft); }
.table-row--static { cursor: default; }
.table-row--static:hover { background: transparent; }
.table-row__code { font: 600 13px ui-monospace, monospace; color: var(--green); }
.table-row__who { font: 600 15px Poppins; }
.table-row__link { color: var(--ink); border-bottom: 1px solid transparent; }
.table-row__link:hover { color: var(--green); border-bottom-color: var(--green); }
.table-row__cell { font: 500 14px Poppins; color: var(--muted); }
.table-row__cell--muted { font-size: 13.5px; color: var(--muted-3); }
.table-empty { padding: 30px 18px; font: 500 14px Poppins; color: var(--muted-3); }
.text-right { text-align: right; }

/* Paginación */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pager__btn {
  border: 1px solid var(--b2); border-radius: 9px; padding: 9px 16px;
  font: 600 13.5px Poppins; color: var(--soft); background: transparent; cursor: pointer;
}
.pager__btn:hover { border-color: var(--green); color: var(--green); }
.pager__btn.is-off { color: var(--muted-4); border-color: var(--b5); cursor: default; }
.pager__btn.is-off:hover { border-color: var(--b5); color: var(--muted-4); }
.pager__info { font: 500 13px Poppins; color: var(--muted-3); }

/* Detalle de inscripción (staff) */
.reg-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.reg-head__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reg-head h1 { font: 700 31px Poppins; letter-spacing: .02em; margin: 0; }
.reg-head__sub { font: 500 14px Poppins; color: var(--muted-3); margin-top: 6px; }
.reg-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.btn-status { border-radius: 9px; padding: 10px 16px; font: 700 13.5px Poppins; cursor: pointer; border: 1px solid transparent; }
.btn-status--review { background: rgba(var(--blue-rgb), .12); color: var(--blue); border-color: var(--blue); }
.btn-status--approve { background: var(--green); color: var(--on-green); }
.btn-status--reject { background: rgba(var(--red-rgb), .10); color: var(--red); border-color: var(--red); }
.reg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.reg-col { display: flex; flex-direction: column; gap: 18px; }
.data-card { border: 1px solid var(--b1); border-radius: 14px; padding: 20px; background: var(--panel); }
.data-card__title { font: 700 13.5px Poppins; letter-spacing: .06em; color: var(--muted); margin-bottom: 16px; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.data-grid__full { grid-column: 1 / -1; }
.data-k { font: 500 12px Poppins; color: var(--muted-3); letter-spacing: .06em; }
.data-v { font: 600 15.5px Poppins; margin-top: 3px; word-break: break-word; }
.members-list { display: flex; flex-direction: column; gap: 2px; }
.member-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--b5); }
.member-item__left { display: flex; align-items: center; gap: 10px; }
.member-avatar { width: 30px; height: 30px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--b3); display: grid; place-items: center; font: 600 12.5px Poppins; color: var(--green); flex: none; }
.member-nick { font: 600 14.5px Poppins; }
.member-steam { font: 500 12px Poppins; color: var(--muted-3); }
.banner-preview {
  height: 130px; border-radius: 11px; border: 1px solid var(--b3);
  background-size: cover; background-position: center; margin-bottom: 16px;
}

/* Línea de estado (derivada del estado actual) */
.timeline { display: flex; align-items: center; }
.timeline__node { text-align: center; flex: 1; }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 auto; background: var(--b1); }
.timeline__dot.is-done { background: var(--green); }
.timeline__dot.is-current--pendiente { background: var(--amber); box-shadow: 0 0 0 4px rgba(var(--amber-rgb), .18); }
.timeline__dot.is-current--revision { background: var(--blue); box-shadow: 0 0 0 4px rgba(var(--blue-rgb), .18); }
.timeline__dot.is-current--aprobado { background: var(--green); box-shadow: 0 0 0 4px rgba(var(--green-rgb), .18); }
.timeline__dot.is-current--rechazado { background: var(--red); box-shadow: 0 0 0 4px rgba(var(--red-rgb), .18); }
.timeline__label { font: 600 11.5px Poppins; margin-top: 6px; color: var(--muted-4); }
.timeline__label.is-on { color: var(--ink); }
.timeline__bar { height: 2px; flex: 1; background: var(--b1); }
.timeline__bar.is-done { background: var(--green); }

/* Historial real de cambios */
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.history__item { display: flex; gap: 12px; padding: 0 0 16px; position: relative; }
.history__item:not(:last-child)::before {
  content: ""; position: absolute; left: 4.5px; top: 14px; bottom: 0; width: 1px; background: var(--b2);
}
.history__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: none; position: relative; z-index: 1; }
.history__body { flex: 1; }
.history__what { font: 600 13.5px Poppins; }
.history__from { color: var(--muted-3); }
.history__meta { font: 500 12px Poppins; color: var(--muted-4); margin-top: 2px; }
.history__empty { font: 400 13.5px Poppins; color: var(--muted-3); list-style: none; }

.note { background: var(--panel-2); border: 1px solid var(--b4); border-radius: 10px; padding: 13px; }
.note__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.note__author { font: 600 12.5px Poppins; color: var(--green); }
.note__time { font: 500 11.5px Poppins; color: var(--muted-4); white-space: nowrap; }
.note__text { font: 400 14px Poppins; color: var(--soft); line-height: 1.5; }
.notes-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

/* Crear / editar torneo */
.create-form { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.field-check { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--b3); border-radius: 9px; background: var(--panel-2); cursor: pointer; font: 600 13.5px Poppins; }
.field-check input { accent-color: var(--green); width: 16px; height: 16px; flex: none; }
.field-check.is-locked { opacity: .65; cursor: not-allowed; }
.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.create-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet / móvil grande: la barra de staff pasa a barra superior */
@media (max-width: 860px) {
  .sidebar {
    width: 100%; flex: 1 1 100%; min-height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    border-right: none; border-bottom: 1px solid var(--b1); padding: 12px 16px;
  }
  .sidebar__brand { padding: 0; margin: 0; border-bottom: none; width: auto; }
  .sidebar__spacer { display: none; }
  .sidebar-item { padding: 8px 11px; font-size: 14px; }
  .sidebar-item.is-active { border-left: none; border-bottom: 2px solid var(--green); border-radius: 8px 8px 0 0; }
  .sidebar__user { border-top: none; padding: 0 0 0 4px; margin-left: auto; }
  /* En la barra superior el botón va al lado del usuario, no debajo.
     El texto se mantiene: un icono solo volvería a hacerlo indescifrable. */
  .sidebar-logout { width: auto; margin-top: 0; padding: 8px 12px; }
  .staff-main { min-width: 0; padding: 22px 18px; }
}

/* Móvil */
@media (max-width: 560px) {
  .form-row, .member-row, .cols-2, .cols-3, .data-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 46px; }

  .site-header { padding: 14px 18px; }
  .hero { padding: 32px 18px 24px; gap: 28px; }
  .section, .section--gap { padding-left: 18px; padding-right: 18px; }
  .detail-wrap, .form-wrap { padding-left: 18px; padding-right: 18px; }
  .messages { padding: 0 18px; }
  .site-footer { padding: 24px 18px; }

  .page-title { font-size: 31px; }
  .detail-banner { padding: 20px; }
  .detail-banner h1 { font-size: 31px; }
  .reg-head h1 { font-size: 25px; }
  .reg-actions { width: 100%; }
  .reg-actions .btn-status { flex: 1; }

  /* 16px es el mínimo que evita que iOS haga zoom al enfocar un input */
  .field, .search-input { font-size: 16px; }
  .search-input { width: 100%; min-width: 0; }
  .toolbar > form { width: 100%; }

  /* Nada de texto por debajo de 12px en pantallas pequeñas */
  .lead, .faq__a, .step__d, .notice__text { font-size: 15px; }
  .field-hint, .field-error, .staff-foot, .history__meta,
  .note__time, .tcard__stat-label, .contact-card__d { font-size: 12.5px; }
  .badge { font-size: 12px; }

  .nav { gap: 4px; }
  .nav .btn { margin-left: 0; }
  .form-wrap { padding-top: 24px; }

  .pager { justify-content: center; }
  .pager__info { order: -1; width: 100%; text-align: center; }
}

/* ============================================================
   PORTAL + PROFUNDIDAD VISUAL
   Rediseño "no plano": degradados, brillos, capas y movimiento.
   Referencia del cliente: gofuture.games, adaptada a la paleta lima.
   ============================================================ */

/* Cinturón de seguridad: ningún residuo de sombra/contorno puede provocar
   scroll lateral. `clip` no crea contenedor de scroll (el sticky sigue vivo). */
body:not(.staff-shell) { overflow-x: clip; }

/* Glow ambiental fijo detrás de todo el contenido público. */
body:not(.staff-shell)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(720px 420px at 84% -6%, rgba(var(--green-rgb), .07), transparent 65%),
    radial-gradient(640px 460px at -8% 44%, rgba(var(--green-rgb), .045), transparent 65%);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Encabezados de sección (estilo "// SECCIÓN") ---------- */
.sec-kicker { font: 700 12.5px Poppins; letter-spacing: .22em; color: var(--green); margin-bottom: 6px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.sec-title { font: 800 28px Poppins; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
/* Palabra "fantasma": solo contorno, como en la referencia. */
.ghost { color: var(--muted-3); }
.ghost--lime { color: var(--green); }
@supports (-webkit-text-stroke: 1px black) {
  .ghost { color: transparent; -webkit-text-stroke: 1.3px var(--ink); }
  .ghost--lime { color: transparent; -webkit-text-stroke-color: var(--green); }
}

/* ---------- Animación de entrada al scrollear ---------- */
/* Solo se ocultan si hay JS (html.js) y el usuario no pidió menos movimiento:
   sin JS o con reduced-motion todo es visible desde el primer pintado. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .float-chip { animation: floaty 5s ease-in-out infinite; }
  .portal-btd__logo { animation: floaty 7s ease-in-out infinite; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Profundidad en tarjetas y botones existentes ---------- */
.card, .step, .tcard { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover, .tcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(var(--black-rgb), .5), 0 0 0 1px rgba(var(--green-rgb), .10);
}
.btn-primary { box-shadow: 0 6px 22px rgba(var(--green-rgb), .22); }
.btn-primary:hover { box-shadow: 0 8px 28px rgba(var(--green-rgb), .32); transform: translateY(-1px); }
.hero-art { box-shadow: 0 18px 50px rgba(var(--black-rgb), .5); }

/* Emblema BTD en el hero del evento */
.hero-emblem { width: min(340px, 82%); margin: 10px 0 16px; filter: drop-shadow(0 14px 40px rgba(var(--green-rgb), .16)); }

/* ---------- Carrusel de portada ---------- */
/* El banner vive dentro de un marco redondeado con aire alrededor: deja ver
   el fondo de la página y le da entidad de "pieza", no de cabecera pegada. */
.carousel { position: relative; padding: clamp(12px, 2.2vw, 26px) clamp(14px, 3vw, 34px) 0; }
.carousel__track {
  border-radius: clamp(16px, 2vw, 28px);
  overflow-y: hidden;
  box-shadow: 0 26px 70px rgba(var(--black-rgb), .6),
              0 0 0 1px rgba(var(--green-rgb), .28),
              0 0 44px rgba(var(--green-rgb), .13);
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  height: clamp(460px, 76vh, 780px); overflow: hidden;
}
.carousel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carousel__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--black-rgb), .72), rgba(var(--black-rgb), .25) 45%, transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(var(--black-rgb), .82) 96%);
}
.carousel__content { position: absolute; inset: auto 0 74px 0; padding: 0 clamp(24px, 4vw, 60px); }
.carousel__kicker { display: inline-block; margin-bottom: 10px; letter-spacing: .2em; font-size: 12px; }
.carousel__title { font: 800 clamp(34px, 5.4vw, 66px) Poppins; letter-spacing: -.02em; line-height: .98; margin: 0 0 10px; text-shadow: 0 4px 24px rgba(var(--black-rgb), .6); }
.carousel__sub { font: 400 clamp(15.5px, 1.3vw, 18px) Poppins; color: var(--soft); max-width: 560px; line-height: 1.5; margin: 0 0 20px; text-shadow: 0 2px 12px rgba(var(--black-rgb), .7); }
.carousel__nav {
  position: absolute; left: 0; right: 0; bottom: clamp(26px, 3vw, 40px);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 32px; pointer-events: none;
}
.carousel__dots { pointer-events: auto; }
/* Se navega arrastrando: el cursor lo anuncia. */
.carousel__track { cursor: grab; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/* Mientras se arrastra, nada dentro captura el gesto. */
.carousel__track.is-dragging * { pointer-events: none; }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
  width: 26px; height: 5px; border-radius: 99px; border: none; cursor: pointer;
  background: rgba(var(--ink-rgb), .28); transition: background .2s, width .2s;
}
.carousel__dot.is-active { background: var(--green); width: 40px; }

/* ---------- Portal: ¿qué es GamerID? ---------- */
.portal-about { padding-top: 56px; }
.portal-about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.portal-about__text { font: 400 16.5px Poppins; color: var(--muted); line-height: 1.65; margin: 14px 0 24px; max-width: 540px; }
.portal-about__art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 30px 0; }
.portal-about__art::before {
  content: ""; position: absolute; inset: -10% -6%; z-index: -1; border-radius: 24px;
  background: radial-gradient(closest-side, rgba(var(--green-rgb), .12), transparent 78%);
}
.portal-about__logo { width: min(360px, 88%); filter: drop-shadow(0 18px 44px rgba(var(--black-rgb), .55)); }
.portal-about__chips { display: flex; gap: 14px; }

/* ---------- Portal: banda Beyond The Dreams ---------- */
.portal-btd {
  margin: 64px 0 8px; padding: 74px 32px;
  background:
    radial-gradient(640px 320px at 12% 20%, rgba(var(--green-rgb), .10), transparent 65%),
    radial-gradient(560px 300px at 92% 85%, rgba(var(--green-rgb), .07), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--panel-4));
  border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
  clip-path: polygon(0 26px, 100% 0, 100% calc(100% - 26px), 0 100%);
}
.portal-btd__inner { display: grid; grid-template-columns: 320px 1fr; gap: 52px; align-items: center; padding: 0 32px; }
.portal-btd__logo { width: 100%; filter: drop-shadow(0 0 46px rgba(var(--green-rgb), .22)); }
.portal-btd__text { font: 400 16px Poppins; color: var(--muted); line-height: 1.65; margin: 12px 0 20px; max-width: 560px; }
.portal-btd__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.portal-btd__chip { transition: all .2s; }
.portal-btd__chip:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

/* ---------- Noticias ---------- */
.news-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.news-card {
  position: relative; display: flex; gap: 14px; align-items: center;
  border: 1px solid var(--b1); border-radius: 14px; background: var(--panel); padding: 12px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.news-card:hover {
  transform: translateY(-3px); border-color: var(--border-hi);
  box-shadow: 0 14px 34px rgba(var(--black-rgb), .5);
}
.news-card__thumb { width: 122px; height: 78px; object-fit: cover; border-radius: 9px; flex: none; }
.news-card__date { font: 600 11.5px Poppins; letter-spacing: .1em; color: var(--green); }
.news-card__title { font: 600 15px Poppins; letter-spacing: -.005em; line-height: 1.2; margin: 4px 0 0; }
.news-card__meta { min-width: 0; }

.news-card--featured { display: block; grid-row: span 3; overflow: hidden; padding: 0; min-height: 380px; }
.news-card--featured .news-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card--featured:hover .news-card__img { transform: scale(1.04); }
.news-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(var(--black-rgb), .88) 92%); }
.news-card--featured .news-card__body { position: absolute; inset: auto 0 0 0; padding: 22px; }
.news-card--featured .news-card__title { font-size: 26px; margin: 6px 0 8px; }
.news-card__excerpt { font: 400 14px Poppins; color: var(--soft); line-height: 1.5; margin: 0; }

/* Listado de noticias */
.news-list { display: flex; flex-direction: column; gap: 18px; }
.news-row {
  display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: center;
  border: 1px solid var(--b1); border-radius: 16px; background: var(--panel);
  padding: 14px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.news-row:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: 0 14px 34px rgba(var(--black-rgb), .5); }
.news-row__img { width: 100%; height: 168px; object-fit: cover; border-radius: 11px; }
.news-row__title { font: 700 20px Poppins; letter-spacing: -.01em; margin: 4px 0 8px; line-height: 1.1; }
.news-row__excerpt { font: 400 14.5px Poppins; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }

/* Detalle de noticia */
.article { max-width: 820px; }
.article__head { margin: 18px 0 20px; }
.article__title { font: 800 clamp(26px, 3.8vw, 38px) Poppins; letter-spacing: -.02em; line-height: 1.02; margin: 8px 0 10px; text-wrap: balance; }
.article__excerpt { font: 400 17px Poppins; color: var(--muted); line-height: 1.55; margin: 0; }
.article__cover { width: 100%; border-radius: 16px; border: 1px solid var(--b1); margin-bottom: 24px; }
.article__body { font: 400 16px Poppins; color: var(--soft); line-height: 1.75; }
.article__body p { margin: 0 0 16px; }
.article__body h2 { font: 700 24px Poppins; letter-spacing: .03em; color: var(--ink); margin: 28px 0 10px; }
.article__body h3 { font: 700 19px Poppins; letter-spacing: .03em; color: var(--ink); margin: 22px 0 8px; }
.article__body ul, .article__body ol { margin: 0 0 16px; padding-left: 22px; }
.article__body li { margin-bottom: 6px; }
.article__body a { color: var(--green); text-decoration: underline; }
.article__body blockquote {
  margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--green);
  background: var(--tint-soft); border-radius: 0 10px 10px 0; color: var(--ink);
}
.article__body img { max-width: 100%; border-radius: 12px; }

/* ---------- Marquesina de logos (LAN centers) ---------- */
.marquee {
  overflow: hidden; padding: 10px 0 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item img { height: 46px; width: auto; opacity: .75; transition: opacity .2s, filter .2s; filter: grayscale(35%); }
.marquee__item:hover img { opacity: 1; filter: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - 32px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; gap: 34px; }
}

/* ---------- Partners ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding-bottom: 12px; }
.partner-tile {
  display: grid; place-items: center; min-height: 108px; padding: 20px;
  border: 1px solid var(--b1); border-radius: 14px; background: var(--panel);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.partner-tile img { max-height: 52px; max-width: 82%; object-fit: contain; opacity: .85; transition: opacity .2s; }
.partner-tile:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: 0 12px 30px rgba(var(--black-rgb), .45); }
.partner-tile:hover img { opacity: 1; }

/* ---------- Redes sociales ---------- */
.portal-social { text-align: center; padding-bottom: 40px; }
.portal-social__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.social {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--b2); color: var(--muted); background: var(--panel);
  transition: all .2s ease;
}
.social svg { width: 21px; height: 21px; }
.social:hover {
  color: var(--on-green); background: var(--green); border-color: var(--green);
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(var(--green-rgb), .3);
}
.social--lg { width: 58px; height: 58px; border-radius: 15px; }
.social--lg svg { width: 26px; height: 26px; }

/* ---------- Footer grande ---------- */
.footer { position: relative; margin-top: 60px; border-top: 1px solid var(--b1); background: linear-gradient(180deg, var(--panel-3), var(--panel-4)); overflow: hidden; }
.footer__watermark {
  position: absolute; right: -14px; bottom: -34px; z-index: 0; line-height: 1;
  font: 700 clamp(90px, 16vw, 190px) Poppins; letter-spacing: .03em;
  color: rgba(var(--green-rgb), .04); pointer-events: none; user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .footer__watermark { color: transparent; -webkit-text-stroke: 1px rgba(var(--green-rgb), .11); }
}
.footer__inner {
  position: relative; z-index: 1; max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; padding: 48px 32px 38px;
}
.footer__logo { height: 42px; width: auto; }
.footer__tag { font: 600 10.5px Poppins; letter-spacing: .22em; color: var(--green); margin-top: 8px; }
.footer__desc { font: 400 14px Poppins; color: var(--muted-3); line-height: 1.6; max-width: 330px; margin: 12px 0 0; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__head { font: 700 12px Poppins; letter-spacing: .18em; color: var(--muted-3); margin-bottom: 4px; }
.footer__col a { font: 500 14.5px Poppins; color: var(--muted); transition: color .2s, transform .2s; width: fit-content; }
.footer__col a:hover { color: var(--green); transform: translateX(3px); }
.footer__bar {
  position: relative; z-index: 1; border-top: 1px solid var(--b5);
  max-width: 1160px; margin: 0 auto; padding: 16px 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font: 500 12.5px Poppins; color: var(--muted-4);
}

/* ---------- Panel de contenido (staff) ---------- */
.sidebar__caption { font: 700 10.5px Poppins; letter-spacing: .2em; color: var(--muted-4); padding: 14px 18px 4px; }
.table--content { min-width: 880px; }
.table--content .table-head, .table--content .table-row { grid-template-columns: 112px 2fr 1fr .9fr 220px; }
.thumb { width: 84px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--b2); display: inline-block; vertical-align: middle; }
.thumb--wide { width: 96px; }
.thumb--empty { display: inline-grid; place-items: center; color: var(--muted-4); background: var(--panel-2); font: 600 13px Poppins; }
.thumb--logo { display: inline-grid; place-items: center; background: var(--panel-2); padding: 5px 8px; }
.thumb--logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.thumb--form { width: 170px; height: 84px; margin-bottom: 10px; }
.row-actions { display: inline-flex; gap: 14px; align-items: center; justify-content: flex-end; }
.row-actions form { display: inline; }
.btn-link--danger { color: var(--red); }
.form-preview { display: block; max-width: 240px; border-radius: 10px; border: 1px solid var(--b2); margin-bottom: 10px; }
.form-preview--wide { max-width: 340px; }
.check-line { display: flex; align-items: center; gap: 9px; font: 600 13.5px Poppins; }
.check-line input { accent-color: var(--green); width: 16px; height: 16px; flex: none; }

/* Editor visual (Quill) en tema oscuro */
.ql-toolbar.ql-snow { background: var(--panel-2); border: 1px solid var(--b2); border-radius: 10px 10px 0 0; }
.ql-container.ql-snow { background: var(--panel-2); border: 1px solid var(--b2); border-top: none; border-radius: 0 0 10px 10px; font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; color: var(--ink); }
.ql-editor { min-height: 230px; line-height: 1.65; }
.ql-editor.ql-blank::before { color: var(--muted-4); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }
.ql-snow .ql-picker-options { background: var(--panel); border-color: var(--b2); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--green); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--green); }
.ql-snow a { color: var(--green); }

/* ---------- Responsive del portal ---------- */
@media (max-width: 960px) {
  .portal-about__grid { grid-template-columns: 1fr; gap: 30px; }
  .portal-about__art { padding: 10px 0; }
  .portal-about__logo { width: min(300px, 70%); }
  .portal-btd__inner { grid-template-columns: 1fr; gap: 30px; text-align: center; padding: 0; }
  .portal-btd__logo { width: min(280px, 70%); margin: 0 auto; }
  .portal-btd__chips { justify-content: center; }
  .news-grid { grid-template-columns: 1fr; }
  .news-card--featured { min-height: 320px; }
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .carousel__slide { height: clamp(420px, 68vh, 560px); }
  .carousel__content { inset: auto 0 62px 0; padding: 0 20px; }
  .carousel__nav { padding: 0 18px; }
  .sec-title { font-size: 27px; }
  .portal-btd { padding: 56px 18px; margin-top: 44px; }
  .news-row { grid-template-columns: 1fr; }
  .news-row__img { height: 180px; }
  .news-card__thumb { width: 96px; height: 64px; }
  .footer__inner { padding: 36px 18px 28px; }
  .footer__bar { padding: 14px 18px; flex-direction: column; }
  .footer__watermark { font-size: 84px; bottom: -18px; }
  .marquee__item img { height: 36px; }
  .marquee__track { gap: 40px; }
  .hero-emblem { width: min(280px, 92%); }
}

/* ============================================================
   PASADA DE PROFUNDIDAD II
   Botones flotantes, stickers con parallax, bandas diagonales,
   header de cristal, grano y micro-interacciones.
   ============================================================ */

/* ---------- Grano sutil sobre todo el sitio público ---------- */
/* Mata el look "plástico" de los fondos planos. Es un SVG de ruido
   translúcido, fijo y no interactivo. */
body:not(.staff-shell)::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Header de cristal (pegado arriba al scrollear) ---------- */
/* Solo cuando no está la barra de demo (dos stickies chocarían).
   Para presentaciones al cliente: SHOW_DEMO_NAV=False en .env. */
/* El menú acompaña siempre al usuario. La barra de demo deja de ser sticky
   para no apilar dos barras: es una herramienta de prototipo, no del sitio. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--black-rgb), .72);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
/* Al despegarse del tope se marca con una línea, para que se lea como capa. */
.site-header.is-stuck { border-bottom-color: var(--b1); background: rgba(var(--black-rgb), .86); }

/* ---------- Botones flotantes (aparecen al scrollear) ---------- */
.fab-stack {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.fab-stack.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font: 700 14.5px Poppins; letter-spacing: .03em;
}
.fab--cta {
  padding: 13px 22px; border-radius: 999px;
  background: var(--green); color: var(--on-green);
  box-shadow: 0 10px 30px rgba(var(--green-rgb), .35);
  animation: fab-pulse 2.6s ease-in-out infinite;
  transition: transform .2s ease, background .2s ease;
}
.fab--cta:hover { background: var(--green-hi); transform: translateY(-2px); }
.fab--top {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--black-rgb), .6); color: var(--muted);
  border: 1px solid var(--b2); backdrop-filter: blur(8px);
  transition: color .2s, border-color .2s, transform .2s;
}
.fab--top:hover { color: var(--green); border-color: var(--green); transform: translateY(-2px); }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(var(--green-rgb), .35); }
  50% { box-shadow: 0 10px 38px rgba(var(--green-rgb), .55), 0 0 0 7px rgba(var(--green-rgb), .07); }
}
@media (prefers-reduced-motion: reduce) { .fab--cta { animation: none; } }

/* ---------- Stickers decorativos flotantes ---------- */
.deco {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--green); opacity: .17;
  width: 52px; height: 52px;
  filter: drop-shadow(0 0 14px rgba(var(--green-rgb), .35));
  will-change: transform;
}
.deco svg { width: 100%; height: 100%; }
.deco--sm { width: 34px; height: 34px; }
.deco--lg { width: 84px; height: 84px; opacity: .13; }
@media (prefers-reduced-motion: no-preference) {
  .deco { animation: floaty 6.5s ease-in-out infinite; }
  .deco--sm { animation-duration: 5s; }
  .deco--lg { animation-duration: 8.5s; }
}
/* Secciones que alojan stickers necesitan ser el marco de referencia. */
.pos-r { position: relative; }
.pos-r > .section, .pos-r .sec-head, .pos-r .container { position: relative; z-index: 1; }
@media (max-width: 960px) { .deco { display: none; } }

/* ---------- Banda diagonal reutilizable (separación de profundidad) ---------- */
/* Como la banda BTD pero espejada, para alternar el ritmo del portal. */
.band {
  position: relative; margin: 56px 0; padding: 40px 0 30px;
  background:
    radial-gradient(560px 300px at 88% 12%, rgba(var(--green-rgb), .08), transparent 65%),
    radial-gradient(520px 280px at 6% 90%, rgba(var(--green-rgb), .05), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--panel-4));
  border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
  clip-path: polygon(0 0, 100% 26px, 100% 100%, 0 calc(100% - 26px));
}
.band > .section:first-child { padding-top: 24px; }

/* ---------- Más luz y capas en los componentes ---------- */
/* "Luz desde arriba": un brillo de 1px en el borde superior de cada tarjeta. */
.card, .step, .tcard, .news-card, .partner-tile, .data-card, .table-wrap {
  background-image: linear-gradient(180deg, rgba(var(--ink-rgb), .035), transparent 22%);
}
.news-card--featured { background-image: none; }

/* Barrido de brillo al pasar el mouse por los botones primarios. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(105deg, transparent, rgba(var(--ink-rgb), .5), transparent);
  transform: skewX(-20deg); transition: left .05s;
  opacity: 0;
}
.btn-primary:hover::after { opacity: 1; left: 130%; transition: left .55s ease; }

/* Ken Burns: zoom lentísimo en las láminas del carrusel. */
@media (prefers-reduced-motion: no-preference) {
  /* Solo las imágenes: un video ya tiene movimiento propio. */
  img.carousel__img { animation: kenburns 16s ease-in-out infinite alternate; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
}
/* YouTube de fondo: el iframe se escala para CUBRIR el marco (16:9 dentro de
   una lámina más ancha deja bandas negras si no se agranda). No recibe clics. */
.carousel__yt-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.carousel__yt {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;          /* 16:9 sobre el ancho */
  min-height: 100%; min-width: 177.78vh;  /* …y sobre el alto, el que gane */
  border: 0; pointer-events: none;
  /* Oculto hasta que el reproductor confirma que está reproduciendo. Si
     YouTube falla o lo bloquean, se queda la imagen: nunca un recuadro negro. */
  opacity: 0; transition: opacity .6s ease;
}
.carousel__yt.is-playing { opacity: 1; }

/* Marca "video" en la lámina, para que se note que no es una foto. */
.carousel__slide:has(.carousel__video) .carousel__content::before,
.carousel__slide:has(.carousel__yt) .carousel__content::before {
  content: "▶ VIDEO"; display: inline-block; margin-bottom: 10px;
  font: 700 10.5px Poppins; letter-spacing: .2em; color: var(--on-green);
  background: var(--green); padding: 4px 10px; border-radius: 999px;
}

/* Los chips de juego se inclinan al pasar el mouse. */
.tag-box { transition: transform .2s ease, box-shadow .2s ease; }
.card:hover .tag-box { transform: rotate(-4deg) scale(1.06); box-shadow: 0 6px 16px rgba(var(--green-rgb), .28); }

/* ---------- Responsive de esta pasada ---------- */
@media (max-width: 560px) {
  .fab-stack { right: 14px; bottom: 14px; }
  .fab--cta { padding: 12px 19px; font-size: 13.5px; }
  .band { clip-path: polygon(0 0, 100% 14px, 100% 100%, 0 calc(100% - 14px)); margin: 40px 0; }
}

/* ============================================================
   SECCIONES NUEVAS: live, foto de marca, mosaico, FAQ, noticias
   ============================================================ */

/* ---------- EN VIVO (portal) ---------- */
.live__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center; }
.live__player {
  border: 1px solid var(--b1); border-radius: 16px; overflow: hidden; background: var(--panel-3);
  box-shadow: 0 20px 52px rgba(var(--black-rgb), .5);
}
.live__player .hero-art__placeholder { min-height: 300px; }
.live__pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--red);
  background: rgba(var(--red-rgb), .12); color: var(--ink);
  font: 700 11px Poppins; letter-spacing: .16em;
}
.live__pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 9px var(--red);
}
@media (prefers-reduced-motion: no-preference) {
  .live__pill .dot { animation: latido 1.6s ease-in-out infinite; }
  @keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.live__meta { font: 500 14.5px Poppins; color: var(--muted-3); margin: 6px 0 20px; }

/* ---------- Foto de arena junto al logo ---------- */
.portal-about__photo {
  margin: 0; width: 100%; border-radius: 18px; overflow: hidden; position: relative;
  border: 1px solid var(--b1); box-shadow: 0 20px 50px rgba(var(--black-rgb), .5);
}
.portal-about__photo img { display: block; width: 100%; height: 260px; object-fit: cover; }
.portal-about__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(var(--black-rgb), .5));
}

/* ---------- Mosaico de Beyond Dreams ---------- */
.mosaic {
  display: grid; gap: 14px;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-areas: "alta publico sedes" "alta ancha ancha";
}
.mosaic__cell {
  position: relative; margin: 0; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--b1); background: var(--panel-3); min-height: 190px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mosaic__cell:nth-child(1) { grid-area: alta; }
.mosaic__cell:nth-child(2) { grid-area: publico; }
.mosaic__cell:nth-child(3) { grid-area: sedes; }
.mosaic__cell:nth-child(4) { grid-area: ancha; }
.mosaic__cell--tall { min-height: 394px; }
.mosaic__cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.mosaic__cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(var(--black-rgb), .82));
}
.mosaic__cell:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: 0 16px 38px rgba(var(--black-rgb), .5); }
.mosaic__cell:hover img { transform: scale(1.05); }
.mosaic__cap {
  position: absolute; left: 16px; bottom: 14px; z-index: 1;
  font: 700 11.5px Poppins; letter-spacing: .2em; color: var(--green);
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.faq-item {
  border: 1px solid var(--b1); border-radius: 14px; background: var(--panel);
  background-image: linear-gradient(180deg, rgba(var(--ink-rgb), .035), transparent 22%);
  transition: border-color .25s ease;
}
.faq-item[open] { border-color: var(--border-hi); }
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font: 600 16px Poppins; color: var(--ink);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--green); }
.faq-item__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; background: var(--green); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.faq-item__icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq-item__icon::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-item[open] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item__a { padding: 0 20px 18px; font: 400 15px Poppins; color: var(--muted); line-height: 1.7; }
.faq-item__a p { margin: 0 0 10px; }
.faq-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 26px; max-width: 860px; padding: 20px 22px;
  border: 1px solid var(--b1); border-left: 3px solid var(--green);
  border-radius: 0 14px 14px 0; background: var(--tint-soft);
}
.faq-cta__t { font: 700 17px Poppins; }
.faq-cta__d { font: 400 14px Poppins; color: var(--muted-3); margin-top: 3px; }

/* ---------- Noticias con jerarquía ---------- */
.news-lead-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
.news-lead {
  position: relative; display: block; overflow: hidden; min-height: 440px;
  border: 1px solid var(--b1); border-radius: 18px; background: var(--panel);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.news-lead:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: 0 18px 44px rgba(var(--black-rgb), .55); }
.news-lead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-lead:hover .news-lead__img { transform: scale(1.04); }
.news-lead__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(var(--black-rgb), .9) 92%); }
.news-lead__body { position: absolute; inset: auto 0 0 0; padding: 26px; }
.news-lead__title { font: 800 clamp(22px, 2.4vw, 31px) Poppins; letter-spacing: -.02em; line-height: 1.12; margin: 8px 0 10px; }
.news-lead__excerpt { font: 400 15px Poppins; color: var(--soft); line-height: 1.55; margin: 0; max-width: 560px; }

.news-seconds { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.news-second {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--b1); border-radius: 16px; background: var(--panel);
  background-image: linear-gradient(180deg, rgba(var(--ink-rgb), .035), transparent 22%);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.news-second:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: 0 14px 34px rgba(var(--black-rgb), .5); }
.news-second__img { width: 100%; height: 118px; object-fit: cover; }
.news-second__body { padding: 13px 16px 16px; }
.news-second__title { font: 700 16px Poppins; letter-spacing: -.01em; line-height: 1.25; margin: 5px 0 6px; }
.news-second__excerpt { font: 400 13.5px Poppins; color: var(--muted-3); line-height: 1.5; margin: 0; }

/* ---------- Miniatura en las tarjetas de torneo ---------- */
.card--game { padding: 0; overflow: hidden; }
.card--game > *:not(.game-card__thumb) { padding-left: 18px; padding-right: 18px; }
.card--game .game-card__top { padding-top: 14px; }
.card--game .game-card__foot { padding-bottom: 14px; }
.game-card__thumb {
  height: 108px; background-size: cover; background-position: center;
  border-bottom: 1px solid var(--b1); position: relative;
}
.game-card__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--black-rgb), .55));
}

/* Reglas del torneo */
.rules-body { max-width: 820px; }

/* Tabla de FAQ en el panel */
.table--faq { min-width: 760px; }
.table--faq .table-head, .table--faq .table-row { grid-template-columns: 3fr .8fr .9fr 190px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .live__grid { grid-template-columns: 1fr; gap: 22px; }
  .news-lead-grid { grid-template-columns: 1fr; }
  .news-lead { min-height: 340px; }
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "alta alta" "publico sedes" "ancha ancha";
  }
  .mosaic__cell--tall { min-height: 260px; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: 1fr; grid-template-areas: "alta" "publico" "sedes" "ancha"; }
  .mosaic__cell, .mosaic__cell--tall { min-height: 200px; }
  .faq-item__q { font-size: 15px; padding: 15px 16px; }
  .faq-item__a { padding: 0 16px 16px; }
  .portal-about__photo img { height: 200px; }
  .news-lead__body { padding: 18px; }
}

/* ---------- Pilares de la plataforma ("¿Qué es GamerID?") ---------- */
/* Sustituyen a las cifras del torneo, que se mudaron a Beyond Dreams. */
.pillars {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; max-width: 560px;
}
.pillar { position: relative; padding-left: 22px; }
/* Marca de verificación dibujada en CSS: sin iconos ni imágenes extra. */
.pillar::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 6px; height: 11px; border: solid var(--green);
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.pillar__k { display: block; font: 600 15px Poppins; color: var(--ink); letter-spacing: -.005em; }
.pillar__d { display: block; font: 400 13.5px Poppins; color: var(--muted-3); line-height: 1.5; margin-top: 3px; }

/* Cifras dentro de la banda de Beyond Dreams */
.stats--btd { margin: 4px 0 24px; gap: 30px; }

@media (max-width: 960px) {
  .stats--btd { justify-content: center; }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; gap: 14px; }
}

/* Cierre del hero del evento: acompaña al párrafo anterior, no abre bloque. */
.hero-lead--close { margin-top: -18px; color: var(--soft); }
@media (max-width: 560px) { .hero-lead--close { margin-top: -14px; } }

/* ---------- Series: listado público y tabla del panel ---------- */
.series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.series-card {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center;
  border: 1px solid var(--b1); border-radius: 18px; background: var(--panel); padding: 20px;
  background-image: linear-gradient(180deg, rgba(var(--ink-rgb), .035), transparent 22%);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.series-card:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: 0 16px 40px rgba(var(--black-rgb), .5); }
.series-card__art { display: grid; place-items: center; }
.series-card__art img { max-width: 100%; max-height: 130px; object-fit: contain; filter: drop-shadow(0 0 28px rgba(var(--green-rgb), .2)); }
.series-card__name { font: 800 22px Poppins; letter-spacing: -.015em; margin: 2px 0 8px; }
.series-card__text { font: 400 14px Poppins; color: var(--muted-3); line-height: 1.55; margin: 8px 0 4px; }
.series-card .stats--btd { gap: 22px; margin: 12px 0 12px; }
.series-card .stat-num { font-size: 20px; }

.table--series { min-width: 960px; }
.table--series .table-head, .table--series .table-row { grid-template-columns: 92px 1.7fr .9fr .8fr 1fr .9fr 190px; }

@media (max-width: 560px) {
  .series-card { grid-template-columns: 1fr; text-align: center; }
  .series-card__art img { max-height: 110px; }
  .series-card .stats--btd { justify-content: center; }
}

/* ============================================================
   PANEL: formularios centrados y campos de archivo presentables
   ============================================================ */

/* Las pantallas de edición se centran. Antes el contenido quedaba pegado a
   la izquierda y sobraba media pantalla vacía a la derecha. El título y el
   formulario comparten ancho para que sus bordes coincidan. */
.staff-main--form > * {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.staff-main--form .create-form { max-width: 880px; }

/* Las pantallas de listado también se centran, con más aire porque las
   tablas necesitan ancho. */
.staff-main > .toolbar,
.staff-main > .table-wrap,
.staff-main > .staff-foot,
.staff-main > .search-bar {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Campo de archivo ---------- */
/* Django dibuja "Archivo actual · enlace · Quitar · Subir otro" como texto
   suelto. Se encierra en una caja con el aspecto del resto de campos. */
.file-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  border: 1px solid var(--b3); border-radius: 10px;
  padding: 12px 14px; background: var(--panel-2);
  font: 500 13px Poppins; color: var(--muted-3);
}
.file-field a {
  color: var(--green); max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.file-field a:hover { text-decoration: underline; }
.file-field label { color: var(--muted); cursor: pointer; }
.file-field input[type="checkbox"] { accent-color: var(--green); width: 15px; height: 15px; }
.file-field input[type="file"] {
  flex: 1 1 220px; min-width: 0;
  font: 500 13px Poppins; color: var(--muted); cursor: pointer;
}
.file-field input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--b2); border-radius: 8px;
  background: var(--panel); color: var(--ink);
  font: 600 13px Poppins; transition: border-color .2s, color .2s;
}
.file-field input[type="file"]::file-selector-button:hover {
  border-color: var(--green); color: var(--green);
}
/* La vista previa va en su propia línea: si no, el texto de Django se le
   encima. */
.thumb--form { display: block; width: 170px; height: 84px; margin-bottom: 10px; }

@media (max-width: 560px) {
  .file-field { flex-direction: column; align-items: stretch; }
  .file-field a { max-width: 100%; }
}

/* ============================================================
   ESTADO "PRÓXIMAMENTE": secciones que aún no tienen contenido
   La base de producción arranca vacía. Donde falte contenido se
   muestra este bloque (mismo lenguaje que el marco del stream sin
   canal: fondo rayado + píldora), nunca una sección vacía ni un 0.
   ============================================================ */
.soon {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 860px; padding: 26px 24px; margin-bottom: 20px;
  border: 1px dashed var(--b2); border-radius: 14px;
  background: radial-gradient(420px 220px at 0 0, rgba(var(--green-rgb), .08), transparent 70%), var(--stripes);
}
.soon__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--border-hi); background: var(--tint); color: var(--green);
  font: 700 11px Poppins; letter-spacing: .16em;
}
.soon__pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 9px var(--green);
}
.soon__title { font: 700 20px Poppins; letter-spacing: -.005em; line-height: 1.25; text-wrap: balance; }
.soon__text { font: 400 15px Poppins; color: var(--muted); line-height: 1.55; margin: 0; max-width: 580px; }
.soon__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.soon .btn { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .soon__pill .dot { animation: latido 1.6s ease-in-out infinite; }
}

/* Cifra de una serie que aún no tiene valor ("Por anunciar"). */
.stat-num--soon { color: var(--green); }

/* Portada sin láminas: un marco de espera con el mismo encuadre del carrusel. */
.carousel__slide--soon {
  flex-basis: 100%; height: clamp(380px, 60vh, 600px);
  background:
    radial-gradient(700px 360px at 18% 100%, rgba(var(--green-rgb), .14), transparent 70%),
    var(--stripes);
}
@media (max-width: 560px) {
  .carousel__slide--soon { height: clamp(360px, 60vh, 480px); }
  .soon { padding: 22px 18px; }
  .soon__title { font-size: 18.5px; }
}

/* ------------------------------------------------------------
   Consulta de inscripción por código (página de inscripción):
   franja "¿Ya te inscribiste?" + modal nativo <dialog>.
   ------------------------------------------------------------ */
.track-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 26px; padding: 12px 15px;
  border: 1px dashed var(--b2); border-radius: 10px;
  font: 500 14px Poppins; color: var(--muted);
}
.dialog {
  width: min(440px, calc(100vw - 32px)); padding: 0;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--b2); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(var(--black-rgb), .55);
}
.dialog::backdrop { background: rgba(var(--black-rgb), .72); backdrop-filter: blur(2px); }
.dialog__body { padding: 22px; }
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dialog__title { margin: 0; font: 700 19px Poppins; }
.dialog__close {
  background: none; border: 0; padding: 2px 6px; cursor: pointer;
  color: var(--muted-3); font: 400 26px/1 Poppins;
}
.dialog__close:hover, .dialog__close:focus-visible { color: var(--ink); }
.dialog__text { margin: 0 0 16px; font: 400 14px Poppins; line-height: 1.5; color: var(--muted-3); }
.dialog .field { text-transform: uppercase; letter-spacing: .04em; }
.dialog .field::placeholder { text-transform: none; letter-spacing: 0; }
.dialog .btn { margin-top: 16px; }