/*
  style.css — TecnoCore Guatemala (tema cyberpunk)

  Índice:
  1. Fuentes (Google Fonts + fuente local CyberwayRiders)
  2. Reset de estilos
  3. Variables de diseño (:root)
  4. Tipografía base y asignación de fuentes por elemento
  5. Fondo y layout general (body, header, main, footer)
  6. Componentes (enlaces, tablas, formularios, botones, imágenes/detalles)
  7. Responsive
  8. Animaciones estilo cyberpunk (glitch, neón, scanlines, entradas)
*/

/* Tipografías de Google Fonts usadas en toda la interfaz */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');

/* Fuente personalizada (angular/desgastada) para el logotipo y el banner del home */
@font-face {
  font-family: 'CyberwayRiders';
  src: url('../fonts/CyberwayRiders.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* reset estilos */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* Modelo de caja consistente: padding/border no aumentan el ancho declarado */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Paleta, radios y espaciados reutilizados en todo el sitio */
:root {
  --color-primary: #fcee0a;
  --color-primary-dark: #d6cc00;
  --color-accent: #ff003c;
  --color-cyan: #00f0ff;
  --color-white: #f2f2f2;
  --color-gray-50: #1a1a20;
  --color-gray-100: #202028;
  --color-gray-200: #33333d;
  --color-gray-300: #4a4a56;
  --color-gray-400: #6b6b78;
  --color-gray-600: #9797a3;
  --color-gray-700: #c2c2cc;
  --color-gray-900: #f2f2f2;
  --bg-body: #0a0a0dea;
  --bg-panel: #111116;
  --radius: 2px;
  --spacing-1: .5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;
  --max-width: 1100px;
  --shadow: 0 0 0 1px var(--color-gray-200), 0 0 18px rgba(252, 238, 10, .08);
}

/* Rajdhani como fuente de lectura (párrafos, labels, celdas) */
html {
  font-family: 'Rajdhani', "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
}

/* Orbitron (más técnica) para títulos, navegación y controles */
header nav a,
main h1,
main h2,
caption,
legend,
summary,
thead th,
button {
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
}


/* Logotipo del header y banner del home: fuente angular CyberwayRiders */
.title-banner {
	font-family: 'CyberwayRiders', 'Orbitron', 'Rajdhani', sans-serif;
	 word-spacing: 0.75em;
}

.title {
  font-family: 'CyberwayRiders', 'Orbitron', 'Rajdhani', sans-serif;
}

/* Fondo de página: rejilla sutil + resplandores radiales de color (ambientación cyberpunk) */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  color: var(--color-gray-900);
  background-color: var(--bg-body);
  background-image:
    linear-gradient(rgba(252, 238, 10, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 15% 10%, rgba(0, 240, 255, .16), transparent 42%),
    radial-gradient(circle at 85% 0%, rgba(255, 0, 60, .14), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(252, 238, 10, .08), transparent 55%),
    linear-gradient(180deg, #14141d 0%, #0a0a0d 45%, #050506 100%);
  background-size: 32px 32px, 32px 32px, cover, cover, cover, cover;
  background-attachment: fixed;
}

/* Encabezado y navegación */
header {
  background: #0a0a0dbf;
  border-bottom: 2px solid var(--color-primary);
  padding: var(--spacing-2) var(--spacing-3);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 20px rgba(252, 238, 10, .25), 0 2px 0 rgba(255, 0, 170, 0.6);
}

header hr {
  display: none;
}

.title {
  font-size: larger;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.title a {
  color: var(--color-primary);
  text-decoration: none;
  text-shadow: 0 0 8px rgba(252, 238, 10, .55);
}

.content-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-1) var(--spacing-3);
  width: 100%;
}

header nav a {
  color: var(--color-gray-700);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .05em;
  padding: .25rem .5rem;
  border-radius: var(--radius);
}

header nav a:hover,
header nav a:focus {
  background: rgba(0, 240, 255, .08);
  color: var(--color-cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, .6);
}

header nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(252, 238, 10, .6);
}

/* Contenido principal */
main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-4) var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

