/* input(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(758,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' */
@font-face {
    font-family: 'ToxTypewriter';
    src: url('/fonts/ToxTypewriter.ttf?v=HPAr3bT_IrkDec0w9cxKchqxk9o') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'BebasNeueBold';
    src: url('/fonts/BebasNeueBold.ttf?v=HPAr3bT_IrkDec0w9cxKchqxk9o') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'BrownPen';
    src: url('/fonts/BrownPen.ttf?v=HPAr3bT_IrkDec0w9cxKchqxk9o') format('truetype');
    font-display: swap;
}



.ver {
    border-radius: 20px;
    border: 1px solid #000000;
    font-size: 15pt;
    font-family: 'ToxTypewriter';
    width: 200px;
    margin-top: 5px;
    background-color: #fff;
    transition: scale 0.2s;

    &:hover {
        scale: 105%;
        color: #ffffff;
        border: 1px solid #000000;
        background-color: #000;
    }
}

.ver img {
    width: 11% !important;
    padding: 0px !important;
    margin: 0px !important;

}



.hero {
    margin-top: 50px;
}

.hero_info {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 10px 10px 90px;
    line-height: 1.7rem;
    align-items: start;
}

.hero_info h1 {
    color: #000;
    font-family: 'ToxTypewriter';
    font-size: 8rem;
}

.hero_text {
    color: #000;
    font-family: 'ToxTypewriter';
    font-size: 40px;
    line-height: normal;
}
.gato{
    color: #EE9C00 !important;
}
.gato-especial{
    color: #e88f9e !important;
}
.gato-senior{
    color: #f3622d !important;
}
.perro-span {
    color: #448eb5;
}
.perro-color{
      border: 2px solid #448eb5;
}
/*
.gato-color{
      border: 2px solid #EE9C00;
}/*
.text-destacado {
  
    border-radius: 50%;
    padding: 3px 8px;
}*/
.text-destacado {
    position: relative;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 50%;
    z-index: 1;
}

/* SVG como borde */
.borde-circular {
   position: absolute;
    top: -1px;
    left: -65px;
    width: calc(140% + 8px);
    height: calc(106% + 8px);
    z-index: -1;
}

/* Estilo y animación del círculo */
.borde-circular ellipse {
    fill: none;
   
    stroke-width: 2;
    stroke-dasharray: 561.59; /* Circunferencia aproximada: 2πr = 2π(48) */
    stroke-dashoffset: 501.59;
    animation: dibujarCircular 3.5s ease-out forwards;
    transform-origin: center;
}
.elipse-colorP{
     stroke: #448eb5;
}
.elipse-colorG{
     stroke: #EE9C00;
}
.cachorro1-color{
    color: #00825C !important;
}
.cachorro2-color{
    color: #61b29a !important;
}
.adulto2-color{
    color: #5dbac6 !important;
}
.senior1-color{
    color: #a1436e !important;
}
.senior2-color{
    color: #937b96 !important;
}


/* Animación del trazo circular */
@keyframes dibujarCircular {
    to {
        stroke-dashoffset: -10;
    }
}



.hero {
    margin-top: 50px;
}


/* hero cards*/

swiper-container {
    width: 100%;
    background-color: #ffffff;
    margin-top: 50px;
}

