@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rock+Salt&family=Schoolbell&display=swap');
:root{--color-1: #ffffff;
  --color-2: #7e7e7e;
  --color-3: #1B1E4B;
  --color-4: #080a18;
}

* {

            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
body {
    font-family: 'IBM Plex Mono';
    color: var(--color-1);
    overflow-x: hidden;
    min-height: 100vh;

    /* 1️⃣  Primero el degradado, luego el GIF                  */
    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.123) 0%,
            rgba(0,0,0,0.616) 90%
        ),
        url('/img/backg1.gif');

    /* 2️⃣  Le decimos: “el degradado mide 100 vh de alto,      *
     *      el GIF que use el tamaño por defecto (auto)”        */
    background-size: 100% 100vh, auto;

    /* 3️⃣  El degradado NO se repite; el GIF sí                */
    background-repeat: no-repeat, repeat;

    /* 4️⃣  Si quieres que el degradado no se mueva al hacer    *
     *      scroll, cámbialo a fixed; el GIF lo dejamos scroll  */
    background-attachment: fixed, scroll;

    background-position: center top;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/smilies/smi-1/smi28.cur), auto !important;} /* End https://www.cursors-4u.com */

    
    
    @keyframes glowPulse {
      0% { 
        text-shadow: 
          0 0 20px #ffffff,
          0 0 40px #ffffff,
          0 0 60px #ffffff;
        transform: scale(1);
      }
      100% { 
        text-shadow: 
          0 0 30px #ffffff,
          0 0 60px #ffffff,
          0 0 90px #ffffff,
          0 0 120px #ffffff;
        transform: scale(1.05);
      }
    }
    
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-10px); }
      60% { transform: translateY(-5px); }
    }

        
        
    .header {
      padding: 10px;
      width: auto;
      text-align: center;
      margin: 0px auto;
      max-width: 1162px;
      min-height: 255px;
      position: relative;
      overflow: visible;
      box-shadow: 0px;
      padding: 0px;
      padding-bottom: 20px;
      margin-top: 0px;
      background-image: url('/img/cienback.gif');
      background-size: 1162px 255px;
      background-repeat: no-repeat;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
        
        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            animation: scan 3s linear infinite;
            pointer-events: none;
        }
        
        
        .header h1 {
            font-family: 'Rock Salt', cursive;
            font-size: 5em;
        color: #ffffff;
            position: relative;
            z-index: 2;
            margin: 0;
            padding: 0px;
            text-shadow: 
                2px 2px 0px #ff0000, 
                4px 4px 0px #00ffff,
                0 0 20px #ffffff,
                0 0 40px #ff00ff;
        }
        
        .header .tagline {
            font-size: 1.2em;
            color: var(--color-1);
            font-family: 'Electrolize';
            position: relative;
            z-index: 2;
            margin: 0px;
            padding: 0px;
            text-shadow: 
                1px 1px 2px #000
        }
        
        /* Glitch effects for letters */
        .glitch-letter {
            display: inline-block;
            position: relative;
        }
        
        .glitch-letter::before,
        .glitch-letter::after {
            content: attr(data-letter);
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        
        .glitch-letter::before {
            color: var(--color-4);
            z-index: -1;
        }
        
        .glitch-letter::after {
            color: #00ffff;
            z-index: -2;
        }
        
        
                
        /* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            
        }

        /* Navegación horizontal estilo pestañas */
            .nav-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            border-bottom: 2px solid var(--color-1);
            margin-bottom: 10px;
            box-shadow: 2px 2px var(--color-3), 3px 3px var(--color-4);
            }

        .nav-tabs::-webkit-scrollbar {
            display: none;
        }

        .nav-tab {
            background: linear-gradient(180deg, var(--color-4) 0%, var(--color-3) 100%);
            color: white;
            text-decoration: none;
            font-family: "IBM Plex Mono", monospace;
            font-weight: bold;
            font-size: 0.9em;
            border: 2px solid transparent;
            border-bottom: none;
            border-radius: 1px 1px 0 0;
            position: relative;
            transition: all 0.3s ease;
            text-shadow: 1px 1px var(--color-4);
            white-space: nowrap;
            flex: 1 1 120px;
            min-width: 120px;
            text-align: center;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .nav-tab img {
          filter: grayscale(1);
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }

        .nav-tab:hover img{
          filter: grayscale(0);
        }

        .nav-tab:hover {
            background: var(--color-1);
            color: black;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px var(--color-1);
            border-color: var(--color-1);
        }

        .nav-tab.active {
            background: var(--color-1);
            color: black;
            border-color: var(--color-1);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px white;
        }
        .nav-tab.active img{
          filter: grayscale(0);
        }

        /* Sidebar movido a la derecha del main content */
            .content-wrapper{
                display:flex;
                gap:10px;
                position:relative;   /* ⬅︎ NUEVO */
            }


        .sidebar {
            width: 250px;
            border: 2px solid var(--color-1);
            box-shadow: 2px 2px var(--color-3), 3px 3px var(--color-4);
            border-radius: 0px 0px 0px;
            padding: 20px;
            padding-bottom: 0px;
            height: fit-content;
                /* URL de tu imagen patrón */
            background-image:  linear-gradient(180deg,rgba(0, 0, 0, 0.575) 0%, rgba(255, 255, 255, 0) 50%), url('/img/backg1.png');
            /* hace que la imagen se repita en x e y */
            background-repeat: repeat;
            /* fija el fondo respecto a la ventana, no al elemento */
    background-attachment: scroll;
    background-position: center top;
            /* si quieres que el container ocupe toda la ventana */
        }

        .sidebarimg-cont{
          align-items: center;
          text-align: center;
        }

        .echoside {
    display: flex;
    justify-content: center;
    align-items: center;    
}


        .sidebarimg{
          border: 1px ;
          max-width: 180px;
          width: 100%;
          height: auto;
          margin-bottom: 10px;
        }
        
        .sidebarimg2{
          max-width: 85px;
          width: 100%;
          height: auto;
        }

.top-right-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.top-right-button img {
  max-width: 120px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 4px #ffffff);
}

.top-right-button img:hover {
  transform: scale(1.1);
  filter: invert(1) drop-shadow(0 0 6px #ffffff);
}

/* Mostrar en escritorio, ocultar en móvil */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
    text-align: center;
    margin-top: 15px;
  }

  .mobile-only img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .mobile-only img:hover {
    transform: scale(1.1);
    filter: invert(1);
  }
}



                        .gradient-border-1 {
            border: 2px solid transparent;
            background: 
                linear-gradient(var(--color-3), var(--color-3)) padding-box,
                linear-gradient(
                    90deg,
                    var(--color-1) 0%,
                    var(--color-3) 25%,
                    var(--color-1) 50%,
                    var(--color-3) 75%,
                    var(--color-1) 100%
                ) border-box;
            background-size: 300% 100%;
            animation: slideGradient 8s ease-in-out infinite;
        }

        @keyframes slideGradient {
            0%, 100% { background-position: 0% 0%; }
            50% { background-position: 100% 0%; }
        }

        
        .sidebar h3 {
            color: var(--color-1);
            font-family: "IBM Plex Mono", monospace;
            text-shadow: 1px 1px 1px var(--color-2);
            font-size: 1.5em;
            text-align: center;
        }
        
        .social-links {
            margin-top: 20px;
            font-family: "Electrolize";
            text-align: center;
            margin-bottom: 20px;
        }
        
        .social-links h4 {
            color: var(--color-1);
            margin-bottom: 10px;
        }
        
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

                .button-icon {
        width: 88px;
        height: 31px;
        transition: transform 0.3s ease;
        }

        .button-icon:hover {
        transform: scale(1.1);
        filter: drop-shadow(1px 1px 5px rgba(255, 255, 255, 0.137));
        }
                .music-icons img {
        width: 24px;
        height: 24px;
        filter: brightness(1.5); /* Mejora la visibilidad en fondos oscuros */
        transition: transform 0.3s ease, filter 0.3s ease;
        }

        .music-icons img:hover {
        transform: scale(1.2);
        filter: brightness(2); /* Aumenta brillo al hacer hover */
        }
        .music-icons {
        color: white;
        display: flex;
        justify-content: center;
        gap: 7px;
        margin: 10px;
        }
        .music-icons .fa-brands {
  font-size: 20px;         /* Tamaño (ajustable) */
  color: #ffffff;          /* Color cian claro por ejemplo */
  transition: transform 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

.music-icons .fa-brands:hover {
  transform: scale(1.2);
  color: #ffffff;          /* Cambia a blanco al hacer hover */
}




        
        .social-icon {
            width: 30px;
            height: 30px;
            background: var(--color-4);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border-radius: 50%;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            transform: rotate(360deg) scale(1.2);
            box-shadow: 0 0 15px currentColor;
        }
        
        /* Main Content */
        .main-content {
            flex: 1;
            border: 2px solid var(--color-1);
            border-radius: 0px 0px 0px 0px;
            padding: 30px;
            box-shadow: 2px 2px var(--color-3), 3px 3px var(--color-4);
                            /* URL de tu imagen patrón */
            background-image:  linear-gradient(180deg,rgba(0, 0, 0, 0.575) 0%, rgba(255, 255, 255, 0) 50%), url('/img/backg1.png');
            /* hace que la imagen se repita en x e y */
            background-repeat: repeat;
            /* fija el fondo respecto a la ventana, no al elemento */
    background-attachment: scroll;
    background-position: center top;
        }
        
        .welcome-section {
          font-family: "IBM Plex Mono";
            text-align: center;
            margin-bottom: 40px;
            
        }

        
        .welcome-section h2 {
            color: white;
            font-family: 'Rock Salt';
            text-shadow: 1px 1px var(--color-3),2px 2px var(--color-4);
            font-size: 24px;
            margin-bottom: 20px;
            animation: bounce 2s infinite;
            text-shadow: 
                0 0 10px rgba(255, 255, 255, 0.479);
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-7px); }
            60% { transform: translateY(-5px); }
        }
        
        .character-art {
          width: 100%;
            height: auto;
            align-items: center;
            justify-content: center;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .bio-text {
            border: 1px solid var(--color-3);
            border-radius: 1px;
            padding: 20px;
            margin: 20px 0;
            font-size: 1.1em;
            line-height: 1.6;
            color: #ffffff;
        }
        
        .section {
            margin: 30px 0;
            border: 1px solid var(--color-1);
            border-radius: 2px;
            background: var(--color-4);
        }

                .sectionimg {
            margin: 30px 0;
            border: 1px solid var(--color-1);
            border-radius: 2px;
            background: var(--color-4);
            width: 100%;
            height: auto;
            align-items: center;
            text-align: center;
                background-image: 
        url('/img/backg1.gif');
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center top;
        }

        .sectioncont{
          margin: 20px;
        }
        
        .section h3 {
            color: white;
            font-family: 'Schoolbell';
            font-size: 1.8em;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .news-item {
            background: var(--color-4);
            border-left: 4px solid var(--color-1);
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }

        .news-item a{
            color: #00ff00;
        }
        
        .news-date {
            color: var(--color-1);
            text-shadow: 
                0 0 20px white;
            font-weight: bold;
            font-size: 0.9em;
        }
        
        .blinking-text {
            animation: blink 1s infinite;
            color: var(--color-1);
            font-weight: bold;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        

        .menu{
            color: black;
            text-shadow: 1px 1px 1px var(--color-2);
            font-size: larger ;
            padding: 3px;
            font-family: "Electrolize";
            background: white;
            padding-left: 10px;
            border-bottom: 2px solid;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        /* CRT Scanline Filter */
        .crt-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            background: 
                linear-gradient(
                    0deg,
                    transparent 0%,
                    rgba(0, 0, 0, 0.1) 50%,
                    transparent 50%,
                    rgba(0, 0, 0, 0.1) 100%
                ),
                linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(0, 0, 0, 0.1) 50%,
                    transparent 50%,
                    rgba(0, 0, 0, 0.1) 100%
                );
            background-size: 100% 4px, 4px 100%;
            animation: scanlines 0.1s linear infinite, vscanlines 0.15s linear infinite;
        }

        @keyframes scanlines {
            0% { background-position: 0 0, 0 0; }
            100% { background-position: 0 4px, 0 0; }
        }

        @keyframes vscanlines {
            0% { background-position: 0 0, 0 0; }
            100% { background-position: 0 0, 4px 0; }
        }

                @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

            .marquee-container {
      background-color: #ffffff;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      box-sizing: border-box;
      border-top: 2px solid black;
      border-bottom: 2px solid black;
    }

    .marquee-text {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 20s linear infinite;
      font-size: 1rem;
      color: black;
      font-weight: bold;
      font-family: 'IBM Plex Mono', monospace;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    /* Transición estilo apagado de TV */
@keyframes tvOff {
  0% {
    opacity: 1;
    transform: scaleY(1);
    filter: brightness(1);
  }
  50% {
    opacity: 0;
    transform: scaleY(0.05);
    filter: brightness(5);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
    filter: brightness(1);
  }
}

.tv-animate {
  animation: tvOff 0.4s ease-in-out;
}

.character-frame {
  width: 100%;
  max-width: 833px;
  aspect-ratio: 16 / 7.5; /* Aproximación a tu marco, ajústala si hace falta */
  overflow: hidden;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-transition {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease-in-out;
}

/* Layout */
.card{
  width:180px;          /* adjust to your card’s real size */
  height:257px;
  perspective:1000px;    /* how strong the 3-D effect feels */
  position:relative;
  transition:transform .15s ease-out;
  transform-style:preserve-3d;      /* keep children on same 3-D plane */
  align-items: center;
  margin: auto;
}

/* Actual artwork */
.card>img{
  width:100%;height:100%;
  border-radius:10px;
  object-fit:cover;
  display:block;
  transform:translateZ(30px);       /* lifts the image so rotation feels deeper */
}

/* Moving flare/glare */
.card>.glare{
  pointer-events:none;              /* let the cursor through */
  position:absolute;inset:0;
  border-radius:10px;
  mix-blend-mode:screen;            /* brightens without blowing colors */
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,0) 60%);
  opacity:.4;transition:opacity .2s ease-out;
}
.card:hover .glare{opacity:.75;}


        .retro-terminal-h1 {
            font-size: 2.0rem;
            font-weight: normal;
            align-items: center;
            text-align: center;
            margin: auto;
            width: 100%;
            white-space: wrap;
            font-family: 'IBM Plex Mono', monospace;
            color: #ffffff;
            text-shadow: 1px 1px 1px var(--color-2);
        }
        
        .retro-cursor {
            display: inline-block;
            background-color: #ffffff;
            width: 3px;
            height: 25px;
            margin-left: 2px;
            animation: blink 1s infinite;
            opacity: 0;
        }
        
        @keyframes blink-caret {
            from, to {
                border-color: transparent;
            }
            50% {
                border-color: #ffffff;
            }
        }
        
        @keyframes blink {
            0%, 50% {
                opacity: 1;
            }
            51%, 100% {
                opacity: 0;
            }
        }


/* Bordes verticales con patrones - Agregar al final de style.css */

.main-content,
.sidebar{
    position: relative;          /* ← importante */
    z-index: 0;                  /* que queden detrás de su propio contenido */
}

/* 2 ▸ Borde izquierdo (fuera del <main>) */
.main-content::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;                    /* se alarga solo lo que mide <main> */
    left:0;                      /* pegado al borde interno */
    width:48px;                  /* ancho de tu tira */
    background:url('/img/pattern-border-main.png') repeat-y;
    background-size:48px auto;
    transform:translateX(-100%); /* lo “saca” fuera del main */
    pointer-events:none;

        /* ⬇︎ degradado que se va haciendo transparente al final */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
}

/* 3 ▸ Borde derecho (fuera del <aside class="sidebar">) */
.sidebar::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;                    /* se alarga solo lo que mide la sidebar */
    right:0;                     /* pegado al borde interno */
    width:48px;
    background:url('/img/pattern-border-sidebar.png') repeat-y;
    background-size:48px auto;
    transform:translateX(100%);  /* lo “saca” fuera de la sidebar */
    pointer-events:none;

        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
}

/* 4 ▸ Opcional: ocultar en móvil */
@media (max-width:1200px){
    .main-content::before,
    .sidebar::after{ display:none; }
}