/* Estilos de Reveal.js */
@import url('https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css');

/* Estilos personalizados */
body {
    font-family: 'Roboto', sans-serif;
    color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='544' preserveAspectRatio='none' viewBox='0 0 1440 544'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1036%26quot%3b)' fill='none'%3e%3crect width='1440' height='544' x='0' y='0' fill='rgba(31%2c 32%2c 32%2c 1)'%3e%3c/rect%3e%3cpath d='M0 0L577.04 0L0 537.8z' filter='url(%23SvgjsFilter1037)' fill='rgba(41%2c 41%2c 41%2c 1)'%3e%3c/path%3e%3cpath d='M0 544L577.04 544L0 6.2000000000000455z' filter='url(%23SvgjsFilter1037)' fill='rgba(41%2c 41%2c 41%2c 1)'%3e%3c/path%3e%3cpath d='M1440 544L862.96 544L1440 6.2000000000000455z' filter='url(%23SvgjsFilter1037)' fill='rgba(41%2c 41%2c 41%2c 1)'%3e%3c/path%3e%3cpath d='M1440 0L862.96 0L1440 537.8z' filter='url(%23SvgjsFilter1037)' fill='rgba(41%2c 41%2c 41%2c 1)'%3e%3c/path%3e%3canimateTransform attributeName='transform' type='scale' values='1; 1.05; 1' dur='30s' repeatCount='indefinite'/%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1036'%3e%3crect width='1440' height='544' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cfilter height='130%25' id='SvgjsFilter1037'%3e%3cfeGaussianBlur in='SourceAlpha' stdDeviation='5' result='TopLeftG'%3e%3c/feGaussianBlur%3e%3cfeOffset dx='-5' dy='-5' in='TopLeftG' result='TopLeftO'%3e%3c/feOffset%3e%3cfeComponentTransfer in='TopLeftO' result='TopLeftC'%3e%3cfeFuncA type='linear' slope='0.7'%3e%3c/feFuncA%3e%3c/feComponentTransfer%3e%3cfeGaussianBlur in='SourceAlpha' stdDeviation='5' result='TopRightG'%3e%3c/feGaussianBlur%3e%3cfeOffset dx='5' dy='-5' in='TopRightG' result='TopRightO'%3e%3c/feOffset%3e%3cfeComponentTransfer in='TopRightO' result='TopRightC'%3e%3cfeFuncA type='linear' slope='0.7'%3e%3c/feFuncA%3e%3c/feComponentTransfer%3e%3cfeGaussianBlur in='SourceAlpha' stdDeviation='5' result='BottomLeftG'%3e%3c/feGaussianBlur%3e%3cfeOffset dx='-5' dy='5' in='BottomLeftG' result='BottomLeftO'%3e%3c/feOffset%3e%3cfeComponentTransfer in='BottomLeftO' result='BottomLeftC'%3e%3cfeFuncA type='linear' slope='0.7'%3e%3c/feFuncA%3e%3c/feComponentTransfer%3e%3cfeGaussianBlur in='SourceAlpha' stdDeviation='5' result='BottomRightG'%3e%3c/feGaussianBlur%3e%3cfeOffset dx='5' dy='5' in='BottomRightG' result='BottomRightO'%3e%3c/feOffset%3e%3cfeComponentTransfer in='BottomRightO' result='BottomRightC'%3e%3cfeFuncA type='linear' slope='0.7'%3e%3c/feFuncA%3e%3c/feComponentTransfer%3e%3cfeMerge%3e%3cfeMergeNode in='TopLeftC'%3e%3c/feMergeNode%3e%3cfeMergeNode in='TopRightC'%3e%3c/feMergeNode%3e%3cfeMergeNode in='BottomLeftC'%3e%3c/feMergeNode%3e%3cfeMergeNode in='BottomRightC'%3e%3c/feMergeNode%3e%3cfeMergeNode in='SourceGraphic'%3e%3c/feMergeNode%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center;
}

