@import url('../variables.css');

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   BASE
========================= */

body{
    font-family:'Montserrat',sans-serif;
    background:var(--blanco);
    color:var(--texto);
    overflow-x:hidden;
    line-height:1.6;
}

main{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:30px 20px;
}

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

.bg-title{
    background:var(--guinda);
}

.gris-title{
    background:var(--gris);
    border-radius: 15px;
    margin: 0px 5px;
}

.gris-inf{
    background:var(--gris);
}

/* =========================
   BUSCADOR
========================= */

#searchInput{
    border-radius:8px;
}

#searchResults div{
    cursor:pointer;
    transition:.2s;
}

#searchResults div:hover{
    background:#eef2f5;
}

.highlighted{
    background:#fff3cd !important;
    transition:background .3s;
}

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

.icon-card{

    width:220px;
    height:220px;

    margin:0 auto 15px;

    background:#9f2241;

    border-radius:28px;

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

    overflow:hidden;

    transition:.3s ease;

}

.icon-card:hover{

    transform:translateY(-5px);

}

.icon-card a{

    width:100%;
    height:100%;

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

    text-decoration:none;

}

.icon-card img{

    width:80%;
    height:80%;

    object-fit:contain;

    border:none;

    background:none;

    transition:.25s ease;

}

.label-icon{

    text-align:center;

    font-size:14px;

    line-height:1.4;

    color:#222;

    margin-bottom:4px;

    font-weight:500;

}

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

.services-card{

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

}

.services-card a{

    width:100%;
    max-width:140px;

}

.services-card img{

    width:100%;
    height:auto;

    display:block;

    object-fit:contain;

    border-radius:12px;

    box-shadow:
        0 4px 12px rgba(
            0,
            0,
            0,
            .12
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.services-card img:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 20px rgba(
            0,
            0,
            0,
            .18
        );

}

/* =========================
   CAJAS GRISES
========================= */

.gris-inf-box{

    background:#d9d9d9;

    padding:22px 45px;

    display:flex;

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

}

.gris-inf-title{

    margin:0;

    color:#1f2d3d;

    font-size:1.05rem;

    font-weight:400;

    line-height:1.6;

    text-align:left;

}

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

.transparencia-card{

    width:100%;

    border:
        2px solid #e5e5e5;

    overflow:hidden;

}

.trans-header{

    background:#737775;

    color:#fff;

    text-align:center;

    padding:22px 20px;

}

.trans-header h3{

    margin:0;

    font-size:16px;

    font-weight:600;

    line-height:1.45;

}

.trans-banner{

    background:#a51d43;

    color:#fff;

    text-align:center;

    padding:18px 20px;

    font-size:15px;

    font-weight:600;

}

.trans-banner a{

    color:#00d9ff;

    text-decoration:none;

    font-weight:700;

}

.trans-body{

    background:#d9d9d9;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    align-items:center;

    gap:30px;

    padding:28px 30px;

}

.trans-col{

    text-align:center;

}

.trans-col h4{

    margin:0 0 8px;

    font-size:17px;

    font-weight:700;

    color:#111;

}

.trans-col p{

    margin:0;

    font-size:16px;

    line-height:1.5;

    color:#111;

}

.trans-col strong{

    font-weight:700;

}

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

@media(max-width:768px){

    .icon-card{

        width:170px;
        height:170px;

        border-radius:22px;

    }

    .label-icon{

        font-size:12px;

    }

    .services-card a{

        max-width:110px;

    }

    .gris-inf-box{

        padding:20px;

    }

    .gris-inf-title{

        font-size:.95rem;

    }

    .trans-body{

        grid-template-columns:
            1fr;

        gap:25px;

    }

    .trans-header h3,
    .trans-col p,
    .trans-col h4{

        font-size:14px;

    }

}