/* soluciones ********************************************************************* */

#soluciones_     { background-image: url('../images/sol_soft.webp') }
#soluciones_hard { background-image: url('../images/sol_har.webp') }
#soluciones_red  { background-image: url('../images/sol_net.webp') }
#soluciones_cons { background-image: url('../images/sol_cons.webp') }
#soluciones_sopo { background-image: url('../images/otros_servicios.webp') }

#about{
    display:flex;
    justify-content:center;
    flex-direction:column;
    gap:20px;
    background-color:#eaeaea;
}

#about .soluciones{
    position:relative;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.soluciones .apart,
.soluciones .atodo{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:300px;
    border:1px solid #aaa;
    border-radius:5px;
    background-color:#fff;
    box-shadow:7px 6px 3px -2px rgba(12,12,12,0.2);
}

.soluciones .apart{
    width:35%;
    height:100%;
}

.soluciones .atodo{
    width:calc(70% + 20px);
}

.soltit{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    min-height:200px;
    max-height:200px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.soltxt{
    display:flex;
    flex-wrap:wrap;
    width:calc(100% - 20px);
    margin:10px;
    background-color:#fff;
    font-family:'Roboto';
    font-size:10pt;
    color:#000;
}

.solbtn{
    width:100%;
    min-height:40px;
    max-height:40px;
    background-color:#eee;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}

/* services *********************************************************************** */

#mnuservices{
    position:relative;
}

#services{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    width:100%;
    height:calc(100% - 100px);
    min-height:600px;
    background-image:url('../images/bg_p1.webp');
    background-size:cover;
    padding:50px 0;
    gap:50px;
}

/* poster flip ********************************************************************* */

.poster_box{
    position:relative;
    width:20%;
    height:400px;
    min-width:300px;
    min-height:400px;
    perspective:1000px;
}

.poster_box:hover .poster{
    transform:rotateY(180deg);
}

.poster{
    position:relative;
    width:100%;
    height:100%;
    border-radius:5px;
    background:#fff;
    transform-style:preserve-3d;
    transition:all .5s linear;
}

.frente,
.detras{
    width:100%;
    height:100%;
    border:1px solid #aaa;
    border-radius:5px;
}

.frente{
    position:absolute;
    backface-visibility:hidden;
}

.f_rente{
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:url('../images/exagon.webp');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    font-family:'Roboto';
    font-size:20pt;
    font-weight:bold;
    text-shadow:1px 1px 2px #555, 0 0 1em #333, 0 0 0.2em #000;
    color:#ddd;
}

.frente.detras{
    transform:rotateY(180deg);
}

.poster div input{
    border:1px solid #aaa;
    background-color:#ddd;
    font-family:'Roboto';
    font-weight:bold;
    width:150px;
    height:30px;
    border-radius:5px;
}

.poster div input:hover{
    background-color:#D96D00;
    cursor:pointer;
}

.tit_pos{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    width:100%;
    min-height:60px;
    background-color:#eee;
    border-bottom:1px solid #ddd;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    font-family:'Roboto';
    font-weight:bold;
    color:#000;
}

.inf_pos{
    width:calc(100% - 40px);
    height:calc(100% - 140px);
    margin:20px;
    font-family:'Roboto';
    font-size:10pt;
    color:#555;
}

.btn_pos{
    display:flex;
    justify-content:right;
    align-items:center;
    width:calc(100% - 5px);
    height:40px;
    background-color:#354E6C;
    border-top:1px solid #aaa;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    padding-right:5px;
}

/* contacto ************************************************************************ */

#mnucontact{
    position:relative;
    display:flex;
    justify-content:center;
    width:100%;
}

#contact{
    position:relative;
    display:flex;
    justify-content:center;
    width:80%;
}

.contact_contenido{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    padding:10px;
}

.contact_msg{
    width:100%;
    text-align:center;
    display:flex;
    justify-content:center;
    font-family:'Roboto';
    font-size:14pt;
    color:#777;
    text-shadow:1px 1px 2px #aaa;
}

.contact_vif{
    position:relative;
    display:flex;
    width:100%;
    height:100%;
}

.vi_vi{
    display:flex;
    justify-content:center;
    flex-direction:column;
    width:50%;
}

.vi_vi div{
    width:60%;
    display:flex;
    align-items:center;   /* ← clave */
    gap:20px;
}

.vi_f{
    position:relative;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    width:50%;
    border-radius:5px;
    box-shadow:1px 14px 16px 3px rgba(12,12,12,0.1);
    padding:50px;
    gap:30px;
}

.vi_f div{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

/*.camp{
    border:1px solid #aaa;
    border-radius:5px;
    font-family:'Roboto';
    font-size:8pt;
    color:#777;
    z-index:2;
    box-sizing:border-box;
    margin:10px;
}*/

.inp{ height:60px; width:300px; }
.txt{ height:120px; width:100%; }

.btn_envio{
    width:200px;
    height:40px;
    font-family:'Roboto';
    font-size:12pt;
    color:#fff;
    background-color:#354E6C;
    border:1px solid #354E6C;
    border-radius:5px;
    transition:1s ease;
}

.btn_envio:hover{
    cursor:pointer;
    background-color:#D96D00;
    border-color:#D96D00;
}


.soltit{
    font-family:'Roboto';
    font-size:18pt;
    font-weight:bold;
    color:#fff;
    text-shadow:1px 2px 3px #000;
}


.contact_msg{
    font-family:'Roboto';
    font-size:14pt;
    color:#777;
    text-shadow:1px 1px 2px #aaa;
}

.info_con{
    flex:1;
    height:60px;
    display:flex;
    align-items:center;   /* ← centra verticalmente el texto */
    font-family:'Roboto';
    font-size:14pt;
    color:#555;
}


.info_con_ch{
    display:flex;
    align-items:center;
    width:calc(100% - 60px);
    height:30px;
    line-height:25px;
    font-family:'Roboto';
    color:#fff;
}

.iconos{
    flex:0 0 60px;        /* ← MISMO ancho SIEMPRE */
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
}


.iconos img{
    width:40px;
    height:40px;
    filter:opacity(40%);
    transition:0.6s;
}

.iconos img:hover{
    transform:rotate(360deg);
    filter:opacity(100%);
    cursor:pointer;
}

/* versión chica */

.iconos_ch{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:30px;
    height:30px;
}

.iconos_ch img{
    width:20px;
    height:20px;
    filter:grayscale(10);
}

.camp{
    padding:12px 10px 6px;
    border:1px solid #aaa;
    border-radius:5px;
    font-family:'Roboto';
    font-size:8pt;
    color:#000;
    z-index:2;
    box-sizing:border-box;
    margin:10px;
}

.vi_f input[type=text]{
    width:100%;
    height:40px;
    font-family:'Roboto';
    font-size:12pt;
    border:0;
    color:#354E6C;
    margin-top:-50px;
    z-index:1;
    background-color:rgba(256,256,256,0.1);
    outline:none;
}

#fs_comentar{
    width:636px;
}

#fs_comentar textarea{
    border:0;
    font-family:'Roboto';
    font-size:12pt;
    color:#354E6C;
    width:100%;
    height:80px;
    resize:none;
    outline:none;
}

.logo_abajo img{
    width:100%;
    margin-left:-8px;
}