/* ===== Base rendering tweaks ===== */
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
.homeblade { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ===== Theme ===== */
:root{
  --hb-bg:#fffdf8;                          /* warm white */
  --hb-soft-tint-1: rgba(250,204,21,.10);   /* amber-400 */
  --hb-soft-tint-2: rgba(244,114,182,.08);  /* pink-400 */

  --hb-surface:rgba(255,255,255,.92);
  --hb-glass-border:rgba(15,23,42,.06);

  --hb-text:#0f172a;
  --hb-muted:#475569;

  --hb-primary:#6366f1;
  --hb-primary-2:#a855f7;
  --hb-green:#10b981;

  --hb-radius-xl:1.25rem;
  --hb-radius-2xl:1.5rem;

  --hb-shadow-lg:0 10px 28px rgba(2,6,23,.10);
  --hb-shadow-sm:0 4px 12px rgba(2,6,23,.06);
}

/* Page background + container shell */
.homeblade{
  background:
    radial-gradient(1100px 520px at 80% -8%, var(--hb-soft-tint-1), transparent 60%),
    radial-gradient(760px 360px at 12% 0%, var(--hb-soft-tint-2), transparent 50%),
    var(--hb-bg);
  color:var(--hb-text);
  padding: clamp(10px, 2vw, 24px) 0;
  overflow-x:hidden;
}
.hb-shell{max-width:1200px;margin-inline:auto;padding:0 clamp(12px,2vw,24px);}
.hb-page{
  background:#fff;
  border:1px solid var(--hb-glass-border);
  border-radius:24px;
  box-shadow:var(--hb-shadow-lg);
  overflow:hidden;
  position:relative;
  z-index:0;
}

/* ===== Hero / Swiper ===== */
.hb-hero{
  height:clamp(380px, 56vh, 560px);
  border-radius:24px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  z-index:0;
}
.hb-hero--compact{height:clamp(380px, 52vh, 520px);}
.heroSwiper{ overflow:hidden; }
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{ height:100%; }

/* Slides + Media layering */
.hb-slide{position:relative; overflow:hidden;}
.hb-slide picture{position:absolute; inset:0; z-index:1;}
.hb-media{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  backface-visibility:hidden;
  will-change:transform;
}
.hb-overlay{
  position:absolute; inset:0; display:grid; align-items:center;
  padding:clamp(16px,4vw,56px); z-index:2;
  pointer-events:none;
}

/* Gentle color tint + light scrim over photos */
.hb-overlay--boost{ position:relative; }
.hb-overlay--boost::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 70%, var(--hb-soft-tint-1), transparent 65%),
    radial-gradient(120% 80% at 50% 30%, var(--hb-soft-tint-2), transparent 70%);
  pointer-events:none;
}
.hb-overlay--boost::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(2,6,23,.06);
  border-radius: inherit;
  pointer-events:none;
}

/* Gradients (soft, for legibility only) */
.hb-overlay--center{
  place-items:center;text-align:center;
  background:linear-gradient(
    to top,
    rgba(2,6,23,.22) 0%,
    rgba(2,6,23,.10) 55%,
    transparent 85%
  );
}
.hb-overlay--left{
  justify-items:start;
  background:linear-gradient(90deg, rgba(2,6,23,.22) 0%, rgba(2,6,23,.10) 42%, transparent 75%);
}
.hb-overlay--right{
  justify-items:end;
  background:linear-gradient(-90deg, rgba(2,6,23,.22) 0%, rgba(2,6,23,.10) 42%, transparent 75%);
}
.hb-overlay--bottom{
  align-items:end;
  background:linear-gradient(0deg, rgba(2,6,23,.22) 0%, rgba(2,6,23,.10) 42%, transparent 75%);
  padding-bottom:clamp(24px,6vw,72px);
}

/* Ken Burns */
.swiper-slide-active .hb-media,
.swiper-slide-duplicate-active .hb-media{ animation: hb-kenburns 9s ease-in-out both; }
@keyframes hb-kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.12); } }