swiper-slide {
    height: 570px;
    background: #ffffff;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}


.hero-card {
    background-color: #fff;
    flex-direction: column;
}

.card-text {
    height: 150px;
    color: #000;
    font-family: 'ToxTypewriter';
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 15px;

}

.card-text p {
    font-size: 1.8rem;
    line-height: normal;
}

.shadow {
    box-shadow: 1px 0rem 0.5rem 0px rgba(var(--bs-body-color-rgb), 0.15) !important;
}

/*productos*/
.productos {
    margin-top: 50px;
}
.tipo-product{
    display: flex;
    justify-content: start;
    align-items: center;
}
.productos h2 {
    font-family: 'ToxTypewriter';
    text-align: center;
    font-size: 50px;
    letter-spacing: 15px;
}

.productos img {
    margin-top: 50px;
    text-align: center;
}

.perro-adulto {
    margin-top: 50px;
}
.perro-adulto .nav-item {
        border-bottom: none;
    }
.perro-adulto h3 {
    font-family: 'BebasNeueBold';
    font-size: 75px;
    text-align: left;
    margin: 0;
}

.productos-text {
    font-family: 'BrownPen' !important;
    text-align: left;
    font-size: 4rem !important;
    margin-top: -20px;
}

.perro-adulto p {
    font-family: 'ToxTypewriter';
    font-size: 1.5rem;
}


.btn-kg.active,
.show>.btn-kg {
    color: #f8f9fa;
    background-color: #000;
}

.btn-kg {
    background: none;
    border: 1px solid #000;
    border-radius: 20px;
    color: #000;
    margin-right: 15px;
    font-family: 'ToxTypewriter';
}

/*tabla beneficios */
/* Table Styles */

.fl-table {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    background-color: white;
     font-family: 'ToxTypewriter';
}

.fl-table td,
.fl-table th {
    text-align: center;
    padding: 8px;
    max-width: 150px;
    font-size: 13pt;
}

.fl-table th, td {
   
    font-size: 12px;
}
tr{
    border: 1px solid #6d6d6d;
}


/* Responsive */

@media (max-width: 767px) {
    .fl-table {
        display: block;
        width: auto;
    }
    .table-wrapper:before {
        content: "Scroll horizontally >";
        display: block;
        text-align: right;
        font-size: 11px;
        color: white;
        padding: 0 0 10px;
    }
    .fl-table thead,
    .fl-table tbody,
    .fl-table thead th {
        display: block;
    }
    
    .fl-table thead {
        float: left;
    }
    .fl-table tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .fl-table td,
    .fl-table th {
        padding: 20px 0.625em 0.625em 0.625em;
        vertical-align: middle;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
     min-height: 162px;
        font-size: 11pt;
      border-bottom: 1px solid #6d6d6d;
    }
   
    .fl-table th img{
        width: 140px;
    }
    
   
    .fl-table tbody td {
        display: flex;
        text-align: center;
        align-items: center;
    }
}

/*filtro seleccion */
.filtro{
    display: flex;
    align-items: center;
}
.detalle{
    width: 100%;
    text-align: center;
    font-family: 'ToxTypewriter';
    
}
.form-select{
    border: 1px solid #000;
}
.btn-dark{
        border-radius: 20px;
        font-size: 18pt;
        margin-top: 20px;
}

/*infografia */

.infografia-text-top{
    justify-content: space-between;
    position: absolute;
}

.infografia-text-bottom{
    justify-content: space-between;
    position: absolute;
    bottom: 0;
}
.infografia-text-middle{
        align-items: center;
    top: 37%;
    position: absolute;
    width: 88%;
    justify-content: end;
    left: 16%;
}
.card-info-content{
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 1px 0rem 0.5rem 0px rgba(var(--bs-body-color-rgb), 0.15) !important;
    max-width: 100%;
    margin-left: 54px;
}
.card-info-content span{
    color: #448eb5;
}
.info-cards-text {
    color: #000;
    font-family: 'ToxTypewriter';
    align-items: center;
    padding: 15px;
    font-size: 15pt;
}
.info-card-content{
    padding: 0px;
    border: none;
    margin-bottom: 80px;
    margin-top: 80px;
}
  .colum2-info{
    display: flex;
    align-items: center;
  }


  /*banner gato*/
 
  .bcolor_gato{
    background-color: #ffde60;
 
  }
   .bcolor_gato2{
    background-color: #ffc55e;
 
  }
  .bcolor_gato3{
    background-color: #ffd7dc;
  }
 .bcolor_gato4{
    background-color: #ffa788;
  }
 
  .banner_text_gato{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .banner-beneficio_gato strong{
    font-size: 30pt;
    font-family: 'ToxTypewriter';
  }
  .banner-beneficio_gato p{
      font-family: 'ToxTypewriter';
      font-size: 20pt;
  }
  /*acordeon ingredientes */

  .ingredientesbg{
    background-color: #efefef;
    
  }
  .colum-ingredientes{
    margin: 90px 0px;
    
  }
  .ingedientes-img{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ingredientes-content p{
     font-family: 'ToxTypewriter';
     font-size: 15pt;
     text-align: center;
  }
  .colum-text{
    border-right: 1px solid #fff;
    vertical-align: middle;
  }
  .colum-content{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
  }
  .porcentaje{
    background-color: #d9d9d9;
    width: 50px;
    height: 50px;
    border-radius: 50%;
     font-family: 'ToxTypewriter';
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 25pt;
     margin: 10px;
  }
  .espacio{
    border-right: 2px solid #000;
  }
  .table > :not(caption) > * > * {
    border-bottom-width: 0px;
}
.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #000000;}
.accordion-button {
    font-family: 'ToxTypewriter'; 
    font-size: 20pt; 
}
.ingredientes-info{
  font-family: 'ToxTypewriter'; 
  font-size: 15pt; 
}

.accordion {
    box-shadow: 1px 0rem 0.5rem 0px rgba(var(--bs-body-color-rgb), 0.15);
        --bs-accordion-btn-icon: url(/images/productos/arrow-acordeon-cerrado.svg?v=BMjJ10k8K1nQQttCNF2b5KSQkZY);
    --bs-accordion-btn-active-icon: url(/images/productos/arrow-acordeon.svg?v=BMjJ10k8K1nQQttCNF2b5KSQkZY); 
}
/*retail*/
.retail-content{
     box-shadow: 1px 0rem 0.5rem 0px rgba(var(--bs-body-color-rgb), 0.15);
     border-radius: 15px;
         display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.tipo-alimento{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.tipo-alimento p{
    font-family: 'ToxTypewriter'; 
    font-size: 35pt;
    text-align: center;
        line-height: normal;
    margin-bottom: 30px;
}
.btn-alimento{
   border: 1px solid #000;
    margin-right: 20px;
    background-color: #fff;
    border-radius: 10px;
    color: #000;
}
.btn-alimento.active, .show>.btn-alimento {
    color: #f8f9fa;
   
}
.btn-alimento-color1.active{
    background-color: #7895ba;
}
.btn-alimento-color2.active{
    background-color: #ffc107;
}
.btn-alimento-color3.active{
    background-color: #60b199;
}
.btn-alimento-color4.active{
    background-color: #a1d8bf;
}
.btn-alimento-color5.active{
    background-color: #5dbac6;
}

.btn-alimento-color6.active{
    background-color: #a1436e;
}

.btn-alimento-color7.active{
    background-color: #937b96;
}
.btn-alimento-color8.active{
    background-color: #f7b94b;
}
.btn-alimento-color9.active{
    background-color: #e88f9e;
}
.btn-alimento-color10.active{
    background-color: #f3622d;
}

.tarjetas{
    display: flex;
    border-radius: 20px;
    align-items: center;
    padding: 10px;
    background-color: #efefef;
    margin: 15px;
}
.tarjetas p{
   font-family: 'ToxTypewriter';
    font-size: 15pt;
    padding: 15px;
    text-align: left;
}



/*--------------------*/

/*     Retail          */

/*---------------------*/

.retail {
  text-align: center;
  margin-top: 50px;
  font-family: 'ToxTypewriter';
  color: #000;
  font-size: 30pt;
}


.nav-retail {
  display: flex;
  list-style: none;
  padding-left: 0px;
}

.nav-retail .nav-item {
  width: 207.33px;
}


.carousel-control-prev-icon {
  background-image: url("../images/productos/control-prev.svg?v=BMjJ10k8K1nQQttCNF2b5KSQkZY");
}

.carousel-control-next-icon {
  background-image: url("../images/productos/control-next.svg?v=BMjJ10k8K1nQQttCNF2b5KSQkZY");
}

.carousel-indicators {
  bottom: -3rem;
  margin-right: 0;
  margin-left: 0;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 3rem;
  height: 3rem;
}

.carousel-control-next,
.carousel-control-prev {
  width: 5%;
}


@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 5));
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 5));
  }
}
.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
 
  overflow: hidden;
  position: relative;
  width: 100%;
}


