/* Side */
   .sidebar-container {
       /* padding: 5px 20px 20px 20px; */
       background-color: #fff;
       /* border-radius: 10px; */
       border: 1px solid #eaeaea;
       /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); */
       max-width: 230px;
       /* Ancho máximo para el sidebar */
       margin-top: 2.23rem;
       /* Centrar el sidebar en la página */
   }

   /* .category-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
       cursor: pointer;
       color: var(--color-principal);
       font-weight: 500;
       border-bottom: 1px solid #eee;
   } */

   .category-item {
       position: relative;
       /* Necesario para posicionar el ::before */
       width: 100%;
       /* margin-top: 10px; */
       border-bottom: 1px solid #eaeaea;
       padding-bottom: 10px;
       padding-top: 10px;
       color: black;
       overflow: hidden;
       /* Oculta lo que se desborda del ::before */
   }

   .category-principal {
       position: relative;
       /* Necesario para posicionar el ::before */
       width: 100%;
       /* margin-top: 10px; */
       border-bottom: 1px solid #eaeaea;
       padding-bottom: 10px;
       padding-top: 10px;
       color: black;
       overflow: hidden;
       color: white;
       font-family: "Ubuntu-Medium";
       background-color: var(--Blue-Green);
   }

   .category-item span a {
       color: var(--color-principal);
   }

   /* Pseudo-elemento para crear el fondo animado */
   .category-item::before {
       content: "";
       position: absolute;
       top: 0;
       left: -100%;
       /* Comienza fuera de la vista */
       width: 100%;
       height: 100%;
       background-color: var(--color-secundario);
       transition: left 0.5s linear;
       z-index: 0;
       /* Coloca detrás del contenido */
   }

   /* Hover en el li mueve el pseudo-elemento de izquierda a derecha */
   .category-item:hover::before {
       left: 0;
   }

   /* Asegura que el contenido esté encima del ::before */
   .category-name {
       position: relative;
       z-index: 1;
       color: black;
       transition: color 0.5s linear;
   }

   .category-item:hover .category-name a {
       color: white;
   }

   .category-list {
       list-style: none;
       padding-left: 0;
       margin-top: 10px;
       margin-bottom: 0;
   }

   .category-list li {
       padding: 8px 0 8px 15px;
       color: #666;
       font-size: 0.95rem;
       cursor: pointer;
   }

   .category-list li:hover {
       color: #007bff;
   }

   @keyframes rotate-border {
       to {
           /* Gira el gradiente cónico 360 grados */
           transform: rotate(1turn);
       }
   }

   /* * 2. Definición de la Animación de Rotación
         */
   @keyframes rotate-border {
       to {
           /* Gira el gradiente cónico 360 grados */
           transform: rotate(1turn);
       }
   }

   /* * 3. Estilo del Contenedor Animado (TU CLASE: .mundial-2026)
         * Este div actúa como el wrapper para la animación del borde.
         */
   .mundial-2026 {
       /* Necesario para que la animación funcione y el borde rote */
       position: relative;
       z-index: 1;
       /* Estilos de contorno */

       overflow: hidden;
       padding: 4px;
       /* Espacio para que el gradiente sea visible (el grosor del borde) */
       box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7);
       /* Asegura que el div solo ocupe el espacio del contenido */
       display: inline-block;
   }

   /* * 4. Creación del Borde Tricolor Animado (Pseudo-elemento ::before)
         * Se aplica directamente a la clase .mundial-2026.
         */
   .mundial-2026::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;

       /* Gradiente cónico con los colores solicitados: Verde, Rojo y Blanco */
       background: conic-gradient(from 0deg,
               #006847 0%,
               /* 1. Verde Oscuro */
               #CE1125 33%,
               /* 2. Rojo Burdeos */
               #FFFFFF 66%,
               /* 3. Blanco */
               #ffffff 100%
               /* Vuelve al primer color para un ciclo suave */
           );

       /* Eliminamos el desenfoque para un borde nítido */
       /* filter: blur(8px); */

       margin: -2px;
       /* Hace el borde visible */
       border-radius: 14px;
       z-index: -1;

       /* Aplicamos la animación de rotación, pero mucho más rápida (1.5 segundos) */
       animation: rotate-border 1.5s linear infinite;
   }

   /* * 5. Estilo del Contenido Principal (El enlace <a> dentro del div)
         * Esto le da al enlace el aspecto de botón y oculta el centro del gradiente.
         */
   .mundial-2026 span a {
       /* Necesario para que el padding y background funcionen correctamente */
       display: block;
       text-decoration: none;
       /* Quita el subrayado del enlace */

       /* Dimensiones y relleno */
       padding: 1rem 0rem;
       font-size: 1.1rem;
       font-family: "Ubuntu-Bold";

       /* Estilos de texto y fondo */
       color: #ffffff;
       background-color: var(--Phthalo-Green);
       /* Fondo del "botón" */

       /* Bordes y Transiciones */

       transition: background-color 0.3s ease, transform 0.1s;
   }

   /* Efectos de interacción en el enlace */
   .mundial-2026 span a:hover {
       background-color: var(--Philippine-Red);
       box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
   }

   .mundial-2026 span a:active {
       transform: scale(0.98);
   } 
 




   @keyframes parpadeo {

       0%,
       100% {
           background-color: #ce1127;
           /* Rojo */
       }

       25% {
           background-color: #0B453A;
           /* Verde */
       }

       50% {
           background-color: #ce1127;
           /* Rojo */
       }

       75% {
           background-color: #0B453A;
           /* Verde */
       }
   }

   /* Responsive */

   /* Tablets pequeñas en vertical (portrait) */
   @media (max-width: 767px) {
       .sidebar-container {
           display: none;
       }
   }

   /* Tablets medianas y grandes (horizontal y vertical) */
   @media (min-width: 768px) and (max-width: 1024px) {
       .sidebar-container {
           display: none;
       }
   }

   /* Laptops y pantallas pequeñas de escritorio */
   @media (min-width: 1025px) and (max-width: 1366px) {}

   /* Escritorios grandes y monitores widescreen */
   @media (min-width: 1367px) {}