/* Movimiento de los emblemas de fauna y paisajes. Va con fauna.js.
   Tres disparadores, todos finitos salvo `.em-live`:
     .section-enter (al entrar a una sección, una vez)   :hover / .em-play (al pasar o tocar)   .em-live (esperas, avisos, vacíos)
   Sin movimiento (preferencia del sistema o del negocio) el dibujo queda completo y quieto. */
.emblem [class^=em-]{transform-box:fill-box;transform-origin:50% 50%}
.emblem .em-note{opacity:0}
.emblem .em-hang{transform-box:view-box;transform-origin:48px 20px}
.emblem .em-palm{transform-origin:20% 100%}
.emblem .em-head{transform-origin:20% 90%}
.emblem .em-tail{transform-origin:100% 20%}
.emblem .em-ear.l{transform-origin:100% 60%}.emblem .em-ear.r{transform-origin:0 60%}
.emblem .em-leaf{transform-origin:60% 100%}
.emblem .em-wing{transform-origin:100% 100%}
.emblem.em-colibri .em-wing.w2{transform-origin:0 100%}
.emblem.em-morpho .em-wing{transform-origin:100% 50%}
.emblem.em-yiguirro .em-wing{transform-origin:10% 50%}
.emblem .em-flip{transform-origin:90% 10%}.emblem .em-flip.f2{transform-origin:10% 10%}
.emblem.em-tortuga .em-head{transform-origin:0 60%}
.emblem .em-crouch{transform-origin:50% 100%}
.manager-head .emblem,.empty .emblem{cursor:pointer;-webkit-tap-highlight-color:transparent}
.fauna-loader{min-height:70vh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--muted);font-weight:600}
.fauna-loader .emblem{width:96px;height:96px}
.fauna-loader p{margin:0}
#toast{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;text-align:left}
#toast:empty{padding:0}
#toast .emblem{width:40px;height:40px}
dialog .dialog-emblem{display:flex;align-items:center;gap:14px;margin:0 44px 12px 0}
dialog .dialog-emblem .emblem{width:56px;height:56px}
dialog .dialog-emblem h2{margin:0}
.profile-chip{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 9px;min-height:0;border-radius:999px;border:1px solid var(--edge,#6f80e6);background:transparent;color:var(--mist,#dfe4ff);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.topbar .profile-chip{display:none;margin:0;border-color:#cfc7e2;color:var(--ink)}
@media(max-width:760px){.topbar .profile-chip{display:inline-flex}}

@media(prefers-reduced-motion:no-preference){
  /* Una vez, al entrar a la sección */
  body:not(.motion-off) :is(.section-enter .manager-head,.section-enter .empty,dialog .dialog-emblem) .emblem{animation:em-in .6s var(--pe,cubic-bezier(.2,.8,.2,1)) both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-volcan .em-sun,body:not(.motion-off) :is(.section-enter,dialog) .em-playa .em-sun{animation:em-rise 1s .25s ease-out both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-plume{stroke-dasharray:30;animation:em-draw 1.2s .4s ease-out both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-bloom{animation:em-bloom .9s .25s var(--pe,ease-out) both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-hop{animation:em-hop .8s .2s var(--pe,ease-out) both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-note{animation:em-note 1.6s .9s ease-out both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-note.n2{animation-delay:1.15s}
  body:not(.motion-off) :is(.section-enter,dialog) .em-hang{animation:em-sway 2.4s .2s ease-in-out both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-ear{animation:em-ear .5s .5s ease-in-out 2 both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-walk{animation:em-arrive 1.4s .1s ease-out both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-flip{animation:em-flip .35s .1s ease-in-out 4 both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-mist{animation:em-mist 2.2s .2s ease-out both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-mist.m2{animation-delay:.45s}
  body:not(.motion-off) :is(.section-enter,dialog) .em-mist.m3{animation-delay:.7s}
  body:not(.motion-off) :is(.section-enter,dialog) .em-drop{animation:em-drop 1s .3s ease-in 2 both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-drop.d2{animation-delay:.55s}
  body:not(.motion-off) :is(.section-enter,dialog) .em-drop.d3{animation-delay:.8s}
  body:not(.motion-off) :is(.section-enter,dialog) .em-morpho .em-wing{animation:em-flutter .5s .2s ease-in-out 4 both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-crouch{animation:em-crouch .7s .2s var(--pe,ease-out) both}
  body:not(.motion-off) :is(.section-enter,dialog) .em-rana .em-eyes{animation:em-blink 2.2s .9s ease-in-out both}
  /* Al pasar el cursor o tocar */
  body:not(.motion-off) .emblem{transition:scale .3s var(--pe,ease-out),rotate .3s var(--pe,ease-out)}
  body:not(.motion-off) :is(.manager-head,.empty) .emblem:hover{scale:1.06;rotate:-3deg}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-head{animation:em-tilt 1.2s ease-in-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-tail{animation:em-wag .3s ease-in-out 4}
  body:not(.motion-off) .emblem.em-yiguirro:is(:hover,.em-play) .em-wing{animation:em-flap .25s ease-in-out 4}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-note{animation:em-note 1.4s ease-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-note.n2{animation-delay:.25s}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-bloom{animation:em-spin 1.2s var(--pe,ease-out) both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-hang{animation:em-sway 2s ease-in-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-eyes{animation:em-blink 1.4s ease-in-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-ear{animation:em-ear .4s ease-in-out 3}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-sun{animation:em-pulse 1.2s ease-in-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-wave{animation:em-wave 1.4s ease-in-out 2}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-palm{animation:em-palm 1.6s ease-in-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-plume{stroke-dasharray:30;animation:em-draw 1.1s ease-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-mist{animation:em-mist 1.8s ease-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-mist.m2{animation-delay:.2s}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-mist.m3{animation-delay:.4s}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-drop{animation:em-drop .9s ease-in 2 both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-drop.d2{animation-delay:.2s}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-drop.d3{animation-delay:.4s}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-leaf{animation:em-palm 1.4s ease-in-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-walk{animation:em-step 1.6s ease-in-out both}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-flip{animation:em-flip .4s ease-in-out 4}
  body:not(.motion-off) .emblem.em-morpho:is(:hover,.em-play) .em-wing{animation:em-flutter .45s ease-in-out 4}
  body:not(.motion-off) .emblem.em-colibri:is(:hover,.em-play) .em-wing{animation:em-buzz .09s linear 16}
  body:not(.motion-off) .emblem:is(:hover,.em-play) .em-crouch{animation:em-crouch .6s var(--pe,ease-out) both}
  /* Continuo y suave: esperas, avisos y estados vacíos */
  body:not(.motion-off) .em-live .em-hover{animation:em-float 1.8s ease-in-out infinite}
  body:not(.motion-off) .em-live.em-colibri .em-wing{animation:em-buzz .09s linear infinite}
  body:not(.motion-off) .em-live .em-hang{animation:em-sway 5s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-eyes{animation:em-blink 4.5s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-bloom{animation:em-breathe 4s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-wave{animation:em-wave 2.6s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-sun{animation:em-pulse 3s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-palm,body:not(.motion-off) .em-live .em-leaf{animation:em-palm 4s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-mist{animation:em-drift 5s ease-in-out infinite alternate}
  body:not(.motion-off) .em-live .em-mist.m2{animation-delay:-1.6s}
  body:not(.motion-off) .em-live .em-mist.m3{animation-delay:-3.2s}
  body:not(.motion-off) .em-live .em-drop{animation:em-drop 1.8s ease-in infinite}
  body:not(.motion-off) .em-live .em-drop.d2{animation-delay:.6s}
  body:not(.motion-off) .em-live .em-drop.d3{animation-delay:1.2s}
  body:not(.motion-off) .em-live.em-morpho .em-wing{animation:em-flutter 1.1s ease-in-out infinite}
  body:not(.motion-off) .em-live.em-morpho .em-fly{animation:em-float 2.4s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-walk{animation:em-step 3s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-flip{animation:em-flip .75s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-ear{animation:em-ear 3.5s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-head{animation:em-tilt 4s ease-in-out infinite}
  body:not(.motion-off) .em-live .em-note{animation:em-note 2.4s ease-out infinite}
  body:not(.motion-off) .em-live .em-note.n2{animation-delay:.5s}
  body:not(.motion-off) .em-live .em-plume{stroke-dasharray:30;animation:em-draw 3s ease-out infinite}
}
@keyframes em-in{from{opacity:0;scale:.7;rotate:-12deg}}
@keyframes em-rise{from{translate:0 14px;opacity:0}}
@keyframes em-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes em-bloom{from{scale:0;rotate:-80deg}}
@keyframes em-spin{to{rotate:72deg}}
@keyframes em-breathe{50%{scale:1.07;rotate:6deg}}
@keyframes em-hop{0%{translate:-16px -8px;opacity:0}60%{translate:0 -5px;opacity:1}}
@keyframes em-note{0%{opacity:0;translate:0 5px}25%{opacity:1}100%{opacity:0;translate:4px -9px}}
@keyframes em-sway{25%{rotate:5deg}75%{rotate:-5deg}}
@keyframes em-blink{0%,42%,50%,100%{scale:1 1}46%{scale:1 .1}}
@keyframes em-ear{50%{rotate:14deg}}
@keyframes em-tilt{20%,70%{rotate:-16deg}45%{rotate:-8deg}}
@keyframes em-wag{50%{rotate:12deg}}
@keyframes em-flap{50%{rotate:-24deg}}
@keyframes em-pulse{50%{scale:1.16}}
@keyframes em-wave{50%{translate:5px 1px}}
@keyframes em-palm{30%{rotate:4deg}70%{rotate:-3deg}}
@keyframes em-mist{from{translate:-14px 0;opacity:0}}
@keyframes em-drift{from{translate:-5px 0}to{translate:5px 0}}
@keyframes em-drop{0%{translate:0 -8px;opacity:0}30%{opacity:1}100%{translate:0 10px;opacity:0}}
@keyframes em-arrive{from{translate:-18px 0;opacity:0}}
@keyframes em-step{50%{translate:5px 0}}
@keyframes em-flip{50%{rotate:22deg}}
@keyframes em-flutter{50%{scale:.35 1}}
@keyframes em-buzz{50%{scale:1 .25}}
@keyframes em-float{50%{translate:0 -4px}}
@keyframes em-crouch{0%{scale:1 1}35%{scale:1.06 .86}70%{scale:.97 1.06}}
.slot-note{display:flex;align-items:center;gap:10px}
.slot-note .emblem{width:40px;height:40px}
.topbar .profile-chip span{display:none}
.topbar .profile-chip{padding:2px 8px;font-size:10px}

/* Escena de Inicio (panelScene): se funde con la portada, sin marco. */
.hero.costa-rica-hero{overflow:hidden;position:relative}
.home-art{flex:none;align-self:stretch;width:min(54%,640px);aspect-ratio:auto;min-height:300px;margin:-38px -42px -38px 0;border-radius:0;box-shadow:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
.home-art .panel-scene{width:100%;height:100%;display:block}
.panel-scene [class^=ps-]{transform-box:fill-box;transform-origin:50% 50%}
.panel-scene .ps-fly{translate:236px 176px}
.panel-scene .ps-morpho{translate:312px 352px}
.panel-scene .ps-palm{transform-origin:10% 100%}
.panel-scene .ps-sloth{transform-box:view-box;transform-origin:97px 74px}
.panel-scene .ps-bloom{transform-box:view-box;transform-origin:0 60px}
.panel-scene .ps-mw{transform-origin:100% 50%}.panel-scene .ps-mw.r{transform-origin:0 50%}
.panel-scene .ps-flap{transform-origin:20% 100%}
@media(max-width:760px){.home-art{width:auto;min-height:0;aspect-ratio:16/10;margin:6px -22px -22px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%);mask-image:linear-gradient(180deg,transparent,#000 26%)}}
@media(prefers-reduced-motion:no-preference){
  body:not(.motion-off) .section-enter .home-art{animation:ps-in 1s var(--pe,ease-out) both}
  body:not(.motion-off) .section-enter .ps-sun{animation:ps-rise 1.6s .1s var(--pe,ease-out) both}
  body:not(.motion-off) .ps-halo{animation:ps-glow 6s ease-in-out infinite}
  body:not(.motion-off) .ps-star{animation:ps-twinkle 3.6s ease-in-out infinite}
  body:not(.motion-off) .ps-star.s1{animation-delay:-1.2s}body:not(.motion-off) .ps-star.s2{animation-delay:-2.4s}
  body:not(.motion-off) .ps-cloud{animation:ps-drift 18s ease-in-out infinite alternate}
  body:not(.motion-off) .ps-cloud.c2{animation-duration:24s;animation-direction:alternate-reverse}
  body:not(.motion-off) .ps-mist{animation:ps-drift 14s ease-in-out infinite alternate-reverse}
  body:not(.motion-off) .ps-mist.m2{animation-duration:10s;animation-direction:alternate}
  body:not(.motion-off) .ps-plume{stroke-dasharray:190;animation:ps-plume 8s ease-in-out infinite}
  body:not(.motion-off) .ps-wave{animation:ps-wave 3.2s linear infinite}
  body:not(.motion-off) .ps-wave.w2{animation-duration:4.4s;animation-direction:reverse}
  body:not(.motion-off) .ps-palm{animation:ps-sway 5s ease-in-out infinite}
  body:not(.motion-off) .ps-sloth{animation:ps-hang 7s ease-in-out infinite}
  body:not(.motion-off) .ps-eyes{animation:em-blink 5s ease-in-out infinite}
  body:not(.motion-off) .ps-bloom{animation:ps-sway 4.5s ease-in-out infinite}
  body:not(.motion-off) .ps-bloom.b2{animation-delay:-1.5s}
  body:not(.motion-off) .ps-turtle{animation:ps-crawl 9s ease-in-out infinite alternate}
  body:not(.motion-off) .ps-fly{animation:ps-fly 17s linear infinite}
  body:not(.motion-off) .ps-fly-in{animation:ps-bob 1.1s ease-in-out infinite}
  body:not(.motion-off) .ps-flap{animation:ps-flap .32s ease-in-out infinite}
  body:not(.motion-off) .ps-morpho{animation:ps-wander 11s ease-in-out infinite}
  body:not(.motion-off) .ps-mw{animation:em-flutter .7s ease-in-out infinite}
}
@keyframes ps-in{from{opacity:0;translate:24px 0}}
@keyframes ps-rise{from{translate:0 90px;opacity:.2}}
@keyframes ps-glow{50%{scale:1.12;opacity:.75}}
@keyframes ps-twinkle{50%{opacity:.25}}
@keyframes ps-drift{from{translate:-16px 0}to{translate:18px 0}}
@keyframes ps-plume{0%{stroke-dashoffset:190;opacity:0}20%{opacity:.9}70%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ps-wave{to{translate:-28px 0}}
@keyframes ps-sway{30%{rotate:3.5deg}70%{rotate:-3deg}}
@keyframes ps-hang{25%{rotate:4deg}75%{rotate:-4deg}}
@keyframes ps-crawl{to{translate:22px -6px}}
@keyframes ps-fly{0%{translate:-60px 210px}45%{translate:300px 120px}100%{translate:700px 70px}}
@keyframes ps-bob{50%{translate:0 -5px}}
@keyframes ps-flap{50%{scale:1 -.5}}
@keyframes ps-wander{0%,100%{translate:312px 352px}25%{translate:346px 318px;rotate:10deg}50%{translate:300px 296px;rotate:-8deg}75%{translate:270px 332px;rotate:6deg}}
.topbar .profile-chip{min-height:28px;border-radius:999px}

/* Yigüirro del panel: sus animaciones vivían en la hoja de la landing anterior. */
@keyframes ld-tilt{20%,70%{rotate:-22deg}45%{rotate:-12deg}}
@keyframes ld-flap{50%{rotate:-28deg}}
@keyframes ld-note{0%{opacity:0;translate:0 10px}25%{opacity:1}100%{opacity:0;translate:6px -14px}}
.panel-bird .ld-bird{overflow:visible}
.site-loader{width:34px;height:34px;border-radius:50%;border:4px solid #e4e2ea;border-top-color:#17151f;display:block}
@media(prefers-reduced-motion:no-preference){.site-loader{animation:sx-spin .9s linear infinite}}
#toast:has(>span:only-child){padding:14px 22px}