/* ============================================================================
   JOYA SOLAR — arte-joya.css
   Capa ADITIVA de arte editorial (tinte solar) · autor: Dalí, Genio Audiovisual
   de AIONOVA · 2026-08-12.

   CONTRATO (frontera dura)
   · Se carga DESPUÉS de core.css, editorial.css y data.css. Es la última capa:
     sólo AÑADE utilidades de arte; jamás redefine un token ni reescribe reglas
     de otras líneas.
   · NO declara ningún token nuevo en :root. Consume el ancla (tokens.css) por
     var(--...). Toda ampliación cromática se propone a Dalí, no se declara aquí.
   · NO toca posicionamiento/visibilidad de `.scene` (core.css), ni la API de
     expandibles (editorial.css), ni datos (data.css).
   · Paleta Joya: claro dominante (--paper #FBFAF6 / --paper-2 #FFFFFF),
     acento solar (--accent #E0912A), estructura navy (--navy #23386A),
     dato teal (--data #1C7C6B). Cero hardcode fuera de paleta.
   · Accesibilidad heredada del ancla: el ámbar y el oro pintan GRAFISMO, nunca
     texto largo sobre claro. Aquí sólo se usan como luz/velo/filete/motivo.
   · Hermana el molde: reusa el patrón de grano feTurbulence (data-uri, sin red)
     y la gramática de velos de editorial.css §4, re-tintados a solar.

   ÍNDICE
     1. Variables locales de arte (derivadas del ancla, sin tocar :root)
     2. Tratamiento hero solar (gradiente marfil→ámbar + rayos de luz)
     3. Duotono-frame (navy ↔ marfil) con grano de imprenta
     4. Motivo energía/sol para cabeceras de sección (rayo + halo)
     5. Utilidades de luz y velo solar
     6. Accesibilidad: prefers-reduced-motion + impresión
   ========================================================================== */

/* ---------------------------------------------------- 1. Variables de arte ---
   Alias LOCALES (prefijo --aj-) calculados desde tokens del ancla. No son
   tokens de marca: son parámetros internos de esta capa, viven en su propio
   namespace y no colisionan con tokens.css. */

.aj,
.aj-hero,
.aj-duo,
.aj-sol{
  --aj-accent:    var(--accent);        /* ámbar solar (grafismo/luz)         */
  --aj-accent-2:  var(--gold);          /* oro premium (filete/halo, no texto)*/
  --aj-navy:      var(--navy);          /* estructura AIONOVA                 */
  --aj-navy-deep: var(--navy-deep);     /* sombra/duotono profundo            */
  --aj-paper:     var(--paper);         /* lienzo claro dominante             */
  --aj-paper-2:   var(--paper-2);       /* blanco tarjeta                     */
  --aj-data:      var(--data);          /* teal energía sostenible            */
  /* Ritmos de animación tomados del ancla si existen; si no, respaldo suave. */
  --aj-dur:       var(--dur, 520ms);
  --aj-dur-slow:  1400ms;
  --aj-ease:      var(--ease, cubic-bezier(.22,.61,.36,1));
  --aj-radius:    var(--radius, 14px);
}

/* -------------------------------------------------- 2. Tratamiento hero sol ---
   Fondo claro con amanecer sutil: marfil que gana un toque ámbar hacia una
   esquina, atravesado por rayos de luz suaves. Sirve como lecho de una escena
   editorial de alta dirección; el texto va SIEMPRE por encima (z alto propio).

   Uso: envolver la escena (o su media) en `.aj-hero`. Opcional un SVG de fondo
   `assets/img/hero-*.svg` como capa 0 vía `.aj-hero__svg`. */

.aj-hero{
  position: relative;
  isolation: isolate;              /* los pseudo-fondos no escapan la escena  */
}

/* Capa 0 — SVG solar autocontenido (uno por superficie) */
.aj-hero__svg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Capa 1 — amanecer CSS: velo marfil→ámbar muy sutil (sobre el SVG o solo).
   El ámbar aparece a <10% de opacidad: es luz, no color plano. */
.aj-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 88% 8%,
      color-mix(in srgb, var(--aj-accent) 16%, transparent) 0%,
      color-mix(in srgb, var(--aj-accent) 7%, transparent) 26%,
      transparent 58%),
    linear-gradient(158deg,
      var(--aj-paper) 0%,
      color-mix(in srgb, var(--aj-paper) 92%, var(--aj-accent)) 62%,
      color-mix(in srgb, var(--aj-paper) 84%, var(--aj-accent)) 100%);
}

