:root{
  --apm-fx-c1: rgba(255,255,255,.5);
  --apm-fx-c2: rgba(255,255,255,.75);
  --apm-fx-c3: rgba(255,255,255,.95);
}

[class*="apm-fx-"]{position:relative;overflow:hidden}

/* 1. apm-fx-cuadros - Cuadros que se unen */
.apm-fx-cuadros::before,.apm-fx-cuadros::after{content:'';position:absolute;inset:0;background:var(--apm-fx-c1);opacity:.4;transition:clip-path .5s ease,opacity .4s ease .45s;pointer-events:none}
.apm-fx-cuadros::before{clip-path:polygon(0 0,0 0,0 0)}
.apm-fx-cuadros::after{clip-path:polygon(100% 100%,100% 100%,100% 100%)}
.apm-fx-cuadros:hover::before,.apm-fx-cuadros.apm-fx-is-touched::before{clip-path:polygon(0 0,100% 0,0 100%);opacity:0}
.apm-fx-cuadros:hover::after,.apm-fx-cuadros.apm-fx-is-touched::after{clip-path:polygon(100% 0,100% 100%,0 100%);opacity:0}

/* 2. apm-fx-brillo-diagonal */
.apm-fx-brillo-diagonal::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,var(--apm-fx-c2) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
.apm-fx-brillo-diagonal:hover::before,.apm-fx-brillo-diagonal.apm-fx-is-touched::before{transform:translateX(120%)}

/* 3. apm-fx-velo */
.apm-fx-velo::before{content:'';position:absolute;inset:0;background:var(--apm-fx-c1);opacity:0;transition:opacity .4s ease;pointer-events:none}
.apm-fx-velo:hover::before,.apm-fx-velo.apm-fx-is-touched::before{opacity:.35}

/* 4. apm-fx-marco */
.apm-fx-marco::before{content:'';position:absolute;inset:8px;border:1px solid var(--apm-fx-c2);border-radius:8px;opacity:0;transform:scale(.94);transition:all .35s ease;pointer-events:none}
.apm-fx-marco:hover::before,.apm-fx-marco.apm-fx-is-touched::before{opacity:1;transform:scale(1)}

/* 5. apm-fx-vineta */
.apm-fx-vineta::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 0 rgba(0,0,0,0);transition:box-shadow .4s ease;pointer-events:none}
.apm-fx-vineta:hover::before,.apm-fx-vineta.apm-fx-is-touched::before{box-shadow:inset 0 0 40px 10px var(--apm-fx-c1)}

/* 6. apm-fx-lineas-diagonales */
.apm-fx-lineas-diagonales::before{content:'';position:absolute;inset:-20%;background:repeating-linear-gradient(60deg,transparent 0 14px,var(--apm-fx-c2) 14px 16px);opacity:0;transform:translateX(-10%);transition:all .4s ease;pointer-events:none}
.apm-fx-lineas-diagonales:hover::before,.apm-fx-lineas-diagonales.apm-fx-is-touched::before{opacity:1;transform:translateX(0)}

/* 7. apm-fx-esquinas */
.apm-fx-esquinas::before,.apm-fx-esquinas::after{content:'';position:absolute;width:18px;height:18px;border:2px solid var(--apm-fx-c3);opacity:0;transition:all .4s ease;pointer-events:none}
.apm-fx-esquinas::before{top:14px;left:14px;border-right:0;border-bottom:0}
.apm-fx-esquinas::after{bottom:14px;right:14px;border-left:0;border-top:0}
.apm-fx-esquinas:hover::before,.apm-fx-esquinas.apm-fx-is-touched::before{opacity:1;top:8px;left:8px}
.apm-fx-esquinas:hover::after,.apm-fx-esquinas.apm-fx-is-touched::after{opacity:1;bottom:8px;right:8px}

/* 8. apm-fx-resplandor */
.apm-fx-resplandor::before{content:'';position:absolute;width:140px;height:140px;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);border-radius:50%;background:radial-gradient(circle,var(--apm-fx-c2),transparent 70%);opacity:0;transition:all .4s ease;pointer-events:none}
.apm-fx-resplandor:hover::before,.apm-fx-resplandor.apm-fx-is-touched::before{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* 9. apm-fx-franja */
.apm-fx-franja::before{content:'';position:absolute;top:0;bottom:0;left:-10%;width:35%;background:var(--apm-fx-c1);transform:skewX(-12deg) translateX(-140%);transition:transform .6s ease;pointer-events:none}
.apm-fx-franja:hover::before,.apm-fx-franja.apm-fx-is-touched::before{transform:skewX(-12deg) translateX(340%)}

/* 10. apm-fx-puntos */
.apm-fx-puntos::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--apm-fx-c2) 1.5px,transparent 1.5px);background-size:14px 14px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.apm-fx-puntos:hover::before,.apm-fx-puntos.apm-fx-is-touched::before{opacity:1}

