@import "../style_multiple.css";

@font-face {
  font-family: FSEmericWeb;
  src: url(../fonts/FSEmericWeb-Light.otf);
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: FSEmericWeb;
  src: url(../fonts/FSEmericWeb-Regular.otf);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: FSEmericWeb;
  src: url(../fonts/FSEmericWeb-SemiBold.otf);
  font-weight: 700;
  font-display: swap;
}

:root {
  --amarillo: #F6BF00;
  --naranja: #E53A16;
  --azul: #004571;
  --text: #63666A;
  --background: #F4F4F2;
}

button:focus {outline:0;}

html{
  margin: 0;
}
body{
  font-family: FSEmericWeb, arial, sans-serif;
  margin: 0;
  line-height: 1 !important;
}

a{
    text-decoration: none!important;
}

input:focus::placeholder {
  color: transparent;
}
input:focus-visible {
  outline: none;
}
input {
  color: var(--text);
}
input[type='tel']#telefono.badInput, input#postal.badInput {
    border: 1px solid var(--naranja)!important; 
}
input[type='tel']#telefono.badInput::placeholder, input#postal.badInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--naranja)!important;
    opacity: 1; /* Firefox */
}
input[type='tel']#telefono.badInput:-ms-input-placeholder, input#postal.badInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--naranja)!important;
}
input[type='tel']#telefono.badInput::-ms-input-placeholder, input#postal.badInput::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--naranja)!important;
}
input[type='tel']#telefono.badInput:focus-visible, input#postal.badInput:focus-visible {
  outline:none
}

section h2{
  width: 100%;
  text-align: center;
  font-size: 31px;
  color: var(--azul);
  font-weight: 200;
  margin-bottom: 3rem;
}

/* ------------- BANNER CENTRAL ------------- */
sup {
  top: -0.3em;
}
.banner-central {
  min-height: 705px;
  padding-top: 107px;
  background-color: var(--background);
  mix-blend-mode: darken;
}
.banner-central .bannerContainer {
  background-image: url(../../img/portada.png);
  background-size: 360px;
  background-repeat: no-repeat;
  background-position: 52% 236px;
}
.banner-central .container, .banner-central .row{
  height: 100%;
}

.banner-central .firstInfo{
  height: 540px;
  width: 702px;
  display: flex;
  flex-direction: column;
  color: var(--azul);
}
.banner-central .firstInfo h1 {
  margin-top: 26px;
  margin-bottom: 0px;
  font-size: 22px !important;
}
.banner-central .firstInfo .line{
  padding: 7px;
  background-color: var(--amarillo);
  border-radius: 10px;
  width: 140px;
}
.banner-central .firstInfo .mainTitle{
  font-size: 29px;
  font-weight: 400;
  margin-bottom: 32px;
}
.banner-central .firstInfo .secondTitle{
  margin-top: 32px;
  margin-bottom: 0px;
  font-weight: 700;
  max-width: 590px;
}
.banner-central .firstInfo .secondTitle h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 55px !important;
  font-weight: 700;
  line-height: 1;
  max-width: 426px;
}
.banner-central .firstInfo h1 span.precio {
  font-size: 89px;
  font-weight: 600;
  color: #E53A16;
}
.banner-central .firstInfo h1 span.regalo {
  font-size: 37px;
  font-weight: 600;
}
.banner-central .firstInfo .secondTitle sup{
  font-size: 20px;
  top: -1.3em;
 }
.banner-central .firstInfo .condiciones{
  font-size: 14px;
  font-weight: 200;
  margin-top: auto;
}
.franjaBanner h2 {
  font-size: 28px;
  font-weight: 500 !important;
  margin-bottom: 0rem !important;
  padding: 5px;
}

/* ------------- FIN BANNER CENTRAL ------------- */

/* FORM */

.banner-central .mainForm {
  height: 350px;
  background-color: white;
  width: 350px;
  box-shadow: 0px 0px 6px 2px #00000029;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.banner-central .mainForm .succes-form-cobertura-main, .banner-central .mainForm .succes-form-nocobertura-main, .banner-central .mainForm .fail-form-cobertura-main {
  display: none;
  color: var(--azul);
  text-align: center;
  font-size: 17px;
  padding: 2rem;
}

