/* TIPOGRAFIAS */
@font-face {
  font-family: "Trade";
  src: url("../css/fonts/TradeGothicLTCom-Bd2.woff2") format("truetype");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trade Regular";
  src: url("../css/fonts/TradeGothicLT.woff2") format("truetype");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trade Bold";
  src: url("../css/fonts/TradeGothicLT-Bold.woff2") format("truetype");
  font-weight: normal;
  font-display: swap;
}
svg {
  display: inline-block;
  vertical-align: -0.125em; /* Alineación perfecta con el texto */
}

/* 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;
  --color-c12: #4d3276;
}

* {
  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;
  transform: scaleX(-1); 
  transform-origin: center;
}
.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; 
  transform: scaleX(-1); 
  transform-origin: center;
}
.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;
  padding: 0;
}

.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;
  color: white;
}

/* INPUTS RADIO DEL FORM................ */

/* Contenedor del grupo de radios */
.radio-group-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #f9f9f9; /* Un fondo muy tenue para diferenciar la zona */
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

/* El label que envuelve todo */
.radio-option {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 15px;
  color: #555;
  transition: color 0.3s ease;
}

/* Ocultamos el input original */
.frmRadio {
  position: absolute;
  opacity: 0;
}

/* El círculo/indicador visual personalizado */
.radio-label {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el círculo y el texto */
}

.radio-label:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc; /* Borde gris fino por defecto */
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

/* --- ESTADO SELECCIONADO --- */

/* Cambio de color del texto al seleccionar */
.frmRadio:checked + .radio-label {
  color: var(--color-c3);
  font-weight: bold;
}

/* Diseño del círculo cuando está CHECKED */
.frmRadio:checked + .radio-label:before {
  background-color: #fff; /* Fondo blanco */
  border-color: var(--color-c3); /* Borde de tu color corporativo */
  border-width: 5px; /* Crea el efecto de 'anillo' sin usar :after */
}

/* Efecto Hover opcional */
.radio-option:hover .radio-label:before {
  border-color: #999;
}

/* Estilo para el foco (accesibilidad con teclado) */
.frmRadio:focus + .radio-label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}






