@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/Bricolage-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/Bricolage-800.ttf") format("truetype");font-style:normal;font-weight:800;font-display:swap}

:root{
  --v4-bg:#220629;
  --v4-bg2:#35073f;
  --v4-magenta:#ff2d72;
  --v4-yellow:#ffc83d;
  --v4-cream:#fff3e7;
  --v4-white:#fffaf6;
  --v4-muted:#d8cbd8;
  --v4-card:#5b123d;
  --v4-line:rgba(255,255,255,.22);
  --v4-ease:cubic-bezier(.16,1,.3,1);
}

#inicio.hero-v4{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  display:none!important;
  isolation:isolate;
  background:
    linear-gradient(118deg,#16031c 0%,#24052c 46%,#3b0836 73%,#5a1537 100%)!important;
  color:var(--v4-white)!important;
}
#inicio.hero-v4.screen-active{display:block!important}

.hero-v4-bg{position:absolute;inset:0;overflow:hidden;z-index:-3;pointer-events:none}
.v4-ribbon{position:absolute;display:block;filter:saturate(1.05)}
.v4-ribbon-a{
  width:74vw;height:22vw;min-height:180px;
  left:-22vw;bottom:-5vw;
  background:linear-gradient(90deg,#7a0a54,#f32772 58%,#ffb52e 100%);
  transform:rotate(-6deg) skewX(-20deg);
  border-radius:0 60% 0 0/0 100% 0 0;
  opacity:.92;
}
.v4-ribbon-b{
  width:56vw;height:16vw;right:-11vw;top:20vh;
  background:linear-gradient(95deg,#ff9b24 0%,#ffbf3b 42%,#ff4e79 100%);
  transform:rotate(-10deg) skewX(-16deg);
  border-radius:55% 0 0 55%/100% 0 0 100%;
  opacity:.86;
}
.v4-ribbon-c{
  width:42vw;height:14vw;left:36vw;top:13vh;
  background:linear-gradient(90deg,#b20b5f,#f22972);
  transform:rotate(-12deg) skewX(-18deg);
  border-radius:50% 0 0 50%/100% 0 0 100%;
  opacity:.42;
}
#inicio.hero-v4:after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,0,12,.32) 0 34%,transparent 54%),
    radial-gradient(circle at 66% 43%,rgba(255,73,132,.18),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%,rgba(0,0,0,.18));
}

body.hero-mode .party-header{
  height:82px!important;
  padding:12px clamp(22px,4vw,72px)!important;
  background:linear-gradient(180deg,rgba(16,2,22,.64),rgba(16,2,22,.08))!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:40!important;
}
body.hero-mode .party-brand{
  display:flex!important;
  gap:12px!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:var(--v4-white)!important;
}
body.hero-mode .party-brand img{
  display:block!important;
  width:62px!important;height:62px!important;object-fit:contain!important;border-radius:50%!important;
  background:transparent!important;padding:0!important;box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
}
body.hero-mode .party-brand strong{
  color:var(--v4-white)!important;
  font-family:"Bricolage Grotesque",sans-serif!important;
  font-size:24px!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
body.hero-mode .party-brand strong::first-letter{color:inherit}
body.hero-mode .party-brand small{display:none!important}
body.hero-mode .party-brand span{display:flex!important;align-items:center!important}
.hero-v4-nav{display:none}
body.hero-mode .hero-v4-nav{
  margin-left:auto;margin-right:28px;
  display:flex;align-items:center;gap:28px;
}
.hero-v4-nav button{
  position:relative;border:0;background:transparent;color:rgba(255,255,255,.86);
  font:700 14px/1 Manrope,sans-serif;padding:12px 2px;cursor:pointer;
  transition:color .2s ease,transform .2s var(--v4-ease);
}
.hero-v4-nav button:hover{color:#fff;transform:translateY(-1px)}
.hero-v4-nav button[data-target="inicio"]::after{
  content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;background:var(--v4-yellow);border-radius:3px;
}
body.hero-mode .menu-toggle{
  width:48px!important;height:48px!important;border-radius:14px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(28,7,35,.48)!important;
  box-shadow:none!important;
}
body.hero-mode .menu-toggle span{background:#fff!important}
body.hero-mode .whatsapp-float{display:flex!important}

.hero-v4-shell{
  width:min(1540px,100%);
  height:100dvh;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(390px,.8fr) minmax(650px,1.2fr);
  align-items:center;
  gap:clamp(20px,2.7vw,52px);
  padding:100px clamp(28px,4.8vw,82px) 30px;
}

.hero-v4-copy{
  position:relative;z-index:10;
  align-self:center;
  padding-left:clamp(2px,1.8vw,28px);
  margin-top:-2vh;
}
.hero-v4-copy h1{
  margin:0;
  max-width:650px;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(68px,6.6vw,108px);
  line-height:.87;
  letter-spacing:-.055em;
  font-weight:800;
  color:var(--v4-cream);
  text-wrap:balance;
  text-shadow:0 8px 30px rgba(0,0,0,.16);
}
.hero-v4-copy h1 span{color:var(--v4-magenta)}
.hero-v4-copy p{
  margin:22px 0 0;
  max-width:390px;
  color:rgba(255,255,255,.72);
  font:500 clamp(15px,1.15vw,18px)/1.45 Manrope,sans-serif;
}
.hero-v4-actions{display:flex;gap:12px;align-items:center;margin-top:26px}
.hero-v4-cta{
  height:56px;
  border-radius:16px;
  padding:0 24px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:800 14px/1 Manrope,sans-serif;
  cursor:pointer;
  transition:transform .18s var(--v4-ease),box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.hero-v4-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-v4-cta:hover{transform:translateY(-3px)}
.hero-v4-cta:active{transform:translateY(0) scale(.98)}
.hero-v4-primary{
  min-width:178px;
  border:0;
  background:var(--v4-yellow);
  color:#261127;
  box-shadow:0 12px 30px rgba(255,200,61,.19);
}
.hero-v4-secondary{
  min-width:180px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(31,7,38,.34);
  color:#fff;
}
.hero-v4-secondary:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.7)}

.hero-v4-stage{
  position:relative;
  height:min(73dvh,690px);
  min-height:520px;
  align-self:center;
  --accent:#1768ff;
  --accent-rgb:23,104,255;
  perspective:1200px;
}
.hero-v4-halo{
  position:absolute;z-index:0;
  left:11%;right:5%;top:7%;bottom:14%;
  background:
    radial-gradient(ellipse at 54% 45%,rgba(var(--accent-rgb),.31),transparent 52%),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  filter:blur(4px);
  opacity:.9;
  transition:background .55s ease;
}
.hero-v4-platform{
  position:absolute;z-index:1;
  left:7%;right:1%;bottom:5%;
  height:34%;
  border-radius:50%;
  transform:rotateX(65deg) translateZ(-5px);
  background:
    radial-gradient(ellipse at 50% 34%,rgba(255,255,255,.2),transparent 52%),
    linear-gradient(180deg,#a71960 0%,#6e103f 48%,#340a2d 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 24px 50px rgba(0,0,0,.38),
    0 -2px 18px rgba(255,83,139,.26) inset,
    0 0 48px rgba(var(--accent-rgb),.14);
  transition:box-shadow .55s ease,filter .55s ease;
}
.v4-platform-edge{
  position:absolute;left:7%;right:7%;bottom:-12%;height:18%;
  border-radius:50%;
  background:linear-gradient(180deg,#6c0d40,#2a071f);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.hero-v4-products{position:absolute;inset:0;z-index:5}
.hero-v4-product{
  position:absolute;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:
    transform .52s var(--v4-ease),
    opacity .38s ease,
    filter .42s ease;
  transform-origin:center bottom;
  will-change:transform,opacity;
}
.hero-v4-product img{
  width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.35));
}
.hero-v4-product.is-active{
  z-index:8;
  left:30%;top:5%;
  width:47%;height:69%;
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,100px) rotate(-3deg) scale(1);
  filter:saturate(1.04);
}
.hero-v4-product.is-prev{
  z-index:4;
  left:8%;top:18%;
  width:29%;height:51%;
  opacity:.94;
  pointer-events:auto;
  transform:translate3d(-4px,8px,-40px) rotate(-7deg) scale(.92);
  filter:saturate(.95) brightness(.92);
}
.hero-v4-product.is-next{
  z-index:4;
  right:1%;top:15%;
  width:29%;height:51%;
  opacity:.9;
  pointer-events:auto;
  transform:translate3d(4px,6px,-60px) rotate(6deg) scale(.9);
  filter:saturate(.92) brightness(.9);
}
.hero-v4-product.is-far-left{
  z-index:2;
  left:-4%;top:28%;
  width:22%;height:40%;
  opacity:.28;
  transform:translate3d(-30px,10px,-120px) rotate(-11deg) scale(.82);
  filter:blur(1.2px) saturate(.7);
}
.hero-v4-product.is-far-right{
  z-index:2;
  right:-11%;top:26%;
  width:22%;height:40%;
  opacity:.25;
  transform:translate3d(30px,10px,-140px) rotate(11deg) scale(.78);
  filter:blur(1.4px) saturate(.68);
}

.hero-v4-effects{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}
.v4-effect{position:absolute;inset:0;opacity:0;transition:opacity .28s ease}
.v4-effect.is-active{opacity:1}

/* OREO */
.v4-cookie{
  position:absolute;width:62px;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at center,#f6efe5 0 26%,#27171a 27% 36%,#0f0c0e 37% 100%);
  box-shadow:
    inset 0 0 0 4px #201419,
    inset 0 0 0 7px #090709,
    0 14px 24px rgba(0,0,0,.28);
}
.v4-cookie::before,.v4-cookie::after{
  content:"";position:absolute;inset:13%;border:1px dashed rgba(255,255,255,.16);border-radius:50%;
}
.v4-effect-oreo .c1{left:25%;top:9%;transform:rotate(-18deg) scale(.85)}
.v4-effect-oreo .c2{right:7%;top:11%;transform:rotate(15deg) scale(.68)}
.v4-effect-oreo .c3{right:17%;bottom:16%;transform:rotate(-8deg) scale(1.05)}
.v4-crumb{position:absolute;width:10px;height:9px;background:#1a1114;border-radius:2px;transform:rotate(25deg);box-shadow:0 4px 8px rgba(0,0,0,.28)}
.v4-effect-oreo .cr1{left:31%;bottom:20%}.v4-effect-oreo .cr2{right:27%;top:20%;transform:scale(.7) rotate(60deg)}.v4-effect-oreo .cr3{right:10%;bottom:27%;transform:scale(.6) rotate(-15deg)}
.v4-milk-splash{
  position:absolute;width:46px;height:20px;background:#fff8ee;border-radius:58% 42% 62% 38%/63% 37% 63% 37%;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.08));
}
.v4-effect-oreo .ms1{left:38%;bottom:25%;transform:rotate(-20deg) scale(.75)}
.v4-effect-oreo .ms2{right:29%;top:25%;transform:rotate(28deg) scale(.5)}

/* BON BON BUM */
.v4-lollipop{position:absolute;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a8d,#ee163e 58%,#a60b27);box-shadow:0 10px 24px rgba(0,0,0,.23)}
.v4-lollipop::after{content:"";position:absolute;width:5px;height:74px;background:linear-gradient(#fff,#e8e1d8);left:50%;top:49px;transform-origin:top center;transform:rotate(-12deg);border-radius:4px}
.v4-effect-bonbon .l1{left:29%;top:7%;transform:rotate(-18deg) scale(.75)}
.v4-effect-bonbon .l2{right:8%;bottom:24%;transform:rotate(20deg) scale(.58)}
.v4-candy-shard{position:absolute;width:18px;height:8px;background:linear-gradient(90deg,#ff3159,#ff7289);clip-path:polygon(0 50%,24% 0,100% 20%,78% 100%,18% 86%)}
.v4-effect-bonbon .cs1{left:24%;bottom:24%;transform:rotate(15deg)}.v4-effect-bonbon .cs2{right:24%;top:15%;transform:rotate(62deg) scale(.75)}.v4-effect-bonbon .cs3{right:8%;top:37%;transform:rotate(-12deg) scale(.6)}

/* LAY'S */
.v4-chip{
  position:absolute;width:62px;height:40px;
  border-radius:52% 48% 60% 40%/60% 42% 58% 40%;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.46),transparent 28%),
    linear-gradient(135deg,#ffe67a,#efb92f 62%,#c98917);
  box-shadow:inset 0 -5px 8px rgba(139,85,0,.13),0 12px 22px rgba(0,0,0,.18);
}
.v4-effect-lays .ch1{left:22%;top:12%;transform:rotate(-27deg) scale(.76)}
.v4-effect-lays .ch2{right:11%;top:15%;transform:rotate(32deg) scale(.66)}
.v4-effect-lays .ch3{left:26%;bottom:20%;transform:rotate(11deg) scale(.9)}
.v4-effect-lays .ch4{right:22%;bottom:13%;transform:rotate(-18deg) scale(.62)}

/* FRUGELE */
.v4-gummy{
  position:absolute;width:44px;height:30px;border-radius:11px;
  background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,0) 35%),var(--g,#ff4b5c);
  box-shadow:inset 0 -6px 9px rgba(0,0,0,.14),0 10px 18px rgba(0,0,0,.16);
  opacity:.95;
}
.v4-effect-frugele .g1{--g:#ff4b5c;left:22%;top:12%;transform:rotate(-20deg) scale(.8)}
.v4-effect-frugele .g2{--g:#ffb32c;right:12%;top:17%;transform:rotate(30deg) scale(.7)}
.v4-effect-frugele .g3{--g:#58c44e;left:26%;bottom:18%;transform:rotate(12deg)}
.v4-effect-frugele .g4{--g:#f7529f;right:21%;bottom:15%;transform:rotate(-18deg) scale(.76)}
.v4-effect-frugele .g5{--g:#f6db39;right:4%;top:42%;transform:rotate(8deg) scale(.58)}

/* CHIZITOS */
.v4-cheeto{
  position:absolute;width:58px;height:20px;border-radius:999px;
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(180deg,#ffbb2f,#f47c0c 65%,#c64f00);
  box-shadow:inset 0 -4px 6px rgba(123,44,0,.15),0 10px 18px rgba(0,0,0,.16);
}
.v4-effect-chizitos .z1{left:21%;top:11%;transform:rotate(-37deg) scale(.8)}
.v4-effect-chizitos .z2{right:13%;top:15%;transform:rotate(24deg) scale(.68)}
.v4-effect-chizitos .z3{left:28%;bottom:19%;transform:rotate(17deg) scale(.9)}
.v4-effect-chizitos .z4{right:18%;bottom:14%;transform:rotate(-28deg) scale(.72)}
.v4-cheese-dust{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffae22;box-shadow:13px 7px 0 #ef7d0e,27px -4px 0 #ffbd31,39px 9px 0 #d95d05}
.v4-effect-chizitos .d1{left:33%;top:19%}.v4-effect-chizitos .d2{right:27%;bottom:23%;transform:scale(.7)}.v4-effect-chizitos .d3{right:11%;top:34%;transform:scale(.55)}

.v4-effect.is-active .v4-cookie,
.v4-effect.is-active .v4-lollipop,
.v4-effect.is-active .v4-chip,
.v4-effect.is-active .v4-gummy,
.v4-effect.is-active .v4-cheeto,
.v4-effect.is-active .v4-candy-shard,
.v4-effect.is-active .v4-crumb,
.v4-effect.is-active .v4-milk-splash,
.v4-effect.is-active .v4-cheese-dust{
  animation:v4-prop-in .48s var(--v4-ease) both;
}
.v4-effect.is-active > *:nth-child(2){animation-delay:.06s}
.v4-effect.is-active > *:nth-child(3){animation-delay:.1s}
.v4-effect.is-active > *:nth-child(4){animation-delay:.14s}
.v4-effect.is-active > *:nth-child(5){animation-delay:.18s}

.hero-v4-arrow{
  position:absolute;z-index:12;top:49%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(25,5,31,.58);
  display:grid;place-items:center;color:#fff;cursor:pointer;
  transition:transform .18s var(--v4-ease),background .18s ease,border-color .18s ease;
  backdrop-filter:blur(8px);
}
.hero-v4-arrow:hover{transform:translateY(-50%) scale(1.06);background:rgba(49,9,52,.78);border-color:rgba(255,255,255,.6)}
.hero-v4-arrow svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-v4-prev{left:2%}.hero-v4-next{right:1%}

.hero-v4-meta{
  position:absolute;z-index:14;
  left:30%;right:5%;bottom:1%;
  display:flex;align-items:center;justify-content:center;gap:18px;
  color:#fff;
}
.hero-v4-progress{display:flex;align-items:center;gap:12px;min-width:190px}
.hero-v4-number{font:700 14px/1 Manrope,sans-serif;color:rgba(255,255,255,.86);white-space:nowrap}
.hero-v4-dots{display:flex;gap:7px;align-items:center}
.hero-v4-dots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transform-origin:center;transition:transform .3s var(--v4-ease),background .3s ease}
.hero-v4-dots i.is-active{transform:scaleX(3);border-radius:999px;background:var(--v4-magenta);margin:0 6px}
.hero-v4-divider{width:1px;height:42px;background:rgba(255,255,255,.24)}
.hero-v4-product-copy{min-width:220px;display:flex;flex-direction:column;gap:3px}
.hero-v4-product-copy strong{font:800 16px/1.1 Manrope,sans-serif;color:#fff}
.hero-v4-product-copy span{font:500 12px/1.35 Manrope,sans-serif;color:rgba(255,255,255,.62)}

@keyframes v4-prop-in{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.78) rotate(0)}
  to{opacity:1}
}
@keyframes v4-copy-in{
  from{opacity:0;transform:translate3d(-28px,0,0)}
  to{opacity:1;transform:none}
}
@keyframes v4-stage-in{
  from{opacity:0;transform:translate3d(34px,0,0) scale(.97)}
  to{opacity:1;transform:none}
}
.hero-v4-copy{animation:v4-copy-in .58s var(--v4-ease) both}
.hero-v4-stage{animation:v4-stage-in .7s .08s var(--v4-ease) both}

@media(max-width:1100px){
  .hero-v4-shell{grid-template-columns:minmax(330px,.78fr) minmax(560px,1.22fr);padding-left:24px;padding-right:22px}
  .hero-v4-copy h1{font-size:clamp(60px,7vw,84px)}
  .hero-v4-nav{gap:18px;margin-right:18px}
  .hero-v4-nav button{font-size:13px}
  .hero-v4-stage{height:65dvh;min-height:500px}
}
@media(max-width:820px){
  body.hero-mode .hero-v4-nav{display:none!important}
}
@media(max-width:620px){
  #inicio.hero-v4{background:linear-gradient(180deg,#23052b 0%,#31062f 57%,#4b0a35 100%)!important}
  .v4-ribbon-a{width:128vw;height:38vw;left:-50vw;bottom:0;transform:rotate(-7deg) skewX(-18deg)}
  .v4-ribbon-b{width:88vw;height:28vw;right:-32vw;top:47vh;opacity:.7}
  .v4-ribbon-c{width:80vw;height:24vw;left:31vw;top:13vh;opacity:.28}

  body.hero-mode .party-header{height:66px!important;padding:7px 12px!important}
  body.hero-mode .party-brand img{width:48px!important;height:48px!important}
  body.hero-mode .party-brand strong{font-size:18px!important}
  body.hero-mode .menu-toggle{width:44px!important;height:44px!important;border-radius:12px!important}

  .hero-v4-shell{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    height:100dvh;
    padding:74px 12px 8px;
  }
  .hero-v4-copy{margin:0;padding:0 4px;z-index:15}
  .hero-v4-copy h1{
    font-size:clamp(46px,13.4vw,58px);
    line-height:.89;
    letter-spacing:-.05em;
    max-width:355px;
  }
  .hero-v4-copy p{
    margin-top:9px;
    max-width:325px;
    font-size:12px;
    line-height:1.35;
  }
  .hero-v4-actions{margin-top:12px;gap:8px}
  .hero-v4-cta{
    height:44px;
    min-width:0;
    flex:1;
    border-radius:12px;
    padding:0 10px;
    font-size:11px;
  }
  .hero-v4-cta svg{width:15px;height:15px}

  .hero-v4-stage{
    width:100%;
    height:auto;
    min-height:0;
    flex:1;
    margin-top:0;
  }
  .hero-v4-halo{left:4%;right:2%;top:1%;bottom:13%}
  .hero-v4-platform{
    left:-3%;right:-3%;bottom:3%;
    height:31%;
  }
  .hero-v4-product.is-active{
    left:19%;top:4%;
    width:63%;height:66%;
    transform:translate3d(0,0,80px) rotate(-3deg) scale(1);
  }
  .hero-v4-product.is-prev{
    left:-3%;top:19%;
    width:34%;height:48%;
    transform:translate3d(-12px,4px,-50px) rotate(-7deg) scale(.88);
  }
  .hero-v4-product.is-next{
    right:-4%;top:17%;
    width:34%;height:48%;
    transform:translate3d(12px,4px,-70px) rotate(7deg) scale(.86);
  }
  .hero-v4-product.is-far-left,.hero-v4-product.is-far-right{opacity:0;pointer-events:none}

  .hero-v4-arrow{width:38px;height:38px;top:48%;background:rgba(25,5,31,.58)}
  .hero-v4-arrow svg{width:18px;height:18px}
  .hero-v4-prev{left:1%}.hero-v4-next{right:1%}

  .hero-v4-meta{
    left:11%;right:8%;bottom:1%;
    gap:9px;
    justify-content:center;
  }
  .hero-v4-progress{min-width:auto;gap:7px}
  .hero-v4-number{font-size:10px}
  .hero-v4-dots{gap:4px}
  .hero-v4-dots i{width:5px;height:5px}
  .hero-v4-dots i.is-active{transform:scaleX(2.4);margin:0 3px}
  .hero-v4-divider{height:28px}
  .hero-v4-product-copy{min-width:130px}
  .hero-v4-product-copy strong{font-size:11px}
  .hero-v4-product-copy span{font-size:9px}

  .v4-cookie{width:42px}
  .v4-effect-oreo .c1{left:18%;top:8%}
  .v4-effect-oreo .c2{right:5%;top:13%}
  .v4-effect-oreo .c3{right:17%;bottom:16%;transform:rotate(-8deg) scale(.76)}
  .v4-lollipop{width:42px;height:42px}
  .v4-lollipop::after{height:52px;top:36px}
  .v4-chip{width:44px;height:28px}
  .v4-gummy{width:33px;height:22px}
  .v4-cheeto{width:42px;height:15px}
  body.hero-mode .whatsapp-float{
    width:50px!important;min-width:50px!important;height:50px!important;
    right:9px!important;bottom:9px!important;
  }
}
@media(max-width:370px){
  .hero-v4-copy h1{font-size:44px}
  .hero-v4-copy p{font-size:11px}
  .hero-v4-actions{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .hero-v4-copy,.hero-v4-stage,.v4-effect.is-active>*{animation:none!important}
  .hero-v4-product{transition:none!important}
}

/* v5 approved-direction correction: calmer carousel, no flying product pieces */
.hero-v4-effects{display:none!important}

/* keep the approved mockup proportions: product stage is a composed display, not a full-screen object */
.hero-v4-stage{
  height:min(68dvh,640px);
  min-height:500px;
}
.hero-v4-platform{
  left:10%;
  right:4%;
  bottom:5.5%;
  height:29%;
  background:
    radial-gradient(ellipse at 48% 28%,rgba(255,255,255,.16),transparent 48%),
    linear-gradient(180deg,#8d184f 0%,#5a0d39 52%,#2b0726 100%);
}
.hero-v4-product{
  transition:
    transform .58s var(--v4-ease),
    opacity .42s ease,
    filter .45s ease;
}
.hero-v4-product.is-active{
  left:32%;
  top:11%;
  width:39%;
  height:59%;
  transform:translate3d(0,0,85px) rotate(-2deg) scale(1);
}
.hero-v4-product.is-prev{
  left:9%;
  top:20%;
  width:25%;
  height:43%;
  opacity:.88;
  transform:translate3d(0,6px,-40px) rotate(-5deg) scale(.92);
}
.hero-v4-product.is-next{
  right:4%;
  top:20%;
  width:25%;
  height:43%;
  opacity:.86;
  transform:translate3d(0,6px,-50px) rotate(5deg) scale(.91);
}
.hero-v4-product.is-far-left{
  left:0;
  top:28%;
  width:18%;
  height:33%;
  opacity:.13;
  transform:translate3d(-8px,8px,-100px) rotate(-8deg) scale(.82);
  filter:saturate(.68) brightness(.75);
}
.hero-v4-product.is-far-right{
  right:-1%;
  top:28%;
  width:18%;
  height:33%;
  opacity:.12;
  transform:translate3d(8px,8px,-110px) rotate(8deg) scale(.8);
  filter:saturate(.66) brightness(.74);
}
.hero-v4-meta{
  left:33%;
  right:8%;
  bottom:1.5%;
}
.hero-v4-halo{
  left:18%;
  right:10%;
  top:15%;
  bottom:18%;
  opacity:.62;
  filter:blur(8px);
}
.v4-ribbon-b{opacity:.58}
.v4-ribbon-c{opacity:.25}

@media(max-width:620px){
  /* closer to the approved sketch: breathing room around one hero product */
  .hero-v4-shell{
    gap:4px;
    padding-top:72px;
  }
  .hero-v4-copy h1{
    font-size:clamp(43px,12.2vw,52px);
    line-height:.9;
    max-width:342px;
  }
  .hero-v4-copy p{
    margin-top:7px;
    max-width:310px;
  }
  .hero-v4-actions{
    margin-top:10px;
  }
  .hero-v4-stage{
    min-height:0;
    height:auto;
    flex:1;
    margin-top:2px;
  }
  .hero-v4-platform{
    left:8%;
    right:8%;
    bottom:6%;
    height:24%;
  }
  .hero-v4-halo{
    left:13%;
    right:13%;
    top:12%;
    bottom:20%;
    opacity:.52;
  }
  .hero-v4-product.is-active{
    left:24%;
    top:12%;
    width:52%;
    height:55%;
    transform:translate3d(0,0,70px) rotate(-2deg) scale(1);
  }
  .hero-v4-product.is-prev{
    left:2%;
    top:24%;
    width:27%;
    height:38%;
    opacity:.76;
    transform:translate3d(0,4px,-40px) rotate(-5deg) scale(.9);
  }
  .hero-v4-product.is-next{
    right:2%;
    top:24%;
    width:27%;
    height:38%;
    opacity:.74;
    transform:translate3d(0,4px,-45px) rotate(5deg) scale(.89);
  }
  .hero-v4-product.is-far-left,
  .hero-v4-product.is-far-right{
    opacity:0;
    pointer-events:none;
  }
  .hero-v4-arrow{
    top:48%;
    width:36px;
    height:36px;
  }
  .hero-v4-prev{left:3%}
  .hero-v4-next{right:3%}
  .hero-v4-meta{
    left:13%;
    right:10%;
    bottom:1.5%;
  }
  .v4-ribbon-a{
    width:118vw;
    height:30vw;
    left:-45vw;
    bottom:-2vw;
    opacity:.62;
  }
  .v4-ribbon-b{
    width:78vw;
    height:22vw;
    right:-31vw;
    top:48vh;
    opacity:.35;
  }
  .v4-ribbon-c{
    width:78vw;
    height:20vw;
    left:27vw;
    top:15vh;
    opacity:.18;
  }
}


/* v6 — approved hero, high-resolution product assets only */
.hero-v4-product img{
  image-rendering:auto;
  object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.34));
}
.hero-v4-stage{
  height:min(69dvh,650px);
  min-height:510px;
}
.hero-v4-platform{
  left:8%;
  right:2%;
  bottom:5%;
  height:30%;
}
.hero-v4-product[data-key="oreo"].is-active{
  left:27%;
  top:15%;
  width:49%;
  height:50%;
  transform:translate3d(0,0,90px) rotate(-2deg) scale(1);
}
.hero-v4-product:not([data-key="oreo"]).is-active{
  left:32%;
  top:7%;
  width:37%;
  height:64%;
  transform:translate3d(0,0,90px) rotate(-2deg) scale(1);
}
.hero-v4-product.is-prev{
  left:8%;
  top:18%;
  width:27%;
  height:48%;
}
.hero-v4-product.is-next{
  right:2%;
  top:17%;
  width:27%;
  height:49%;
}
.hero-v4-product[data-key="oreo"].is-prev,
.hero-v4-product[data-key="oreo"].is-next{
  width:30%;
  height:37%;
  top:24%;
}
.hero-v4-product.is-far-left,
.hero-v4-product.is-far-right{
  width:18%;
  height:32%;
  top:29%;
}
.hero-v4-meta{
  left:30%;
  right:5%;
  bottom:1%;
}

@media(max-width:620px){
  .hero-v4-stage{
    flex:1;
    min-height:0;
    height:auto;
  }
  .hero-v4-platform{
    left:7%;
    right:7%;
    bottom:5.5%;
    height:23%;
  }
  .hero-v4-product[data-key="oreo"].is-active{
    left:16%;
    top:18%;
    width:68%;
    height:43%;
    transform:translate3d(0,0,70px) rotate(-2deg) scale(1);
  }
  .hero-v4-product:not([data-key="oreo"]).is-active{
    left:25%;
    top:9%;
    width:50%;
    height:58%;
    transform:translate3d(0,0,70px) rotate(-2deg) scale(1);
  }
  .hero-v4-product.is-prev{
    left:1%;
    top:24%;
    width:28%;
    height:38%;
    opacity:.68;
  }
  .hero-v4-product.is-next{
    right:1%;
    top:24%;
    width:28%;
    height:38%;
    opacity:.68;
  }
  .hero-v4-product[data-key="oreo"].is-prev,
  .hero-v4-product[data-key="oreo"].is-next{
    top:30%;
    width:30%;
    height:27%;
  }
  .hero-v4-product.is-far-left,
  .hero-v4-product.is-far-right{
    opacity:0;
  }
  .hero-v4-meta{
    left:12%;
    right:9%;
    bottom:1%;
  }
}

/* v7 — confectionery background: product-related, no generic ribbons */
.hero-v4-bg.sweet-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-3;
  background:
    radial-gradient(circle at 67% 46%,rgba(255,45,114,.12),transparent 31%),
    radial-gradient(circle at 25% 86%,rgba(255,177,42,.09),transparent 25%),
    linear-gradient(118deg,#16031c 0%,#24052c 46%,#3a0837 74%,#541237 100%);
}
.hero-v4-bg.sweet-bg::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.2;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.16) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 68%,rgba(255,255,255,.12) 0 1px,transparent 1.5px);
  background-size:34px 34px,46px 46px;
  mask-image:linear-gradient(90deg,transparent 4%,#000 25%,#000 88%,transparent);
}
.hero-v4-bg.sweet-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 72% 52%,transparent 0 28%,rgba(8,0,12,.12) 66%,rgba(8,0,12,.3) 100%),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 28%,rgba(0,0,0,.18));
}
.sweet-layer{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .65s ease;
  overflow:hidden;
  pointer-events:none;
}
#inicio[data-product="oreo"] .sweet-oreo,
#inicio[data-product="bonbon"] .sweet-bonbon,
#inicio[data-product="lays"] .sweet-lays,
#inicio[data-product="frugele"] .sweet-frugele{opacity:1}

/* Oreo — cocoa cookie emboss + cream */
.sweet-oreo::before{
  content:"";
  position:absolute;
  width:52vw;height:52vw;
  right:-10vw;top:5vh;
  border-radius:50%;
  background:radial-gradient(circle at 38% 38%,rgba(53,117,255,.18),rgba(12,37,99,.08) 36%,transparent 66%);
  filter:blur(2px);
}
.sweet-cookie{
  position:absolute;
  width:240px;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 21%,rgba(255,255,255,.035) 22% 23%,transparent 24% 37%,rgba(255,255,255,.035) 38% 39%,transparent 40%),
    repeating-conic-gradient(from 5deg,rgba(255,255,255,.045) 0 5deg,transparent 5deg 14deg),
    radial-gradient(circle at 42% 38%,#2f1d20 0,#160e10 55%,#090608 100%);
  box-shadow:
    inset 0 0 0 8px rgba(0,0,0,.25),
    inset 0 0 28px rgba(0,0,0,.6),
    0 34px 70px rgba(0,0,0,.18);
  opacity:.3;
  filter:blur(.35px);
}
.sweet-cookie.cookie-a{right:6%;top:11%;transform:rotate(-18deg) scale(1.28)}
.sweet-cookie.cookie-b{right:28%;bottom:-8%;transform:rotate(13deg) scale(.9);opacity:.2}
.sweet-cookie.cookie-c{left:43%;top:23%;transform:rotate(7deg) scale(.55);opacity:.12}
.sweet-cream{
  position:absolute;
  width:28vw;height:12vw;
  min-width:300px;min-height:120px;
  right:10%;bottom:8%;
  border-radius:50%;
  background:radial-gradient(ellipse,#fff8ed 0,rgba(255,248,237,.5) 24%,rgba(255,248,237,.08) 58%,transparent 72%);
  opacity:.22;
  filter:blur(12px);
}

/* Bon Bon Bum — glossy hard candy / lollipop */
.sweet-bonbon::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 77% 43%,rgba(255,28,76,.3),transparent 25%),
    radial-gradient(circle at 58% 70%,rgba(255,103,129,.12),transparent 22%);
}
.sweet-candy{
  position:absolute;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 23%,rgba(255,255,255,.62) 0 4%,rgba(255,255,255,.18) 5% 12%,transparent 13%),
    radial-gradient(circle at 42% 38%,#ff4a66 0,#df1238 48%,#8e0825 100%);
  box-shadow:
    inset -18px -22px 28px rgba(93,0,24,.28),
    inset 12px 10px 20px rgba(255,255,255,.08),
    0 30px 80px rgba(147,0,40,.26);
  opacity:.34;
}
.sweet-candy.candy-a{width:280px;height:280px;right:5%;top:14%;transform:scale(1.1)}
.sweet-candy.candy-b{width:150px;height:150px;left:48%;bottom:3%;opacity:.18}
.sweet-lollipop-stick{
  position:absolute;
  width:22px;height:58vh;
  right:13%;top:39%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.52) 48%,rgba(255,255,255,.1));
  transform:rotate(23deg);
  transform-origin:top center;
  opacity:.18;
  filter:blur(.4px);
}

/* Lay's — actual potato-chip silhouettes */
.sweet-lays::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 73% 47%,rgba(255,193,35,.25),transparent 30%);
}
.sweet-chip{
  position:absolute;
  width:210px;height:135px;
  border-radius:53% 47% 58% 42%/59% 43% 57% 41%;
  background:
    radial-gradient(circle at 35% 27%,rgba(255,255,255,.46),transparent 23%),
    linear-gradient(145deg,#ffe889,#efbd39 58%,#c77c12);
  box-shadow:
    inset 0 -14px 24px rgba(119,68,0,.14),
    0 32px 55px rgba(103,58,0,.12);
  opacity:.2;
  filter:blur(.3px);
}
.sweet-chip.chip-a{right:2%;top:14%;transform:rotate(29deg) scale(1.15)}
.sweet-chip.chip-b{right:29%;bottom:4%;transform:rotate(-18deg) scale(.82);opacity:.15}
.sweet-chip.chip-c{left:44%;top:25%;transform:rotate(9deg) scale(.48);opacity:.1}

/* Frugelé — translucent gummy pieces, not balloons */
.sweet-frugele::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 42%,rgba(255,80,114,.18),transparent 24%),
    radial-gradient(circle at 86% 68%,rgba(94,208,101,.11),transparent 20%);
}
.sweet-gummy{
  position:absolute;
  width:150px;height:110px;
  border-radius:28% 36% 31% 39%/34% 29% 41% 35%;
  box-shadow:
    inset 10px 10px 18px rgba(255,255,255,.28),
    inset -14px -18px 24px rgba(70,0,20,.12),
    0 28px 65px rgba(0,0,0,.12);
  backdrop-filter:blur(2px);
  opacity:.2;
}
.sweet-gummy.gummy-a{right:7%;top:13%;background:linear-gradient(145deg,#ff667e,#d81c48);transform:rotate(19deg) scale(1.15)}
.sweet-gummy.gummy-b{right:27%;bottom:7%;background:linear-gradient(145deg,#ffdf5a,#f1a727);transform:rotate(-17deg) scale(.85);opacity:.14}
.sweet-gummy.gummy-c{left:47%;top:26%;background:linear-gradient(145deg,#7ee381,#34a74e);transform:rotate(10deg) scale(.58);opacity:.12}
.sweet-gummy.gummy-d{right:0;bottom:27%;background:linear-gradient(145deg,#b689ff,#7a45cc);transform:rotate(-9deg) scale(.48);opacity:.1}

/* Social brands: use actual brand artwork, no generic white icon cards */
.social-brand,
.corner-menu .menu-socials span{
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.social-brand img,
.corner-menu .menu-socials img{
  width:24px!important;
  height:24px!important;
  object-fit:contain!important;
  display:block!important;
}

/* remove all old ribbon visuals completely */
.v4-ribbon{display:none!important}

@media(max-width:620px){
  .hero-v4-bg.sweet-bg::before{opacity:.13;background-size:30px 30px,40px 40px}
  .sweet-cookie{width:145px}
  .sweet-cookie.cookie-a{right:-10%;top:48%;transform:rotate(-16deg) scale(1.05);opacity:.22}
  .sweet-cookie.cookie-b{right:42%;bottom:-4%;transform:rotate(13deg) scale(.58);opacity:.12}
  .sweet-cookie.cookie-c{display:none}
  .sweet-cream{right:-8%;bottom:4%;min-width:220px;min-height:90px;opacity:.14}
  .sweet-candy.candy-a{width:180px;height:180px;right:-11%;top:47%;opacity:.25}
  .sweet-candy.candy-b{width:95px;height:95px;left:2%;bottom:5%;opacity:.11}
  .sweet-lollipop-stick{height:42vh;right:7%;top:60%;opacity:.12}
  .sweet-chip{width:125px;height:82px}
  .sweet-chip.chip-a{right:-9%;top:48%;opacity:.19}
  .sweet-chip.chip-b{right:48%;bottom:0;opacity:.1}
  .sweet-chip.chip-c{display:none}
  .sweet-gummy{width:100px;height:74px}
  .sweet-gummy.gummy-a{right:-8%;top:47%;opacity:.18}
  .sweet-gummy.gummy-b{right:52%;bottom:0;opacity:.11}
  .sweet-gummy.gummy-c,.sweet-gummy.gummy-d{display:none}
  .social-brand img,.corner-menu .menu-socials img{width:26px!important;height:26px!important}
}


/* v8 — approved hero, strict two-color matte background */
:root{
  --v8-deep:#220619;
  --v8-matte:#B9786B;
}

#inicio.hero-v4{
  background:var(--v8-deep)!important;
}

.hero-v4-bg.sweet-bg{
  background:
    linear-gradient(118deg,
      var(--v8-deep) 0%,
      var(--v8-deep) 58%,
      var(--v8-matte) 100%)!important;
}

/* no circles, no floating sweets, no decorative blobs */
.hero-v4-bg.sweet-bg::before{
  content:""!important;
  position:absolute!important;
  top:-18%!important;
  right:-19%!important;
  width:62%!important;
  height:145%!important;
  border-radius:0!important;
  background:var(--v8-matte)!important;
  opacity:.16!important;
  transform:skewX(-18deg)!important;
  filter:none!important;
  mask-image:none!important;
}

.hero-v4-bg.sweet-bg::after{
  content:""!important;
  position:absolute!important;
  left:-18%!important;
  bottom:-24%!important;
  width:62%!important;
  height:46%!important;
  border-radius:0!important;
  background:var(--v8-matte)!important;
  opacity:.11!important;
  transform:rotate(-7deg) skewX(-14deg)!important;
  filter:none!important;
}

.sweet-layer,
.sweet-cookie,
.sweet-cream,
.sweet-candy,
.sweet-lollipop-stick,
.sweet-chip,
.sweet-gummy,
.v4-ribbon{
  display:none!important;
}

.hero-v4-halo{
  opacity:.16!important;
  filter:blur(18px)!important;
  background:linear-gradient(180deg,transparent,rgba(185,120,107,.12))!important;
}

.hero-v4-platform{
  background:
    linear-gradient(180deg,
      rgba(185,120,107,.88) 0%,
      rgba(34,6,25,.96) 100%)!important;
  border-color:rgba(185,120,107,.34)!important;
  box-shadow:
    0 24px 48px rgba(0,0,0,.34),
    0 -1px 0 rgba(185,120,107,.28) inset!important;
}

.v4-platform-edge{
  background:var(--v8-deep)!important;
  opacity:.96!important;
}

@media(max-width:620px){
  .hero-v4-bg.sweet-bg{
    background:
      linear-gradient(122deg,
        var(--v8-deep) 0%,
        var(--v8-deep) 66%,
        var(--v8-matte) 100%)!important;
  }

  .hero-v4-bg.sweet-bg::before{
    top:-16%!important;
    right:-34%!important;
    width:78%!important;
    height:142%!important;
    opacity:.13!important;
    transform:skewX(-14deg)!important;
  }

  .hero-v4-bg.sweet-bg::after{
    left:-28%!important;
    bottom:-18%!important;
    width:86%!important;
    height:34%!important;
    opacity:.08!important;
  }
}


/* final v8 simplification: absolutely no decorative shapes in the background */
.hero-v4-bg.sweet-bg{
  background:linear-gradient(122deg,var(--v8-deep) 0%,var(--v8-deep) 56%,var(--v8-matte) 100%)!important;
}
.hero-v4-bg.sweet-bg::before,
.hero-v4-bg.sweet-bg::after{
  content:none!important;
  display:none!important;
}
@media(max-width:620px){
  .hero-v4-bg.sweet-bg{
    background:linear-gradient(126deg,var(--v8-deep) 0%,var(--v8-deep) 64%,var(--v8-matte) 100%)!important;
  }
}

/* =========================================================
   HERO V9 — APPROVED COFFEE / OREO DIRECTION
   Uses the approved four product assets and the real Oreo
   cookie artwork extracted from the approved Oreo product.
   No circles, ribbons, candy blobs or new visual concepts.
   ========================================================= */

:root{
  --v9-coffee:#1b090c;
  --v9-wine:#351116;
  --v9-cocoa:#5a281f;
  --v9-cream:#fff3e7;
  --v9-peach:#f5b094;
}

#inicio.hero-v4{
  background:var(--v9-coffee)!important;
  isolation:isolate;
}

#inicio .hero-v4-bg.sweet-bg{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  overflow:hidden!important;
  background:
    linear-gradient(108deg,#16070a 0%,#260b10 39%,#4d201b 72%,#6c3528 100%)!important;
}

#inicio .hero-v4-bg.sweet-bg::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  width:min(55vw,820px)!important;
  aspect-ratio:1!important;
  top:-6%!important;
  right:-14%!important;
  background:url("assets/hero-bg/oreo-cookie-feather.webp") center/contain no-repeat!important;
  opacity:.30!important;
  transform:rotate(3deg) scale(1.04)!important;
  filter:sepia(.2) saturate(.72) contrast(1.08)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  pointer-events:none!important;
}

#inicio .hero-v4-bg.sweet-bg::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(20,5,8,.94) 0%,rgba(23,6,9,.84) 31%,rgba(28,7,10,.18) 57%,rgba(16,4,7,.04) 100%),
    linear-gradient(180deg,rgba(8,2,3,.18),transparent 36%,rgba(18,5,6,.42) 100%)!important;
  pointer-events:none!important;
}

#inicio .sweet-layer,
#inicio .sweet-cookie,
#inicio .sweet-cream,
#inicio .sweet-candy,
#inicio .sweet-lollipop-stick,
#inicio .sweet-chip,
#inicio .sweet-gummy,
#inicio .v4-ribbon{
  display:none!important;
}

/* Layout follows the approved reference: copy left, products right. */
#inicio .hero-v4-shell{
  width:min(1500px,100%)!important;
  grid-template-columns:minmax(470px,.9fr) minmax(640px,1.1fr)!important;
  gap:clamp(18px,3vw,52px)!important;
  padding:102px clamp(42px,5.3vw,86px) 24px!important;
}

#inicio .hero-v4-copy{
  padding-left:0!important;
  margin-top:-1vh!important;
}

#inicio .hero-v4-copy h1{
  max-width:650px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(70px,6.2vw,102px)!important;
  line-height:.91!important;
  letter-spacing:-.045em!important;
  font-weight:500!important;
  color:var(--v9-cream)!important;
  text-shadow:0 8px 34px rgba(0,0,0,.22)!important;
}

#inicio .hero-v4-copy h1 span{
  color:var(--v9-cream)!important;
}

#inicio .hero-v4-copy p{
  margin-top:22px!important;
  max-width:500px!important;
  color:rgba(255,243,231,.76)!important;
  font:400 clamp(16px,1.18vw,19px)/1.5 Manrope,sans-serif!important;
}

#inicio .hero-v4-actions{
  margin-top:28px!important;
  gap:14px!important;
}

