/* * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #fbc737;
  --color-1: #8ebf38;
  --color-2: #007000;
  --color-3: #2b0002;
  --color-4: #fcd7c1;
  --font-1: "QuicksandMedium";
  --font-2: "QuicksandBold";
  --font-3: "Quicksand";
  --font-4: "JostRegular";
}

@font-face {
  font-family: "QuicksandMedium";
  src: url(../fonts/Quicksand-Medium.woff);
}

@font-face {
  font-family: "QuicksandBold";
  src: url(../fonts/Quicksand-Bold.woff);
}
@font-face {
  font-family: "Quicksand";
  src: url(../fonts/Quicksand-Regular.woff);
}

@font-face {
  font-family: "JostRegular";
  src: url(../fonts/Jost-400-Book.woff);
}

body {
  width: 100%;
}

main {
  width: 100%;
  overflow: hidden;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}


.contenedor {
  width: min(88%, 1550px);
  margin-inline: auto;
} */


/* inicio banner */


/* fin banner */

/* inicio seccion contenido */

#contenido {
  height: 100%;
  width: 100%;
  padding-top:4rem;
  position: relative;
  padding-bottom: 10rem;

  .contenedor {
  }

  .container-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;

    button {
      border: none;
      padding: 15px 25px;
      align-items: center;
      align-items: center;
      border-radius: 25px 0px;
      color: var(--color-3);
      background: rgba(142, 191, 56, 0.1);
      text-align: center;
      font-family: "JostRegular";
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
    }
    button.active {
      display: inline-flex;
      padding: 15px 25px;
      justify-content: center;
      align-items: center;
      gap: 7px;
      border-radius: 25px 0px;
      background: var(--color-2);
        color: white;
        
     
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    .content {
      display: none;
      flex: 1;
      padding: 20px;
      /* border: 1px solid #ddd; */
      /* border-radius: 5px; */
      /* background-color: #f9f9f9; */
    }
    #spanish-content,
    #english-content {
      display: flex; /* Mostrar el contenido en español inicialmente */
      gap: 2rem;
      .container-image {
        flex-basis: 50%;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
          max-height: 21rem;
           max-width: 30rem;
          object-fit: cover;
          object-position: center;
        }
      }

      .container-texto {
        flex-basis: 50%;
        width: 100%;
        height: max-content;
        display: flex;
        flex-wrap: wrap;
        /* align-items: center; */
        align-self: center;
        justify-content: space-between;
        p {
          color: var(--color-3);
          font-family: var(--font-4);
          font-size: 20px;
          font-style: normal;
          font-weight: 300;
          line-height: 25px;
        }
        strong {
          font-weight: 700;
        }
      }
    }
    #english-content {
      display: none;
    }
  }

  .container-dientes-leon{
    width: 18rem;
    height: 18rem;
    position: absolute;
    bottom: -5%;
    right: -5%;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
} 
/* fin seccion contenido */






/* inicio contenido */

