/* ============================
   INTRO — STAGE AION CORE VACÍO
   ============================ */

/* ✅ Reservamos corredor real entre HUD superior e inferior */
#intro[data-section] {
  align-items: stretch; /* pisa el align-items:center global */
  justify-content: center;
  box-sizing: border-box;

  /* ✅ más margen arriba/abajo para que NO invada */
  padding-top: calc(var(--hud-top-height) + -30px);
  padding-bottom: 210px; /* ✅ subí/bajá: 260–340 según tu HUD inferior */
}

#intro .section-inner.intro-empty {
  max-width: min(1120px, 100vw - 3rem);
  width: 100%;
  height: 100%;
  margin: 0 auto;

  /* ✅ el aire lo maneja el section, no esto */
  padding: 0;

  text-align: left;
  display: flex;
  justify-content: center;
  align-items: stretch;

  position: relative; /* necesario para el stage absolute */
}


/* Stage donde vive el icono flotante */
.intro-core-stage {
  /* lo sacamos del flujo para que no empuje al contenido */
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}


/* Icono AION CORE flotante */
.intro-core-icon {
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) scale(1.35);  /* más grande en reposo */
  width: 86px;
  max-width: 22vw;

  z-index: 80;               /* por encima del HUD inferior */
  opacity: 0;                /* por defecto NO se ve */
  pointer-events: none;
  cursor: grab;

  filter:
    drop-shadow(0 0 12px rgba(0, 191, 255, 0.85))
    drop-shadow(0 0 24px rgba(0, 191, 255, 0.55));
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Solo visible cuando la nave está en modo intro-core-only */
body.intro-core-only .intro-core-icon {
  opacity: 1;
  pointer-events: auto;
}

.intro-core-icon.is-dragging {
  cursor: grabbing;
}

.intro-core-icon.is-inserted {
  opacity: 0;
  pointer-events: none;
}

/* ==================================
   INTRO — HUD NEWS / PRESENTACIÓN
   ================================== */

/* HUD NEWS PANEL — frame grande del módulo NEWS */
#intro .intro-news-wrapper {
  position: relative;
  width: 100%;

  /* ✅ ahora el alto lo define el corredor del SECTION */
  height: 100%;
  max-height: 100%;
  min-height: 0;

  /* ✅ aire exterior mínimo para no “crecer” */
  padding: 0.16rem 0.34rem 0.16rem;

  border-radius: 18px;

  display: flex;
  justify-content: center;
  align-items: stretch;

  /* =========================
     LOOK: VIDRIO + MARCO (DEVLOG/PROJECTS)
     ========================= */
  --in-holo-rgb: 163, 228, 248; /* Nebula Sky #A3E4F8 */

  background:
    /* sheen tipo vidrio (Off-White MUY leve) */
    radial-gradient(900px 380px at 18% 8%,
      rgba(245, 250, 255, 0.05),
      rgba(245, 250, 255, 0.00) 62%
    ),
    /* halo “nebuloso” superior (Nebula Sky) */
    radial-gradient(1200px 520px at 50% -10%,
      rgba(var(--in-holo-rgb), 0.07),
      rgba(var(--in-holo-rgb), 0.00) 58%
    ),
    /* lift inferior para dar profundidad (Azul petróleo) */
    radial-gradient(900px 480px at 50% 112%,
      rgba(4, 60, 80, 0.07),
      rgba(4, 60, 80, 0.00) 66%
    ),
    /* base (cosmos) */
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.21),
      rgba(10, 15, 20, 0.26)
    );

  border: 1px solid rgba(var(--in-holo-rgb), 0.78);

  box-shadow:
    0 0 0 1px rgba(var(--in-holo-rgb), 0.18) inset,
    0 0 18px rgba(var(--in-holo-rgb), 0.10) inset,
    0 0 0 2px rgba(var(--in-holo-rgb), 0.40),
    0 0 38px rgba(var(--in-holo-rgb), 0.18),
    0 0 120px rgba(var(--in-holo-rgb), 0.16),
    0 30px 110px rgba(10, 15, 20, 0.66);

  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);

  overflow: hidden;
  isolation: isolate;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  z-index: 20;
}

/* “Lente” interno + borde doble real (copiado del patrón DEVLOG) */
#intro .intro-news-wrapper::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: calc(18px - 3px);
  pointer-events: none;

  /* segunda línea (Nebula Sky) */
  border: 1px solid rgba(var(--in-holo-rgb), 0.32);

  /* brillo interno suave + sheen superior (Nebula Sky) */
  background:
    linear-gradient(
      180deg,
      rgba(var(--in-holo-rgb), 0.10),
      rgba(var(--in-holo-rgb), 0.00) 22%
    );

  box-shadow:
    0 0 0 1px rgba(var(--in-holo-rgb), 0.10) inset,
    0 0 28px rgba(var(--in-holo-rgb), 0.08) inset;
}

/* “Hotspots” en esquinas (copiado del patrón DEVLOG) */
#intro .intro-news-wrapper::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: calc(18px + 10px);
  pointer-events: none;

  background:
    radial-gradient(210px 210px at 0% 0%,
      rgba(var(--in-holo-rgb), 0.42),
      rgba(var(--in-holo-rgb), 0.00) 58%
    ),
    radial-gradient(210px 210px at 100% 0%,
      rgba(var(--in-holo-rgb), 0.42),
      rgba(var(--in-holo-rgb), 0.00) 58%
    ),
    radial-gradient(250px 250px at 0% 100%,
      rgba(var(--in-holo-rgb), 0.18),
      rgba(var(--in-holo-rgb), 0.00) 66%
    ),
    radial-gradient(250px 250px at 100% 100%,
      rgba(var(--in-holo-rgb), 0.18),
      rgba(var(--in-holo-rgb), 0.00) 66%
    );

  opacity: 0.86;
}


/* ✅ Visible SOLO cuando:
   - estamos en la sección INTRO (data-current-section="intro")
   - y el CORE ya está insertado (NO hay clase .intro-core-only) */
body[data-current-section="intro"]:not(.intro-core-only) #intro .intro-news-wrapper {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 🚫 Oculto cuando:
   - estamos en cualquier otra sección
   - o el CORE aún NO está insertado (intro-core-only activo) */
body:not([data-current-section="intro"]) #intro .intro-news-wrapper,
body.intro-core-only #intro .intro-news-wrapper {
  opacity: 0;
  pointer-events: none;
}


/* Contenedor interno del HUD NEWS */
#intro .intro-news-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  /* ✅ más aire “real” para las cards de abajo */
  gap: 12px;

  /* ✅ aire interior simétrico */
  padding: 0.55rem 0.90rem 0.55rem;

  /* ✅ clave: que LLENE el frame (evita el desbalance arriba/abajo) */
  height: 100%;
  max-height: 100%;
  min-height: 0;

  overflow: hidden;
}


