/* ===== Vivir Bonito · capa de movimiento v14 ===== */
:root{--vb-ease:cubic-bezier(.22,1,.36,1)}

/* Revelado al hacer scroll: variantes */
.js .rv{will-change:opacity,transform}
.js .rv.rv-left:not(.in){transform:translateX(-36px)!important}
.js .rv.rv-right:not(.in){transform:translateX(36px)!important}
.js .rv.rv-zoom:not(.in){transform:scale(.92)!important}
.js .rv.in{opacity:1!important;transform:none!important}

/* Titulares: cada línea sube con máscara */
.vb-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.vb-words .w>span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--vb-ease);transition-delay:calc(var(--i)*55ms)}
.vb-words.in .w>span{transform:none}

/* Subrayado dibujado bajo palabras clave */
.acc,.mh2 h1 em,.mh2 h2 em,.cr2 h1 em,.cr2 h2 em,.lt2 h1 em,.lt2 h2 em{position:relative;white-space:normal}
.vb-underline{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 94%;background-size:0 .14em;transition:background-size 1s .5s var(--vb-ease)}
.in .vb-underline,.vb-underline.in{background-size:100% .14em}

/* Fotos: marco que respira + parallax suave */
.hero-photo{--py:0px}
.hero-photo img{transform:translateY(var(--py));transition:transform .15s linear}
.hero-photo::before{animation:vbFloat 9s ease-in-out infinite}
@keyframes vbFloat{50%{transform:translate(6px,-8px)}}
.photo-note{animation:vbBob 6s ease-in-out infinite}
@keyframes vbBob{50%{transform:translateY(-8px) rotate(-.6deg)}}

/* Avatar del inicio: halo que late */
.home-index .avatar{animation:vbHalo 4.5s ease-in-out infinite}
@keyframes vbHalo{0%,100%{box-shadow:0 0 0 10px rgba(236,150,172,.30),0 14px 34px rgba(138,53,80,.14)}50%{box-shadow:0 0 0 18px rgba(236,150,172,.14),0 14px 34px rgba(138,53,80,.14)}}

/* Pétalos / destellos flotando en héroes */
.vb-float{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.vb-float i{position:absolute;bottom:-30px;width:var(--s);height:var(--s);border-radius:60% 40% 60% 40%;background:var(--c);opacity:0;animation:vbRise var(--d) linear var(--dl) infinite}
@keyframes vbRise{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:.7}85%{opacity:.45}100%{opacity:0;transform:translateY(-110vh) translateX(var(--x)) rotate(280deg)}}
.hero>.wrap,.hero-small>*,.mh-hero>.wrap,.cr-hero>.wrap,.home-index .hero-top>*{position:relative;z-index:1}

