*{

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

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:#08111F;

    color:white;

    overflow-x:hidden;

}

/*======================================
                HERO
======================================*/

.hero-proyectos{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

    padding:100px 25px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(59,130,246,.14),
            transparent 38%
        ),
        #08111F;

}

/* Código decorativo del fondo */

.codigo-fondo{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) rotate(-6deg);

    width:1100px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

    font-family:monospace;

    font-size:3.2rem;

    font-weight:700;

    line-height:1.25;

    text-align:left;

    color:#3B82F6;

    opacity:.035;

    user-select:none;

    pointer-events:none;

    white-space:nowrap;

}

.overlay-hero{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(8,17,31,.12),
        rgba(8,17,31,.42),
        #08111F
    );

}

.contenido-hero{

    position:relative;

    z-index:2;

    max-width:900px;

    animation:entradaHero 1s ease;

}

.etiqueta-hero{

    display:inline-block;

    margin-bottom:25px;

    padding:10px 20px;

    border-radius:50px;

    border:1px solid rgba(59,130,246,.25);

    background:rgba(59,130,246,.08);

    color:#93C5FD;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:3px;

}

.contenido-hero h1{

    margin-bottom:25px;

    color:#ffffff;

    font-size:5.3rem;

    font-weight:800;

    line-height:1.05;

    letter-spacing:-3px;

}

