/* TIPOGRAFIAS */
@font-face {
  font-family: "Trade";
  src: url("../css/fonts/TradeGothicLTCom-Bd2.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Trade Regular";
  src: url("../css/fonts/lte50535.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Trade Bold";
  src: url("../css/fonts/lte50537.ttf") format("truetype");
  font-weight: normal;
}

/* COLORES PRINCIPALES ******************************************************************** */
:root {
  --color-c1: #ffffff;
  --color-c2: #72ba45;
  --color-c4: #ee251b;
  --color-c5: #ae4097;
  --color-c6: #3ea200;
  --color-c7: #7d2179;
  --color-c8: #6fb713;
  --color-c9: #2ab7bc;
  --color-c10: #fca900;
  --color-c11: #11178b;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
 /*  height: 100vh; */
  display: flex;
  flex-direction: column;
  font-family: "Trade";
}

/* NAVBAR *********************************************************************************** */
#nav {
  background-color: var(--color-c1);
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid grey;
}

#logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menuLogo {
  width: 50px;
  display: none;
}
.cerrarMenu {
  width: 30px;
  display: none;
}

#menu_head {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
#menu_head .logotipo {
  width: 150px;


}
#menu_head .logotipoVerde {
  width: 40%;


}
.multiOfertaLogo {

  margin-left: 20px;
  width: 140px;

}
.particulares {
  text-decoration: none;
  color: rgb(251, 123, 2);
}

.empresas {
  text-decoration: none;
  color: white;
}
.empresas:hover {
  text-decoration: none;
  color: rgb(251, 123, 2);
}
#divTelefono {
  display: flex;
  justify-content: end;
  align-items: center;

}

.telefono {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}
.telefono .llamagratis {
  text-decoration: none;
  font-size: 2rem;
  margin: 0px;
  line-height: 1;
  color: black;
  margin-bottom: 15px;
 
}

.telefono .tel900 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.cardParticulares{
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-c3);
    padding: 10px;
    border-radius: 10px;
  
}
.phoneParticulares{
  color:white !important;
}
.telPartiluares{
  font-size: 1rem;
  margin: 0px;
  line-height: 1;
  margin-bottom: 5px;
  color:white;

}
.cardParticulares #telPc{
  font-size: 2rem;
  margin: 0px;
  line-height: 1;
   color:white;
    text-decoration: none;
}
.cardAutonomos {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  margin-right: 20px;
  overflow: hidden; /* para que el pseudo-elemento no sobresalga */
  /* background-color y opacity se eliminan de aquí */
}

.cardAutonomos::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--color-c3);
  opacity: 0.5; 
  z-index: 0; 
}
.phoneNegocios{
  color:black !important; 
}
.textoAutonomos,
.telAutonomos {
  position: relative; 
  z-index: 1;
  color: black;
}

.textoAutonomos {
  font-size: 1rem;
  margin: 0px;
  line-height: 1;
  margin-bottom: 5px;
}

.telAutonomos {
  font-size: 2rem;
  margin: 0;
  line-height: 1;
  text-decoration: none;
  
}

#telPc {
  display: block;
  
}
#telMovil,#telMovilAutonomos{
  display: none;
}
#telMovil2{
  display: none;
}
  #telMovil2 .llevarAformulario {
    display: none;
  }

#containerNavbar {
  width: 100%;
  background-color: var(--color-c1);
}
#navbar {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px 0px;
}
.menudesplegable1,
.menudesplegable2 ,
.menudesplegable3  {
  position: relative;
}

.links {
  width: 100%;
  list-style-type: none;
  display: flex;
  justify-content: start;
  align-items: start;
  margin: 0px;


}
.links li{
  padding: 5px;
  margin-right: 30px;
}

.links a {
  text-decoration: none;
  font-size: 1.2rem;
  color: rgb(0, 0, 0);

}
.links a:hover {
  text-decoration: none;
  color: var(--color-c5);
}

