body {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    .font-brand-logo {
      font-family: 'Fredoka', cursive, sans-serif;
      letter-spacing: -0.02em;
      font-weight: 800;
    }
  


    /* Deep realistic floating cookie shadow */
    .cookie-shadow {
      filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.32));
    }
    
    /* Bidirectional Scroll Animation styles: Initial / Hidden state */
    .scroll-card-anim {
      opacity: 0;
      transform: translateY(60px) scale(0.96);
      transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.25, 1),
                  transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1);
      will-change: opacity, transform;
    }
    
    /* Active in-viewport state */
    .scroll-card-anim.in-view {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Inner card elements staggered fade */
    .scroll-card-anim .card-content {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease-out 0.15s, transform 0.5s ease-out 0.15s;
    }
    .scroll-card-anim.in-view .card-content {
      opacity: 1;
      transform: translateY(0);
    }

    /* Cookie floating animation pop */
    .scroll-card-anim .cookie-img-box {
      transform: scale(0.85);
      transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s;
    }
    .scroll-card-anim.in-view .cookie-img-box {
      transform: scale(1);
    }

    /* Navbar transition states */
    #main-navbar {
      background-color: transparent;
      border-color: transparent;
      backdrop-filter: none;
      transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    #main-navbar:not(.scrolled) #navbar-logo,
    #main-navbar:not(.scrolled) #nav-menu-btn { color: var(--hero-nav-color, #111111); }
    #main-navbar:not(.scrolled) #nav-action-btn { background-color: white; color: #1D22DF; }
    /* Carousel artwork with a fallback color while the image loads. */
    [data-purpose="hero-banner"] {
      background-color: #F5F5F5;
      background-image: url('img1.jfif');
      background-size: cover;
      background-position: center;
      min-height: max(600px, 85svh);
      padding-top: clamp(180px, 28svh, 300px);
      padding-bottom: 80px;
    }
    @media (min-width: 768px) {
      [data-purpose="hero-banner"] { min-height: max(680px, 85svh); }
    }
    #main-navbar.scrolled {
      background-color: #1D22DF !important;
      border-color: rgba(255, 255, 255, 0.2) !important;
      box-shadow: 0 10px 25px -5px rgba(29, 34, 223, 0.4);
    }
    #main-navbar.scrolled #navbar-logo {
      color: #ffffff !important;
    }
    #main-navbar.scrolled #nav-menu-btn {
      color: #ffffff !important;
    }
    #main-navbar.scrolled #nav-action-btn {
      background-color: #ffffff !important;
      color: #1D22DF !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    #main-navbar.scrolled #nav-action-btn:hover {
      background-color: #f0f2ff !important;
    }
  


    /* Keep positioning independent from the reveal animation's transform. */
    #nuestros-productos .cookie-img-box {
      top: 50%;
      translate: 0 -50%;
    }
    @media (min-width: 768px) and (max-width: 1023px) {
      #nuestros-productos .cookie-img-box {
        width: 48%;
        height: 100%;
      }
      #nuestros-productos article:nth-child(odd) .cookie-img-box { left: -24px; }
      #nuestros-productos article:nth-child(even) .cookie-img-box { right: -24px; }
      #nuestros-productos .card-content > div { flex-wrap: wrap; }
    }
    /* The sm layout still positions images absolutely; preserve centering
       independently of the reveal animation's scale transform. */
    @media (min-width: 640px) and (max-width: 767px) {
      html, body { max-width: 100%; overflow-x: clip; }
      #nuestros-productos .cookie-img-box {
        top: 50%;
        translate: 0 -50%;
        height: 100%;
      }
    }
    /* Compact phone layout. */
    @media (max-width: 639px) {
      html, body { max-width: 100%; overflow-x: clip; }
      #main-navbar { height: 52px; padding: 10px 20px; }
      #navbar-logo { color: white; font-size: 28px; }
      #nav-menu-btn { color: white; }
      #nuestros-productos {
        --mobile-card-height: max(128px, calc((100svh - 84px) * 0.269));
        --mobile-card-gap: max(36px, calc((100svh - 84px) * 0.0815));
        padding-inline: 24px;
        scroll-margin-top: 64px;
      }
      #nuestros-productos > .space-y-12 {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-card-gap);
        scroll-margin-top: 64px;
      }
      #nuestros-productos [data-purpose="flavor-item"] {
        min-height: var(--mobile-card-height);
        margin: 0;
        padding: 10px 18px;
        border-radius: 26px;
        flex-direction: row;
        justify-content: flex-start;
        opacity: 1;
        transform: none;
      }
      #nuestros-productos .card-content {
        width: 48%;
        min-width: 0;
        padding: 0;
        opacity: 1;
        transform: none;
      }
      #nuestros-productos .card-content h3 {
        font-size: clamp(15px, 4.7vw, 25px);
        line-height: 1.15;
        margin-bottom: 7px;
      }
      #nuestros-productos .card-content > span {
        font-size: 9px;
        padding: 3px 8px;
        margin-bottom: 6px;
      }
      #nuestros-productos .card-content > div { gap: 5px; }
      #nuestros-productos .card-content a { font-size: 11px; }
      #nuestros-productos .card-content a[href="tienda.html"] { padding: 6px 14px; }
      #nuestros-productos article:nth-child(1) a[href="tienda.html"] { color: #3C2218; }
      #nuestros-productos article:nth-child(2) a[href="tienda.html"] { color: #1c3879; }
      #nuestros-productos article:nth-child(3) a[href="tienda.html"] { color: #b83253; }
      #nuestros-productos article:nth-child(4) a[href="tienda.html"] { color: #2a1b14; }
      /* Independent translate survives the existing scale animation. */
      #nuestros-productos .cookie-img-box {
        top: 50%;
        translate: 0 -50%;
        transform: none;
        width: 53%;
        height: calc(var(--mobile-card-height) * 1.06);
      }
      #nuestros-productos article:nth-child(odd) .cookie-img-box { left: -40px; right: auto; }
      #nuestros-productos article:nth-child(even) .cookie-img-box { right: -40px; left: auto; }
      #nuestros-productos .cookie-img-box img { max-height: 100%; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.22)); }
    }
  


@media (min-width: 1024px) {
  #nuestros-productos [data-purpose="flavor-item"] { min-height: 390px; }
}
@media (max-width: 767px) {
  #nuestros-productos [data-purpose="flavor-item"] { opacity: 0; transform: translateY(28px) scale(.97); }
  #nuestros-productos [data-purpose="flavor-item"].in-view { opacity: 1; transform: translateY(0) scale(1); }
  #nuestros-productos .scroll-card-anim .card-content { opacity: 0; transform: translateY(14px); }
  #nuestros-productos .scroll-card-anim.in-view .card-content { opacity: 1; transform: translateY(0); }
  #nuestros-productos .scroll-card-anim .cookie-img-box { transform: scale(.85); }
  #nuestros-productos .scroll-card-anim.in-view .cookie-img-box { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-card-anim, #nuestros-productos [data-purpose="flavor-item"],
  .scroll-card-anim .card-content, #nuestros-productos .scroll-card-anim .card-content,
  .scroll-card-anim .cookie-img-box, #nuestros-productos .scroll-card-anim .cookie-img-box {
    opacity: 1; transform: none; transition: none;
  }
}