:root{
  --pink:#E8185A;
  --pink-soft:#FF6B9D;
  --yellow:#FFD700;
  --ink:#1A1A1A;
  --muted:#70676A;
  --line:#F3DDE2;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#FFF9F8 0%,#FFF7F7 100%);
  overflow-x:hidden;
}

.scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.orb{position:absolute;border-radius:50%}
.orb-1{width:360px;height:360px;left:-170px;top:-110px;background:rgba(255,107,157,.18)}
.orb-2{width:295px;height:295px;right:-110px;top:-70px;background:rgba(255,107,157,.14)}
.orb-3{width:230px;height:230px;right:-95px;top:32%;background:rgba(255,107,157,.10)}
.orb-4{width:250px;height:250px;left:-130px;bottom:10%;background:rgba(255,107,157,.12)}
.orb-5{width:185px;height:185px;right:-70px;bottom:8%;background:rgba(232,24,90,.08)}
.orb-6{width:150px;height:150px;left:8%;top:21%;background:rgba(255,215,0,.045)}

.ghost{
  position:absolute;
  width:66px;height:66px;
  background:url("assets/bag-outline.svg") center/contain no-repeat;
  opacity:.12;
}
.bag-a{left:4%;top:9%}
.bag-b{left:18%;top:28%}
.bag-c{right:9%;top:10%}
.bag-d{right:4%;bottom:8%}

.dots{
  position:absolute;
  width:74px;height:74px;
  opacity:.22;
  background-image:radial-gradient(circle,var(--pink) 2px,transparent 2.6px);
  background-size:18px 18px;
}
.dots-a{left:14%;top:30%}
.dots-b{right:4%;top:18%}

.shell{
  position:relative;
  z-index:1;
  width:min(100% - 34px,920px);
  margin:0 auto;
  padding:34px 0;
}

.panel{
  position:relative;
  overflow:hidden;
  padding:34px 38px 30px;
  border-radius:42px;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.73));
  border:1px solid rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 28px 70px rgba(122,51,71,.12);
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 2%,rgba(255,255,255,.70),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.06));
}

/* HERO V7: estructura limpia y centrada */
.hero{
  position:relative;
  z-index:2;
  min-height:500px;
  text-align:center;
  padding:8px 24px 36px;
}


.intro{
  position:relative;
  z-index:4;
  width:min(100%,620px);
  margin:0 auto 0;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid #FFD2DD;
  background:rgba(255,247,249,.94);
  color:var(--pink);
  font-weight:900;
  font-size:.96rem;
  box-shadow:0 8px 18px rgba(232,24,90,.05);
}
h1{
  margin:16px 0 10px;
  font-size:clamp(2.05rem,4.5vw,2.95rem);
  line-height:1.06;
  letter-spacing:-.04em;
}
h1 strong{color:var(--pink)}
.hero p{
  max-width:560px;
  margin:0 auto;
  color:var(--muted);
  font-size:1rem;
  line-height:1.62;
  font-weight:700;
}

.wave{
  display:inline-block;
  transform-origin:70% 70%;
  animation:wave 2.1s ease-in-out 1.1s 2;
}

.hero-busky{
  display:block;
  width:220px;
  height:auto;
  margin:0 auto 8px;
  filter:drop-shadow(0 16px 22px rgba(60,25,34,.15));
}

/* ACCIONES */
.actions{
  position:relative;
  z-index:3;
  display:grid;
  gap:18px;
  margin-top:10px;
}
.action{
  position:relative;
  overflow:hidden;
  min-height:104px;
  padding:18px 24px;
  display:flex;
  align-items:center;
  gap:16px;
  border-radius:28px;
  text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease;
}
.action:hover,.social-card:hover,.email:hover{transform:translateY(-3px)}
.action.shop{
  color:#fff;
  background:linear-gradient(135deg,var(--pink-soft),var(--pink));
  box-shadow:0 18px 38px rgba(232,24,90,.22);
}
.action.shop::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -24%;
  width:16%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:shine 4.8s ease-in-out infinite 1.4s;
}
.action.whatsapp{
  background:rgba(255,255,255,.90);
  border:1px solid #E4ECE6;
  box-shadow:0 12px 28px rgba(70,44,49,.07);
}
.action-icon{
  width:60px;height:60px;flex:0 0 60px;
  display:grid;place-items:center;
  border-radius:18px;
  font-size:1.5rem;
}
.shop .action-icon{background:rgba(255,255,255,.18)}
.whatsapp-badge{
  background:#EAFBF0;
  border:1px solid #CFF3DB;
}
.whatsapp-badge img{width:42px;height:42px;display:block}
.copy{display:flex;flex-direction:column;text-align:left}
.copy strong{font-size:1.15rem;font-weight:900}
.copy small{margin-top:4px;font-size:.95rem;font-weight:700;opacity:.88}
.arrow{margin-left:auto;font-size:1.7rem;font-weight:900}