.menudesplegable1 .triangulo::after ,
.menudesplegable2 .triangulo::after,
.menudesplegable3 .triangulo::after{
  content: "";
  position: relative;
  right: -5px;
  top: 20px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgb(0, 0, 0);
}

.links li a.activo {
  color: var(--color-c5) !important;
}

.menudesplegable1:hover .oculto ,
.menudesplegable2:hover .oculto,
.menudesplegable3:hover .oculto{
  display: block;
  position: absolute;
  top: 30px;
  left: 0px;
  text-decoration: none;
  list-style-type: none;
  z-index: 2;
  box-shadow: 0px 5px 10px -5px grey;
}
.oculto {
  display: none;
  position: absolute;
  list-style-type: none;
padding: 0px;
  background-color: var(--color-c1);

}
.oculto .dropdown-menu li {
  white-space: nowrap;
  margin: 10px;
  width: auto;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: white !important;
}
.logoEmpresa {
  display: none;
}
.linksPrincipales {
  display: flex;
  flex-direction: column;
  display: none;
}
.fixed {
  position: fixed;
  top: 0;
  width: 100vw;
  left: 0;
  margin-left: 0;
  margin-right: 0;
  background-color: var(--color-c1);
  padding-top: 10px;
  z-index: 3;
  padding:10px
}



/* Submenús laterales */
.dropdown {
  position: relative;
}

.dropdown ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: var(--color-c1);
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 3;

}

.dropdown:hover ul {
  display: block;
    box-shadow: 0px 5px 10px -5px grey;
}
.oculto .dropdown{
  margin: 0px;
  padding: 0px;
}
.dropdown:hover ul li{
  margin: 0px;
  padding: 0px;
}
.dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: black !important;
  text-decoration: none;
  white-space: nowrap;
margin: 0px;

}

.dropdown a:hover {
  background-color: black !important;
  color: white !important;
}

.dropdown a.activo:hover {
  background-color: var(--color-c3);
  color: white !important;
}

.oculto .dropdown  a .flecha2{
  font-size: 0.6rem;
}



/* EMPRESAS........................ */

.cardLinkEmpresas{
padding: 5px;
  border: 2px solid var(--color-c5);
margin-right: 0px !important;
}
.cardLinkEmpresas a{
  color:var(--color-c5);
}








/* BLOQUE2 ******************************************************************************************* */

#bloque1 {
  width: 100%;
  height: auto;
  flex: 1;
}

/* BLOQUE2 ******************************************************************************************* */

#bloque2 {
  width: 100%;
  height: auto;
}

/* BLOQUE3 ******************************************************************************************* */
#bloque3 {
  width: 100%;
  height: auto;
}
/* BLOQUE4 ******************************************************************************************* */
#bloque4 {
  width: 100%;
  height: auto;
}

/*  FORMULARIO ************************************************** */

.containerForm {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-c1);
}
#oForm.sin900 input.inputname,
#oForm.sin900 input.inputmail {
  display: block;
}
#oForm input.inputname,
#oForm input.inputmail {
  display: none;
}

#oForm.fdh input.inputname,
#oForm.fdh input.inputmail {
  display: block;
}

.fdh #oForm input.inputname,
.fdh #oForm input.inputmail {
  display: block;
}

.textForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  background-color: white;
  font-size: 1.5rem;
  text-align: center;
 padding: 10px;

}

.textCabecera {
  width: 100%;
  height: auto;
  background-color: var(--color-c3);
  text-align: center;
  font-size:1.5rem;
  color: white;
 padding: 10px 0px;

}

.textCabecera a {
  font-size: 2.2rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
}
.textCabeceraFdh {
  display: none;
}

.formulario {
  width: 100%;
  height: auto;
  background-color: white;
}
#oForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 0px 10px;
  min-height: 251px;
}
.sin900#oForm {
  min-height: 371px;
}
#oForm .inputname,
#oForm .inputnum,
#oForm .inputmail {
  margin-bottom: 10px;
  width: 100%;
  height: 50px;
  padding-left: 10px;
  border: 2px solid #d5d5d5 !important;
  background-color: #ffffff;
}