#inicio .hero-v4-cta{
  height:58px!important;
  border-radius:999px!important;
  padding:0 30px!important;
  font:800 14px/1 Manrope,sans-serif!important;
}

#inicio .hero-v4-primary{
  min-width:194px!important;
  background:var(--v9-peach)!important;
  color:#241013!important;
  box-shadow:0 14px 34px rgba(245,176,148,.14)!important;
}

#inicio .hero-v4-secondary{
  min-width:198px!important;
  border:1px solid rgba(255,237,225,.66)!important;
  background:rgba(33,10,13,.24)!important;
  color:var(--v9-cream)!important;
  backdrop-filter:blur(7px)!important;
}

/* Product stage: no podium. Products rest directly in the scene. */
#inicio .hero-v4-stage{
  height:min(76dvh,720px)!important;
  min-height:540px!important;
  perspective:none!important;
}

#inicio .hero-v4-halo,
#inicio .hero-v4-platform{
  display:none!important;
}

#inicio .hero-v4-stage::before{
  content:none;
  position:absolute;
  display:none;
}

#inicio .hero-v4-stage::after{
  content:"";
  position:absolute;
  z-index:2;
  left:9%;
  right:2%;
  bottom:11%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(247,185,153,.38),rgba(247,185,153,.18),transparent);
  box-shadow:0 28px 42px 16px rgba(0,0,0,.36);
  pointer-events:none;
}

