/*======================================================
                    DESKTOP
======================================================*/

@media (min-width:1200px){

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

body{

    padding:35px;
    overflow-x:hidden;

}

.container{

    width:min(1200px,100%);
    margin:0 auto;
    padding:0;

}

/*=====================================
        PRIMER BLOQUE
=====================================*/

.desktop-top{

    display:grid;

    grid-template-columns:700px 1fr;

    gap:40px;

    align-items:start;

    margin-bottom:45px;

}

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

.hero{

    width:100%;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    margin:0;
    padding:0;

}

.hero-logo{

    grid-column: 1 / 3;

    display: flex;

    justify-content: center;

    margin-bottom: 45px;

}
.hero-logo img{

    width:200px;

}

.hero-header{

    width:100%;

    display:grid;

    grid-template-columns:300px 1fr;

    gap:25px;

    align-items:center;

}

.hero-photo{

    width:300px !important; 
    height:320px !important;

}

.hero-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:28px;

}


.hero-info{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

}

.hero-title{

    font-size:2.9rem !important;

    line-height:1;

    margin-bottom:10px;

}

.hero-subtitle{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-start;

    gap:8px;

    margin-bottom:22px;

    font-size:.84rem !important;

}

.hero-description{

    width:100%;

    max-width:100%;

    font-size:1.1rem !important;

    line-height:1.8;

    margin:0;

    text-align:left;

}

.btn-whatsapp{

    margin-top:0px;

    width:320px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:absolute;

    left:320px;

    bottom:30px;

}
/*=====================================
            SERVICIOS
=====================================*/

.specialties{

    width:100%;

    display:flex;
    align-items:stretch;

    padding-top:50px; /* Ajusta este valor */

}

.specialties-grid{

    width:100%;

    display:grid !important;

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

    grid-template-rows:auto auto;

    gap:22px;

}

.specialty-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding: 14px;

}

.specialty-card:hover{

    transform:translateY(-8px);

}

.specialty-card i{

    font-size:2rem !important;

    margin-bottom:8px;

}

.specialty-card h3{

    font-size:1.1rem !important;

    line-height:1.3;

    font-weight:500;

    margin:0;

    flex:1;

}

.card-btn{

    width:145px;

    height:46px;

    margin-top:0px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    font-size:1rem !important;

    transition:.30s;

}

.card-btn:hover{

    transform:translateY(-2px);

}

/*=====================================
      AJUSTES DEL PRIMER BLOQUE
=====================================*/

.desktop-top{

    align-items:start;

}

.hero{

    min-width:0;
    position: relative;

}

.hero-info{

    min-width:0;

}

.specialties{

    min-width:0;

}

.specialties-grid>*{

    min-width:0;

}
/*=====================================
        CATALOGO + ALGOCARD
=====================================*/

.desktop-middle{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

    margin:45px 0;

    align-items:stretch;

}

.catalog-section,
.algocard-section{

    margin:0;

    height:100%;

}

/*=====================================
            CATALOGO
=====================================*/

.catalog-card{

    position:relative;

    height:100%;

    min-height:380px;

    overflow:hidden;

    border-radius:28px;

}

.catalog-card img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.catalog-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

}

.catalog-tag{

    font-size:.82rem;

    margin-bottom:15px;

    letter-spacing:2px;

}

.catalog-overlay h2{

    font-size:2.2rem;

    line-height:1.15;

    margin-bottom:22px;

}

.catalog-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:190px;

    height:50px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

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

.algocard-section{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:35px;

    border-radius:28px;

}

.section-tag{

    margin-bottom:0px !important;

    font-size:.9rem !important;

    letter-spacing:2px;

}

.algocard-image{

    width:260px;

    margin-bottom:25px;

    border-radius:16px;

}

.algocard-section h3{

    font-size:1.5rem !important;

    line-height:1.2;

    margin-bottom:15px;

}

.algocard-section p{

    font-size:1.02rem !important;

    line-height:1.8;

    margin-bottom:28px;

}

.algocard-btn{

    width:220px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

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

.portfolio{

    margin-top:0;

    padding:30px 0;

    text-align:center;

}

.portfolio h2{

    font-size:2rem;

    margin-bottom:10px;

}

.portfolio p{

    font-size:1rem;

    margin-bottom:30px;

}

.portfolio-logos{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:70px;

    flex-wrap:wrap;

}

.portfolio-logos a{

    transition:.3s;

}

.portfolio-logos a:hover{

    transform:translateY(-6px);

}

.portfolio-logos img{

    width:100px !important;

    height:100%;

    object-fit:contain;

}

/*=====================================
        AJUSTES FINALES
=====================================*/

.hero,
.specialties,
.catalog-section,
.algocard-section,
.portfolio{

    width:100%;

}

img{

    max-width:100%;

}

}