.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 250px;
}

/* banner final*/
.banner-final-color {
    background-color: #448eb5;
text-align: center;
}
.banner-final-color2 {
    background-color: #fedb60;
text-align: center;
}
.banner-final-color3 {
    background-color: #60b199;
text-align: center;
}
.banner-final-color4 {
    background-color: #a1d8bf;
text-align: center;
}
.banner-final-color5 {
    background-color: #5dbac6;
text-align: center;
}
.banner-final-color6 {
    background-color: #bf8ba3;
text-align: center;
}

.banner-final-color7 {
    background-color: #a48aa7;
text-align: center;
}
.banner-final-color8 {
    background-color: #ffc55e;
text-align: center;
}
.banner-final-color9 {
    background-color: #f0b9c2;
text-align: center;
}
.banner-final-color10 {
    background-color: #f69c7c;
text-align: center;
}

.nutricion h4{
    color: #000;
    font-family: 'ToxTypewriter';
     font-size: 35pt;
     padding-top: 30px;

}
.nutricion p {
    color: #000;
    font-family: 'ToxTypewriter';
    font-size: 25pt;
    text-align: center;
   
}
.btn-nutricion{
      border-radius: 20px;
      color:#000;
    border: 1px solid #000000;
    font-size: 16pt;
    font-family: 'ToxTypewriter';
    width: 200px;
    margin-bottom: 20px;
    transition: scale 0.2s;
    &:hover{
        scale: 105%;
    color: #fff;
    border: 1px solid #000000;
    background-color: #000;
    }
}

