* {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     font-family: "Roboto", sans-serif;

}

 .p:hover {
     color: #626262;
}

 .titulos-inicio {
	font-size: 31px;
    font-weight: bold;
    line-height: 35px;
    text-align: center;
    margin: 10px 5px 5px !important;
    color: #494949;
}
 .subtitulos-inicio {
     font-size: 18px;
     font-weight: 400;
     line-height: 22px;
     text-align: center;
     margin: 30px 15px 75px !important;
     color: #494949;
}
/* ---------- Slider inicio comienza ---------- */
 @keyframes sliderinicio-key-next {
     0% {
         left: 100%;
    }
     100% {
         left: 0;
    }
}
 @keyframes sliderinicio-key-left {
     0% {
         left: 0;
    }
     100% {
         left: -100%;
    }
}
 @keyframes sliderinicio-key-previous {
     0% {
         left: -100%;
    }
     100% {
         left: 0;
    }
}
 @keyframes sliderinicio-key-right {
     0% {
         left: 0;
    }
     100% {
         left: 100%;
    }
}
 .sliderinicio {
     overflow: hidden;
     position: relative;
}
 .sliderinicio > ul {
     margin: 0;
     padding: 0;
     list-style: none;
     position: relative;
     float: left;
     width: 100%;
     overflow: hidden;
}
 .sliderinicio > ul > li {
     position: absolute;
     left: 100%;
     top: 0;
     width: 100%;
     height: 100%;
     visibility: hidden;
     animation-timing-function: ease-in-out;
     animation-fill-mode: forwards;
}
 .sliderinicio > ul > li.active {
     visibility: visible;
     left: 0;
}
 .sliderinicio > ul > li.left {
     animation-name: sliderinicio-key-left;
}
 .sliderinicio > ul > li.next {
     animation-name: sliderinicio-key-next;
}
 .sliderinicio > ul > li.right {
     animation-name: sliderinicio-key-right;
}
 .sliderinicio > ul > li.previous {
     animation-name: sliderinicio-key-previous;
}
 .sliderinicio {
     max-width: 1200px;
     height: 380px;
     margin: 40px auto 50px;
     background-color: #fff;
}
 .sliderinicio > button {
     transition: 0.3s;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     background-color: transparent;
     opacity: 0.8;
     border: 0;
     outline: none;
     padding: 0;
     cursor: pointer;
     background-size: 60%;
     background-repeat: no-repeat;
     background-position: center;
}
 .sliderinicio > button:hover {
     opacity: 1;
}
 .sliderinicio > button:nth-child(2) {
     left: 10px;
     background-image: url("../../../resources/images/delegadas/icon-left-arrow-slider.png");
}
 .sliderinicio > button:nth-child(3) {
     right: 10px;
     background-image: url("../../../resources/images/delegadas/icon-right-arrow-slider.png");
}
 .sliderinicio > ul > li > img {
     width: 100%;
     height: auto;
     position: absolute;
     object-fit: cover;
     left: 0;
     top: 0;
}
 .sliderinicio > ul > li {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 0;
}
/* ---------- Slider inicio finaliza ---------- */
/* ---------- Clientes Mapfre comienza ---------- */
 .clientes-mapfre {
     width: 850px;
     max-width: 100%;
     margin: 40px auto 30px;
     background: #f7f6f4;
     display: flex;
     border-radius: 9px;
     flex-direction: row;
     justify-content: space-between;
}
 .clientes-mapfre-texto {
     display: flex;
     flex-direction: column;
}
 .clientes-mapfre-texto .titulo {
     font-size: 30px;
     color: #d81e05;
     font-weight: 700;
     margin: 20px 10px 0 45px;
}
 .clientes-mapfre-texto .texto {
     font-size: 12px;
     font-weight: 500;
     margin: 0 10px 10px 45px;
}
 .clientes-mapfre-imagen {
     height: 142px !important;
}
 .clientes-mapfre-imagen img {
     height: 142px;
     border-radius: 0 9px 9px 0;
}

.img-banner-clientes img{
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}


