@charset "utf-8";
/* CSS Document */
#contenedorsuperior {
    background-image: url("../imagenes/index/fondo-seccion-superior.png");
}

#cuerpo #contenedorslogan {
    margin-top: var(--rellenoverticalgrande);
    padding-right: 20%;
}
#cuerpo #contenedorslogan h2 {
    color: var(--g300);
    margin-bottom: 1em;
}
#contenedorslogan p {
    color: var(--a300);
}
#contenedorslogan, #contenedorservicios1, #contenedorservicios2, #contenedorservicios3, #contenedorservicios4, #contenedorservicios5 {
    margin-left: var(--rellenohorizontalfijo);
    margin-right: var(--rellenohorizontalfijo);
}
#contenedorservicios1 {
    margin-top: var(--separacionsecciones);
    display: flex;
}
#contenedorservicios1 > section {
    width: 27%;
    flex-shrink: 0;
    min-width: 320px;
}
#cuerpo section.caja .h3 {
    margin-bottom: .5rem;
}
#contenedorservicios1 > section:first-of-type {
    margin-right: var(--separacionsubsecciones);
}
#contenedorservicios1 > section:last-of-type {    
    padding-top: calc(var(--rellenoverticalmediano) * 1.5);
}
#contenedorservicios2, #contenedorservicios3 {
    display: flex;
    margin-top: var(--separacionsubsecciones);
}
#contenedorservicios2 > section:first-of-type {
    width: calc(40.5% + var(--separacionsubsecciones) / 2);
    margin-right: var(--separacionsubsecciones);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#contenedorservicios2 > section:last-of-type {
    padding-right: 0px;
    padding-left: var(--rellenohorizontalgrande);
    text-align: right;
}


#contenedorservicios2 > section:last-of-type h2 {
    color: var(--a200);
    margin-bottom: 1rem;
}
#contenedorservicios2 > section:last-of-type p {
    color: var(--a600);
}
#contenedorservicios3 section:first-of-type {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#contenedorservicios3 section:first-of-type h2 {
    color: var(--a200);
}
#contenedorservicios3 section:last-of-type {
    width: 40%;
    flex-shrink: 0;
    margin-left: calc(var(--rellenohorizontalgrande) * 2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--rellenoverticalmediano)* 1.5);
}
 #contenedorservicios4 {
    margin-top: var(--separacionsecciones); 
     text-align: right;
}
#contenedorservicios4 > h2 {
    color: var(--a200);
}
#contenedorservicios5 {
    margin-top: var(--separacionsecciones); 
    display: flex;
    justify-content: space-between;
    
}
#contenedorservicios5 > section {
    width: calc((100% - (2 * var(--separacionsubsecciones))) / 3);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.contenedorprincipalproductos {    
    margin-top: var(--separacionsecciones);
}
#cuerpo .contenedorprincipalproductos > h2 {
    color: var(--g300)
}
.contenedorprincipalproductos .contenedorparrafo {
    display: flex;
    align-items: flex-end;
}

.contenedorparrafo.aladerecha {
    flex-direction: row-reverse;
}
.contenedorprincipalproductos .contenedorparrafo p {
    flex-grow: 1;
    margin-right: var(--rellenohorizontalgrande);
}
 .contenedorprincipalproductos .contenedorparrafo.aladerecha p {
    margin-right: 0px;
    margin-left: var(--rellenohorizontalgrande);
}
.contenedorprincipalproductos .contenedorparrafo a {
    flex-shrink: 0;
}
#cuerpo .contenedorprincipalproductos> p {
    color: var(--a300);
    margin: var(--rellenovertical) 0px;
}
.detalle {
    display: flex;
    justify-content: space-between;
    margin-top: var(--separacionsecciones);
    margin-bottom: var(--separacionsecciones);
}
.detalle .contenedorseccion {
    width: calc((100% - (2 * var(--separacionsubsecciones))) / 3);
    position: relative;
 /*   overflow: hidden;*/
}
#cuerpo .detalle p {
    font-size: var(--l-subheader);
}

#cuerpo .detalle h2 + p, #cuerpo .detalle p + p {
    font-weight: 400;
    
}

#contenedorconfian span {
    flex-shrink: 0;
    width: calc((100% - (var(--separacionsubsecciones) * 5)) / 6);
    height: 4em;
    border-radius: var(--radio-p);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--separacionsubsecciones);
    box-shadow: var(--s01);
        
}
#contenedorconfian span img{
    width:2rem;
    height: auto;
}
@media (max-width: 1100px) {
    .detalle {
        flex-wrap: wrap;
    }
    .detalle .contenedorseccion {
        width: calc((100% - var(--separacionsubsecciones)) / 2);
        margin-top: var(--separacionsubsecciones)
    }
}
@media (max-width: 800px) {
    #cuerpo #contenedorslogan {
        padding-right: 0px;
    }
    #contenedorservicios1 > section {
        width: calc((100% - var(--separacionsubsecciones)) / 2);
        min-width: 0px;
    }
    #contenedorservicios2, #contenedorservicios3, #contenedorservicios5 {
        flex-direction: column;
    }
    #cuerpo #contenedorservicios2 > section, #cuerpo #contenedorservicios3 > section, #cuerpo #contenedorservicios5 > section {
        width: 100%;
        margin: 0px;
        margin-top: var(--separacionsubsecciones);
    }
    #contenedorservicios2 > section:last-of-type, #contenedorservicios3 > section:first-of-type {
        text-align: left;
        padding: 0px;
    }
    .contenedorprincipalproductos {
        padding-left: var(--rellenohorizontal);
        padding-right: var(--rellenohorizontal);
    }
   .contenedorprincipalproductos .contenedorparrafo {
        flex-direction: column;
       align-items: flex-start;
    }    
   .contenedorprincipalproductos .contenedorparrafo a {
       margin-top: 1rem;
    }
    
    .contenedorprincipalproductos h2, #cuerpo .contenedorprincipalproductos p {
        text-align: left;
        margin-left: 0px;
        margin-right: 0px;
    }
     #contenedorconfian span {
        width: calc((100% - (var(--separacionsubsecciones) * 3)) / 4);
    }
}
@media (max-width: 700px) { 
 
    #contenedorservicios1 {
        flex-direction: column;
    }
    #contenedorservicios1 > section {
        width: 100%;
        margin: 0px;
    }
    #contenedorservicios1 > section {
        margin-top: var(--separacionsubsecciones)
    }
  
    #contenedorservicios1 > section:last-of-type, #contenedorservicios3 section:last-of-type, #contenedorservicios5 > section:first-of-type, #contenedorservicios5 > section:last-of-type {        
        padding-top: calc(var(--rellenoverticalmediano) / 3 * 2);
    }
    .detalle .contenedorseccion {
        width: 100%;
    }
}
@media (max-width: 500px) {
    
    
}