.grecaptcha-badge{
    visibility: hidden;
}

.sello{
     z-index: 1;
    margin-top: -78px;
}
.sello img{
    position: absolute;
    width: 120px;
}
.text-filtro{
    flex-direction: column;
}
.text-filtro p{
  color: #000;
    font-family: 'ToxTypewriter';
    font-size: 18pt;
    padding-top: 50px;  
}

@media only screen and (min-width: 1190px) and (max-width: 1672px) {

    .hero_info {
        padding: 10px 10px 10px 23px;
        left: 5px;
        position: relative;
    }

    .hero_info h1 {
        font-size: 60pt;
    }

    .hero_text {
        font-size: 25pt;
    }
.card-text p {
    font-size: 1.5rem;
    line-height: normal;
}
.borde-circular {
    left: -46%;}

}

@media only screen and (min-width: 1190px) and (max-width: 1399px) {
.info-cards-text {
  
    padding: 3px;
    font-size: 15pt;
}
}


@media only screen and (max-width: 1189px) {
    .hero_info {
        padding: 10px 10px 10px 23px;
        left: 5px;
        position: relative;

    }

    .hero_info img {
        padding: 20px;
        width: 100%;
    }

    .hero_info h1 {
        font-size: 60pt;
        width: auto;

    }

    .hero {
        margin-top: 50px;
    }

    .hero_text {
        font-size: 20pt;
    }

    .card-text p {
        font-size: 1.2rem;

    }

    swiper-container {
        margin-top: 0px;
    }
    .info-cards-text{
    padding: 5px;
    font-size: 12pt;
}
.card-info-content {
    margin-left: 0px; 
}
.btn-alimento {
    margin-right: 14px;
    
}
.borde-circular {
    left: -46%;}
}


@media only screen and (min-width: 769px) and (max-width: 991px) {

    .hero_info h1 {
        font-size: 40pt;
        width: auto;

    }

    .hero_text {
        font-size: 18pt;
    }

    .perro-adulto {
        margin-top: 50px;
    }

    .perro-adulto h3 {
        font-size: 65px;
    }

    swiper-container {
        margin-top: 0px;
    }

    .productos-text {
        font-size: 3.2rem !important;
    }

    .perro-adulto p {

        font-size: 1.3rem;
    }
    .infografia-text-top {
    top: -47px;
}
    .infografia-text-bottom {

    bottom: -31px;
}

}

@media only screen and (min-width: 495px) and (max-width: 575px) {
        .card-info-content {
        margin-left: 20px;
        margin-top: 55px;
    }
    .colum2-info {
       margin-top: 48px !important;
        left: 42% !important;
    
    }
}