/* 11. apm-fx-onda */
.apm-fx-onda::before{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;border:2px solid var(--apm-fx-c3);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.apm-fx-onda:hover::before,.apm-fx-onda.apm-fx-is-touched::before{animation:apmFxRipple .8s ease-out}
@keyframes apmFxRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(14);opacity:0}}

/* 12. apm-fx-cruz */
.apm-fx-cruz::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:var(--apm-fx-c2);transform:scaleX(0);transition:transform .4s ease;pointer-events:none}
.apm-fx-cruz::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--apm-fx-c2);transform:scaleY(0);transition:transform .4s ease;pointer-events:none}
.apm-fx-cruz:hover::before,.apm-fx-cruz.apm-fx-is-touched::before{transform:scaleX(1)}
.apm-fx-cruz:hover::after,.apm-fx-cruz.apm-fx-is-touched::after{transform:scaleY(1)}

/* 13. apm-fx-borde-pulsante */
.apm-fx-borde-pulsante::before{content:'';position:absolute;inset:6px;border:2px solid var(--apm-fx-c2);border-radius:8px;opacity:0;transition:opacity .3s ease;pointer-events:none}
.apm-fx-borde-pulsante:hover::before,.apm-fx-borde-pulsante.apm-fx-is-touched::before{opacity:.5;animation:apmFxPulse 1.2s ease-in-out infinite}
@keyframes apmFxPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* 14. apm-fx-destello-esquina */
.apm-fx-destello-esquina::before{content:'';position:absolute;width:60px;height:60px;top:-30px;left:-30px;border-radius:50%;background:radial-gradient(circle,var(--apm-fx-c3),transparent 70%);opacity:0;transform:scale(.5);transition:all .4s ease;pointer-events:none}
.apm-fx-destello-esquina:hover::before,.apm-fx-destello-esquina.apm-fx-is-touched::before{opacity:1;transform:scale(1)}

/* 15. apm-fx-cortina */
.apm-fx-cortina::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--apm-fx-c1),transparent 70%);transform:translateY(100%);transition:transform .45s ease;pointer-events:none}
.apm-fx-cortina:hover::before,.apm-fx-cortina.apm-fx-is-touched::before{transform:translateY(0)}

/* 16. apm-fx-mancha */
.apm-fx-mancha::before{content:'';position:absolute;width:110px;height:90px;left:50%;top:50%;background:var(--apm-fx-c1);border-radius:60% 40% 55% 45%/45% 55% 40% 60%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:all .4s ease;pointer-events:none}
.apm-fx-mancha:hover::before,.apm-fx-mancha.apm-fx-is-touched::before{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* 17. apm-fx-doble-marco */
.apm-fx-doble-marco::before{content:'';position:absolute;inset:6px;border:1px solid var(--apm-fx-c2);border-radius:8px;opacity:0;transform:scale(1.05);transition:all .35s ease;pointer-events:none}
.apm-fx-doble-marco::after{content:'';position:absolute;inset:14px;border:1px solid var(--apm-fx-c3);border-radius:6px;opacity:0;transform:scale(.9);transition:all .35s ease;pointer-events:none}
.apm-fx-doble-marco:hover::before,.apm-fx-doble-marco.apm-fx-is-touched::before,
.apm-fx-doble-marco:hover::after,.apm-fx-doble-marco.apm-fx-is-touched::after{opacity:1;transform:scale(1)}

/* 18. apm-fx-diagonal */
.apm-fx-diagonal::before{content:'';position:absolute;inset:0;background:var(--apm-fx-c1);clip-path:polygon(0 0,0 0,0 100%);transition:clip-path .5s ease;pointer-events:none}
.apm-fx-diagonal:hover::before,.apm-fx-diagonal.apm-fx-is-touched::before{clip-path:polygon(0 0,100% 0,0 100%)}

/* 19. apm-fx-lineas-verticales */
.apm-fx-lineas-verticales::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--apm-fx-c2) 0 2px,transparent 2px 18px);opacity:0;transform:scaleX(.85);transition:all .4s ease;pointer-events:none}
.apm-fx-lineas-verticales:hover::before,.apm-fx-lineas-verticales.apm-fx-is-touched::before{opacity:1;transform:scaleX(1)}

/* 20. apm-fx-x */
.apm-fx-x::before{content:'';position:absolute;inset:0;background:linear-gradient(45deg,transparent 46%,var(--apm-fx-c2) 50%,transparent 54%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.apm-fx-x::after{content:'';position:absolute;inset:0;background:linear-gradient(-45deg,transparent 46%,var(--apm-fx-c2) 50%,transparent 54%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.apm-fx-x:hover::before,.apm-fx-x.apm-fx-is-touched::before,
.apm-fx-x:hover::after,.apm-fx-x.apm-fx-is-touched::after{opacity:1}