main h1 {
  font-size: 2.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(252, 238, 10, .45), 0 0 24px rgba(255, 0, 60, .2);
}

main h2 {
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--color-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, .35);
}

main p {
  margin-bottom: .75rem;
}

main hr {
  border: none;
  border-top: 1px solid var(--color-gray-200);
}

main > section,
main > article,
main > aside {
  background: var(--bg-panel);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--spacing-3);
  box-shadow: var(--shadow);
}

/* Enlaces */
a {
  color: var(--color-cyan);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-primary);
  text-shadow: 0 0 6px rgba(252, 238, 10, .5);
}

/* Tablas */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-1) 0;
}

caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
  color: var(--color-gray-700);
}

th,
td {
  padding: .75rem;
  border: 1px solid var(--color-gray-200);
  text-align: left;
}

thead th {
  background: #000;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
}

tbody tr:hover {
  background: rgba(0, 240, 255, .06);
}

/* Formularios */
form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

fieldset {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  padding: var(--spacing-2);
}

legend {
  padding: 0 .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-cyan);
}

label {
  font-weight: 500;
  color: var(--color-gray-700);
}

input,
select,
textarea {
  width: 100%;
  margin-top: .25rem;
  padding: .5rem .75rem;
  font: inherit;
  color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  background: var(--bg-body);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

input[type="checkbox"] {
  width: auto;
  margin-top: 0;
}

/* Botones: forma "cortada" (clip-path) característica del estilo cyberpunk */
button {
  align-self: flex-start;
  cursor: pointer;
  padding: .6rem 1.4rem;
  border: none;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--color-primary);
  color: #0a0a0d;
  box-shadow: 0 0 12px rgba(252, 238, 10, .4);
}

button:hover,
button:focus {
  background: var(--color-cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, .6);
}

button[type="reset"],
button[type="button"] {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 10px rgba(255, 0, 60, .35);
}

button[type="reset"]:hover,
button[type="button"]:hover {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 0 16px rgba(255, 0, 60, .6);
}

/* Imágenes y detalles */
figure {
  margin: 0;
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-gray-200);
}

figcaption {
  margin-top: .5rem;
  color: var(--color-gray-600);
  font-size: .9rem;
}

details {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}

summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-cyan);
  text-transform: uppercase;
  letter-spacing: .03em;
}

dl dt {
  margin-top: .5rem;
  font-weight: 700;
  color: var(--color-primary);
}

dl dd {
  margin-bottom: .25rem;
  color: var(--color-gray-700);
}

address {
  font-style: normal;
}

/* Pie de página */
footer {
  margin-top: var(--spacing-4);
  padding: var(--spacing-3);
  text-align: center;
  color: var(--color-gray-400);
  border-top: 1px solid var(--color-gray-200);
}

footer hr {
  display: none;
}

footer iframe {
  border: none;
}

/* Pantallas angostas: reduce el padding para aprovechar el ancho disponible */
@media (max-width: 640px) {
  main {
    padding: var(--spacing-3) var(--spacing-2);
  }

  header {
    padding: var(--spacing-2);
  }
}

/* ============================================
   Animaciones estilo cyberpunk
   ============================================ */