/* Botones: brillo que cruza */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--vb-ease)}
.btn:hover::before{left:130%}
.btn.vb-pulse{animation:vbBtn 2.8s ease-in-out infinite}
@keyframes vbBtn{0%,100%{box-shadow:0 10px 24px #b84a6b26}50%{box-shadow:0 10px 34px #b84a6b66,0 0 0 8px #e6c89455}}

/* Tarjetas: inclinación 3D */
.big-link,.card,.resource-card,.cm-space,.mh-cards article,.cr-bene li,.lt-prize-grid li{transform-style:preserve-3d;transition:transform .35s var(--vb-ease),box-shadow .35s}
.vb-tilt{will-change:transform}

/* Iconos que saltan al pasar el cursor */
.big-link:hover .ico,.ci:hover,.cr-ico:hover,.lt-ico:hover{animation:vbJump .6s var(--vb-ease)}
@keyframes vbJump{40%{transform:translateY(-8px) scale(1.12)}}

/* Contadores y pasos CRECE */
.crece-steps li{opacity:.35;transform:translateX(24px);transition:opacity .7s var(--vb-ease),transform .7s var(--vb-ease)}
.crece-steps li.on{opacity:1;transform:none}
.crece-steps li .cs-letter{transition:transform .6s var(--vb-ease),background-color .4s}
.crece-steps li.on .cs-letter{transform:scale(1.12) rotate(-6deg)}

/* Lista “¿te suena familiar?”: entra una por una */
.mh-feel li{opacity:0;transform:translateY(18px);transition:opacity .6s var(--vb-ease),transform .6s var(--vb-ease);transition-delay:calc(var(--i)*140ms)}
.mh-feel.in li{opacity:1;transform:none}
.mh-feel li span{transition:transform .5s var(--vb-ease)}
.mh-feel.in li span{animation:vbPop .6s var(--vb-ease) both;animation-delay:calc(var(--i)*140ms + 200ms)}
@keyframes vbPop{from{transform:scale(0)}}

/* Línea de tiempo “historia”: se dibuja al bajar */
.mh-moments li{opacity:0;transform:translateY(22px);transition:opacity .7s var(--vb-ease),transform .7s var(--vb-ease)}
.mh-moments li.in{opacity:1;transform:none}

/* Cita grande: cada frase aparece */
.mh-quote .q-s,.mh-quote .q-b,.mh-quote .q-xl,.mh-quote .q-m{opacity:0;transform:translateY(16px);transition:opacity .8s var(--vb-ease),transform .8s var(--vb-ease);transition-delay:calc(var(--i)*220ms)}
.mh-quote.in .q-s,.mh-quote.in .q-b,.mh-quote.in .q-xl,.mh-quote.in .q-m{opacity:1;transform:none}

/* Ondas decorativas con deriva leve */
.hero::after,.hero-small::after,.section.dark::after,.section.pink::after{animation:vbWave 14s ease-in-out infinite alternate}
@keyframes vbWave{to{transform:translateX(-1.2%) scaleX(1.03)}}

/* Banda de números / confianza */
.vb-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,56px);margin:clamp(28px,4vw,44px) auto 0;max-width:900px}
.vb-stats div{text-align:center;min-width:120px}
.vb-stats b{display:block;font:600 clamp(2rem,4.4vw,3rem)/1 'Playfair Display',Georgia,serif;color:var(--terracotta)}
.vb-stats span{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Marquesina de frases */
.vb-marquee{overflow:hidden;background:var(--pink);padding:14px 0;border-block:1px solid var(--line)}
.vb-marquee div{display:flex;gap:44px;width:max-content;animation:vbSlide 38s linear infinite}
.vb-marquee span{font:600 1.15rem 'Playfair Display',Georgia,serif;color:var(--ink);white-space:nowrap}
.vb-marquee span::after{content:"✦";margin-left:44px;color:var(--gold)}
.vb-marquee:hover div{animation-play-state:paused}
@keyframes vbSlide{to{transform:translateX(-50%)}}

/* Botón flotante: aparece tras el scroll */
.wa-float{opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .4s,transform .4s var(--vb-ease)}
.wa-float.show{opacity:1;transform:none;pointer-events:auto}
.wa-float.show:hover{transform:scale(1.1)}

/* Navegación: enlace activo con punto */
.navlinks a[aria-current]{color:var(--terracotta)}

@media(prefers-reduced-motion:reduce){
  .vb-words .w>span,.mh-feel li,.mh-moments li,.crece-steps li,.mh-quote span{opacity:1!important;transform:none!important;transition:none!important}
  .vb-float,.vb-marquee div{display:none}
  .vb-underline{background-size:100% .14em}
  .hero-photo img{transform:none}
}
@media(hover:none){.vb-tilt{transform:none!important}}

/* Elementos nuevos de copy */
.vb-paths{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:clamp(40px,5vw,56px) auto 8px}
.vb-hint{font-size:.85rem;font-weight:600;color:var(--muted);margin:16px auto 0;text-align:center}
.home-index .button-stack{margin-top:clamp(64px,8vw,96px)}
.home-index .vb-marquee{width:100vw;margin-left:calc(50% - 50vw);margin-bottom:40px}
.cm-bridge{background:var(--blush)}
.cm-bridge .btn{margin:6px 4px}
.mh-final .vb-hint,.cr-final .vb-hint{margin-top:14px}

/* Evita desbordes horizontales por animaciones decorativas */
html,body{overflow-x:clip}
.vb-float,.hero-photo{max-width:100%}

/* Inicio: menos espacio vacío bajo el titular */
.home-index .hero-top{padding-bottom:clamp(120px,13vw,160px)}