/* ===================================
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 3rem !important;
font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 16px !important;
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
cursor: pointer !important;
border: none !important;
transition: transform 0.3s ease !important;
z-index: 1 !important;
overflow: hidden !important;
width: 100% !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 3rem !important;
font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 16px !important;
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
cursor: pointer !important;
border: none !important;
transition: transform 0.3s ease !important;
z-index: 1 !important;
overflow: hidden !important;
width: 100% !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;
box-shadow: 0 0 25px 5px rgba(193, 27, 5, 0.7) !important;
transition: opacity 0.3s ease, transform 0.3s ease !important;
z-index: -1 !important;
animation: pulse-glow-dj 2.5s infinite !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(-5px) !important;
text-decoration: none !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.9rem !important;
padding: 0.7rem 2rem !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: flex !important;
}
#dj-landing-container .price-card {
background: var(--landing-card-bg) !important;
border: 1px solid var(--landing-glass-border) !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 {
display: block !important;
background: var(--landing-primary-red) !important;
color: var(--landing-text-light) !important;
padding: 1rem 2.8rem !important;
font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
font-weight: 700 !important;
text-decoration: none !important;
border-radius: 16px !important;
cursor: pointer !important;
border: none !important;
transition: transform 0.3s ease !important;
text-align: center !important;
margin: 2rem auto 0 !important;
max-width: 500px !important;
position: relative !important;
z-index: 1 !important;
overflow: hidden !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;
box-shadow: 0 0 25px 5px rgba(193, 27, 5, 0.7) !important;
transition: opacity 0.3s ease, transform 0.3s ease !important;
z-index: -1 !important;
animation: pulse-glow-dj 2.5s infinite !important;
}
#dj-landing-container #cta-final .cta-button-hero:hover {
transform: translateY(-5px) !important;
text-decoration: none !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: Rectangulares con bordes redondeados */
#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: 12px !important;
padding: 1rem 2rem !important;
font-size: 1rem !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.95rem !important;
padding: 0.7rem 1.3rem !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
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
Esto no es solo para profesionales que ya saben lo que hacen. Es también para estudiantes, principiantes y entusiastas que quieren tener una perspectiva del mercado real.
Analistas, Pentesters, DevOps que quieren subir de nivel
Estás estudiando pero tu criterio no crece. El ruido te impide saber qué es realmente importante.
Sales con 3 cosas aplicables el lunes + criterio defendible
CISOs y Líderes de Seguridad
Tu equipo está usando metodologías de hace 3 años y tú no lo sabes.
Equipo actualizado + conexiones con vendors + visión clara de tendencias
Estudiantes que quieren perspectiva del mercado real
Te quedas solo con la teoría y perspectiva académica, sin saber cómo funciona el mercado actual de ciberseguridad.
Puente entre academia y práctica + visibilidad profesional + comprensión del mercado real
Tu nombre aparece en conversaciones que definen el futuro de una organización
ANTES DE DRAGONJARCON
Aprendes solo, con ruido y sin dirección
Tienes 14 cursos empezados y ninguno te cambió la vida
Tu jefe sigue viéndote igual que hace 2 años
Tu nombre no aparece en conversaciones clave
→
DESPUÉS DE DRAGONJARCON
Tienes criterio y puedes defender decisiones técnicas
Sales con 3 cosas aplicables el lunes en tu trabajo
Tu jefe dice: "Confío en tu criterio. Lidéralo."
Tu nombre aparece en conversaciones que definen el futuro
En 2 días sales con criterio actualizado, conexiones reales y un avance profesional visible.
Deja de invertir tiempo en tendencias irrelevantes y empieza a aprender lo que realmente se está aplicando en la industria.
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. Queremos ser pioneros en llevar ciberseguridad a nuestro departamento."
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."
Asegurar mi lugar
"
Andrés Julián García
Profesional de Ciberseguridad • Cali • 2023
"La credibilidad y fama técnica de DragonJARCON siempre han sido el motivo para venir por primera vez. Los aportes de los conferencistas son muy buenos. En el mercado hay muchas conferencias, pero pocas tienen este nivel de credibilidad técnica en Latinoamérica."
Asegurar mi lugar
+25
Años de Comunidad
30K+
Asistentes Históricos
130+
Ponentes de Élite
99%
Nos Recomiendan
Por qué DragonJARCON, no cualquier evento
Contenido técnico en español con contexto LATAM
Aprende directamente de investigadores activos en español, sin perder tiempo en traducciones o teoría desconectada
Ponentes accesibles (no figuras inalcanzables)
Donde todo el mundo puede consultar con todo el mundo. Sin ego, solo conocimiento
Networking estructurado con impacto real
No networking superficial. Espacios dentro de la programación del evento para interactuar, además de salas de coffee break y todo lo que el asistente pueda aprovechar para conectar
20+ años de comunidad, 13 ediciones
+25 años de comunidad | 30K+ asistentes históricos | 130+ ponentes de élite | 99% nos recomiendan
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
ASEGURAR MI LUGAR
⌛ DISPONIBILIDAD LIMITADA
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
¿Qué tan técnico es? ¿Seré suficiente?
Este evento es para profesionales formados y también para estudiantes avanzados que quieren perspectiva del mercado real de ciberseguridad. El nivel es alto pero accesible con nuevos.
¿Cómo hago networking si voy solo?
El evento está diseñado para que conectes sin estrés. Tienes espacios dentro de la programación para interactuar, salas de coffee break, y todos los espacios que puedas aprovechar para conectar con otros asistentes, ponentes y profesionales activos.
¿Cómo justifico esto a mi jefe?
Sales con 3 aprendizajes aplicables desde el lunes. DragonJARCON fortalece tu criterio técnico, te ayuda a defender mejores decisiones y convierte la actualización profesional en valor directo para tu equipo: más claridad, mejor ejecución y menor exposición al riesgo.
¿Vale la pena el tiempo/inversión?
El criterio aplicable el lunes y las conexiones que abren puertas son tangibles. En lugar de gastar tiempo en cursos aislados o contenido de ruido, en 2 días obtienes lo que realmente se está aplicando en la industria de parte de quienes lo están haciendo.
¿Qué específicamente voy a poder aplicar el lunes?
El lunes siguiente al evento tendrás claridad de qué está sucediendo en el mercado de la ciberseguridad. Podrás tomar mejores decisiones estratégicas para tu organización, con un criterio actualizado basado en las tendencias y prácticas que realmente se están aplicando en la industria.
¿Hay certificado? ¿Qué incluye?
Sí, recibirás un certificado digital de participación que se genera automáticamente al terminar el evento. Este certificado utiliza tecnología blockchain, lo que garantiza que sea único y verificable. Podrás compartirlo en cualquier red social, especialmente en LinkedIn, para validar tu asistencia y destacar tu participación en el evento de ciberseguridad más importante de Colombia y uno de los mejores de habla hispana.
/**
* 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('=====================================');
});
