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

/* _> Básica */



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

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

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

img {
	margin-bottom: 1rem;
}

section {
	/*overflow-x: hidden;*/
	padding: 10.6rem 0 10.6rem 0;
}

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

.container-xl {
	max-width: 1420px;
}

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


ul.nav{
	margin-left: auto;
}

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

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	animation-name: transicionAzulNegro;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;

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

.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-obrero-aplicando-espuma{
	background-image: url(../images/fondos/obrero-aplicando-epuma-index.webp);
	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/obrero-aplicando-epuma-index.webp) no-repeat;
	background-size: cover;
	background-position: center;
}



.bg-placas-yeso{
	background-image: url(../images/fondos/placas-de-yeso-espuma-index.webp);
	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.webp) no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-casa-3d{
	background-image: url(../images/fondos/casa-3d-index.webp);
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.55) 100%), url(../images/fondos/casa-3d-index.webp) no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-fuego{
	background-image: url(../images/fondos/fondo-fuego.webp);
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.2) 100%), url(../images/fondos/fondo-fuego.webp) no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-tejas{
	background-image: url(../images/fondos/tejas.webp);
	background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.45) 100%), url(../images/fondos/tejas.webp) no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-limpieza-pistola-neumatica{
	background-image: url(../images/fondos/fondo-limpieza-pistola-neumatica.webp);
	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/fondo-limpieza-pistola-neumatica.webp) no-repeat;
	background-size: cover;
	background-position: center;
}

.siglas-marca{
	height: 58px;
}


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

/* _> Generales */

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


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

.imagenes-botes--pucl {
	max-width: 210px;
}

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

.cabecera__titulo {
	font-size: 2.5rem;
    letter-spacing: -0.03125rem;
    line-height: 2.7rem;
	color: white;
	text-transform: uppercase;
}

.cabecera__subtitulo {
	display: block;
	font-weight: 500;
	font-size: 1.56rem;
	line-height: 1.3;
	margin-top: 1rem;
	padding-bottom: 0px;
	color: white;
	text-transform: none;
}

.cabecera__texto {
	display: block;
	margin: auto;
	font-size: 0.9rem;
	color: white;
	max-width: 55em;
}

.subtitulo-marca {
	font-size: 1.375rem;
	color: white;
	font-style: italic;
}

section ul li{
	margin-bottom: 1.875rem;
    list-style: square;
    margin: 0 0 1.6rem;
	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 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;
}

/* _> Por color */

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

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

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

section.bg-limpieza-pistola-neumatica.seccion-producto .cuerpo{
	color: white;
}

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 .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;
}

.seccion-introduccion .cuerpo p{
    font-size: 1.2rem;
}

.seccion-introduccion img{
	width: 100%;
}

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

.seccion-presentacion .cuerpo > img, .bodegon {
	width: 100%;
	max-width: 960px;
}

.cabecera{
	text-align: center;
	padding-bottom: 1rem;
}
.seccion-instrucciones__texto {
	display: block;
	margin: auto;
}
.seccion-instrucciones__lista {
	columns: 300px  2;
	column-gap: 2rem;
}
.seccion-instrucciones__elementos-lista {
	margin-bottom: .65rem;
}

/* FORMULARIO */
.hidden {
	display: none;
}
.index-link {
	font-weight: 500;
	color: #00ACA9;
	text-decoration: none;
	font-size: .85rem;
}

.index-link:hover {
	color: #003A6A;
	text-decoration: none;
}
.small-letter--black {
    color: var(--color-black);
    font-size: .6875rem;
}

/*
============================
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;
	animation-fill-mode: forwards;

	-webkit-animation-name: zoom;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;

}

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

/*tamaño flecha accesorios*/
.tarjeta > .botonera {
	font-size: 2rem;
}

.tarjeta > .botonera > a{
	color: #004E86; /*debe coincidir con el color inicial animacion*/
}


.tarjeta > .botonera:hover > a  {
	animation-name:transicionAzulNegro;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;

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

@keyframes transicionAzulNegro {
	from {
		/*Color inicial*/
		color: #004E86;
	}
	to {
		/*Color final*/
		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: 60px;
	margin-right: 30px;
}


.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;
}


@media (min-width: 1520px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}


@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)
{
	main{
		overflow-x: hidden;
	}

	.siglas-marca{
		height: 58px;
	}

}


@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;
	}

	.tarjeta{
		padding-bottom: 2rem;
	}

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

	.siglas-marca{
		height: 58px;
	}

	.subtitulo-marca {
		font-size: 1.75rem;
	}

}

@media(max-width: 700px){
	section {
		/*overflow-x: hidden;*/
		padding: 6rem 0 6rem 0;
	}
	.cabecera {
		padding-top: 6rem;
	}

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

	.siglas-marca{
		height: 58px;
	}

}



@media(max-width:581px)
{

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

	.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;
	}
	
}

@media(max-width:380px)
{
	section .cuerpo > p{
		font-size: 1rem;
	}

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

	.tarjeta{
		padding-bottom: 2rem;
	}

	.siglas-marca{
		height: 58px;
	}

}