/* ----- RESET BASICO Y ESTRUCTURA GENERAL ----- */
 html, body {
     overflow-wrap: break-word;
}
 header {
     width: 100%;
}
 footer {
     background-color: #F5F5F5;
     padding: 2.5rem;
     color: black;
}
 footer p, footer li {
     font-size: 0.8125rem;
}
 footer ul {
     list-style: none;
}

  /* Masonry puro CSS */
  .masonry { column-gap: 1.5rem; }
  .masonry-item { break-inside: avoid; margin-bottom: 1.5rem; }
  /* columnas por viewport */
  @media (max-width: 767.98px){ .masonry { column-count: 1; } }
  @media (min-width: 768px){ .masonry { column-count: 2; } }  /* 2 en md+ */
  /* si quieres 3 en lg:
  @media (min-width: 992px){ .masonry { column-count: 3; } } */
  
  
 .main-content p, .main-content li, p, li {
     font-size: 1.0625rem;
     line-height: 1.3rem;
}
/* ----- TIPOGRAFIA Y TEXTO ----- */
 .results {
     color: gray;
     font-size: 0.875rem !important;
}
 .link-gray {
     font-style: italic;
     color: #2b2b2b;
     text-decoration: underline;
     display: block;
     text-align: center;
}
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
     border: 0;
     border-top: 1px solid #9a9a9a !important;
}

small{
    font-size: 12px;
}

.object-fit-cover{
    object-fit:cover;
}

.font-serif {
font-family: Georgia, "Times New Roman", Times, serif;
}
.fw-500{
    font-weight:500;
}
.fw-800{
    font-weight:800;
}

.fw-900{
    font-weight:900;
}


/* FONT SIZE UTILS */
.f-08 {
    font-size: 0.8rem !important;
}

 .f-1 {
     font-size: 1rem !important;
}
 .f-11 {
     font-size: 1.1rem !important;
}
 .f-12 {
     font-size: 1.2rem !important;
}
 .f-13 {
     font-size: 1.3rem !important;
}
 .f-14 {
     font-size: 1.4rem !important;
}
 .f-16 {
     font-size: 1.6rem !important;
}
 .f-18 {
     font-size: 1.8rem !important;
}
 .f-20 {
     font-size: 2rem !important;
}
 .f-22 {
     font-size: 2.2rem !important;
}
 .f-24 {
     font-size: 2.4rem !important;
}
 .f-26 {
     font-size: 2.6rem !important;
}
 .f-28 {
     font-size: 2.8rem !important;
}
 .f-30 {
     font-size: 3rem !important;
}
/* WIDTH UTILS */
 .w-10 {
     width: 10% !important;
}
.w-20 {
     width: 20% !important;
}
 .w-30 {
     width: 30% !important;
}
 .w-40 {
     width: 100% !important;
}
 .w-60 {
     width: 100% !important;
}
 .w-80 {
     width: 100% !important;
}
 .w-100 {
     width: 100% !important;
}
/* ----- IMAGENES Y CAPTIONS ----- */
 .pos-rel {
     position: relative;
}
 .img-caption {
     position: absolute;
     right: 0;
     bottom: 0;
     background: #837e7e;
     color: white;
     padding: 3px 5px;
     font-size: 0.8125rem;
}
 .img-caption-mid {
     position: absolute;
     right: 0;
     bottom: 0;
     background: #837e7e;
     color: white;
     padding: 3px 5px;
     font-size: 0.8125rem;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     width: 110px;
}
 .tag {
     background-color: red;
     display: inline-block;
     padding: 5px 20px;
     border-radius: 500px;
     color: #fff;
     font-size: 1.55rem;
}
 .content-images, .product-image {
     margin: 1rem auto !important;
     display: block;
}
 .image-container img {
     width: 100%;
     height: auto;
     max-width: 400px;
}
 #image-header img{
     border-radius: 5px;
}