/* 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: 1rem;
  text-align: center;
 padding: 10px;

}

.textCabecera {
  width: 100%;
  height: auto;
  background-color: var(--color-c3);
  text-align: center;
  font-size:1rem;
  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;
}


}


/****** LAYER ******/
@keyframes slideInFromUp {
        0% {
            transform: translateY(100%);
        }
        100% {
            transform: translateY(0);
        }
    }
    .promoMes3 {
        color: #ffffff;
        position: fixed;
        bottom: 0;
        z-index: 555;
        text-align: center;
        animation: 1s ease-out 0s 1 slideInFromUp;
        animation-timing-function: ease-in;
        left: 0;
        width: 100%;
    }
    .promoMes3 div p {
        font-size: 18px;
        margin-bottom: 2px
    }
    .promoMes3 span.bold,
    .promoMes3 span.bold a {
        font-size: 1rem;
        color: rgb(255, 255, 255) !important;
        text-decoration: none;
        margin: 0px;
        line-height: 1;
        @media (max-width: 320px) {
            font-size: 0.9rem;
        }
    }
    .promoMes3 span.small {
        font-size: 1rem;
        display: block;
        color: white;
        margin: 0px;
        line-height: 1;
        @media (max-width: 320px) {
            font-size: 0.9rem;
        }
    }
    .promoMes3 .amarillo {
        background: var(--color-c3);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0px;
          @media (max-width: 320px) {
            padding: 15px 0px;
          }
    }
    .promoMes3 .verde {
        background: var(--color-c3);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0px;
          @media (max-width: 320px) {
            padding: 15px 0px;
          }
    }
    .btn-whatsapp {
        background: #ffffff;
        color: #000000;
        margin: 10px auto;
        display: block;
        border-radius: 4px;
        padding: 8px 20px;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        min-height: 70px;
    }
    .btn-whatsapp img {
        /* margin-right: 8px; */
    }
    .btn-whatsapp span {
        /* width: 165px; */
    }
    .btn-llamar {
        background: #ffffff;
        color: #000000;
        margin: 10px auto;
        display: block;
        padding: 8px 20px;
        cursor: pointer;
        font-size: 22px;
        text-align: left;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6);
        text-align: center;
    }
    .btn-llamar svg {
        /* display: inline-block; */
    }
    .formularioLayer {
        /* .btn-llamar */
    }
    .contTelefonoLayer {
        /* width: 165px; */
    }
    .btn-llamar span {
        /* padding: 3px 25px; */
    }
    .btn-llamar a {
        color: #000000;
        text-decoration: none;
        font-size: 30px;
    }
    .separador {
        width: 70%;
        border-top: 2px solid #d5d5d5;
        height: 1px;
        margin: 20px auto 15px auto;
    }
    .textoC2CLayer {
        font-size: 14px;
        text-align: left;
        padding: 8px 0 12px;
    }
    .textoC2CLayer span {
        padding-left: 20px;
        text-align: center;
    }
    .modal-content2 .inputnum {
        border-radius: 4px !important;
        padding: 8px 15px;
        border: 2px solid #d5d5d5 !important;
        margin-bottom: 10px;
    }
    .textoLayerCabecera {
        text-align: center;
        background-color: #FF7900;
    }
    .modal-content2 {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-color: rgb(255, 255, 255);
        background-clip: padding-box;
        outline: 0;
        z-index: 999;
        margin-top: 20px;
    }
    .modal-content2 form .ssl {
        color: #000000 !important
    }
    .modal-content2 h4 {
        font-size: 34px;
        color: rgb(255, 255, 255);
        text-align: end;
    }
    .modal-content2 h5 {
        color: rgb(255, 255, 255)
    }
    .modal-content2 .ocultar {
        display: none !important;
    }
    #idHeader {
        border-bottom: none;
        background-color: var(--color-c3);
        flex-direction: column;
        border-radius: 0px !important;
    }
    .modal-dialog {
        height: 100%;
        z-index: 9999;
    }
    #oForm.formularioLayer {
        background: #ffffff;
        color: #000000;
        margin: 10px auto;
        display: block;
        padding: 8px 20px;
        cursor: pointer;
        font-size: 14px;
        width: 100%;
        border: none;
    }
    .formulariLayer label {
        font-weight: 500;
    }
    .boton {
        padding: 10px 15px;
        background: transparent !important;
    }
    .formularioLayer .btn-enviar {
        width: 100% !important;
        height: 50px;
        font-weight: bold;
        font-size: 20px;
        color: #ffffff;
        background:var(--color-c3);
        margin: 0 auto;
        width: 60%;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 15px;
        display: block;
        border: none;
    }
    .modal {
        z-index: 998 !important;
    }
    .modal-backdrop {
        z-index: 990 !important;
    }
    /* CHECK boX*/
    .control,
    .privacidad {
        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;
        text-align: left;
    }
    .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: #0e6647d; */
    }
    .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 .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;
    }
    @keyframes slideInFromDerecha {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0);
        }
    }
    .necesitasAyudaNew {
        position: fixed;
        bottom: 30px;
        right: 25px;
        cursor: pointer;
        animation: 0.5s ease-out 0s 1 slideInFromDerecha;
        animation-timing-function: ease-in;
        z-index: 888;
        width: 250px;
        height: 35px;
        background-color: var(--color-c3);
        border-radius: 3px;
        text-align: center;
        box-shadow: 0px 5px 10px -5px #000000;
    }
    .necesitasAyudaNew p {
        /* font-family: "Walsheim Medium", sans-serif; */
        color: white;
        margin-top: 5px;
    }
    .necesitasAyudaNew p i {
        margin-right: 15px;
        margin-left: 15px;
    }
    .helpDM {
        display: none !important;
    }
    .fa-comments , .fa-phone,.fa-solid{
        color: #ffffff;
    }
    .whatsapStyle{
        text-decoration: none;
        color:#000000
    }
    .svgStyle{
        color:white;
    }
    .tapaForm{
        background-color: white;;
    }
    @media only screen and (min-width: 1000px) {
        .control,
        .privacidad {
            margin: 5px 0 15px 0 !important;
        }
        .control,
        .btn-llamar,
        .btn-whatsapp,
        .textoC2CLayer span {
            font-size: 22px;
        }
        .btn-llamar a {
            font-size: 30px;
        }
        #oForm.formularioLayer input.inputnum {
            width: 100%;
            border: 2px solid #d5d5d5 !important;
        }
        .contTelefonoLayer {
            width: initial;
        }
        .textoC2CLayer {
            text-align: center;
        }
        .textoC2CLayer span {
            padding-left: 0px;
        }
        .control-checkbox {
            font-size: 12px
        }
    }