#categorias.maquila {
  padding-block: 2rem;
  background-color: white;
  height: 100%;
  max-height: unset;
  padding-block-end: 7rem;

  h2 {
    color: #007000;
    text-align: center;
    font-family: "QuicksandBold";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    display:flex;
    text-align:center;
    justify-content: center;
    &::before{
                    content: "";
            /* position: absolute; */
            position: relative;
            display:inline-flex;
            /* left: 39%; */
            left: 2rem;
            top: 5%;
            transform: translateX(-42%);
            width: 47px;
            height: 30px;
            background-image: url(../../images/hojita.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        
    }
  }
  .contenedor {
    height: 100%;

    #splide-maquila {
    

      .splide__track{

        .splide__list{
          /*display: grid;*/
          /*grid-template-columns: repeat(4, 1fr);*/
          .splide__slide{
            .container-categoria {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 1rem;
              .box-image {
                height: 20rem;
                width: 15rem;
                position: relative;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: center;
                  transition: transform 0.3s ease;
                }
      
                &::after {
                  content: "";
                  position: absolute;
                  bottom: 0; /* Coloca el borde en la parte inferior */
                  left: 50%; /* Centra el borde horizontalmente */
                  width: 40%;
                  height: 2px; /* Altura inicial del borde */
                  background-color: var(--color-2); /* Color del borde */
                  transform: translateX(
                    -50%
                  ); /* Ajusta el borde para que esté centrado */
                  transition: height 0.3s ease, width 0.3s ease; /* Transiciones suaves para el hover */
                }
              }
      
              h3 {
                color: var(--color-3);
                text-align: center;
                font-family: var(--font-4);
                font-size: 25px;
                font-style: normal;
                font-weight: 400;
                line-height: 30px;
                max-width: 60%;
              }
      
              &:hover .box-image img {
                transform: scale(
                  1.1
                ); /* Aumenta ligeramente el tamaño de la imagen al hacer hover */
              }
      
              &:hover .box-image::after {
                height: 1px; /* Altura del borde al hacer hover */
                width: 50%; /* Ancho del borde al hacer hover */
              }
      
              &:hover h3 {
                font-weight: 700; /* Cambia el peso de la fuente en hover */
              }
            }
          }
        }

      }

    
    }
  }
}
/* fin contenido */

/* inicio contactanos */
#contactanos {
  width: 100%;
  height: 100%;
  min-height: 25rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-block-start: 8rem;
  .container-flor-rosada {
    width: 23rem;
    height: 21rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -20%;
    left: -8%;
    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  .contenedor {
    height: 100%;
    .grid-contactanos {
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      .box-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: 1rem;
        position: relative;
        .container-svg {
          width: 3rem;
          height: 3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }

        .container-descripcion {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          h4 {
            color: var(--color-3);
            text-align: center;
            font-family: var(--font-3);
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
          }
          a {
            color: var(--color-3);
            text-align: center;
            font-family: var(--font-4);
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
          }
        }
      }

      .box-grid:nth-child(1)::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 2px;
        right: 0;
        background-color: green;
        margin-left: 2rem;
      }
      .box-grid:nth-child(2)::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 2px;
        right: 0;
        background-color: green;
        margin-left: 2rem;
      }
    }
  }
}

/* fin contactanos */

/* inicio fomrulario */


/* fin fomrulario */




/*Inicio queries*/

@media  (max-width: 768px) {


  /* inicio queries contenido */
  #contenido{
    padding-bottom: 4rem;
    .content{
      flex-direction: column-reverse;

      .container-image{
        position: relative;
        left: -19%;
      }
    }

    .container-dientes-leon{
      width: 12rem;
      height: 12rem;
      bottom: 1%;
    }
  }

  /* fin queries contenido */

  #categorias{

    .contenedor{
      #splide-categorias-maquila{
       .splide__track{
        .splide__list{
          display: flex !important;
          .splide__slide{
            .container-categoria{
              .box-image{

              }
              h3{
                font-weight: 700 !important;
              }
            }

          }
        }
       }
      }
    }
  
  }


  #contactanos{
    padding-block-end: 8rem;
    .container-flor-rosada{
      width: 14rem !important;
     height: 17rem !important;
     left: -22% !important;
     top: -18% !important;
    }

    .contenedor{
    

      .grid-contactanos{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        .box-grid{
          position:relative;
          padding-bottom: 2rem;

        }

        .box-grid:nth-child(1)::after {
          content: "";
          position: absolute;
          height: 2px;
          width: 55%;
          left: 43%;
          bottom: 0;
          transform: translateX(-50%);
          background-color: green;
       
        }
        .box-grid:nth-child(2)::after {
          content: "";
          position: absolute;
          height: 2px;
          width: 55%;
          left: 43%;
          bottom: 0;
          transform: translateX(-50%);
          background-color: green;
      }
  
      }

    }

  }

  #formulario-1{
    .contenedor{
      display: flex;
      flex-direction: column;
      .fondo-formulario{
        background-size: 0% !important;
      }
    }

    .container-hierba-luisa{
      bottom: 1rem !important;
    }
  }



  

}



/*Fin Queries*/