/* =============================================================
   ESTILOS-HOME.CSS
   Estilos específicos de la Home (jetaimealfajores.com).
   Depende de variables.css (debe cargarse antes en el HTML).
   ============================================================= */


/* =========================================================
   HERO BANNER
   Ancho completo, nunca se distorsiona, alto automático.
   ========================================================= */

.hero-banner {
  width: 100%;
  line-height: 0; /* evita espacio fantasma debajo de la img */
}

.hero-banner-img {
  width: 100%;
  height: auto;
}


/* =========================================================
   SECCIÓN DE TÍTULOS
   "6 variedades" + "todas distintas / e irresistibles"
   Centrado horizontal y vertical, alto de sección = 70vh.
   Interlineado 1.1 e interletrado -0.069em en ambos títulos.
   Gradiente circular en el texto vía background-clip.
   ========================================================= */

.titles-section {
  width: 100%;
  min-height: 70vh;
  margin: 2vw 0; /* separación del bloque completo respecto a lo que está arriba/abajo — ACÁ SI NO TE GUSTA EL ALTO */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2vw 4vw;
}

@media (max-width: 768px) {
  .titles-section {
    min-height: 28vh; /* antes 40vh, -30% más como pediste */
    padding: 1vw 4vw; /* antes 2vw, menos aire arriba/abajo */
  }

  .title-sub {
    font-size: 1.12rem; /* -30% respecto al piso anterior (1.6rem) */
  }

  .title-main .line1 {
    font-size: 1.68rem; /* -30% respecto al piso anterior (2.4rem) */
  }

  .title-main .line2 {
    font-size: 1.96rem; /* -30% respecto al piso anterior (2.8rem) */
  }
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.title-sub {
  margin: 0 0 2.6vw 0;
  font-size: clamp(1.6rem, 4.1361vw, 3.53rem); /* piso 25.6px, techo 56.5px (Canva), fluido en el medio */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.069em;
  padding-right: 0.069em;
}

.title-main {
  margin-top: 0;
}

.title-main .line1,
.title-main .line2 {
  display: block;
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.069em;
  padding-right: 0.069em;
}

.title-main .line1 {
  font-size: clamp(2.4rem, 7.6501vw, 6.53rem); /* piso 38.4px, techo 104.5px (Canva) */
}

.title-main .line2 {
  font-size: clamp(2.8rem, 9.1508vw, 7.8125rem); /* piso 44.8px, techo 125px (Canva) */
  margin-top: -1.1vw;
}

.title-main .regular { font-weight: 400; }
.title-main .bold { font-weight: 700; }


/* =========================================================
   BANNERS DE VARIEDADES (6 imágenes) — DESKTOP
   ========================================================= */

.variety-banners {
  display: none;
  width: 100%;
  padding: 2vw 0 4vw 0;
}

.variety-item {
  width: 82.7586%;
  margin: 0 auto 3.4483vw auto;
  border-radius: 0.9517vw;
  overflow: hidden;
}

.variety-item:last-child {
  margin-bottom: 0;
}

.variety-img {
  width: 100%;
  height: auto;
}


/* =========================================================
   BANNERS MOBILE — dos opciones para mostrarle al cliente.
   Mismo orden que desktop: doble tentación, atr, pistacho,
   minitorta, maicena, relleno ddl blanco.
   Sin bordes redondeados. Texto blanco puro, <strong> = negrita.
   ========================================================= */

.mb-variety-banners {
  display: none;
  width: 100%;
}

/* ESTO ES LA OPCION 1 COMENTAR PARA PROBAR
   Referencia: pantalla de 17cm.
   - Banner: 2.5cm de margen c/lado → 12cm → 70.5882%
   - Banner → descripción: 0.75cm → 4.4118vw
   - Descripción: 3cm de margen c/lado → 11cm → 64.7059%
   - Descripción → próximo banner: 1.5cm → 8.8235vw */

.mb-variety-opt1 .mb-variety-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12vw;
}

.mb-variety-opt1 .mb-variety-item:last-child {
  margin-bottom: 0;
}

.mb-variety-opt1 .mb-variety-img {
  width: 80%;
  height: auto;
  display: block;
}