/* ==========================================================
   INTRO — SOFT DEVLOG PARITY (SOLO LOOK)
   No toca layout: NO cambia height/width/padding/grid/position
   Ajusta: cyan agresivo → nebula/off-white (como DEVLOG/PROJECTS)
   ========================================================== */

:root{
  --in-nebula-rgb: 163, 228, 248; /* #A3E4F8 */
  --in-cyan-rgb: 0, 191, 255;     /* #00BFFF (solo hover/activo) */
  --in-off-rgb: 245, 250, 255;    /* #F5FAFF */
}

/* ---------- Cabecera (TRANSPARENTE: deja pasar vidrio del wrapper) ---------- */
#intro .intro-news-header{
  border-color: rgba(var(--in-nebula-rgb), 0.40);
  background: transparent; /* <- clave */

  /* mantenemos “presencia” sin rellenar con negro */
  box-shadow:
    0 0 26px rgba(var(--in-nebula-rgb), 0.18),
    0 0 3px rgba(0, 0, 0, 0.9);
}

#intro .intro-news-kicker{
  color: rgba(var(--in-nebula-rgb), 0.78);
}

/* ---------- Cards base ---------- */
#intro .intro-card{
  border-color: rgba(var(--in-nebula-rgb), 0.26);

  /* ✅ Fondo removido: no tapa el vidrio del wrapper */
  background: transparent;

  box-shadow:
    0 0 0 1px rgba(var(--in-nebula-rgb), 0.08) inset,
    0 0 18px rgba(var(--in-nebula-rgb), 0.10),
    0 0 2px rgba(0, 0, 0, 0.9);
}

/* ---------- Tags: monocromo HUD (sin verde/cyan gritón) ---------- */
#intro .intro-card-tag{
  border-color: rgba(var(--in-nebula-rgb), 0.34);
  color: rgba(var(--in-off-rgb), 0.78);
  background:
    linear-gradient(
      to right,
      rgba(var(--in-nebula-rgb), 0.14),
      rgba(var(--in-nebula-rgb), 0.04)
    );
}

/* Si existen variantes, las dejamos en el mismo sistema (sin arcoíris) */
#intro .intro-card-tag--project{
  border-color: rgba(var(--in-nebula-rgb), 0.34);
  color: rgba(var(--in-off-rgb), 0.82);
  background:
    linear-gradient(
      to right,
      rgba(var(--in-nebula-rgb), 0.16),
      rgba(var(--in-nebula-rgb), 0.05)
    );
}

#intro .intro-card-tag--status{
  border-color: rgba(var(--in-nebula-rgb), 0.28);
  color: rgba(var(--in-off-rgb), 0.80);
}

/* ---------- CTA principal: base nebula / cyan solo en hover ---------- */
#intro .intro-card-cta{
  border-color: rgba(var(--in-nebula-rgb), 0.38);
  background:
    radial-gradient(circle at top, rgba(var(--in-nebula-rgb), 0.14), transparent 68%),
    rgba(0, 18, 35, 0.96);
  box-shadow: none;
}

#intro .intro-card-cta:hover{
  background:
    radial-gradient(circle at top, rgba(var(--in-cyan-rgb), 0.22), transparent 65%),
    rgba(0, 24, 45, 0.98);
  box-shadow: 0 0 18px rgba(var(--in-cyan-rgb), 0.16);
}

/* Link secundario: mantenemos cyan corporativo pero más suave */
#intro .intro-card-link{
  color: rgba(var(--in-cyan-rgb), 0.78);
}
#intro .intro-card-link:hover{
  color: rgba(var(--in-cyan-rgb), 0.92);
}

/* ---------- Scrollbar: nebula apagado ---------- */
#intro .intro-main-scroll::-webkit-scrollbar-thumb{
  background: rgba(var(--in-nebula-rgb), 0.22);
}
#intro .intro-main-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(var(--in-nebula-rgb), 0.34);
}

/* ---------- Recruit image glow: bajar cyan a nebula ---------- */
#intro .intro-recruit-img{
  filter:
    drop-shadow(0 0 10px rgba(var(--in-nebula-rgb), 0.32))
    drop-shadow(0 0 22px rgba(var(--in-nebula-rgb), 0.18));
}

/* ==========================================================
   INTRO — Botones (match DEVLOG: "LIMPIAR")
   Aplica SOLO a los links/botones dentro de acciones
   ========================================================== */

#intro .intro-card-actions .intro-card-link,
#intro .intro-small-actions .intro-card-link {
  /* mismo lenguaje visual del botón DEVLOG */
  height: 34px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 12px;
  border: 1px solid rgba(163, 228, 248, 0.28);

  background: rgba(4, 60, 80, 0.22);
  color: rgba(245, 250, 255, 0.92);

  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  text-decoration: none;
  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(163, 228, 248, 0.08) inset,
    0 0 18px rgba(163, 228, 248, 0.10);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

/* mata el subrayado HUD anterior en esos botones */
#intro .intro-card-actions .intro-card-link::after,
#intro .intro-small-actions .intro-card-link::after {
  display: none !important;
}

#intro .intro-card-actions .intro-card-link:hover,
#intro .intro-small-actions .intro-card-link:hover {
  background: rgba(0, 191, 255, 0.12);
  border-color: rgba(0, 191, 255, 0.44);
  box-shadow:
    0 0 0 1px rgba(0, 191, 255, 0.14) inset,
    0 0 22px rgba(0, 191, 255, 0.18);
  transform: translateY(-1px);
}

#intro .intro-card-actions .intro-card-link:active,
#intro .intro-small-actions .intro-card-link:active {
  transform: translateY(0px);
}

#intro .intro-card-actions .intro-card-link:focus-visible,
#intro .intro-small-actions .intro-card-link:focus-visible {
  outline: 2px solid rgba(0, 191, 255, 0.55);
  outline-offset: 2px;
}

/* ==========================================================
   INTRO — Scrollbar (match DEVLOG)
   Aplica a las zonas con overflow dentro de las cards
   ========================================================== */

#intro .intro-main-scroll,
#intro .intro-small-scroll {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(163, 228, 248, 0.60) rgba(0, 0, 0, 0.12);
}

/* Chromium */
#intro .intro-main-scroll::-webkit-scrollbar,
#intro .intro-small-scroll::-webkit-scrollbar {
  width: 10px;
}

#intro .intro-main-scroll::-webkit-scrollbar-track,
#intro .intro-small-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