#inicio .hero-v4-product img{
  filter:drop-shadow(0 28px 26px rgba(0,0,0,.42))!important;
}

#inicio .hero-v4-product.is-active{
  left:25%!important;
  top:2%!important;
  width:53%!important;
  height:79%!important;
  transform:translate3d(0,0,0) rotate(-1.5deg) scale(1)!important;
  filter:saturate(1.03) contrast(1.02)!important;
}

#inicio .hero-v4-product.is-prev{
  left:0!important;
  top:21%!important;
  width:32%!important;
  height:55%!important;
  opacity:.96!important;
  transform:translate3d(0,0,0) rotate(-5deg) scale(.94)!important;
  filter:saturate(.96) brightness(.9)!important;
}

#inicio .hero-v4-product.is-next{
  right:-2%!important;
  top:18%!important;
  width:33%!important;
  height:56%!important;
  opacity:.94!important;
  transform:translate3d(0,0,0) rotate(4deg) scale(.92)!important;
  filter:saturate(.94) brightness(.92)!important;
}

#inicio .hero-v4-product.is-far-left{
  left:-6%!important;
  top:31%!important;
  width:22%!important;
  height:42%!important;
  opacity:.58!important;
  transform:rotate(-7deg) scale(.85)!important;
  filter:brightness(.78) saturate(.78)!important;
}

