/* ============================================================
GLAMLINKS PRO - RELEASE CANDIDATE 2.2 (VISUAL POLISH)
REVISIÓN: 2026.01.13.CR2.2 (Namespace: glpro-)
FIXES: ROUNDED HEADER CORNERS + WIDE CALL BUTTON
============================================================ */
/* 1. LIENZO Y CONTENEDOR */
.glpro-canvas {
font-family: 'Montserrat', sans-serif !important;
color: #E0E0E0 !important;
width: 100% !important;
position: relative;
overflow: visible !important;
}
.glpro-main-card {
max-width: 1000px !important; width: 95% !important;
margin: 60px auto !important; padding: 40px !important;
background: rgba(12, 12, 12, 0.92) !important; /* Fondo oscuro elegante */
backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
border-radius: 25px !important;
box-shadow: 0 30px 80px rgba(0,0,0,0.95);
position: relative !important; overflow: visible !important;
z-index: 10;
box-sizing: border-box !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* TEMAS */
.glpro-theme-yari { --glp-c1: #00FF00; --glp-c2: #FFD700; }
.glpro-theme-forever { --glp-c1: #FF00FF; --glp-c2: #00FF00; }
/* 2. ANILLO DE ENERGÍA */
@keyframes glpro-surge { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.glpro-energy-ring::after {
content: ''; position: absolute;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
border-radius: 25px; padding: 3px;
background-image: linear-gradient(90deg, transparent, var(--glp-c1), var(--glp-c2), transparent);
background-size: 200% auto;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out; mask-composite: exclude;
animation: glpro-surge 4s linear infinite; pointer-events: none; z-index: 100;
}
/* 3. HEADER (ESQUINAS REDONDEADAS CORREGIDAS) */
.glpro-header {
text-align: center !important; margin-bottom: 60px !important;
padding: 40px 20px 50px 20px !important;
border-bottom: 1px solid rgba(255,255,255,0.15) !important;
position: relative; overflow: visible !important;
/* CRÍTICO: Redondear esquinas superiores para que el badge encaje */
border-radius: 25px 25px 20px 20px !important;
background: transparent !important; z-index: 20;
}
/* Nebula Layer */
.glpro-nebula-layer {
position: absolute; inset: 0; z-index: 0;
border-radius: 25px 25px 20px 20px !important; /* Sigue la forma del header */
overflow: hidden;
}
@keyframes glpro-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.glpro-nebula-layer::before {
content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
background: radial-gradient(circle at 30% 30%, var(--glp-c1) 0%, transparent 65%),
radial-gradient(circle at 70% 70%, var(--glp-c2) 0%, transparent 65%);
animation: glpro-spin 15s linear infinite; opacity: 0.6; filter: blur(50px);
}
.glpro-header-content { position: relative; z-index: 10; }
/* 4. BADGE VERIFIED (AJUSTE DE CURVA) */
.glpro-verified-badge {
position: absolute; top: 0; right: 0; z-index: 100;
background: linear-gradient(135deg, #DAA520, #FFD700);
padding: 7px 20px;
/* Forma redondeada en la esquina para encajar con el header */
border-top-right-radius: 25px !important;
border-bottom-left-radius: 15px;
font-weight: 900; font-size: 0.75em; color: #000; letter-spacing: 0.5px;
box-shadow: -2px 2px 10px rgba(0,0,0,0.3);
}
/* 5. BOTONES PRINCIPALES */
.glpro-btn-row {
display: flex !important; justify-content: center !important; gap: 50px !important;
margin-top: 25px !important; flex-wrap: wrap !important;
position: relative; z-index: 50;
}
.glpro-pill {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 200px !important; height: 50px !important;
background: #000 !important; border-radius: 50px !important;
color: #fff !important; font-size: 0.9em !important; font-weight: 800 !important;
text-transform: uppercase !important; text-decoration: none !important; letter-spacing: 1px !important;
transition: 0.3s !important; cursor: pointer !important;
position: absolute; top: 0; left: 0;
}
.glpro-btn-showcase {
position: relative !important;
border: 2px solid var(--glp-c1) !important; color: var(--glp-c1) !important;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
}
.glpro-btn-showcase:hover { background: var(--glp-c1) !important; color: #000 !important; box-shadow: 0 0 25px var(--glp-c1) !important; transform: translateY(-3px); }
/* Morphing Networks */
.glpro-morph-container { position: relative !important; width: 200px !important; height: 50px !important; }
.glpro-btn-socials { border: 2px solid var(--glp-c2) !important; color: var(--glp-c2) !important; box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important; z-index: 2; opacity: 1; transform: scale(1); }
.glpro-icons-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 1; opacity: 0; transform: scale(0.8); pointer-events: none; transition: 0.4s; }
.glpro-morph-container:hover .glpro-btn-socials { opacity: 0; transform: scale(0.5); pointer-events: none; }
.glpro-morph-container:hover .glpro-icons-layer { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 10; }
.glpro-mini-square { width: 38px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; color: #fff !important; font-size: 1.2rem !important; text-decoration: none !important; transition: 0.3s !important; border: 1px solid rgba(255,255,255,0.2) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.glpro-mini-square:hover { transform: translateY(-2px) scale(1.1); filter: brightness(1.2); }
.social-email { background: #D44638 !important; } .social-fb { background: #1877F2 !important; } .social-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
/* 6. WHATSAPP BADGE (CORRECCIÓN DE ANCHO Y TEXTO) */
.glpro-phone-tag {
position: absolute !important;
bottom: -18px !important; /* Cuelga del borde */
left: 50% !important; transform: translateX(-50%) !important;
display: inline-flex !important; align-items: center; justify-content: center;
background: #000 !important;
/* ANCHO AUTOMÁTICO PERO MÍNIMO PARA QUE NO SE APLASTE */
width: auto !important;
min-width: 170px !important; /* Suficiente espacio para el número */
padding: 12px 30px !important; /* Relleno generoso */
border-radius: 50px !important; /* Forma de píldora elegante */
border: 2px solid rgba(255, 255, 255, 0.4);
color: #fff; text-decoration: none; transition: 0.3s;
white-space: nowrap !important; /* PROHIBIDO ROMPER LÍNEA */
z-index: 200 !important;
box-shadow: 0 10px 30px rgba(0,0,0,1);
}
.glpro-phone-tag:hover { width: auto !important; background: var(--glp-c1) !important; color: #000 !important; border-color: var(--glp-c1); }
.glpro-phone-text { font-size: 1.1rem; font-weight: 800; margin-left: 10px; }
/* 7. TARJETA VIRTUAL */
.glpro-card-anchor { float: right !important; width: 260px !important; height: 412px !important; min-height: 412px !important; margin: 10px 0 25px 25px !important; perspective: 1500px !important; z-index: 40; position: relative; display: block !important; }
.glpro-card-inner { position: relative !important; width: 100% !important; height: 100% !important; transition: transform 0.8s; transform-style: preserve-3d; }
.glpro-card-anchor:hover .glpro-card-inner { transform: rotateY(180deg); }
.glpro-card-face { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; backface-visibility: hidden; border-radius: 20px; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; border: 1px solid rgba(255, 255, 255, 0.2); background-color: #0a0a0a; }
.glpro-card-back { transform: rotateY(180deg); }
.glpro-ribbon { position: absolute; bottom: 20px; left: 12px; right: 12px; padding: 10px; text-align: center; border-radius: 10px; font-weight: 900; font-size: 0.7rem; color: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); text-transform: uppercase; }
/* 8. CONTENIDOS Y EFECTOS */
.glpro-prof-name { font-family: 'Playfair Display', serif !important; font-size: clamp(2.5rem, 6vw, 4rem) !important; color: #fff; margin: 0; text-shadow: 0 5px 15px #000; position: relative; z-index: 5; }
.glpro-tagline { font-family: 'Montserrat', sans-serif !important; color: #00FFFF; text-transform: uppercase; letter-spacing: 3px; margin-top: 5px; position: relative; z-index: 5; }
.glpro-measurements { color: #ccc; font-size: 0.9em; margin-top: 8px; letter-spacing: 1px; position: relative; z-index: 5; }
.glpro-section { margin-bottom: 40px; padding: 0 !important; clear: both; }
.glpro-bio-text p { margin-bottom: 20px !important; line-height: 1.8 !important; text-align: left !important; font-weight: 300 !important; }
.glpro-service-box { width: 100% !important; max-width: 800px !important; margin: 0 auto 12px auto !important; padding: 18px 25px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 15px !important; color: #fff !important; transition: 0.3s ease !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; }
.glpro-service-box:hover { transform: translateX(10px) !important; background: rgba(255,255,255,0.1) !important; border-color: var(--glp-c1) !important; }
.glpro-inlay-icon { position: absolute; top: 0; left: 0; width: 55px; height: 45px; z-index: 100; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border: 1px solid rgba(255,255,255,0.1); }
.glpro-footer { text-align: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }
/* SHINE EFFECT (Texto Seguro) */
@keyframes glpro-shine-move { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.glpro-prof-name,
.glpro-signature,
.glpro-section h2 {
font-family: 'Playfair Display', serif !important;
font-weight: 700 !important;
color: #fff !important;
background: linear-gradient(110deg, var(--glp-c1) 20%, #ffffff 50%, var(--glp-c2) 80%);
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: glpro-shine-move 4s linear infinite;
filter: drop-shadow(0 2px 10px rgba(255,255,255,0.3));
display: inline-block;
}
.glpro-section h2 { font-size: 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin-bottom: 25px; text-align: left !important; padding-left: 20px !important; width: 100%; }
.glpro-signature { font-size: 2.3rem; letter-spacing: 4px; }
@media (max-width: 768px) {
.glpro-btn-row { flex-direction: column; align-items: center; gap: 15px !important; }
.glpro-card-anchor { float: none; margin: 20px auto !important; display: block; }
}
Bio & Experiencia
Desde el corazón de Río Grande, Puerto Rico, Yarimar Robles ha forjado una pasión que ha crecido con fuerza durante más de una década en la industria. Como maquillista profesional, peinadora y modelo con 12 años de trayectoria, se ha especializado en los últimos dos años en el arte del maquillaje y peinados de alta elaboración, creando experiencias de empoderamiento profundo.
Sus logros incluyen colaboraciones en plataformas de prestigio como San Juan Moda y Luxury Fashion Week. Su talento cruzó fronteras al participar en el New York Fashion Week (NYFW), donde no solo desfiló en pasarela, sino que tuvo la oportunidad de liderar el estilismo de sus compañeras modelos.
Reconocida con el primer lugar en competencias profesionales y habiendo trabajado con figuras como Tayme Díaz, Yarimar entiende su arte como un vehículo para transmitir amor, alegría y energía positiva a cada persona que confía en sus manos.
Servicios Exclusivos
• Maquillaje y Estilismo Nupcial (Novias & Séquitos)
• Estilismo de Pasarela Internacional (NYFW / SJ Moda)
• Maquillaje Profesional de Gala y Peinado Elaborado
• Consultoría de Imagen y Empoderamiento Visual