#intro .intro-main-scroll::-webkit-scrollbar-thumb,
#intro .intro-small-scroll::-webkit-scrollbar-thumb {
  background: rgba(163, 228, 248, 0.30);
  border: 1px solid rgba(163, 228, 248, 0.22);
  border-radius: 999px;
}

#intro .intro-main-scroll::-webkit-scrollbar-thumb:hover,
#intro .intro-small-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(163, 228, 248, 0.48);
}


/* ==========================================================
   INTRO — FINAL LOCK (NO TOCAR)
   Fuerza transparencia real en tarjetas (top y bottom)
   ========================================================== */
#intro .intro-news-header,
#intro .intro-card{
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* ==========================================================
   INTRO — TYPO SYSTEM (MATCH DEVLOG / PROJECTS)
   Solo tipografía: familia, pesos, tracking, tamaños
   NO toca fondos / vidrio
   ========================================================== */

#intro{
  /* Sistema AION: Headline vs Body/UI */
  --in-font-head: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  --in-font-body: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* Tracking del sistema */
  --in-track-ui: 0.14em;     /* labels, chips, botones */
  --in-track-body: 0.01em;   /* párrafos */
  --in-track-title: 0.02em;  /* títulos chicos tipo H3 */
}

/* Base: todo el módulo Intro habla “IBM Plex Sans” por defecto */
#intro .intro-news-wrapper,
#intro .intro-news-inner,
#intro .intro-news-header,
#intro .intro-card{
  font-family: var(--in-font-body);
}

/* Kicker (UI / etiqueta superior) */
#intro .intro-news-kicker{
  font-family: var(--in-font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--in-track-ui);
  text-transform: uppercase;
  line-height: 1.2;
}

/* Cuerpo del header (texto largo) */
#intro .intro-news-body{
  font-family: var(--in-font-body);
  font-weight: 400;
  font-size: clamp(13px, 0.88rem, 15px);
  line-height: 1.55;
  letter-spacing: var(--in-track-body);
}

/* Títulos de cards (H3 UI, no Futura para no “gritar”) */
#intro .intro-card-title{
  font-family: var(--in-font-body);
  font-weight: 600;
  font-size: clamp(14px, 0.92rem, 16px);
  line-height: 1.28;
  letter-spacing: var(--in-track-title);
}

/* Texto de cards */
#intro .intro-card-text,
#intro .intro-main-body{
  font-family: var(--in-font-body);
  font-weight: 400;
  font-size: clamp(12px, 0.80rem, 14px);
  line-height: 1.5;
  letter-spacing: var(--in-track-body);
}

/* Meta line (antes estaba inline en intro.html) */
#intro #intro-devlog-meta{
  font-size: 12px;
  line-height: 1.35;
  opacity: .85;
  margin-top: 6px;
}

/* Chips / tags (UI) — ajustado a “DEVLOG” (menos pesado) */
#intro .intro-card-tag{
  font-family: var(--in-font-body);
  font-weight: 500; /* ✅ antes 600 */
  font-size: 11px;
  letter-spacing: var(--in-track-ui);
  text-transform: uppercase;
  line-height: 1;
}

/* Botones CTA (UI) — ajustado a “Limpiar” (menos pesado) */
#intro .intro-card-cta,
#intro .intro-card-link{
  font-family: var(--in-font-body);
  font-weight: 500; /* ✅ antes 600 */
  letter-spacing: var(--in-track-ui);
  text-transform: uppercase;
}

/* CTA principal (pill) un toque más “devlog-like” en lectura */
#intro .intro-card-cta{
  font-size: 11px;
  line-height: 1;
}

/* Link secundario */
#intro .intro-card-link{
  font-size: 11px;
  line-height: 1.1;
}

/* ==========================================================
   INTRO — AION FEED NEWS (NEWSPAPER WIREFRAME LAYOUT)
   Solo layout interno + scroll. NO toca tamaños del contenedor.
   ========================================================== */

#intro .intro-news-inner{
  /* evita que el layout viejo meta gaps raros */
  gap: 0;
}

/* Contenedor interno en columna y con altura completa */
#intro .intro-feed{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* CRÍTICO para que el scroll funcione en flex */
}

/* Top bar */
#intro .intro-feed-top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.25);
}

#intro .feed-stardate{
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.78);
}

#intro .feed-stardate-value{
  color: rgba(245, 250, 255, 0.92);
  letter-spacing: 0.06em;
}

#intro .feed-top-center{
  text-align: center;
}

/* ==========================================================
   TOP BAR — header meta (mover dateline/docid a la cabecera)
   ========================================================== */

#intro .feed-top-left{
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

#intro .feed-top-aux{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#intro .feed-top-aux .feed-docid,
#intro .feed-top-aux .feed-read{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  color: rgba(245, 250, 255, 0.72);
}

/* derecha del título (zona vacía) */
#intro .feed-top-right{
  justify-self: end;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#intro .feed-top-right .feed-dateline,
#intro .feed-top-right .feed-byline{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  color: rgba(163, 228, 248, 0.78);
}

/* en pantallas chicas: que no explote ni empuje el header */
@media (max-width: 820px){
  #intro .intro-feed-top{
    grid-template-columns: 1fr auto; /* se cae la columna derecha */
  }
  #intro .feed-top-right{
    display: none;
  }
}

#intro .feed-title{
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.92);
  line-height: 1.05;
}

#intro .feed-subtitle{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(163, 228, 248, 0.72);
}

#intro .feed-top-right{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#intro .feed-top-right .feed-chip{
  width: 42px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(163, 228, 248, 0.25);
  background: rgba(12, 18, 26, 0.18);
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.06);
}

/* Tabs */
#intro .intro-feed-tabs{
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.18);
}

#intro .feed-tab{
  appearance: none;
  border: 1px solid rgba(163, 228, 248, 0.22);
  background: rgba(10, 16, 24, 0.12);
  color: rgba(245, 250, 255, 0.86);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.05);
}

#intro .feed-tab.is-active{
  border-color: rgba(163, 228, 248, 0.55);
  box-shadow:
    0 0 18px rgba(163, 228, 248, 0.14),
    inset 0 0 0 1px rgba(245, 250, 255, 0.09);
}

/* Scroll interno (CRÍTICO) */
#intro .intro-feed-scroll{
  flex: 1;
  min-height: 0;     /* CRÍTICO */
  overflow: auto;    /* SCROLL */
  padding: 12px;
  padding-right: 10px;
}

/* Scrollbar (simple, coherente) */
#intro .intro-feed-scroll::-webkit-scrollbar{
  width: 10px;
}
#intro .intro-feed-scroll::-webkit-scrollbar-thumb{
  background: rgba(163, 228, 248, 0.18);
  border: 1px solid rgba(163, 228, 248, 0.22);
  border-radius: 999px;
}
#intro .intro-feed-scroll::-webkit-scrollbar-track{
  background: transparent;
}