.contenido-hero h1 span{

    background:linear-gradient(
        135deg,
        #60A5FA,
        #8B5CF6
    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.contenido-hero p{

    max-width:700px;

    margin:0 auto 45px;

    color:#B9C4D3;

    font-size:1.18rem;

    line-height:1.8;

}

.btn-explorar{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    padding:17px 32px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    color:white;

    text-decoration:none;

    font-weight:600;

    box-shadow:0 15px 40px rgba(37,99,235,.28);

    transition:.35s;

}

.btn-explorar:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 50px rgba(124,58,237,.32);

}

.btn-explorar i{

    transition:.35s;

}

.btn-explorar:hover i{

    transform:translateY(5px);

}

/* Indicador inferior */

.indicador-scroll{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#718096;

    font-size:.72rem;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.indicador-scroll span{

    position:relative;

    width:22px;

    height:36px;

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

    border-radius:20px;

}

.indicador-scroll span::before{

    content:"";

    position:absolute;

    top:7px;

    left:50%;

    width:4px;

    height:7px;

    border-radius:50px;

    background:#60A5FA;

    transform:translateX(-50%);

    animation:scrollHero 1.8s infinite;

}

/*======================================
          PROYECTO DESTACADO
======================================*/

.proyecto-destacado{

    position:relative;

    padding:120px 25px;

    background:
        radial-gradient(
            circle at 15% 45%,
            rgba(37,99,235,.09),
            transparent 28%
        ),
        #08111F;

}

.contenedor-destacado{

    width:100%;

    max-width:1250px;

    margin:0 auto;

}

.encabezado-seccion{

    max-width:720px;

    margin:0 auto 70px;

    text-align:center;

}

.subtitulo-seccion{

    display:block;

    margin-bottom:16px;

    color:#60A5FA;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:3px;

}

.encabezado-seccion h2{

    margin-bottom:18px;

    color:#ffffff;

    font-size:3.1rem;

    font-weight:750;

    letter-spacing:-2px;

}

.encabezado-seccion p{

    color:#94A3B8;

    font-size:1.05rem;

    line-height:1.8;

}

/* DISTRIBUCIÓN PRINCIPAL */

.destacado-grid{

    display:grid;

    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);

    align-items:center;

    gap:70px;

}

/* VENTANA DEL NAVEGADOR */

.navegador-proyecto{

    overflow:hidden;

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

    border-radius:22px;

    background:#0D1726;

    box-shadow:
        0 35px 80px rgba(0,0,0,.28),
        0 0 0 1px rgba(59,130,246,.035);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.navegador-proyecto:hover{

    transform:translateY(-8px);

    border-color:rgba(96,165,250,.28);

    box-shadow:
        0 45px 95px rgba(0,0,0,.36),
        0 0 45px rgba(37,99,235,.08);

}

.barra-navegador{

    position:relative;

    display:flex;

    align-items:center;

    min-height:58px;

    padding:0 20px;

    border-bottom:1px solid rgba(255,255,255,.07);

    background:#111C2C;

}

.controles-navegador{

    display:flex;

    gap:8px;

}

.controles-navegador span{

    width:11px;

    height:11px;

    border-radius:50%;

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

}

.controles-navegador span:nth-child(1){

    background:#EF6A6A;

}

.controles-navegador span:nth-child(2){

    background:#EAB95C;

}

.controles-navegador span:nth-child(3){

    background:#5DBB7A;

}

.direccion-navegador{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:9px;

    max-width:55%;

    padding:8px 22px;

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

    border-radius:9px;

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

    color:#7F8DA3;

    font-size:.76rem;

    white-space:nowrap;

}

.direccion-navegador i{

    color:#5DBB7A;

    font-size:.68rem;

}

/* CAPTURA */

.captura-proyecto{

    position:relative;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#0A1220;

}

.captura-proyecto img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:top center;

    transition:transform .65s ease;

}

.navegador-proyecto:hover .captura-proyecto img{

    transform:scale(1.035);

}

.overlay-captura{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(4,10,20,.68);

    backdrop-filter:blur(2px);

    opacity:0;

    transition:opacity .4s ease;

}

.navegador-proyecto:hover .overlay-captura{

    opacity:1;

}

.btn-vista-rapida{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 22px;

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

    border-radius:50px;

    background:rgba(8,17,31,.82);

    color:#ffffff;

    text-decoration:none;

    font-size:.86rem;

    font-weight:600;

    transform:translateY(12px);

    transition:
        transform .4s ease,
        background .3s ease;

}

.navegador-proyecto:hover .btn-vista-rapida{

    transform:translateY(0);

}

.btn-vista-rapida:hover{

    background:#2563EB;

}

/* INFORMACIÓN */

.informacion-destacado{

    position:relative;

}

.estado-destacado{

    display:inline-flex;

    align-items:center;

    gap:9px;

    margin-bottom:24px;

    padding:8px 14px;

    border:1px solid rgba(74,222,128,.17);

    border-radius:50px;

    background:rgba(34,197,94,.07);

    color:#86EFAC;

    font-size:.74rem;

    font-weight:500;

    letter-spacing:.4px;

}

.punto-estado{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#4ADE80;

    box-shadow:0 0 0 5px rgba(74,222,128,.1);

    animation:pulsoEstado 2s infinite;

}

.categoria-destacado{

    display:block;

    margin-bottom:10px;

    color:#60A5FA;

    font-size:.76rem;

    font-weight:600;

    letter-spacing:2.5px;

}

.informacion-destacado h3{

    margin-bottom:22px;

    color:#ffffff;

    font-size:3rem;

    font-weight:750;

    line-height:1.1;

    letter-spacing:-2px;

}

.descripcion-destacado{

    margin-bottom:30px;

    color:#A8B4C5;

    font-size:1rem;

    line-height:1.85;

}

/* CHIPS */

.tecnologias-destacado{

    display:flex;

    flex-wrap:wrap;

    gap:11px;

    margin-bottom:35px;

}

.tecnologias-destacado span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 14px;

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

    border-radius:9px;

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

    color:#CBD5E1;

    font-size:.8rem;

}

.tecnologias-destacado i{

    color:#60A5FA;

    font-size:.95rem;

}

/* BOTONES */

.acciones-destacado{

    display:flex;

    flex-wrap:wrap;

    gap:13px;

    margin-bottom:34px;

}