#inicio .hero-v4-product.is-far-right{
  right:-14%!important;
  top:29%!important;
  width:23%!important;
  height:43%!important;
  opacity:.58!important;
  transform:rotate(7deg) scale(.84)!important;
  filter:brightness(.8) saturate(.8)!important;
}

#inicio .hero-v4-arrow{
  width:48px!important;
  height:48px!important;
  background:rgba(25,7,10,.46)!important;
  border:1px solid rgba(255,239,227,.42)!important;
  backdrop-filter:blur(8px)!important;
}

#inicio .hero-v4-meta{
  left:25%!important;
  right:2%!important;
  bottom:1.5%!important;
}

#inicio .hero-v4-dots i.is-active{
  background:var(--v9-peach)!important;
}

@media(max-width:1100px) and (min-width:621px){
  #inicio .hero-v4-shell{
    grid-template-columns:minmax(380px,.82fr) minmax(530px,1.18fr)!important;
    padding-left:30px!important;
    padding-right:28px!important;
  }
  #inicio .hero-v4-copy h1{font-size:clamp(62px,6.9vw,82px)!important}
}

/* Mobile follows the same approved composition, not a separate redesign. */
@media(max-width:620px){
  #inicio.hero-v4{
    background:#1b090c!important;
  }

  #inicio .hero-v4-bg.sweet-bg{
    background:
      linear-gradient(180deg,#16070a 0%,#2d0d12 47%,#5b291f 100%)!important;
  }

  #inicio .hero-v4-bg.sweet-bg::before{
    width:98vw!important;
    top:28%!important;
    right:-44vw!important;
    opacity:.23!important;
    transform:rotate(12deg) scale(1.06)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }

  #inicio .hero-v4-bg.sweet-bg::after{
    background:
      linear-gradient(180deg,rgba(17,4,7,.58) 0%,rgba(20,5,8,.30) 33%,rgba(19,5,7,.10) 61%,rgba(18,5,7,.46) 100%)!important;
  }

  #inicio .hero-v4-shell{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:76px 14px 8px!important;
  }

  #inicio .hero-v4-copy{
    padding:0 12px!important;
    margin:0!important;
    flex:0 0 auto!important;
  }

  #inicio .hero-v4-copy h1{
    max-width:350px!important;
    font-size:clamp(48px,13.2vw,58px)!important;
    line-height:.9!important;
    letter-spacing:-.045em!important;
  }

  #inicio .hero-v4-copy p{
    margin-top:10px!important;
    max-width:330px!important;
    font-size:12px!important;
    line-height:1.38!important;
  }

  #inicio .hero-v4-actions{
    margin-top:14px!important;
    gap:8px!important;
  }

  #inicio .hero-v4-cta{
    height:46px!important;
    flex:1!important;
    min-width:0!important;
    padding:0 12px!important;
    font-size:11px!important;
    border-radius:999px!important;
  }

  #inicio .hero-v4-stage{
    width:100%!important;
    flex:1!important;
    min-height:0!important;
    height:auto!important;
    margin-top:2px!important;
  }

  #inicio .hero-v4-stage::before{
    left:-8%!important;
    right:-8%!important;
    bottom:6%!important;
    height:22%!important;
    opacity:.7!important;
  }

  #inicio .hero-v4-stage::after{
    left:7%!important;
    right:7%!important;
    bottom:8%!important;
  }

  #inicio .hero-v4-product.is-active{
    left:16%!important;
    top:2%!important;
    width:68%!important;
    height:74%!important;
    transform:rotate(-1deg)!important;
  }

  #inicio .hero-v4-product.is-prev{
    left:-5%!important;
    top:25%!important;
    width:35%!important;
    height:48%!important;
    transform:rotate(-5deg) scale(.9)!important;
  }

  #inicio .hero-v4-product.is-next{
    right:-5%!important;
    top:23%!important;
    width:35%!important;
    height:49%!important;
    transform:rotate(5deg) scale(.89)!important;
  }

  #inicio .hero-v4-product.is-far-left,
  #inicio .hero-v4-product.is-far-right{
    opacity:0!important;
    pointer-events:none!important;
  }

  #inicio .hero-v4-arrow{
    width:38px!important;
    height:38px!important;
    top:48%!important;
  }

  #inicio .hero-v4-prev{left:0!important}
  #inicio .hero-v4-next{right:0!important}

  #inicio .hero-v4-meta{
    left:9%!important;
    right:8%!important;
    bottom:0!important;
    gap:12px!important;
    justify-content:flex-start!important;
  }

  #inicio .hero-v4-progress{min-width:118px!important;gap:8px!important}
  #inicio .hero-v4-number{font-size:11px!important}
  #inicio .hero-v4-product-copy{min-width:0!important}
  #inicio .hero-v4-product-copy strong{font-size:13px!important}
  #inicio .hero-v4-product-copy span{font-size:10px!important}
}