/* Feature */
#intro .feed-feature{
  padding: 13px;
  margin-bottom: 12px;
}

#intro .feed-kicker-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.16);
  margin-bottom: 12px;
}

#intro .feed-kicker-pill{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.9);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(163, 228, 248, 0.22);
  background: rgba(10, 16, 24, 0.12);
}

#intro .feed-kicker-title{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.86);
}

#intro .feed-feature-body{
  display: grid;
  grid-template-columns: 245px 1fr; /* probá 220–240px */
  gap: 16px;
  align-items: start;
}

#intro .feed-logo-box{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(163, 228, 248, 0.22);
  background: rgba(10, 16, 24, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.05);
  display: grid;
  place-items: center;
  overflow: hidden;
}

#intro .feed-logo-box img{
  width: 100%;
  height: 100%;
  display: block;

  /* ✅ Entra al cuadro SIN deformar: recorta lo mínimo necesario */
  object-fit: cover;

  /* 🎯 Centro levemente hacia arriba para favorecer rostro (ajustable) */
  object-position: 50% 35%;

  opacity: 0.95;
  filter: drop-shadow(0 0 18px rgba(163, 228, 248, 0.12));
}

#intro .feed-feature-right p{
  margin: 0 0 10px 0;
  color: rgba(245, 250, 255, 0.82);
  font-size: 12px;
  line-height: 1.55;
}

#intro .feed-btn{
  margin-top: 10px;
  width: 100%;
  border: 1px solid rgba(163, 228, 248, 0.22);
  background: rgba(10, 16, 24, 0.12);
  color: rgba(245, 250, 255, 0.86);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.05);
}

/* 3 cards row */
#intro .feed-row-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

#intro .feed-mini{
  padding: 14px;
}

#intro .feed-mini-head{
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.14);
  margin-bottom: 10px;
}

#intro .feed-mini-tag{
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(163, 228, 248, 0.75);
}

#intro .feed-mini-title{
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.9);
}

#intro .feed-mini-media{
  height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(163, 228, 248, 0.18);
  background: rgba(10, 16, 24, 0.10);
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.05);
  margin-bottom: 10px;

  overflow: hidden; /* ✅ clave: recorta la imagen dentro del frame */
}

#intro .feed-mini-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* ✅ llena el frame sin deformar */
  object-position: center; /* ✅ centrada */
}

#intro .feed-mini-body{
  color: rgba(245, 250, 255, 0.78);
  font-size: 12px;
  line-height: 1.5;
}

/* ==========================================================
   FIX — Column widths match (AISHIN == NEWSLETTER / STACK == PRESS KIT)
   ========================================================== */
#intro .feed-row-2{
  display: grid;
  grid-template-columns: 1.55fr 1fr; /* ✅ igual que .feed-row-major */
  gap: 12px;
  margin-bottom: 12px;
}

#intro .feed-wide{
  padding: 14px;
}

#intro .feed-wide-title{
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.9);
  margin-bottom: 8px;
}

#intro .feed-wide-body{
  color: rgba(245, 250, 255, 0.78);
  font-size: 12px;
  line-height: 1.5;
}

/* search */
#intro .feed-search{
  padding: 12px 14px;
}

#intro .feed-search-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#intro .feed-search-label{
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.88);
}

#intro .feed-search-icon{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(245, 250, 255, 0.6);
  position: relative;
  opacity: 0.9;
}
#intro .feed-search-icon::after{
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background: rgba(245, 250, 255, 0.6);
  right: -6px;
  bottom: -3px;
  transform: rotate(45deg);
  border-radius: 999px;
}

/* ==========================================================
   AION FEED NEWS — ALIGN + TYPO TWEAKS (NO rompe layout)
   - Centra tabs
   - Centra/agranda el “AION GAMES // …”
   - Ajusta pesos tipográficos (solo fonts del branding)
   ========================================================== */

#intro .intro-feed-tabs{
  justify-content: center;      /* ✅ centra el menú */
  width: 100%;
  margin-inline: auto;
  margin-bottom: 12px; /* antes lo separaba el ticker */
}

#intro .feed-tab{
  font-family: var(--in-font-body);
  font-weight: 600;
  letter-spacing: var(--in-track-ui);
  text-transform: uppercase;
}

/* Tabs deshabilitados (visibles pero “locked”) */
#intro .feed-tab.is-disabled{
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(0.55) contrast(0.95);
  box-shadow: none;
}

#intro .feed-tab.is-disabled::after{
  content: " • LOCKED";
  font-size: 9px;
  letter-spacing: 0.18em;
  opacity: 0.55;
  margin-left: 6px;
}

/* Kicker row: CURRENT + título centrados */
#intro .feed-kicker-row{
  justify-content: center;      /* ✅ centra el bloque completo */
  text-align: center;
}

#intro .feed-kicker-pill{
  font-family: var(--in-font-body);
  font-weight: 600;
  letter-spacing: var(--in-track-ui);
  text-transform: uppercase;
}

/* ✅ título del artículo (AION GAMES // …) centrado y más grande */
#intro .feed-kicker-title{
  font-family: var(--in-font-body);
  font-weight: 700;
  font-size: 16px;              /* 👈 si querés más grande: 17–18px */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.92);
}

/* Header principal del diario (AION FEED NEWS) */
#intro .feed-title{
  font-family: var(--in-font-head);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#intro .feed-subtitle{
  font-family: var(--in-font-body);
  font-weight: 500;
  letter-spacing: var(--in-track-ui);
  text-transform: uppercase;
}

/* Cuerpo del artículo principal */
#intro .feed-feature-right p{
  font-family: var(--in-font-body);
  font-weight: 400;
  letter-spacing: var(--in-track-body);
}

/* Mini cards: jerarquía como wireframe */
#intro .feed-mini-tag{
  font-family: var(--in-font-body);
  font-weight: 600;
  letter-spacing: var(--in-track-ui);
}

#intro .feed-mini-title{
  font-family: var(--in-font-body);
  font-weight: 700; /* ✅ más “headline” como el boceto */
}

/* Wide cards (SUBSCRIBE / PRESS KIT) */
#intro .feed-wide-title{
  font-family: var(--in-font-body);
  font-weight: 700;
  letter-spacing: var(--in-track-ui);
}

#intro .feed-wide-body{
  font-family: var(--in-font-body);
  font-weight: 400;
  letter-spacing: var(--in-track-body);
}