.banner-central .mainForm .succes-form-cobertura-main i, .banner-central .mainForm .succes-form-nocobertura-main i, .banner-central .mainForm .fail-form-cobertura-main i {
  margin-top: 10px;
}

.banner-central .mainForm .succes-form, .banner-central .mainForm .fail-form {
  text-align: center;
  width: 85%;
  margin: auto;
  color: var(--azul);
}

.banner-central .mainForm .succes-form i, .banner-central .mainForm .fail-form i {
  margin-top: 1rem;
}

.banner-central .mainForm .form_pp p {
  color: var(--azul);
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}

.banner-central .mainForm .lead{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner-central .mainForm .lead .inputs-form-llamada, .banner-central .mainForm .lead .inputs-form-postal{
  width: 100%;
}


.banner-central .mainForm .lead .atencion-llamada{
  margin-bottom: 0;
}

.banner-central .mainForm .lead .inputs-form-llamada input, .banner-central .mainForm .lead .inputs-form-postal input{
  width: 100%;
  text-align: center;
  height: 40px;
  border: 1px solid #63666a;
  margin-bottom: 5px;
  border-radius: 5px;
}

.banner-central .mainForm .lead .btn-quiero button{
  background-color: var(--azul);
  color: #fff;
  border: 0;
  padding: 16px 25px;
  border-radius: 5px;
  line-height: 1;
  cursor: pointer;
}
.banner-central .mainForm .lead .terminos{
  display: none;
}
.banner-outOfTime .firstInfo {
  padding-top: 100px;
  padding-bottom: 0;
}

/* ------------- FIN BANNER CENTRAL ------------- */

/* ------------- FORM FLOATING ------------- */
.formFloating {
  padding: 2rem 0;
}

.formFloating .formContainer {
  position: relative;
  background-color: #fff;
  box-shadow: 0px 10px 30px #0000001A;
  width: 444px;
  text-align: center;
  padding: 1rem 20px 1rem 29px;
  border-radius: 5px;
  z-index: 1;

}

.formFloating form .lead.calcu {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.formFloating .formContainer form p.titleForm {
  text-align: center;
  font-size: 22px;
  align-self: center;
  margin-bottom: 10px;
  font-weight: 800;
  color: var(--azul);
  line-height: 1.2;
}
.formFloating .formContainer form .textoCalc {
  color: var(--text);
}
.formFloating .formContainer form p.head {
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;
  color: var(--azul);
  margin-left: 4px;
}

.formFloating .formContainer form .inputArea {
  text-align: left;
  width: 100%;
}
.formFloating .formContainer form .inputArea .head {
  margin-bottom: 10px;
}
.formFloating .formContainer form .inputArea .opciones {
  font-size: 12px;
  color: #7f8f99;
  font-weight: 100;
  margin-left: 4px;
  margin-top: -5px;
}
.formFloating .formContainer form .slideCard p{
  text-align: left;
  font-size: 16px;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 0.5;
  margin-top: 10px;
}

.formFloating form .lead .checkbox-calculadora.terminos {
  order: unset;
  font-size: 13px;
  margin-top: 10px;
  color: #63666A;
}

.formFloating form .lead .checkbox-calculadora.terminos a{
  text-decoration: underline !important;
  font-size: 13px;
}
.formFloating .formContainer form .inputArea .cardInput {
  display: flex;
}
.formFloating form .lead .checkbox-calculadora {
  margin-bottom: 5px;
  font-size: 16px;
  text-align: left;
  position: relative;
  padding-left: 25px;
  margin-right: 30px;
  display: inline;
  cursor: pointer;
}
/* ---- CUSTOM CHECKBOX ---- */

/* Hide the browser's default checkbox */
.formFloating form .lead .checkbox-calculadora input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.formFloating form .lead .checkbox-calculadora .checkmark {
  position: absolute;
  top: 0;
  left: 4px;
  height: 15px;
  width: 15px;
  border: 1px solid #004571;
  border-radius: 50%;
}

.formFloating form .lead .checkbox-calculadora.terminos .checkmark {
  border-radius: 0;
  border: 1px solid #707070;
  background-color: unset;
  height: 18px;
  width: 18px;
}

/* On mouse-over, add a grey background color */

.formFloating form .lead .checkbox-calculadora.terminos:hover input ~ .checkmark {
  background-color: unset;
}

/* When the checkbox is checked, add a yellow background */
.formFloating form .lead .checkbox-calculadora input:checked ~ .checkmark {
  background: radial-gradient( var(--amarillo) 55%, rgb(255, 254, 254) .5px);
}

.formFloating form .lead .checkbox-calculadora.terminos input:checked ~ .checkmark {
  background-color: unset;
  border: 2px solid var(--azul)!important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.formFloating form .lead .checkbox-calculadora .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.formFloating form .lead .checkbox-calculadora input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.formFloating form .lead .checkbox-calculadora.terminos .checkmark:after {
  left: 5px;
  top: 1px;
}

.formFloating .formContainer form .slideCard #myRange{
  -webkit-appearance: none;
  background: #B2D9E1;
  outline: none;
  height: 5px;
  width: 100%;
  opacity: 1;
}
.formFloating .formContainer form .slideCard #myRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--azul);
  cursor: pointer;
}

.formFloating .formContainer form .slideCard #myRange::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--azul);
  cursor: pointer;
}