.sinForm {
  display: none;
}

.botonEnviar {
  color: #ffffff;
  margin: 10px auto;
  display: block;
  background-color: var(--color-c3);
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  border: none;
  width: 100%;
  height: 60px;
}

form .ssl {
  color: rgb(0, 0, 0) !important;
  width: 100%;
  text-align: center;
  font-size: 13px;
  margin: 10px 0;
  font-family: Arial;
}

/* CHECK BOX PRIVACIDAD***************************************************** */
.containerPrivacidad {
  width: 100%;
}
.control {
  font-family: arial;
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 3px;
  padding-top: 3px;
  cursor: pointer;
  font-size: 12px;
  line-height: 14px;
  min-height: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control_indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: 25px;
  width: 25px;
  background: #e6e6e6;
  border: 1px solid #000000;
  border-radius: 0px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
  background: #cccccc;
}
.control input:checked ~ .control_indicator {
  background: #67cd65;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
  background: #0e6647;
}
.control input:disabled ~ .control_indicator {
  background: #e6e6e6;
  opacity: 6;
  pointer-events: none;
}
.control_indicator:after {
  box-sizing: unset;
  content: "";
  position: absolute;
  display: none;
}
.control input:checked ~ .control_indicator:after {
  display: block;
}
.control-checkbox a {
  color: #000000;
}
.control-checkbox .control_indicator:after {
  left: 8px;
  top: 5px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
  border-color: #7b7b7b;
}
.control-checkbox .control_indicator::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 3.01rem;
  height: 3.01rem;
  margin-left: -0.781rem;
  margin-top: -0.743rem;
  background: #72ed6f;
  border-radius: 3rem;
  opacity: 0.6;
  z-index: 99999;
  transform: scale(0);
}
@keyframes s-ripple {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes s-ripple-dup {
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.control-checkbox input + .control_indicator::before {
  animation: s-ripple 250ms ease-out;
}
.control-checkbox input:checked + .control_indicator::before {
  animation-name: s-ripple-dup;
}

#tapaForm {
  display: none;
  /*     display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; */
}
.loading {
  margin-top: 10px;
  width: 20%;
}

/* FOOTER   ******************************************************************** */

#footerContainer {
  background-color: rgb(255, 255, 255);
}
#footer {
  padding: 20px 0;
}

#letras {
  width: 100%;
}

#letras a {
  text-decoration: none;
  margin: 3px;
  color: rgb(0, 0, 0);
  font-size: 0.8rem;
}

#footerLogo {
  padding-top: 15px;
  padding-bottom: 50px;
  display: flex;
  justify-content: end;
  align-items: center;
}

/* MEDIA QUERIES ************************************************************************************************************** */

@media (min-width: 992px) and (max-width: 1400px) {
  #containerNavbar {

    margin-left: auto;
    margin-right: auto;
  }
  #oForm .inputname,
  #oForm .inputnum,
  #oForm .inputmail {
    margin-bottom: 10px;
    padding: 5px;
    border: 2px solid #ff7900;
    background-color: #ffffff;
  }


.links a{
  font-size: 0.9rem;
}
  /* MEDIA QUERIES  MOBIL  ****************************************************************************************************** */
}

@media (max-width: 1200px) {
  #navbar{
     padding: 0px;
  }