/* Responsive dentro del panel */
@media (max-width: 980px){
  #intro .feed-feature-body{ grid-template-columns: 1fr; }
  #intro .feed-row-3{ grid-template-columns: 1fr; }
  #intro .feed-row-2{ grid-template-columns: 1fr; }
}


/* ==========================================================
   FEED WIDE — NEWSLETTER con imagen derecha (sin cambiar tamaño de tarjeta)
   ========================================================== */
#intro .feed-wide--newsletter .feed-wide-split{
  display: grid;
  grid-template-columns: 150px 1fr; /* imagen izq + texto */
  gap: 12px;
  align-items: stretch;
}

#intro .feed-wide--newsletter .feed-wide-left{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* botón más compacto SOLO acá */
#intro .feed-wide--newsletter .feed-btn{
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* recuadro tipo “frame” como las otras tarjetas */
#intro .feed-wide--newsletter .feed-wide-media{
  border-radius: 12px;
  border: 1px solid rgba(163, 228, 248, 0.18);
  background: rgba(10, 16, 24, 0.10);
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.05);
  overflow: hidden;
  min-height: 110px;
}

#intro .feed-wide--newsletter .feed-wide-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* responsive: baja la imagen abajo si no entra */
@media (max-width: 520px){
  #intro .feed-wide--newsletter .feed-wide-split{
    grid-template-columns: 1fr;
  }
  #intro .feed-wide--newsletter .feed-wide-media{
    min-height: 140px;
  }
}

/* ==========================================================
   FIX PUNTUAL FINAL — Intro: estrellas visibles + vidrio intacto
   Culpable real: la presencia de backdrop-filter “promedia” el canvas starfield.
   Solución: desactivar backdrop-filter SOLO en Intro wrapper (marco/gradientes quedan).
   ========================================================== */
#intro .intro-news-wrapper{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ==========================================================
   FEED LAYOUT — PROJECT LEFT (TALL) + STACK RIGHT (2 CARDS)
   Objetivo: AISHIN ocupa alto = DEVLOG + ROADMAP
   ========================================================== */

#intro .feed-row-major{
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}

#intro .feed-project{
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#intro .feed-project-top{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.14);
  margin-bottom: 10px;
  align-items: stretch;
}

#intro .feed-project-logo{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(163, 228, 248, 0.22);
  background: rgba(10, 16, 24, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.05);
  display: grid;
  place-items: center;
  overflow: hidden;
}

#intro .feed-project-logo img{
  width: 78%;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 0 18px rgba(163, 228, 248, 0.12));
}

#intro .feed-project-side{
  color: rgba(245, 250, 255, 0.78);
  font-size: 13.25px;      /* ✅ match con la tarjeta AION GAMES (feed-lead) */
  line-height: 1.52;       /* ✅ mismo ritmo */
}

#intro .feed-project-side p{
  margin: 0;
}

/* ==========================================================
   AISHIN — PROJECT CARD (TIPOGRAFÍA EDITORIAL AAA)
   - Texto intacto, solo jerarquía/ritmo
   - Menos aire, más lectura
   ========================================================== */

#intro .feed-project-title{
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.92);
  padding-bottom: 8px;                 /* ↓ menos aire */
  border-bottom: 1px solid rgba(163, 228, 248, 0.14);
  margin-bottom: 8px;                  /* ↓ menos aire */
}

#intro .feed-project-body{
  color: rgba(245, 250, 255, 0.80);
  font-family: var(--in-font-body);
  font-weight: 400;
  font-size: 13.25px;      /* ✅ match con la tarjeta AION GAMES (feed-lead) */
  line-height: 1.52;       /* ✅ sube todo sin “aire decorativo” */
  letter-spacing: var(--in-track-body);
}

/* Reset: controlamos márgenes por clase (no global p) */
#intro .feed-project-body p{
  margin: 0;
  font-size: inherit;        /* <- toma 13.25px del .feed-project-body */
  line-height: inherit;
  letter-spacing: inherit;
}

/* Ritmo editorial: 2 bloques + remate */
#intro .feed-project-lead{
  margin: 0 0 8px 0;
}

#intro .feed-project-p{
  margin: 0 0 8px 0;
}

/* Remate/pregunta: cierre con presencia, sin “marketing” */
#intro .feed-project-close{
  margin: 2px 0 0 0;
  padding-top: 4px;        /* ✅ mantiene respiración sin separador */
  border-top: none;        /* ✅ QUITA la línea */
  color: rgba(245, 250, 255, 0.90);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Kicker inline (ancla visual sin romper flujo) */
#intro .feed-k{
  color: rgba(163, 228, 248, 0.92);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 0.02em;
  box-shadow: inset 0 -1px 0 rgba(163, 228, 248, 0.22);
  border-radius: 2px;
}

#intro .feed-project-btn{
  margin-top: auto; /* empuja CTA al fondo del bloque grande */
}

/* ==========================================================
   AISHIN — imagen flotante derecha + texto fluye y luego ocupa todo el ancho
   (NO toca grid general, solo layout interno del body)
   ========================================================== */

#intro .feed-project-float{
  float: left;
  width: min(40%, 210px);   /* un toque menos para que respire el párrafo */
  aspect-ratio: 1 / 1;

  /* Aire correcto para float-left:
     - derecha: separa texto
     - abajo: separa el texto cuando baja
     - izquierda: NO sumar (si no te “come” el borde del card) */
  margin: 6px 14px 12px 0;

  border-radius: 14px;
  border: 1px solid rgba(163, 228, 248, 0.22);
  background: rgba(10, 16, 24, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.05);

  padding: 12px;            /* un poco más de “marco” */
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 0 18px rgba(163, 228, 248, 0.12));
}

/* que el contenedor “encierre” el float y no rompa alturas */
#intro .feed-project-body::after{
  content: "";
  display: block;
  clear: both;
}

/* mobile: sin float para que no se achique el texto */
@media (max-width: 980px){
  #intro .feed-project-float{
    float: none;
    width: 100%;
    max-width: 260px;
    margin: 0 0 10px 0;
  }
}

#intro .feed-stack{
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}

#intro .feed-mini--stack{
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#intro .feed-mini--stack .feed-mini-body{
  flex: 1; /* mantiene el botón abajo y empareja alturas */
}

#intro .feed-mini-media--tall{
  height: 110px; /* más editorial, respira mejor que 86px */
}

/* Responsive: apila todo sin romper el panel */
@media (max-width: 980px){
  #intro .feed-row-major{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  #intro .feed-project{
    grid-column: auto;
    grid-row: auto;
  }
  #intro .feed-stack{
    grid-column: auto;
    grid-row: auto;
    grid-template-rows: auto;
  }
  #intro .feed-project-top{
    grid-template-columns: 1fr;
  }
  #intro .feed-project-logo{
    max-width: 260px;
  }
}