.btn-proyecto,
.btn-codigo{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:50px;

    padding:0 23px;

    border-radius:11px;

    color:white;

    text-decoration:none;

    font-size:.88rem;

    font-weight:600;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.btn-proyecto{

    background:linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    box-shadow:0 12px 30px rgba(37,99,235,.18);

}

.btn-proyecto:hover{

    transform:translateY(-4px);

    box-shadow:0 17px 38px rgba(37,99,235,.28);

}

.btn-codigo{

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

    background:#111C2C;

}

.btn-codigo:hover{

    transform:translateY(-4px);

    border-color:rgba(96,165,250,.35);

    background:#162337;

}

/* CARACTERÍSTICAS */

.caracteristicas-proyecto{

    display:grid;

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

    gap:13px 20px;

    padding-top:28px;

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

}

.caracteristicas-proyecto span{

    display:flex;

    align-items:center;

    gap:9px;

    color:#8E9CAF;

    font-size:.79rem;

}

.caracteristicas-proyecto i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:19px;

    height:19px;

    border-radius:50%;

    background:rgba(59,130,246,.11);

    color:#60A5FA;

    font-size:.59rem;

}

/*======================================
              MIS PROYECTOS
======================================*/

.seccion-proyectos{

    position:relative;

    padding:120px 25px;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(124,58,237,.08),
            transparent 30%
        ),
        #070F1C;

}

.contenedor-proyectos{

    width:100%;

    max-width:1250px;

    margin:0 auto;

}

.encabezado-proyectos{

    margin-bottom:65px;

}

.grid-proyectos{

    display:grid;

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

    gap:34px;

}

/* TARJETA */

.tarjeta-proyecto{

    overflow:hidden;

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

    border-radius:22px;

    background:#0D1726;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.tarjeta-proyecto:hover{

    transform:translateY(-9px);

    border-color:rgba(96,165,250,.25);

    box-shadow:
        0 35px 75px rgba(0,0,0,.27),
        0 0 35px rgba(37,99,235,.06);

}

/* IMAGEN */

.imagen-tarjeta{

    position:relative;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#091321;

}

.imagen-tarjeta img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:top center;

    transition:transform .65s ease;

}

.tarjeta-proyecto:hover .imagen-tarjeta img{

    transform:scale(1.045);

}

/* ESTADOS */

.estado-tarjeta{

    position:absolute;

    top:17px;

    right:17px;

    z-index:3;

    padding:7px 12px;

    border-radius:50px;

    font-size:.67rem;

    font-weight:600;

    letter-spacing:.7px;

    text-transform:uppercase;

    backdrop-filter:blur(10px);

}

.estado-tarjeta.terminado{

    border:1px solid rgba(74,222,128,.25);

    background:rgba(8,25,19,.82);

    color:#86EFAC;

}

.estado-tarjeta.desarrollo{

    border:1px solid rgba(250,204,21,.2);

    background:rgba(31,25,8,.82);

    color:#FDE68A;

}

/* OVERLAY */

.overlay-tarjeta{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(4,10,20,.65);

    opacity:0;

    transition:opacity .4s ease;

}

.tarjeta-proyecto:hover .overlay-tarjeta{

    opacity:1;

}

.overlay-tarjeta a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:54px;

    height:54px;

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

    border-radius:50%;

    background:rgba(8,17,31,.88);

    color:#ffffff;

    text-decoration:none;

    transform:translateY(12px);

    transition:
        transform .4s ease,
        background .3s ease;

}

.tarjeta-proyecto:hover .overlay-tarjeta a{

    transform:translateY(0);

}

.overlay-tarjeta a:hover{

    background:#2563EB;

}

/* CONTENIDO */

.contenido-tarjeta{

    display:flex;

    flex-direction:column;

    min-height:330px;

    padding:30px;

}

.categoria-tarjeta{

    display:block;

    margin-bottom:11px;

    color:#60A5FA;

    font-size:.71rem;

    font-weight:600;

    letter-spacing:2px;

}

.contenido-tarjeta h3{

    margin-bottom:15px;

    color:#ffffff;

    font-size:1.55rem;

    font-weight:650;

    line-height:1.3;

}

.contenido-tarjeta p{

    margin-bottom:24px;

    color:#9EABBC;

    font-size:.91rem;

    line-height:1.75;

}

/* TECNOLOGÍAS */

