/* ============================================================================
   TEMA «ME TIRO UN FACTO Y ME VOY» (sáb 14-11-2026, artista invitado RealViviendo)
   Va ENCIMA de styles.css y solo se carga con Ajustes → «Tema del sitio» = facto (lib/layout.js, temaActivo).
   Colores sacados del flyer: rojo profundo, brillo naranjo detrás del artista, negro abajo y el título en cromo
   rosado con extrusión roja. El logo no cambia. El título de la fiesta es el del flyer, recortado con Vision
   (img/tema/facto-titulo.png, en Eventos → «Logo del título»).
   ============================================================================ */
:root[data-tema="facto"]{
  --ink:#0A0102; --surface:#170406; --surface-2:#22080A; --line:rgba(255,170,170,.13);

  /* Las seis tintas, en el mismo lugar con los colores del flyer */
  --c-yellow:#FFB347;   /* brasa */
  --c-orange:#FF5A1F;   /* el brillo detrás del artista */
  --c-magenta:#E3121F;  /* el rojo del flyer */
  --c-cyan:#FF6F8E;     /* rosado */
  --c-lime:#FFD3DA;     /* el cromo del título */
  --c-violet:#5C0510;   /* vino */

  /* Acento funcional = el rojo del flyer. Blanco sobre él da 5:1 (pasa AA). */
  --accent:#E3121F; --accent-2:#FF4D57; --accent-deep:#8F0612;
  --sobre-acento:#fff;
  --accent-rgb:227,18,31; --accent-deep-rgb:143,6,18;
  --accent-glow:rgba(227,18,31,.55);

  --spectrum:linear-gradient(100deg,#FFB347 0%,#FF5A1F 26%,#E3121F 52%,#FF6F8E 78%,#FFD3DA 100%);
  /* Botón primario: brasa → naranjo → rojo claro, con tinta negra encima (5,8:1 en el extremo). */
  --spectrum-hot:linear-gradient(100deg,#FFB347 0%,#FF7A2E 45%,#FF3B30 100%);
  --info:#FF6F8E;
  --shadow-accent:0 14px 40px rgba(227,18,31,.35);
}

/* Fondo de toda la página: el resplandor rojo del flyer arriba y el negro abajo, en vez de las salpicaduras. */
:root[data-tema="facto"] body::before{
  background-image:
    radial-gradient(900px 520px at 50% -12%,rgba(227,18,31,.26),transparent 66%),
    radial-gradient(640px 420px at 96% 30%,rgba(255,90,31,.12),transparent 62%),
    radial-gradient(620px 400px at 4% 64%,rgba(143,6,18,.30),transparent 62%),
    radial-gradient(700px 440px at 80% 96%,rgba(227,18,31,.10),transparent 62%)}

/* Títulos: el cromo rosado del flyer con su extrusión roja, en Bebas. */
:root[data-tema="facto"] :is(.qts-hero h1:not(.h1-logo),.hero-title:not(.h1-logo),.section-head h2,.closer h2){
  color:#FFE6EA;
  text-shadow:0 1px 0 #F7A9B3,0 2px 0 #D81B2C,0 3px 0 #BE1222,0 4px 0 #A00C1A,0 5px 0 #820814,
    0 12px 24px rgba(0,0,0,.55),0 0 34px rgba(255,59,48,.30)}
:root[data-tema="facto"] .section-head .eyebrow{color:#FF8A6B}

/* El héroe: rojo profundo con el brillo naranjo arriba a la derecha y negro abajo, como el flyer. */
:root[data-tema="facto"] .qts-hero::before{background:
  radial-gradient(48% 42% at 76% 26%,rgba(255,110,40,.55),transparent 66%),
  radial-gradient(62% 56% at 36% 34%,rgba(227,18,31,.62),transparent 70%),
  radial-gradient(70% 46% at 50% 108%,rgba(0,0,0,.92),transparent 72%),
  #3A0306}
:root[data-tema="facto"] .js .qts-hero:not(.fx3d-off)::before{opacity:.75}
:root[data-tema="facto"] .qts-hero-veil{background:
  radial-gradient(closest-side at 42% 52%,rgba(10,1,2,.62),rgba(10,1,2,.28) 64%,transparent 100%),
  linear-gradient(180deg,rgba(10,1,2,.55) 0%,transparent 26%,transparent 56%,rgba(10,1,2,.9) 92%,var(--ink) 100%)}
/* El logo del título trae su propio brillo rojo: sin sombra extra. */
:root[data-tema="facto"] .h1-logo img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* La caligrafía del fondo del flyer, a media luz en las esquinas del héroe, y un destello naranjo que respira. */
:root[data-tema="facto"] .tema-hero{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fc-letras{position:absolute;width:clamp(260px,42vw,560px);aspect-ratio:470/330;background:url('/img/tema/facto-letras.webp') center/contain no-repeat;
  mix-blend-mode:screen;opacity:.22}
.fc-l1{top:2%;left:-2%}
.fc-l2{bottom:6%;right:-3%;transform:rotate(180deg);opacity:.16}
.fc-brillo{position:absolute;top:8%;right:10%;width:clamp(220px,34vw,520px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,150,70,.42),rgba(255,90,31,.14) 55%,transparent 100%);
  animation:fc-respira 6s var(--ease-in-out) infinite alternate}
@keyframes fc-respira{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.qts-hero.fuera .fc-brillo{animation-play-state:paused}
@media(max-width:939px){.fc-l2{display:none}.fc-brillo{top:2%;right:-12%}}

/* Lo que traía el magenta escrito a mano en styles.css */
@media(hover:hover) and (pointer:fine){
  :root[data-tema="facto"] .btn-primary:hover{box-shadow:0 18px 52px rgba(255,59,48,.45)}}
:root[data-tema="facto"] .btn-primary:focus-visible{box-shadow:0 18px 52px rgba(255,59,48,.45)}
:root[data-tema="facto"] .closer{background:linear-gradient(160deg,rgba(227,18,31,.24),rgba(58,3,6,.6) 48%,rgba(255,90,31,.10) 100%),var(--surface)}
:root[data-tema="facto"] .oferta-card{
  background:linear-gradient(135deg,rgba(227,18,31,.26),rgba(58,3,6,.55) 55%,rgba(255,90,31,.10));
  box-shadow:0 0 0 1px rgba(255,77,87,.6) inset,0 24px 60px rgba(0,0,0,.55)}
:root[data-tema="facto"] .hero-oferta{background:linear-gradient(90deg,rgba(227,18,31,.32),rgba(58,3,6,.6));border-color:rgba(255,77,87,.6)}
/* El pie: vino oscuro, el logo con su salpicadura se ve como en el manual. */
:root[data-tema="facto"] .site-footer{background:linear-gradient(180deg,#160305,#0A0102)}

@media(prefers-reduced-motion:reduce){.fc-brillo{animation:none}}