/* ==========================================================
   EDITORIAL HUD — meta, chips, ticker, stamp, baseline, caps
   (solo Intro / Feed; no rompe vidrio ni layout macro)
   ========================================================== */

/* Baseline / módulo editorial */
#intro{
  --feed-8: 8px;
  --feed-12: 12px;
  --feed-16: 16px;
  --feed-text: 12px;
  --feed-lh: 1.6;
}

/* Baseline aplicado a todo el cuerpo editorial dentro de cards */
#intro .intro-card p{
  font-size: var(--feed-text);
  line-height: var(--feed-lh);
  margin: 0 0 var(--feed-12) 0;
}

/* ==========================================================
   OVERRIDE — AISHIN (feed-project) debe matchear tamaño AION (feed-lead)
   FIX: el baseline global #intro .intro-card p (12px) pisaba estos <p>
   ========================================================== */

#intro .intro-card.feed-project .feed-project-body{
  font-size: 13.25px;
  line-height: 1.52;
}

/* más específico que #intro .intro-card p */
#intro .intro-card.feed-project .feed-project-body p{
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0;
}

/* ritmo editorial (también pisado por el baseline si no lo hacemos así) */
#intro .intro-card.feed-project p.feed-project-lead{ margin: 0 0 8px 0; }
#intro .intro-card.feed-project p.feed-project-p{    margin: 0 0 8px 0; }

#intro .intro-card.feed-project p.feed-project-close{
  margin: 2px 0 0 0;
  padding-top: 4px;
  border-top: none;
  color: rgba(245, 250, 255, 0.90);
  font-weight: 600;
  letter-spacing: 0.02em;
}


#intro .intro-card p:last-child{ margin-bottom: 0; }

/* =========================
   Ticker
   ========================= */
#intro .feed-ticker{
  padding: 8px 12px 10px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.14);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(163, 228, 248, 0.70);
  opacity: 0.95;
}

/* =========================
   Chipbar (classification + status)
   ========================= */
#intro .feed-chipbar{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.18);
}

#intro .feed-chipgroup{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#intro .feed-chip{
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.82);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(163, 228, 248, 0.18);
  background: rgba(10, 16, 24, 0.10);
  box-shadow: inset 0 0 0 1px rgba(245, 250, 255, 0.04);
}

#intro .feed-chip.is-active{
  border-color: rgba(163, 228, 248, 0.34);
  background: rgba(10, 16, 24, 0.14);
  box-shadow:
    0 0 18px rgba(163, 228, 248, 0.10),
    inset 0 0 0 1px rgba(245, 250, 255, 0.08);
}

#intro .feed-chip--level{
  color: rgba(163, 228, 248, 0.78);
  border-color: rgba(163, 228, 248, 0.22);
}

#intro .feed-chip--status{
  color: rgba(245, 250, 255, 0.74);
}
#intro .feed-chip--status.is-ok{
  color: rgba(163, 228, 248, 0.82);
}

/* =========================
   Feature meta (dateline / byline / id / readtime)
   ========================= */
#intro .feed-meta-row{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(163, 228, 248, 0.14);
}

#intro .feed-dateline{
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(163, 228, 248, 0.78);
  margin-bottom: 6px;
}

#intro .feed-byline{
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(245, 250, 255, 0.78);
}

#intro .feed-meta-right{
  text-align: right;
  white-space: nowrap;
  align-self: start;
}

#intro .feed-docid{
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.78);
  margin-bottom: 6px;
}

#intro .feed-checksum{
  color: rgba(163, 228, 248, 0.78);
}

#intro .feed-read{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.66);
}

/* Stamp monocromo (textura por líneas) */
#intro .feed-stamp{
  position: absolute;
  right: 10px;
  top: -6px;
  transform: rotate(-6deg);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(163, 228, 248, 0.22);
  color: rgba(163, 228, 248, 0.72);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(163, 228, 248, 0.06) 0px,
      rgba(163, 228, 248, 0.06) 2px,
      rgba(10, 16, 24, 0.00) 2px,
      rgba(10, 16, 24, 0.00) 6px
    );
  box-shadow: 0 0 22px rgba(163, 228, 248, 0.10);
  opacity: 0.95;
  pointer-events: none;
}


/* =========================
   Divider caps (puntito al final de líneas editoriales)
   ========================= */
#intro .feed-kicker-row,
#intro .feed-mini-head,
#intro .feed-meta-row{
  position: relative;
}

#intro .feed-kicker-row::after,
#intro .feed-mini-head::after,
#intro .feed-meta-row::after{
  content:"";
  position:absolute;
  right: 0;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(163, 228, 248, 0.35);
  box-shadow: 0 0 12px rgba(163, 228, 248, 0.16);
}

/* =========================
   Search pager (microficha)
   ========================= */
#intro .feed-search-meta{
  display: grid;
  gap: 6px;
}

#intro .feed-search-pager{
  display: flex;
  align-items: center;
  gap: 10px;
}

#intro .feed-page{
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.60);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(163, 228, 248, 0.14);
  background: rgba(10, 16, 24, 0.08);
}

#intro .feed-jump{
  appearance: none;
  border: 1px solid rgba(163, 228, 248, 0.18);
  background: rgba(10, 16, 24, 0.08);
  color: rgba(245, 250, 255, 0.72);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
#intro .feed-jump:hover{
  border-color: rgba(163, 228, 248, 0.30);
  box-shadow: 0 0 18px rgba(163, 228, 248, 0.10);
}

/* ==========================================================
   FIX — Chipbar: spacing + wrap + legibilidad (editorial HUD)
   Objetivo: que no se encimen PUBLIC/BULLETIN/BRIEFING/CREW
   ========================================================== */

#intro .feed-chipbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;            /* clave */
}

#intro .feed-chipgroup{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;            /* clave */
  min-width: 0;
}

#intro .feed-chipgroup--right{
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
}

#intro .feed-chip-label{
  flex: 0 0 auto;
  opacity: .85;
  margin-right: 6px;
}

/* Pills editoriales (por si algo las dejó “apretadas”) */
#intro .feed-chipbar .feed-chip{
  width: auto;
  height: auto;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}


/* ==========================================================
   FIX FINAL — META ROW (dateline/byline + docid/read)
   - Evita compresión “palabra por palabra”
   - No empuja el body hacia abajo
   - Sin reserva para stamp (ya no existe)
   ========================================================== */

#intro .feed-meta-row{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap; /* en pantallas chicas puede envolver sin romper */
}