.tecnologias-tarjeta{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-bottom:28px;

}

.tecnologias-tarjeta span{

    padding:7px 11px;

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

    border-radius:8px;

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

    color:#BFC9D8;

    font-size:.72rem;

}

/* ACCIONES */

.acciones-tarjeta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-top:auto;

    padding-top:22px;

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

}

.btn-ver-tarjeta{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#93C5FD;

    text-decoration:none;

    font-size:.84rem;

    font-weight:600;

    transition:color .3s ease;

}

.btn-ver-tarjeta i{

    transition:transform .3s ease;

}

.btn-ver-tarjeta:hover{

    color:#ffffff;

}

.btn-ver-tarjeta:hover i{

    transform:translateX(5px);

}

.btn-github-tarjeta{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

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

    border-radius:10px;

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

    color:#D6DEEA;

    text-decoration:none;

    font-size:1.08rem;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

}

.btn-github-tarjeta:hover{

    transform:translateY(-3px);

    border-color:rgba(96,165,250,.3);

    background:#162337;

}

/* TARJETAS FUTURAS */

.imagen-proxima{

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        radial-gradient(
            circle at center,
            rgba(59,130,246,.14),
            transparent 50%
        ),
        #0A1423;

}

.icono-proximo{

    display:flex;

    align-items:center;

    justify-content:center;

    width:90px;

    height:90px;

    border:1px solid rgba(96,165,250,.18);

    border-radius:25px;

    background:rgba(59,130,246,.07);

    color:#60A5FA;

    font-size:2rem;

    transform:rotate(-5deg);

    transition:
        transform .4s ease,
        background .4s ease;

}

.proyecto-proximo:hover .icono-proximo{

    transform:rotate(0) scale(1.06);

    background:rgba(124,58,237,.1);

}

.mensaje-proximamente{

    color:#77869A;

    font-size:.8rem;

    font-weight:500;

}



@media(max-width:900px){

    .grid-proyectos{

        grid-template-columns:1fr;

        max-width:760px;

        margin:0 auto;

    }

}

@media(max-width:768px){

    .seccion-proyectos{

        padding:90px 20px;

    }

    .encabezado-proyectos{

        margin-bottom:50px;

    }

    .contenido-tarjeta{

        min-height:auto;

        padding:25px;

    }

    .contenido-tarjeta h3{

        font-size:1.4rem;

    }

}

@media(max-width:520px){

    .seccion-proyectos{

        padding:75px 16px;

    }

    .tarjeta-proyecto{

        border-radius:16px;

    }

    .contenido-tarjeta{

        padding:22px;

    }

    .estado-tarjeta{

        top:12px;

        right:12px;

        padding:6px 10px;

        font-size:.58rem;

    }

}

@keyframes pulsoEstado{

    0%,
    100%{

        box-shadow:0 0 0 4px rgba(74,222,128,.08);

    }

    50%{

        box-shadow:0 0 0 8px rgba(74,222,128,0);

    }

}

@media(max-width:1050px){

    .destacado-grid{

        grid-template-columns:1fr;

        max-width:820px;

        margin:0 auto;

        gap:55px;

    }

    .informacion-destacado{

        max-width:700px;

    }

}

@media(max-width:768px){

    .proyecto-destacado{

        padding:90px 20px;

    }

    .encabezado-seccion{

        margin-bottom:50px;

    }

    .encabezado-seccion h2{

        font-size:2.35rem;

        letter-spacing:-1.5px;

    }

    .encabezado-seccion p{

        font-size:.95rem;

    }

    .destacado-grid{

        gap:42px;

    }

    .barra-navegador{

        min-height:48px;

        padding:0 14px;

    }

    .controles-navegador span{

        width:9px;

        height:9px;

    }

    .direccion-navegador{

        max-width:58%;

        padding:6px 12px;

        font-size:.62rem;

    }

    .overlay-captura{

        display:none;

    }

    .informacion-destacado h3{

        font-size:2.35rem;

    }

    .descripcion-destacado{

        font-size:.94rem;

        line-height:1.75;

    }

}

