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

   Aurora es el unico de los cuatro cuyo hero NO invierte la
   logica del comun: es claro, con texto oscuro. Por eso su firma
   es la mas chica de las tres — casi todo le llega bien con solo
   declarar los tokens.

   Lo que si es exclusivo: la INICIAL GIGANTE de fondo y la franja
   con degrade violeta→coral. La inicial sale de un atributo
   `data-inicial` que pone js/apuntes/layouts/aurora.js, porque el
   marcado comun no lo trae y no hay forma de leer la primera
   letra del titulo desde CSS.
   ============================================================ */

/* ═══════════════════════════════════════════════════
   HERO — arena, con la inicial de fondo
═══════════════════════════════════════════════════ */
.hero {
  padding: 60px 40px 52px;
  background: var(--bg);
  border-bottom: none;
}

/* La inicial gigante. Sin data-inicial (JS no cargado) el
   content queda vacio y no se dibuja nada: degrada sola. */
.hero::before {
  content: attr(data-inicial);
  position: absolute;
  inset: -0.15em -0.02em auto auto;
  font-family: var(--font-heading);
  font-size: clamp(14rem, 30vw, 22rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(var(--accent-rgb), .06);
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
  background: none;
  display: block;
}

.hero-shapes { display: none; }

/* La franja de abajo, con el degrade que es LA firma de Aurora. */
.hero-line {
  height: 4px;
  background: var(--grad);
}

.hero-badge,
.hero h1,
.hero p,
.hero-meta {
  position: relative; z-index: 1;
  max-width: 900px;
  margin-left: auto; margin-right: auto;
}

/* El badge de Aurora es texto pelado, sin pastilla ni punto. */
.hero-badge {
  background: none;
  border: none;
  backdrop-filter: none;
  padding: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: .1em;
  margin-bottom: 22px;
}
.hero-badge::before { display: none; }

/* Fraunces en 900, y en --text y no en --accent-2: el titulo del
   monolito era el tono tierra oscuro, no violeta. El acento entra
   en el badge y en la franja, no en el h1. */
.hero h1 {
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.05;
  font-optical-sizing: auto;
  text-shadow: none;
}

.hero p { color: var(--gray); }

.reading-time-badge {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .25);
}

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
/* Igual que en Atlas: navbar.css declara el borde de abajo con los
   literales de Premium (crema en claro, navy en oscuro) y Aurora solo
   cambiaba el fondo, asi que se quedaba con el borde ajeno. */
nav {
  background: rgba(250,249,247,.88);
  border-bottom-color: var(--border);
}
body.dark-mode nav {
  background: rgba(21,15,30,.88);
  border-bottom-color: var(--border);
}

/* En vez del degrade dorado de Premium, el violeta→coral. */
nav::after {
  background: var(--grad);
  opacity: .6;
}

.nav-buttons { background: rgba(250,249,247,.96); }
body.dark-mode .nav-buttons { background: rgba(21,15,30,.96); }
.nav-btn {
  background: transparent;
  color: var(--gray);
  border-color: var(--border);
}

/* El pie: el componente comun lo pinta con --accent-2, que acá
   seria el acento a pantalla completa. --footer-bg lo devuelve a
   su neutro oscuro; el valor esta en tokens.css. */
footer { background: var(--footer-bg); }

/* Blanco sobre --estado-ok: sobre el verde claro del modo oscuro
   no se lee. */
html.dark-mode, body.dark-mode { --on-estado: var(--on-accent); }

/* ═══════════════════════════════════════════════════
   MOBILE
   Mismo motivo que en Neo y Atlas: la firma pisa el ajuste de
   base/05-responsive.css porque se carga despues.
   La inicial gigante tambien se achica: al 30vw de un telefono
   tapaba medio titulo.
═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero { padding: 52px 20px 44px; }
  .hero::before { font-size: clamp(8rem, 34vw, 12rem); }
}