/* ===================================
DRAGONJARCON 2026 - LANDING PAGE ESTILOS
VERSIÓN CORREGIDA PARA WORDPRESS
VERSIÓN: 2.11 - Fix bloques prueba social + botones CTA reducidos + tarjetas precios alineados arriba
- Aislado con #dj-landing-container
- Compatible con DJ Master Design System V4
- Sin modificaciones al HTML o estructura
=================================== */
/* ====================
SCOPE ISOLATION
==================== */
#dj-landing-container {
/* Mapear variables de la landing a variables compatibles */
--landing-primary-red: #c11b05;
--landing-dark-bg: #000000;
--landing-text-light: #f5f5f5;
--landing-text-dark: #1c1c1c;
--landing-text-muted: #b0b0b0;
--landing-glass-bg: rgba(16, 16, 16, 0.7);
--landing-glass-border: rgba(255,255,255, 0.1);
--landing-card-bg: #101010;
--landing-light-bg: #f0f0f0;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
position: relative;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* Reset y base - SOLO EN ELEMENTOS DIRECTOS, NO UNIVERSAL */
#dj-landing-container > * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
box-sizing: border-box !important;
}
#dj-landing-container {
background-color: var(--landing-dark-bg);
color: var(--landing-text-light);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: radial-gradient(circle at 10% 20%, rgba(193, 27, 5, 0.25), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(193, 27, 5, 0.2), transparent 35%);
background-attachment: fixed;
position: relative;
z-index: auto;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* WordPress wrapper reset */
#dj-landing-container::before,
#dj-landing-container::after {
display: none !important;
content: none !important;
}
#dj-landing-container > p:first-child,
#dj-landing-container > br:first-child {
display: none !important;
}
#dj-landing-container > p:last-child,
#dj-landing-container > br:last-child {
display: none !important;
}
/* Contenedor general */
#dj-landing-container .container {
max-width: 1100px;
width: 90%;
margin: 0 auto;
text-align: center;
position: relative;
overflow-x: visible;
max-width: 100%;
}
#dj-landing-container section {
padding: 4rem 0;
position: relative;
}
/* ====================
TIPOGRAFÍA
==================== */
#dj-landing-container h1,
#dj-landing-container h2,
#dj-landing-container h3,
#dj-landing-container h4 {
line-height: 1.2 !important;
font-weight: 900 !important;
letter-spacing: -1px !important;
color: var(--landing-text-light) !important;
font-style: italic !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
#dj-landing-container h1 {
font-size: clamp(2.8rem, 7vw, 4.2rem) !important;
text-shadow: 0 0 30px rgba(0,0,0,0.5);
margin-bottom: 1.5rem !important;
}
#dj-landing-container h2 {
font-size: clamp(2rem, 5vw, 2.8rem) !important;
margin: 0 0 3rem 0 !important;
}
#dj-landing-container h3 {
font-size: 1.4rem !important;
margin-bottom: 1rem !important;
}
#dj-landing-container h4 {
font-size: 1.2rem !important;
margin-bottom: 1rem !important;
}
#dj-landing-container p,
#dj-landing-container li,
#dj-landing-container figcaption,
#dj-landing-container blockquote,
#dj-landing-container cite {
color: var(--landing-text-muted) !important;
font-size: clamp(1rem, 2.5vw, 1.1rem) !important;
line-height: 1.6 !important;
}
#dj-landing-container .highlight {
color: var(--landing-primary-red) !important;
}
/* Enlaces */
#dj-landing-container a {
color: var(--landing-primary-red) !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
background: transparent !important;
border-radius: 0 !important;
}
#dj-landing-container a:hover {
text-decoration: underline !important;
color: #e52812 !important;
background: transparent !important;
}
/* ====================
BOTONES CTA
==================== */
#dj-landing-container .cta-button:not(.cta-gallery-button) {
position: relative !important;
display: inline-block !important;
padding: 1.2rem 2.5rem !important;
font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 12px !important;
background: linear-gradient(135deg, var(--landing-primary-red) 0%, #d9250a 100%) !important;
color: var(--landing-text-light) !important;
cursor: pointer !important;
border: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 1 !important;
overflow: hidden !important;
width: fit-content !important;
max-width: 340px !important;
text-align: center !important;
letter-spacing: -0.02em !important;
box-shadow: 0 4px 15px rgba(193, 27, 5, 0.3) !important;
}
/* Para elementos con ambas clases, esta regla tiene mayor especificidad */
#dj-landing-container .cta-button.cta-gallery-button,
#dj-landing-container .cta-gallery-button.cta-button {
position: relative !important;
display: inline-block !important;
padding: 1.2rem 2.5rem !important;
font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 12px !important;
background: linear-gradient(135deg, var(--landing-primary-red) 0%, #d9250a 100%) !important;
color: var(--landing-text-light) !important;
cursor: pointer !important;
border: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 1 !important;
overflow: hidden !important;
width: fit-content !important;
max-width: 340px !important;
text-align: center !important;
letter-spacing: -0.02em !important;
box-shadow: 0 4px 15px rgba(193, 27, 5, 0.3) !important;
}
#dj-landing-container .cta-button:not(.cta-gallery-button)::before,
#dj-landing-container .cta-button.cta-gallery-button::before,
#dj-landing-container .cta-gallery-button.cta-button::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%) !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
z-index: -1 !important;
}
@keyframes pulse-glow-dj {
0% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 0.7; }
}
#dj-landing-container .cta-button:not(.cta-gallery-button):hover,
#dj-landing-container .cta-button.cta-gallery-button:hover,
#dj-landing-container .cta-gallery-button.cta-button:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(193, 27, 5, 0.4) !important;
text-decoration: none !important;
}
#dj-landing-container .cta-button:not(.cta-gallery-button):hover::before,
#dj-landing-container .cta-button.cta-gallery-button:hover::before,
#dj-landing-container .cta-gallery-button.cta-button:hover::before {
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%) !important;
}
#dj-landing-container .cta-button:disabled,
#dj-landing-container .cta-button-disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
background: #555 !important;
}
#dj-landing-container .cta-button:not(.cta-gallery-button):disabled::before,
#dj-landing-container .cta-button.cta-gallery-button:disabled::before,
#dj-landing-container .cta-gallery-button.cta-button:disabled::before {
animation: none !important;
box-shadow: none !important;
}
#dj-landing-container .cta-button-price {
font-size: 0.95rem !important;
padding: 0.8rem 2rem !important;
max-width: 280px !important;
width: fit-content !important;
border-radius: 8px !important;
box-shadow: 0 2px 10px rgba(193, 27, 5, 0.2) !important;
}
/* ====================
CARDS CON EFECTO GLASS
==================== */
#dj-landing-container .glass-card {
background: var(--landing-glass-bg) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid var(--landing-glass-border) !important;
border-radius: 24px !important;
padding: 2.5rem !important;
transition: transform 0.3s ease !important;
will-change: transform !important;
height: 100% !important;
}
#dj-landing-container .glass-card:hover {
transform: translateY(-8px) !important;
}
/* ====================
1. MENÚ DE NAVEGACIÓN (Sticky)
==================== */
#dj-landing-container .sticky-nav {
position: sticky !important;
top: 0 !important;
background: rgba(8, 8, 8, 0.95) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-bottom: 1px solid var(--landing-glass-border) !important;
z-index: 1000 !important;
padding: 1rem 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#dj-landing-container .nav-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: relative !important;
}
#dj-landing-container .nav-logo img {
height: 40px !important;
width: auto !important;
}
#dj-landing-container .nav-links {
display: flex !important;
gap: 2rem !important;
}
#dj-landing-container .nav-links a {
color: var(--landing-text-light) !important;
font-size: 1rem !important;
font-weight: 500 !important;
padding: 0.5rem 0 !important;
text-decoration: none !important;
background: transparent !important;
border-radius: 0 !important;
border: none !important;
}
#dj-landing-container .nav-links a:hover {
text-decoration: underline !important;
background: transparent !important;
border-radius: 0 !important;
}
#dj-landing-container .nav-cta {
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
padding: 0.75rem 1.5rem !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 1rem !important;
text-decoration: none !important;
border: none !important;
white-space: nowrap !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
}
#dj-landing-container .nav-cta:hover {
background: #e52812 !important;
text-decoration: none !important;
}
#dj-landing-container .mobile-menu-toggle {
display: none !important;
background: none !important;
border: none !important;
color: var(--landing-text-light) !important;
font-size: 2rem !important;
cursor: pointer !important;
z-index: 1001 !important;
position: relative !important;
padding: 0.5rem !important;
-webkit-tap-highlight-color: transparent !important;
}
#dj-landing-container .mobile-menu {
display: none !important;
visibility: hidden !important;
flex-direction: column !important;
gap: 1rem !important;
padding: 2rem 0 !important;
border-top: 1px solid var(--landing-glass-border) !important;
background: rgba(8, 8, 8, 0.95) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
z-index: 999 !important;
}
#dj-landing-container .mobile-menu.active {
display: flex !important;
visibility: visible !important;
}
#dj-landing-container .mobile-menu a {
color: var(--landing-text-light) !important;
padding: 1rem 0 !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
background: transparent !important;
border-radius: 0 !important;
border: none !important;
}
#dj-landing-container .mobile-menu a:hover {
color: var(--landing-primary-red) !important;
background: transparent !important;
}
/* Asegurar que el menú móvil esté oculto en escritorio */
@media (min-width: 769px) {
#dj-landing-container .mobile-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
#dj-landing-container .mobile-menu.active {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
}
/* ====================
2. HERO SECTION
==================== */
#dj-landing-container .hero-header {
padding: 5rem 0 4rem 0 !important;
}
#dj-landing-container .hero-content {
max-width: 800px !important;
margin: 0 auto !important;
}
#dj-landing-container .hero-headline {
font-size: clamp(2.2rem, 6vw, 3.8rem) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin-bottom: 1rem !important;
color: var(--landing-text-light) !important;
letter-spacing: -1px !important;
}
#dj-landing-container .hero-subheadline {
font-size: clamp(1.4rem, 4vw, 2rem) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin-bottom: 2rem !important;
color: var(--landing-text-light) !important;
}
#dj-landing-container .hero-header .tagline {
font-size: clamp(1.1rem, 3vw, 1.3rem) !important;
font-weight: 400 !important;
margin: 1.5rem auto 3rem auto !important;
color: var(--landing-text-muted) !important;
}
/* Formulario de captación */
#dj-landing-container .form-container {
max-width: 500px !important;
width: 100% !important;
margin: 0 auto !important;
}
#dj-landing-container .form-iframe-wrapper {
height: 462px !important;
width: 100% !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 20px rgba(193, 27, 5, 0.15) !important;
}
#dj-landing-container .form-iframe-wrapper iframe {
width: 100% !important;
height: 100% !important;
border: none !important;
border-radius: 12px !important;
visibility: visible !important;
display: block !important;
z-index: 1 !important;
}
/* Corrección para wrappers insertados por el script de carga del formulario */
#dj-landing-container .ep-wrapper {
height: 462px !important;
width: 100% !important;
overflow: visible !important;
position: relative !important;
}
#dj-landing-container .ep-wrapper iframe {
width: 100% !important;
height: 462px !important;
border: none !important;
border-radius: 12px !important;
visibility: visible !important;
display: block !important;
}
/* Asegurar que todos los iframes en la landing sean visibles */
#dj-landing-container iframe {
visibility: visible !important;
display: block !important;
}
/* Asegurar que el formulario del hero sea visible en mobile */
#dj-landing-container #hero .form-iframe-wrapper {
z-index: 1000 !important;
position: relative !important;
}
#dj-landing-container #hero .form-container {
z-index: 1000 !important;
position: relative !important;
}
#dj-landing-container .form-headline {
font-size: clamp(1.5rem, 4vw, 2rem) !important;
color: var(--landing-text-light) !important;
font-weight: 900 !important;
margin-bottom: 0.75rem !important;
line-height: 1.2 !important;
font-style: italic !important;
}
#dj-landing-container .form-subheadline {
font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
color: var(--landing-text-muted) !important;
margin-bottom: 1.5rem !important;
line-height: 1.6 !important;
}
#dj-landing-container .hero-details {
margin-top: 2rem !important;
padding-top: 2rem !important;
border-top: 1px solid var(--landing-glass-border) !important;
}
#dj-landing-container .hero-details p {
font-size: 1.1rem !important;
color: var(--landing-text-muted) !important;
margin: 0.5rem 0 !important;
}
/* ====================
GRIDS GENERALES
==================== */
#dj-landing-container .benefits-grid,
#dj-landing-container .incluye-grid,
#dj-landing-container .stats-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 1.5rem !important;
}
#dj-landing-container .benefit-card,
#dj-landing-container .incluye-card,
#dj-landing-container .stat-card {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 1rem !important;
}
#dj-landing-container .benefit-card h3,
#dj-landing-container .incluye-card h3,
#dj-landing-container .stat-card h3 {
font-size: 1.3rem !important;
font-weight: 700 !important;
margin: 0 0 0.5rem 0 !important;
color: var(--landing-text-light) !important;
}
#dj-landing-container .benefit-card .subtitle {
color: var(--landing-primary-red) !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
}
#dj-landing-container .benefit-card .pain,
#dj-landing-container .benefit-card .gain {
font-size: 1rem !important;
line-height: 1.6 !important;
}
#dj-landing-container .benefit-card .pain {
color: var(--landing-text-muted) !important;
}
#dj-landing-container .benefit-card .gain {
color: var(--landing-text-light) !important;
font-weight: 500 !important;
}
/* ====================
4. EL PROBLEMA - Comparación
==================== */
#dj-landing-container .comparison-table {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
gap: 2rem !important;
align-items: start !important;
margin: 3rem 0 !important;
}
#dj-landing-container .comparison-column {
text-align: left !important;
padding: 2rem !important;
background: var(--landing-card-bg) !important;
border: 1px solid var(--landing-glass-border) !important;
border-radius: 16px !important;
}
#dj-landing-container .comparison-column h3 {
font-size: 1.2rem !important;
color: var(--landing-text-muted) !important;
margin-bottom: 1.5rem !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
#dj-landing-container .comparison-column.after h3 {
color: var(--landing-primary-red) !important;
}
#dj-landing-container .comparison-column ul {
list-style: none !important;
padding: 0 !important;
}
#dj-landing-container .comparison-column li {
padding: 0.75rem 0 !important;
padding-left: 1.5rem !important;
position: relative !important;
line-height: 1.6 !important;
}
#dj-landing-container .comparison-column.before li::before {
content: '✗' !important;
color: #ff4444 !important;
position: absolute !important;
left: 0 !important;
font-weight: 700 !important;
}
#dj-landing-container .comparison-column.after li::before {
content: '✓' !important;
color: var(--landing-primary-red) !important;
position: absolute !important;
left: 0 !important;
font-weight: 700 !important;
}
#dj-landing-container .comparison-arrow {
font-size: 3rem !important;
color: var(--landing-primary-red) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#dj-landing-container .key-message {
background: linear-gradient(135deg, var(--landing-glass-bg), rgba(193, 27, 5, 0.2)) !important;
border: 1px solid var(--landing-primary-red) !important;
border-radius: 16px !important;
padding: 2rem !important;
margin-top: 2rem !important;
}
#dj-landing-container .key-message p {
font-size: 1rem !important;
color: var(--landing-text-light) !important;
line-height: 1.5 !important;
}
#dj-landing-container .key-message p:first-of-type {
margin-bottom: 1rem !important;
}
/* ====================
5. PRUEBA SOCIAL
==================== */
#dj-landing-container .slider-section {
margin: 3rem 0 !important;
}
#dj-landing-container .slider-title {
font-size: 1.5rem !important;
color: var(--landing-text-light) !important;
margin-bottom: 1.5rem !important;
font-weight: 700 !important;
}
#dj-landing-container .slider-container {
position: relative !important;
overflow: visible !important;
border-radius: 20px !important;
background: var(--landing-glass-bg) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid var(--landing-glass-border) !important;
max-width: 100% !important;
}
#dj-landing-container .slider-track {
display: flex !important;
width: 100% !important;
transition: transform 0.5s ease-in-out !important;
overflow: visible !important;
max-width: 100% !important;
}
#dj-landing-container .slide {
flex: 0 0 100% !important;
min-width: 0 !important;
padding: 1rem !important;
}
#dj-landing-container .video-wrapper {
position: relative !important;
padding-bottom: 56.25% !important;
height: 0 !important;
overflow: hidden !important;
border-radius: 16px !important;
background: var(--landing-card-bg) !important;
}
#dj-landing-container .video-wrapper iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
}
#dj-landing-container .video-placeholder,
#dj-landing-container .photo-placeholder {
height: 400px !important;
background: rgba(193, 27, 5, 0.08) !important;
border: 2px dashed var(--landing-glass-border) !important;
border-radius: 16px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
color: var(--landing-text-muted) !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
}
#dj-landing-container .video-placeholder:hover,
#dj-landing-container .photo-placeholder:hover {
border-color: var(--landing-primary-red) !important;
background: rgba(193, 27, 5, 0.12) !important;
}
#dj-landing-container .photo-wrapper {
height: 400px !important;
border-radius: 16px !important;
overflow: hidden !important;
background: var(--landing-card-bg) !important;
}
#dj-landing-container .photo-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.3s ease !important;
}
#dj-landing-container .photo-wrapper:hover img {
transform: scale(1.05) !important;
}
#dj-landing-container .video-icon {
font-size: 3rem !important;
margin-bottom: 1rem !important;
color: var(--landing-primary-red) !important;
}
#dj-landing-container .photo-icon {
font-size: 3rem !important;
margin-bottom: 1rem !important;
}
#dj-landing-container .slider-arrow {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: rgba(193, 27, 5, 0.9) !important;
border: none !important;
color: var(--landing-text-light) !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
z-index: 100 !important;
-webkit-tap-highlight-color: transparent !important;
}
#dj-landing-container .slider-arrow:hover {
background: var(--landing-primary-red) !important;
transform: translateY(-50%) scale(1.1) !important;
}
#dj-landing-container .slider-arrow-left {
left: 1rem !important;
}
#dj-landing-container .slider-arrow-right {
right: 1rem !important;
}
#dj-landing-container .slider-dots {
display: flex !important;
justify-content: center !important;
gap: 0.75rem !important;
margin-top: 1.5rem !important;
}
#dj-landing-container .dot {
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background: var(--landing-glass-border) !important;
border: 2px solid var(--landing-glass-border) !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
#dj-landing-container .dot:hover {
background: rgba(193, 27, 5, 0.5) !important;
border-color: var(--landing-primary-red) !important;
}
#dj-landing-container .dot.active {
background: var(--landing-primary-red) !important;
border-color: var(--landing-primary-red) !important;
}
#dj-landing-container .gallery-cta-container {
display: flex !important;
justify-content: center !important;
margin-top: 2rem !important;
}
/* Botones solo con cta-gallery-button (sin cta-button) */
#dj-landing-container .cta-gallery-button:not(.cta-button) {
display: inline-block !important;
padding: 1rem 2rem !important;
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
font-weight: 900 !important;
font-size: 1rem !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
font-style: italic !important;
text-decoration: none !important;
}
#dj-landing-container .cta-gallery-button:not(.cta-button):hover {
background: #d9250a !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 30px rgba(193, 27, 5, 0.4) !important;
}
#dj-landing-container .cta-gallery-button:not(.cta-button):active {
transform: translateY(0) !important;
}
/* ====================
TESTIMONIOS
==================== */
#dj-landing-container .testimonials-section {
margin: 3rem 0 !important;
}
#dj-landing-container .testimonials-container {
position: relative !important;
overflow: visible !important;
border-radius: 20px !important;
background: var(--landing-glass-bg) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid var(--landing-glass-border) !important;
padding: 0 !important;
max-width: 100% !important;
}
#dj-landing-container .testimonials-track {
display: flex !important;
width: 100% !important;
transition: transform 0.5s ease-in-out !important;
overflow: visible !important;
max-width: 100% !important;
}
#dj-landing-container .testimonial-slide {
flex: 0 0 100% !important;
min-width: 0 !important;
padding: 0 !important;
}
#dj-landing-container .testimonial-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1rem !important;
padding: 2rem !important;
}
#dj-landing-container .testimonial-avatar {
position: relative !important;
width: 100px !important;
height: 100px !important;
margin-bottom: 0.5rem !important;
}
#dj-landing-container .testimonial-avatar img {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 3px solid var(--landing-primary-red) !important;
box-shadow: 0 0 20px rgba(193, 27, 5, 0.3) !important;
}
#dj-landing-container .quote-badge {
position: absolute !important;
top: -8px !important;
left: -8px !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
font-size: 1.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: Georgia, serif !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
#dj-landing-container .testimonial-name {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--landing-text-light) !important;
margin: 0 !important;
}
#dj-landing-container .testimonial-role {
font-size: 0.875rem !important;
color: var(--landing-primary-red) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin: 0 !important;
}
#dj-landing-container .testimonial-quote {
font-size: 1rem !important;
line-height: 1.7 !important;
color: var(--landing-text-muted) !important;
margin: 1rem 0 !important;
max-width: 600px !important;
}
#dj-landing-container .testimonial-cta {
display: inline-block !important;
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
padding: 0.75rem 2rem !important;
border-radius: 50px !important;
text-decoration: none !important;
font-weight: 700 !important;
transition: all 0.3s ease !important;
border: 2px solid var(--landing-primary-red) !important;
margin-top: 1rem !important;
}
#dj-landing-container .testimonial-cta:hover {
background: transparent !important;
color: var(--landing-primary-red) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(193, 27, 5, 0.3) !important;
}
#dj-landing-container .testimonial-arrow {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: rgba(193, 27, 5, 0.9) !important;
border: none !important;
color: var(--landing-text-light) !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
z-index: 100 !important;
-webkit-tap-highlight-color: transparent !important;
}
#dj-landing-container .testimonial-arrow:hover {
background: var(--landing-primary-red) !important;
transform: translateY(-50%) scale(1.1) !important;
}
#dj-landing-container .testimonial-arrow-left {
left: 1rem !important;
}
#dj-landing-container .testimonial-arrow-right {
right: 1rem !important;
}
#dj-landing-container .testimonial-dots {
display: flex !important;
justify-content: center !important;
gap: 0.75rem !important;
margin-top: 1.5rem !important;
}
#dj-landing-container .testimonial-dots .dot {
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background: var(--landing-glass-border) !important;
border: 2px solid var(--landing-glass-border) !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
#dj-landing-container .testimonial-dots .dot:hover {
background: rgba(193, 27, 5, 0.5) !important;
border-color: var(--landing-primary-red) !important;
}
#dj-landing-container .testimonial-dots .dot.active {
background: var(--landing-primary-red) !important;
border-color: var(--landing-primary-red) !important;
}
/* ====================
ESTADÍSTICAS
==================== */
#dj-landing-container .stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 2rem !important;
margin: 2rem 0 !important;
}
#dj-landing-container .stat-card {
text-align: center !important;
padding: 2rem !important;
}
#dj-landing-container .stat-number {
font-size: 3rem !important;
font-weight: 900 !important;
color: var(--landing-primary-red) !important;
line-height: 1 !important;
margin-bottom: 0.5rem !important;
}
#dj-landing-container .stat-label {
font-size: 1rem !important;
color: var(--landing-text-muted) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
/* ====================
6. LO QUE TE HACE DIFERENTE
==================== */
#dj-landing-container .benefits-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 1.5rem !important;
}
#dj-landing-container .benefit-card.glass-card {
text-align: left !important;
}
#dj-landing-container .benefit-card h3 {
font-size: 1.3rem !important;
margin: 0 0 0.5rem 0 !important;
color: var(--landing-text-light) !important;
}
/* ====================
7. LO QUE OBTIENES
==================== */
#dj-landing-container .incluye-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 1.5rem !important;
}
#dj-landing-container .incluye-card h3 {
font-size: 1.3rem !important;
margin: 0 0 0.5rem 0 !important;
color: var(--landing-text-light) !important;
}
/* ====================
8. PRECIOS
==================== */
#dj-landing-container .price-legend {
font-size: 1rem !important;
color: var(--landing-text-muted) !important;
margin-bottom: 3rem !important;
line-height: 1.6 !important;
text-align: center !important;
}
#dj-landing-container .pricing-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem !important;
margin: 2rem auto !important;
align-items: stretch !important;
}
/* Ignorar etiquetas insertadas por WordPress */
#dj-landing-container .pricing-grid > p {
display: none !important;
}
/* Solo las price-card deben ser parte del grid */
#dj-landing-container .pricing-grid > .price-card {
display: block !important;
}
#dj-landing-container .price-card {
background: var(--landing-card-bg) !important;
border: 1px solid var(--landing-glass-border) !important;
display: flex !important;
flex-direction: column !important;
border-radius: 24px !important;
padding: 2.5rem !important;
text-align: center !important;
transition: transform 0.3s ease, opacity 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
#dj-landing-container .price-card.inactive {
opacity: 0.6 !important;
justify-content: flex-start !important;
}
#dj-landing-container .price-card.inactive .cta-button-price,
#dj-landing-container .price-card.inactive .cta-button {
margin-top: 0 !important;
}
#dj-landing-container .price-card.inactive:hover {
transform: translateY(-5px) !important;
opacity: 0.8 !important;
}
#dj-landing-container .price-card:hover {
transform: translateY(-8px) !important;
}
#dj-landing-container .price-card.highlighted {
border-color: var(--landing-primary-red) !important;
transform: none !important;
box-shadow: 0 0 40px rgba(193, 27, 5, 0.5) !important;
scroll-margin-top: 80px !important;
}
#dj-landing-container .price-card.highlighted:hover {
transform: translateY(-8px) !important;
}
#dj-landing-container .price-card h3 {
font-size: 1.5rem !important;
margin: 0 0 0.5rem 0 !important;
color: var(--landing-text-light) !important;
}
#dj-landing-container .price-tag {
font-size: 3rem !important;
font-weight: 900 !important;
color: var(--landing-text-light) !important;
margin: 1rem 0 !important;
}
#dj-landing-container .price-tag span {
font-size: 1.5rem !important;
font-weight: 400 !important;
color: var(--landing-text-muted) !important;
}
#dj-landing-container .price-tag .strikethrough {
text-decoration: line-through !important;
color: var(--landing-text-muted) !important;
font-size: 2rem !important;
}
#dj-landing-container .badge {
display: inline-block !important;
padding: 0.5rem 1rem !important;
border-radius: 50px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
margin-bottom: 1rem !important;
}
#dj-landing-container .badge.closed {
background: #555 !important;
color: var(--landing-text-muted) !important;
}
#dj-landing-container .badge.active {
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
}
#dj-landing-container .badge.final {
background: var(--landing-glass-border) !important;
color: var(--landing-text-muted) !important;
border: 1px solid var(--landing-glass-border) !important;
}
#dj-landing-container .cta-buy-button {
display: inline-block !important;
width: 100% !important;
}
/* ====================
9. UBICACIÓN
==================== */
#dj-landing-container .location-card {
max-width: 600px !important;
margin: 2rem auto !important;
}
#dj-landing-container .location-detail {
display: flex !important;
align-items: center !important;
gap: 1rem !important;
padding: 1.5rem 0 !important;
border-bottom: 1px solid var(--landing-glass-border) !important;
text-align: left !important;
}
#dj-landing-container .location-detail:last-child {
border-bottom: none !important;
}
#dj-landing-container .location-icon {
font-size: 2rem !important;
min-width: 3rem !important;
}
#dj-landing-container .location-detail p {
margin: 0 !important;
color: var(--landing-text-light) !important;
}
#dj-landing-container .location-detail p:first-child {
font-weight: 700 !important;
}
/* ====================
10. FAQ
==================== */
#dj-landing-container .faq-item {
background: var(--landing-card-bg) !important;
border: 1px solid var(--landing-glass-border) !important;
border-radius: 16px !important;
margin-bottom: 1rem !important;
text-align: left !important;
overflow: hidden !important;
}
#dj-landing-container .faq-question {
padding: 1.5rem !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
cursor: pointer !important;
position: relative !important;
color: var(--landing-text-light) !important;
transition: background 0.3s ease !important;
}
#dj-landing-container .faq-question:hover {
background: rgba(193, 27, 5, 0.1) !important;
}
#dj-landing-container .faq-question::after {
content: '+' !important;
position: absolute !important;
right: 1.5rem !important;
font-size: 1.5rem !important;
transition: transform 0.3s ease !important;
color: var(--landing-primary-red) !important;
}
#dj-landing-container .faq-item.active .faq-question::after {
transform: rotate(45deg) !important;
}
#dj-landing-container .faq-answer {
max-height: 0 !important;
overflow: hidden !important;
transition: max-height 0.5s ease !important;
}
#dj-landing-container .faq-answer p {
padding: 0 1.5rem 1.5rem !important;
margin: 0 !important;
border-top: 1px solid var(--landing-glass-border) !important;
padding-top: 1.5rem !important;
color: var(--landing-text-muted) !important;
line-height: 1.6 !important;
}
#dj-landing-container .faq-item.active .faq-answer {
max-height: 500px !important;
}
/* ====================
11. CTA FINAL
==================== */
#dj-landing-container .contact-card {
padding: 3rem !important;
background: var(--landing-card-bg) !important;
border-radius: 16px !important;
border: 1px solid var(--landing-glass-border) !important;
max-width: 700px !important;
margin: 2rem auto !important;
}
#dj-landing-container .contact-card.glass-card {
background: var(--landing-glass-bg) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 24px !important;
padding: 2.5rem !important;
max-width: 500px !important;
}
#dj-landing-container .cta-headline {
font-size: clamp(1.8rem, 4.5vw, 2.4rem) !important;
font-weight: 900 !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
color: var(--landing-text-light) !important;
letter-spacing: -0.5px !important;
}
#dj-landing-container .cta-subheadline {
font-size: clamp(1.1rem, 3vw, 1.3rem) !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin-bottom: 2rem !important;
color: var(--landing-text-light) !important;
}
#dj-landing-container .contact-card h2 {
margin-bottom: 1rem !important;
}
/* Corrección específica para el formulario del CTA final */
#dj-landing-container #cta-final .contact-card.glass-card {
overflow: visible !important;
}
/* OCULTAR el formulario del CTA final - Mostrar solo botón */
#dj-landing-container #cta-final .form-container {
display: none !important;
}
#dj-landing-container #cta-final .form-iframe-wrapper {
display: none !important;
}
#dj-landing-container #cta-final iframe {
display: none !important;
}
/* Botón del CTA final - Redirige al formulario del inicio */
#dj-landing-container #cta-final .cta-button-hero {
transform: translateY(-2px) !important;
max-width: 320px !important;
}
#dj-landing-container #cta-final .cta-button-hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%) !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
z-index: -1 !important;
}
#dj-landing-container #cta-final .cta-button-hero:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(193, 27, 5, 0.4) !important;
text-decoration: none !important;
}
#dj-landing-container #cta-final .cta-button-hero:hover::before {
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%) !important;
}
@media (max-width: 768px) {
#dj-landing-container #cta-final .cta-button-hero {
padding: 0.8rem 1.8rem !important;
font-size: 1rem !important;
border-radius: 12px !important;
}
}
#dj-landing-container .urgency-message {
font-size: 1.1rem !important;
color: var(--landing-text-muted) !important;
margin-bottom: 2rem !important;
line-height: 1.6 !important;
}
/* ====================
12. FOOTER
==================== */
#dj-landing-container .main-footer {
background: #080808 !important;
padding: 4rem 0 2rem 0 !important;
border-top: 1px solid var(--landing-glass-border) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 2rem !important;
}
#dj-landing-container .footer-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
gap: 3rem !important;
text-align: left !important;
}
#dj-landing-container .footer-logo {
max-width: 200px !important;
width: 100% !important;
margin-bottom: 1rem !important;
}
#dj-landing-container .footer-col h4 {
font-size: 1.2rem !important;
color: var(--landing-text-light) !important;
margin-bottom: 1rem !important;
}
#dj-landing-container .footer-col p,
#dj-landing-container .footer-col a,
#dj-landing-container .footer-col li {
color: var(--landing-text-muted) !important;
font-size: 1rem !important;
line-height: 1.8 !important;
}
#dj-landing-container .footer-col ul {
list-style: none !important;
padding: 0 !important;
}
#dj-landing-container .footer-col li {
margin-bottom: 0.5rem !important;
}
#dj-landing-container .footer-bottom {
text-align: center !important;
margin-top: 4rem !important;
padding-top: 2rem !important;
border-top: 1px solid var(--landing-glass-border) !important;
font-size: 0.9rem !important;
color: var(--landing-text-muted) !important;
}
/* ====================
RESPONSIVE DESIGN
==================== */
@media (max-width: 768px) {
#dj-landing-container .nav-links {
display: none !important;
}
#dj-landing-container .mobile-menu-toggle {
display: block !important;
}
#dj-landing-container .nav-cta {
display: none !important;
}
#dj-landing-container .mobile-menu {
display: none !important;
}
#dj-landing-container .mobile-menu.active {
display: flex !important;
}
/* Texto de "Para quién es" optimizado para móvil */
#dj-landing-container .para-quien-es-heading {
font-size: 1.3rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
#dj-landing-container .comparison-table {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
#dj-landing-container .comparison-arrow {
transform: rotate(90deg) !important;
}
#dj-landing-container .pricing-grid {
grid-template-columns: 1fr !important;
}
#dj-landing-container .price-card.highlighted {
transform: none !important;
}
#dj-landing-container .price-card.highlighted:hover {
transform: translateY(-5px) !important;
}
#dj-landing-container .price-card.inactive {
opacity: 0.5 !important;
}
#dj-landing-container .benefits-grid,
#dj-landing-container .incluye-grid,
#dj-landing-container .stats-grid {
grid-template-columns: 1fr !important;
}
#dj-landing-container .video-placeholder,
#dj-landing-container .photo-placeholder {
height: 250px !important;
}
#dj-landing-container .photo-wrapper {
height: 250px !important;
}
#dj-landing-container .slider-arrow {
width: 40px !important;
height: 40px !important;
}
#dj-landing-container .slider-arrow-left {
left: 0.5rem !important;
}
#dj-landing-container .slider-arrow-right {
right: 0.5rem !important;
}
#dj-landing-container .dot {
width: 12px !important;
height: 12px !important;
}
/* Hero Section Responsive */
#dj-landing-container .hero-headline {
font-size: 2rem !important;
line-height: 1.15 !important;
}
#dj-landing-container .hero-subheadline {
font-size: 1.3rem !important;
line-height: 1.4 !important;
}
/* CTA Final Responsive */
#dj-landing-container .cta-headline {
font-size: 1.6rem !important;
line-height: 1.3 !important;
}
#dj-landing-container .cta-subheadline {
font-size: 1.1rem !important;
line-height: 1.5 !important;
}
/* Botones CTA en mobile: Optimizados para móviles */
#dj-landing-container .cta-button:not(.cta-gallery-button),
#dj-landing-container .cta-button.cta-gallery-button,
#dj-landing-container .cta-gallery-button.cta-button {
border-radius: 8px !important;
padding: 0.9rem 2rem !important;
font-size: 1rem !important;
max-width: 280px !important;
width: fit-content !important;
margin: 0 auto !important;
display: block !important;
}
#dj-landing-container .cta-gallery-button:not(.cta-button) {
border-radius: 12px !important;
padding: 0.9rem 1.8rem !important;
font-size: 0.95rem !important;
}
#dj-landing-container .cta-button-price {
font-size: 0.9rem !important;
padding: 0.6rem 1.5rem !important;
max-width: 240px !important;
width: fit-content !important;
}
/* Testimonials Responsive */
#dj-landing-container .testimonial-name {
font-size: 1.2rem !important;
}
#dj-landing-container .testimonial-avatar {
width: 80px !important;
height: 80px !important;
}
#dj-landing-container .testimonial-quote {
font-size: 0.9rem !important;
}
/* Formulario del hero en mobile - Asegurar visibilidad */
#dj-landing-container #hero .form-iframe-wrapper {
min-height: 462px !important;
height: auto !important;
}
#dj-landing-container #hero .form-iframe-wrapper iframe {
min-height: 462px !important;
height: 462px !important;
}
/* Optimizaciones de rendimiento para mobile */
#dj-landing-container .cta-button:not(.cta-gallery-button)::before,
#dj-landing-container .cta-button.cta-gallery-button::before,
#dj-landing-container .cta-gallery-button.cta-button::before,
#dj-landing-container #cta-final .cta-button-hero::before {
animation: none !important;
box-shadow: 0 0 15px rgba(193, 27, 5, 0.3) !important;
}
#dj-landing-container .glass-card:hover {
transform: translateY(-4px) !important;
}
#dj-landing-container .price-card:hover {
transform: translateY(-4px) !important;
}
#dj-landing-container .price-card.highlighted:hover {
transform: translateY(-4px) !important;
}
#dj-landing-container .cta-button:not(.cta-gallery-button):hover,
#dj-landing-container .cta-button.cta-gallery-button:hover,
#dj-landing-container .cta-gallery-button.cta-button:hover {
transform: translateY(-3px) !important;
}
#dj-landing-container #cta-final .cta-button-hero:hover {
transform: translateY(-3px) !important;
}
}
/* Tablet: 2 columnas para stats-grid */
@media (min-width: 769px) and (max-width: 1024px) {
#dj-landing-container .stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
#dj-landing-container .pricing-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
#dj-landing-container .pricing-grid > p {
display: none !important;
}
#dj-landing-container .pricing-grid > .price-card {
display: flex !important;
}
#dj-landing-container .price-card.highlighted {
transform: none !important;
}
#dj-landing-container .price-card.highlighted:hover {
transform: translateY(-8px) !important;
}
}
@media (min-width: 1025px) {
#dj-landing-container .pricing-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
#dj-landing-container .pricing-grid > p {
display: none !important;
}
#dj-landing-container .pricing-grid > .price-card {
display: flex !important;
}
#dj-landing-container .price-card.highlighted {
transform: none !important;
}
#dj-landing-container .price-card.highlighted:hover {
transform: translateY(-8px) !important;
}
}
/* ====================
FIX: Eliminar líneas blancas en header y footer
/* ESTILOS PERSONALIZADOS PARA BOTÓN LUMA */
#dj-landing-container .luma-checkout--button {
background-color: #dc2626 !important;
color: white !important;
border-color: #dc2626 !important;
padding: 1rem 2.5rem !important;
border-radius: 12px !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
display: inline-block !important;
text-align: center !important;
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
cursor: pointer !important;
border: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 4px 15px rgba(193, 27, 5, 0.3) !important;
min-width: 200px !important;
max-width: 100% !important;
}
#dj-landing-container .luma-checkout--button:hover {
background-color: #b91c1c !important;
border-color: #b91c1c !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(193, 27, 5, 0.4) !important;
}
#dj-landing-container .luma-checkout--button::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%) !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
z-index: -1 !important;
}
#dj-landing-container .luma-checkout--button:hover::before {
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%) !important;
}
#dj-landing-container .luma-checkout--button:hover {
background-color: #b91c1c !important;
border-color: #b91c1c !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(193, 27, 5, 0.4) !important;
color: white !important;
text-decoration: none !important;
}
Causas: WordPress wrapers, margins por defecto, overflow
==================== */
/* Reset de margins/padding en primer y último hijo del contenedor */
#dj-landing-container > :first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
#dj-landing-container > :last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Eliminar
y
Para quienes dejan de ser espectadores para convertirse en parte de la comunidad
Profesionales que necesitan cerrar la brecha con lo actual
Síndrome del impostor funcional: por fuera pareces competente, por dentro no estás seguro de tu criterio técnico
3 técnicas aplicables el lunes + pertenencia real a la comunidad
Líderes que deben decidir sin guía clara
Debes elegir entre IA/Cloud/OT sin saber qué realmente importa y para quién
Criterio defensable + soluciones validadas
Talentos que necesitan visibilidad profesional
Tu nombre no aparece en conversaciones clave que definen el futuro
Red que responde + mentorías estructuradas + acceso a oportunidades
¿Quieres seguir siendo quien ve pasar las oportunidades, o ser quien las genera?
COMPRADOR QUE QUIERE PERMANECER IGUAL
Estudia solo, con ruido y sin dirección clara
Tiene 14 cursos empezados y ninguno cambia su vida profesional
Su jefe sigue viéndolo igual que hace 2 años
Su nombre no aparece en conversaciones técnicas que importan
Temor a ser reemplazado por alguien "más completo"
→
COMPRADOR QUE INVIERTE EN TRANSFORMACIÓN
Tiene criterio defendible ante cualquier pregunta técnica
Sales con 3 técnicas aplicables el lunes que impactan su trabajo
Su jefe dice: "Confío en tu criterio. Lidéralo."
Su nombre aparece en decisiones técnicas de alto impacto
Pertenece: ya no es visitante, es parte de la comunidad
En 2 días actualizas tu criterio en ciberseguridad.
La diferencia entre quien decide y quien solo observa empieza aquí. Deja de ser espectador.
ASÍ SE VIVE #DRAGONJARCON
Lo que dicen nuestros asistentes
"
Luis Vazios
Estudiante • Univ. Tecnológica del Chocó • 2025
"No me arrepiento de haber venido. Pese a todos los esfuerzos y los sacrificios, realmente valió la pena. Lo que más me impactó fue la sencillez y disponibilidad de los speakers: si uno les dice 'explícame esto', tienen disponibilidad total. DragonJARCON me dio la tribu que necesitaba."
Asegurar mi lugar
"
Mario Ramos
Pentester • Asistente desde 2017 • 7+ años
"Definitivamente marcó un antes y un después. Conozco DragonJAR desde 2017, cuando tomé un curso de pentesting. Mil veces superior y mejor ser presencial que virtual. Ver las conferencias por YouTube es bueno, pero no saben lo que se pierden por no venir. Aquí compartes, conversas, salen ideas. Espectacular. Mis conexiones aquí cambiaron mi carrera."
Asegurar mi lugar
"
Andrés Julián García
Profesional de Ciberseguridad • Cali • 2023
"La credibilidad técnica de DragonJARCON es única. Los aportes de los conferencistas no son solo teoría, son investigaciones aplicables. En el mercado hay muchas conferencias, pero pocas tienen este nivel de realismo técnico para nuestra realidad latinoamericana."
Asegurar mi lugar
+25
Años de Comunidad
30K+
Asistentes Históricos
130+
Ponentes de Élite
99%
Nos Recomiendan
Por qué DragonJARCON sigue siendo una de las opciones que realmente cambia tu criterio en ciberseguridad
Últimas investigaciones en español que solo se presentan aquí
Investigadores que normalmente hablan en inglés, presentando para nuestra comunidad. Sin traducciones, sin filtrado, conocimiento directo.
Ponentes accesibles: aquí todos se consultan con todos
Ego cero. Solo conocimiento compartido. Aquí se rompe el síndrome del impostor porque todos están para aprender y ayudar.
Dinámicas estructuradas: Networking
No networking accidental. Conexiones con estrategia: oportunidades con personas que hablan tu mismo idioma en ciberseguridad. Espacios para conectar con otros asistentes.
Esto es lo que te llevas
✅ 2 días de conferencias con contenido curado
✅ Villas Prácticas (hands-on real)
✅ CTF oficial el evento
✅ Certificado digital de asistencia
✅ Kit del evento
Asegura tu lugar. La oportunidad ahora es la Etapa Comunidad.
La Etapa Comunidad ya está activa. Es la oportunidad para asegurar tu lugar en DragonJARCON 2026 mientras empezamos a revelar los speakers y las actividades de esta edición.
🚫 AGOTADO
Etapa Creyentes
500.000 COP
Todas las entradas compradas
NO DISPONIBLE
🟢 ETAPA COMUNIDAD - DISPONIBLE
DragonJAR
Security Conference 2026
10 y 11 de septiembre, 2026
Kit edición 2026
Cupón 40% DragonJAR Education
PRECIO FINAL
Etapa Full
$600.000 COP
Este será el precio cuando la etapa comunidad se agote (30 de junio)
NOTIFICARME CUANDO SUBA
El evento se realiza en el mejor lugar de Medellín
📍
Centro de Eventos El Tesoro
Medellín, Colombia
📅
10 y 11 de septiembre, 2026
🏨
Hotel Oficial: Novotel Medellín El Tesoro
Ubicado en el mismo centro comercial del evento
Las preguntas que todos se hacen
¿Voy a poder seguir el ritmo? ¿El contenido es muy avanzado?
El nivel es alto pero accesible. Este no es un evento para principiantes absolutos, sino para profesionales formados y estudiantes avanzados que quieren cerrar la brecha con criterio real. Aquí nadie te mira por encima del hombro, todos están para aprender y compartir.
¿Si voy solo, cómo hago networking sin sentirme inadecuado?
Las dinámicas estructuradas rompen el síndrome del impostor. Las Villas temáticas crean espacios naturales de conversación. Espacios dentro de la programación para permitir la interácción con otros asistentes. Aquí todos estaban en tu lugar algún día.
¿Cómo le demuestro a mi jefe que esto genera ROI real?
Tres métricas concretas: 1) Reducción de tiempo de detección de vulnerabilidades en producción, 2) Implementación efectiva de DevSecOps sin sacrificar agilidad, 3) GRC/Compliance actualizado que pasa auditorías. sales con 3 técnicas aplicables el lunes.
¿Qué me diferencia de otros que también asisten a cursos y conferencias?
La diferencia es pertenencia. No solo aprendes, perteneces. Aquí tu nombre empieza a aparecer en conversaciones técnicas que importan. Obtienes la red que responde y el criterio que defiende, no solo certificados.
¿Contenido específico para Cloud/IA/OT o es solo lo tradicional?
Integración real: Cloud Security con CNAPP/CSPM, IA aplicada a detección de amenazas, OT con Zero Trust. No son tendencias aisladas, son controles prácticos que puedes implementar en entornos reales ya mismo.
¿El certificado tiene valor real o es solo un documento?
Es verificado con blockchain y reconocido en todo el ecosistema de LATAM. Pero más importante: la comunidad que obtienes es el activo real. Esa red es lo que te da acceso a oportunidades que un certificado solo no puede abrir.
/**
* DRAGONJARCON 2026 - LANDING PAGE INTERACCIONES
* Funcionalidades: Menú móvil, FAQ acordeón, Scroll suave
*/
document.addEventListener('DOMContentLoaded', function() {
// ====================
// MENÚ MÓVIL
// ====================
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
const mobileMenu = document.querySelector('.mobile-menu');
if (mobileMenuToggle && mobileMenu) {
mobileMenuToggle.addEventListener('click', function() {
mobileMenu.classList.toggle('active');
});
// Cerrar menú al hacer clic en un enlace
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('active');
});
});
}
// ====================
// FAQ ACORDEÓN
// ====================
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
const answer = item.querySelector('.faq-answer');
if (question && answer) {
question.addEventListener('click', function() {
// Cerrar otros FAQs
faqItems.forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.remove('active');
const otherAnswer = otherItem.querySelector('.faq-answer');
if (otherAnswer) {
otherAnswer.style.maxHeight = '0';
}
}
});
// Toggle FAQ actual
item.classList.toggle('active');
if (item.classList.contains('active')) {
answer.style.maxHeight = answer.scrollHeight + 'px';
} else {
answer.style.maxHeight = '0';
}
});
}
});
// ====================
// FORMULARIOS DE CAPTACIÓN
// ====================
const heroForm = document.getElementById('hero-form');
const ctaForm = document.getElementById('cta-form');
if (heroForm) {
heroForm.addEventListener('submit', function(e) {
e.preventDefault();
handleFormSubmit(heroForm, 'Hero Form');
});
}
if (ctaForm) {
ctaForm.addEventListener('submit', function(e) {
e.preventDefault();
handleFormSubmit(ctaForm, 'CTA Final Form');
});
}
function handleFormSubmit(form, formName) {
const email = form.querySelector('input[type="email"]').value;
if (!email) {
alert('Por favor, ingresa tu correo electrónico');
return;
}
// Validación básica de email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Por favor, ingresa un correo electrónico válido');
return;
}
// Aquí iría la lógica de envío real
// Por ahora mostramos un mensaje de éxito
console.log(`Formulario ${formName} enviado con email:`, email);
// Simular envío exitoso
const button = form.querySelector('button[type="submit"]');
const originalText = button.textContent;
button.textContent = '¡Enviado!';
button.style.background = '#28a745';
setTimeout(() => {
button.textContent = originalText;
button.style.background = '';
form.reset();
}, 3000);
// TODO: Integrar con el formulario real del usuario
// cuando se proponga el código
}
// ====================
// SCROLL SMOOTH
// ====================
// Ya está implementado en CSS con scroll-behavior: smooth
// Esta es una mejora para navegadores más antiguos
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// ====================
// ANIMACIÓN AL SCROLL
// ====================
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(30px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
// ====================
// NAVEGACIÓN STICKY
// ====================
const stickyNav = document.querySelector('.sticky-nav');
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > lastScroll && currentScroll > 100) {
// Scroll hacia abajo
stickyNav.style.transform = 'translateY(-100%)';
} else {
// Scroll hacia arriba
stickyNav.style.transform = 'translateY(0)';
}
lastScroll = currentScroll;
});
// ====================
// CTA DE RESERVA (Precio Activo)
// ====================
// El botón ahora es un type="submit" form="hero-form" que envía el formulario
// Este event listener ya no es necesario
// ====================
// SLIDERS (Videos y Fotos)
// ====================
class Slider {
constructor(containerId, options = {}) {
this.container = document.querySelector(containerId);
this.track = this.container.querySelector('.slider-track, .testimonials-track');
this.slides = this.container.querySelectorAll(options.slideSelector || '.slide');
this.arrows = this.container.querySelectorAll('.slider-arrow, .testimonial-arrow');
this.dotsContainer = document.querySelector(options.dotsSelector || '');
this.dots = this.dotsContainer ? this.dotsContainer.querySelectorAll('.dot') : [];
this.currentIndex = 0;
this.autoplay = options.autoplay || false;
this.autoplayInterval = options.autoplayInterval || 5000;
this.autoplayTimer = null;
this.init();
}
init() {
if (!this.container || !this.track || this.slides.length === 0) return;
this.goToSlide(0);
this.arrows.forEach(arrow => {
arrow.addEventListener('click', (e) => {
if (arrow.classList.contains('slider-arrow-left') || arrow.classList.contains('testimonial-arrow-left')) {
this.prev();
} else {
this.next();
}
});
});
this.dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
this.goToSlide(index);
});
});
if (this.autoplay) {
this.startAutoplay();
this.container.addEventListener('mouseenter', () => this.stopAutoplay());
this.container.addEventListener('mouseleave', () => this.startAutoplay());
}
this.container.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') this.prev();
if (e.key === 'ArrowRight') this.next();
});
let touchStartX = 0;
let touchEndX = 0;
this.container.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
});
this.container.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
this.handleSwipe(touchStartX, touchEndX);
});
}
goToSlide(index) {
this.currentIndex = index;
const translateX = -(index * 100);
this.track.style.transform = `translateX(${translateX}%)`;
this.dots.forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
this.arrows.forEach(arrow => {
arrow.disabled = false;
});
this.loadIframe(index);
}
loadIframe(index) {
const slide = this.slides[index];
const iframe = slide.querySelector('iframe[data-src]');
if (iframe && !iframe.src) {
iframe.src = iframe.getAttribute('data-src');
}
}
next() {
const nextIndex = (this.currentIndex + 1) % this.slides.length;
this.goToSlide(nextIndex);
}
prev() {
const prevIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
this.goToSlide(prevIndex);
}
handleSwipe(startX, endX) {
const threshold = 50;
if (endX startX + threshold) {
this.prev();
}
}
startAutoplay() {
if (this.autoplayTimer) clearInterval(this.autoplayTimer);
this.autoplayTimer = setInterval(() => this.next(), this.autoplayInterval);
}
stopAutoplay() {
if (this.autoplayTimer) {
clearInterval(this.autoplayTimer);
this.autoplayTimer = null;
}
}
}
const testimonialSlider = new Slider('.testimonials-container', {
dotsSelector: '.testimonial-dots',
slideSelector: '.testimonial-slide',
autoplay: true,
autoplayInterval: 5000
});
const photoSlider = new Slider('.photo-slider', {
dotsSelector: '.photo-dots',
slideSelector: '.photo-slide',
autoplay: true,
autoplayInterval: 2000
});
// ====================
// PLACEHOLDERS VISUALES
// ====================
console.log('=== DRAGONJARCON 2026 - LANDING PAGE ===');
console.log('Estado actual:');
console.log('✅ Formulario de captación integrado (LeadConnector / GoHighLevel)');
console.log('✅ Flujo de conversión: Todos los CTAs → Formulario → WhatsApp automation');
console.log('✅ Botón "ASEGURAR MI LUGAR" → Scroll al formulario del Hero');
console.log('✅ Botón "NOTIFICARME CUANDO SUBA" → Scroll al formulario del Hero');
console.log('⚠️ Pendiente: Confirmar que la automatización de WhatsApp está funcionando');
console.log('=====================================');
});
