/*
============================
TIPOGRAFIA
============================
*/

/* _> Básica */

h1,
h2,
h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

p,small {
	font-family: 'Roboto', sans-serif;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	letter-spacing: 0.00688rem;
}

/*
============================
GENERALES
============================
*/

img {
	margin-bottom: 1rem;
}

section {
	padding: 6rem 0 4rem 0;
}

section .cuerpo > .movil{
	display: none;
}

/*
============================
BARRA NAVEGACION
============================
*/

ul.nav{
	margin-left: auto;
}

.navbar-light .navbar-nav .nav-link {
	font-family: montserrat;
	font-weight: 600;
	color: #004E86;
}

.btn-index{
	font-family: montserrat;
	font-weight: 600;
	border-radius: 0px;
	color: #004E86;
	border-color: #004E86;;
}


p{
	padding-top: 5px;
	padding-bottom: 5px;	
}

h3{
	padding-top: 2rem;
	padding-bottom: 0.3rem;	
}



/*
============================
IMAGENES FONDO
============================
*/


.bg-placas-yeso{
	background-image: url(../images/fondos/placas-de-yeso-espuma-index.jpg);
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(../images/fondos/placas-de-yeso-espuma-index.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-operario{
	background-image: url(../images/fondos/operario-index.jpg);
	background-size: cover;
	background-position: center;
}

.bg-degradado-informacion{
	background: rgb(8,78,134);
	background: linear-gradient(180deg, rgba(8,78,134,1) 0%, rgba(8,78,134,1) 10%, rgba(24,148,207,1) 53%, rgba(49,177,136,1) 100%);
}

.bg-blanco-traslucido{
	

	background-color: rgba(255,255,255,0.7);
}
.bg-operario-aplicacion{

	background-image: url(../images/fondos/operario-aplicacion.jpg);
	background-size: cover;
	background-position: right;
}


.degradado-inferior{
	background: rgb(205,205,205);
background: linear-gradient(180deg, rgba(205,205,205,1) 0%, rgba(238,238,238,1) 40%, rgba(255,255,255,1) 100%);

height: 100px;
width: 100%;

}





/*
============================
SECCIONES
============================
*/


section.seccion-informacion-isla  .cuerpo{
	min-height: 600px;
	display: flex;
}

section.seccion-informacion-isla .cuerpo > .cuerpo-flotante{

	
	color: white;
	padding:1.5rem;
	margin-top: auto;
	margin-bottom: auto;
}

section.seccion-informacion-isla .cuerpo > .cuerpo-flotante.bg-blanco-traslucido {

	color: black;
}


section.seccion-informacion-isla .cuerpo > .cuerpo-flotante.bg-blanco-traslucido > h2{

	color: #084E86;
}


section.seccion-beneficios .cabecera{
	text-align: center;
	color: #084E86;
	padding-bottom: 2rem;
}

section.seccion-beneficios .cabecera > p{
	color: black;
}

section.seccion-beneficios .cabecera > h2{

	font-weight: 600;
}

section.seccion-beneficios .cabecera > p[class="subtitulo"]{
	color: black;
}



section.seccion-beneficios .cuerpo{
	text-align: center;
	padding-top: 1rem;
}

section.seccion-beneficios .cuerpo > .servicios >.servicio{
padding-bottom: 2rem;
}

section.seccion-beneficios .cuerpo > .servicios >.servicio > h3{
	text-align: center;
	color: #084E86;
	padding-top: 0px;
	margin-bottom: 0px;
}

section.seccion-beneficios .cuerpo > .servicios >.servicio > p{
	text-align: center;
}

section.seccion-beneficios .cuerpo > .servicios >.servicio > img{
	height: 70px;
}

.bg-azul-claro-index h2{
	color: #084E86;
}

section.seccion-presentacion .cabecera{
	text-align: center;
	

}

section.seccion-presentacion .cabecera > h2{

	font-weight: 600;
	color: #084E86;
}

section.seccion-presentacion .cabecera .subtitulo{
	color: black;
	font-size: 1.5rem;
}



section.seccion-presentacion .cuerpo{
	text-align: center;
}

section.seccion-presentacion .cuerpo > img{
	width: 100%;
}


section.seccion-presentacion .cuerpo > .btn{
	border-radius: 0px;
}

/* _> Generales */

section .imagenes-botes{
	position: sticky;
	text-align: left;
	top: 90px;
}


section .imagenes-botes>img{
	max-height: 850px;
	width: auto;
}

section .cabecera.movil{
	display: none;
	text-align: center;
}

section .cabecera > h1{
	font-size: 2.75rem;
    letter-spacing: -0.03125rem;
    line-height: 3.25rem;
}

section li{
	margin-bottom: 1.875rem;
    list-style: square;
    margin: 0 0 0.5rem;
	position: relative;
}

section ul{
	padding-left: 15px;
}




section .cuerpo > p,
section .cuerpo > li,
section .cuerpo > ul{
	font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.00688rem;
    line-height: 1.5rem;
    /*margin-bottom: 30px;*/
}
section .cuerpo ul > li{
	margin-bottom: 0px;
}

section h3{
	font-size: 1.125rem;
    letter-spacing: 0.00625rem;
    line-height: 1.5rem;
    /*margin-bottom: 0.7rem;*/
}


section p[class="antetitulo"]{
	font-variant: small-caps;
	text-transform: lowercase;
	text-align: center;
	font-size: 1.4rem;
}

section p[class="subtitulo"]{
	font-size: 1.4rem;
}

section .cabecera>h2>span[class="subtitulo-marca"]{
	font-style: italic;
}

/* _> Por color */

section.bg-placas-yeso.seccion-producto .cuerpo{
	color: white;
}

section.bg-placas-yeso.seccion-producto .cabecera>h2>span[class="subtitulo-marca"]{
	color: white;
	font-size: 2.375rem;
}

section.bg-azul-claro-index{
	background-color: #EAF4FF;
}

/* _> Por contenido */

section[class~="seccion-productos"]{
	padding: 6.9rem 0 6.9rem 0;
}
section.seccion-productos .cabecera{
	text-align: center;
	color: #004E86;
	padding-bottom: 3rem;
}

section.seccion-productos .cabecera>h2{
	text-transform: uppercase;
	font-weight: 600;
}

section.seccion-productos .tarjeta{

	box-shadow: 0px 0px 20px rgba(0,72,155,0.2);
}

section.seccion-productos .tarjeta p{
	font-size: 0.95rem;
	line-height: 1.4rem;
}

section.bg-placas-yeso  {
	padding-top: 14rem;
}



/*
============================
NUEVOS COMPONENTES
============================
*/


/* _> Tarjetas*/

.tarjeta{
	max-width:292px;
	background-color: white;
	padding:1.5rem;
	margin-bottom: 20px;

	margin-left: auto;
	margin-right: auto;
}

.tarjeta > h3{
	font-size: 1.2rem;
	line-height: 1.55rem;
	font-weight: 600;
	padding-bottom: 0;
	color: #004E86;
}

.tarjeta > .imagen{
	width: 100%;
	height: 224px;
	overflow: hidden;
	
}

.tarjeta > .imagen > img{
	width: 100%;
}

.tarjeta > .imagen:hover > img{
	animation-name:zoom;
	animation-duration: 0.5s;

}

@keyframes zoom {
	from {
		width: 100%;
		margin-left: 0%;
	}
	to {
		width: 110%;
		margin-left: -5%;
	}
  }

.tarjeta > .botonera {
	color: #004E86;
	font-size: 2rem;
}

.tarjeta > .botonera:hover {
	

	animation-name:efectoFlecha;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

@keyframes efectoFlecha {
	from {
		color: #004E86;
	}
	to {
		color:  rgba(0,0,0,0.8);
	}
  }

.tarjeta-sin-cuerpo{
	text-align: center;
}

.tarjeta-sin-cuerpo > img{
	width: 100%;
}

.tarjeta-sin-cuerpo > h3{
	font-size: 1.2rem;
    line-height: 1.25rem;
    padding-bottom: 0.5rem;
}

/* _> Infografias*/

.infografias{
	padding-top: 20px;
	padding-bottom: 20px;
}


.infografias img{
	height: 80px;
}


.infografias-grandes img{
	height: 110px;
	margin-right: 10px;
}

.infografia-ultimo-parrafo{
	padding-top: 40px;
}

/* _> Pestanas*/

.pestanas{
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.pestanas a{
	color: white;
}

.navbar-brand img{
	width: 150px;
}

.movil{
	display: none;
}

section .imagenes-botes > img{
	height: 100%;
	max-height: 750px;
}


.siglas-marca > img{
	width: 200px;
}

.dos-columnas{
	column-count: 2;
}

.fila-puntos-claves{
    text-align: center;
}

.fila-puntos-claves img{
    height: 70px;
}


@media(max-width:1200px)
{


	#navbarNav {
		text-align: center;
	}
	
}

@media(max-width:1000px)
{
	section .imagenes-botes>img{
		max-height: 500px;
		
	}

	ul.nav{
		text-align: center;
	}

	.siglas-marca{
		height: 58px;
	}
	
}

@media(max-width:900px)
{
	section,main{
		overflow-x: hidden;

	}
	section .imagenes-botes > img{
		height: 100%;
		max-height: 500px;
	}
	section.seccion-informacion-isla .cuerpo > .cuerpo-flotante{
		
		 margin-top: 0; 
		 margin-bottom: 0; 
	}

	.escritorio{
		display: none;
	}

	.movil{
		display: block;
	}

	section.bg-placas-yeso.seccion-producto {
		text-align: center;
	}

	section.bg-operario.seccion-informacion-isla{
		padding: 0;
	}
	section.bg-operario-aplicacion.seccion-informacion-isla{
		padding: 0;
	}

	section.bg-operario-aplicacion.seccion-informacion-isla{
		padding: 0;
	}

	section.bg-operario-aplicacion.seccion-informacion-isla .cuerpo > .cuerpo-flotante > h2{
		text-align: center;
	}

	section.bg-operario-aplicacion.seccion-informacion-isla .cuerpo > .cuerpo-flotante > .dos-columnas{
		column-count: 1;
	}

	section.bg-operario{
		background-image: none;
		background-color: white;
	}

	section.bg-operario-aplicacion{
		background-image: none;
		background-color: white;
	}
	.siglas-marca{
		height: 58px;
	}
	section.bg-placas-yeso {
		padding-top: 7rem;
	}
}


@media(max-width:767px)
{
	section .cuerpo > .movil{
		display: block;
	}

	section .cuerpo > .escritorio{
		display: none;
	}
	
	
	section .cabecera.movil{
		display: block;
	}

	section .cabecera.escritorio{
		display: none;
	}
	
	section .imagenes-botes{
		text-align: center;
	}

	
	section .cuerpo > p{
		line-height: 1.9rem;
	}

	section .cuerpo > h3{
		font-size: 1.3rem;
		line-height: 1.5rem;
	}

	section .cabecera > h2{
		font-size: 1.75rem;
	}

	.tarjeta{
		padding-bottom: 2rem;
	}

	.tarjeta > h3{
		font-size: 1.3rem;
		line-height: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.siglas-marca{
		height: 58px;
	}
	
}

@media(max-width: 700px){
	section {
		padding: 6rem 0 6rem 0;
	}

	
	section .cabecera > h1{
        font-size: 1.9rem;
        line-height: 2.5rem;
        margin-bottom: 2.5rem;
    }

    section .cuerpo > h2{
        font-size: 1.6rem;
        line-height: 2.1rem;

    }

	section .cuerpo > p,
	section .cuerpo > li{
        font-size: 1.07rem;
        line-height: 1.8rem;
	}

	.siglas-marca{
		height: 58px;
	}

}

@media(max-width:581px)
{
	section.bg-placas-yeso.seccion-producto .cabecera>h2>span[class="subtitulo-marca"]{
		font-size: 2rem;
	}

	section.seccion-beneficios .cabecera {
		margin-left: 30px;
	}

	h2{
		font-size: 1.5rem;
	}

	section .cabecera > h2{
		padding-bottom: 0px;
		padding-top: 0px;
	}

	.tarjeta > h3{
		padding-bottom: 0px;
		padding-top: 0px;
		margin-top: 5px;
	}

	p{
		font-size: 0.9rem;
	}

	.infografia-ultimo-parrafo{
		text-align: center;
	}

	.infografia-ultimo-parrafo  img{
		height: 90px;
	}

	.infografia-ultimo-parrafo > .infografias-grandes > img{
		width: 70%;
		height: auto;
	}

	.siglas-marca{
		height: 58px;
	}
	
	.item{
		margin: 0 30px;
	}

	section li {
		text-align: left;
		margin-bottom: 0;
	}
}

@media(max-width:380px)
{

	section .cuerpo > p{
		font-size: 1rem;
	}

	section .cabecera{
		padding-bottom: 1rem;
	}


	section .cabecera > h2{
		font-size: 1.75rem;
	}

	.tarjeta{
		padding-bottom: 2rem;
	}

	.siglas-marca{
		height: 58px;
	}

}