@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    scroll-behavior: smooth;
}

:root {
    --color-blue: #3498db; /* Azul */
    --color-green: #2ecc71; /* Verde */
    --color-blackgray: #5c5c5c; /* Gris oscuro */
    --color-black: #000; /* Gris oscuro */
    --color-white: #fff; /* Gris oscuro */
    --color-orange-prim: #f3742f; /* Gris oscuro */
    --color-pink-farmasi: #f95c6d;

  }


#backToTopBtn {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la ventana */
    bottom: 15px; /* Posición desde el fondo */
    right: 15px; /* Posición desde la derecha */
    z-index: 50; /* Asegúrate de que esté en frente */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
    border: none; /* Sin borde */
    outline: none; /* Sin contorno */
    background-color: #5050507b; /* Color de fondo */
    color: white; /* Color del texto */
    cursor: pointer; /* Cursor de puntero */
    border-radius: 50%; /* Bordes redondeados para hacerlo circular */
    display: flex; /* Flexbox para centrar el contenido */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    padding-top: 8px;
}

#backToTopBtn:hover {
    background-color: #8b8b8b; /* Cambio de color al pasar el ratón */
}

#backToTopBtn::before {
    content: ""; /* Contenido vacío */
    border: solid white; /* Bordes sólidos blancos */
    border-width: 0 4px 4px 0; /* Ajuste de los bordes para crear la flecha */
    display: inline-block; /* Mostrar en línea */
    padding: 8px; /* Tamaño de la flecha */
    transform: rotate(-135deg); /* Rotar para crear la flecha */
    -webkit-transform: rotate(-135deg); /* Rotar para Safari */
}


.sect-reg1{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 50px 0;
}

.cont-princ-reg1{
    width: 90%;
    max-width: 1200px;
    height: auto;
    padding: 0;
    margin: 0 auto;
}

.titulo-princ-registro {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-pink-farmasi);
    padding: 0;
    text-align: center;
}

.subtit-reg{
    font-size: 30px;
    font-weight: 600;
    color: var(--color-pink-farmasi);
    padding: 0;
    text-align: center;

}

.txt-intro1{
    font-size: 18px;
    font-weight: 300;
    color: var(--color-black);
    padding: 0;
    text-align: center;

}

.slid1-reg{
    width: 100%;
    height: auto;
    padding: 0;
    position: relative;
    background-color: ;
}

.slid1-reg .swiper {
    width: 100%;
    height: 100%;
    padding: 50px 15px 20px 15px;

  }

  .slid1-reg .swiper-slide {
    height: auto;
    font-size: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: start;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.25);
    border: 1px solid #dfdfdf;

  }


  .slid1-reg .swiper-slide .box-img-slid1{
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0 0 0 0;
  }

  
  .slid1-reg .swiper-slide .box-img-slid1 img{
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    object-fit: cover;
}

.slid1-reg .swiper-slide .box-txt-slid1{
    width: 100%;
    height: auto;
    padding: 16px;
    margin: 0;
}

.slid1-reg .swiper-slide .tit1-recom{
    font-size: 20px;
    font-weight: 600;
    color: var(--color-pink-farmasi);
    padding: 0;
    margin: 0 0 10px 0;
}

.slid1-reg .swiper-slide .tit2-recom{
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
    padding: 0;
    margin: 0 0 0 0;
}

.slid1-reg .swiper-slide .info-recom{
    font-size: 17px;
    font-weight: 300;
    color: var(--color-black);
    padding: 0;
    margin: 0 0 0 0;
}

.slid1-reg .swiper .swiper-button-prevrg {
    position: absolute;
    top: 5%;
    left: 92%;
    width: 40px;
    height: 40px;
    background-color: #f7f7f7b5;
    color: var(--color-pink-farmasi);
    border-radius: 50%;
    border: 1px solid var(--color-pink-farmasi);
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center; 
    font-size: 20px; 
    transform: translateY(-50%);
  }
  
  
  .slid1-reg .swiper .swiper-button-nextrg {
    position: absolute;
      top: 5%;
      right: 0;
      width: 40px;
      height: 40px;
      background-color: #f7f7f7b5;
      color: var(--color-pink-farmasi);
      border-radius: 50%;
      border: 1px solid var(--color-pink-farmasi);
      cursor: pointer;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center; 
      font-size: 20px;   
      transform: translateY(-50%);
  }
  
.conttt{
    width: 100%;
    background-color: pink;
}

  /*
  .slid1-reg .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  */

  /* estilos de parallax y registro */