/* =========================================================
   V10 — approved mobile composition
   Force this composition on real phones even if browser
   reports a desktop-sized layout viewport.
   ========================================================= */

html.hero-mobile-device body.hero-mode .hero-v4-nav{
  display:none!important;
}

html.hero-mobile-device body.hero-mode .party-header{
  height:72px!important;
  padding:8px 14px!important;
}

html.hero-mobile-device body.hero-mode .party-brand img{
  width:48px!important;
  height:48px!important;
}

html.hero-mobile-device body.hero-mode .party-brand strong{
  font-size:18px!important;
}

html.hero-mobile-device body.hero-mode .menu-toggle{
  width:44px!important;
  height:44px!important;
  border-radius:12px!important;
}

html.hero-mobile-device #inicio.hero-v4{
  background:#18080b!important;
}

html.hero-mobile-device #inicio .hero-v4-bg.sweet-bg{
  background:
    linear-gradient(180deg,#16070a 0%,#2a0d12 46%,#5c2a20 100%)!important;
}

html.hero-mobile-device #inicio .hero-v4-bg.sweet-bg::before{
  width:116vw!important;
  max-width:none!important;
  top:-2%!important;
  right:-54vw!important;
  opacity:.30!important;
  transform:rotate(4deg) scale(1.06)!important;
  filter:sepia(.18) saturate(.68) contrast(1.06)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

