/*
 * Home code goes here.
 * 
 */


@media screen and (min-width: 991.98px) { 

    body#index #mobile-header:not(:has(#mobile-header-sticky.stuck)),
    #header,
    #mobile-header #mobile-header-sticky:not(.stuck) {
        background: rgba(255,255,255,0);
    }

}

.elementor-iqit-banner figure img {
    border-radius: var(--border-radius);
}

/*ELEMENTOR*/
.img-100 img {
    width: 100%;
}
.sponsor-size,
.newsletter-size {
    max-width: 750px;
}
.sponsor-size {
    margin: auto;
}

@media screen and (max-width: 767.98px) {

    .sponsor-section,
    .newsletter-section {
        background-size: auto !important;
    }

}

/*BANNER PRODUCT*/
.banner-product .btn {
    width: 100%;
}




 /* CATEGORÍAS CARRUSEL ANIMADAS - VERSIÓN CON ESTILO PERSONALIZADO */

/* CONTENEDOR DE CADA CATEGORÍA */
.elementor-image-carousel .swiper-slide {
  position: relative;
  overflow: hidden;
}

/* IMAGEN: zoom suave */
.elementor-image-carousel .swiper-slide-image {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
  height: auto;
}

.elementor-image-carousel .swiper-slide:hover .swiper-slide-image {
  transform: scale(1.15);
}

/* DEGRADADO BLANCO MÁS MARCADO — SOLO EN HOVER */
.elementor-image-carousel .swiper-slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.elementor-image-carousel .swiper-slide:hover::after {
  opacity: 1;
}

/* TEXTO: oculto por defecto */
.elementor-image-carousel .txt-alt-img {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #a7b94a;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.5rem;
  white-space: nowrap;
  opacity: 0;
  z-index: 2;
  transition: all 0.4s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* TEXTO: aparece desde abajo al hacer hover */
.elementor-image-carousel .swiper-slide:hover .txt-alt-img {
  bottom: 20px;
  opacity: 1;
}


  /* TARJETAS HOME */
  
  /* Transición general para la tarjeta */
  .elementor-iqit-banner {
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.8s ease, box-shadow 0.3s ease;
    will-change: transform;
  }
  
  /* Imagen: zoom interno */
  .elementor-iqit-banner figure img {
    transition: transform 0.8s ease;
    will-change: transform;
  }
  
  /* Hover: efecto tarjeta levantada */
  .elementor-iqit-banner:hover {
    transform: translateY(-18px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  }
  
  /* Hover: zoom de imagen dentro */
  .elementor-iqit-banner:hover figure img {
    transform: scale(1.15);
  }
  
  /* Espaciado consistente para el contenido */
  .elementor-iqit-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px; /* antes: 10px */
    padding: 10px 12px 12px 12px; /* antes: 10px en todo */
    min-height: 140px; /* antes: 160px */
    transition: transform 0.3s ease;
  }
  
  /* Efecto suave si lo deseas en hover */
  .elementor-iqit-banner:hover .elementor-iqit-banner-content {
    transform: translateY(2px);
  }
  
  /* Transición suave para el botón */
  .elementor-iqit-banner .elementor-button-link {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
  }
  
  /* Hover: zoom y color animado del botón */
  .elementor-iqit-banner:hover .elementor-button-link {
    transform: scale(1.05);
    background-color: #2a7d53; /* Verde más oscuro */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  /* Título de producto */
  .elementor-iqit-banner-title {
    transition: transform 0.3s ease, font-weight 0.3s ease;
  }
  
  /* Hover: título más grande y negrita */
  .elementor-iqit-banner:hover .elementor-iqit-banner-title {
    transform: scale(1.15);
    font-weight: 700;
    color:#2a7d53;
  }
  .home-season-products .elementor-iqit-banner-title {
    font-weight: 700;   /* negrita siempre */
    text-transform: uppercase;
  }

/* Botones en mayúsculas */
.banner-product .btn,
.elementor-iqit-banner .elementor-button-text {
  text-transform: uppercase;
  font-weight: 700;   /* negrita siempre */
}

/* Texto de descripción (peso + origen) */
.elementor-iqit-banner-description {
  font-size: 0.8rem;   /* mismo tamaño que en Elementor */
  color: #555;         /* opcional: tono gris más suave */
  line-height: 1.3;    /* más compacto */
}


/* ===== POPUP IQITPOPUP — CSS limpio y estable ===== */

/* Centrar y quitar scale inline del módulo */
#iqitpopup.showed-iqitpopup{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  max-width: min(92vw, 920px);
  width: auto;
  z-index: 99999;
}

/* Tarjeta + scroll interno */
#iqitpopup .modal-content{
  border-radius: 14px;
  overflow: hidden;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
#iqitpopup .modal-body{
  padding: 24px;
  overflow: auto;
}

