/* Logo Repsol animado de cabecera. Aislado para no alterar el resto del diseño. */
.repsol-motion-brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  width:clamp(154px,18vw,214px);
  min-width:154px;
  isolation:isolate;
  overflow:visible;
}
.repsol-motion-frame{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:12px;
  transform-origin:42% 50%;
  animation:repsol-logo-arrival 1.25s cubic-bezier(.2,.78,.2,1) both,
            repsol-logo-breathe 6.5s ease-in-out 1.4s infinite;
  will-change:transform,filter;
}
.repsol-motion-frame::after{
  content:"";
  position:absolute;
  inset:-35% -55%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.08) 55%,transparent 62%);
  transform:translateX(-62%) skewX(-12deg);
  mix-blend-mode:screen;
  animation:repsol-logo-shine 7s ease-in-out 1.7s infinite;
}
.repsol-motion-frame img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 7px 11px rgba(2,26,52,.16));
  transform:translateZ(0);
  transition:transform .3s ease,filter .3s ease;
}
.repsol-motion-brand:hover .repsol-motion-frame img,
.repsol-motion-brand:focus-visible .repsol-motion-frame img{
  transform:scale(1.025);
  filter:drop-shadow(0 9px 14px rgba(2,26,52,.24));
}
.repsol-motion-brand:focus-visible{
  outline:3px solid rgba(255,140,0,.58);
  outline-offset:5px;
  border-radius:14px;
}
@keyframes repsol-logo-arrival{
  0%{opacity:0;transform:translate3d(-18px,0,0) scale(.94);filter:blur(5px)}
  62%{opacity:1;transform:translate3d(3px,0,0) scale(1.015);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes repsol-logo-breathe{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-2px,0)}
}
@keyframes repsol-logo-shine{
  0%,58%{transform:translateX(-62%) skewX(-12deg);opacity:0}
  64%{opacity:.92}
  75%{transform:translateX(62%) skewX(-12deg);opacity:.18}
  76%,100%{transform:translateX(62%) skewX(-12deg);opacity:0}
}
@media (max-width:720px){
  .repsol-motion-brand{width:158px;min-width:142px}
  .repsol-motion-frame{border-radius:9px}
}
@media (max-width:380px){
  .repsol-motion-brand{width:145px;min-width:132px}
}
@media (prefers-reduced-motion:reduce){
  .repsol-motion-frame,.repsol-motion-frame::after{animation:none!important}
  .repsol-motion-frame img{transition:none}
}