@font-face {
    font-family: 'DINPro';
    src: url('../Fonts/DINPro.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal;
  }
  
  
  @font-face {
    font-family: 'DINPro';
    src: url('../Fonts/DINPro-Bold.ttf') format('truetype');
    font-weight: bold; 
    font-style: normal; 
  }
  
  @font-face {
    font-family: 'DINPro';
    src: url('../Fonts/DINPro-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic
  }
  
  
  @font-face {
    font-family: 'Galdern';
    src: url('../Fonts/Galdern-Bold.otf') format('opentype'); 
    font-weight: bold;
    font-style: normal;
  }
  .tooltip-container {
    position: relative;
    display: inline-block;
}
.label-full {
    display: block;
  }
  
  .label-part-1,
  .label-part-2 {
    display: none;
  }

.tooltip-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    color: #333;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    z-index: 1;
}

.tooltip-trigger:hover + .tooltip-content {
    display: block;
}

label.control-label {
    display: flex;
    align-items: center;
}

.tooltip-trigger {
    display: flex;
    align-items: center;
    margin-left: -2px;
    margin-top: -4px;
}
body{
    margin: 0;
    font-family: 'Galdern', sans-serif;
}
label{
    font-family: 'DINPro', sans-serif;
}
.logo-section {
    background-color: #ffffff; 
    text-align: center;
    padding: 20px 0; 
    margin-bottom: 0; 
    
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-22%);
    width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-trigger {
    cursor: pointer;
}

.tooltip-container:hover .tooltip-content {
    display: block;
}
  #tiempo-entrega {
    font-size: 20px;
    color: #555;
    margin-top: 10px; 
    margin-bottom: 20px; 
}
img.logo{
    height: 50px;
  }
#gr {
    max-width: 1024px;
    margin: -75px auto;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#gr #prueba {
    width: 48%;
    float: left;
}



#direccion, #codigoPostal, #provincia, #poblacion{

    padding: 15px;
    margin-bottom: 20px;
    border: transparent;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #f7f7f7;
}
label {
    display: block;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #555;
}

input[type="text"], input[type="number"]  {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: transparent;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #f7f7f7;
    font-family: 'DINPro';
}

textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: transparent;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #f7f7f7;
    font-family: 'DINPro';
}
input[type="submit"] {
    background-color: #ff8e61;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 20px;
}
input[type="button"] {
    background-color: #ff8e61;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
}


input[style='background-color: lightcoral'] {
      background-color: lightcoral;
    }

.btn:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

.footer {
    background-color: #f5baaf;
    text-align: center;
    padding: 65px 0 10px;
    margin-top: 150px;
}

.footer img {
    max-height: 60px;
}

  .div-circular {
    background-color: #ff8e61;
    height: 350px;
    border-bottom-left-radius: 15%;
    border-bottom-right-radius: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    overflow: hidden; 
  }
  .inner-div {
    max-width: 1024px;
    width: 100%;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }
  .div-circular img {
    position: relative;
    top: -105px;
    right: -550px;
    max-width: 50px;
    height: auto;
  }
  .div-circular h2 {
    color: white;
    text-align: left;
    margin: 0; 
    margin-bottom: -30px;
  }

  .rounded-span {
    display: inline-block; 
    padding: 3px 20px;
    border-radius: 25px; 
    border: 2px solid #e4fefc;
    color: #ffffff;
    font-family: Arial, sans-serif;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin-top: 55px;
    align-self: flex-start;
  }

  #labelPoliticaPrivacidad {
    margin-top: 20px
  }

  @media (max-width: 1250px) {

    #gr {
        max-width: 720px !important;
        margin: -100px auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label{
        font-size: 1.3em !important;
    }
    .inner-div{
        max-width: 720px !important;
        padding-left: 0px !important;
    }
    .rounded-span{
        margin-left: -20px !important;
    }
    .div-circular h2 {
        color: white;
        text-align: left;
        margin: 0;
        margin-bottom: -30px;
        font-size: 3.1em !important;
    }
    .h2Princ{
        margin-left: -35px !important;
    }
    .h2Last{
        margin-left: -85px !important
    }
    .div-circular img {
        position: relative;
        top: -105px;
        right: -420px;
        max-width: 40px;
        height: auto;
        }
  }