@media(max-width:520px){

    .proyecto-destacado{

        padding:75px 16px;

    }

    .encabezado-seccion h2{

        font-size:2rem;

    }

    .navegador-proyecto{

        border-radius:15px;

    }

    .direccion-navegador{

        right:12px;

        left:auto;

        max-width:58%;

        transform:none;

        overflow:hidden;

    }

    .acciones-destacado{

        flex-direction:column;

    }

    .btn-proyecto,
    .btn-codigo{

        width:100%;

    }

    .caracteristicas-proyecto{

        grid-template-columns:1fr;

    }

}

@keyframes entradaHero{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes scrollHero{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(-50%,15px);

    }

}
@media(max-width:768px){

    .hero-proyectos{

        min-height:100svh;

        padding:90px 20px;

    }

    .codigo-fondo{

        width:750px;

        font-size:2rem;

        opacity:.045;

        transform:translate(-50%,-50%) rotate(-8deg);

    }

    .etiqueta-hero{

        font-size:.68rem;

        letter-spacing:2px;

    }

    .contenido-hero h1{

        font-size:3.2rem;

        letter-spacing:-2px;

    }

    .contenido-hero p{

        font-size:1rem;

        line-height:1.7;

    }

    .btn-explorar{

        padding:15px 27px;

        font-size:.92rem;

    }

    .indicador-scroll{

        bottom:20px;

    }

}

@media(max-width:420px){

    .contenido-hero h1{

        font-size:2.75rem;

    }

    .codigo-fondo{

        font-size:1.7rem;

    }

}

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

.contacto-proyectos{

    position:relative;

    padding:120px 25px;

    overflow:hidden;

    background:#08111F;

}

.contenedor-contacto{

    position:relative;

    width:100%;

    max-width:1050px;

    margin:0 auto;

    padding:90px 55px;

    overflow:hidden;

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

    border-radius:30px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(124,58,237,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(37,99,235,.16),
            transparent 38%
        ),
        #0D1726;

    text-align:center;

    box-shadow:0 35px 80px rgba(0,0,0,.23);

}

.decoracion-contacto{

    position:absolute;

    top:50%;

    right:6%;

    transform:translateY(-50%) rotate(-12deg);

    color:#60A5FA;

    font-size:13rem;

    opacity:.035;

    pointer-events:none;

}

.etiqueta-contacto{

    position:relative;

    display:inline-block;

    margin-bottom:22px;

    color:#93C5FD;

    font-size:.76rem;

    font-weight:600;

    letter-spacing:3px;

}

.contenedor-contacto h2{

    position:relative;

    max-width:800px;

    margin:0 auto 24px;

    color:#ffffff;

    font-size:3.7rem;

    font-weight:750;

    line-height:1.15;

    letter-spacing:-2.5px;

}