.highlight {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 207, 0, .5) 57%);
}
/* ----- BOTONES ----- */
 a.btn-1 {
     background: linear-gradient(to right, #31cd13, #28a311);
     background-color: #31cd13;
     color: #fff;
     font-size: 1.1rem;
     font-weight: 700;
     font-style: normal;
     text-decoration: none;
     padding: 15px;
     border: 0;
     border-radius: 10px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     text-shadow: 1px 1px 13px #179b0d;
}
 a.btn-2 {
     box-shadow: inset 0px 1px 0px 0px #cf866c;
     background: linear-gradient(to bottom, #ff7802 5%, #bc3315 100%);
     background-color: #ff7802;
     border-radius: 3px;
     border: 1px solid #ff7802;
     display: inline-block;
     cursor: pointer;
     color: #ffffff;
     font-family: Arial;
     font-size: 1.875rem;
     padding: 15px;
     text-decoration: none;
     text-shadow: 0px 1px 0px #ff7802;
}
 a.btn-2:hover {
     background: linear-gradient(to bottom, #bc3315 5%, #ff7802 100%);
     background-color: #bc3315;
     color: #fff;
}
 a.btn-3 {
     background: linear-gradient(#01C614, #019E10);
     font-weight: 600;
     text-shadow: 1px 2px 2px #036b0a;
     font-size: 1.75rem;
     color: white;
     padding: 20px;
     border-radius: 7px;
     box-shadow: 0px 0px 16px 1px rgba(0, 199, 17, 1);
}
 a.btn-3:hover {
     color: #fff;
     background: linear-gradient(#019E10, #01C614);
}
 a.btn-4 {
     display: inline-block;
     background-color: #ed8936;
     color: #fff;
     box-shadow: 0 5px 0 0 #c05621;
     font-size: 2rem;
     font-weight: 600;
     text-decoration: none;
     line-height: 1;
     border-radius: 5px;
     padding: 1.5rem;
     margin-bottom: 5px;
     transition: background-color .15s ease-in-out;
}
 a.btn-4:hover {
     background-color: #dd6b20;
     color: #fff;
}
 a.btn-5 {
     background-color: red;
     color: #fff;
     font-size: 1.7rem;
     font-weight: 700;
     font-style: normal;
     text-decoration: none;
     padding: 15px;
     border: 0;
     border-radius: 2px;
     display: inline-block;
     justify-content: center;
     align-items: center;
     text-shadow: 1px 1px 13px #A52A2A;
}
 a.btn-5:hover {
     background-color: #A52A2A;
}
 a.btn-5 span{
     font-size: 0.8rem;
}
/* SIDEBAR BUTTON */
 a.sidebar-btn-1{
     background: linear-gradient(to right,#31cd13 ,#28a311);
     background-color: #31cd13;
     color: #fff;
     font-family: Montserrat;
     font-size: 18px;
     font-weight: 700;
     font-style: normal;
     text-decoration: none;
     padding:20px;
     border: 0px solid #000;
     border-radius: 10px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     text-shadow: 1px 1px 13px #179b0d;
}
 a.sidebar-btn-1 span{
     margin-right: 20px;
     display: block;
     transform: rotate(0deg);
     font-size: 30px;
}
 a.sidebar-btn-1:hover{
     background: linear-gradient(to right,#2ec212 ,#4af22a);
     background-color: #2ec212;
}
 a.sidebar-btn-1:active{
     transform: scale(0.95);
}
 .sticky-button {
     height: 48px;
     max-width: 350px;
     background: linear-gradient(to right, #31cd13, #28a311);
     color: #fff;
     font-size: 1.125rem;
     font-weight: 700;
     text-decoration: none;
     padding: 20px;
     border-radius: 10px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     margin: 0 15px;
}
 .sticky-button:hover {
     background: linear-gradient(to right, #2ec212, #4af22a);
     color: white;
}
 .sticky-button p{
     margin: 0;
}
 .sticky-button-div {
     width: 100%;
     background: #003366;
     position: fixed;
     left: 0;
     bottom: 0;
     padding: 15px 0;
     z-index: 2000;
}
 .sticky-button-div p{
     font-size: 1rem;
}
 .sticky-button-div p span{
     color: #3c763d;
}
 .sticky-button-div p span del{
     color: red !important;
}
 .pulse {
     animation: pulse 2s infinite;
}
 @keyframes pulse {
     0%, 100% {
         transform: scale(0.95);
    }
     70% {
         transform: scale(1);
    }
}
/* ----- PLAY BUTTON ----- */
 .pos-ab {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
}
 .play-button {
     max-width: 90px;
}
/* ----- COLORS UTILITARIOS ----- */
 .bg-white {
     background:#ffffff;
}
 .bg-melon {
     background: #FFDFC5;
}
 .bg-blue-2 {
     background-color: cornflowerblue;
}
 .bg-blue-3 {
     background-color: #cfdff3;
}
 .bg-blue-4 {
     background-color:#007bff;
}
 .bg-black-1 {
     background-color: black;
}
 .bg-light-green {
     background: #EFFFF7;
}
 .bg-pink {
     background: #EC479F;
}
 .bg-gray {
     background: #f7f7f7;
}
 .bg-green {
     background: #00cc07 !important;
}
 .bg-color-1 {
    background-color: #4267b2;
}

 .bg-color-2 {
    background-color: #259962;
}

 .bg-red {
     background: #cc0000 !important;
     background-color: #cc0000 !important;
}
 .bg-red-opacity {
     background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
 .bg-green-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-electric-cyan {
    background-color: #73f9f9;
}
 .bg-blue-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
 .bg-blue-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-300 {
    background-color:#93c5fd;
}
 .bg-blue-400 {
     background-color: #60A5FA;
}
 .bg-blue-500 {
     background-color: #3B82F6;
}
.bg-blue-900 {
    background-color:#274593;
}
.bg-slate-800 {
    background-color:#344a5f;
}
.bg-gradient-purple {
    background-image: linear-gradient(180deg, #882adf, #7c0ce1);
}
.bg-gradient-purple:hover {
    background-image: linear-gradient(180deg, #932cf6, #860df5);
}
 .bg-yellow-50 {
     background-color:#fefce8
}
 .bg-yellow-100 {
     background-color: #fef9c3
}
 .bg-yellow-200 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
 .bg-yellow-400 {
     background-color:#facc15;
}
 .bg-yellow-500 {
     background-color:#eab308;
}
 .bg-red-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
    background-color: #e5e7eb;
}
 .bg-gray-800 {
     background-color: rgb(31 41 55);
}

.bg-purple{
    background-color: #635cbf;
}

.bg-orange{
    background-color: #ed8936;
}
.bg-orange:hover{
    background-color: #dd6b20;
}

 .bg-orange-50 { background-color: #FFFBEB; }  
 .bg-orange-100 { background-color: #FEF3C7; } 
 .bg-orange-200 { background-color: #FDE68A; } 
 .bg-orange-300 { background-color: #FCD34D; } 
 .bg-orange-400 { background-color: #FBBF24; } 
 .bg-orange-500 { background-color: #F59E0B; } 
 .bg-orange-600 { background-color: #D97706; } 
 .bg-orange-700 { background-color: #B45309; } 
 .bg-orange-800 { background-color: #92400E; } 
 .bg-orange-900 { background-color: #78350F; } 

.bg-gradient-gray {
    background-color: #f1f1f1;
    background-image: radial-gradient(circle farthest-corner at 50% 50%, #fff 26%, #ddd8d8 66%, #b6b3b3 99%, #eee);
}
.bg-gradient-blue {
    background: linear-gradient(to right, #4ba6f0, #1e4ea1);
}
.bg-gradient-green{
    background: linear-gradient(to right,#31cd13 ,#28a311);
    background-color: #31cd13;
}
.bg-gradient-green-2{
    background: linear-gradient(#01C614, #019E10);
}
.bg-gradient-green-2:hover{
    background: linear-gradient(#019E10, #01C614);
}
.bg-gradient-orange{
    background: linear-gradient(to bottom, #ff7802 5%, #bc3315 100%);
    background-color: #ff7802;
}
.bg-gradient-orange:hover{
    background: linear-gradient(to bottom, #bc3315 5%, #ff7802 100%);
    background-color: #bc3315;
}
 .red {
     color: red;
}
 .white {
     color: #ffffff;
}
.text-gray{
    color:#b7b7b7;
}
.text-gray-300 {
    color:#D1D5DB;
}

.text-gray-800 {
    color:#606060;
}

 .blue-1 {
     color: #274593;
}
 .orange{
     color: #F16D00;
}
 .green {
     color: #166534;
}
 .yellow {
     color: rgb(253 224 71);
}
 .text-red-800 {
     --tw-text-opacity: 1;
     color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-pink{
    color:#fb627a;
}

.border-gray-200 {
    border-color: #dee2e6;
}
 .border-pink {
     border: 1px solid #EC479F !important;
}

.border-blue-100 {
    border-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)) !important;
}
 .border-blue-500 {
     --tw-border-opacity: 1;
     border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important;
}
 .border-green-500 {
     --tw-border-opacity: 1;
     border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)) !important;
}
 .border-red-300 {
     --tw-border-opacity: 1;
     border-color: rgb(252 165 165 / var(--tw-border-opacity, 1))!important;
}
.border-red-700 {
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1))!important;
}
.border-shadow-green{
    box-shadow: 0px 0px 16px 1px rgba(0, 199, 17, 1);
}
.border-shadow-orange{
    box-shadow: 0 5px 0 0 #c05621;
}
.shadow-black {
     text-shadow: 0px 0px 16px #212529 !important;
}
 .shadow-green {
     text-shadow: 0px 0px 16px #006400 !important;
}
 .shadow-red {
     text-shadow: 1px 1px 13px #990D0D !important;
}

.border-dashed {
    border-style: dashed !important;
}
/* HOVERS */
.hover-opacity-08:hover{
    opacity:0.8;
}

/* ----- ORGANIC ADS ----- */
 .orgads-div-1 {
     margin: 10px;
}
 .orgads-div-1 a {
     text-decoration: none;
}
 .orgads-title {
     color: #2a2a2a;
     text-decoration: none;
     line-height: 1.125rem;
     font-size: 1rem;
     font-weight: 600;
}
 .orgads-image {
     aspect-ratio: 4/3 !important;
     width: 100% !important;
     object-fit: cover !important;
}
 .orgads-text-1 {
     color: #007bff !important;
     font-size: 1rem !important;
     text-align: left;
     font-weight: 600;
     text-decoration: none;
}
 .orgads-button span {
     font-size: 0.75rem;
     color: #015bcd;
     line-height: 1.4375rem;
     display: inline-block;
     font-family: 'Montserrat';
     font-weight: 600;
     margin-top: 10px;
}
 .orgads-div-2 {
     display: flex;
     background-color: #f7f7f7;
     padding: 8px;
     gap: 10px;
     border-radius: 5px;
     box-sizing: border-box;
     align-items: flex-start;
}
 .orgads-image-2 {
     flex: 0 0 40%;
     max-width: 40%;
}
 .orgads-image-2 a {
     display: block;
}
 .orgads-image-2 img {
     width: 100%;
     height: auto;
     aspect-ratio: 4 / 3;
     object-fit: cover;
     border-radius: 4px;
}
 .orgads-content-2 {
     flex: 1;
     display: flex;
     flex-direction: column;
}
 .orgads-title-2 {
     display: block;
     color: #2a2a2a;
     font-size: 0.8125rem;
     font-weight: 600;
     text-decoration: none;
     margin-bottom: 10px;
}
 .orgads-button-2 a {
     display: inline-block;
     color: #0d6efd;
     font-size: 0.75rem;
     font-weight: 600;
     text-decoration: underline;
}
 .orgads-button-2 {
     margin-top: auto;
     text-align: right;
     padding-right: 10px;
}
 .product-image-sidebar{
     max-width:250px;
     margin: 0 auto;
     display: block;
}
/* MEDIA QUERIES */

@media (min-width: 576px) {
  .f-sm-08 { font-size: 0.8rem !important;} 
  .f-sm-1 { font-size: 1rem !important;} 
  .f-sm-11 { font-size: 1.1rem !important; }
  .f-sm-12 { font-size: 1.2rem !important; }
  .f-sm-13 { font-size: 1.3rem !important; }
  .f-sm-14 { font-size: 1.4rem !important; }
  .f-sm-16 { font-size: 1.6rem !important; }
  .f-sm-18 { font-size: 1.8rem !important; }
  .f-sm-20 { font-size: 2rem !important; }
  .f-sm-22 { font-size: 2.2rem !important; }
  .f-sm-24 { font-size: 2.4rem !important; }
  .f-sm-26 { font-size: 2.6rem !important; }
  .f-sm-28 { font-size: 2.8rem !important; }
  .f-sm-30 { font-size: 3rem !important; }
}

 @media (min-width: 768px) {
  .f-md-08 { font-size: 0.8rem !important;} 
  .f-md-1 { font-size: 1rem !important;} 
  .f-md-11 { font-size: 1.1rem !important; }
  .f-md-12 { font-size: 1.2rem !important; }
  .f-md-13 { font-size: 1.3rem !important; }
  .f-md-14 { font-size: 1.4rem !important; }
  .f-md-15 { font-size: 1.5rem !important; }
  .f-md-16 { font-size: 1.6rem !important; }
  .f-md-18 { font-size: 1.8rem !important; }
  .f-md-20 { font-size: 2rem !important; }
  .f-md-22 { font-size: 2.2rem !important; }
  .f-md-24 { font-size: 2.4rem !important; }
  .f-md-26 { font-size: 2.6rem !important; }
  .f-md-28 { font-size: 2.8rem !important; }
  .f-md-30 { font-size: 3rem !important; }
  
     .main-content p, .main-content li {
         font-size: 1.3rem;
         line-height: 1.4;
    }
     .orgads-title {
         font-size: 1.125rem;
         line-height: 1.4375rem;
    }
     .orgads-title-2 {
         font-size: 1.5rem;
         font-weight: 500;
         padding-right: 10px;
    }
     .orgads-image-2 img {
         aspect-ratio: 6 / 3;
    }
     .orgads-button-2 a {
         font-size: 1rem;
    }
     .accordion-button{
        font-size: 1.2rem;
        font-weight: 600;
    }
     .accordion-body{
        font-size: 1.3rem;
    }
     .w-40 {
         width: 40% !important;
    }
     .w-60 {
         width: 60% !important;
    }
     .w-80 {
         width: 80% !important;
    }
     .w-100 {
         width: 100% !important;
    }
     a.btn-1 {
         font-size: 1.6rem;
    }
     .play-button {
         max-width: 170px;
    }
}
 @media (min-width: 992px) {
     
  .f-lg-11 { font-size: 1.1rem !important; }
  .f-lg-12 { font-size: 1.2rem !important; }
  .f-lg-13 { font-size: 1.3rem !important; }
  .f-lg-14 { font-size: 1.4rem !important; }
  .f-lg-16 { font-size: 1.6rem !important; }
  .f-lg-18 { font-size: 1.8rem !important; }
  .f-lg-20 { font-size: 2rem !important; }
  .f-lg-22 { font-size: 2.2rem !important; }
  .f-lg-24 { font-size: 2.4rem !important; }
  .f-lg-26 { font-size: 2.6rem !important; }
  .f-lg-28 { font-size: 2.8rem !important; }
  .f-lg-30 { font-size: 3rem !important; }
  
     .btn-small {
         width: 40% !important;
    }
     .btn-large {
         width: 80% !important;
    }
     .sticky-button-div p{
        font-size: 1.1rem !important;
    }
     .sidebar-btn-1-txt p{
         color: white;
         font-weight: 700;
         text-shadow: 2px 2px 4px black;
         font-size: 16px;
         padding: 5px 0;
         margin:0;
    }
}
 @media (min-width: 1200px) {

  .f-xl-11 { font-size: 1.1rem !important; }
  .f-xl-12 { font-size: 1.2rem !important; }
  .f-xl-13 { font-size: 1.3rem !important; }
  .f-xl-14 { font-size: 1.4rem !important; }
  .f-xl-16 { font-size: 1.6rem !important; }
  .f-xl-18 { font-size: 1.8rem !important; }
  .f-xl-20 { font-size: 2rem !important; }
  .f-xl-22 { font-size: 2.2rem !important; }
  .f-xl-24 { font-size: 2.4rem !important; }
  .f-xl-26 { font-size: 2.6rem !important; }
  .f-xl-28 { font-size: 2.8rem !important; }
  .f-xl-30 { font-size: 3rem !important; }
  
     .orgads-div {
         margin-top: 20px !important;
    }
     .sidebar-btn-1-txt p{
         color: white;
         font-weight: 700;
         text-shadow: 2px 2px 4px black;
         font-size: 18px;
         padding: 5px 0;
         margin:0;
    }
}