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

/* _> Básica */

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

h1{
	font-size: 1.875rem;
}
h3{
	font-size: 1.125rem;
}

p,
small {
	font-family: 'Roboto', sans-serif;
	padding: 0;
	margin: 0;
	font-weight: 400;
}

.btn {
	font-family: 'Roboto', sans-serif;
	font-size: .875rem;
	padding: .5rem 2rem;
	font-weight: 500;
}

.btn:hover{
	background-color: #007bff;
	color: white;
	border: 1px solid #007bff;
}


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

img {
	margin-bottom: 1rem;
}

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

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


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


ul.nav{
	margin-left: auto;
}

.navbar-light .navbar-nav .nav-link {
	color: #003867;
	font-family: 'Montserrat', sans-serif;
}


.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{
	border-radius: 0px;
	color: #003867;
	border-color: #003867;
}


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

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



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

.bg-testigo-curado{
	background-image: url(../images/fondos/fondo-testigo-curado.webp);
	background-size: cover;
}

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


.bg-imagen-verde{
	background-image: url(../images/fondos/fondo-imagen-verde.webp);
	background-repeat: no-repeat;
	background-size: cover;
}

.siglas-marca{
	height: 58px;
}


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

/* _> Generales */

section.seccion-escaparate-slider{
	text-align: center;
}

section.seccion-escaparate-slider .cabecera > h2{
	font-size: 2rem;
}

section.seccion-escaparate-slider .cabecera > p[class="subtitulo"]{
	font-size: 1.1rem;
}


section.seccion-escaparate-slider .cabecera > .infografias  img{
	width: 100%;
	height: auto;
	max-width: 342px;
}


section.seccion-escaparate-slider .cuerpo > .slider-horizontal-progreso-titulos{
	padding-bottom: 5rem;
}


section.seccion-escaparate-slider .cabecera{
	padding-bottom: 2rem;
}

section.seccion-escaparate-slider .cuerpo{
	padding-top: 2rem;
}


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


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

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

section p[class="antetitulo"]{
	font-variant: small-caps;
	text-transform: lowercase;
	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.seccion-presentacion .cuerpo > img{
	width: 100%;
	max-width: 1300px;
}

section.seccion-introduccion.seccion-dos-columnas .cuerpo > .botonera{
	padding-top: 1.5rem;
	padding-bottom: 3rem;
}
section.seccion-introduccion.seccion-dos-columnas .cuerpo > .botonera > .btn{
	border-radius: 0px;
}

section.bg-testigo-curado.seccion-introduccion.seccion-dos-columnas .cuerpo{
	color: white;
	text-align: left;
}

.seccion-producto .cuerpo{
	color: white;
}

.seccion-producto .cuerpo ul{
	padding-left: 18px;
	list-style-type: square;
}

.seccion-producto .cuerpo ul li{
	padding-bottom: 4px;
}


section.seccion-producto .cabecera > h2 > .siglas-marca > img{
	width: 100%;
	max-width: 400px;
}

section.seccion-producto .botonera > .btn{
	border-radius: 0px;
}



/* _> Por contenido */

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

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


.seccion-presentacion .cabecera>h2{
	font-size: 4rem;
	line-height: 4rem;
	color: white;
	text-transform: uppercase;
}

.seccion-presentacion .cabecera>p[class="subtitulo"]{
	font-size: 1.9rem;
	padding-bottom: 0px;
	padding-top:  12px;
	color: white;
}


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


@keyframes zoom {
	from {
		width: 70%;
		margin-left: 0%;
	}
	to {
		width: 75%;
		margin-left: 0%;
	}
  }


/* _> Infografias*/

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


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


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

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

/* _> Slider con fade*/

.slider-horizontal-progreso-titulos >.barra-progreso{
	padding: 0.5rem 0 2rem 0;

}

.slider-horizontal-progreso-titulos >.slider-con-fundido > div > img{
	width: 100%;

}

.movil{
	display: none;
}


.video > iframe {
    width: 100%;
    height: 300px;
}

@media(max-width:1000px)
{

	
	section .imagenes-botes>img{
		max-height: 500px;
		
	}

	ul.nav{
		text-align: center;
	}

}



@media(max-width:900px)
{

	.video > iframe{
		width: 100%;
		height: 220px;
	}

	

	section{
		overflow-x: hidden;
	}

	
	.escritorio{
		display: none;
	}

	.movil{
		display: block;
	}

	section.seccion-presentacion .cabecera > h1{
		line-height: 4rem;
	}
	section.seccion-presentacion .cabecera > p[class="subtitulo"]{
		font-size: 2rem;
	}

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


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

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

	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.seccion-presentacion .cabecera > h1{
		font-size: 3rem;
		line-height: 2.7rem;
		padding-bottom: 0.5rem;
	}

	section.seccion-presentacion .cabecera > p[class="subtitulo"]{
		padding-top: 0px;
	}

	section .cuerpo > p{
		font-size: 1.1rem;
		line-height: 1.5rem;
	}

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

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

	section.seccion-escaparate-slider .cabecera > h2 {
		font-size: 1.4rem;
	}

}

@media(max-width:581px)
{

	h1{
		font-size: 1.75rem;
	}

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

}

@media(max-width:380px)
{
	section.seccion-presentacion .cabecera > h1{
		font-size: 2.5rem;
	}

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

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


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

@keyframes transicionAzulNegro {
	from {
		/*Color inicial*/
		color: #003867;
	}
	to {
		/*Color final*/
		color:  rgba(0,0,0,0.8);
	}
  }

  .progress{
	  height: 2px;
  }

.progress-bar{

	background-color: #89C2FF;
}

#gama-fijacion a:hover{
	text-decoration: none;
}


/* nuevas tarjetas */
.mo-tarjeta__container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25em;
	padding: 1em;
}
.mo-tarjeta{
	display: flex;
	flex-direction: column;
	width: 90%;
	padding: 1em;
	background-color: white;
	margin-bottom: 2em;
	box-shadow: 0px 0px 20px rgba(0,72,155,0.2);
}
.mo-tarjeta__img{
	align-self: center;
	width: 150px;
	transition: all ease-in-out 500ms;
}
.mo-tarjeta__img:hover{
	transform: scale(105%);
}
.mo-tarjeta__body{
	color: black;
}
.mo-tarjeta__arrow{
	font-size: 1.5rem;
	margin: auto .5em .5em auto;
	color: #003867;
}
.mo-tarjeta__arrow:hover{
	color: black;
}
@media(min-width:576px){
	.mo-tarjeta__container{
		padding: 0;
	}
	.mo-tarjeta{
		max-width: 250px;
	}
}