/* =====================================================================
   TEMA 1 · AURORA CUÁNTICA
   Degradado cian → violeta → magenta, hexágono luminoso y banner animado.
   Cargar DESPUÉS de estilos_revista.css:
   <link rel="stylesheet" href="extra/tema1_aurora_cuantica.css">
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@500;700;800&display=swap");

:root {
  --c1: #00D4FF; --c2: #6C3BFF; --c3: #FF2E93;
  --ink: #0B1B3A; --ink2: #1E3A8A;
  --aurora: linear-gradient(100deg, var(--c1), var(--c2) 48%, var(--c3));
  --titulo: linear-gradient(90deg, #0089D6, var(--c2) 62%, var(--c3));
  --ui: "Exo 2", "Lato", "Segoe UI", Arial, sans-serif;
}
body.dark { --ink: #CDEBFF; --ink2: #9DB8FF; --titulo: linear-gradient(90deg, #4FD8FF, #A58BFF 60%, #FF6DB6); }

@property --t1-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes t1-ang  { to { --t1-ang: 360deg; } }
@keyframes t1-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes t1-scan { from { background-position: -300px 0; } to { background-position: 760px 0; } }

/* ---------- BANNER HORIZONTAL ---------- */
.numero_revista,
.page:nth-child(even) .numero_revista,
.page:nth-child(odd) .numero_revista {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0;
  box-sizing: border-box; height: 44px; overflow: hidden;
  display: flex; align-items: center;
  background: var(--aurora); background-size: 220% 100%;
  animation: t1-flow 9s ease-in-out infinite;
  color: #fff; font: 700 11.5px/1 var(--ui);
  letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 20, 60, .45);
}
.page:nth-child(odd)  .numero_revista { justify-content: flex-end;   padding: 0 40px 0 112px; }
.page:nth-child(even) .numero_revista { justify-content: flex-start; padding: 0 112px 0 40px; }

.numero_revista::before {            /* destello que recorre el borde superior */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #fff, transparent) -300px 0 / 300px 100% no-repeat;
  animation: t1-scan 3.8s linear infinite;
}
.numero_revista::after {             /* retícula tecnológica */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 14px);
}

/* ---------- NUMERACIÓN: HEXÁGONO CON ANILLO CÓNICO ---------- */
.page:nth-child(even) .page_number,
.page:nth-child(odd) .page_number {
  position: absolute; z-index: 5; box-sizing: border-box;
  width: 88px; height: 78px; bottom: -4px; padding: 0 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0;
  color: #fff; font: 800 27px/1 var(--ui); letter-spacing: -.02em; text-shadow: 0 0 10px rgba(0, 212, 255, .95);
  filter: drop-shadow(0 0 9px rgba(0, 212, 255, .7)) drop-shadow(0 0 18px rgba(108, 59, 255, .5));
}
.page:nth-child(odd)  .page_number { left: -4px;  right: auto; }
.page:nth-child(even) .page_number { left: auto; right: -4px; }

.page_number::before, .page_number::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.page_number::before { z-index: -2; background: conic-gradient(from var(--t1-ang), var(--c1), var(--c2), var(--c3), var(--c1)); animation: t1-ang 6s linear infinite; }
.page_number::after  { z-index: -1; inset: 4px; background: radial-gradient(circle at 50% 28%, #22397F, var(--ink) 75%); }
body.dark .page_number::after { background: radial-gradient(circle at 50% 28%, #22397F, #050B1E 75%); }

/* ---------- BARRA LATERAL DE INICIO DE ARTÍCULO ---------- */
.postit2 {
  border: 0; border-right: 3px solid rgba(255, 255, 255, .9);
  background:
    radial-gradient(120% 35% at 0% 100%, rgba(255, 46, 147, .55), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, transparent 1px 22px),
    linear-gradient(190deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow: inset -12px 0 26px rgba(0, 0, 40, .22), 5px 0 20px rgba(108, 59, 255, .35);
  font: 800 42px/1.1 var(--ui); color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,.55), 0 2px 0 rgba(0, 20, 60, .45);
}
.postit2 .postit { letter-spacing: .03em; }

/* ---------- TÍTULOS ---------- */
.page > h1, .page > div > h1 {
  font-family: var(--ui); font-weight: 800; letter-spacing: -.01em;
  background: var(--titulo); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.page > h2, .page > div > h2 {
  font-family: var(--ui); font-weight: 700; color: var(--ink2);
  border-left: 4px solid; border-image: var(--aurora) 1; padding-left: 10px;
}
.subtitulo_paper {
  font: 800 20px/1.2 var(--ui); color: var(--ink2);
  padding-bottom: 3px; border-bottom: 2px solid; border-image: var(--aurora) 1;
}
.subtitulo_paper::before { content: "◆"; margin-right: 8px; font-size: .7em; vertical-align: .12em; color: var(--c3); }

@media (prefers-reduced-motion: reduce) {
  .numero_revista, .numero_revista::before, .page_number::before { animation: none; }
}

/* ---------- GEOMETRÍA (autosuficiente: no depende de estilos_revista.css) ---------- */
.postit2 { position: absolute; top: 0; left: 0; width: 120px; height: 795px; box-sizing: content-box; padding: 0; overflow: visible; }
.postit2 .postit { position: absolute; left: 5px; top: 90px; width: 430px; height: 380px; transform: rotate(-90deg); text-align: right; }
.page > h1, .page > div > h1, .page > h2, .page > div > h2, .subtitulo_paper { text-align: left; }