/*
  Títulos principales: respiración neón (glow que sube y baja como un tubo
  de neón real) durante la mayor parte del ciclo, con una ráfaga de glitch
  al final. Los pasos del glitch están separados por varios cientos de ms
  (no por 1%) para que cada corte se alcance a ver.
*/
@keyframes neon-glitch {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor,
      0 0 10px currentColor,
      0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5),
      0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: ease-in-out;
  }
  35% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 2px currentColor,
      0 0 5px currentColor,
      0 0 9px currentColor,
      0 0 18px rgba(252, 238, 10, .28),
      0 0 34px rgba(255, 0, 60, .1);
    animation-timing-function: ease-in-out;
  }
  70% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor,
      0 0 10px currentColor,
      0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5),
      0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  74% {
    clip-path: inset(10% 0 65% 0);
    transform: translate(-6px, 0);
    text-shadow: -3px 0 var(--color-cyan), 3px 0 var(--color-accent);
    animation-timing-function: steps(1, end);
  }
  80% {
    clip-path: inset(55% 0 8% 0);
    transform: translate(5px, 0);
    text-shadow: 3px 0 var(--color-accent), -3px 0 var(--color-cyan);
    animation-timing-function: steps(1, end);
  }
  84% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  88% {
    clip-path: inset(30% 0 45% 0);
    transform: translate(-6px, 1px);
    text-shadow: -4px 0 var(--color-cyan), 4px 0 var(--color-accent);
    animation-timing-function: steps(1, end);
  }
  92% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  96% {
    clip-path: inset(72% 0 3% 0);
    transform: translate(4px, 0);
    text-shadow: 4px 0 var(--color-accent), -4px 0 var(--color-cyan);
    animation-timing-function: steps(1, end);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor,
      0 0 10px currentColor,
      0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5),
      0 0 70px rgba(255, 0, 60, .22);
  }
}

main h1 {
  animation: neon-glitch 8s ease-in-out infinite;
}

/*
  El banner del home usa su propio keyframe: ciclo más corto y muchos más
  cortes repartidos por todo el recorrido (no solo al final), para que se
  sienta como chisporroteo eléctrico en vez de un glitch ocasional.
*/
@keyframes banner-electric {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: ease-in-out;
  }
  20% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 2px currentColor, 0 0 5px currentColor, 0 0 9px currentColor,
      0 0 18px rgba(252, 238, 10, .28), 0 0 34px rgba(255, 0, 60, .1);
    animation-timing-function: ease-in-out;
  }
  36% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  39% {
    clip-path: inset(8% 0 70% 0);
    transform: translate(-7px, 0);
    text-shadow: -4px 0 var(--color-cyan), 4px 0 var(--color-accent);
    animation-timing-function: steps(1, end);
  }
  41% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  42% {
    clip-path: inset(58% 0 6% 0);
    transform: translate(6px, 1px);
    text-shadow: 4px 0 var(--color-accent), -4px 0 var(--color-cyan);
    animation-timing-function: steps(1, end);
  }
  45% {
    /* caída de potencia: el glow se apaga casi por completo un instante */
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow: 0 0 2px currentColor, 0 0 3px currentColor;
    animation-timing-function: steps(1, end);
  }
  47% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  57% {
    clip-path: inset(35% 0 40% 0);
    transform: translate(-5px, 0);
    text-shadow: -3px 0 var(--color-cyan), 3px 0 var(--color-accent);
    animation-timing-function: steps(1, end);
  }
  59% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  60% {
    clip-path: inset(70% 0 5% 0);
    transform: translate(7px, -1px);
    text-shadow: 3px 0 var(--color-accent), -3px 0 var(--color-cyan);
    animation-timing-function: steps(1, end);
  }
  61% {
    /* sacudida doble sin volver al reposo: aún más brusco */
    clip-path: inset(20% 0 55% 0);
    transform: translate(-6px, 1px);
    text-shadow: -4px 0 var(--color-cyan), 4px 0 var(--color-accent);
    animation-timing-function: steps(1, end);
  }
  63% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  74% {
    /* segunda caída de potencia */
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow: 0 0 2px currentColor, 0 0 3px currentColor;
    animation-timing-function: steps(1, end);
  }
  76% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  77% {
    clip-path: inset(62% 0 8% 0);
    transform: translate(5px, 0);
    text-shadow: 4px 0 var(--color-accent), -4px 0 var(--color-cyan);
    animation-timing-function: steps(1, end);
  }
  79% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  88% {
    clip-path: inset(8% 0 70% 0);
    transform: translate(-7px, 0);
    text-shadow: -4px 0 var(--color-cyan), 4px 0 var(--color-accent);
    animation-timing-function: steps(1, end);
  }
  90% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  91% {
    clip-path: inset(58% 0 6% 0);
    transform: translate(6px, 1px);
    text-shadow: 4px 0 var(--color-accent), -4px 0 var(--color-cyan);
    animation-timing-function: steps(1, end);
  }
  93% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
    animation-timing-function: steps(1, end);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    text-shadow:
      0 0 4px currentColor, 0 0 10px currentColor, 0 0 18px currentColor,
      0 0 38px rgba(252, 238, 10, .5), 0 0 70px rgba(255, 0, 60, .22);
  }
}