@media (max-width: 920px) {
    


    #gr {
        max-width: 620px !important;
        margin: -100px auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .div-circular h2 {
        color: white;
        text-align: left;
        margin: 0;
        margin-bottom: -30px;
        font-size: 2.6em !important;
    }
    .div-circular div {
        max-width: 650px !important;
    }
    .div-circular img {
        position: relative;
        top: -110px;
        right: -320px;
        max-width: 40px;
        height: auto;
    }
    .rounded-span{
        margin-left: -5px !important
    }
    label{
        font-size: 1.1em !important;
    }
  }

  @media (max-width: 780px) {

    #gr {
        max-width: 550px !important;
        margin: -80px auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .div-circular {
        height: 260px !important;
    }
    .div-circular h2 {
        color: white;
        text-align: left;
        margin: 0;
        margin-bottom: -30px;
        font-size: 2.3em !important;
    }
    .h2Princ{
        margin-left: -48px !important;
    }
    .div-circular div {
        max-width: 550px !important;
    }
    .div-circular img {
        position: relative;
        top: -100px;
        right: -270px;
        max-width: 40px;
        height: auto;
    }
    .rounded-span{
        margin-left: -20px !important
    }
    label{
        font-size: 1em !important;
    }
  }

  @media (max-width: 680px) {
    
    .rounded-span{
        margin-left: 5px !important;
    }
    .label-full {
        display: none !important;
      }
      .label-part-1,
      .label-part-2 {
        display: block !important;
      }
    
      .label-part-1,
      .label-part-2 {
        width: 100% !important;
        text-align: left !important;
      }
    #gr {
        max-width: 450px !important;
        margin: -80px auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .div-circular h2 {
        color: white;
        text-align: center;
        margin: 0;
        margin-bottom: -30px;
        font-size: 2em !important;
        margin-left: -15px !important;
    }
    .h2Last{
        margin-right: 35px !important;
    }
    .div-circular div {
        max-width: 500px !important;
    }
    .div-circular img {
        position: relative;
        top: -105px;
        right: -260px;
        max-width: 40px;
        height: auto;
    }
  }

  @media (max-width: 570px) {

    #gr {
        max-width: 380px !important;
        margin: -100px auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .div-circular h2 {
        color: white;
        text-align: left;
        margin: 0;
        margin-bottom: -30px;
        font-size: 1.8em !important;
        margin-left: 8px !important;
    }
    .div-circular div {
        max-width: 465px !important;
    }
    .div-circular img {
        position: relative;
        top: -105px;
        right: -230px;
        max-width: 40px;
        height: auto;
    }
    .footer p{
        font-size: 0.8em;
    }
    .footer img {
        max-height: 50px;
    }
    .label-part-1,
    .label-part-2 {
      display: none !important;
    }
    .label-part-3,
    .label-part-4 {
      display: block !important;
    }
    .label-part-3,
    .label-part-4 {
      width: 100% !important;
      text-align: left !important;
    }
    .rounded-span{
        margin-left: 22px !important;
    }
  }

  @media (max-width: 501px) {
    .div-circular img {
        max-width: 42px !important;
        height: 20px !important;
        margin-top: 105px;
        margin-bottom: -29px;
    }
    .h2Last, .h2Princ{
        display: none !important;
    }
    .h2LastResponsive{
        display: block !important;
        font-size: 1.2em !important;
    }
    #gr {
        margin: -40px auto !important;
    }
    .rounded-span {
        margin-left: 0px !important;
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .div-circular div {
        max-width: 430px !important;
        margin-left: 35px !important;
        margin-top: 25px;
    }

}



  @media (max-width: 500px) {
    .label-part-3,
    .label-part-4 {
      display: none !important;
    }
    .label-part-5,
    .label-part-6 {
      display: block !important;
      width: 100% !important;
      text-align: left !important;
    }
  
    img.logo {
      height: 50px;
    }
    #gr {
        max-width: 280px !important;
        margin: -100px auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .div-circular h2 {
      color: white;
      text-align: left;
      margin: 0;
      margin-bottom: 10px;
      font-size: 1.6em !important;
      padding-left: 20px; 
    }
  
    .inner-div {
        text-align: left; 
        padding-left: 20px; 
        max-width: none;
        margin-right: 60px !important;
    }
    .segunda{
        margin-right: 132px !important;
    }
    .tercera{
        margin-right: 112px !important;
    }
    .rounded-span {
        margin-top: 10px; 
        margin-left: 67px !important; 
        align-self: flex-start;
    }

    .div-circular img {
      position: relative;
      top: -105px;
      right: -190px;
      max-width: 40px;
      height: auto;
    }
    label {
      display: block;
      margin-bottom: 10px;
      font-size: 16px;
      color: #555;
    
    }
  
    .footer p {
      font-size: 0.8em;
      text-align: center; 
    }
    .footer img {
      max-height: 50px;
      display: block;
      margin: 10px auto;
    }
  

 
  }
  @media (max-width: 465px) {
    .rounded-span {
        margin-top: 10px; 
        margin-left: 62px !important; 
        align-self: flex-start; 
    }
  }
  @media (max-width: 450px) {
    .rounded-span {
        margin-top: 10px; 
        margin-left: 58px !important; 
        align-self: flex-start;
    }
    .div-circular img {
        position: relative;
        top: -105px;
        right: -165px;
        max-width: 40px;
        height: auto;
    }
  }
  @media (max-width: 440px) {
    .rounded-span {
        margin-top: 10px;
        margin-left: 53px !important; 
        align-self: flex-start; 
    }
  }
  @media (max-width: 435px) {
    .rounded-span {
        margin-top: 10px; 
        margin-left: 50px !important;
        align-self: flex-start;
    }
  }
  @media (max-width: 430px) {
    .rounded-span {
        margin-top: 10px;
        margin-left: 47px !important; 
        align-self: flex-start;
    }
  }
  @media (max-width: 425px) {
    .rounded-span {
        margin-top: 10px; 
        margin-left: 44px !important; 
        align-self: flex-start; 
    }
  }
  @media (max-width: 420px) {
    .rounded-span {
        margin-top: 10px; 
        margin-left: 41px !important; 
        align-self: flex-start;
    }
  }
  @media (max-width: 420px) {
    .rounded-span {
        margin-top: 10px;
        margin-left: 41px !important;
        align-self: flex-start;
    }
  }
  @media (max-width: 890px) {
    .div-circular h2 {
    margin-left: -22px;
    }
    
  }
  @media (max-width: 416px) {
    .rounded-span{
        margin-top: 35px;
        margin-left: 40px !important;
    }
    
  }
  @media (max-width: 412px) {
    .h2LastResponsive
    {
        display: none !important;
    }
       
    .h2MobileResponsive
    {
        display: block !important;
    }
     .primeraMovil{
        margin-right: 82px !important
     }  
     .segundaMovil{

        margin-right: 62px !important
     }
     .terceraMovil{
        margin-right: 85px !important
     }
     .rounded-span{
        margin-left: 40px !important;
     }
     .div-circular div {
        margin-left: 33px !important;
    }
  }

  @media (max-width: 404px) {
     .primeraMovil{
        margin-right: 70px !important
     }  
     .segundaMovil{

        margin-right: 50px !important
     }
     .terceraMovil{
        margin-right: 72px !important
     }
     .rounded-span{
        margin-left: 42px !important;
     }
     .div-circular div {
        margin-left: 18px !important;
    }
  }
  @media (max-width: 400px) {
    .primeraMovil{
        margin-right: 70px !important
     }  
     .segundaMovil{
        margin-right: 50px !important
     }
     .terceraMovil{
        margin-right: 72px !important
     }
     .rounded-span{
        margin-left: 40px !important;
     }
     .div-circular div {
        margin-left: 19px !important;
    }
 }
 @media (max-width: 396px) {
    .primeraMovil{
        margin-right: 70px !important
     }  
     .segundaMovil{
        margin-right: 50px !important
     }
     .terceraMovil{
        margin-right: 72px !important
     }
     .rounded-span{
        margin-left: 38px !important;
     }
     .div-circular div {
        margin-left: 19px !important;
    }
 }
 @media (max-width: 391px) {
    .primeraMovil{
        margin-right: 70px !important
     }  
     .segundaMovil{
        margin-right: 50px !important
     }
     .terceraMovil{
        margin-right: 72px !important
     }
     .rounded-span{
        margin-left: 34px !important;
     }
     .div-circular div {
        margin-left: 19px !important;
    }
 }
 @media (max-width: 380px) {
    .primeraMovil{
        margin-right: 70px !important
     }  
     .segundaMovil{
        margin-right: 50px !important
     }
     .terceraMovil{
        margin-right: 72px !important
     }
     .rounded-span{
        margin-left: 28px !important;
     }
     .div-circular div {
        margin-left: 19px !important;
    }
 }
 @media (max-width: 373px) {
    .primeraMovil{
        margin-right: 65px !important
     }  
     .segundaMovil{
        margin-right: 45px !important
     }
     .terceraMovil{
        margin-right: 65px !important
     }
     .rounded-span{
        margin-left: 24px !important;
     }
     .div-circular div {
        margin-left: 19px !important;
    }
 }
 @media (max-width: 368px) {
    .primeraMovil{
        margin-right: 60px !important
     }  
     .segundaMovil{
        margin-right: 40px !important
     }
     .terceraMovil{
        margin-right: 60px !important
     }
     .rounded-span{
        margin-left: 30px !important;
     }
     .div-circular div {
        margin-left: 10px !important;
    }
 }
 @media (max-width: 363px) {
    .primeraMovil{
        margin-right: 55px !important
     }  
     .segundaMovil{
        margin-right: 32px !important
     }
     .terceraMovil{
        margin-right: 55px !important
     }
     .rounded-span{
        margin-left: 30px !important;
     }
     .div-circular div {
        margin-left: 5px !important;
    }
 }
 @media (max-width: 357px) {
    .primeraMovil{
        margin-right: 46px !important
     }  
     .segundaMovil{
        margin-right: 25px !important
     }
     .terceraMovil{
        margin-right: 48px !important
     }
     .rounded-span{
        margin-left: 30px !important;
     }
     .div-circular div {
        margin-left: 0px !important;
    }
 }
 @media (max-width: 350px) {
    .primeraMovil{
        margin-right: 32px !important
     }  
     .segundaMovil{
        margin-right: 11px !important
     }
     .terceraMovil{
        margin-right: 34px !important
     }
     .rounded-span{
        margin-left: 34px !important;
     }
     .div-circular div {
        margin-left: -14px !important;
    }
 }
  @media screen and (max-width: 450px) {
    .responsive-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .responsive-text a {
        margin-top: 10px; 
    }
}
@media screen and (max-width: 376px) {
    .div-circular img {
        position: relative;
        top: -95px;
        right: -145px;
        max-width: 40px;
        height: auto;
    }
}

@media screen and (max-width: 490px) {
    #codigoPostal{
        margin-top: 31px !important;
    }
    .label-part-7
    {
        display: none !important;
    }
    .label-part-8, .label-part-9{
        display: block !important;
    }
    .label-part-8,
    .label-part-9 {
        text-align: left !important;

    }

}


@media (max-width: 1350px) {
    .div-circular img {
        max-width: 44px !important;
        height: 22px !important;
    }
  }
  
  @media (max-width: 1000px) {
    .div-circular img  {
        max-width: 42px !important;
        height: 20px !important;
    }
  }

    
  @media (min-width: 1250px) {
    sup{
        margin-top: -14px !important;
    }
  }
  @media (max-width: 920px) {
    sup{
        margin-top: -5px !important;
    }
  }

  @media (max-width: 768px) {
    .div-circular {
      height: 300px;
    }
  
    .inner-div h2 {
      font-size: 2.5em;
    }
  }