.elementor-kit-7{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#000000;--e-global-color-text:#FFFFFF;--e-global-color-accent:#E2DE25;--e-global-typography-primary-font-family:"PP Monument Extended";--e-global-typography-primary-font-weight:900;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-letter-spacing:0.3px;--e-global-typography-secondary-font-family:"Space Grotesk";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Space Grotesk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Space Grotesk";--e-global-typography-accent-font-weight:500;background-color:transparent;font-family:"Space Grotesk", Sans-serif;font-weight:400;font-style:normal;background-image:radial-gradient(at center center, #1A1A1A 0%, #000000 100%);}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-family:"PP Monument Extended", Sans-serif;font-weight:900;text-transform:uppercase;font-style:normal;}.elementor-kit-7 h2{font-family:"PP Monument Extended", Sans-serif;font-weight:900;text-transform:uppercase;font-style:normal;}.elementor-kit-7 h3{font-family:"PP Monument Extended", Sans-serif;font-weight:900;text-transform:uppercase;font-style:normal;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- CLASE GLOBAL: .boton-neon --- */

/* 1. Configuración base del botón */
.boton-neon .elementor-button {
    position: relative;
    background: #000000; /* Fondo del botón */
    z-index: 1;
    overflow: hidden;
    border-radius: 50px; 
    border: none !important;
}

/* 2. Forzar que el texto esté siempre visible (z-index fix) */
.boton-neon .elementor-button-content-wrapper,
.boton-neon .elementor-button span {
    position: relative;
    z-index: 10;
    color: #ffffff;
}

/* 3. La luz que gira */
.boton-neon .elementor-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 500%;
    background: conic-gradient(transparent, transparent, transparent, #ffffff); /* Color luz */
    transform: translate(-50%, -50%);
    animation: rotar-borde 4s linear infinite;
    z-index: -2;
}

/* 4. La máscara interna (el fondo negro del centro) */
.boton-neon .elementor-button::after {
    content: '';
    position: absolute;
    inset: 2px; /* Grosor del borde */
    background: #000000; /* DEBE coincidir con el fondo de tu web */
    border-radius: 50px; 
    z-index: -1;
}

/* 5. Animación */
@keyframes rotar-borde {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 6. Hover */
.boton-neon .elementor-button:hover::before {
    background: conic-gradient(transparent, transparent, #ffffff, #ffffff);
}


/* --- CLASE GLOBAL: .tarjeta-neon --- */

/* 1. Configuración base del contenedor */
.tarjeta-neon {
    position: relative;
    background: #0d0d0d !important; /* Color de fondo de la tarjeta (ajustar si es #000000) */
    z-index: 1;
    overflow: hidden;
    border-radius: 20px; /* Radio de las esquinas de la tarjeta */
    transition: transform 0.3s ease; /* Suavidad si la tarjeta se mueve un poco */
}

/* 2. Forzar que el contenido (texto/iconos) esté arriba */
.tarjeta-neon > .e-con-inner, 
.tarjeta-neon .elementor-widget {
    position: relative;
    z-index: 10;
}

/* 3. La luz que gira */
.tarjeta-neon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%; /* Menos ancho que el botón, pero suficiente para cubrir */
    height: 150%;
    /* Ajuste del degradado para que sea más sutil en tarjetas grandes */
    background: conic-gradient(transparent, transparent, transparent, #ffffff); 
    transform: translate(-50%, -50%);
    animation: rotar-borde 4s linear infinite;
    z-index: -2;
    opacity: 0; /* Oculto por defecto, aparece al hover */
    transition: opacity 0.3s ease;
}

/* 4. La máscara interna (el fondo negro del centro) */
.tarjeta-neon::after {
    content: '';
    position: absolute;
    inset: 1px; /* Borde muy fino y elegante */
    background: #000000; /* DEBE ser igual al fondo de la tarjeta */
    border-radius: 20px; /* Igual al radio de la tarjeta */
    z-index: -1;
}

/* 5. Animación y Activación */
@keyframes rotar-borde {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Solo mostramos el borde brillante cuando pasas el mouse */
.tarjeta-neon:hover::before {
    opacity: 1;
}

/* --- CLASE GLOBAL: .tarjeta-spotlight --- */

.tarjeta-spotlight {
    position: relative;
    background: #0a0a0a; /* Color base de la tarjeta */
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil por defecto */
}

/* Esta capa crea el efecto de linterna */
.tarjeta-spotlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Aquí ocurre la magia: Usamos variables --x y --y que el JS actualizará */
    background: radial-gradient(
        800px circle at var(--x, 50%) var(--y, 50%), 
        rgba(255, 255, 255, 0.15), /* Color y opacidad de la luz central */
        transparent 40%
    );
    z-index: 1; /* Encima del fondo, debajo del texto */
    opacity: 0; /* Invisible hasta que entras */
    transition: opacity 0.5s ease;
    pointer-events: none; /* Deja pasar los clics */
}

/* Mostrar la luz al hacer hover */
.tarjeta-spotlight:hover::before {
    opacity: 1;
}

/* Asegurar que el texto esté encima de la luz */
.tarjeta-spotlight > * {
    position: relative;
    z-index: 2;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'PP Monument Extended';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://ncls-creative.com/wp-content/uploads/2026/01/PPMonumentExtended-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'PP Monument Extended';
	font-style: italic;
	font-weight: 300;
	font-display: auto;
	src: url('https://ncls-creative.com/wp-content/uploads/2026/01/PPMonumentExtended-LightItalic.woff2') format('woff2');
}
@font-face {
	font-family: 'PP Monument Extended';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://ncls-creative.com/wp-content/uploads/2026/01/PPMonumentExtended-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'PP Monument Extended';
	font-style: italic;
	font-weight: 400;
	font-display: auto;
	src: url('https://ncls-creative.com/wp-content/uploads/2026/01/PPMonumentExtended-RegularItalic.woff2') format('woff2');
}
@font-face {
	font-family: 'PP Monument Extended';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://ncls-creative.com/wp-content/uploads/2026/01/PPMonumentExtended-Black.woff2') format('woff2');
}
@font-face {
	font-family: 'PP Monument Extended';
	font-style: italic;
	font-weight: 900;
	font-display: auto;
	src: url('https://ncls-creative.com/wp-content/uploads/2026/01/PPMonumentExtended-BlackItalic.woff2') format('woff2');
}
/* End Custom Fonts CSS */