/*==================================================
  PREMIUM FOOTER
  PARTE 1/3
  Crystal Glass UI
  Inspired by Apple • Vercel • Linear
==================================================*/

/*==============================
ROOT
==============================*/

:root{

    --footer-bg:#071321;

    --glass:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.12);

    --white:#fff;
    --text:#dbe9f5;
    --text-light:rgba(255,255,255,.72);

    --primary:#59d8ff;
    --primary-2:#2aa9ff;
    --primary-3:#0d6efd;

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

    --shadow-hover:
        0 40px 100px rgba(0,170,255,.28);

    --radius:34px;

    --transition:.45s cubic-bezier(.2,.8,.2,1);

}

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

.footer-premium{

    position:relative;

    overflow:hidden;

    padding:180px 6% 70px;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(4,13,26,.85)
        ),

        var(--footer-bg);

}

/*==============================
MESH
==============================*/

.footer-mesh{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at 15% 15%,
    rgba(67,214,255,.18),
    transparent 32%),

    radial-gradient(circle at 85% 70%,
    rgba(0,110,255,.20),
    transparent 38%),

    radial-gradient(circle at center,
    rgba(255,255,255,.04),
    transparent 65%);

    filter:blur(50px);

}

/*==============================
GLOWS
==============================*/

.footer-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(160px);

    animation:footerFloat 12s ease-in-out infinite;

    opacity:.45;

}

.glow-left{

    width:700px;
    height:700px;

    background:#36d5ff;

    left:-280px;
    top:-220px;

}

.glow-right{

    width:750px;
    height:750px;

    background:#0068ff;

    right:-320px;
    bottom:-260px;

}

@keyframes footerFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-45px);

    }

}

/*==============================
CONTAINER
==============================*/

.footer-container{

    position:relative;

    z-index:2;

    max-width:980px;

    margin:auto;

    text-align:center;

}

/*==============================
CHIP
==============================*/

.footer-chip{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 26px;

    border-radius:999px;

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

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.16);

    color:#97ebff;

    font-weight:500;

    box-shadow:

        inset 0 1px rgba(255,255,255,.15);

    margin-bottom:35px;

}

/*==============================
TITLE
==============================*/

.footer-container h2{

    font-size:clamp(3rem,8vw,6rem);

    line-height:.95;

    font-weight:800;

    letter-spacing:-3px;

    color:var(--white);

    margin-bottom:30px;

}

.footer-container h2 span{

    background:

    linear-gradient(

    90deg,

    #ffffff,

    #7fe8ff,

    #b7ffff

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*==============================
DESCRIPTION
==============================*/

.footer-container p{

    max-width:720px;

    margin:auto;

    color:var(--text-light);

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:60px;

}

/*==============================
CTA
==============================*/

.footer-actions{

    display:flex;

    justify-content:center;

}

/*==============================
BUTTON
==============================*/

.footer-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    overflow:hidden;

    text-decoration:none;

    color:white;

    font-weight:700;

    font-size:1.1rem;

    padding:20px 42px;

    border-radius:22px;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-2),

    var(--primary-3)

    );

    box-shadow:

    0 25px 60px rgba(0,170,255,.32);

    transition:var(--transition);

}

/*==============================
BUTTON SHINE
==============================*/

.footer-btn::before{

    content:"";

    position:absolute;

    width:420px;

    height:90px;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );

    transform:rotate(-20deg);

    left:-420px;

    transition:1s;

}

.footer-btn:hover{

    transform:

    translateY(-6px)

    scale(1.02);

    box-shadow:

    var(--shadow-hover);

}

.footer-btn:hover::before{

    left:150%;

}

/*==============================
BUTTON PULSE
==============================*/

.footer-btn::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.18);

    animation:pulse 2.8s infinite;

}

@keyframes pulse{

    0%{

        opacity:.8;

        transform:scale(1);

    }

    70%{

        opacity:0;

        transform:scale(1.08);

    }

    100%{

        opacity:0;

    }

}