/* Imagen siempre fluida */
#iqitpopup .img-pop-up img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 10px;
}

/* Form base */
#iqitpopup .iqitpopup-newsletter-form{ margin-top: 16px; }
#iqitpopup .newsletter-form{ margin: 0; }
#iqitpopup .newsletter-wrapper{ display:flex; gap:8px; align-items:stretch; }
#iqitpopup .newsletter-input{ flex:1 1 auto; min-height:44px; }
#iqitpopup .iqit-btn-newsletter{ min-height:44px; white-space:nowrap; }
#iqitpopup .newsletter-consent{ font-size:.85rem; color:#6c757d; }

/* ===== MÓVIL (<= 991.98px) ===== */
@media (max-width: 991.98px){
  #iqitpopup.showed-iqitpopup{
    top: 5%;
    transform: translateX(-50%) !important;
    width: 95vw; max-width: 95vw; max-height: 90vh;
  }
  #iqitpopup .modal-body{ padding: 16px; }

  /* si tu HTML usa .col-md-6, fuerzo una columna */
  #iqitpopup .iqitpopup-content .col-md-6{
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  /* form apilado */
  #iqitpopup .newsletter-wrapper{ flex-direction: column; }
  #iqitpopup .iqit-btn-newsletter{ width: 100%; }

  /* img popup*/
  .img-pop-up{display: none;}
}

/* ===== ESCRITORIO (>= 992px) ===== */
@media (min-width: 992px){
  /* 1) La grid va en .iqitpopup-content (NO en .tt-popup) */
  #iqitpopup .iqitpopup-content{
    display: grid;
    grid-template-columns: 1fr 1fr;                 /* col izq: imagen / col dcha: texto */
    column-gap: var(--bs-gutter-x, 24px);           /* 24px por defecto si usas g-4 */
    align-items: start;
  }

  /* 2) "Aplano" .tt-popup para que sus hijos sean items de la grid */
  #iqitpopup .iqitpopup-content .tt-popup{ display: contents; }

  /* 3) Anulo restricciones de Bootstrap en las columnas internas */
  #iqitpopup .iqitpopup-content .tt-popup > [class*="col-"]{
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
  }

  /* 4) Ubicación: 1er hijo (imagen) -> col 1 ; 2º hijo (texto) -> col 2 */
  #iqitpopup .iqitpopup-content .tt-popup > :nth-child(1){ grid-column: 1; }
  #iqitpopup .iqitpopup-content .tt-popup > :nth-child(2){ grid-column: 2; }

  /* 5) Formulario: debajo del texto, misma columna (2) */
  #iqitpopup .iqitpopup-newsletter-form{
    grid-column: 2;
    margin-top: 12px;
    padding: 0;
    width: auto;
  }

  #iqitpopup .newsletter-consent{ text-align: left; }
}
/* ===== Ajuste fino desktop: acercar el formulario al texto ===== */
@media (min-width: 992px){
  /* quita espacio extra del último párrafo y del aviso (alert) */
  #iqitpopup .iqitpopup-content .tt-popup .alert{
    margin-bottom: 0 !important;   /* antes venía de .mb-4 (~1.5rem) */
  }
  #iqitpopup .iqitpopup-content .tt-popup p:last-of-type{
    margin-bottom: 0 !important;
  }

  /* reduce y “pega” el formulario justo debajo */
  #iqitpopup .iqitpopup-newsletter-form{
    margin-top: -2em;      /* estaba en 12–16px */
    align-self: start;    /* evita que se alinee al centro vertical si la columna crece */
  }
}


@media (max-width: 1670px){
   /* reduce y “pega” el formulario justo debajo */
   #iqitpopup .iqitpopup-newsletter-form{
    margin-top: 2em;      /* estaba en 12–16px */
    align-self: start;    /* evita que se alinee al centro vertical si la columna crece */
  }
}