/* Animaciones de entrada de los titulares de sección. */
.heading-chaos{overflow:clip;overflow-clip-margin:1rem 2.5rem;isolation:isolate;contain:paint}
.heading-chaos .chaos-letter,.hero-title-lettered .hero-letter{display:inline-block;opacity:0;transform:translate3d(var(--chaos-x),var(--chaos-y),0) rotate(var(--chaos-rotate)) scale(var(--chaos-scale));transform-origin:center bottom;will-change:transform,opacity}
.hero-title-lettered .hero-letter{transform:translate3d(var(--hero-x),var(--hero-y),0) rotate(var(--hero-rotate)) scale(var(--hero-scale))}
.chaos-letter__glyph,.hero-letter__glyph{display:inline-block;transform-origin:center bottom}
.heading-chaos.is-formed .chaos-letter,.hero-title-lettered.is-formed .hero-letter{opacity:1;transform:none;will-change:auto}
.heading-chaos.is-entering .chaos-letter{animation:title-letter-arrive 1.2s cubic-bezier(.22,.9,.3,1) var(--chaos-delay) both}
.hero-title-lettered.is-entering .hero-letter{animation:hero-letter-arrive 1.05s cubic-bezier(.22,.9,.3,1) var(--hero-delay) both}

/* The heading moves as a parent; its letter spans retain their own entrance transforms. */
.heading-chaos.heading-is-floating{animation:heading-float-a 5.8s ease-in-out infinite;will-change:transform}
.heading-chaos.heading-is-floating.heading-float-variant-1{animation-name:heading-float-b;animation-duration:6.5s;animation-delay:-1.2s}
.heading-chaos.heading-is-floating.heading-float-variant-2{animation-name:heading-float-c;animation-duration:5.2s;animation-delay:-2.1s}
.hero h1.hero-title-is-floating{animation:hero-title-float 6.4s ease-in-out infinite;will-change:transform}
.heading-chaos.is-waving .chaos-letter__glyph{animation:title-letter-wave .52s ease-in-out var(--wave-delay) both}
.hero-title-lettered.is-waving .hero-letter__glyph{animation:hero-letter-wave .6s ease-in-out var(--wave-delay) both}

@keyframes title-letter-arrive{0%{opacity:0;transform:translate3d(var(--chaos-x),var(--chaos-y),0) rotate(var(--chaos-rotate)) scale(var(--chaos-scale))}82%{opacity:1;transform:translate3d(0,2px,0) rotate(0) scale(1)}100%{opacity:1;transform:none}}
@keyframes hero-letter-arrive{0%{opacity:0;transform:translate3d(var(--hero-x),var(--hero-y),0) rotate(var(--hero-rotate)) scale(var(--hero-scale))}82%{opacity:1;transform:translate3d(0,3px,0) rotate(0) scale(1)}100%{opacity:1;transform:none}}
@keyframes title-letter-wave{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0)}45%{transform:translate3d(0,-9px,0) scale(1.04) rotate(-1deg)}}
@keyframes hero-letter-wave{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0)}45%{transform:translate3d(0,-14px,0) scale(1.06) rotate(-1.5deg)}}

@keyframes heading-float-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-3px,0)}}
@keyframes heading-float-b{0%,100%{transform:translate3d(0,0,0)}45%{transform:translate3d(1px,-2px,0)}75%{transform:translate3d(-1px,-1px,0)}}
@keyframes heading-float-c{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
@keyframes hero-title-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}

/* Ajuste de jerarquía visual de la portada. */
.hero h1{font-size:clamp(3.15rem,8.7vw,6.3rem);margin-bottom:.95rem}
.hero .quick-actions{gap:.8rem;margin-top:1.15rem}
.hero .quick-actions a{min-width:128px;min-height:50px;padding:.85rem 1.2rem;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.82);transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.hero .quick-actions a:hover,.hero .quick-actions a:focus{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-2px)}

@media(max-width:700px){.heading-chaos .chaos-letter{transform:translate3d(clamp(-18px,var(--chaos-x),18px),clamp(-18px,var(--chaos-y),18px),0) rotate(var(--chaos-rotate)) scale(var(--chaos-scale))}.hero-title-lettered .hero-letter{transform:translate3d(clamp(-24px,var(--hero-x),24px),clamp(-20px,var(--hero-y),20px),0) rotate(var(--hero-rotate)) scale(var(--hero-scale))}.heading-chaos.is-entering .chaos-letter{animation-name:title-letter-arrive-mobile}.hero-title-lettered.is-entering .hero-letter{animation-name:hero-letter-arrive-mobile}.hero h1{font-size:clamp(3rem,13vw,4.35rem);margin-bottom:.8rem}.hero .quick-actions{gap:.6rem;margin-top:1rem}.hero .quick-actions a{flex:1 1 100px;min-width:0;min-height:48px;padding:.8rem .65rem}}
@keyframes title-letter-arrive-mobile{0%{opacity:0;transform:translate3d(clamp(-18px,var(--chaos-x),18px),clamp(-18px,var(--chaos-y),18px),0) rotate(var(--chaos-rotate)) scale(var(--chaos-scale))}82%{opacity:1;transform:translate3d(0,2px,0) rotate(0) scale(1)}100%{opacity:1;transform:none}}
@keyframes hero-letter-arrive-mobile{0%{opacity:0;transform:translate3d(clamp(-24px,var(--hero-x),24px),clamp(-20px,var(--hero-y),20px),0) rotate(var(--hero-rotate)) scale(var(--hero-scale))}82%{opacity:1;transform:translate3d(0,3px,0) rotate(0) scale(1)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.heading-chaos{overflow:hidden}.heading-chaos .chaos-letter,.hero-title-lettered .hero-letter{opacity:1;transform:none;animation:none;transition:none}.heading-chaos.heading-is-floating,.hero h1.hero-title-is-floating,.heading-chaos.is-waving .chaos-letter__glyph,.hero-title-lettered.is-waving .hero-letter__glyph{animation:none}}