/* ===== Hero copy (glassy WHITE panel with dark text) ===== */
.hb-hero-copy{
  color: var(--hb-text);
  max-width:min(880px,92vw);
  pointer-events:auto;
  background: rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 24px rgba(2,6,23,.12);
}
.hb-badge{
  display:inline-block;background:rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.10);
  color:var(--hb-text);
  padding:.35rem .6rem;border-radius:999px;font-weight:800;font-size:.8rem;letter-spacing:.02em;
  margin-bottom:.6rem;
}
.hb-title{font-weight:900;letter-spacing:-.02em;color:var(--hb-text);font-size:clamp(2.25rem,5vw,3.5rem);text-shadow:none;}
.hb-sub{margin-top:.6rem;font-size:clamp(1rem,2.4vw,1.25rem);opacity:.98;}
.hb-sub span{font-weight:800;color:#111827;}
.hb-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.1rem; pointer-events:auto;}
.hb-btn{
  --_padY:.9rem;--_padX:1.25rem;padding:var(--_padY) var(--_padX);border-radius:999px;font-weight:800;
  display:inline-flex;align-items:center;gap:.5rem;box-shadow:var(--hb-shadow-sm);transform:translateZ(0);
  transition:transform .2s ease, box-shadow .2s ease; pointer-events:auto;
}
.hb-btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:var(--hb-shadow-lg);}
.hb-btn:active{transform:translateY(0) scale(.99);}
.hb-btn--primary{background:linear-gradient(90deg,#6d78ff,#b07cff);color:#fff;}
.hb-btn--whatsapp{background:linear-gradient(90deg,#22c55e,#059669);color:#fff;}
.hb-btn--light{background:#fff;color:#111;padding:.6rem 1rem;border-radius:999px;box-shadow:var(--hb-shadow-sm);}

/* Captions on product slides */
.hb-caption{
  color:#fff; max-width:42ch;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(15,23,42,.35), rgba(15,23,42,.28));
  padding:1rem 1.2rem; border-radius:var(--hb-radius-xl);
  border:1px solid rgba(255,255,255,.16); box-shadow:var(--hb-shadow-sm);
  pointer-events:auto;
}
.hb-caption--solid{ background: rgba(15,23,42,.56); }
.hb-caption--accent{position:relative;}
.hb-caption--accent::before{
  content:""; position:absolute; left:-1px; top:10px; bottom:10px; width:4px;
  background: linear-gradient(180deg, var(--hb-primary), var(--hb-primary-2));
  border-radius:4px;
}
.hb-caption h2{font-size:clamp(1.4rem,3.2vw,2.1rem);font-weight:900;margin:0 0 .25rem;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.hb-caption p{margin:0;opacity:.98;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.hb-align-right{text-align:right;}
.hb-align-center{text-align:center;margin-inline:auto;}

/* ===== Feature strip ===== */
.hb-feature-strip{
  max-width:72rem;margin:1rem auto 0;
  display:grid;grid-template-columns:1fr;gap:.6rem;
  padding:0 1.25rem; position:relative; z-index:5;
}
@media (min-width:768px){.hb-feature-strip{grid-template-columns:repeat(3,1fr);}}
.hb-feature{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92)),
             linear-gradient(120deg, rgba(99,102,241,.10), rgba(168,85,247,.10));
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px;
  padding:.8rem 1rem;
  display:flex;align-items:center;gap:.55rem;justify-content:center;
  box-shadow:var(--hb-shadow-sm);
  color:#0f172a;font-weight:800;letter-spacing:-.01em;text-shadow:none;
}
.hb-emoji{font-size:1rem}

/* ===== Sections below hero ===== */
.homeblade .hb-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--hb-radius-2xl);
  box-shadow:var(--hb-shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.homeblade .hb-card:hover{transform:translateY(-4px);box-shadow:var(--hb-shadow-lg);}
.homeblade .hb-panel{
  background:linear-gradient(120deg,#6d78ff,#b07cff);
  border-radius:var(--hb-radius-2xl);
  box-shadow:var(--hb-shadow-lg);
  color:#fff;
}
.homeblade .hb-sauce{
  background:linear-gradient(90deg,rgba(99,102,241,.12),rgba(168,85,247,.12));
  border:1px solid rgba(99,102,241,.20);
  padding:.45rem .8rem;border-radius:999px;font-weight:700;color:var(--hb-text);
}
.hb-thumb{width:72px;height:72px;object-fit:cover;border-radius:999px;border:2px solid rgba(255,255,255,.8);box-shadow:var(--hb-shadow-sm);}
@media (min-width:768px){.hb-thumb{width:88px;height:88px;}}

.hb-note{
  display:inline-block;background:linear-gradient(90deg,#fff7d6,#ffe6e6);
  color:#111;border:1px solid #fde68a;padding:.45rem .7rem;border-radius:999px;font-weight:800;
}

/* Swiper controls */
.hb-dots .swiper-pagination-bullet{width:10px;height:10px;background:rgba(15,23,42,.25);opacity:1;border:2px solid rgba(15,23,42,.14);transform:scale(.95);transition:transform .2s ease, background .2s;}
.hb-dots .swiper-pagination-bullet-active{background:#111827;transform:scale(1.15);}
.hb-nav{
  width:44px;height:44px;border-radius:999px;background:#fff;
  border:1px solid rgba(15,23,42,.12);box-shadow:var(--hb-shadow-sm);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); pointer-events:auto;
}
.hb-nav::after{font-size:16px;color:var(--hb-text);}
.hb-nav:hover{background:#fff;box-shadow:var(--hb-shadow-lg);}

/* Typography */
.homeblade h2{letter-spacing:-.01em;color:#0f172a;}
.homeblade .text-gray-600,.homeblade .text-gray-700{color:var(--hb-muted);}

/* ===== Floating WhatsApp CTA (FIXED/STICKY) ===== */
.hb-floating-wa,
.hb-floating-wa:visited{
  position: fixed !important;             /* force fixed in all browsers */
  right: clamp(12px,2vw,18px);
  bottom: max(12px, calc(16px + env(safe-area-inset-bottom)));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.1rem;
  line-height: 1;
  font-weight: 900;
  font-size: 0.975rem;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 999px;
  background: linear-gradient(90deg,#22c55e,#059669);
  background-color: #16a34a;             /* fallback */
  box-shadow: 0 12px 26px rgba(2,6,23,.18);
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
.hb-floating-wa:hover{ box-shadow: 0 14px 30px rgba(2,6,23,.22); transform: translateZ(0) translateY(-1px); }
.hb-floating-wa:active{ transform: translateZ(0) translateY(1px); }
.hb-floating-wa span{ display:block; }

/* Make it a full-width sticky bar on small screens */
@media (max-width:640px){
  .hb-floating-wa{
    left: 12px;
    right: 12px;
    bottom: max(10px, calc(10px + env(safe-area-inset-bottom)));
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: 14px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .swiper-slide-active .hb-media{animation:none !important;}
  .hb-btn,.hb-card{transition:none !important;}
}

/* ===== Emoji-friendly stacks ===== */
:root{
  --emoji-fonts: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
                  "Twemoji Mozilla","Segoe UI Symbol","Noto Emoji";
}
.hb-emoji,
.hb-caption h2,
.hb-badge{
  font-family: var(--emoji-fonts), inherit;
  font-variant-emoji: emoji;
}