html.hero-mobile-device #inicio .hero-v4-bg.sweet-bg::after{
  background:
    linear-gradient(180deg,rgba(15,4,6,.36) 0%,rgba(19,5,8,.16) 35%,rgba(20,6,8,.08) 62%,rgba(18,5,7,.46) 100%)!important;
}

html.hero-mobile-device #inicio .hero-v4-shell{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:100%!important;
  height:100dvh!important;
  padding:82px clamp(18px,6vw,58px) 12px!important;
}

html.hero-mobile-device #inicio .hero-v4-copy{
  width:min(100%,620px)!important;
  margin:0!important;
  padding:0!important;
  z-index:15!important;
  flex:0 0 auto!important;
}

html.hero-mobile-device #inicio .hero-v4-copy h1{
  max-width:610px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(50px,7.3vw,72px)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
  font-weight:500!important;
  color:#fff3e7!important;
}

html.hero-mobile-device #inicio .hero-v4-copy h1 span{
  color:#fff3e7!important;
}

html.hero-mobile-device #inicio .hero-v4-copy p{
  margin-top:10px!important;
  max-width:540px!important;
  font-size:clamp(13px,1.8vw,17px)!important;
  line-height:1.4!important;
  color:rgba(255,243,231,.72)!important;
}

html.hero-mobile-device #inicio .hero-v4-actions{
  width:min(100%,430px)!important;
  margin-top:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:9px!important;
}