.contenedor-contacto h2 span{

    background:linear-gradient(
        135deg,
        #60A5FA,
        #A78BFA
    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.contenedor-contacto p{

    position:relative;

    max-width:680px;

    margin:0 auto 38px;

    color:#A3AFC0;

    font-size:1rem;

    line-height:1.8;

}

.acciones-contacto{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

}

.btn-contacto-principal,
.btn-contacto-secundario{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    min-height:54px;

    padding:0 25px;

    border-radius:12px;

    color:#ffffff;

    text-decoration:none;

    font-size:.88rem;

    font-weight:600;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.btn-contacto-principal{

    background:linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    box-shadow:0 14px 32px rgba(37,99,235,.2);

}

.btn-contacto-principal:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 42px rgba(37,99,235,.3);

}

.btn-contacto-secundario{

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

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

}

.btn-contacto-secundario:hover{

    transform:translateY(-5px);

    border-color:rgba(96,165,250,.35);

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

}

@media(max-width:768px){

    .contacto-proyectos{

        padding:90px 20px;

    }

    .contenedor-contacto{

        padding:70px 28px;

        border-radius:24px;

    }

    .contenedor-contacto h2{

        font-size:2.65rem;

        letter-spacing:-1.7px;

    }

    .decoracion-contacto{

        right:-5%;

        font-size:10rem;

    }

}

@media(max-width:520px){

    .contacto-proyectos{

        padding:75px 16px;

    }

    .contenedor-contacto{

        padding:60px 20px;

        border-radius:19px;

    }

    .contenedor-contacto h2{

        font-size:2.15rem;

    }

    .contenedor-contacto p{

        font-size:.91rem;

    }

    .acciones-contacto{

        flex-direction:column;

    }

    .btn-contacto-principal,
    .btn-contacto-secundario{

        width:100%;

    }

}

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

.footer-proyectos{

    position:relative;

    overflow:hidden;

    padding:105px 25px 35px;

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

    background:#050B14;

}

.contenedor-footer{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1250px;

    margin:0 auto;

}

/* CÓDIGO DECORATIVO */

.codigo-footer{

    position:absolute;

    top:50%;

    right:-70px;

    transform:translateY(-50%) rotate(-7deg);

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    font-family:monospace;

    font-size:4.3rem;

    font-weight:700;

    line-height:1.35;

    color:#3B82F6;

    opacity:.035;

    white-space:nowrap;

    pointer-events:none;

    user-select:none;

}

/* MARCA */

.marca-footer{

    max-width:440px;

    margin-bottom:70px;

}

.nombre-footer{

    display:inline-block;

    margin-bottom:13px;

    color:#ffffff;

    font-size:1.55rem;

    font-weight:700;

    text-decoration:none;

    letter-spacing:-.7px;

}

.marca-footer p{

    color:#77869A;

    font-size:.88rem;

    line-height:1.75;

}

/* MENSAJE */

.mensaje-footer{

    max-width:760px;

    margin-bottom:50px;

}

.mensaje-footer span{

    display:block;

    margin-bottom:18px;

    color:#60A5FA;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:3px;

}

.mensaje-footer h2{

    color:#ffffff;

    font-size:3.5rem;

    font-weight:700;

    line-height:1.2;

    letter-spacing:-2.2px;

}

/* REDES */

.redes-footer{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:60px;

}

.redes-footer a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

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

    border-radius:14px;

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

    color:#B9C4D3;

    text-decoration:none;

    font-size:1.15rem;

    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        background .3s ease;

}

.redes-footer a:hover{

    transform:translateY(-6px);

    border-color:rgba(96,165,250,.35);

    background:rgba(59,130,246,.08);

    color:#60A5FA;

}

/* LÍNEA Y PARTE INFERIOR */

.linea-footer{

    width:100%;

    height:1px;

    margin-bottom:28px;

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

}

.pie-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.pie-footer p{

    color:#66758A;

    font-size:.76rem;

}

@media(max-width:768px){

    .footer-proyectos{

        padding:85px 20px 30px;

    }

    .marca-footer{

        margin-bottom:55px;

    }

    .mensaje-footer h2{

        font-size:2.65rem;

        letter-spacing:-1.7px;

    }

    .codigo-footer{

        right:-150px;

        font-size:3.3rem;

        opacity:.04;

    }

}

@media(max-width:520px){

    .footer-proyectos{

        padding:75px 16px 28px;

    }

    .marca-footer{

        margin-bottom:45px;

    }

    .mensaje-footer{

        margin-bottom:38px;

    }

    .mensaje-footer h2{

        font-size:2.15rem;

        letter-spacing:-1.2px;

    }

    .redes-footer{

        margin-bottom:48px;

    }

    .redes-footer a{

        width:48px;

        height:48px;

    }

    .pie-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .codigo-footer{

        top:38%;

        right:-180px;

        font-size:2.8rem;

    }

}

/*======================================
       VER MÁS / VER MENOS
======================================*/

.tarjeta-proyecto.oculta{

    display:none;

}

.controles-proyectos{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-top:55px;

}

.btn-mostrar-proyectos{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    min-height:52px;

    padding:0 25px;

    border:1px solid rgba(96,165,250,.22);

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.13),
            rgba(124,58,237,.1)
        );

    color:#ffffff;

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

    font-size:.87rem;

    font-weight:600;

    cursor:pointer;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.btn-mostrar-proyectos:hover{

    transform:translateY(-4px);

    border-color:rgba(96,165,250,.45);

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.23),
            rgba(124,58,237,.18)
        );

    box-shadow:0 15px 35px rgba(37,99,235,.12);

}