/*   .menudesplegable1:hover .oculto,
  .menudesplegable2:hover .oculto,
  .menudesplegable3:hover .oculto{
    top:20px;
  } */
  .menudesplegable1 .triangulo::after,
   .menudesplegable2 .triangulo::after,
   .menudesplegable3 .triangulo::after {
    top:15px;
   }
  .links{
    justify-content: start;
  }
  .links li{
    margin-right: 20px;
  }

  .links a {
    font-size: 1rem;
  }
  .helpDM {
    display: none !important;
  }


  .telefono .llamagratis {
    padding-right: 0px;
  }





  /*     FORMULARIO */
  .inboxForm {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .textForm {
    width: 100%;
    height: auto;
    padding: 20px;
    background-color: white;

  }

  .formulario {
    width: 80%;
    height: auto;
    background-color: white;
  }
  .containerForm{
     width: 80%;
  }
}
@media (min-width: 767px) and (max-width: 990px) {
  /* NAV */
  .links{
    justify-content: start;
  }
  .links li{
    margin-right:15px;
  }
  .menudesplegable1 .triangulo::after, .menudesplegable2 .triangulo::after, .menudesplegable3 .triangulo::after {
    right: -2px;
  }

  .links a {
    font-size: 0.8rem;
  }
  #menu_head .logotipo {
    width: 120px;

  }
  #menu_head .logotipoVerde {
    width: 50%;


  }

#menu_head .multiOfertaLogo{
  width: 120px;
  margin-left: 10px;
}

.telAutonomos{
  font-size: 1.8rem;
}
.cardParticulares #telPc {
  font-size: 1.8rem;
}



  /* FORM.................................. */
  #oForm .inputname,
  #oForm .inputnum,
  #oForm .inputmail {
    width: 100%;
  }
  .containerPrivacidad {
    width: 70%;
  }
  .botonEnviar {
    width: 70%;
  }
  .formulario {
    width: 80%;
    height: auto;
    background-color: white;
  }
  .containerForm{
     width: 100%;
  }

  /* FOOTER *********************************************************** */
  #footerContainer{
    padding-bottom: 50px;
  }
}

@media (max-width: 1200px) {
  /* NAV */
  #nav {
    padding-bottom: 0px;
  }
  .textCabecera {
    display: none;
  }

  .multiOfertaLogo {
    margin-top: 0px;
    margin-left: 0px;
  }
  #menu_head {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
  }
  #menu_head .logotipo {
    width: 80px;

  }
  #menu_head .logotipoVerde {
    width: 60%;


  }

  #menu_head .multiOfertaLogo{
    width: 90px;
    margin-left: 10px;
    margin-top: -5px;

  }

  .dropdown:hover ul {
    display: block;
    margin-left: 10px;
     border:2px solid var(--color-c5);
  }



  /* BLOQUE1 ******************************************************************************************* */

  #logo {
    margin-bottom: 15px;
  }

  #divTelefono {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .telefono {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .fixed .telefono {
    border-top: none;
  }
  .telefono .llamagratis {
    display: none;
  }

  .telefono .tel900 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #telPc {
    display: none;
  }
.cardParticulares, .cardAutonomos{
  display: none;
}
#telMovilAutonomos{
  width: 50%;
position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-right: 5px;
  overflow: hidden; 
}

#telMovilAutonomos::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--color-c3);
  opacity: 0.5; 
  z-index: 0; 
}

.textoAutonomos,
.telAutonomos {
  position: relative; 
  z-index: 1;
  color: black;
}
.textoAutonomos{
  font-size: 1rem;
}
.telAutonomos{
   font-size: 1.7rem;
    font-family: "Trade Bold";
   
}
  #telMovil2 {
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--color-c3);
     padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
  }


  #telMovil {
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    background-color: var(--color-c3);
     padding: 10px;
     margin-left: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .fixed #telMovil {
    width: 50%;
    margin-bottom: 0px;
  }
  .fixed #telMovilAutonomos {
        width: 50%;
        margin-bottom: 0px;
  }