.sect-reg2{
    width: 100%;
    height: auto;
    position: relative;
    padding: 50px 0;
    margin: 50px 0 0 0;
    background-image: url(/img/portada-farmasi.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-cont-reg2{
    width: 95%;
    max-width: 1200px;
    height: auto;
    padding: 16px;
    margin: 30px auto;
    background-color: #fafafac5;
    border-radius: 15px;
  }

  .cont-req-pas{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 auto 16px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
  }

  .cont-rp1{
    width: 50%;
    height: auto;
    padding: 0;
    margin: 0 16px 0 0;
  }

  .cont-rp2{
    width: 50%;
    height: auto;
    padding: 0;
    margin: 0 0 0 0;
  }
  
  /*
  
  .box-req-pas-i{
    width: 100%;
    height: auto;
    padding: 16px;
    border: 1px gray solid;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15);

  }

  .box-req-pas-i:nth-child(3){
    margin: 16px 0;
   
  }
  
  */
  
  .box-req-pas-i{
    width: 100%;
    height: auto;
    padding: 16px;
    border: 1px gray solid;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15);
    margin-bottom: 16px;

  }

  .box-req-pas-i:nth-child(6){
    margin: 0 0;
   
  }

/*
  .box-req-pas{
    width: 100%;
    height: auto;
    padding: 16px;
    border: 1px gray solid;
    text-align: start;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15);

  }

  .box-req-pas:nth-child(3){   
    margin: 16px 0;
  }
 */
 
  .box-req-pas{
    width: 100%;
    height: auto;
    padding: 16px;
    border: 1px gray solid;
    text-align: start;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15);
    margin-bottom: 16px;

  }

  .box-req-pas:nth-child(5){   
    margin: 0 0;
  }

  .req-ico{
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 10px 0 0;

  }

  .req-ico i{
    color: var(--color-pink-farmasi);
    font-size: 24px;

  }

  .req-txt{
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 0 0;
    text-align: start;
  }

  .cont-contenido{
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  .boton-registro{
    width: 100%;
    height: auto;
    background-color: transparent;
    margin: 16px 0;
    padding: 0;
  }

  .boton-registro .estilos-boton-reg{
    display:inline-block;
    width: auto;
    height: auto;
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    background-color: #f95c6d;
    border-radius: 5px;
    border: 0;
  }


  .boton-registro .estilos-boton-reg:hover{
   cursor: pointer;
  }

  @media (max-width: 700px) {
    
    .cont-princ-reg1{
        width: 90%;
        height: auto;
        padding: 0;
        margin: 0 auto;
    }
    
    .titulo-princ-registro {
        font-size: 30px;
      
    }
    
    .subtit-reg{
        font-size: 22px;
        
    }
    
    .txt-intro1{
        font-size: 16px;
    }

    .slid1-reg .swiper-slide .tit1-recom{
        font-size: 18px;
       
    }
    
    .slid1-reg .swiper-slide .tit2-recom{
        font-size: 17px;
        
    }
    
    .slid1-reg .swiper-slide .info-recom{
        font-size: 16px;
        
    }

     /* estilos de parallax y registro */

.sect-reg2{
    width: 100%;
    height: auto;
    position: relative;
    padding: 50px 0;
    margin: 50px 0 0 0;
    background-image: url(/img/portada-farmasi.jpg);
    background-attachment: fixed;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.cont-req-pas{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 auto 16px auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }
  
  .cont-rp1{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 16px 0;
  }
  
  .cont-rp2{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 0 0;
  }

    
    
  }


  @media(max-width: 500px) {
    .slid1-reg .swiper .swiper-button-prevrg {
        position: absolute;
        top: 4%;
        left: 70%;
      }
      
      
      .slid1-reg .swiper .swiper-button-nextrg {
        position: absolute;
        top: 4%;
        right: 0%;
      }
      
  }

  @media(min-width: 501px) and (max-width: 700px){
    .slid1-reg .swiper .swiper-button-prevrg {
        position: absolute;
        top: 4%;
        left: 80%;
      }
      
      
      .slid1-reg .swiper .swiper-button-nextrg {
        position: absolute;
        top: 4%;
        right: 0%;
      }
  }

  @media(min-width: 701px) and (max-width: 900px){
    .slid1-reg .swiper .swiper-button-prevrg {
        position: absolute;
        top: 4%;
        left: 85%;
      }
      
      
      .slid1-reg .swiper .swiper-button-nextrg {
        position: absolute;
        top: 4%;
        right: 0%;
      }
  }

  @media(min-width: 901px) and (max-width: 1200px){
    .slid1-reg .swiper .swiper-button-prevrg {
        position: absolute;
        top: 4%;
        left: 88%;
      }
      
      
      .slid1-reg .swiper .swiper-button-nextrg {
        position: absolute;
        top: 4%;
        right: 0%;
      }
  }