.btn-mostrar-proyectos i{

    font-size:.75rem;

    transition:transform .35s ease;

}

.btn-mostrar-proyectos.modo-menos i{

    transform:rotate(180deg);

}

.contador-proyectos{

    color:#66758A;

    font-size:.75rem;

}

@media(max-width:520px){

    .controles-proyectos{

        margin-top:40px;

    }

    .btn-mostrar-proyectos{

        width:100%;

        max-width:310px;

    }

}

/*======================================
        ANIMACIONES CON JAVASCRIPT
======================================*/

.revelar{

    opacity:0;

    transform:translateY(38px);

    transition:
        opacity .75s ease var(--retraso, 0ms),
        transform .75s cubic-bezier(.2,.7,.2,1)
        var(--retraso, 0ms);

    will-change:opacity, transform;

}

.revelar.visible{

    opacity:1;

    transform:translateY(0);

}


/*--------------------------------------
     VARIACIONES DE LAS ANIMACIONES
---------------------------------------*/

.navegador-proyecto.revelar{

    transform:translateX(-35px);

}

.navegador-proyecto.revelar.visible{

    transform:translateX(0);

}


.informacion-destacado.revelar{

    transform:translateX(35px);

}

.informacion-destacado.revelar.visible{

    transform:translateX(0);

}


.contenedor-contacto.revelar{

    transform:translateY(45px) scale(.985);

}

.contenedor-contacto.revelar.visible{

    transform:translateY(0) scale(1);

}


.marca-footer.revelar,
.mensaje-footer.revelar,
.redes-footer.revelar,
.pie-footer.revelar{

    transform:translateY(25px);

}


/*--------------------------------------
       TARJETAS QUE ESTÁN OCULTAS
---------------------------------------*/

.tarjeta-proyecto.oculta{

    display:none;

}


/*--------------------------------------
       ACCESIBILIDAD Y MOVIMIENTO
---------------------------------------*/

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

    html{

        scroll-behavior:auto;

    }

    .revelar,
    .revelar.visible,
    .navegador-proyecto.revelar,
    .navegador-proyecto.revelar.visible,
    .informacion-destacado.revelar,
    .informacion-destacado.revelar.visible,
    .contenedor-contacto.revelar,
    .contenedor-contacto.revelar.visible{

        opacity:1;

        transform:none;

        transition:none;

    }

}

/*======================================
        BOTÓN REGRESAR AL INICIO
======================================*/

.btn-regresar{

    position:fixed;

    bottom:30px;

    right:30px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#ffffff;

    font-size:1.15rem;

    background:linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    box-shadow:
        0 10px 30px rgba(37,99,235,.28);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

    z-index:999;

}


/* Hover */

.btn-regresar:hover{

    transform:
        translateY(-6px)
        scale(1.08);

    background:linear-gradient(
        135deg,
        #3B82F6,
        #8B5CF6
    );

    box-shadow:
        0 18px 45px rgba(59,130,246,.35);

}


/* Flecha */

.btn-regresar i{

    transition:transform .35s ease;

}


.btn-regresar:hover i{

    transform:translateX(-4px);

}


/* Animación al cargar */

@keyframes aparecerBoton{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.8);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

.btn-regresar{

    animation:
        aparecerBoton .7s ease forwards;

}


/* Animación flotante */

@keyframes flotar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

.btn-regresar{

    animation:
        aparecerBoton .7s ease,
        flotar 3.5s ease-in-out infinite;

}


/* Responsive */

@media(max-width:768px){

    .btn-regresar{

        width:54px;

        height:54px;

        right:20px;

        bottom:20px;

        font-size:1rem;

    }

}