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

body{

    background: var(--bg);
    color: var(--text-main);
    margin: 0;
    padding: 0;

}


/*======================================================
                FONDO GENERAL
======================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,.03),
            transparent 45%
        );

    pointer-events:none;

    z-index:-1;

}


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

.container{

    margin-inline:auto;

    padding-top:0px;

    padding-bottom:60px;

}


/*======================================================
                TITULOS
======================================================*/

h1,h2,h3,h4,h5,h6{

    color:var(--text-white);

    font-weight:var(--fw-bold);

}


.section-title{

    font-size:var(--fs-2xl);

    margin-bottom:var(--space-6);

}


/*======================================================
                PARRAFOS
======================================================*/

p{

    color:var(--text-secondary);

}


/*======================================================
                BOTON GENERAL
======================================================*/

.btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:100%;

    height:var(--btn-height);

    border-radius:var(--btn-radius);

    background:var(--gradient-gold);

    color:var(--color-white);

    font-size:var(--btn-font-size);

    font-weight:var(--fw-semibold);

    box-shadow:var(--shadow-gold);

    transition:var(--transition);

}


.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(200,154,86,.35);

}


.btn:active{

    transform:scale(.98);

}


/*======================================================
                TARJETAS
======================================================*/

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--card-radius);

    transition:var(--transition);

}


.card:hover{

    transform:translateY(-6px);

    border-color:var(--color-primary);

}


/*======================================================
                ICONOS
======================================================*/

i{

    color:var(--color-primary);

}


/*======================================================
                UTILIDADES
======================================================*/

.text-center{

    text-align:center;

}


.gold{

    color:var(--color-primary);

}


.mt-1{

    margin-top:var(--space-2);

}

.mt-2{

    margin-top:var(--space-4);

}

.mt-3{

    margin-top:var(--space-6);

}

.mt-4{

    margin-top:var(--space-8);

}

.mb-1{

    margin-bottom:var(--space-2);

}

.mb-2{

    margin-bottom:var(--space-4);

}

.mb-3{

    margin-bottom:var(--space-6);

}

.mb-4{

    margin-bottom:var(--space-8);

}


/*======================================================
            ANIMACIONES SUAVES
======================================================*/

.fade-up{

    opacity:0;

    transform:translateY(30px);

    transition:.8s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

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

.hero{

    text-align:center;

    padding-top:0;

}

.hero-logo{

    display:flex;

    justify-content:center;

    margin-bottom:0px;

}

.hero-logo img{

    width:150px;

    display:block;

}



/*=========================
        FOTO + INFO
=========================*/

.hero-header{
    display:flex;
    align-items:stretch;
    gap:18px;
    margin-bottom:24px;
}

.hero-photo{
    position:relative;
    width:140px;
    flex-shrink:0;
}

.hero-photo::before{
    content:"";
    position:absolute;
    inset:-12px;
    background:radial-gradient(
        circle,
        rgba(212,175,55,.18) 0%,
        rgba(212,175,55,.05) 45%,
        transparent 80%
    );
    filter:blur(20px);
    z-index:-1;
}

.hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:22px;
}

.hero-info{
    flex:1;
    display:flex;
    flex-direction:column;
    text-align:left;
}

.hero-description{
    margin-top:16px;
    margin-bottom:0;
    text-align:left;
    line-height:1.7;
}



.hero-title{
    font-size:1.85rem;
    font-weight:300;
    line-height:1.05;
    margin-bottom:8px;
}


.hero-title span{

    color:var(--color-primary);

}



.hero-subtitle{
    display:block;
    margin-top:8px;
    font-size:.55rem;
    font-weight:600;
    letter-spacing:.8px;
    color:var(--text-secondary);
    text-transform:uppercase;
    line-height:1.4;
}

.hero-subtitle span:not(:last-child)::after{
    content:" | ";
    color:var(--color-primary);
    font-weight:700;
}

.hero-description{
    margin-top:16px;
    margin-bottom:0;
    font-size:.92rem;
    line-height:1.65;
    color:var(--text-secondary);
    text-align:left;
    max-width:100%;
}

