/* En Balance 100 — Home page glass layer
   Scoped to body.home so nothing else on the site is affected.
   One typeface (Albert Sans, inherited); hierarchy comes from size/weight only. */

/* ---------- 1. Hero ---------- */

.eb-hero{
  position:relative;
  width:100%;
  min-height:clamp(460px, 60vh, 620px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:linear-gradient(150deg,#eef8f8 0%,#f8f5ee 45%,#faf1e6 100%);
  font-family:"Albert Sans", system-ui, sans-serif;
  color:#161514;
}

.eb-hero-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.eb-hero-blob{position:absolute;border-radius:50%;filter:blur(90px);display:block;}
.eb-hero-blob-a{width:520px;height:520px;background:#4ecbd9;opacity:.45;top:-180px;left:-160px;}
.eb-hero-blob-b{width:460px;height:460px;background:#f0a870;opacity:.35;bottom:-200px;right:-140px;}

.eb-hero-stage{position:relative;z-index:2;flex:1;display:grid;}
.eb-hero-slide{
  grid-area:1 / 1;
  position:relative;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease, visibility .9s ease;
  display:flex;align-items:center;
  min-height:clamp(460px, 60vh, 620px);
}
.eb-hero-slide.is-active{opacity:1;visibility:visible;}

.eb-hero-media{position:absolute;inset:0;overflow:hidden;}
.eb-hero-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);
  transition:transform 8s ease-out;
}
.eb-hero-slide.is-active .eb-hero-media img{transform:scale(1);}
/* light scrim: just enough help on the left, the photo stays fully visible right.
   The glass panel's own blur does most of the legibility work. */
.eb-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.32) 26%, rgba(255,255,255,0) 46%);
}

.eb-hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1400px;margin:0 auto;padding:0 40px;
}
.eb-hero-panel{
  max-width:560px;
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(34px) saturate(180%);
  -webkit-backdrop-filter:blur(34px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  padding:34px 36px;
  box-shadow:0 14px 46px rgba(31,41,42,.12), inset 0 1px 0 rgba(255,255,255,.75);
}
.eb-hero-eyebrow{
  margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#2b98a5;
}
.eb-hero-title{
  margin:0 0 22px;font-size:clamp(28px, 3.4vw, 44px);line-height:1.1;
  font-weight:700;letter-spacing:-.02em;color:#161514;text-wrap:balance;
}
.eb-hero-cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border-radius:999px;
  background:#000;color:#fff !important;text-decoration:none;
  font-size:15px;font-weight:700;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  transition:transform .12s ease, box-shadow .2s ease;
}
.eb-hero-cta:hover{color:#fff !important;box-shadow:0 11px 28px rgba(0,0,0,.26);}
.eb-hero-cta:active{transform:scale(.97);}
.eb-hero-cta svg{transition:transform .2s ease;}
.eb-hero-cta:hover svg{transform:translateX(3px);}

.eb-hero-dots{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  bottom:76px;display:flex;gap:9px;
  max-width:1400px;width:100%;padding:0 40px;justify-content:flex-start;
}
.eb-hero-dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.8);
  box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:width .3s ease, background .3s ease;
}
.eb-hero-dot.is-active{
  width:28px;border-radius:999px;background:#161514;border-color:#161514;
  box-shadow:0 1px 4px rgba(255,255,255,.55);
}
.eb-hero-dot:focus-visible{outline:2px solid #2b98a5;outline-offset:3px;}

.eb-hero-trust{
  position:relative;z-index:3;
  display:flex;flex-wrap:wrap;gap:10px;
  max-width:1400px;width:100%;margin:0 auto;padding:0 40px 26px;
}
.eb-trust-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.8);
  font-size:12.5px;font-weight:600;color:#4a4744;
}
.eb-trust-chip svg{color:#2b98a5;flex-shrink:0;}

@media (prefers-reduced-motion: reduce){
  .eb-hero-slide, .eb-hero-media img{transition:none;}
}
@media (max-width: 900px){
  .eb-hero-inner, .eb-hero-trust, .eb-hero-dots{padding-left:20px;padding-right:20px;}
  .eb-hero-panel{padding:26px 22px;max-width:100%;}
  .eb-hero-media::after{
    background:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.62) 60%);
  }
  .eb-hero-dots{bottom:88px;}
}

/* ---------- 2. Glass layer over the existing Elementor sections ---------- */

/* Fondo con halos de color difuminados — mismo lenguaje que el carrito y la maqueta.
   Va fijo para que acompañe todo el scroll de la página. */
body.home{
  background:
    radial-gradient(900px 640px at  4% -2%, rgba(78,203,217,.58), transparent 60%),
    radial-gradient(820px 680px at 98% 10%, rgba(240,168,112,.50), transparent 58%),
    radial-gradient(760px 620px at 24% 42%, rgba(159,220,175,.44), transparent 60%),
    radial-gradient(820px 660px at 94% 66%, rgba(78,203,217,.40), transparent 60%),
    radial-gradient(760px 620px at 16% 90%, rgba(240,168,112,.36), transparent 60%),
    linear-gradient(150deg,#eef8f8 0%,#f8f5ee 45%,#faf1e6 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* Elementor sections paint their own white; let the page gradient through
   so the glass panels above actually have something to refract. */
body.home .elementor-13215 > .e-con.e-parent{background-color:transparent;}

/* Product + category cards -> glass.
   Selectors verified against the live DOM (.item-product x6,
   .elementor-image-box-wrapper for the category row). */
body.home .item-product,
body.home .elementor-image-box-wrapper{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 28px rgba(31,41,42,.07), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
body.home .item-product:hover,
body.home .elementor-image-box-wrapper:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(31,41,42,.12), inset 0 1px 0 rgba(255,255,255,.75);
}
body.home .item-product img,
body.home .elementor-image-box-wrapper img{border-radius:12px;}

/* Section headings share the hero's typographic rhythm */
body.home .elementor-widget-bzotech-heading-global .title-heading,
body.home h2.title-heading{
  letter-spacing:-.015em;
}