/* ---------- Clientes Mapfre finaliza ---------- */
/* ---------- Cards footer Mapfre comienza ---------- */
 .cards-footer-mapfre-container {
     width: 1120px;
     max-width: 100%;
     margin: 40px auto 80px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     column-gap: 10px;
     text-align: center;
}
 .cards-footer-mapfre-card {
     background: #f5f6f8;
     border: 1px solid #d1d5d6;
     flex: 1 1 0;
     width: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 12px 8px;
}
 .cards-footer-mapfre-card .icono-principal {
     width: 45px;
     height: auto;
}
 .cards-footer-mapfre-card .icono-principal img {
     width: 45px;
     height: auto;
}
 .cards-footer-mapfre-card .titulo {
     font-size: 16px;
     color: #000;
     font-weight: 800;
     margin: 5px 10px;
     line-height: 18px;
}
 .cards-footer-mapfre-card .icono-secundario {
     width: 20px;
     height: auto;
     display: none;
}
 .cards-footer-mapfre-card .icono-secundario img {
     width: 20px;
     height: auto;
}
 .cards-footer-mapfre-card .texto {
     font-size: 13px;
     color: #757677;
     font-weight: 500;
     margin: 5px 10px;
     line-height: 16px;
}
/* ---------- Cards footer Mapfre finaliza ---------- */
/* ---------- Responsive design comienza ---------- */
 @media screen and (max-width: 1024px) {
     .sliderinicio {
         height: 300px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 60%;
    }
}
 @media screen and (max-width: 980px) {
     .sliderinicio {
         height: 350px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 80%;
    }
}
 @media screen and (max-width: 640px) {
     .sliderinicio {
         height: 300px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 75%;
    }
}
 @media screen and (max-width: 580px) {
     .sliderinicio {
         height: 280px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 80%;
    }
}
 @media screen and (max-width: 540px) {
     .sliderinicio {
         height: 300px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 85%;
    }
}
 @media screen and (max-width: 480px) {
     .sliderinicio {
         height: 280px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 98%;
    }
}
 @media screen and (max-width: 420px) {
     .sliderinicio {
         height: 300px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 88%;
    }
}
 @media screen and (max-width: 360px) {
     .sliderinicio {
         height: 245px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 95%;
    }
}
 @media screen and (max-width: 320px) {
     .sliderinicio {
         height: 165px;
    }
     .sliderinicio > ul > li > img {
         width: 100%;
         height: 88%;
    }
}
/* ---------- Responsive design finaliza ---------- */
 .title-wrap-header {
     font-size: 2.5rem;
}
 .title-title {
     font-size: 4.2rem;
     color: var(--red);
}
 .phone-header i {
     margin-right: 5px;
}
 .nav-item {
     font-size: 1.6rem;
     margin-left: 10px;
     cursor: pointer;
}
 .banner {
     background: var(--red);
     padding-right: 40px;
     margin: 50px 0px;
}
 .banner-info {
     font-size: 1.4rem;
     color: var(--white);
}
 .btn-mapfre {
     color: var(--red);
     background-color: var(--white);
     padding: 6px 12px;
     border-radius: 5px;
     margin: 20px 0px;
     font-size: 2rem;
}
 .phone-mapfre {
     font-size: 3rem;
}
 .phone-mapfre i {
     margin-right: 10px;
     font-size: 2.5rem;
}
 .subtitle {
     font-size: 2.6rem;
     font-weight: bold;
}
 .subtitle p {
     margin: 0px;
}
 .title-section {
     font-size: 2.5rem;
     margin: 100px 0px 50px 0px;
     position: relative;
}
 .title-section::after {
     content: "";
     width: 65px;
     height: 2px;
     background: var(--grey-dark);
     position: absolute;
     left: 0px;
     bottom: -15px;
}
 .cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 50px 10px;
}
 .card {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
     align-items: flex-start;
}
 .card-title {
     font-size: 2rem;
     margin: 15px;
}
 .card-content {
     font-size: 1.4rem;
     margin: 0px 30px 15px 30px;
}
 .card-footer {
     font-size: 1.4rem;
     color: var(--red);
     width: 100%;
}
 .footer-section-1 {
     background-color: var(--red);
     color: var(--white);
}
 .copy {
     font-size: 1.4rem;
}
 .footerText {
     font-size: 0.8rem;
}
 .media i {
     margin-left: 10px;
}
 .slide-container {
     width: 100%;
     padding: 40px 0;
}
 .slide-content {
     margin: 0 50px;
     overflow: hidden;
     border-radius: 10px;
}
 .card {
     border-radius: 10px;
     background-color: #fff;
     display: flex !important;
     justify-content: space-between !important;
     flex-direction: column !important;
     align-items: center !important;
     height: auto !important;
}

