@import "../style_multiple.css";


.banner-central{
  height: 630px;
  background-color: #fff;
  background: linear-gradient(90deg, #081426 0%, rgba(8, 20, 39, 0.00) 100%), url(../../img/portada-contacto.webp) lightgray 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 1;
}

.banner-central p{
  margin: 0;    
}

.banner-central .container {
  height: 100%;
}
.banner-central .bannerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.banner-central .firstInfo{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
sup{
  font-size: 45%;
  font-weight: normal;
  top: -1.1em;
}
.banner-central .firstInfo .piesContent{
  position: absolute;
  bottom: 14px;
  color: #fff;
  text-shadow: 0px 0px 6px #000000E3;
}
.banner-central .firstInfo .titleBanner{
  margin: 0;
  font-weight: bold;
  color: #fff;
  font-size: 20px;
}
.banner-central .firstInfo .claimBanner{
  color: white;
  font-weight: 600;
  font-size: 48px;
  margin-top: 24px;
  max-width: 533px;
  line-height: 130%;
}
.banner-central .firstInfo .priceBanner{
  display: flex;
  align-items: center;
  font-size: 38px;
  color: white;
  margin-top: 1rem;
}
.banner-central .firstInfo .priceBanner .precio-total{
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: anchor-center;
}
.banner-central .firstInfo .priceBanner .price{
  font-weight: bold;
  font-size: 62px;
  margin-left: 0.5rem;
}
 
.banner-central .firstInfo .priceBanner .desde {
  font-size: 17.074px;
  align-self: self-end;
  margin-bottom: 8px;
}
.banner-central .firstInfo .priceBanner .eurMes {
  font-size: 23.477px;
  font-style: normal;
  font-weight: 700;
  position: relative;
  bottom: 6px;
}
.banner-central .firstInfo .priceBanner .eurMes p:first-of-type{
  font-weight: bold;
}
.banner-central .firstInfo .priceBanner .eurMes p:last-of-type{
  font-size: .8em;
}

.banner-central .firstInfo .banner-manchetas {
  display: flex;
  gap: 6px;
  width: fit-content;
  margin-top: 36px;
}

.banner-central .firstInfo .banner-manchetas .manchetaFirst {
  background-color: var(--action-color);
  padding: 16px 24px;
  color: white;
}

.banner-central .firstInfo .banner-manchetas .manchetaSecond {
  background-color: var(--main-light-blue);
  padding: 16px 24px;
  color: var(--main-blue);
}

.banner-central .firstInfo .banner-manchetas .manchetaFirst .legal,
.banner-central .firstInfo .banner-manchetas .manchetaSecond .legal {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 16px;
  text-align: left;
}

.banner-central .firstInfo .banner-manchetas .manchetaFirst .promo,
.banner-central .firstInfo .banner-manchetas .manchetaSecond .promo {
  font-size: 40px;
  font-weight: 600;
}

.banner-central .mainForm > .inputs-form-llamada input:last-of-type{
  margin-bottom: 10px;
}
.banner-central .mainForm .terminos a{
  text-decoration: underline!important;
}

.banner-central .mainForm .discountForm{
  position: absolute;
  top: 0;
  left: 0;
  line-height: normal;
  font-size: 28px;
  text-align: center;
  background-color: var(--action-color);
  color: #fff;
  border-radius: 100%;
  height: 5em;
  width: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotate(-10deg) translate(-65%, -57%);

}
.banner-central .mainForm .discountForm p{
  margin: 0;
  font-size: 16px;
}
.banner-central .mainForm .discountForm p:first-of-type{
  font-size: 1em;
}

.banner-central .mainForm .pdfButton{
  position: absolute;
  bottom: -5.3rem;
}
.banner-central .mainForm .pdfButton p{
  margin: 0;
  line-height: 1;
  font-size: 17px;
}
.banner-central .mainForm .btnBannerCalc{
  position: absolute;
  bottom: -5.5rem;
  margin: 0;
  font-size: 21px;
  padding: 0.4em 0.9em;
}
.banner-central .mainForm .btnBannerCalc img{
  height: 29px;
  margin-right: 8px;
}
.banner-central .btnBannerCalcMobile{
  display: none;
}

/* ------------- TELEFONOS ------------- */

.telefonosSection {
  background-color: #fff;
  padding: 64px 0 0 0;
}
.telefonosSection .cardsContainer {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.telefonosSection .cardsContainer .cardTelefonos {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  width: 100%;
  max-width: 640px;
  justify-content: center;
  gap: 24px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.telefonosSection .cardsContainer .cardTelefonos .telTitle {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0;
  color: #1c4a8d;
}
.telefonosSection .cardsContainer .cardTelefonos .text {
  text-align: center;
  color: #242424;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0;
}
.telefonosSection .cardsContainer .cardTelefonos.contratacion a {
  color: var(--action-color);
  font-size: 32px;
  font-weight: 700;
}
.telefonosSection .cardsContainer .cardTelefonos.atencion a {
  color: #1C4A8D;
  font-size: 32px;
  font-weight: 700;
}

/* ------------- OTROS TELEFONOS ------------- */

.otrosTelefonosSection {
  background-color: #fff;
  padding: 96px 0 0 0;
}
.otrosTelefonosSection.isEmail {
  padding: 96px 0;
}
.otrosTelefonosSection .cardsContainer{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}
.otrosTelefonosSection .cardsContainer .cardOtrosTelefonos {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 32px;
  height: 199px;
  width: 100%;
  max-width: 304px;
  justify-content: center;
  gap: 24px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.otrosTelefonosSection .cardsContainer .cardOtrosTelefonos .telTitle {
  font-size: 24px;
  line-height: normal;
  font-weight: 700;
  color: var(--medium-blue);
  text-align: center;
  margin-bottom: 0;
}
.otrosTelefonosSection .cardsContainer .cardOtrosTelefonos a {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  text-align: center;
  width: 100%;
}

/* ------------- FAQS ------------- */

.preguntas_frecuentes {
  max-width: unset;
}
.preguntas_frecuentes .containerFaqs {
  max-width: 800px;
  margin: auto;
}