#intro .feed-meta-left,
#intro .feed-meta-right{
  min-width: 0;
  flex: 1 1 280px; /* asegura ancho razonable para que no colapse */
}

#intro .feed-meta-right{
  text-align: right;
  padding-right: 0; /* ✅ NO reservar espacio para un sello inexistente */
}

/* Mantener “línea editorial” (no columna ultrafina) */
#intro .feed-dateline,
#intro .feed-byline,
#intro .feed-docid,
#intro .feed-read{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: permitir 2 líneas reales si hace falta */
@media (max-width: 700px){
  #intro .feed-meta-right{ text-align: left; }
  #intro .feed-dateline,
  #intro .feed-byline,
  #intro .feed-docid,
  #intro .feed-read{
    white-space: normal;
  }
}


/* ==========================================================
   FIX — Tickerbar (ACCESS LEVEL + INCOMING + STATUS a la derecha)
   - Saca el “chipbar” repetido (ya no existe en HTML)
   - Mantiene todo en una sola línea y ordenado
   ========================================================== */
#intro .feed-tickerbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;  /* respira debajo de tabs */
}

#intro .feed-ticker-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

#intro .feed-ticker-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

#intro .feed-ticker{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Eliminar sello feo (por si quedara en otra versión / cache) */
#intro .feed-stamp{
  display: none !important;
}

/* Mobile: que el ticker pueda envolver sin romper */
@media (max-width: 700px){
  #intro .feed-ticker{
    white-space: normal;
  }
}


/* ==========================================================
   INTRO — FEATURE (AION GAMES) — EDITORIAL READABILITY
   FIX: texto CORRIDO + kickers inline + menos aire vertical
   ========================================================== */

#intro .feed-feature-right{
  max-width: 100%;
}

/* LEAD */
#intro .feed-feature-right .feed-lead{
  margin: 0;
  padding: 2px 0 6px;     /* ↓ menos aire */
  line-height: 1.52;      /* ↓ sube todo */
  font-size: 13.25px;
  color: rgba(245, 250, 255, 0.88);
}

/* “AION GAMES” destacado (ahora sí azul como los kickers) */
#intro .feed-feature-right .feed-em{
  color: rgba(163, 228, 248, 0.92);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Separadores */
#intro .feed-feature-right .feed-rule{
  height: 1px;
  width: 100%;
  margin: 8px 0 9px;      /* ↓ menos aire */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(163, 228, 248, 0.24),
    transparent
  );
  opacity: 0.9;
}

/* Secciones */
#intro .feed-feature-right .feed-section{
  padding: 4px 0;         /* ↓ menos aire */
  display: block;
  margin: 0;
}

/* kicker inline */
#intro .feed-feature-right .feed-h{
  display: inline;
  margin: 0;
  padding: 0;

  font-size: 11.75px;      /* apenas más compacto */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(163, 228, 248, 0.92);
  font-weight: 800;

  white-space: normal;
  line-height: 1.52;       /* igual al texto */
}

/* texto corrido */
#intro .feed-feature-right .feed-p{
  display: inline;
  margin: 0;
  padding: 0;

  line-height: 1.52;       /* ↓ sube todo */
  font-size: 13.1px;
  color: rgba(245, 250, 255, 0.82);
}

/* gap corto entre kicker y cuerpo (sin “agujero”) */
#intro .feed-feature-right .feed-h::after{
  content: " ";
  display: inline;
  margin-right: 6px;       /* ↓ antes era demasiado */
}

/* firma */
#intro .feed-feature-right .feed-sign{
  margin: 8px 0 0;         /* ↓ sube todo */
  padding-top: 4px;
  text-align: right;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: rgba(245, 250, 255, 0.78);
  opacity: 0.95;
}


/* ==========================================
   FEED MINI — MEDIA IMG (DEVLOG)
   - Entra sin deformar (cover)
   - Mantiene el recuadro existente
   ========================================== */

.feed-mini-media--devlog{
  position: relative;
  overflow: hidden; /* por si el recuadro no lo tenía */
}

.feed-mini-media--devlog .feed-mini-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* ✅ sin deformar */
  object-position: 20% 20%; /* si querés subir un toque: 50% 40% */
  opacity: 0.98;
}


#intro .feed-wide{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#intro .feed-wide .feed-btn{
  margin-top: auto;
}

/* ==========================================================
   AION FEED NEWS — RESPONSIVE DENSITY SYSTEM (NEWS)
   - NO toca tamaño del display (.aion-display / global display system)
   - Ajusta SOLO contenido interno para legibilidad + scroll
   - Estrategia: buckets por viewport (tablet/mobile/low-height)
   ========================================================== */

/* ---------- Base safety (no cambia look macro) ---------- */

/* Evita “explosiones” de texto en i18n (JA/EN) dentro del feed */
#intro .intro-feed,
#intro .intro-card{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Scroll interno: comportamiento consistente en móviles */
#intro .intro-feed-scroll{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Tabs: por defecto NO wrap (cuando no entra, que scrollee) */
#intro .intro-feed-tabs{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
}
#intro .intro-feed-tabs::-webkit-scrollbar{
  height: 0; /* WebKit */
}
#intro .feed-tab{
  white-space: nowrap;
}

/* Meta: no empujar la cabecera con wraps raros */
#intro .feed-top-left,
#intro .feed-top-center{
  min-width: 0;
}
#intro .feed-top-aux,
#intro .feed-top-right{
  min-width: 0;
}
#intro .feed-top-aux .feed-read{
  white-space: nowrap;
}

/* ==========================================================
   BUCKET 1 — Tablet Landscape (1024×768)
   ========================================================== */
@media (max-width: 1100px) and (min-width: 900px) and (orientation: landscape){
  #intro{
    --feed-text: 12px;
    --feed-lh: 1.55;
    --feed-12: 10px;
  }

  #intro .intro-news-inner{
    padding: 0.50rem 0.78rem 0.50rem;
  }

  #intro .intro-feed-top{
    padding: 9px 10px 7px;
    gap: 12px;
  }

  #intro .feed-title{ font-size: 18px; }
  #intro .feed-subtitle{ font-size: 10px; margin-top: 4px; }

  /* Feature: columna izquierda un toque más angosta */
  #intro .feed-feature-body{
    grid-template-columns: 210px 1fr;
    gap: 14px;
  }

  #intro .intro-feed-scroll{
    padding: 10px;
    padding-right: 9px;
  }

  #intro .feed-mini-media--tall{ height: 96px; }
}

/* ==========================================================
   BUCKET 2 — Tablet Portrait (768×1024)
   ========================================================== */
