/* The body and frame stay fixed; the four original limbs pivot independently. */
.top_panel .sc_layouts_logo img{animation:none;transform:none}
.top_panel .ottie-articulated-logo{display:inline-block;vertical-align:middle;width:auto;height:44px;max-height:44px;overflow:visible}
.ottie-articulated-logo g{transform-box:view-box;transform:rotate(0deg)}
.ottie-logo-arm-left{transform-origin:24px 41px}
.ottie-logo-arm-right{transform-origin:42px 41px}
.ottie-logo-leg-back{transform-origin:66px 62px}
.ottie-logo-leg-front{transform-origin:45px 78px}
/* Quarter-cycle easing keeps velocity continuous through the neutral pose and loop seam. */
@keyframes ottie-arm-left{
 0%,100%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 25%{transform:rotate(11deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
 50%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 75%{transform:rotate(-11deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
}
@keyframes ottie-arm-right{
 0%,100%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 25%{transform:rotate(-10deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
 50%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 75%{transform:rotate(10deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
}
@keyframes ottie-leg-back{
 0%,100%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 25%{transform:rotate(15deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
 50%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 75%{transform:rotate(-15deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
}
@keyframes ottie-leg-front{
 0%,100%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 25%{transform:rotate(-15deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
 50%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,.52,.66,1)}
 75%{transform:rotate(15deg);animation-timing-function:cubic-bezier(.34,0,.67,.48)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .top_panel .sc_layouts_logo:is(:hover,:focus-visible) .ottie-articulated-logo g{will-change:transform}
 .top_panel .sc_layouts_logo:is(:hover,:focus-visible) .ottie-logo-arm-left{animation:ottie-arm-left 1.6s linear infinite}
 .top_panel .sc_layouts_logo:is(:hover,:focus-visible) .ottie-logo-arm-right{animation:ottie-arm-right 1.6s linear infinite}
 .top_panel .sc_layouts_logo:is(:hover,:focus-visible) .ottie-logo-leg-back{animation:ottie-leg-back 1.6s linear infinite}
 .top_panel .sc_layouts_logo:is(:hover,:focus-visible) .ottie-logo-leg-front{animation:ottie-leg-front 1.6s linear infinite}
}
@media(max-width:767px){.top_panel .ottie-articulated-logo{height:34px;max-height:34px}}

/* Phone/tablet header: "Crea tu lámpara" centred over the whole row (the logo column
   and widget stop being the positioning context). */
.top_panel .elementor-element-44c60f68,.top_panel .elementor-element-4575f6f8{position:static}
/* body + a: outranks the 44 px header-link rule on product pages. */
body .top_panel a.ottie-header-create{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:3px 12px 3px 3px;box-sizing:border-box;border:0;border-radius:999px;background:var(--theme-color-bg_color_2);color:var(--theme-color-title);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .2s ease}
.top_panel .ottie-header-create:hover,.top_panel .ottie-header-create:focus-visible{background:color-mix(in srgb,var(--theme-color-hover) 14%,var(--theme-color-bg_color_2));color:var(--theme-color-title)}
.top_panel .ottie-header-create:focus-visible{outline:2px solid var(--theme-color-title);outline-offset:2px}
/* The animated UNO mark sits in a brand-brown dot. */
.top_panel .ottie-header-create .ottie-line-icon{flex:0 0 26px;width:26px;height:26px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--theme-color-hover);color:var(--theme-color-bg_color);stroke-width:1.6;overflow:visible}
/* Very narrow phones keep only the mark; the text stays as the accessible name. */
@media (max-width:359px){
 .top_panel .ottie-header-create{padding:3px}
 .top_panel .ottie-header-create span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Phones up to a regular iPhone: a lower header leaves more of the screen to the page (owner request). */
@media (max-width:402px){
 body .top_panel .elementor-element.elementor-element-65390b7c{min-height:0;padding:4px 16px}
 body .top_panel .elementor-element-f4725c9>.e-con-inner{padding-top:8px;padding-bottom:8px}
}
/* The lettering beside the mark from 1025 px up. */
.top_panel .ottie-logo-word{display:none;width:auto;height:44px;max-height:44px;color:var(--theme-color-title);vertical-align:middle}
@media (min-width:1025px){.top_panel .ottie-logo-word{display:inline-block}}
}