/*======================================================
                ESPECIALIDADES
======================================================*/

.specialties{

    margin-top:-50px;

}

.specialties-grid{

    display:grid;

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

    gap:8px;

}

.specialty-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:14px;

    padding:14px 8px;

    text-align:center;

}

.specialty-card:hover{

    border-color:var(--color-primary);

    transform:translateY(-4px);

}

.specialty-card i{

    font-size:1.4rem;

    margin-bottom:10px;

}

.specialty-card h3{

    font-size:.68rem;

    line-height:1.25;

    font-weight:500;

    min-height:40px;

    margin-bottom:12px;

}

.card-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:28px;

    border-radius:8px;

    border:1px solid var(--color-primary);

    color:var(--color-primary);

    font-size:.58rem;

    font-weight:500;

}

.card-btn:hover{

    background:var(--color-primary);

    color:#fff;

}

/*======================================================
                CATÁLOGO
======================================================*/

.catalog-section{
    margin-top:-60px;
}

.catalog-card{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:24px;
    text-decoration:none;
    border:1px solid rgba(212,175,55,.15);
}

.catalog-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    display:block;
    transition:.45s;
}

.catalog-card:hover img{
    transform:scale(1.05);
}

.catalog-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.75) 45%,
        rgba(0,0,0,.45) 100%
    );

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:25px;
}

.catalog-tag{

    color:var(--color-primary);

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.catalog-overlay h2{

    margin:8px 0 18px;

    color:#fff;

    font-size:1.6rem;

    font-weight:600;

}

.catalog-button{
    display:inline-flex;
    width:max-content;
    padding:11px 18px;
    border-radius:30px;
    background:var(--color-primary);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.catalog-button:hover{
    transform:translateY(-2px);
    opacity:.9;
}



/*======================================================
                PORTAFOLIO
======================================================*/

.portfolio{
    margin-top:-20px;
    padding:20px 0;
    text-align:center;
    border-top:1px solid rgba(212,175,55,.15);
    border-bottom:1px solid rgba(212,175,55,.15);
}

.section-tag{
    display:inline-block;
    margin-bottom:6px;
}

.portfolio h2{
    font-size:1.5rem;
    font-weight:300;
    margin:0 0 8px;
}

.portfolio p{
    margin:0 0 18px;
    line-height:1.5;
    font-size:.9rem;
    color:var(--text-secondary);
}

.portfolio-logos{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:0;
}

.portfolio-logos a{

    transition:.3s;

}

.portfolio-logos a:hover{

    transform:translateY(-4px);

}

.portfolio-logos img{

    width:75px;

    display:block;

    transition:transform .3s ease;

}

/*======================================================
                    ALGOCARD
======================================================*/

.algocard-section{
    margin:35px 0;
    text-align:left;
    padding: 0;
    margin-top: -20px;
}

.algocard-section .section-tag{
    display:block;
    margin-bottom:10px;
    color:var(--color-primary);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:3px;
}

.algocard-image{
    width:250px;
    height:auto;
    display:block;
    margin:15px 0 18px 0;
    border-radius:18px;
}

.algocard-section h3{
    font-size:1.25rem;
    font-weight:400;
    margin:0 0 10px;
    line-height:1.3;
}

.algocard-section p{
    margin:0 0 16px;
    font-size:.9rem;
    line-height:1.6;
    color:var(--text-secondary);
}

.algocard-btn{
    display:inline-block;
    color:var(--color-primary);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.algocard-btn:hover{
    transform:translateX(5px);
}

/*=====================================
            CONÓCEME
=====================================*/

.social-section{

    margin-top:20px;
    padding:0;

    text-align:center;

}

.social-section h2{

    font-size:1.5rem;
    font-weight:300;
    margin:0 0 8px;
}

.social-icons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

}

.social-icons a{

    width:65px;
    height:65px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    text-decoration:none;

    transition:.3s;

}

.social-icons a:hover{

    transform:translateY(-6px);

}

.social-icons i{

    font-size:2rem;

}