/* Banner */

.bannertop{ width:100%; max-width:1630px; margin:0 auto; text-align: center; }
.bannertop img{ max-width:100%; }


.funcion {
  scroll-margin-top: 155px; /* altura de tu header + 10px */
}

@media screen and (max-width:1024px) {
	.funcion {
	scroll-margin-top: 97px; /* altura de tu header + 10px */
	}
}

/* funciones */

.funciones { width:100%; text-align:center; padding: 10px 0px; }
.funciones .tituloGrande { font-size: 2.82em; font-weight: 300; letter-spacing:+1px; }
.funciones .tituloRosa { font-size: 2.82em; font-weight: bold; color:#ed3269; line-height: 1; }
.funciones .funcionesContenedor { width: 100%; max-width: 1160px; text-align: center; line-height: 1.2; margin:auto; padding-left: 40px; }
.funciones .funcionesContenedor .funcion { width:100%; font-size: 1.12em; font-weight: bold; text-align:left; display: flex; align-items: center; gap: 15px; padding-bottom: 15px; text-transform: uppercase; }
.funciones .funcionesContenedor .funcionDetalle { width:100%; font-size: 1.12em; text-align:left; width:100%; font-size: 1.12em; text-align:left; display: flex; align-items: center; gap: 20px; padding-bottom: 25px; }
.funciones .funcionesContenedor .funcionDetalle div { width: calc( 100% - 356px - 20px); }
.funciones .funcionesContenedor .funcionDetalle img { width: 356px; border-radius: 8px; border:solid rgb(233, 233, 233) 1px; }

.derecha { flex-direction: row-reverse; text-align: right !important; }

@media screen and (max-width:1200px) {
	.funciones .tituloGrande { font-size: 2.36em; }
	.funciones .tituloRosa { font-size: 2.36em; }
	.funciones .funcionesContenedor { margin:0 -40px 0 0; padding-left: 0px; }
	.funciones .funcionesContenedor .funcion{ font-size: 1em; }
	.funciones .funcionesContenedor .funcion img { width: 65px; }
	.funciones .funcionesContenedor .funcionDetalle{ font-size: 1em; }
	.funciones .funcionesContenedor .funcionDetalle div { width: 66.6%; }
	.funciones .funcionesContenedor .funcionDetalle img { width: 33.3%; }	
}

@media screen and (max-width:1000px) {
	.funciones .tituloGrande { font-size: 1.88em }
	.funciones .tituloRosa { font-size: 1.88em }	
	.funciones .funcionesContenedor .funcion{ font-size: 0.88em; }
	.funciones .funcionesContenedor .funcion img { width: 60px; }
	.funciones .funcionesContenedor .funcionDetalle{ font-size: 0.88em; }
}

@media screen and (max-width:600px) {
	.funciones .tituloGrande { font-size: 1.36em }
	.funciones .tituloRosa { font-size: 1.36em }
	.funciones .funcionesContenedor .funcion{ font-size: 0.76em; }
	.funciones .funcionesContenedor .funcion img { width: 50px; }
	.funciones .funcionesContenedor .funcionDetalle{ display: block; font-size: 0.76em; }
	.funciones .funcionesContenedor .funcionDetalle div { width: auto; }
	.funciones .funcionesContenedor .funcionDetalle img { float: left; margin: 0px 15px 5px 0; }
	.funciones .funcionesContenedor .funcionDetalle.derecha img { float:right; margin: 0px 0 5px 15px; }
}

@media screen and (max-width:520px) {
	.funciones .funcionesContenedor .funcion{ font-size: 0.64em; }
	.funciones .funcionesContenedor .funcion img { width: 52px; }
	.funciones .funcionesContenedor .funcionDetalle{ font-size: 0.64em; }
}