/* ══════════════════════════════════════════════════════════════════════
   NEGRO AURA — la capa oscura de toda la web pública
   Se carga SIEMPRE encima de portada.css, tanto en la portada como en la
   landing de cada sistema. portada.css conserva su paleta clara intacta;
   aquí solo se remapean sus tokens y se restilizan las superficies que
   nacieron para fondo claro.

   El fondo (base + auroras + deriva) es el mismo de la portada anterior.
   Regla que gobierna la conversión: el color no se lava ni se apaga —
   lo que era tinta sobre hueso pasa a luz sobre base, y lo que era papel
   blanco pasa a vidrio, nunca a gris sucio.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 1 · TOKENS REMAPEADOS ════════════════════════════════════════════════
   --tinta y --blanco tienen doble papel en la hoja base (texto Y superficie).
   Se remapean por su papel DOMINANTE (texto) y las pocas superficies que
   los usaban se restilizan una por una en el bloque 4. */
body.aurora{
  --base:#07030F;           /* la base oscura del aurora            */
  --hueso:#07030F;          /* era el papel; ahora es la base       */
  --grafito:rgba(255,255,255,.035);  /* los actos que separaban en oscuro
                               ahora separan en claro: el papel se invierte */
  --grafito-2:#1A1726;      /* respaldo bajo las fotos del mosaico  */

  --tinta:#FFFFFF;          /* texto principal                      */
  --tinta-2:rgba(255,255,255,.76);   /* secundario · 12:1 sobre base */
  --tinta-3:rgba(255,255,255,.56);   /* apoyos     ·  7:1 sobre base */
  --linea:rgba(255,255,255,.11);
  --linea-2:rgba(255,255,255,.22);
  --blanco:#FFFFFF;         /* se queda blanco: es color de LETRA   */

  /* Superficies propias de esta variante */
  --vidrio:rgba(255,255,255,.045);
  --vidrio-2:rgba(255,255,255,.075);
  --sobre-base:#0B0713;     /* lo que va encima de un relleno claro */

  /* Los colores de sistema suben de brillo: sobre negro, el índigo
     original (#120BA0) desaparecía. Estos son los del relleno; para
     letra e ícono suelto va --tono-luz, más brillante todavía. */
  --kontago:#FC2D30;
  --social:#7C3AED;
  --stream:#4F46E5;
  --estudio:#0D9488;

  background:var(--base);
  color:var(--tinta);
}

/* Tono luminoso por capítulo: el que pinta nombre, rótulo e íconos
   sueltos sobre la base. El relleno sigue usando --tono. */
