/* ===== HERO ===== */
.hero{position:relative;min-height:calc(100vh - 68px);display:flex;align-items:center;overflow:hidden;padding:4rem 1.5rem}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 80% 10%,rgba(139,107,192,.30),transparent 60%),
    radial-gradient(90% 70% at 0% 100%,rgba(197,168,224,.28),transparent 55%),
    linear-gradient(180deg,var(--cream),var(--cream-2));
}
.hero__content{max-width:1180px;margin:0 auto;width:100%;position:relative}
.hero__title{font-size:clamp(2.8rem,7vw,5.6rem);letter-spacing:-.01em;margin-bottom:1.4rem}
.hero__title em{color:var(--violet)}
.hero__lead{max-width:34rem;font-size:1.15rem;color:var(--ink-soft);margin:0 0 2rem}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.5rem}
.hero__stats{list-style:none;display:flex;gap:2.8rem;padding:0;margin:0;flex-wrap:wrap}
.hero__stats li{display:flex;flex-direction:column}
.hero__stats strong{font-family:var(--serif);font-size:1.9rem;color:var(--violet)}
.hero__stats span{font-size:.85rem;color:var(--ink-soft)}
.hero__decor{position:absolute;bottom:0;right:-2%;height:100%;width:min(42%,520px);color:var(--violet);z-index:-1;opacity:.8;display:flex;align-items:flex-end;justify-content:flex-end}
.hero__decor svg{width:100%;height:auto}

/* ===== FRASCO DEL HERO: marca y animación ===== */
/* El nombre va pintado en la etiqueta, con la tipografía del sitio. */
.decor__marca-n{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.01em;fill:currentColor}
.decor__marca-s{font-family:var(--sans);font-size:6.6px;letter-spacing:.34em;fill:currentColor;opacity:.6}

/* El frasco flota; la sombra se encoge a la vez para que el vuelo se lea. */
.decor__frasco{animation:frascoFlota 7s ease-in-out infinite}
.decor__sombra{transform-box:fill-box;transform-origin:center;animation:frascoSombra 7s ease-in-out infinite}
@keyframes frascoFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes frascoSombra{0%,100%{transform:scaleX(1);opacity:.12}50%{transform:scaleX(.9);opacity:.07}}

/* Las hojas se mecen desde la base, más lento que el frasco para que
   los dos movimientos no queden sincronizados y parezcan mecánicos. */
.decor__hojas{transform-box:view-box;transform-origin:176px 606px;animation:hojasMecen 11s ease-in-out infinite}
@keyframes hojasMecen{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}

.decor__halo{transform-box:fill-box;transform-origin:center;animation:haloRespira 9s ease-in-out infinite}
@keyframes haloRespira{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.8}}

/* La marca aparece cuando el frasco ya está en pantalla. */
.decor__marca{transform-box:fill-box;transform-origin:center;animation:marcaEntra 1.1s .55s both cubic-bezier(.2,.8,.3,1)}
@keyframes marcaEntra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Gotas de adorno cayendo despacio. */
.decor__gota{opacity:0;animation:gotaCae 7s ease-in 1.5s infinite}
.decor__gota--2{animation-duration:8.5s;animation-delay:4.5s}
@keyframes gotaCae{
  0%{transform:translateY(-10px);opacity:0}
  12%{opacity:.3}
  75%{opacity:.24}
  100%{transform:translateY(150px);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .decor__frasco,.decor__sombra,.decor__hojas,.decor__halo,.decor__marca,.decor__gota{animation:none}
  .decor__gota{opacity:.26}
}

/* ===== VENTAJAS ===== */
.perks{background:linear-gradient(180deg,#fff,var(--cream-2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.perks__inner{max-width:1180px;margin:0 auto;padding:1.6rem 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.perk{display:flex;align-items:center;gap:.9rem}
.perk__ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-soft);color:var(--violet)}
.perk__txt{display:flex;flex-direction:column;line-height:1.3}
.perk__txt strong{font-size:.98rem;color:var(--ink);font-weight:600}
.perk__txt span{font-size:.82rem;color:var(--ink-soft)}
@media(max-width:860px){
  .perks__inner{grid-template-columns:1fr 1fr;gap:1.2rem 1rem}
}
@media(max-width:480px){
  .perks__inner{grid-template-columns:1fr}
}