/* Estilos para el contenedor de las tarjetas */
.container {
    margin-top: 5em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan en varias líneas */
    gap: 20px; /* Espacio entre las tarjetas */
    padding-bottom: 20px; /* Añade un padding inferior para evitar desbordamiento */
    overflow: hidden; /* Evita que el contenido se desborde */
}

/* Estilos para el enlace de la tarjeta */
.card-link {
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Hereda el color del texto */
    display: block; /* Hace que el enlace ocupe todo el espacio de la tarjeta */
    flex: 1 1 150px; /* Flex-grow, flex-shrink, flex-basis */
    margin-right: 2em; /* Espacio entre las tarjetas */
    max-width: 100%; /* Asegura que la tarjeta no exceda el ancho del contenedor */
}

.card-link:last-child {
    margin-right: 0; /* Elimina el margen derecho de la última tarjeta */
}

/* Estilos para la tarjeta */
.card {
    box-sizing: border-box;
    border-radius: 2%;
    
    opacity: 1;
    transition: all 0.3s ease-in-out;

    
    height: auto; /* Asegura que la altura se ajuste al contenido */

}

.card:hover {
    cursor: pointer;
    opacity: 1;
    box-shadow: 1px 1px 25px 0px rgba(46, 61, 73, 0.4);
}

/* Estilos para el encabezado de la tarjeta */
.header {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centrar el logo */
    align-items: center;
    height: 100px; /* Altura del contenedor del logo */
}

/* Estilos para el logo */
.project-logo {
    width: 80px; /* Tamaño más compacto del logo */
    height: 80px;
    object-fit: contain; /* Asegura que el logo se ajuste sin distorsión */
}

/* Estilos para la descripción */
.descr {
    margin-top: 0;
    padding: 1em 1.5em 0 1.5em; /* Padding más compacto */
    color: #2e3d49;
    text-align: left; /* Texto alineado a la izquierda */
}

.descr h3 {
    font-size: 1em; /* Tamaño de fuente más pequeño */
    margin-bottom: 0.5em;
    color: #28536b; /* Color destacado para el título */
}

.descr p {
    font-size: 0.7em; /* Tamaño de fuente más pequeño */
    margin-top: 0.5em;
    padding-bottom: 0.5em;
    line-height: 1.3; /* Espaciado más compacto */
}

/* Estilos para el marco del código QR */
.qrcode-frame {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 5px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em auto; /* Centrar el QR */
    box-shadow: none;
    outline: none;
}

/* Estilos para el código QR */
.qrcode-frame img {
    width: 100px; /* Tamaño del QR */
    height: 100px;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Las tarjetas se apilan verticalmente */
        align-items: center; /* Centra las tarjetas en móviles */
        gap: 10px; /* Espacio reducido entre las tarjetas */
        padding-bottom: 10px; /* Ajuste del padding inferior en móviles */
    }

    .card-link {
        width: 90%; /* Las tarjetas ocupan casi todo el ancho en móviles */
        margin-right: 0; /* Elimina el margen derecho en móviles */
        margin-bottom: 1rem; /* Espacio entre las tarjetas */
    }

    .card {
        min-height: auto; /* Elimina la altura mínima en móviles */
    }

    .qrcode-frame img {
        width: 80px; /* Tamaño más pequeño del QR en móviles */
        height: 80px;
    }
}


/* Iconos flotantes */
.floating-icons {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.floating-icons i {
    position: absolute;
    color: rgba(255, 255, 255, 0.1); /* Iconos muy transparentes */
    font-size: 15rem; /* Tamaño de los iconos */
    animation: float 30s infinite ease-in-out; /* Animación lenta */
}

/* Posiciones y animaciones aleatorias */
.floating-icons i:nth-child(1) {
    top: 10%;
    left: 5%;
    animation-duration: 25s;
}

.floating-icons i:nth-child(2) {
    top: 20%;
    left: 80%;
    animation-duration: 30s;
}

.floating-icons i:nth-child(3) {
    top: 50%;
    left: 10%;
    animation-duration: 35s;
}

.floating-icons i:nth-child(4) {
    top: 70%;
    left: 70%;
    animation-duration: 40s;
}

.floating-icons i:nth-child(5) {
    top: 90%;
    left: 30%;
    animation-duration: 45s;
}

/* Animación flotante */
@keyframes float {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-20px, -20px); }
    50% { transform: translate(20px, 10px); }
    75% { transform: translate(-10px, 20px); }
    100% { transform: translate(0, 0); }
}