.formFloating .formContainer form .inputForm,
.formFloating .formContainer form .inputEmail {
  display: flex;
  margin-left: 16px;
  margin-right: 25px;
}
.formFloating .formContainer form .inputEmail {
  width: 92.5%;
  margin-left: 5px;
}
.formFloating .formContainer form .inputForm > div:first-of-type,
.formFloating .formContainer form .inputEmail > div:first-of-type {
  margin-right: 10px;
  margin-left: -10px;
}
.formFloating .formContainer form .inputForm > div,
.formFloating .formContainer form .inputEmail > div{
  text-align: left;
}
.formFloating .formContainer form .inputForm label,
.formFloating .formContainer form .inputEmail label{
  font-weight: 400;
  margin-bottom: 0;
  font-size: 14px;
  margin-bottom: 3px;
}
.formFloating .formContainer form label{
  user-select: none;
}
.formFloating .formContainer form .inputForm input,
.formFloating .formContainer form .inputEmail input{
  height: 40px;
  width: 100%;
  border: none;
  /* font-size: 12px; */
  padding: 5px;
  color: #000000;
  border-radius: 5px;
  font-weight: 400;
  border: 1px solid #33333380;
  margin-bottom: 5px;
}
.formFloating .formContainer form .inputForm .input-tel {
  width: 55%;
}
.formFloating .formContainer form .inputForm .input-cp {
  width: 80%;
}
.formFloating .formContainer form .calc-banner-label{
  color: var(--azul);
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  font-family: FSEmericWeb;
}
.formFloating .formContainer form .inputForm input::placeholder,
.formFloating .formContainer form .inputEmail input::placeholder{
  color: #757575;
  font-size: 14px;

}

.formFloating .formContainer form .inputForm input:focus-visible,
.formFloating .formContainer form .inputEmail input:focus-visible {
  outline: none;
}

.formFloating .formContainer form .btn-llama-banner{
  background-color: var(--azul);
  color: #ffffff;
  margin: auto;
  margin-top: 1rem;
  font-weight: 500;
  transition: all 0.1s ease-out;
  border-radius: 5px;
  padding: 10px 25px;
  border: none;
  font-size: 17px;
  line-height: 1.5;
  min-width: 215px;
  min-height: 45px;
}

.formFloating .formContainer form .btn-llama-banner:focus, .formFloating .formContainer form .btn-llama-banner:focus-visible {
  outline: none;
}
.formFloating .formContainer form .inputEmail > div:first-of-type {
  width: 100%;
  margin: 1px;
}

.formFloating .formContainer form i{
  margin: 1rem auto 1rem auto;
  scale: 120%;
}

.formFloating .formContainer form .btn-llama-banner i{
  scale: unset;
  margin: unset;
}

