/* ============================================================
   Firma visual · layout NEO
   ------------------------------------------------------------
   Capa: layout · se carga ULTIMA, para poder ganarle a lo comun.

   Solo lo EXCLUSIVO de Neo. Todo lo demas —las 13 hojas de
   componentes— le llega tal cual y se resuelve con los tokens de
   tokens.css. Si algo de aca se pudiera expresar como un token,
   iria alla y no en este archivo.

   POR QUE ESTE ARCHIVO EXISTE (y por que casi todo el es el hero)

   El hero comun esta pintado con una idea: fondo de acento claro
   (el gradiente dorado de Premium) con el texto encima en el
   acento secundario oscuro. Neo hace lo contrario: fondo neutro
   negro, con el acento apareciendo de a poco —un borde, una
   linea, un badge. No es que el componente este mal; es que esa
   inversion no se puede expresar cambiando valores, hay que
   cambiar QUE propiedad recibe cada color.

   Es exactamente lo que la Fase 5 tenia que sacar a la luz. Queda
   anotado en ESTADO.md: cuando Atlas y Aurora pasen por acá se va
   a ver si el hero comun conviene repensarlo o si alcanza con que
   cada layout traiga su firma.
   ============================================================ */

/* ═══════════════════════════════════════════════════
   HERO — negro con grilla de puntos lima
═══════════════════════════════════════════════════ */
.hero {
  padding: 72px 24px 64px;
  /* El halo va al 7 % y no en --accent-glow (25 %): este no es un
     halo alrededor de algo, es una neblina que ocupa medio hero.
     Al 25 % el lima se come el negro y el titulo pierde contraste. */
  background:
    radial-gradient(ellipse at 50% 60%, rgba(var(--accent-rgb), .07) 0%, transparent 65%),
    var(--hero-dots) 0 0 / 26px 26px,
    var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Las dos capas decorativas de Premium se apagan: los halos
   blancos y los circulos flotantes son de un hero luminoso, y
   sobre negro se leen como suciedad. */
.hero::before { display: none; }
.hero-shapes  { display: none; }

/* La franja gruesa de Premium se vuelve un hilo. Neo subraya, no
   enmarca. */
.hero-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Titulo en el color de texto, no en el acento: un h1 de 4 rem en
   lima puro sobre negro vibra y se vuelve dificil de leer. El lima
   entra solo en <span class="accent">, que es como el monolito ya
   lo resolvia. */
.hero h1 {
  font-weight: 700;
  color: var(--text);
  text-shadow: none;
}
.hero h1 .accent { color: var(--accent); }

/* --gray y no --gray-light en las tres reglas de abajo: medido
   sobre el hero claro, --gray-light (#777) da 4,07:1 y AA pide
   4,5. Es el mismo criterio que el contrato ya fijo en §6 —
   --gray-light es para epigrafes y ejes, no para texto. */
.hero p { color: var(--gray); }

/* Badge y tiempo de lectura: fondo apenas tenido y borde de
   acento, en vez del relleno solido del hero claro. */
.hero-badge {
  background: var(--accent-dim);
  /* --accent-2 y no --accent: el fondo del badge es casi
     transparente, asi que este texto de .68rem cae sobre el hero.
     En claro el lima puro daba 3,04:1; el lima oscurecido de
     --accent-2 da 5,80:1. En oscuro los dos son el mismo color. */
  color: var(--accent-2);
  border-color: var(--border-2);
}
.hero-badge::before { background: var(--accent); opacity: 1; }

.reading-time-badge {
  background: var(--bg2);
  color: var(--gray);
  border-color: var(--border);
}

/* ═══════════════════════════════════════════════════
   NAVBAR — sin el vidrio crema de Premium
═══════════════════════════════════════════════════ */
nav {
  background: rgba(13,13,13,.92);
  border-bottom-color: var(--border);
}
/* El :root de Neo es el modo CLARO (ver tokens.css), asi que el
   navbar claro necesita su propia regla y la oscura vive en
   .dark-mode — al reves de como se lee a primera vista. */
:root:not(.dark-mode) nav,
body:not(.dark-mode) nav {
  background: rgba(255,255,255,.92);
}
/* El `border-bottom-color` va TAMBIEN aca y no solo en el `nav` de
   arriba: navbar.css trae `body.dark-mode nav { border-bottom-color:
   rgba(46,46,80,.6) }` —el navy de Premium— y esa regla tiene mas
   especificidad (0,1,2) que un `nav` pelado (0,0,1). Sin esta linea,
   el navbar oscuro de Neo se quedaba con el borde navy de Premium. */
body.dark-mode nav {
  background: rgba(13,13,13,.92);
  border-bottom-color: var(--border);
}

/* La linea de acento bajo la navbar: en Premium es un degrade
   ancho y dorado; en Neo, un hilo lima que solo se nota en el
   centro. */
nav::after {
  background: linear-gradient(90deg, transparent 0%, var(--border-2) 30%, var(--border-2) 70%, transparent 100%);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   NAV BOTONES — la barra sticky sigue al fondo de Neo
═══════════════════════════════════════════════════ */
.nav-buttons {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.dark-mode .nav-buttons { background: rgba(13,13,13,.96); }

/* Los botones del comun traen blancos fijos, pensados sobre el hero
   dorado de Premium. Sobre el fondo de Neo se ven lavados; el
   monolito usaba el borde neutro y el gris atenuado.
   --gray y no --gray-light: este ultimo daba 4,48:1 sobre la barra
   clara, dos centesimas por debajo de AA. */
.nav-btn {
  background: transparent;
  color: var(--gray);
  border-color: var(--border);
}

/* Pie de pagina: el negro de Neo es mas profundo que su --bg. */
:root, html.dark-mode, body.dark-mode { --footer-bg: #0a0a0a; }

/* Blanco sobre --estado-ok: sobre el lima claro de Neo no se lee. */
html.dark-mode, body.dark-mode { --on-estado: var(--on-accent); }

/* ═══════════════════════════════════════════════════
   MOBILE
   ---------------------------------------------------
   base/05-responsive.css ya baja el padding del hero a
   `60px 20px 56px` en ≤600 px, pero esta hoja se carga DESPUES
   —es la firma, va ultima— y su `.hero { padding }` gana aunque
   la del nucleo este dentro de un @media: un media query no suma
   especificidad. Sin este bloque, el hero se queda con el padding
   de escritorio en un telefono.
═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero { padding: 60px 20px 56px; }
}