/* Capa 2 — rayos de luz suaves (sun rays) que barren desde la esquina cálida.
   Cónico de baja opacidad; se anima muy lento (respeta reduced-motion en §6). */
.aj-hero::after{
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background:
    conic-gradient(from 210deg at 90% 6%,
      transparent 0deg,
      color-mix(in srgb, var(--aj-accent) 26%, transparent) 8deg,
      transparent 18deg,
      transparent 30deg,
      color-mix(in srgb, var(--aj-accent-2) 22%, transparent) 40deg,
      transparent 52deg,
      transparent 66deg,
      color-mix(in srgb, var(--aj-accent) 20%, transparent) 76deg,
      transparent 90deg);
  transform-origin: 90% 6%;
  animation: aj-rayos var(--aj-dur-slow) linear infinite alternate;
  will-change: transform;
}
@keyframes aj-rayos{
  from{ transform: rotate(-2.2deg); }
  to  { transform: rotate( 2.2deg); }
}

/* Contenido de la escena por encima de las tres capas */
.aj-hero > :not(.aj-hero__svg){ position: relative; z-index: 2; }

/* Variante sobria: sólo amanecer, sin rayos (para superficies muy cargadas
   de texto donde el barrido distrae — p. ej. Decisión). */
.aj-hero--quieto::after{ content: none; }

/* Variante intensa: portada. Sube ligeramente la calidez del amanecer. */
.aj-hero--portada::before{
  background:
    radial-gradient(130% 100% at 86% 4%,
      color-mix(in srgb, var(--aj-accent) 22%, transparent) 0%,
      color-mix(in srgb, var(--aj-accent) 9%, transparent) 30%,
      transparent 62%),
    linear-gradient(160deg,
      var(--aj-paper-2) 0%,
      var(--aj-paper) 46%,
      color-mix(in srgb, var(--aj-paper) 82%, var(--aj-accent)) 100%);
}

/* -------------------------------------------------- 3. Duotono-frame navy ---
   Marco que asienta cualquier imagen (o SVG) en el duotono de la paleta:
   navy profundo en las sombras, marfil en las luces, con grano de imprenta.
   Hermana el tratamiento de editorial.css §4 (grano feTurbulence idéntico),
   re-tintado a la familia Joya. NO reemplaza a `.ed-figure`: es un realce
   opcional cuando se quiere unificar cromáticamente una superficie mixta. */

.aj-duo{
  position: relative;
  overflow: hidden;
  border-radius: var(--aj-radius);
  isolation: isolate;
  background: var(--aj-paper-3, var(--aj-paper));
}

/* La imagen/SVG hijo se lava a duotono navy↔marfil vía blend. */
.aj-duo > img,
.aj-duo > picture > img,
.aj-duo > .aj-duo__media{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  mix-blend-mode: luminosity;
}

/* Tinte duotono: navy en sombras, marfil cálido en luces. */
.aj-duo::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--aj-navy-deep) 88%, transparent) 0%,
      color-mix(in srgb, var(--aj-navy) 60%, transparent) 46%,
      color-mix(in srgb, var(--aj-paper) 0%, transparent) 100%);
}
.aj-duo::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(90% 70% at 78% 12%,
      color-mix(in srgb, var(--aj-paper) 42%, transparent) 0%,
      transparent 60%);
}

/* Grano de imprenta — MISMO feTurbulence data-uri del molde (editorial.css §4),
   para que las superficies hermanen. Textura, no ruido. */
.aj-grano::before,
.aj-duo.aj-grano::before{ /* permite grano encima del duotono */ }
.aj-grano{
  position: relative;
  isolation: isolate;
}
.aj-grano > .aj-grano__layer,
.aj-duo::after,
.aj-hero__svg{ /* marcador de orden — no altera reglas previas */ }