/*==============================
ANIMATED TEXT
==============================*/

.changing-text{

    display:inline-block;

    min-width:260px;

    transition:

    opacity .35s,

    transform .35s;

}

/*==============================
LIGHT LINE
==============================*/

.footer-divider{

    width:260px;

    height:2px;

    margin:90px auto 0;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--primary),

    transparent

    );

    filter:blur(.6px);

    opacity:.9;

}


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

.footer-bottom{

    position:relative;

    z-index:2;

    margin-top:90px;

    padding:80px 0 60px;

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:55px;

    border-top:1px solid rgba(255,255,255,.08);

}

/* Línea luminosa superior */

.footer-bottom::before{

    content:"";

    position:absolute;

    top:-1px;

    left:50%;

    transform:translateX(-50%);

    width:220px;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--primary),

        transparent

    );

    filter:blur(.7px);

}


/*==================================
COLUMNAS
==================================*/

.footer-column{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-column h4{

    color:var(--white);

    font-size:1.1rem;

    font-weight:700;

    margin-bottom:10px;

    letter-spacing:-.3px;

}


/*==================================
LOGO
==================================*/

.footer-logo{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:1.45rem;

    color:white;

    font-weight:700;

}

.footer-logo strong{

    color:#89ebff;

}

.footer-logo-icon{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

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

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(25px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.18),

        0 0 25px rgba(0,170,255,.18);

    font-size:28px;

}


/*==================================
DESCRIPCIÓN
==================================*/

.brand p{

    margin-top:8px;

    color:var(--text-light);

    line-height:1.9;

    max-width:310px;

}


/*==================================
LINKS
==================================*/

.footer-column a{

    display:flex;

    align-items:center;

    gap:10px;

    width:max-content;

    color:rgba(255,255,255,.65);

    text-decoration:none;

    transition:var(--transition);

    position:relative;

}


/* Línea inferior */

.footer-column a::after{

    content:"";

    position:absolute;

    bottom:-4px;

    left:0;

    width:0;

    height:1px;

    background:var(--primary);

    transition:.35s;

}


/* Hover */

.footer-column a:hover{

    color:#9aefff;

    transform:translateX(8px);

}

.footer-column a:hover::after{

    width:100%;

}


/*==================================
TEXTOS
==================================*/

.footer-column span{

    color:rgba(255,255,255,.62);

    line-height:1.8;

}


/*==================================
CONTACTO
==================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.footer-contact-icon{

    width:46px;

    height:46px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.15);

    color:#8ce9ff;

    flex-shrink:0;

}

.footer-contact-item div{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.footer-contact-item strong{

    color:white;

    font-size:.96rem;

}

.footer-contact-item small{

    color:rgba(255,255,255,.62);

}


/*==================================
BADGES
==================================*/

.footer-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    width:max-content;

    border-radius:999px;

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    color:#9feeff;

    font-size:.88rem;

}


/*==================================
SOCIAL
==================================*/

.footer-social{

    display:flex;

    gap:14px;

    margin-top:8px;

}

.footer-social a{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

    transition:var(--transition);

}

.footer-social a:hover{

    transform:

        translateY(-6px)

        rotate(6deg);

    background:rgba(80,215,255,.12);

    box-shadow:

        0 15px 40px rgba(0,170,255,.18);

}


/*==================================
DECORACIÓN
==================================*/

.footer-column{

    position:relative;

}

.footer-column::before{

    content:"";

    position:absolute;

    top:0;

    left:-28px;

    width:1px;

    height:100%;

    background:linear-gradient(

        transparent,

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

        transparent

    );

}

.footer-column:first-child::before{

    display:none;

}

.footer-copy{

    position:relative;

    z-index:2;

    margin-top:30px;

    padding-top:35px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-copy span{

    color:rgba(255,255,255,.55);

    font-size:.95rem;

    line-height:1.8;

}

.footer-copy-links{

    display:flex;

    gap:28px;

    flex-wrap:wrap;

}

.footer-copy-links a{

    position:relative;

    color:rgba(255,255,255,.55);

    text-decoration:none;

    transition:var(--transition);

}

.footer-copy-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:1px;

    background:var(--primary);

    transition:.35s;

}

