/* =====================================================
   PC TEC IMPORT - CONTACT CARD PREMIUM
   ===================================================== */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');



/* ================= VARIABLES ================= */


:root {

    --red: #ff003c;
    --red-light: #ff4773;
    --blue: #00d9ff;

    --background: #050816;

    --glass:
        rgba(15, 22, 45, .75);

    --glass-card:
        rgba(255, 255, 255, .08);


    --white: #ffffff;
    --gray: #aab3ca;


    --border:
        rgba(255, 255, 255, .15);


    --shadow:
        0 30px 80px rgba(0, 0, 0, .7);

}



/* ================= RESET ================= */


* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

    -webkit-tap-highlight-color: transparent;

}



html,
body {

    width: 100%;
    min-height: 100%;

}



/* ================= BODY ================= */


body {


    min-height: 100vh;


    display: flex;

    justify-content: center;

    align-items: center;


    padding: 25px;


    overflow-x: hidden;



    background:


        radial-gradient(circle at top,
            #1b2550,
            #050816 65%);



    color: var(--white);


}



/* ================= CANVAS ================= */


#fondo-tecnologico {


    position: fixed;


    inset: 0;


    width: 100%;

    height: 100%;


    z-index: 0;


    pointer-events: none;


}



/* ================= CONTENEDOR PRINCIPAL ================= */


.contenedor-principal {


    width: 100%;


    max-width: 460px;



    display: flex;


    flex-direction: column;



    align-items: center;



    gap: 28px;



    padding: 45px 32px;



    background:


        linear-gradient(145deg,

            rgba(255, 255, 255, .13),

            rgba(255, 255, 255, .04));



    backdrop-filter: blur(25px);



    border:

        1px solid var(--border);



    border-radius: 35px;



    box-shadow:


        var(--shadow),

        0 0 50px rgba(255, 0, 60, .15);



    position: relative;



    z-index: 2;



    animation:

        aparecer .8s ease;



}



@keyframes aparecer {


    from {


        opacity: 0;

        transform:

            translateY(40px) scale(.92);


    }



    to {


        opacity: 1;

        transform: none;


    }



}





/* =====================================================
   HEADER
===================================================== */



.cabecera-perfil {


    width: 100%;


    display: flex;


    flex-direction: column;


    align-items: center;


    text-align: center;


}




/* LOGO */


.contenedor-imagen {


    position: relative;


    margin-bottom: 20px;



}




.imagen-perfil {


    width: 135px;

    height: 135px;



    object-fit: cover;


    border-radius: 50%;



    border:

        4px solid white;



    box-shadow:


        0 0 30px var(--red);



    animation:

        brillo 3s infinite;



}



@keyframes brillo {


    50% {


        box-shadow:


            0 0 45px var(--red),

            0 0 80px rgba(255, 0, 60, .45);


    }



}




.insignia-verificada {


    position: absolute;



    right: 0;

    bottom: 8px;



    width: 36px;

    height: 36px;



    display: flex;

    align-items: center;

    justify-content: center;



    background:

        linear-gradient(135deg,

            var(--red),

            #990020);



    border-radius: 50%;



    border:

        3px solid #050816;



    font-size: .9rem;



}




/* TITULO */


.titulo-empresa {


    font-size: 2rem;


    font-weight: 800;


    letter-spacing: .5px;



    background:

        linear-gradient(90deg,

            white,

            var(--red-light),

            var(--blue));



    -webkit-background-clip: text;

    color: transparent;



    margin-bottom: 10px;



}




.ubicacion-empresa {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 8px;



    padding:

        8px 18px;



    border-radius: 30px;



    background:

        rgba(255, 0, 60, .15);



    border:

        1px solid rgba(255, 0, 60, .4);



    font-size: .85rem;



    font-weight: 600;



}



.descripcion-empresa {


    margin-top: 15px;


    max-width: 330px;


    color: var(--gray);


    font-size: .9rem;


    line-height: 1.6;



}





/* =====================================================
   CONTACTOS
===================================================== */



.seccion-enlaces {


    width: 100%;



    display: flex;


    flex-direction: column;



    gap: 16px;



}




.tarjeta-enlace {


    width: 100%;


    height: 75px;



    display: flex;


    align-items: center;



    padding:

        10px 18px;



    border-radius: 22px;



    text-decoration: none;



    color: white;



    background:

        var(--glass-card);



    border:

        1px solid var(--border);



    position: relative;


    overflow: hidden;



    transition: .35s;



}




.tarjeta-enlace:hover {


    transform:

        translateY(-6px);



    border-color:

        var(--red);



    box-shadow:


        0 0 35px rgba(255, 0, 60, .4);



}




.tarjeta-enlace::after {


    content: "";


    position: absolute;


    inset: 0;



    background:


        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .15),

            transparent);



    transform:

        translateX(-120%);



    transition: .7s;



}



.tarjeta-enlace:hover::after {


    transform:

        translateX(120%);



}





.icono-enlace {


    width: 55px;

    height: 55px;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 16px;



    background:

        rgba(255, 255, 255, .08);



    margin-right: 18px;



}




.icono-enlace i {


    font-size: 2rem;


}




.texto-enlace {


    display: flex;


    flex-direction: column;


    justify-content: center;



}



.texto-enlace h2 {


    font-size: 1.1rem;


    font-weight: 700;


    line-height: 1.2;


}



.texto-enlace p {


    font-size: .85rem;


    color: var(--gray);



}



.flecha-enlace {


    margin-left: auto;



    color:

        var(--red);



    font-size: 1.2rem;



    transition: .3s;



}



.tarjeta-enlace:hover .flecha-enlace {


    transform:

        translateX(8px);



}

/* =====================================================
   FOOTER
===================================================== */

.pie-pagina {
    width: 100%;
    text-align: center;
    font-size: .8rem;
    color:
        #8992aa;
    padding-top: 5px;
}





/* =====================================================
   RESPONSIVE
===================================================== */



@media(max-width:480px) {


    body {

        padding: 15px;

    }



    .contenedor-principal {


        padding:

            35px 20px;



        border-radius: 28px;



    }



    .imagen-perfil {


        width: 115px;

        height: 115px;


    }



    .titulo-empresa {


        font-size: 1.6rem;


    }



    .tarjeta-enlace {


        height: 70px;


    }



}