.boton,
.nuevo-boton,
.sm-boton,
.sm-enlace,
.dn-boton,
.cf-boton,
.ev-cta,
.encuentros-enlace{
  position:relative;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent
}
.ev-flecha,
.sm-video-reproducir,
.dn-reproducir,
.ev-video-reproducir {
  isolation:isolate;
  -webkit-tap-highlight-color:transparent
}
.flecha-svg {
  display:inline-block;
  width:1em;
  height:1em;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-.14em
}
.estrella-svg {
  display:block;
  width:1em;
  height:1em;
  fill:currentColor
}
.onda-capa {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none
}
.onda {
  position:absolute;
  border-radius:50%;
  background:currentColor;
  opacity:.28;
  transform:scale(0);
  animation:onda .65s cubic-bezier(.2,.7,.3,1) forwards
}
@keyframes onda {
  to {
    transform:scale(1);
    opacity:0
  }
}

.boton {
  overflow:hidden
}
.boton::before {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:55%;
  z-index:-1;
  background:linear-gradient(100deg,transparent,#ffffff59 50%,transparent);
  transform:translateX(-130%) skewX(-18deg);
  pointer-events:none
}
.boton-claro::before,
.pastores-boton::before {
  background:linear-gradient(100deg,transparent,#c8293230 50%,transparent)
}
.boton .icono-svg {
  transition:transform .45s cubic-bezier(.3,1.6,.5,1)
}
.boton.toque::before {
  animation:boton-brillo .7s cubic-bezier(.4,0,.2,1)
}
@keyframes boton-brillo {
  to {
    transform:translateX(260%) skewX(-18deg)
  }
}

.nuevo-boton {
  overflow:hidden;
  gap:14px
}
.nuevo-boton::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--rojo-oscuro);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.65,0,.35,1)
}
.nuevo-boton-oscuro::before {
  background:#000
}
.nuevo-boton .icono-svg {
  transition:transform .45s cubic-bezier(.3,1.6,.5,1)
}
.nuevo-boton.toque {
  animation:nuevo-rebote .45s cubic-bezier(.3,1.6,.5,1)
}
@keyframes nuevo-rebote {
  0% { scale:1 }
  35% { scale:.95 }
  100% { scale:1 }
}

.sm-boton::after {
  content:'';
  position:absolute;
  inset:-1px;
  border:2px solid var(--sm-rojo);
  border-radius:inherit;
  opacity:0;
  pointer-events:none
}
.sm-boton svg,
.sm-enlace svg {
  transition:transform .4s cubic-bezier(.3,1.6,.5,1)
}
.sm-boton.toque::after {
  animation:sm-pulso .7s ease-out
}
@keyframes sm-pulso {
  0% { opacity:.8;transform:scale(1) }
  100% { opacity:0;transform:scale(1.35,1.7) }
}

.dn-boton {
  overflow:hidden
}
.dn-boton svg {
  transition:transform .35s cubic-bezier(.3,1.6,.5,1)
}
.dn-boton.toque {
  animation:dn-salto .5s cubic-bezier(.3,1.5,.5,1)
}
@keyframes dn-salto {
  0% { scale:1 1 }
  30% { scale:1.1 .86 }
  60% { scale:.94 1.08 }
  100% { scale:1 1 }
}
@keyframes dn-baile {
  0%,100% { transform:translateX(0) rotate(0) }
  25% { transform:translateX(4px) rotate(-12deg) }
  50% { transform:translateX(7px) rotate(0) }
  75% { transform:translateX(4px) rotate(12deg) }
}

.cf-boton {
  overflow:hidden
}
.cf-boton::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--cf-cafe);
  transform:scaleY(0);
  transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.65,0,.35,1)
}
.cf-boton-linea::before {
  background:var(--cf-verde)
}
.cf-boton svg {
  transition:transform .45s cubic-bezier(.3,1.6,.5,1)
}
.cf-boton.toque {
  animation:nuevo-rebote .45s cubic-bezier(.3,1.6,.5,1)
}

.ev-flecha svg {
  display:inline-block
}
@keyframes vuelo-derecha {
  0% { transform:translateX(0);opacity:1 }
  45% { transform:translateX(130%);opacity:0 }
  46% { transform:translateX(-130%);opacity:0 }
  100% { transform:translateX(0);opacity:1 }
}
@keyframes vuelo-izquierda {
  0% { transform:translateX(0);opacity:1 }
  45% { transform:translateX(-130%);opacity:0 }
  46% { transform:translateX(130%);opacity:0 }
  100% { transform:translateX(0);opacity:1 }
}
@keyframes vuelo-diagonal {
  0% { transform:translate(0,0);opacity:1 }
  45% { transform:translate(110%,-110%);opacity:0 }
  46% { transform:translate(-110%,110%);opacity:0 }
  100% { transform:translate(0,0);opacity:1 }
}
.ev-flecha.toque svg,
.ev-flecha-siguiente.toque svg {
  animation:vuelo-derecha .5s cubic-bezier(.6,0,.4,1)
}
.ev-flecha-anterior.toque svg {
  animation:vuelo-izquierda .5s cubic-bezier(.6,0,.4,1)
}

@media(hover:hover) and (pointer:fine) {
  .boton:hover::before {
    transform:translateX(260%) skewX(-18deg);
    transition:transform .75s cubic-bezier(.4,0,.2,1)
  }
  .boton:hover .icono-svg {
    transform:rotate(45deg) scale(1.15)
  }
  .nuevo-boton:hover {
    background:var(--rojo);
    transform:none
  }
  .nuevo-boton-oscuro:hover {
    background:var(--tinta)
  }
  .nuevo-boton:hover::before {
    transform:scaleX(1)
  }
  .nuevo-boton:hover .icono-svg {
    transform:translateX(4px) rotate(45deg)
  }
  .sm-boton:hover::after {
    animation:sm-pulso 1.2s ease-out infinite
  }
  .sm-boton:hover svg,
  .sm-enlace:hover svg {
    transform:translateX(5px)
  }

  .dn-boton:not([aria-disabled=true]):hover {
    box-shadow:5px 5px 0 #000
  }
  .dn-boton:not([aria-disabled=true]):hover svg {
    animation:dn-baile .6s ease-in-out infinite
  }
  .cf-boton:hover {
    border-color:var(--cf-cafe);
    background:var(--cf-verde);
    color:var(--cf-papel);
    transform:none
  }
  .cf-boton-linea:hover {
    border-color:var(--cf-verde)
  }
  .cf-boton:hover::before {
    transform:scaleY(1)
  }
  .cf-boton:hover svg {
    transform:translateX(5px) rotate(-8deg)
  }
  .ev-flecha:hover svg {
    animation:vuelo-derecha .55s cubic-bezier(.6,0,.4,1)
  }
  .ev-flecha-anterior:hover svg {
    animation:vuelo-izquierda .55s cubic-bezier(.6,0,.4,1)
  }

}

@media(prefers-reduced-motion:reduce) {
  .onda,
  .boton.toque::before,
  .nuevo-boton.toque,
  .sm-boton.toque::after,
  .dn-boton.toque,
  .cf-boton.toque,
  .ev-flecha.toque svg {
    animation:none
  }
  .boton::before,
  .nuevo-boton::before,
  .cf-boton::before,
  .boton .icono-svg,
  .nuevo-boton .icono-svg,
  .sm-boton svg,
  .dn-boton svg,
  .cf-boton svg {
    transition:none
  }
}