.textoParticularesMovil{
  font-size: 1rem;
  margin: 0px;
  line-height: 1;
    color: white;
    margin-bottom: 5px;
}
  .telParticular {
    text-decoration: none;
    font-size: 1.7rem;
    text-align: center;
    color: white;
    margin: 0px;
    line-height: 1;
    font-family: "Trade Bold";
  }



  #telMovil2 .llevarAformulario {
    font-size: 1.2rem;
    text-align: center;
    margin: 0px;
    line-height: 1.2;
    text-decoration: none;
    color: white;
    display: block;
  }

  .menuLogo {
    width: 40px;
    display: block;
  }
  .cerrarMenu {
    width: 20px;
    display: block;
  }

  #navbar {
    background-color: var(--color-c1);
    width: 96%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    border-right: 1px solid grey;
    overflow-y: scroll;
    padding-bottom: 50px;
    padding: 0px 20px;
  }


  #navbar.active {
    transform: translateX(0); /* Muestra el menú al activarlo */
  }
  #navbar .no-scroll {
    transform: translateX(0); /* Muestra el menú al activarlo */
    overflow: hidden;
  }

  /* Desactivar scroll cuando el menú está activo */
  body.no-scroll {
    overflow: hidden;
  }
  .logoEmpresa {
    width: 100%;
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-top: 10px;
    padding: 10px;
    background-color: var(--color-c1);
    border-bottom: 2px solid grey;
  }
  .logoEmpresa .logoNav {
    width: 110px;
    object-fit: contain;
  }

  .linksPrincipales {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
  }

  .links {
    width: 100%;
    height: 100vh;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin-top: 10px;
margin-bottom: 300px;

  }


  .links a {
    font-size: 1rem;
  }

  .links li {
    padding: 5px 0px;

  }
  .links li.menudesplegable1 {
    width: 100%;
    padding-bottom: 80px;
 
  }
  .links li.menudesplegable2 {
    width: 100%;
    padding-bottom: 160px;
  
  }

  .links li.menudesplegable3 {
    width: 100%;
    margin-top: 20px;
   
  }
.dropdown a {
  padding: 5px;
}
  .menudesplegable1 .triangulo,
  .menudesplegable2 .triangulo,
  .menudesplegable3 .triangulo {
   color:var(--color-c5);

  }
  .menudesplegable1 .oculto,
  .menudesplegable2 .oculto,
  .menudesplegable3 .oculto {

    display: block;
    margin-top: 5px;
   border:2px solid var(--color-c5);

  }

  .oculto li {
    margin: 0px;
    width: 100%;
  }

  .menudesplegable1 .triangulo::after,
  .menudesplegable2 .triangulo::after,
  .menudesplegable3 .triangulo::after {
   display: none;
  }

  /* EMPRESAS........................ */

.cardLinkEmpresas{
margin-top: 190px;
padding: 5px !important;
}




  /* SECCION2 */
  .botonEnviar {
    font-size: 1.8rem;
  }

  /*  FORMULARIO */
  .textForm {
    width: 100%;
    height: auto;
    background-color: white;
    padding: 10px;
  }

  .formulario {
    width: 100%;
    height: auto;
    background-color: white;
  }
  .containerForm{
    width: 100%;
 }
   /* FOOTER *********************************************************** */
   #footerContainer{
    padding-bottom: 50px;
  }
}


@media (max-width: 400px) {
.textoAutonomos{
  font-size: 0.9rem;
}
.textoParticularesMovil{
 font-size: 0.9rem;

}

.telAutonomos{
  font-size: 1.6rem;
}

.telParticular{
  font-size: 1.6rem;
}

}
@media (max-width: 365px) {
  .textoAutonomos{
  font-size: 0.8rem;
}
.textoParticularesMovil{
 font-size: 0.8rem;

}
  .telAutonomos{
  font-size: 1.4rem;
}

.telParticular{
  font-size: 1.4rem;
}

}
@media (max-width: 340px) {
  .botonEnviar {
    font-size: 1.2rem;
  }

  #telMovil p span {
    font-size: 0.9rem;

  }
  #telMovil .llevarAformulario {
    font-size: 1rem;
  }
.textoAutonomos{
  font-size: 0.7rem;
}
.textoParticularesMovil{
 font-size: 0.7rem;

}
.telAutonomos{
  font-size: 1.3rem;
}

.telParticular{
  font-size: 1.3rem;
}


}