/* ==========================================================================
   Jundullah — hoja de estilos
   ==========================================================================

   Hereda el sistema de core404: negro, blanco y gris, tipografía grande y sin
   ningún acento de color. Allí el color entraba por las capturas de producto;
   aquí no entra en absoluto, y esa austeridad es la que hace que lo único que
   destaque sea la shahada del banner.

   DOS COSAS QUE NO ESTABAN EN core404 Y AQUÍ MANDAN:

   1. Árabe de verdad. Archivo no tiene alfabeto árabe, así que se cargan dos
      familias más: Amiri (naskh, para la shahada y los titulares árabes) y Noto
      Sans Arabic (para leer párrafos). Sin esto el navegador cae en la fuente
      del sistema y la shahada, que es lo primero que se ve, sale fea.

   2. Todo en propiedades LÓGICAS —`margin-inline-start`, `padding-inline`,
      `text-align: start`— y no en `left`/`right`. Así la versión árabe se
      refleja sola con `dir="rtl"` y no hay una segunda hoja que mantener. Solo
      queda un bloque `[dir="rtl"]` al final para lo poco que no se refleja.
   ========================================================================== */

/* Paleta clara: fondo blanco y letra negra.
   Los grises están elegidos por contraste medido, no a ojo. Sobre blanco:
   --fg 19.7:1 · --muted 7.4:1 · --faint 5.4:1. Y sobre las tarjetas
   (--surface), que es donde más apurado va: --faint sigue en 4.97:1, por
   encima del 4.5:1 que pide el texto pequeño. */