.formFloating .buttonContainer {
  position: relative;
  width: 360px;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.formFloating .buttonContainer .btn-llama-banner {
  background-color: var(--naranja);
  color: #ffffff;
  width: 230px;
  margin: auto;
  margin-top: 1rem;
  font-weight: 700;
  transition: all 0.1s ease-out;
  border-radius: 5px;
  padding: 17px;
  font-size: 17px;
}

.formFloating .buttonContainer .btn-llama-banner.arrow {
  background-color: var(--naranja);
  color: #FFFFFF;
}

.formFloating .buttonContainer .btn-llama-banner:focus, .formFloating .buttonContainer .btn-llama-banner:focus-visible {
  outline: none;
}

/* SWITCH-CALCULADORA */

.formFloating .mainFormFloating .selectionCard input[type=checkbox],
.formFloating .mainFormFloating .selectionCard input[type=radio]{
  /* position: absolute; */
  opacity: 0;
}
.formFloating .mainFormFloating .switch-calculadora {
  position: relative;
  display: inline-block;
  width: 47px;
  height: 20px;
}
.formFloating .mainFormFloating .switch-calculadora .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.formFloating .mainFormFloating .switch-calculadora .slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
.formFloating .mainFormFloating  .switch-calculadora .slider.round:before {
  border-radius: 50%;
}
.formFloating .mainFormFloating .switch-calculadora input:checked + .slider {
  background-color: #079863;
}
.formFloating .mainFormFloating .switch-calculadora .slider.round {
  border-radius: 34px;
}
.formFloating .mainFormFloating .selectionCard span {
  font-weight: 400;
  margin-right: 5px;
  color: var(--text);
}
.formFloating .mainFormFloating  .switch-calculadora input:checked + .slider:before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}

/* FIN SWITCH-CALCULADORA */

.banner-central .mainFormFloating .succes-form-cobertura-banner,
.banner-central .mainFormFloating .succes-form-nocobertura-banner,
.banner-central .mainFormFloating .fail-form-cobertura-banner {
  display: none;
  color: var(--azul);
  text-align: center;
  font-size: 17px;
  padding: 2rem;
  line-height: 1.2;
}

.banner-central .mainFormFloating .succes-form-cobertura-banner i,
.banner-central .mainFormFloating .succes-form-nocobertura-banner i,
.banner-central .mainFormFloating .fail-form-cobertura-banner i {
  margin-top: 10px;
}

/* ------------- CALCULADORA ------------- */

.calculadoraSection .calculadoraContainer img.instalador {
  position: absolute;
  width: 367px !important;
  margin-left: 4%;
  top: -63px !important;
  user-select: none;
}
.calculadoraSection .calculadoraContainer {
  min-height: 466px !important;
}
.calculadoraSection .calculadoraContainer .btn-quiero-calc {
  justify-content: left !important;
  width: 173px;
}
.calculadoraSection .nat-hero-policy {
  width: 96%;
}
.calculadoraSection .calculadoraContainer h2 {
  line-height: 1;
}
.calculadoraSection .calculadoraContainer .claimCalculadoraRojo {
  color: var(--naranja);
}
.calculadoraSection .atencion-llamada {
  width: unset;
}

/* ------------- FIN CALCULADORA ------------- */
.formFloating .nat-hero-policy {
  width: 22.8rem;
  margin: 12px 8px;
  height: 35px;
}

/* ------------- FRANJA ------------- */

.franjaBanner {
  background-color: var(--amarillo);
  padding: 10px 3rem;
  color: var(--azul);
  text-align: center;
  display: flex;
  align-items: center;
}
.franjaBanner h2 {
  font-size: 28px;
  font-weight: 500 !important;
  margin-bottom: 0rem !important;
  padding: 5px;
}
.franjaBanner .dto {
  font-weight: bolder;
}

.franjaBanner br {
  display: none;
}

/* ------------- FIN FRANJA ------------- */


/* ------------- SECTION CARDS ------------- */

.cardsSection{
    padding: 3rem 0;
}

.cardsSection .text-mobile {
  display: none;
}

.cardsSection .secondary-text-cards {
  text-align: center;
  padding-bottom: 3rem;
}

