/* PASO 4 — Categorías premium y WhatsApp flotante */
.premium-categories{
  position:relative;
  padding:clamp(76px,8vw,118px) clamp(18px,6vw,90px);
  overflow:hidden;
  background:
    radial-gradient(circle at 5% 5%,rgba(207,139,155,.12),transparent 23%),
    radial-gradient(circle at 96% 92%,rgba(190,161,105,.1),transparent 24%),
    #fbf8f7;
}
.premium-categories::after{
  content:"YEYA";
  position:absolute;
  right:-22px;
  bottom:-55px;
  color:rgba(56,34,41,.035);
  font:700 clamp(140px,23vw,340px)/1 "Cormorant Garamond",serif;
  pointer-events:none;
}
.premium-categories-heading{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:44px;
  max-width:1380px;
  margin:0 auto 42px;
}
.premium-categories-heading h2{
  max-width:690px;
  margin:8px 0 0;
  color:#251a1e;
  font:600 clamp(44px,5.4vw,76px)/.93 "Cormorant Garamond",serif;
  letter-spacing:-.025em;
}
.premium-categories-heading > p{
  max-width:480px;
  margin:0 0 6px;
  color:#77686d;
  font-size:14px;
  line-height:1.85;
}
.premium-category-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(220px,auto);
  gap:16px;
  max-width:1380px;
  margin:auto;
}
.premium-category-card{
  position:relative;
  min-width:0;
  min-height:220px;
  padding:25px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(75,44,53,.09);
  border-radius:28px;
  color:#281d20;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 18px 45px rgba(64,37,46,.07);
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.premium-category-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(27,17,21,.28),transparent 58%);
  opacity:.12;
  transition:opacity .3s ease;
}
.premium-category-card:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 70px rgba(64,37,46,.15);
  border-color:rgba(168,91,112,.2);
}
.premium-category-card:hover::before{
  opacity:.25;
}
.premium-category-card.is-active{
  outline:2px solid rgba(169,93,114,.48);
  outline-offset:3px;
}
.premium-category-all{
  grid-column:span 5;
  grid-row:span 2;
  min-height:456px;
  background:
    radial-gradient(circle at 75% 22%,rgba(255,255,255,.84),transparent 22%),
    linear-gradient(145deg,#efc9d2,#c57c91);
  color:#fff;
}
.premium-category-makeup{
  grid-column:span 4;
  background:
    radial-gradient(circle at 80% 25%,rgba(255,255,255,.8),transparent 24%),
    linear-gradient(145deg,#fff4f5,#e8b4be);
}
.premium-category-skin{
  grid-column:span 3;
  background:
    radial-gradient(circle at 78% 24%,rgba(255,255,255,.75),transparent 22%),
    linear-gradient(145deg,#f3f4e8,#ced8bc);
}
.premium-category-hair{
  grid-column:span 3;
  background:
    radial-gradient(circle at 78% 24%,rgba(255,255,255,.75),transparent 22%),
    linear-gradient(145deg,#f5ede5,#d8b99c);
}
.premium-category-jewelry{
  grid-column:span 4;
  background:
    radial-gradient(circle at 78% 28%,rgba(210,174,111,.22),transparent 23%),
    linear-gradient(145deg,#23191c,#4c343b);
  color:#fff;
}
.category-card-number{
  position:absolute;
  top:22px;
  left:24px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  opacity:.58;
}
.category-card-icon{
  position:absolute;
  top:22px;
  right:24px;
  font:500 clamp(44px,5.6vw,78px)/1 "Cormorant Garamond",serif;
  opacity:.75;
}
.premium-category-all .category-card-icon{
  font-size:clamp(90px,10vw,148px);
  top:50px;
  right:38px;
  color:rgba(255,255,255,.72);
}
.category-card-copy{
  position:relative;
  z-index:2;
  display:block;
  max-width:420px;
}
.category-card-copy small{
  display:block;
  margin-bottom:8px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.18em;
  opacity:.72;
}
.category-card-copy strong{
  display:block;
  font:600 clamp(31px,3.2vw,50px)/.96 "Cormorant Garamond",serif;
}
.premium-category-all .category-card-copy strong{
  font-size:clamp(52px,6vw,84px);
}
.category-card-copy em{
  display:block;
  max-width:330px;
  margin-top:11px;
  font-style:normal;
  font-size:11px;
  line-height:1.65;
  opacity:.74;
}
.category-card-arrow{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:2;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:16px;
  opacity:.65;
  transition:transform .3s ease,background .3s ease,color .3s ease;
}
.premium-category-card:hover .category-card-arrow{
  transform:rotate(45deg);
  background:#251a1e;
  color:#fff;
  border-color:#251a1e;
}
.premium-category-jewelry:hover .category-card-arrow,
.premium-category-all:hover .category-card-arrow{
  background:#fff;
  color:#251a1e;
  border-color:#fff;
}

/* WhatsApp */
.whatsapp-float-wrap{
  position:fixed;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(22px,env(safe-area-inset-bottom));
  z-index:1250;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  pointer-events:none;
}
.whatsapp-float{
  pointer-events:auto;
  min-width:58px;
  height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 19px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  background:#1f9d57;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  letter-spacing:.025em;
  box-shadow:0 16px 38px rgba(28,116,65,.3);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.whatsapp-float:hover{
  transform:translateY(-3px);
  background:#178b4b;
  box-shadow:0 22px 45px rgba(28,116,65,.38);
}
.whatsapp-float svg{
  width:27px;
  height:27px;
  flex:0 0 auto;
}
.whatsapp-float i{
  position:absolute;
  right:3px;
  top:3px;
  width:11px;
  height:11px;
  border:2px solid #fff;
  border-radius:50%;
  background:#72d694;
}
.whatsapp-helper{
  position:relative;
  width:245px;
  padding:17px 38px 17px 18px;
  border:1px solid rgba(71,42,50,.1);
  border-radius:18px 18px 4px 18px;
  background:rgba(255,252,252,.96);
  color:#2e2125;
  box-shadow:0 18px 48px rgba(47,28,34,.14);
  backdrop-filter:blur(16px);
  pointer-events:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .28s ease,visibility .28s ease,transform .28s ease;
}
.whatsapp-helper.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}
.whatsapp-helper strong{
  display:block;
  margin-bottom:4px;
  font:600 21px "Cormorant Garamond",serif;
}
.whatsapp-helper span{
  display:block;
  color:#7b6c71;
  font-size:11px;
  line-height:1.55;
}
.whatsapp-helper-close{
  position:absolute;
  top:8px;
  right:9px;
  width:25px;
  height:25px;
  border:0;
  border-radius:50%;
  background:#f4e8eb;
  color:#574047;
  cursor:pointer;
}
body.layer-open .whatsapp-float-wrap{
  opacity:0;
  pointer-events:none;
}

/* Mantener el botón fuera del contenido y debajo de modales */
.overlay{z-index:1300!important}
.drawer{z-index:1400!important}
.modal{z-index:1500!important}
.toast{z-index:1600!important}

@media(max-width:1050px){
  .premium-category-all{grid-column:span 6}
  .premium-category-makeup{grid-column:span 6}
  .premium-category-skin,
  .premium-category-hair,
  .premium-category-jewelry{grid-column:span 4}
}
@media(max-width:760px){
  .premium-categories{
    padding:68px 15px;
  }
  .premium-categories-heading{
    display:block;
    margin-bottom:28px;
  }
  .premium-categories-heading > p{
    margin-top:18px;
  }
  .premium-category-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:4px 3px 18px;
    scrollbar-width:none;
  }
  .premium-category-grid::-webkit-scrollbar{display:none}
  .premium-category-card,
  .premium-category-all{
    flex:0 0 min(82vw,330px);
    min-height:330px;
    grid-column:auto;
    grid-row:auto;
    scroll-snap-align:center;
  }
  .premium-category-all .category-card-copy strong{
    font-size:56px;
  }
}
@media(max-width:620px){
  .whatsapp-float-wrap{
    right:14px;
    bottom:15px;
  }
  .whatsapp-float{
    width:56px;
    min-width:56px;
    height:56px;
    padding:0;
    justify-content:center;
  }
  .whatsapp-float > span{
    display:none;
  }
  .whatsapp-helper{
    width:min(245px,calc(100vw - 30px));
  }
}
@media(prefers-reduced-motion:reduce){
  .premium-category-card,
  .category-card-arrow,
  .whatsapp-float,
  .whatsapp-helper{
    transition:none!important;
  }
}