.reveal {
    background: transparent;
}

.reveal h2 {
    color: #55c7e8;
    font-size: 3rem;
    margin-bottom: 2rem;
    text-align: center;
}

.reveal ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 2.5rem;
    text-align: center;
    color: white;
}

.reveal ul li {
    margin: 1rem 0;
    line-height: 1.2;
    color: white;
}

.reveal ul li p {
    margin: 0;
    line-height: 3;
    color: white;
}

.reveal strong {
    font-weight: bold;
}

.reveal a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.reveal a:hover {
    text-decoration: none;
}

.reveal p {
    font-size: 1.4rem;
    margin-top: 1rem;
    text-align: center;
    line-height: 1;
    color: white;
}

.reveal ul li span {
    display: block;
    font-size: 1.5rem;
    color: #ccc;
    margin-top: 0.2rem;
}

.bitcoin-logo {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    z-index: 1000;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.bitcoin-logo:hover {
    transform: rotate(360deg) scale(1.2);
    filter: drop-shadow(0 0 10px #F7931A);
}

.undervan-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 250px;
    height: 80px;
    z-index: 1000;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.logos-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    width: 100vw; /* Ocupa toda la anchura de la pantalla */
    position: relative;
    margin: 0rem; /* Elimina márgenes predeterminados */
    padding-top: 4rem; /* Elimina paddings predeterminados */
}

.logos-container {
    display: flex;
    flex-direction: row; /* Cambiado a fila para dos columnas */
    align-items: center;
    justify-content: center;
    gap: 50px; /* Espacio entre las columnas */
}

.logos-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Espacio entre los logos */
}

.qrcode-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px; /* Ajustado para el nuevo tamaño del QR */
    height: 400px; /* Ajustado para el nuevo tamaño del QR */
    overflow: visible; /* Asegura que el QR no se recorte */
    border: 2px solid #f7931a; /* Borde naranja */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* Sombra para destacar */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto hover */
}

.qrcode-container:hover {
    transform: scale(1.05); /* Escala ligeramente al pasar el mouse */
    box-shadow: 0px 10px 20px rgba(0,0,0,0.5); /* Sombra más pronunciada al hover */
}

.bitcoin-logo-large {
    width: 20rem; /* Tamaño relativo */
    height: auto; /* Mantiene la proporción */
}

.undervan-logo-large {
    width: 25rem; /* Tamaño relativo */
    height: auto; /* Mantiene la proporción */
}

.first-slide-active .bitcoin-logo,
.first-slide-active .undervan-logo {
    display: none;
}

/* Estilos para la tabla con pestañas */
.tab {
    overflow: hidden;
    border-bottom: 2px solid #c5c5c5;
    display: flex;
    justify-content: center;
}

.tab button {
    background-color: inherit;
    color: #c5c5c5;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 1.2rem;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 5px;
    border-radius: 4px 4px 0 0;
}

.tab button:hover {
    background-color: #c5c5c5;
    color: #333;
}

.tab button.active {
    background-color: #c5c5c5;
    color: #333;
    border-bottom: 2px solid #f7931aff;
}

.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #c5c5c5;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estilos para el contenedor desplazable de las tablas */
.scrollable-table {
    max-height: 400px; /* Ajusta esta altura según tus necesidades */
    overflow-y: auto; /* Habilita el desplazamiento vertical */
    border: 1px solid #c5c5c5; /* Opcional: añade un borde para mejor visualización */
    margin: 10px 0; /* Opcional: añade un margen para separar del contenido */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    border-radius: 4px; /* Bordes redondeados */
}