.cardsSection .multiple-items{
  display: flex;  
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.cardsSection .cardContain{
  border: 1px solid #63666A59;
  border-radius: 5px;
  margin: 0px 20px;
}
.cardsSection p {
  text-align: center;
  color: var(--azul);
  margin-top: 11px;
}
.cardsSection .title-slick {
  display: none;
}
.cardsSection .card{
  margin: auto;
  width: 300px;
  height: 350px;
  background-color: #fff;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  padding: 25px 40px;
  border: none !important;
}
.cardsSection .cardContain .franjaOferta {
  width: 100%;
  background-color: var(--naranja);
  padding: 0.6rem 0;
  text-align: center;
  color: #fff;
  font-size: 23px;
  font-weight: 300;
}
.cardsSection .card .iconCard{
  height: 120px;
  margin-bottom: 16px;
  width: auto;
}
.cardsSection .card .titleCard{
  font-size: 20px;
  font-weight: bold;
  color: var(--azul);
  margin-bottom: 1.4rem;
}
.cardsSection .card .cardButton{
  background-color: var(--azul);
  color: #fff;
  border: 0;
  padding: 16px 25px;
  border-radius: 5px;
  line-height: 1;
  cursor: pointer;
}
.cardsSection p {
  text-align: center;
  color: var(--azul);
  margin-top: 20px;
}
.cardsSection .cardContain .franjaOferta {
  width: 100%;
  background-color: var(--naranja);
  padding: 0.6rem 0;
  text-align: center;
  color: #fff;
  font-size: 23px;
  font-weight: 300;
}
.cardsSection .cardContain {
  border: 1px solid #63666A59;
  border-radius: 5px;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
  background-color: var(--amarillo);
}

.flickity-page-dots .dot {
  background-color: var(--amarillo)!important;
}

/* ------------- FIN SECTION CARDS ------------- */



/* ------------- VENTAJAS SECTION ------------- */

.ventajasSection{
  padding: 2rem 0;
  background-color: var(--background);
  color: var(--azul);
}
.ventajasSection .ventajasContainer{
  width: 70%;
  margin: auto;
}
.ventajasSection .cardVentajas{
  margin: auto;
  width: 234px;
}
.ventajasSection .cardVentajas img{
    height: 70px;
    margin: auto;
    margin-bottom: 0.7rem;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}
.ventajasSection .cardVentajas h3{
  font-size: 21px;
  text-align: center;
}

.ventajasSection .ventajasContainer .row .col-12:nth-child(-n + 3) {
  margin-bottom: 3rem;
}

/* ------------- FIN VENTAJAS SECTION ------------- */

/* ------------- BTN BOTTOM ------------- */

.btn-bottom {
  display: none;
}

/* ------------- FIN BTN BOTTOM ------------- */
/* ------------- GAS VERDE ------------- */

section.gasVerdeSection {
  padding: 2rem 0;
}

.gasVerdeSection .gasVerdeContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
}

.gasVerdeSection .gasVerdeContainer .mainClaim {
  font-size: 50px;
  font-weight: 600;
  color: var(--azul);
  max-width: 506px;
  margin-bottom: 0;
}

.gasVerdeSection .gasVerdeContainer .text {
  font-size: 22px;;
  font-weight: 400;
  color: var(--azul);
  max-width: 669px;
  margin-bottom: 0;
}


/* ------------- FIN GAS VERDE ------------- */
/* ------------- FAQS ------------- */

.preguntas_frecuentes{
  padding: 4rem 0;
}

.preguntas_frecuentes h2{
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

.preguntas_frecuentes .containerFaqs .faqRow{
  width: 100%;
  margin: 1rem 10px 1rem 10px;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  padding: 50px;
  max-width: 400px;
  min-width: 400px;
}

.preguntas_frecuentes .containerFaqs .faqRow img{
  height: 100px;
  margin: 0 auto;
  justify-content: center;
}

.preguntas_frecuentes .containerFaqs .faqRow .titleFaq{
  display: flex;
  align-items: end;
  font-size: 22px;
  color: var(--azul);
  font-weight: 400;
  margin-top: 20px;
  min-height: 72px;
}

.preguntas_frecuentes .containerFaqs .faqRow .infoFaq p{
  font-size: 15px;
  margin-bottom: 0;
  line-height: 1.5;
}

.arrow {
  display: none;
}

.arrowContainer {
  position: relative;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
}
.arrowContainer .line-1 {
  background-color: var(--azul);
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.arrowContainer .line-2 {
  background-color: var(--azul);
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.arrow.active .line-1 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.arrow.active .line-2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ------------- FIN FAQS ------------- */
/* ------------- ASTERISK SECTION ------------- */
.asteriskSection .asteriskContent {
  font-size: 12px;
  color: var(--azul);
}
/* ------------- FIN ASTERISK SECTION ------------- */

/* ------------- SCROLLBAR ------------- */

/* ::-webkit-scrollbar {
  width: 10px; 
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
  background-color: var(--azul);  
} */

/* ------------- FIN SCOLLBAR ------------- */