.mb-variety-opt1 .mb-variety-caption {
  width: 70%;
  margin: 4.4118vw auto 0 auto;
  color: var(--color-white);
  font-weight: 400;
  font-size: 1rem; /* -30% respecto al tamaño por defecto (1rem/16px) — si se ve muy chico, avisame y lo subo */
  text-align: center;
}
/* FIN OPCION 1 */


/* OPCIÓN 2 — de a dos banners por fila. Referencia: 17cm.
   - Margen ext. + gap columnas: 0.75cm → 4.4118vw
   - Descripción: padding 1cm c/lado → 5.8824vw
   - Descripción margin-top: 0.5cm → 2.9412vw
   - Descripción margin-bottom: 1cm → 5.8824vw

.mb-variety-opt2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4.4118vw;
  padding: 0 4.4118vw;
}

.mb-variety-opt2 .mb-variety-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mb-variety-opt2 .mb-variety-img {
  width: 100%;
  height: auto;
  display: block;
}

.mb-variety-opt2 .mb-variety-caption {
  margin: 2.9412vw 0 5.8824vw 0;
  padding: 0 5.8824vw;
  color: var(--color-white);
  font-weight: 400;
  text-align: left;
}
FIN OPCION 2 */


/* =========================================================
   BOTONES CTA
   ========================================================= */

.cta-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding: 0 7.3469%;
  margin-top: 8.5715vw; /* antes 12.245vw, -30% (desktop) */
  gap: 11%; /* separación solo entre las dos cajas, independiente del padding lateral */
}

.cta-button {
  position: relative;
  width: 33.6784%; /* +20% */
  height: 18.62vw; /* +20% */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border-radius: 1.4548vw; /* +20% */
  background: transparent;
  transition: background-color 0.25s ease;
}

.cta-button:hover,
.cta-button:active {
  background: var(--gradient-text);
}

.cta-button:hover .gradient-text,
.cta-button:active .gradient-text {
  background: none;
  -webkit-text-fill-color: var(--color-bg-start);
  color: var(--color-bg-start);
  transition: color 0.25s ease;
}

.cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-text);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.cta-label {
  display: block;
  font-size: 1.8714vw;
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.069em;
  padding-right: 0.069em;
  padding-bottom: 0.12em;
  margin-bottom: 2vw;
}

.cta-title {
  display: block;
  padding-right: 0.069em;
}

.cta-title .cta-line1,
.cta-title .cta-line2 {
  display: block;
  font-size: 3.6vw;
  line-height: 0.88;
  letter-spacing: -0.069em;
  padding-right: 0.069em;
}

.cta-title .cta-line2 {
  margin-top: -0.3vw;
}

.cta-title .regular {
  font-weight: 400;
}

.cta-title .bold {
  font-weight: 700;
}

@media (max-width: 768px) {
  .cta-section {
    flex-direction: column; 
    align-items: center;
    padding: 0 10%;
    margin-top: 12vh;
    gap: 6vw;
  }

  .cta-button {
    width: 78%;
    height: 32vw;
    border-radius: 3vw;
  }

  .cta-label {
    font-size: 4vw;
  }

  .cta-title .cta-line1,
  .cta-title .cta-line2 {
    font-size: 7vw;
  }
}


/* =========================================================
   CREADORES DEL DULCE DE LECHE BLANCO
   ========================================================= */

.creadores-section {
  width: 100%;
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

.creadores-img-top {
  width: 25%; 
  height: auto;
  display: block;
  margin: 0;
  margin-top: 5.8563vw;
}

.creadores-img-bottom {
  width: 30%; 
  height: auto;
  display: block;
  margin: 0;
  transition: transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1.2s ease;
}

@media (max-width: 768px) {
  .creadores-img-top {
    width: 43%;
    margin-top: 0;
  }

  .creadores-img-bottom {
    width: 68%; 
  }
}

.creadores-img-bottom.will-animate {
  transform: translateX(100vw);
  opacity: 0;
}

.creadores-img-bottom.will-animate.is-visible {
  transform: translateX(0);
  opacity: 1;
}