@font-face {
    font-family: 'Poppins';
    src: url('fuentes/Poppins-Regular.woff2') format('woff2'),
         url('fuentes/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fuentes/Poppins-Bold.woff2') format('woff2'),
         url('fuentes/Poppins-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


:root{

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

html {
    scroll-behavior: smooth;
}

body {
    /*padding-bottom: 100px;*/
    padding: 100px 20px;
}

body {
            width: 100%;
            background-image: url("../fondo_compressed.svg");
            min-height: 100vh;
            background-repeat: no-repeat;

              background-position: top;

              background-size: cover;
            }

            ul {
                list-style: none;
            }

            .logo a {
                display: block;

              /*background: radial-gradient(
                circle at top left,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0.02) 100%
              );*/

              /* Escarcha: Desenfoque fuerte del fondo (ajusta los px según necesites) */
              backdrop-filter: blur(24px);
              -webkit-backdrop-filter: blur(24px); /* Soporte para Safari */

              /* Luz (borde brillante interno) y Profundidad (sombra externa) */
              box-shadow: 
                inset 1px 1px 2px rgba(255, 255, 255, 0.8), /* Luz al 80% */
                0 16px 32px rgba(0, 0, 0, 0.3); /* Profundidad */

              /* Un borde ultra fino ayuda a delimitar mejor el "cristal" */
              border: 1px solid rgba(255, 255, 255, 0.15);
              border-radius: 16px; /* Ajusta según el diseño de tu tarjeta */

              border-radius: 32px;
                background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
                    width: fit-content;
                padding: 48px;

                transition: 0.25s ease all;
            }

.content {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 96px;
    align-items: center;
}

.content .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.content .logos {
    gap: 32px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.content .wrap.iconos {
    gap: 24px;
    flex-direction: row;
}

.btn {
    color: #fff;
    padding: 12px 48px;
    border-radius: 24px;
    text-decoration: none;
}

.btn.n {
    /*background: #F1C40F;*/
    background: rgba(241, 196, 15, 0.30);
}

.btn.v {
    /*background: #531CB3;*/
    background: rgba(138, 56, 245, 0.30);;
}

h1, h2, p {
    text-align: center;
    color: #fff;
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    content: '';
    position: absolute;
    top: 0;
    transition: left 0.3s ease-in-out;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation-name: shine;
    animation-duration: 2.3s;
    animation-iteration-count: infinite;
    /*animation-delay: 1s;*/

}

.shine:hover {
    position: relative; /* Essential for positioning pseudo-element */
    overflow: hidden; /* Hides the shine when outside the btn.filled */
    /* Other btn.filled styles */
}

.shine:hover::before {
    left: 100%;
}

@keyframes shine {
    0% {
        left: 100%;
    }

    12% {
        left: -100%;
    }

    24% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@media (max-width: 767px) {

    body {

        background-image: url("../fondo_mobile_compressed.svg");
    }

    .logos {
        flex-direction: column;
        width: 100%;
    }
    .logo {
        width: 90%;

/*        align-items: center;
        justify-content: center;
*/    }
    .logo a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}