/* REDES */
.social{
  position:relative;
  z-index:3;
  margin-top:22px;
}
.section-title{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}
.section-title span{height:2px;background:#F6CCD6}
.section-title h2{
  margin:0;
  color:#7E7478;
  font-size:1rem;
  font-weight:900;
}
.social-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.social-card{
  position:relative;
  min-height:166px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  text-decoration:none;
  border-radius:26px;
  border:1px solid #F1DFE3;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 26px rgba(96,44,59,.06);
  transition:transform .22s ease,box-shadow .22s ease;
}
.network{
  width:66px;height:66px;
  display:grid;place-items:center;
  margin-bottom:14px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 20px rgba(53,27,34,.10);
}
.network img{width:54px;height:54px;display:block}
.social-card strong{font-size:1.1rem;font-weight:900}
.social-card small{margin-top:4px;color:#746B6D;font-size:.96rem;font-weight:700}
.spark{position:absolute;width:26px;height:12px;left:22px;top:28px}
.spark::before,.spark::after{
  content:"";
  position:absolute;
  width:10px;height:3px;
  border-radius:99px;
  background:#FF7AA6;
}
.spark::before{left:0;top:1px;transform:rotate(-25deg)}
.spark::after{right:0;top:8px;transform:rotate(20deg)}

/* CORREO / FOOTER */
.email{
  position:relative;
  z-index:3;
  min-height:96px;
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:var(--ink);
  text-decoration:none;
  border-radius:28px;
  border:1px solid #F1DFE3;
  background:rgba(255,255,255,.90);
  box-shadow:0 12px 26px rgba(96,44,59,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}
.mail-icon{font-size:2rem}
.email-copy{display:flex;flex-direction:column;text-align:left}
.email-copy small{color:#6F6668;font-size:1rem;font-weight:700}
.email-copy strong{margin-top:2px;font-size:1.2rem;font-weight:900}


.footer-logo{
  display:block;
  width:78px;
  height:auto;
  margin:0 auto 10px;
  opacity:.96;
  filter:drop-shadow(0 4px 8px rgba(36,18,22,.08));
}

footer{
  position:relative;
  z-index:3;
  padding-top:26px;
  text-align:center;
  color:#8B8184;
  font-size:.95rem;
  font-weight:800;
}
footer a{color:var(--pink-soft);text-decoration:none;font-weight:900}
footer p{margin:.55rem 0 0;font-size:.9rem}

/* EFECTOS */
.reveal{
  opacity:0;
  transform:translateY(18px);
  animation:reveal .72s cubic-bezier(.2,.75,.25,1) forwards;
  animation-delay:var(--delay,0s);
}
#confetti{
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  overflow:hidden;
}
.confetti-piece{
  position:absolute;
  top:-20px;
  width:9px;height:15px;
  border-radius:3px;
  animation:confettiFall var(--dur) cubic-bezier(.15,.75,.35,1) forwards;
  transform:rotate(var(--rot));
}
.mini-bag{
  position:fixed;
  z-index:11;
  pointer-events:none;
  width:var(--size);
  height:auto;
  animation:bagBurst .78s cubic-bezier(.15,.75,.25,1) forwards;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.08));
}

@keyframes reveal{to{opacity:1;transform:none}}
@keyframes wave{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(16deg)}
  40%{transform:rotate(-8deg)}
  60%{transform:rotate(13deg)}
  80%{transform:rotate(-4deg)}
}
@keyframes shine{
  0%,72%{left:-24%}
  100%{left:122%}
}
@keyframes confettiFall{
  0%{transform:translate3d(0,-20px,0) rotate(0);opacity:1}
  100%{transform:translate3d(var(--x),105vh,0) rotate(720deg);opacity:.15}
}
@keyframes bagBurst{
  0%{transform:translate(-50%,-50%) scale(.35) rotate(0);opacity:0}
  20%{opacity:1}
  100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--r));opacity:0}
}

@media(max-width:880px){
  .shell{width:min(100% - 26px,780px)}
  .panel{padding-inline:24px}
  .hero{min-height:570px;padding-bottom:240px}
  .hero-busky{width:205px;margin-bottom:6px}
  }

@media(max-width:640px){
  .shell{width:min(100% - 20px,520px);padding-top:18px}
  .panel{padding:22px 16px 24px;border-radius:28px}
  .hero{min-height:390px;padding:6px 8px 24px}
  .intro{margin-top:0}
  .pill{font-size:.75rem;padding:7px 11px}
  h1{font-size:1.72rem;line-height:1.1;margin:12px 0 8px}
  .hero p{max-width:310px;font-size:.85rem;line-height:1.5}
  .hero-busky{width:145px;margin-bottom:4px}
  
  .actions{gap:12px;margin-top:10px}
  .action{min-height:78px;padding:12px 14px;border-radius:22px}
  .action-icon{width:42px;height:42px;flex-basis:42px;border-radius:14px;font-size:1.2rem}
  .whatsapp-badge img{width:32px;height:32px}
  .copy strong{font-size:.98rem}
  .copy small{font-size:.78rem}
  .arrow{font-size:1.35rem}

  .section-title{gap:10px;margin-bottom:12px}
  .section-title h2{font-size:.88rem}
  .social-grid{gap:10px}
  .social-card{min-height:112px;border-radius:18px;padding:8px 4px}
  .network{width:46px;height:46px;border-radius:16px;margin-bottom:8px}
  .network img{width:38px;height:38px}
  .spark{width:20px;height:10px;left:14px;top:20px}
  .spark::before,.spark::after{width:8px;height:2px}
  .social-card strong{font-size:.88rem}
  .social-card small{font-size:.68rem;text-align:center}

  .email{min-height:72px;gap:10px;border-radius:22px;padding:10px 14px}
  .mail-icon{font-size:1.4rem}
  .email-copy small{font-size:.76rem}
  .email-copy strong{font-size:.95rem}
  footer{font-size:.76rem;padding-top:18px}
  footer p{font-size:.72rem}

  .ghost{width:46px;height:46px}
  .dots-a{left:5%;top:30%}
  .dots-b{right:2%;top:16%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}