/* TABLET */
@media only screen and (max-width: 768px) {
    .hero_info {
        padding: 10px 10px 10px 20px;
        left: 0px;
        position: relative;
        text-align: center;
        align-items: center;
    }


    .hero_info h1 {
        font-size: 47pt;
        padding: 30px 5px;
        text-align: center;
    }

    .hero_info p {
        font-size: 17pt;
        padding: 10px;
    }

    .hero {
        margin-top: 50px;
    }

    .tipo-product{
    display: flex;
    justify-content: center;
    align-items: center;
}
    .perro-adulto {
    margin-top: 30px;
}
.perro-adulto h3 {
    font-size: 40pt;
text-align: center;}
    .productos-text {
    font-size: 3rem !important;
    text-align: center;
    }
    .card-info-content {
    max-width: 39%;
        margin-left: 0px;
}
.info-cards-text {
    padding: 3px;
    font-size: 11pt;
}
.colum-content {
    flex-direction: column;
}
    .infografia-text-top {
    top: -47px;
}
    .infografia-text-bottom {

    bottom: -31px;
}

.text-filtro p{
  color: #000;
    font-family: 'ToxTypewriter';
    font-size: 17pt;
    padding-top: 50px;  
}
}





/* MOBILE */
@media only screen and (max-width: 576px) {
    .hero_info {
        padding: 10px;
        height: 400px;
        align-items: center;
        left: 0px !important;
    }

    .hero_info p {
        font-size: 19pt;
        padding: 10px;

    }

    .hero_info h1 {
        font-size: 50pt;
        text-align: center;
        padding: 20px 0px 0px 0px;
    }
    .borde-circular {
    left: -50%;}

.productos{max-width: 350px;
    margin: auto;
        margin-top: 25px;}
    .productos h2 {
        font-size: 24pt;
        letter-spacing: 5px;
    }

    .perro-adulto {
        max-width: 350px;
        margin: auto;
    }

    .perro-adulto h3 {
        font-size: 45pt;
    }
.perro-adulto p {
    font-family: 'ToxTypewriter';
    font-size: 1.3rem;
}
.btn-dark{
    margin-bottom: 20px;
    font-size: 17pt;
}
    .productos-text {
        font-size: 3rem !important;
    }

    swiper-container {
        margin-top: 0px;
    }

    swiper-slide {
        height: 400px;
    }

    .card-text p {
        font-size: 1.2rem;
    }
    /* infografia*/
    .card-info-content{
    margin-left: 20px;
    max-width: 285px;
    }
    .info-cards-text {
    color: #000;
    font-family: 'ToxTypewriter';
    align-items: center;
    padding: 3px;
    max-width: 274px;
  font-size: 12pt;}

    .colum2-info{
    margin-top: 18px;
    justify-content: end;
    display: flex;
    left: 30%;
    position: relative;
    max-width: 250px;
    }
.infografia-text-middle {
        align-items: center;
        top: 70%;
        position: absolute;
        justify-content: start;
        left: auto;
}
.infografia-text-bottom {
    justify-content: space-between;
    position: absolute;
    bottom: -22px;
}
.info-bottom{
    bottom: -85px;
}
    .btn-alimento {
    margin-right: 9px;
    font-size: 10pt;
    padding: 7px;
}
.colum-ingredientes {
    margin: 20px 0px;
}
.tipo-alimento p {
   
    font-size: 23pt;
}
.tarjetas p {
   
    font-size: 15pt;
   }
   .nutricion{
    max-width: 300px;
}
.nutricion h4 { 
    font-size: 25pt;
  
}
.nutricion p{
   font-size: 16pt; 
}
.banner-beneficio_gato strong {
    font-size: 20pt;
}
.banner-beneficio_gato p {
    font-size: 16pt;
}
.fl-table p{
    margin-bottom: 0px;
}
.text-filtro p{
    font-size: 15pt;
    padding-top: 20px;  
}
}

@media only screen and (min-width: 320px) and (max-width: 375px) {
    .colum2-info {
        margin-top: 18px;
        justify-content: end;
        display: flex;
        left: 19% !important;}


    .colum2-info {
        margin-top: 13px;}
    .info-bottom {
        bottom: -79px;}

}

@media only screen and (min-width: 376px) and (max-width: 412px) {
     .hero_info p {
        font-size: 17pt;
        padding: 10px;
    }
    .colum2-info {
        left: 28% !important;
    }
     .info-cards-text {
  font-size: 11pt;}
      .perro-adulto h3 {
        font-size: 40pt;
    }
  .productos-text {
        font-size: 2.5rem !important;
    }

    .info-bottom {
        bottom: -54px;}

}