body.aurora .capitulo{--tono-luz:#FF5A5F}
body.aurora .cap-social{--tono-luz:#A78BFA}
body.aurora .cap-stream{--tono-luz:#8F8AF7}
body.aurora #estudio{--tono-luz:#3CCFBF}

/* ══ 2 · EL FONDO ═════════════════════════════════════════════════════════
   Base oscura + cuatro blooms de marca + un cónico que deriva despacio.
   Es el fondo de la portada anterior, tal cual, con su máscara para que
   la luz mande arriba y no le coma el contraste al texto de abajo. */
.aurora-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-color:var(--base);
  background-image:
    radial-gradient(42% 52% at 18% 22%, rgba(99,102,241,.55) 0%, transparent 70%),
    radial-gradient(46% 56% at 80% 18%, rgba(94,234,212,.30) 0%, transparent 70%),
    radial-gradient(52% 60% at 65% 60%, rgba(236,72,153,.32) 0%, transparent 72%),
    radial-gradient(46% 54% at 28% 72%, rgba(139,92,246,.42) 0%, transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.35) 62%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.35) 62%,transparent 92%);
}
.aurora-bg::before{
  content:""; position:absolute; inset:-25%;
  background:conic-gradient(from 120deg at 50% 28%,
    #3a29ff,#5eead4,#ec4899,#8b5cf6,#120ba0,#3a29ff);
  filter:blur(90px) saturate(1.35);
  opacity:.5;
  animation:aurora-deriva 22s ease-in-out infinite alternate;
}
@keyframes aurora-deriva{
  from{transform:translate3d(-4%,-2%,0) rotate(0deg) scale(1.05)}
  to  {transform:translate3d(4%,3%,0)  rotate(9deg) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){.aurora-bg::before{animation:none}}

/* ══ 3 · BARRA SUPERIOR ═══════════════════════════════════════════════════ */
/* El vidrio de la barra al bajar deja de ser hueso y pasa a base. */
body.aurora .top.solida{
  background:rgba(9,6,20,.66);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:rgba(255,255,255,.10);
}
/* El logo se queda blanco siempre: ya no hay barra clara que lo justifique. */
body.aurora .top.solida .marca img{filter:brightness(0) invert(1)}
/* En la landing sin hero, la hoja clara pinta la barra de papel: aquí se
   devuelve a vidrio oscuro con la letra en blanco. */
body.aurora.sin-hero .top{background:rgba(9,6,20,.66);border-bottom-color:rgba(255,255,255,.10)}
body.aurora.sin-hero .marca{color:#fff}
body.aurora.sin-hero .marca img{filter:brightness(0) invert(1)}
body.aurora.sin-hero .menu a,body.aurora.sin-hero .menu button{color:rgba(255,255,255,.86)}
body.aurora.sin-hero .menu a:hover,body.aurora.sin-hero .menu button:hover{background:rgba(255,255,255,.12);color:#fff}
body.aurora .top.solida .menu a:hover,
body.aurora .top.solida .menu button:hover{background:rgba(255,255,255,.10);color:#fff}

/* ══ 4 · SUPERFICIES QUE ERAN PAPEL ═══════════════════════════════════════
   Todo lo que era blanco pasa a vidrio: se ve la aurora por debajo y el
   bloque sigue existiendo como superficie, sin convertirse en gris plano. */
/* Nota de rendimiento: la aurora del fondo ya está desenfocada, así que
   estas superficies NO llevan backdrop-filter — sería desenfocar lo ya
   desenfocado y cuesta caro en una página larga. Solo la barra superior
   lo lleva, porque bajo ella sí pasa contenido real. */
body.aurora .clientes{
  background:rgba(255,255,255,.04);
  border-bottom-color:rgba(255,255,255,.10);
}
/* Las tarjetas montan sobre la foto del slider: aquí sí llevan vidrio de
   verdad (denso + desenfoque), porque debajo pasa imagen, no la aurora. */
body.aurora .paq{
  background:rgba(13,10,26,.72);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 54px -26px rgba(0,0,0,.95);
}
body.aurora .paq:hover{
  background:rgba(20,16,38,.8);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 30px 64px -24px rgba(0,0,0,1);
}
body.aurora .paq.pop{border-color:var(--kontago);box-shadow:0 0 0 1px rgba(252,45,48,.35),0 20px 50px -26px rgba(252,45,48,.5)}
body.aurora .form{
  background:var(--vidrio);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
body.aurora .campo input,
body.aurora .campo textarea{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.2);
  color:#fff;
}
body.aurora .campo input::placeholder,
body.aurora .campo textarea::placeholder{color:rgba(255,255,255,.38)}

/* El acto que separaba en oscuro ahora separa en claro: mismo papel de
   corte de ritmo, invertido. Su luz superior también se invierte. */
body.aurora .acto-oscuro{
  background:rgba(255,255,255,.05);
  border-block-color:rgba(255,255,255,.12);
}
body.aurora .acto-oscuro::before{
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.06),transparent 70%);
}
/* La barra del nombre de capítulo era hueso; ahora vidrio fino. */
body.aurora .cap-barra{
  background:rgba(255,255,255,.03);
  border-block-color:rgba(255,255,255,.10);
}
/* El pie cierra la página: un punto más denso que el cuerpo. */
body.aurora .pie{
  background:rgba(6,4,14,.82);
  border-top:1px solid rgba(255,255,255,.10);
}
/* El bloque de contacto trae el fondo forzado desde el Blade. */
body.aurora #contacto{
  background:transparent!important;
  border-top-color:rgba(255,255,255,.10)!important;
}

/* ══ 5 · BOTONES ══════════════════════════════════════════════════════════
   Se invierte el par relleno/letra, pero el gesto no cambia: el color
   entra de izquierda a derecha y la flecha avanza. */
body.aurora .btn-solido{background:#fff;color:var(--sobre-base);border-color:#fff}
body.aurora .btn-solido:hover{color:#fff;border-color:var(--kontago)}
body.aurora .btn-linea{border-color:rgba(255,255,255,.28);color:#fff}
body.aurora .btn-linea::before{background:#fff}
body.aurora .btn-linea:hover{color:var(--sobre-base);border-color:#fff}
body.aurora .btn-claro{color:var(--sobre-base)}
body.aurora .acto-oscuro .btn-linea:hover{color:var(--sobre-base)}
body.aurora .portada .btn-linea:hover{color:var(--sobre-base)}
/* El sello de vista previa vivía en tinta: ahora vidrio sobre la base. */
body.aurora .sello{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ══ 6 · TONO LUMINOSO donde el color va suelto sobre la base ═════════════ */
body.aurora .cap-nombre{color:var(--tono-luz,var(--tono))}
body.aurora .cap-nombre::after{background:var(--tono-luz,var(--tono))}
body.aurora .cap-txt .rotulo{color:var(--tono-luz,var(--tono))}
body.aurora .punto-ico svg{fill:var(--tono-luz,var(--tono))}
body.aurora .etq svg{fill:var(--tono-luz,var(--tono))}
body.aurora .paso-n{color:#FF5A5F}
body.aurora .paq-ver{color:#FF5A5F}
body.aurora .faq summary:hover{color:#FF5A5F}
body.aurora .paq-lista svg{stroke:#FF5A5F}
body.aurora .estrellas svg{fill:#FF5A5F}
body.aurora #estudio .rotulo{color:var(--tono-luz)}

/* ══ 7 · MARCOS E IMÁGENES ════════════════════════════════════════════════
   Las capturas del sistema son claras por naturaleza: no se apagan (eso
   se leería como color lavado), se enmarcan en vidrio para que no
   floten como recortes de papel sobre el negro. */
body.aurora .marco{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 70px -34px rgba(0,0,0,.95);
}
body.aurora .marco-barra{
  background:rgba(255,255,255,.07);
  border-bottom-color:rgba(255,255,255,.12);
}
body.aurora .marco-cuerpo{background:rgba(10,7,22,.9)}
body.aurora .cap-arte{
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 34px 70px -36px rgba(0,0,0,.95);
}
/* El teñido multiplicaba sobre foto clara; sobre base oscura el multiply
   ennegrece de más, así que aquí colorea sin robarle luz a la imagen. */
body.aurora .cap-arte.tenido::after{opacity:.62;mix-blend-mode:color}
body.aurora .mos{box-shadow:0 16px 36px -20px rgba(0,0,0,.9)}
body.aurora .mos:hover{box-shadow:0 26px 54px -22px rgba(0,0,0,1)}

/* ══ 8 · PESTAÑAS, TARJETAS Y DETALLES ════════════════════════════════════ */
body.aurora .pest button:hover{color:#fff}
body.aurora .tarj{border-color:rgba(255,255,255,.13)}
body.aurora .tarj:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.05)}
/* El menú de sistemas ya era vidrio oscuro: solo se le refuerza el borde,
   porque su sombra negra deja de existir sobre la base. */
body.aurora .desp-menu{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 80px -30px rgba(0,0,0,.95)}
body.aurora .ficha{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 44px -22px rgba(0,0,0,.95)}
/* El anillo del avatar activo abre hueco contra la base real. */
body.aurora .t-av.on{box-shadow:0 0 0 2px var(--base),0 0 0 4px var(--c),0 12px 30px -12px var(--c)}