/* Ajustes para las tablas dentro del contenedor desplazable */
.scrollable-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.1rem;
    margin: 0 auto;
    max-width: 90%;
}

.scrollable-table th, .scrollable-table td {
    border: 1px solid #c5c5c5;
    padding: 12px;
    text-align: left;
    color: white;
}

.scrollable-table th {
    background-color: #f7931aff;
    color: white;
    font-weight: bold;
}

.scrollable-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

.scrollable-table tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.scrollable-table a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.scrollable-table a:hover {
    text-decoration: underline;
}

/* Efectos de mouseover en los emojis */
.emoji {
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    text-decoration: none; /* Elimina el subrayado */
}

/* Animaciones específicas para cada emoji */
.emoji.globe:hover {
    animation: spin 1s linear infinite;
}

.emoji.swords:hover {
    animation: shake 0.5s ease-in-out infinite;
}

.emoji.game:hover {
    animation: bounce 0.5s ease-in-out infinite;
}

.emoji.lock:hover {
    animation: swing 0.5s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes swing {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

/* Efecto de parpadeo neon mejorado con bloom */
.blinking-neon {
    animation: neonBlink 5s infinite; /* Duración más larga para el efecto */
    filter: brightness(1); /* Filtro inicial */
}

@keyframes neonBlink {
    0% { opacity: 0.8; filter: brightness(1); } /* Inicio con un brillo moderado */
    20% { opacity: 1; filter: brightness(0.8); } /* Parpadeo suave */
    22% { opacity: 0; filter: brightness(1); } /* Parpadeo suave */
    25% { opacity: 0.9; filter: brightness(1); } /* Parpadeo suave */
    30% { opacity: 0.4; filter: brightness(0.8); } /* Parpadeo suave */
    34% { opacity: 1; filter: brightness(0.8); } /* Parpadeo suave */
    70% { opacity: 1; filter: brightness(1); } /* Parpadeo suave */
    71% { opacity: 0.9; filter: brightness(1); } /* Parpadeo suave */
    73% { opacity: 1; filter: brightness(1); } /* Parpadeo suave */
    80% { opacity: 1; filter: brightness(1.5) blur(2px); } /* Destello blanco con bloom */
    100% { opacity: 1; filter: brightness(1.5) blur(2px); } /* Se mantiene encendido con bloom */
}

/* Efecto Glitch para los títulos */
.glitch {
    position: relative;
    color: white;
    font-size: 3rem; /* Ajusta el tamaño según sea necesario */
    margin: 0 auto;
    text-align: center;
}

.glitch:before,
.glitch:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
}

.glitch:before {
    left: 1px;
    text-shadow: -150px 0 green;
    animation: noise-anim 9s infinite linear alternate-reverse;
}

.glitch:after {
    left: -1px;
    text-shadow: 3px 0 blue;
    animation: noise-anim-2 0.4s infinite linear alternate-reverse;
}

@keyframes noise-anim {
    0% { clip: rect(10px, 9999px, 20px, 0); }
    5% { clip: rect(30px, 9999px, 40px, 0); }
    10% { clip: rect(50px, 9999px, 60px, 0); }
    15% { clip: rect(70px, 9999px, 80px, 0); }
    20% { clip: rect(90px, 9999px, 100px, 0); }
    25% { clip: rect(110px, 9999px, 120px, 0); }
    30% { clip: rect(130px, 9999px, 140px, 0); }
    35% { clip: rect(150px, 9999px, 160px, 0); }
    40% { clip: rect(170px, 9999px, 180px, 0); }
    45% { clip: rect(190px, 9999px, 200px, 0); }
    50% { clip: rect(210px, 9999px, 220px, 0); }
    55% { clip: rect(230px, 9999px, 240px, 0); }
    60% { clip: rect(250px, 9999px, 260px, 0); }
    65% { clip: rect(270px, 9999px, 280px, 0); }
    70% { clip: rect(290px, 9999px, 300px, 0); }
    75% { clip: rect(310px, 9999px, 320px, 0); }
    80% { clip: rect(330px, 9999px, 340px, 0); }
    85% { clip: rect(350px, 9999px, 360px, 0); }
    90% { clip: rect(370px, 9999px, 380px, 0); }
    95% { clip: rect(390px, 9999px, 400px, 0); }
    100% { clip: rect(410px, 9999px, 420px, 0); }
}

@keyframes noise-anim-2 {
    0% { clip: rect(10px, 9999px, 20px, 0); }
    5% { clip: rect(30px, 9999px, 40px, 0); }
    10% { clip: rect(50px, 9999px, 60px, 0); }
    15% { clip: rect(70px, 9999px, 80px, 0); }
    20% { clip: rect(90px, 9999px, 100px, 0); }
    25% { clip: rect(110px, 9999px, 120px, 0); }
    30% { clip: rect(130px, 9999px, 140px, 0); }
    35% { clip: rect(150px, 9999px, 160px, 0); }
    40% { clip: rect(170px, 9999px, 180px, 0); }
    45% { clip: rect(190px, 9999px, 200px, 0); }
    50% { clip: rect(210px, 9999px, 220px, 0); }
    55% { clip: rect(230px, 9999px, 240px, 0); }
    60% { clip: rect(250px, 9999px, 260px, 0); }
    65% { clip: rect(270px, 9999px, 280px, 0); }
    70% { clip: rect(290px, 9999px, 300px, 0); }
    75% { clip: rect(310px, 9999px, 320px, 0); }
    80% { clip: rect(330px, 9999px, 340px, 0); }
    85% { clip: rect(350px, 9999px, 360px, 0); }
    90% { clip: rect(370px, 9999px, 380px, 0); }
    95% { clip: rect(390px, 9999px, 400px, 0); }
    100% { clip: rect(410px, 9999px, 420px, 0); }
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .logos-container {
        flex-direction: column;
    }

    .qrcode-container {
        width: 100%;
        height: auto;
        max-width: 300px; /* Ajusta este valor según sea necesario */
        margin-top: 20px; /* Añade espacio entre los logos y el código QR */
    }

    .scrollable-table {
        max-height: 500px; /* Altura más adecuada para móviles */
    }

    /* El resto de estilos para móviles se mantienen igual */
    .bitcoin-logo {
        font-size: 50%;
        width: 50px;
        height: 50px;
        bottom: 3rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .undervan-logo {
        width: 150px;
        height: 50px;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Sobrescribir estilos de Reveal.js para reducir espacios */
    .reveal .slides {
        padding: 10px !important; /* Aumentamos un poco el padding general */
    }

    .reveal .slides section {
        padding: 15px !important; /* Aumentamos el padding de las secciones */
        margin: 0 !important; /* Eliminamos el margen entre secciones */
    }

    .reveal h2 {
        font-size: 4rem !important; /* Aumentamos el tamaño de la fuente */
        margin-bottom: 1rem !important; /* Aumentamos el margen inferior */
    }

    .reveal ul {
        font-size: 3rem !important; /* Aumentamos el tamaño de la fuente */
        padding-left: 15px !important; /* Aumentamos el padding de las listas */
        margin: 0.5rem 0 !important; /* Añadimos un margen pequeño a las listas */
    }

    .reveal ul li {
        margin: 0.8rem 0 !important; /* Aumentamos el margen entre elementos de la lista */
        line-height: 1.4 !important; /* Aumentamos el espaciado entre líneas */
    }

    .reveal p {
        font-size: 1.8rem !important; /* Aumentamos el tamaño de la fuente */
        margin: 0.8rem 0 !important; /* Aumentamos el margen superior e inferior */
        line-height: 1.4 !important; /* Aumentamos el espaciado entre líneas */
    }

    .reveal ul li span {
        font-size: 1.2rem !important; /* Aumentamos el tamaño de la fuente */
        margin-top: 0.5rem !important; /* Aumentamos el margen superior */
    }

    .reveal a {
        padding: 3px !important; /* Aumentamos el padding de los enlaces */
    }
}