/* ==================================================
   COMEX RYD - PRODUCTOS DESTACADOS
   Diseño integrado con el catálogo
================================================== */

.destacados-section{
    width:100%;
    padding:80px 10%;
    background:transparent;
}


/* ==================================================
   ENCABEZADO
================================================== */

.destacados-section .section-header{
    text-align:center;
    margin-bottom:50px;
}

.destacados-section .section-tag{
    display:block;
    text-align:center;
    color:#F57C00;
    letter-spacing:2px;
    font-size:.85rem;
    font-weight:700;
    margin-bottom:20px;
}

.destacados-section .section-header h2{
    font-size:3rem;
    font-weight:800;
    line-height:1.2;
    margin-bottom:15px;
    color:#fff;
}

.destacados-section .section-subtitle{
    max-width:900px;
    margin:20px auto 0;
    text-align:center;
    color:#cbd5e1;
    line-height:1.8;
    font-size:1rem;
}


/* ==================================================
   GRILLA
   Igual que el catálogo:
   3 tarjetas por fila en PC
================================================== */

.destacados-grid{
    width:100%;
    max-width:none;
    margin:0 auto;

    display:grid;

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

    gap:24px;

    justify-content:stretch;
}


/* ==================================================
   TARJETA
================================================== */

.destacado-card{
    width:100%;
    max-width:none;
    min-width:0;

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

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

    border-radius:18px;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    color:#fff;
    text-decoration:none;

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

.destacado-card:hover{
    transform:translateY(-8px);

    border-color:#F57C00;

    box-shadow:
        0 18px 40px rgba(245,124,0,.25);
}


/* ==================================================
   IMAGEN
   Proporción similar a las tarjetas del catálogo
================================================== */

.destacado-card .imagen{
    width:100%;
    height:260px;

    background:#172231;

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

    overflow:hidden;
}

.destacado-card .imagen img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .4s ease;
}

.destacado-card:hover .imagen img{
    transform:scale(1.04);
}

.destacado-card .imagen span{
    color:#94a3b8;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:1px;
}


/* ==================================================
   DATOS
================================================== */

.destacado-card .datos{
    padding:22px;

    display:flex;
    flex-direction:column;

    flex:1;
}

.destacado-card .rubro-tag{
    display:block;

    color:#F57C00;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    line-height:1.5;

    margin-bottom:10px;
}

.destacado-card h4{
    font-size:1.05rem;

    line-height:1.4;

    margin:0 0 10px;

    color:#fff;
}

.destacado-card p{
    color:#cbd5e1;

    font-size:.82rem;

    line-height:1.6;

    margin:0;
}


/* ==================================================
   SIN PRODUCTOS DESTACADOS
================================================== */

.destacados-vacio{
    grid-column:1 / -1;

    padding:50px 20px;

    text-align:center;

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

    border:1px dashed rgba(255,255,255,.10);

    border-radius:18px;
}

.destacados-vacio p{
    color:#94a3b8;
}


/* ==================================================
   TABLET
   2 tarjetas por fila
================================================== */

@media(max-width:1200px){

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

        gap:24px;
    }

}


/* ==================================================
   TELÉFONO
   1 tarjeta por fila
================================================== */

@media(max-width:768px){

    .destacados-section{
        padding:50px 18px;
    }

    .destacados-section .section-header{
        margin-bottom:30px;
    }

    .destacados-section .section-header h2{
        font-size:1.6rem;
        line-height:1.35;
    }

    .destacados-section .section-subtitle{
        margin:14px auto 30px;

        font-size:.92rem;

        line-height:1.7;
    }

    .destacados-grid{
        grid-template-columns:1fr;

        gap:18px;
    }

    .destacado-card .imagen{
        height:210px;
    }

    .destacado-card .datos{
        padding:18px;
    }

    .destacado-card h4{
        font-size:1rem;
    }

    .destacado-card p{
        font-size:.8rem;
    }

}


/* ==================================================
   TELÉFONOS MUY CHICOS
================================================== */

@media(max-width:480px){

    .destacados-section{
        padding-left:14px;
        padding-right:14px;
    }

    .destacado-card .imagen{
        height:190px;
    }

}