html.hero-mobile-device #inicio .hero-v4-cta{
  width:100%!important;
  min-width:0!important;
  height:50px!important;
  border-radius:999px!important;
  font-size:13px!important;
  padding:0 20px!important;
}

html.hero-mobile-device #inicio .hero-v4-stage{
  width:100%!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  margin-top:8px!important;
  align-self:stretch!important;
}

html.hero-mobile-device #inicio .hero-v4-stage::before{
  content:none!important;
  display:none!important;
}

html.hero-mobile-device #inicio .hero-v4-stage::after{
  left:7%!important;
  right:7%!important;
  bottom:7%!important;
}

html.hero-mobile-device #inicio .hero-v4-product.is-active{
  left:20%!important;
  top:3%!important;
  width:60%!important;
  height:72%!important;
  transform:rotate(-1deg)!important;
}

html.hero-mobile-device #inicio .hero-v4-product.is-prev{
  left:-2%!important;
  top:24%!important;
  width:31%!important;
  height:47%!important;
  transform:rotate(-5deg) scale(.9)!important;
}

html.hero-mobile-device #inicio .hero-v4-product.is-next{
  right:-2%!important;
  top:22%!important;
  width:31%!important;
  height:48%!important;
  transform:rotate(5deg) scale(.9)!important;
}