:root {
  --ink: #fff;
  --surface: #f6f6f4;
  --line: #e4e4e0;
  --line-strong: #cfcfc9;
  --fg: #0b0b0a;
  --muted: #56564f;
  --faint: #6b6b63;

  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --sans-ar: 'Noto Sans Arabic', 'Archivo', system-ui, sans-serif;
  --naskh: 'Amiri', 'Scheherazade New', 'Times New Roman', serif;
  /* Para la shahada del banner. Aref Ruqaa es caligráfica de verdad, con el
     trazo grueso y las diagonales del ruqaa; Amiri es naskh de libro y a tamaño
     grande se ve plana. */
  --caligrafia: 'Aref Ruqaa', 'Amiri', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --page: 1180px;
  --gap: clamp(4.5rem, 9vw, 9rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* En árabe cambia la familia entera, no solo los titulares: un párrafo largo en
   naskh cansa, y Noto Sans Arabic tiene el mismo aire neutro que Archivo. */
html[lang='ar'] body {
  font-family: var(--sans-ar);
  line-height: 1.8;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* El árabe no tiene mayúsculas ni le sienta bien el espaciado de letras: en
   árabe separar las letras las DESUNE, que es un error de composición. */
html[lang='ar'] .mono {
  font-family: var(--sans-ar);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}
.skip:focus {
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  z-index: 100;
  background: var(--fg);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  text-decoration: none;
}

/* --- Barra superior ------------------------------------------------------ */

.bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  /* Envuelve siempre, no solo en pantallas estrechas: la shahada ocupa la
     primera fila entera y la marca y el menú van debajo. */
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.bar.is-scrolled {
  border-block-end-color: var(--line);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-ar {
  font-family: var(--naskh);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--muted);
}

.bar-nav {
  display: flex;
  gap: 1.6rem;
  margin-inline-start: auto;
  font-size: 0.9rem;
}

.bar-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bar-nav a:hover,
.bar-nav a[aria-current='page'] {
  color: var(--fg);
}

/* El cambio de idioma es un enlace de verdad, no un botón con JavaScript: así
   funciona sin scripts y se puede compartir la dirección en el idioma que sea. */
.lang {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.lang:hover {
  border-color: var(--fg);
  color: var(--fg);
}

/* El árabe a 0.72rem no se lee: las letras llevan puntos y vocales que a ese
   tamaño se convierten en manchas. */
.lang[lang='ar'],
html[lang='ar'] .lang {
  font-family: var(--sans-ar);
  font-size: 0.85rem;
  letter-spacing: 0;
}

html[lang='ar'] .lang[lang='es'] {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn-solid {
  background: var(--fg);
  color: var(--ink);
}
.btn-solid:hover {
  background: #000;
}

.btn-line {
  border: 1px solid var(--line-strong);
  color: var(--fg);
}
.btn-line:hover {
  border-color: var(--fg);
}

.btn-lg {
  padding: 0.95rem 2rem;
  font-size: 1rem;
}

/* --- El banner -----------------------------------------------------------
   Lo primero que se ve y lo que define la página: la shahada centrada arriba,
   en blanco, y debajo el nombre alineado al margen. La shahada va CENTRADA y el
   nombre NO, a propósito: si los dos estuvieran centrados el nombre competiría
   con ella, y aquí no compite nada. */

/* El aire de arriba era generoso porque encima venía la shahada a tamaño
   grande. Ahora la shahada está en la barra y el nombre es lo primero, así que
   sobra la mitad. */
.banner {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

/* La shahada vive en la BARRA, centrada, y aparece en todas las páginas: es lo
   único que se repite de arriba abajo del sitio.

   Va en posición absoluta y no como un elemento más de la fila porque tiene que
   quedar centrada respecto a LA PÁGINA, no repartida entre la marca y el menú:
   con `flex` el centro se desplaza según lo largo que sea el menú de cada
   idioma, y la shahada bailaría de una página a otra.

   `pointer-events: none` para que no tape los enlaces que tiene detrás. */
/* La shahada tiene FILA PROPIA, arriba del todo y a lo ancho.
   Antes iba flotando en el hueco libre entre la marca y el menú, y eso la
   condenaba a ser pequeña: cuanto más crecía, más cerca estaba de pisarlos —en
   árabe, donde el menú es más largo, ya rozaba—. Con fila propia no compite con
   nada y puede ocupar lo que tiene que ocupar. */
.bar-shahada {
  order: -1;
  width: 100%;
  margin: 0;
  font-family: var(--caligrafia);
  font-size: clamp(0.85rem, 1.55vw, 1.4rem);
  font-weight: 700;
  line-height: 1.9;
  white-space: nowrap;
  text-align: center;
  color: var(--fg);
  pointer-events: none;
}

/* Cuando existe `assets/shahada.png`, `script.js` cambia el texto por la
   caligrafía y marca el elemento con esta clase. */
.bar-shahada.con-imagen {
  line-height: 0;
}

/*
 * La caligrafía es un SVG, o sea curvas y no píxeles, y por eso ya no hace
 * falta nada de lo que hacía falta antes:
 *
 *   · no se ve borrosa a ningún tamaño, ni en pantallas retina, porque no tiene
 *     resolución que agotar — el archivo de origen solo medía 250 px de ancho y
 *     a tamaño de estandarte se estiraba al doble
 *   · no lleva `mix-blend-mode: multiply`: el fondo es transparente de verdad,
 *     no un blanco parecido al de la página que había que fundir
 *   · el trazo es negro; si un día se quiere en otro color, se cambia por SVG
 *     incrustado y el `fill="currentColor"` que ya trae obedece a `color`
 *
 * Ocupa casi todo el ancho de la página, que es lo que se pidió: la shahada es
 * lo primero y lo más grande de la web. Se mide por ANCHO y no por alto: fijando
 * el alto, la imagen ocupaba lo que le daba la gana de ancho según su
 * proporción. `width` manda y `height: auto` obedece.
 */
.shahada-img {
  display: block;
  width: min(90%, 30rem);
  height: auto;
  margin-inline: auto;
  transition: width 0.25s ease;
}

/* Al bajar, encoge. La barra es pegajosa: si se quedara a tamaño de cartel se
   comería un tercio de la pantalla durante toda la lectura. */
.bar.is-scrolled .shahada-img {
  width: min(35%, 6.5rem);
}

/* En un móvil la barra pegajosa ya lleva la marca y el menú en dos filas. Si
   además se quedara el estandarte, tres filas fijas se comerían media pantalla
   mientras se lee. Al bajar desaparece; sigue estando arriba de cada página. */
@media (max-width: 860px) {
  .bar.is-scrolled .bar-shahada {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shahada-img {
    transition: none;
  }
}

/* El nombre en grande ya no está en la portada: la shahada lo dice arriba y la
   barra lleva «Jundullah» en las doce páginas. Se borran con él las reglas
   `.wordmark` y `.wordmark-ar`, que no las usa nadie más.
 *
 * Esta frase pasa a ser lo primero que se lee, así que ya no lleva el margen que
 * la separaba del título y sube un punto de tamaño: es la que ahora tiene que
 * explicar de qué va la escuela. */
.banner-lede {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--muted);
}

.banner-lede strong {
  color: var(--fg);
  font-weight: 600;
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block-start: 2.5rem;
}

/* --- Cabecera de página interior ----------------------------------------- */

.page-head {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

html[lang='ar'] .eyebrow {
  font-family: var(--sans-ar);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
}

.page-title {
  margin: 0;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* El naskh tiene trazos que suben y bajan mucho más que una latina. Con la
   interlínea de los titulares latinos (1.05) las dos líneas se montaban una
   encima de otra y el titular se volvía ilegible. */
html[lang='ar'] .page-title,
html[lang='ar'] .wordmark {
  font-family: var(--naskh);
  letter-spacing: 0;
  line-height: 1.6;
}

html[lang='ar'] .section-title,
html[lang='ar'] .cta-title,
html[lang='ar'] .card-title {
  line-height: 1.55;
}

.page-lede {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
}

/* --- Secciones ----------------------------------------------------------- */

.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) var(--gap);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 2.5rem;
}

.section-title {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-variation-settings: 'wdth' 108;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

html[lang='ar'] .section-title {
  font-family: var(--naskh);
  letter-spacing: 0;
}

.section-lede {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: var(--muted);
}

/* --- Materias -------------------------------------------------------------
   Filas y no tarjetas: son cinco cosas con nombre corto y una frase, y una fila
   deja leer las cinco de un vistazo sin que ninguna parezca más importante. */

.materias {
  margin: 0;
  padding: 0;
  list-style: none;
}

.materia {
  display: grid;
  grid-template-columns: minmax(140px, 20%) 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1.4rem 0;
  border-block-start: 1px solid var(--line-strong);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.materia:last-child {
  border-block-end: 1px solid var(--line-strong);
}

.materia:hover {
  opacity: 0.65;
}

.materia h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-variation-settings: 'wdth' 106;
  font-weight: 700;
  letter-spacing: -0.02em;
}

html[lang='ar'] .materia h3 {
  font-family: var(--naskh);
  letter-spacing: 0;
}

.materia p {
  margin: 0;
  color: var(--muted);
}

.materia-n {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .materia {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .materia-n {
    display: none;
  }
}

/* --- Rejillas ------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

a.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.card-title {
  margin: 0.75rem 0 0;
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 105;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

html[lang='ar'] .card-title {
  font-family: var(--naskh);
  letter-spacing: 0;
}

.card-text {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.card-foot {
  margin-block-start: auto;
  padding-block-start: 1.25rem;
  color: var(--faint);
}

/* --- Etiquetas ----------------------------------------------------------- */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.tag {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

html[lang='ar'] .tag {
  font-family: var(--sans-ar);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Filtros -------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-block-end: 2.5rem;
}

.filtro {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.filtro:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.filtro[aria-pressed='true'] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--ink);
}

/* --- Lecciones ------------------------------------------------------------
   Numeradas y en una columna: un temario se lee en orden, y el número dice
   cuánto queda. */

.lecciones {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: leccion;
}

.leccion {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-block-start: 1px solid var(--line);
}

.leccion:last-child {
  border-block-end: 1px solid var(--line);
}

.leccion::before {
  counter-increment: leccion;
  content: counter(leccion, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--faint);
}

.leccion h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
}

.leccion-min {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .leccion {
    grid-template-columns: 2rem 1fr;
  }
  .leccion-min {
    grid-column: 2;
  }
}

/* --- Vídeo ----------------------------------------------------------------
   Mientras no haya identificador de YouTube, el hueco se enseña vacío y dice
   que está pendiente. Enseñar un vídeo que no es sería peor que no enseñar
   ninguno. */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ocupa el hueco entero: un párrafo suelto solo mide lo que mide su texto, y
   centrarlo dentro de sí mismo no lo mueve del borde de arriba. */
.video-pendiente {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  text-align: center;
  padding: 1rem;
}

.card .video {
  margin-block-end: 0.25rem;
  border-radius: 10px;
}

/* --- Cierre y pie -------------------------------------------------------- */

.cta {
  text-align: center;
}

.cta-title {
  margin: 0;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

html[lang='ar'] .cta-title {
  font-family: var(--naskh);
  letter-spacing: 0;
}

.cta-lede {
  max-width: 34rem;
  margin: 1.25rem auto 2.25rem;
  color: var(--muted);
}

.foot {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 0;
  border-block-start: 1px solid var(--line);
  overflow: hidden;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.foot-copy {
  color: var(--faint);
}

/* El nombre a ancho de página, apoyado en el borde de abajo. Va en SVG con
   `textLength` porque así ocupa exactamente el ancho en cualquier pantalla.
   En árabe también se pone el nombre latino: `lengthAdjust` estira los glifos, y
   estirar árabe rompe las ligaduras y deja el nombre ilegible. */
.foot-mark {
  display: block;
  width: 100%;
  margin: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2.5vw, 1.75rem);
}

.foot-mark text {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: 250px;
  fill: var(--fg);
}

/* --- Adaptación ---------------------------------------------------------- */

/* Por debajo de este ancho ya no queda hueco libre entre la marca y el menú —el
   la shahada centrada se les montaría encima. Deja de estar absoluta y pasa a
   ser su propia fila, arriba del todo. */
@media (max-width: 860px) {
  .bar {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
  .bar-nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    gap: 1.1rem;
    font-size: 0.85rem;
    overflow-x: auto;
    /* Sin esto, en un móvil estrecho la fila de secciones se corta en seco y no
       hay forma de llegar a la última. */
    scrollbar-width: none;
  }
  .bar-nav::-webkit-scrollbar {
    display: none;
  }
  .lang {
    margin-inline-start: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Lo poco que no se refleja solo -------------------------------------- */

[dir='rtl'] .leccion::before {
  /* Los números occidentales se quedan como están; lo que cambia es de qué lado
     del texto caen, y de eso ya se ocupa la rejilla. */
  direction: ltr;
}

[dir='rtl'] .flecha {
  display: inline-block;
  transform: scaleX(-1);
}