/* =========================================================================
   ALADDÍN · B612 — sistema visual compartido
   Paleta: arena/pergamino de Agrabah de día, brasas de lámpara de noche.
   Tipografía: Amiri (display, caligrafía árabe latinizada) + Vazirmatn
   (texto, geométrica de origen árabe-latino, muy legible en pantalla).
   ========================================================================= */

:root {
  color-scheme: light;

  --ink:          #241a10;
  --ink-soft:     #6b5738;
  --ink-faint:    #9c8963;

  --bg:           #f1e4c6;
  --surface:      #faf3e1;
  --surface-2:    #ecdbb3;
  --border:       rgba(36,26,16,0.14);
  --border-strong:rgba(36,26,16,0.28);

  --brass:        #ad7414;
  --brass-ink:    #40290a;
  --brass-soft:   #ecdaac;

  --teal:         #0d5955;
  --teal-soft:    #d7e9e6;

  --terracotta:      #ab4623;
  --terracotta-soft: #f4dccb;

  --violet:      #7a3b78;
  --violet-soft: #ecd9ea;

  --num-ink: var(--ink);

  --shadow: 0 1px 2px rgba(36,26,16,0.06), 0 6px 20px -8px rgba(36,26,16,0.20);

  /* Manto sobre fotos de fondo (.page-bg/.hero-bg): en claro es un lavado
     CLARO (aclara la foto) para que el texto oscuro siga leyéndose; en
     oscuro es un lavado oscuro para el texto claro. Un rgba(0,0,0,x) fijo
     para ambos modos ensuciaba la paleta clara (parchment) con un gris
     sucio en vez de mantenerla cálida. */
  --photo-wash: rgba(255,255,255,0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:          #f3e7c9;
    --ink-soft:     #c7b088;
    --ink-faint:    #8d7a58;

    --bg:           #1b140b;
    --surface:      #241b11;
    --surface-2:    #2f2415;
    --border:       rgba(243,231,201,0.12);
    --border-strong:rgba(243,231,201,0.22);

    --brass:        #dda43e;
    --brass-ink:    #2c1d09;
    --brass-soft:   #3a2b12;

    --teal:         #4bb6ab;
    --teal-soft:    #16302c;

    --terracotta:      #e2794e;
    --terracotta-soft: #3a2115;

    --violet:      #c77ac4;
    --violet-soft: #3a1f38;

    --num-ink: #ffffff;

    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -10px rgba(0,0,0,0.55);
    --photo-wash: rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:          #f3e7c9;
  --ink-soft:     #c7b088;
  --ink-faint:    #8d7a58;
  --bg:           #1b140b;
  --surface:      #241b11;
  --surface-2:    #2f2415;
  --border:       rgba(243,231,201,0.12);
  --border-strong:rgba(243,231,201,0.22);
  --brass:        #dda43e;
  --brass-ink:    #2c1d09;
  --brass-soft:   #3a2b12;
  --teal:         #4bb6ab;
  --teal-soft:    #16302c;
  --terracotta:      #e2794e;
  --terracotta-soft: #3a2115;
  --violet:      #c77ac4;
  --violet-soft: #3a1f38;
  --num-ink: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -10px rgba(0,0,0,0.55);
  --photo-wash: rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  /* Crea un stacking context propio (sin afectar el containing block de los
     descendientes con position:absolute, a diferencia de position:relative)
     para que .page-bg pueda usar z-index:-1 y quedar siempre debajo de TODO
     el contenido de la página, sea o no "position"-ado. Ver nota junto a
     .page-bg más abajo. */
  isolation: isolate;
}

:root {
  --font-display: 'Amiri', Georgia, 'Times New Roman', serif;
  --font-body: 'Vazirmatn', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }

a { color: inherit; }

.shell { max-width: 760px; margin: 0 auto; padding: 26px 18px 64px; }

.crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft); text-decoration: none;
  margin-bottom: 18px; width: fit-content;
}
.crumb:hover { color: var(--brass); }
.crumb svg { width: 14px; height: 14px; }

.masthead { text-align: center; padding: 6px 0 8px; }
.masthead .brand {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--brass); margin-bottom: 6px;
}
.masthead h1 {
  font-size: clamp(28px, 6vw, 38px); font-weight: 700; color: var(--ink);
}
.masthead p.sub { margin: 8px 0 0; color: var(--ink-soft); font-size: 14.5px; }

.num-badge {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--num-ink); background: none; padding: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.num-badge.multi { font-size: 15px; letter-spacing: 0.2px; top: 13px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--brass-soft); color: var(--brass);
}

.eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--teal);
}

.section-title {
  font-family: var(--font-display); font-size: 17px; color: var(--ink);
  margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}

.note {
  margin-top: 26px; padding: 15px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
}
.note strong { color: var(--ink); }

footer.site {
  margin-top: 32px; text-align: center; color: var(--ink-faint); font-size: 11.5px;
}

/* ---------- Arco ornamental (motivo compartido, uso comedido) ---------- */
:root { --arch-opacity: 0.55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --arch-opacity: 0.38; } }
:root[data-theme="dark"] { --arch-opacity: 0.38; }

.arch-motif {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--arch-opacity);
}

/* ---------- Fondo de página (foto fija o carrusel) ---------- */
/* z-index:-1 (no 0): varias páginas tienen elementos con position:relative/absolute
   sueltos en su contenido (.video, .num-badge, #next, etc.) que sin z-index propio
   igual entran en la misma "capa" que un .page-bg con z-index:0, y el orden del DOM
   decide quién gana — fragil, ya que ganaría lo que venga después en el HTML, no
   necesariamente el contenido real de la página. Con z-index:-1 relativo al stacking
   context propio de <body> (ver isolation:isolate arriba), .page-bg queda SIEMPRE
   por debajo de cualquier contenido, esté o no position-ado. */
.page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-slide {
  position: absolute; inset: 0;
  /* "center 22%" en vez de "center": sesga el recorte hacia arriba para no
     perder cabezas/rostros cuando la imagen es más alta que ancha. */
  background-size: cover; background-position: center 22%; background-repeat: no-repeat;
}
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  /* La capa rgba() final es un manto oscuro uniforme sobre TODA la foto (no solo
     los bordes) — sin él, el texto claro (modo oscuro) o el texto oscuro (modo
     claro) puede perder contraste según qué tan "ocupada" sea la foto de turno. */
  background:
    linear-gradient(to bottom, var(--bg) 0%, var(--bg) 8%, transparent 20%, transparent 72%, var(--bg) 100%),
    var(--photo-wash);
}

/* ---------- Fondo "hero" para páginas de contenido (una sola foto) ---------- */
/* A diferencia de .page-bg (fixed, pensado para el carrusel del home), este es
   position:absolute con una altura acotada: vive al inicio del documento, detrás
   del masthead, y se va con el scroll como cualquier otro contenido — no se queda
   fijo tapando lo que venga después. Así evitamos que una franja "transparente"
   del scrim reaparezca detrás de contenido más abajo en la página (encabezados de
   canción, leyendas, notas sueltas) — el problema real que tenía la primera
   versión de este mecanismo con .page-bg a full-viewport en TODAS las páginas. */
.hero-bg {
  position: absolute; top: 0; left: 0; right: 0;
  height: min(46vh, 340px);
  z-index: -1; pointer-events: none; overflow: hidden;
}
.hero-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 55%, var(--bg) 100%),
    var(--photo-wash);
}

.bg-slide {
  opacity: 0;
  animation: bg-crossfade 36s infinite ease-in-out backwards;
}
.bg-slide:nth-child(1) { animation-delay: 0s; }
.bg-slide:nth-child(2) { animation-delay: 6s; }
.bg-slide:nth-child(3) { animation-delay: 12s; }
.bg-slide:nth-child(4) { animation-delay: 18s; }
.bg-slide:nth-child(5) { animation-delay: 24s; }
.bg-slide:nth-child(6) { animation-delay: 30s; }

@keyframes bg-crossfade {
  0%    { opacity: 0; }
  4.2%  { opacity: 1; }
  12.5% { opacity: 1; }
  16.7% { opacity: 0; }
  100%  { opacity: 0; }
}

/* Red de seguridad barata para texto flotando sin tarjeta propia sobre la foto.
   .masthead * (no solo h1/brand/sub) porque algunas páginas insertan contenido
   dinámico extra ahí (ej. ensayos.html agrega un <p class="premiere-note">) que
   también queda sin tarjeta propia. Inocuo en páginas sin fondo o sobre texto que
   ya vive dentro de una tarjeta opaca (.pill, etc.): la sombra queda del mismo
   color que su propio fondo, invisible. */
.masthead, .masthead *, .crumb, footer.site {
  text-shadow: 0 1px 3px var(--bg), 0 0 10px var(--bg);
}

@media (max-width: 560px) {
  .shell { padding: 20px 14px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .bg-slide { animation: none !important; opacity: 0; }
  .bg-slide:first-child { opacity: 1; }
}