/* Tipografía y Reset */
@import url(‘https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;1,700&display=swap’);
.tappli-wrapper {
margin: 0;
padding: 20px 0;
font-family: ‘Plus Jakarta Sans’, sans-serif;
background: #000;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
line-height: 1.4;
}
.tappli-card {
width: 360px;
border-radius: 40px;
background: #0a0a0a;
box-shadow: 0 0 80px rgba(255, 30, 66, 0.25);
padding: 30px;
position: relative;
overflow: hidden;
z-index: 1;
}
/* Efecto de fondo de puntos */
.tappli-texture {
position: absolute;
inset: 0;
background-image: radial-gradient(#FF1E42 1px, transparent 1px);
background-size: 12px 12px;
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
/* Lógica del QR con Checkbox */
#qrToggle { display: none; }
.qr-label {
cursor: pointer;
display: inline-block;
margin-top: 10px;
position: relative;
z-index: 10;
}
.qr-img {
width: 65px;
height: 65px;
border-radius: 50%;
background: #fff;
padding: 6px;
box-shadow: 0 0 10px rgba(255, 30, 66, 0.5);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
object-fit: contain;
}
#qrToggle:checked ~ .qr-label .qr-img {
transform: scale(2.8);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}
/* Botones y Enlaces */
.tappli-btn {
text-align: center;
text-decoration: none;
transition: opacity 0.2s;
}
.tappli-btn:hover {
opacity: 0.9;
}
.social-icon {
display: inline-flex;
margin: 0 8px;
width: 40px;
height: 40px;
border: 2px solid #FF1E42;
border-radius: 50%;
align-items: center;
justify-content: center;
color: #FF1E42;
text-decoration: none;
font-weight: bold;
}
ALEJANDRO GARZA 🏋️
Promo video – Fitness Coach
Alejandro Garza
<?php
return ob_get_clean();
}
// Registro del shortcode en WordPress
add_shortcode('wp_alejandro_garza_fitness', 'wp_alejandro_garza_fitness_handler');