.card-index {
    display: flex !important;
    justify-content: space-between !important;
    flex-direction: column !important;
    align-items: center !important; 
    border: 1px solid rgba(0,0,0,.125) !important;   
}

 .image-content, .card-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 !important;
     margin: 0 !important;
}
 .image-content {
     position: relative;
     row-gap: 5px;
     padding: 0;
}
 .card-image {
     position: relative;
     height: auto;
     width: 100%;
     overflow: hidden;
}
 .card-image .card-img {
     height: auto;
     width: 100%;
     border-radius: 10px 10px 0 0;
     filter: brightness(82%);
}
 .description {
     font-size: 15px;
     color: #707070;
     text-align: center;
     font-weight: 500;
     padding: 20px 25px 5px;
}
 .card-buttons {
     display: flex;
}
 .card-buttons a, .card-buttons a {
     text-decoration: none;
     text-align: center;
}
 .card-buttons a.button-learn {
     color: #000;
}
 .card-buttons a.button-budget {
     color: #fff;
}
 .button-learn, .button-budget {
     width: 100%;
     height: 55px;
     border: 1px solid #d2d2d2;
     font-size: 16px;
     padding: 15px;
     margin: 0;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 500;
}
 .button-learn {
     color: #000;
     background-color: #fff;
     border-radius: 0 0 0 10px;
}
 .button-learn:hover {
     background: #f5f6f8;
}
 .button-budget {
     color: #fff;
     background-color: #00bd5f;
     border-radius: 0 0 10px 0;
}
 .button-budget:hover {
     background: #00a251;
}
 .swiper-navBtn {
     color: #000;
     transition: color 0.3s ease;
}
 .swiper-navBtn:hover {
     color: gray;
}
 .swiper-navBtn::before, .swiper-navBtn::after {
     font-size: 35px;
     font-weight: bold;
}
 .swiper-button-next {
     right: 0;
}
 .swiper-button-prev {
     left: 0;
}



.bg-lineal{
	background: linear-gradient(#f5f6f7 10%, white);
}

.tarjetasIndex {
	background-color: #f5f6f7 !important;
	border: 1px solid rgba(0,0,0,.125) !important; 
	text-align: center !important;
	height: 195px;
}

.tarjetaBanner{
	background-color: #f7f6f4 !important;
	border-radius: 10px;
	text-align: justify;
}

.imgTarjetaBanner {	
    width: 108%;
    height: 100%;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.imgBannerSeguros {	
    width: 100%;
    height: 100%;
}


.topCarrusel{
	margin-top: 3rem!important;
}


.titluloTarjetas{
	color: #494949;
	font-size: 15px;
}

.tg-gray{
	background-color: #f5f6f7 !important;	
	height: 5rem;
    border-radius: 0px !important;
    border: 0.5px solid #c9ccce!important;
}



 @media screen and (max-width: 767px) {
		.slide-content {
		    margin: 0 17px;
		}

	.tarjetaBanner{
		background-color: white !important;
		border-radius: 0px;
		text-align: center;
	}   
	
	.ml-5{
		margin-left: 0 !important;
	}
	
	.swiper-button-next{
		right: -5px !important;
	}
	
	.swiper-button-prev{
	  	left: -5px !important;
	}
	
	.swiper-button-prev:after {
		font-size: 1.5rem !important;
	}
	
	.swiper-button-next:after {
		font-size: 1.5rem !important;
	}	
	
	.bg-light {
   	 	background-color: #ffffff!important;
	}
	
	
	.bg-lineal{
		 background: #ffffff!important;
	}
	
	.topCarrusel{
		margin-top: 0rem!important;
	}	
		
}

@media (min-width: 768px) and (max-width: 959px) {
	

	.clientes-mapfre-texto {
	    display: flex;
	    flex-direction: column;
	    width: 166%;
	}
    
	.tarjetaBanner{
		background-color: white !important;
		border-radius: 0px;
		text-align: center;
	}
	
	.imgTarjetaBanner {
	    width: 100%;
	    height: 100%;
	    border-radius: 10px;
	}
	
	.tarjetasIndex {
	    background-color: #f5f6f7 !important;
	    border: 1px solid rgba(0,0,0,.125) !important;
	    text-align: center !important;
	    height: 17rem;
	    width: 9rem;
	}
	
	.textoQNecesita{
		font-size: 1rem !Important;		
	}
	
	.nombreAsesor{
		font-size: 0.9rem !Important;
	}
		      
}

@media (min-width: 960px) and (max-width: 1368px){
	.tarjetasIndex {
	    height: 221px;
	}
	
}