.footer-copy-links a:hover{

    color:#9befff;

}

.footer-copy-links a:hover::after{

    width:100%;

}


/*==================================
GLASS OVERLAY
==================================*/

.footer-premium::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.05),

        transparent 25%

    );

    pointer-events:none;

}

.footer-premium::after{

    content:"";

    position:absolute;

    inset:0;

    backdrop-filter:blur(1px);

    pointer-events:none;

}


/*==================================
SHINE GENERAL
==================================*/

.footer-container,

.footer-bottom{

    position:relative;

    overflow:hidden;

}

.footer-container::after,

.footer-bottom::after{

    content:"";

    position:absolute;

    top:-120px;

    left:-40%;

    width:260px;

    height:180%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.06),

        transparent

    );

    transform:rotate(18deg);

    animation:footerShine 12s linear infinite;

    pointer-events:none;

}

@keyframes footerShine{

    100%{

        left:150%;

    }

}


/*==================================
FLOAT ANIMATION
==================================*/

.footer-chip{

    animation:floatChip 6s ease-in-out infinite;

}

@keyframes floatChip{

    50%{

        transform:translateY(-6px);

    }

}

.footer-btn{

    animation:buttonFloat 5s ease-in-out infinite;

}

@keyframes buttonFloat{

    50%{

        transform:translateY(-3px);

    }

}


/*==================================
FADE IN
==================================*/

.footer-column{

    opacity:0;

    transform:translateY(40px);

    animation:footerReveal .8s ease forwards;

}

.footer-column:nth-child(1){

    animation-delay:.15s;

}

.footer-column:nth-child(2){

    animation-delay:.30s;

}

.footer-column:nth-child(3){

    animation-delay:.45s;

}

.footer-column:nth-child(4){

    animation-delay:.60s;

}

@keyframes footerReveal{

    to{

        opacity:1;

        transform:none;

    }

}


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

@media (max-width:1100px){

.footer-bottom{

grid-template-columns:repeat(2,1fr);

gap:50px;

}

.footer-column::before{

display:none;

}

}


@media (max-width:768px){

.footer-premium{

padding:120px 24px 50px;

}

.footer-container h2{

font-size:clamp(2.6rem,10vw,4rem);

letter-spacing:-2px;

}

.footer-container p{

font-size:1rem;

}

.footer-btn{

width:100%;

max-width:380px;

padding:18px 30px;

}

.footer-divider{

margin-top:70px;

}

.footer-bottom{

grid-template-columns:1fr;

gap:45px;

padding:60px 0;

}

.brand{

text-align:center;

align-items:center;

}

.brand p{

max-width:100%;

}

.footer-column{

align-items:center;

text-align:center;

}

.footer-column a{

width:auto;

}

.footer-contact{

width:100%;

}

.footer-contact-item{

justify-content:center;

text-align:left;

}

.footer-social{

justify-content:center;

}

.footer-copy{

justify-content:center;

text-align:center;

}

.footer-copy-links{

justify-content:center;

}

}


@media (max-width:480px){

.footer-chip{

font-size:.85rem;

padding:12px 18px;

}

.footer-logo{

font-size:1.2rem;

}

.footer-logo-icon{

width:52px;

height:52px;

font-size:24px;

}

.footer-btn{

font-size:1rem;

padding:16px 24px;

}

.footer-column h4{

font-size:1rem;

}

.footer-copy span{

font-size:.85rem;

}

}


/*==================================
REDUCE MOTION
==================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

}

}


.footer-bottom{

background:rgba(255,255,255,.05);
backdrop-filter:blur(35px);
border:1px solid rgba(255,255,255,.08);
border-radius:32px;
padding:60px;
box-shadow:
0 25px 80px rgba(0,0,0,.25);

}