/* Overlay de grano reutilizable, aplicable a hero o duo por composición. */
.aj-noise{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Filete inferior cálido para el marco duotono (línea = estructura). */
.aj-duo--filete{
  border-block-end: 2px solid color-mix(in srgb, var(--aj-accent) 70%, var(--aj-navy));
}

/* --------------------------------------- 4. Motivo energía/sol de cabecera ---
   Grafismo sobrio para acompañar el eyebrow/título de una sección: una línea
   de rayo con halo. Puro CSS, se antepone al texto vía elemento propio
   `.aj-sol` o pseudo. El acento pinta grafismo, nunca texto. */

/* 4.1 Marca de sol inline — disco con halo + un rayo horizontal.
   Colócala junto al eyebrow: <span class="aj-sol" aria-hidden="true"></span> */
.aj-sol{
  --aj-sol-size: clamp(16px, 1.5vw, 22px);
  position: relative;
  display: inline-flex;
  align-items: center;
  inline-size: var(--aj-sol-size);
  block-size: var(--aj-sol-size);
  flex: 0 0 auto;
  vertical-align: middle;
}
/* disco solar */
.aj-sol::before{
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%,
      color-mix(in srgb, var(--aj-accent) 92%, white) 0%,
      var(--aj-accent) 58%,
      color-mix(in srgb, var(--aj-accent) 74%, var(--aj-navy)) 100%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aj-accent) 22%, transparent);
}
/* halo pulsante */
.aj-sol::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--aj-accent) 46%, transparent);
  opacity: .8;
  animation: aj-halo 3.6s var(--aj-ease) infinite;
}
@keyframes aj-halo{
  0%,100%{ transform: scale(.86); opacity: .28; }
  50%    { transform: scale(1.12); opacity: .72; }
}

/* 4.2 Línea de rayo — filete-amanecer para separar cabecera de cuerpo, o para
   subrayar un eyebrow. Degradado ámbar→transparente, 2px. */
.aj-rayo{
  border: 0;
  block-size: 2px;
  inline-size: clamp(48px, 12vw, 180px);
  margin: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--aj-accent) 90%, transparent) 0%,
      color-mix(in srgb, var(--aj-accent-2) 60%, transparent) 42%,
      transparent 100%);
  border-radius: 2px;
}
/* variante centrada, con nudo de luz en el origen */
.aj-rayo--nodo{ position: relative; }
.aj-rayo--nodo::before{
  content: "";
  position: absolute;
  inset-block: -3px;
  inset-inline-start: -2px;
  inline-size: 8px;
  border-radius: 50%;
  background: var(--aj-accent);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--aj-accent) 60%, transparent);
}

/* 4.3 Halo de cabecera — aura radial que se posa detrás de un título de sección
   sin ensuciar la lectura (queda detrás, opacidad baja). Elemento propio. */
.aj-halo{
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inline-size: clamp(180px, 26vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--aj-accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--aj-accent) 7%, transparent) 34%,
      transparent 66%);
  filter: blur(2px);
}

/* ------------------------------------------------ 5. Utilidades luz / velo ---
   Velos solares hermanos de editorial.css §4, para asentar texto sobre fondo
   claro cálido. Marfil cálido en lugar del marfil neutro del molde. */

.aj-veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* velo marfil cálido (lectura de texto oscuro sobre hero claro) */
.aj-veil--marfil{
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--aj-paper) 98%, var(--aj-accent)) 0%,
      color-mix(in srgb, var(--aj-paper) 95%, var(--aj-accent)) 34%,
      color-mix(in srgb, var(--aj-paper) 70%, transparent) 58%,
      transparent 100%);
}
/* velo pie navy (crédito o texto claro al pie de una imagen tratada) */
.aj-veil--pie{
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--aj-navy-deep) 74%, transparent) 0%,
      color-mix(in srgb, var(--aj-navy-deep) 28%, transparent) 40%,
      transparent 74%);
}

/* Realce de dato energético: chip teal sobrio (energía sostenible). */
.aj-chip-energia{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .3em .7em;
  border-radius: 999px;
  background: var(--data-tint, color-mix(in srgb, var(--aj-data) 8%, transparent));
  color: var(--aj-data);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
}
.aj-chip-energia::before{
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--aj-data);
}

/* ------------------------------------------- 6. Reduced-motion + impresión ---*/

@media (prefers-reduced-motion: reduce){
  .aj-hero::after{ animation: none; }
  .aj-sol::after{ animation: none; opacity: .5; transform: none; }
}

@media print{
  /* Sin luz animada ni velos: papel legible, todo el contenido visible. */
  .aj-hero::after,
  .aj-hero__svg,
  .aj-noise,
  .aj-halo,
  .aj-sol::after{ display: none !important; }
  .aj-hero::before{
    background: none !important;
  }
  .aj-duo > img,
  .aj-duo > picture > img,
  .aj-duo > .aj-duo__media{
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  .aj-duo::before,
  .aj-duo::after{ display: none !important; }
  .aj-rayo{ background: #999 !important; }
}