@media (max-width: 900px) and (min-width: 700px) and (orientation: portrait){
  #intro{
    --feed-text: 12px;
    --feed-lh: 1.55;
    --feed-12: 10px;
  }

  #intro .intro-news-inner{
    padding: 0.48rem 0.70rem 0.48rem;
  }

  #intro .intro-feed-top{
    padding: 8px 10px 6px;
    gap: 10px;
  }

  /* Ahorra alto sin perder “identidad” */
  #intro .feed-title{ font-size: 18px; }
  #intro .feed-subtitle{ font-size: 10px; margin-top: 4px; }

  /* En tablet portrait, el docid es “nice to have”: lo cortamos */
  #intro .feed-top-aux .feed-docid{ display:none; }

  /* Tabs: más compactas */
  #intro .intro-feed-tabs{
    padding: 8px 10px 10px;
    gap: 8px;
    justify-content: flex-start;
  }
  #intro .feed-tab{
    padding: 7px 12px;
    font-size: 10px;
    border-radius: 10px;
  }

  /* Scroll: menos padding => más contenido visible */
  #intro .intro-feed-scroll{
    padding: 10px;
    padding-right: 8px;
  }

  /* Feature: logo/media más bajito para no comerse la pantalla */
  #intro .feed-logo-box{
    aspect-ratio: 16 / 10;
    max-height: 260px;
  }

  /* Mini medias un toque más bajas */
  #intro .feed-mini-media{ height: 78px; }
  #intro .feed-mini-media--tall{ height: 96px; }

  /* Botones un toque más compactos */
  #intro .feed-btn{
    padding: 9px 11px;
    font-size: 10px;
  }
}

/* ==========================================================
   BUCKET 3 — Mobile Portrait “grande” (390×844)
   (solo phones; NO pisa tablet portrait)
   ✅ CABECERA MINIMAL: solo título + contenido scrolleable
   ========================================================== */
@media (max-width: 699px) and (min-width: 381px) and (orientation: portrait){
  #intro{
    --feed-text: 11.5px;
    --feed-lh: 1.50;
    --feed-12: 9px;
  }

  #intro .intro-news-inner{
    padding: 0.44rem 0.56rem 0.44rem;
  }

  /* --- CABECERA: dejar SOLO el título --- */
  #intro .feed-top-left,
  #intro .feed-top-right,
  #intro .feed-top-aux{
    display: none !important;
  }

  #intro .intro-feed-top{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 6px 8px 6px !important;
  }

  #intro .feed-top-center{
    width: 100% !important;
    text-align: center !important;
  }

  #intro .feed-title{ font-size: 15px !important; }
  #intro .feed-subtitle{ display:none !important; }

  /* Tabs fuera para ganar altura */
  #intro .intro-feed-tabs{
    display: none !important;
  }

  /* Scroll: más área útil */
  #intro .intro-feed-scroll{
    padding: 8px;
    padding-right: 7px;
  }

  /* Cards: menos aire */
  #intro .feed-feature{ padding: 11px; margin-bottom: 10px; }
  #intro .feed-mini{ padding: 12px; }
  #intro .feed-wide{ padding: 12px; }

  /* Media principal: bajita y editorial */
  #intro .feed-logo-box{
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }

  /* Mini medias más bajas */
  #intro .feed-mini-media{ height: 72px; }
  #intro .feed-mini-media--tall{ height: 84px; }

  /* Botones más compactos */
  #intro .feed-btn{
    padding: 9px 10px;
    font-size: 10px;
  }
}

/* ==========================================================
   BUCKET 4 — Mobile Portrait “chico” (360×640)
   ✅ CABECERA MINIMAL: solo título + contenido scrolleable
   ========================================================== */
@media (max-width: 380px) and (orientation: portrait){
  #intro{
    --feed-text: 11px;
    --feed-lh: 1.48;
    --feed-12: 8px;
  }

  #intro .intro-news-inner{
    padding: 0.40rem 0.46rem 0.40rem;
  }

  /* --- CABECERA: dejar SOLO el título --- */
  #intro .feed-top-left,
  #intro .feed-top-right,
  #intro .feed-top-aux{
    display: none !important;
  }

  #intro .intro-feed-top{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 6px 7px 6px !important;
  }

  #intro .feed-top-center{
    width: 100% !important;
    text-align: center !important;
  }

  #intro .feed-title{ font-size: 14.5px !important; }
  #intro .feed-subtitle{ display:none !important; }

  /* Tabs fuera para ganar altura */
  #intro .intro-feed-tabs{
    display: none !important;
  }

  /* Scroll: maximizar área útil */
  #intro .intro-feed-scroll{
    padding: 7px;
    padding-right: 6px;
  }

  /* Media principal: limitar alto (si no, se come todo) */
  #intro .feed-logo-box{
    aspect-ratio: 16 / 9;
    max-height: 190px;
  }

  #intro .feed-mini-media{ height: 66px; }
  #intro .feed-mini-media--tall{ height: 78px; }
}

/* ==========================================================
   BUCKET 5 — Landscape baja altura (844×390 / 640×360)
   ✅ CABECERA MINIMAL: solo título + contenido scrolleable
   ========================================================== */
@media (max-height: 420px) and (orientation: landscape){
  #intro{
    --feed-text: 11px;
    --feed-lh: 1.45;
    --feed-12: 8px;
  }

  #intro .intro-news-inner{
    padding: 0.34rem 0.48rem 0.34rem;
  }

  /* --- CABECERA: dejar SOLO el título --- */
  #intro .feed-top-left,
  #intro .feed-top-right,
  #intro .feed-top-aux{
    display: none !important;
  }

  #intro .intro-feed-top{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 6px 8px 5px !important;
  }

  #intro .feed-top-center{
    width: 100% !important;
    text-align: center !important;
  }

  #intro .feed-title{ font-size: 14px !important; }
  #intro .feed-subtitle{ display:none !important; }

  /* Tabs fuera para ganar altura */
  #intro .intro-feed-tabs{
    display: none !important;
  }

  #intro .intro-feed-scroll{
    padding: 7px;
    padding-right: 6px;
  }

  /* Media: NO puede comerse altura */
  #intro .feed-logo-box{
    aspect-ratio: 21 / 9;
    max-height: 150px;
  }

  #intro .feed-feature{ padding: 10px; margin-bottom: 9px; }
  #intro .feed-mini{ padding: 10px; }
  #intro .feed-wide{ padding: 10px; }

  #intro .feed-mini-media{ height: 62px; }
  #intro .feed-mini-media--tall{ height: 70px; }
}

/* Extra agresivo: 640×360 */
@media (max-height: 380px) and (orientation: landscape){
  #intro .feed-title{ font-size: 13.5px !important; }
  #intro .feed-logo-box{ max-height: 132px; }
}