.title-banner {
  animation: banner-electric 3.4s ease-in-out infinite;
}

/* Respiración neón para textos secundarios (glow que sube y baja) */
@keyframes neon-breathe {
  0%, 100% {
    text-shadow:
      0 0 4px currentColor,
      0 0 9px currentColor,
      0 0 16px currentColor,
      0 0 30px currentColor;
  }
  50% {
    text-shadow:
      0 0 2px currentColor,
      0 0 5px currentColor,
      0 0 9px currentColor,
      0 0 16px currentColor;
  }
}

main h2,
legend,
summary {
  animation: neon-breathe 2.6s ease-in-out infinite;
}

/* Parpadeo tipo letrero de neón en el logotipo, combinado con su respiración */
@keyframes neon-flicker {
  0%, 3%, 6%, 100% { opacity: 1; }
  4% { opacity: .4; }
  5% { opacity: .85; }
}

.title a {
  animation: neon-flicker 3s infinite, neon-breathe 1.8s ease-in-out infinite;
}

/*
  Difuminación de luz: halo borroso detrás del logotipo y los títulos que
  simula la luz que un tubo de neón real proyecta sobre la superficie
  donde está montado.
*/
@keyframes neon-halo {
  0%, 100% {
    opacity: .15;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: .2;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.title,
main h1,
.title-banner {
  position: relative;
  padding: 12px;
}

.title::before,
main h1::before,
.title-banner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 260%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(252, 238, 10, .22) 0%, rgba(252, 238, 10, .08) 45%, transparent 72%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
  animation: neon-halo 3.6s ease-in-out infinite;
}

/*
  Vetas de ruido RGB tipo datamosh, sincronizadas con la ráfaga de
  neon-glitch: aparecen y saltan de posición en los mismos porcentajes
  (74/80/84/88/92/96%) para que se lean como parte del mismo corte.
*/
@keyframes neon-streaks {
  0%, 70% {
    opacity: 0;
    background-position: 0 0;
  }
  74% {
    opacity: .85;
    background-position: -35% 0;
  }
  80% {
    opacity: .5;
    background-position: 60% 0;
  }
  84% {
    opacity: .9;
    background-position: -18% 0;
  }
  88% {
    opacity: .4;
    background-position: 42% 0;
  }
  92% {
    opacity: .8;
    background-position: -50% 0;
  }
  96% {
    opacity: .3;
    background-position: 22% 0;
  }
  99%, 100% {
    opacity: 0;
    background-position: 0 0;
  }
}

main h1::after,
.title-banner::after {
  content: "";
  position: absolute;
  inset: -35% -8%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 7px,
      rgba(0, 240, 255, .55) 7px 8px,
      transparent 8px 21px,
      rgba(255, 0, 60, .5) 21px 22px,
      transparent 22px 33px,
      rgba(252, 238, 10, .45) 33px 34px,
      transparent 34px 46px,
      rgba(0, 240, 255, .35) 46px 47px,
      transparent 47px 60px
    );
  background-size: 220% 100%;
  animation: neon-streaks 8s steps(1, end) infinite;
}

