/* Contenedor principal de la sección. Asegura que ocupe todo el ancho y esté centrado. */
body {
  margin: 0; /* Elimina cualquier margen predeterminado del body */
  padding: 0; /* Elimina cualquier padding predeterminado */
  overflow: hidden; /* Oculta cualquier scroll que pueda aparecer */
  position: relative;
}
.main-menu {
  display: flex;
position: absolute;
  justify-content: center; /* o space-between si quieres distribuir */
  align-items: center;
    left: 0;
}

.videos-destacados {
position: absolute;
  width: 100%;
  height: 100vh; /* ¡Cambiamos min-height por height! */
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  box-sizing: border-box; /* Mantiene la caja del tamaño definido */
  /* padding: 20px 0; <-- ¡Eliminamos el padding! */
}
/* El contenedor de la cuadrícula. Corregimos el corte inferior. */
.videos-container-3d1,
.videos-container-3d2,
.videos-container-3d3,
.videos-container-3d4 {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
  animation: burbuja-animation 32s infinite;
  opacity: 0;
  pointer-events: none;
}
.videosContaineru {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
  animation: burbuja-animationuno 4s infinite;
  z-index: 3;
  pointer-events: none;
}/* Asignar animaciones a cada burbuja */
#burbujita1 { animation: Puburbujita1 7s infinite; }
#burbujita2 { animation: Puburbujita2 7s infinite; }
#burbujita3 { animation: Puburbujita3 7s infinite; }
#burbujita4 { animation: Puburbujita4 7s infinite; }
#burbujita5 { animation: Puburbujita5 7s infinite; }
#burbujita6 { animation: Puburbujita6 7s infinite; }
#burbujita7 { animation: Puburbujita7 7s infinite; }
#burbujita8 { animation: Puburbujita8 7s infinite; }
#burbujita9 { animation: Puburbujita9 7s infinite; }

/* Animaciones “locas” a partir del 75% */
@keyframes Puburbujita1 {
  75% { opacity: 1; }
  80% { opacity: 0; }
  88% { opacity: 1; }
  93% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes Puburbujita2 {
  75% { opacity: 1; }
  78% { opacity: 0; }
  85% { opacity: 1; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes Puburbujita3 {
  75% { opacity: 1; }
  82% { opacity: 0; }
  87% { opacity: 1; }
  91% { opacity: 0; }
  96% { opacity: 1; }
  100% { opacity: 0.7; }
}

@keyframes Puburbujita4 {
  75% { opacity: 1; }
  79% { opacity: 0; }
  83% { opacity: 1; }
  97% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes Puburbujita5 {
  75% { opacity: 1; }
  81% { opacity: 0; }
  84% { opacity: 1; }
  89% { opacity: 0; }
  92% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes Puburbujita6 {
  75% { opacity: 1; }
  85% { opacity: 0; }
  88% { opacity: 1; }
  94% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes Puburbujita7 {
  75% { opacity: 1; }
  77% { opacity: 0; }
  86% { opacity: 1; }
  90% { opacity: 0; }
  98% { opacity: 1; }
  100% { opacity: 0.5; }
}

@keyframes Puburbujita8 {
  75% { opacity: 1; }
  80% { opacity: 0; }
  83% { opacity: 1; }
  87% { opacity: 0; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes Puburbujita9 {
  75% { opacity: 1; }
  79% { opacity: 0; }
  85% { opacity: 1; }
  88% { opacity: 0; }
  92% { opacity: 1; }
  100% { opacity: 1; }
}
.mente {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    color: #39ff14;
    border-radius: 8px;
    font-size: 1.38em;
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px #00ff99, 0 0 2px #000;
    pointer-events: none;
    z-index: 1;
    text-align: center;
    animation: mentecontrola 3s infinite;
}

@keyframes mentecontrola {
    from {
        width: 0;
        opacity: 0.2;
    }

    30% {
        width: 0;
        opacity: 0.7;
    }
    90% {
        width: 100%;
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

@keyframes burbuja-animationuno {
    0% {
        transform: scale(0.03);
        opacity: 1;
        filter: brightness(5.7);
    }
    6% {
        transform: scale(0.02);
        opacity: 1;
        filter: brightness(5.7);
    }
    14% {

        transform: scale(0.07);
        filter: brightness(2.1);
    }
    19% {
        opacity: 0;

        filter: brightness(1);
    }
    22% {

        transform: scale(0.09);
        opacity: 0;
    }
    38% {

        opacity: 0;
    }
    55% {

        opacity: 1;
        filter: brightness(2.1);
    }
    68% {

        opacity: 0;
    }
    75% {

        opacity: 1;
    }
    100% {
        transform: scale(0.05);
        opacity: 1;
    }
}
 
/* Estilos de cada burbuja individual */
.burbuja-video {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2px solid #00ff99;
    box-shadow: 0 0 10px #00ff99;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.burbuja-video:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px #00ff99;
}

/* Estilos de las imágenes dentro de la burbuja */
.video-preview-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.video-preview-jpg, .video-preview-png {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transition: opacity 0.3s ease;
}

.video-preview-png {
    opacity: 0;
}
/* Sección completa */
.videos-destacados {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Burbuja circular */
.burbuja-video {
    width: 220px;         /* ancho fijo */
    height: 220px;        /* altura fija igual al ancho */
    border-radius: 50%;   /* círculo perfecto */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 153, 0.1);
    border: 3px solid #00ff99;
    box-shadow: 0 0 24px #00ff99, 0 0 12px #39ff14;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.burbuja-video:hover {
    transform: scale(1.08);
    box-shadow: 0 0 40px #00ff99, 0 0 20px #39ff14;
}

/* Ajuste para imágenes internas */
.burbuja-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Animación para las burbujas individuales */
@keyframes burbuja-animation {
    0% {
        transform: scale(0.02);
        opacity: 1;
        filter: brightness(5.7);
    }
    6% {

        transform: scale(0.05);
        filter: brightness(2.1);
    }
    15% {

        opacity: 1;
        filter: brightness(1);
    }
    22% {

        opacity: 1;
    }
    28% {

        opacity: 0;
        visibility: hidden;
    }
    75% {

        opacity: 0;
    }
    100% {
        transform: scale(20);
        opacity: 0;
    }
}