html.hero-mobile-device #inicio .hero-v4-product.is-far-left,
html.hero-mobile-device #inicio .hero-v4-product.is-far-right{
  opacity:0!important;
  pointer-events:none!important;
}

html.hero-mobile-device #inicio .hero-v4-arrow{
  width:42px!important;
  height:42px!important;
  top:47%!important;
  background:rgba(23,7,9,.52)!important;
  border:1px solid rgba(255,239,227,.42)!important;
}

html.hero-mobile-device #inicio .hero-v4-prev{left:0!important}
html.hero-mobile-device #inicio .hero-v4-next{right:0!important}

html.hero-mobile-device #inicio .hero-v4-meta{
  left:5%!important;
  right:5%!important;
  bottom:0!important;
  justify-content:center!important;
  gap:12px!important;
}

html.hero-mobile-device #inicio .hero-v4-progress{
  min-width:118px!important;
  gap:8px!important;
}

html.hero-mobile-device #inicio .hero-v4-number{
  font-size:11px!important;
}

html.hero-mobile-device #inicio .hero-v4-product-copy{
  min-width:0!important;
}

html.hero-mobile-device #inicio .hero-v4-product-copy strong{
  font-size:13px!important;
}

html.hero-mobile-device #inicio .hero-v4-product-copy span{
  font-size:10px!important;
}

/* Normal narrow viewport uses the exact same approved phone composition. */
@media(max-width:700px){
  #inicio .hero-v4-actions{
    flex-direction:column!important;
    align-items:stretch!important;
    width:min(100%,330px)!important;
  }
  #inicio .hero-v4-cta{
    width:100%!important;
    flex:none!important;
  }
  #inicio .hero-v4-bg.sweet-bg::before{
    top:-2%!important;
    right:-54vw!important;
    width:116vw!important;
    opacity:.30!important;
  }
}

/* Mobile product boxes use width-driven heights.
   This prevents desktop-mode Android browsers from vertically centering
   products inside a huge desktop-height box. */
html.hero-mobile-device #inicio .hero-v4-product.is-active{
  top:2%!important;
  width:64%!important;
  height:clamp(230px,54vw,520px)!important;
}

html.hero-mobile-device #inicio .hero-v4-product.is-prev,
html.hero-mobile-device #inicio .hero-v4-product.is-next{
  top:14%!important;
  width:32%!important;
  height:clamp(165px,36vw,350px)!important;
}

@media(max-width:700px){
  #inicio .hero-v4-product.is-active{
    top:2%!important;
    width:64%!important;
    height:clamp(230px,60vw,290px)!important;
  }

  #inicio .hero-v4-product.is-prev,
  #inicio .hero-v4-product.is-next{
    top:16%!important;
    width:32%!important;
    height:clamp(160px,42vw,210px)!important;
  }
}

/* Match the approved phone crop: macro cookie remains a background,
   spanning the narrow screen behind the composition. */
html.hero-mobile-device #inicio .hero-v4-bg.sweet-bg::before{
  width:130vw!important;
  right:-24vw!important;
  top:-5%!important;
  opacity:.24!important;
}

html.hero-mobile-device #inicio .hero-v4-product.is-active{
  top:7%!important;
}

html.hero-mobile-device #inicio .hero-v4-product.is-prev,
html.hero-mobile-device #inicio .hero-v4-product.is-next{
  top:17%!important;
}

@media(max-width:700px){
  #inicio .hero-v4-bg.sweet-bg::before{
    width:130vw!important;
    right:-24vw!important;
    top:-5%!important;
    opacity:.24!important;
  }

  #inicio .hero-v4-product.is-active{top:7%!important}
  #inicio .hero-v4-product.is-prev,
  #inicio .hero-v4-product.is-next{top:17%!important}
}