/* Vetas del banner: mismo patrón irregular que banner-electric (ráfagas dobles + calmas variables) */
@keyframes banner-streaks {
  0%, 36% {
    opacity: 0;
    background-position: 0 0;
  }
  39% {
    opacity: .85;
    background-position: -35% 0;
  }
  41% {
    opacity: 0;
    background-position: 0 0;
  }
  42% {
    opacity: .65;
    background-position: 55% 0;
  }
  45% {
    opacity: 0;
    background-position: 0 0;
  }
  57% {
    opacity: .9;
    background-position: -50% 0;
  }
  59% {
    opacity: 0;
    background-position: 0 0;
  }
  60% {
    opacity: .5;
    background-position: 40% 0;
  }
  61% {
    opacity: .75;
    background-position: -22% 0;
  }
  63% {
    opacity: 0;
    background-position: 0 0;
  }
  77% {
    opacity: .8;
    background-position: -20% 0;
  }
  79% {
    opacity: 0;
    background-position: 0 0;
  }
  88% {
    opacity: .85;
    background-position: -35% 0;
  }
  90% {
    opacity: 0;
    background-position: 0 0;
  }
  91% {
    opacity: .6;
    background-position: 55% 0;
  }
  93%, 100% {
    opacity: 0;
    background-position: 0 0;
  }
}

.title-banner::after {
  animation: banner-streaks 3.4s steps(1, end) infinite;
}

/*
  Pulso de resplandor en botones: la sombra respira en reposo (amarillo) y
  respira más rápido en hover/focus (cian). Los botones secundarios
  (reset/button) quedan estáticos para no competir visualmente con el CTA.
*/
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(252, 238, 10, .4); }
  50% { box-shadow: 0 0 22px rgba(252, 238, 10, .7); }
}

@keyframes glow-pulse-cyan {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 240, 255, .6); }
  50% { box-shadow: 0 0 26px rgba(0, 240, 255, .95); }
}

button {
  animation: glow-pulse 2.5s ease-in-out infinite;
}

button:hover,
button:focus {
  animation: glow-pulse-cyan 1.3s ease-in-out infinite;
}

button[type="reset"],
button[type="button"] {
  animation: none;
}

button[type="reset"]:hover,
button[type="button"]:hover {
  animation: none;
}

/* Barrido de líneas de escaneo tipo CRT sobre toda la página */
@keyframes scanline-move {
  from { background-position: 0 0; }
  to { background-position: 0 100px; }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .035) 0px,
    rgba(255, 255, 255, .035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  animation: scanline-move 8s linear infinite;
}

/*
  Entrada de paneles y filas al cargar la página: suben y aparecen con un
  ligero desfase. "both" conserva el estado inicial (opacity:0) antes de
  que arranque la animación, evitando un parpadeo del contenido.
*/
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main > section,
main > article,
main > aside {
  animation: fade-in-up .6s ease both;
}

figure img {
  animation: fade-in-up .7s ease both;
}

tbody tr {
  animation: fade-in-up .45s ease both;
}

/* Escalonado manual por fila (nth-child) para que no entren todas a la vez */
tbody tr:nth-child(1) { animation-delay: .05s; }
tbody tr:nth-child(2) { animation-delay: .1s; }
tbody tr:nth-child(3) { animation-delay: .15s; }
tbody tr:nth-child(4) { animation-delay: .2s; }
tbody tr:nth-child(5) { animation-delay: .25s; }
tbody tr:nth-child(6) { animation-delay: .3s; }
tbody tr:nth-child(7) { animation-delay: .35s; }
tbody tr:nth-child(8) { animation-delay: .4s; }
tbody tr:nth-child(9) { animation-delay: .45s; }
tbody tr:nth-child(10) { animation-delay: .5s; }

/* Respeta la preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  main h1,
  .title-banner,
  .title a,
  main h2,
  legend,
  summary,
  button,
  button:hover,
  button:focus,
  body::after,
  main > section,
  main > article,
  main > aside,
  figure img,
  tbody tr {
    animation: none;
  }

  .title::before,
  main h1::before,
  .title-banner::before,
  main h1::after,
  .title-banner::after {
    display: none;
  }
}