.elementor-2966 .elementor-element.elementor-element-c20e4b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2966 .elementor-element.elementor-element-83e4a49{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2966 .elementor-element.elementor-element-fd4db34{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2966 .elementor-element.elementor-element-95ab996{text-align:center;}.elementor-2966 .elementor-element.elementor-element-95ab996 .elementor-heading-title{font-family:"Artemus", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2966 .elementor-element.elementor-element-dd864b4 .elementor-button{background-color:#61CE7000;font-family:"Artemus", Sans-serif;font-size:11px;font-weight:400;letter-spacing:1.4px;border-style:none;border-radius:9px 9px 9px 9px;padding:7px 10px 7px 10px;}.elementor-2966 .elementor-element.elementor-element-dd864b4{margin:-8px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2966 .elementor-element.elementor-element-6f06022{text-align:left;}.elementor-2966 .elementor-element.elementor-element-6f06022 .elementor-heading-title{font-family:"Artemus", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-2966 .elementor-element.elementor-element-4b4b00f .elementor-button{background-color:#61CE7000;font-family:"Artemus", Sans-serif;font-size:11px;font-weight:400;letter-spacing:1.4px;border-style:none;border-radius:9px 9px 9px 9px;padding:7px 10px 7px 10px;}.elementor-2966 .elementor-element.elementor-element-4b4b00f{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2966 .elementor-element.elementor-element-4fdd024 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-2966 .elementor-element.elementor-element-4fdd024 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-2966 .elementor-element.elementor-element-4fdd024 .jet-listing-dynamic-field{justify-content:flex-start;}.elementor-2966 .elementor-element.elementor-element-4fdd024 .jet-listing-dynamic-field__content{text-align:left;}/* Start custom CSS for button, class: .elementor-element-dd864b4 *//* ============================================ BOTÓN CONTACTO – Borde sci-fi fijo + texto según tema (widget Button de Elementor con clase: boton-contact) ============================================ */ /* Wrapper del widget */ .boton-contact { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; /* el padding real lo lleva el interno */ border-radius: 999px; border: 2px solid transparent !important; background: transparent !important; z-index: 0; } /* Estilos base del de Elementor */ .boton-contact .elementor-button, .boton-contact .elementor-button-link { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 999px; background: transparent !important; border: none !important; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 500; text-decoration: none !important; box-shadow: none !important; color: #ffffff !important; /* TEXTO DARK */ } /* hijos dentro del botón toman el color */ .boton-contact .elementor-button-text, .boton-contact .elementor-button-icon, .boton-contact .elementor-button-icon i, .boton-contact .elementor-button-icon svg { color: inherit !important; fill: inherit !important; } /* DARK: aseguramos blanco en todos los estados del */ .boton-contact .elementor-button, .boton-contact .elementor-button:link, .boton-contact .elementor-button:visited, .boton-contact .elementor-button:hover, .boton-contact .elementor-button:focus, .boton-contact .elementor-button:active, .boton-contact .elementor-button-link, .boton-contact .elementor-button-link:link, .boton-contact .elementor-button-link:visited, .boton-contact .elementor-button-link:hover, .boton-contact .elementor-button-link:focus, .boton-contact .elementor-button-link:active { color: #ffffff !important; } /* LIGHT MODE: ahora sí, TODO negro en el */ html[data-theme="light"] .boton-contact .elementor-button, html[data-theme="light"] .boton-contact .elementor-button-link, html[data-theme="light"] .boton-contact .elementor-button:link, html[data-theme="light"] .boton-contact .elementor-button:visited, html[data-theme="light"] .boton-contact .elementor-button:hover, html[data-theme="light"] .boton-contact .elementor-button:focus, html[data-theme="light"] .boton-contact .elementor-button:active, html[data-theme="light"] .boton-contact .elementor-button-link:link, html[data-theme="light"] .boton-contact .elementor-button-link:visited, html[data-theme="light"] .boton-contact .elementor-button-link:hover, html[data-theme="light"] .boton-contact .elementor-button-link:focus, html[data-theme="light"] .boton-contact .elementor-button-link:active { color: #111111 !important; } /* también forzamos hijos en light */ html[data-theme="light"] .boton-contact .elementor-button-text, html[data-theme="light"] .boton-contact .elementor-button-icon, html[data-theme="light"] .boton-contact .elementor-button-icon i, html[data-theme="light"] .boton-contact .elementor-button-icon svg { color: #111111 !important; fill: #111111 !important; } /* Borde sci-fi fijo aplicado al WRAPPER (.boton-contact) */ .boton-contact::before { content: ""; position: absolute; inset: -1px; /* borde de 1px hacia afuera */ padding: 1px; /* grosor visible del aro */ border-radius: 999px; background: linear-gradient( 120deg, rgba(2, 3, 10, 1), #4B6C9F, rgba(2, 3, 10, 1), #4B6C9F ); background-size: 250% 250%; background-position: 0% 50%; opacity: 1; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; animation: neonBorderMove 2.4s linear infinite; } /* Variante light del borde */ html[data-theme="light"] .boton-contact::before { background: linear-gradient( 120deg, rgba(240, 242, 255, 1), #4B6C9F, rgba(240, 242, 255, 1), #4B6C9F ); } /* Animación borde (si no existe ya) */ @keyframes neonBorderMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4b4b00f *//* ============================================ BOTÓN CONTACTO – Borde sci-fi fijo + texto según tema (widget Button de Elementor con clase: boton-contact) ============================================ */ /* Wrapper del widget */ .boton-contact { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; /* el padding real lo lleva el interno */ border-radius: 999px; border: 2px solid transparent !important; background: transparent !important; z-index: 0; } /* Estilos base del de Elementor */ .boton-contact .elementor-button, .boton-contact .elementor-button-link { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 999px; background: transparent !important; border: none !important; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 500; text-decoration: none !important; box-shadow: none !important; color: #ffffff !important; /* TEXTO DARK */ } /* hijos dentro del botón toman el color */ .boton-contact .elementor-button-text, .boton-contact .elementor-button-icon, .boton-contact .elementor-button-icon i, .boton-contact .elementor-button-icon svg { color: inherit !important; fill: inherit !important; } /* DARK: aseguramos blanco en todos los estados del */ .boton-contact .elementor-button, .boton-contact .elementor-button:link, .boton-contact .elementor-button:visited, .boton-contact .elementor-button:hover, .boton-contact .elementor-button:focus, .boton-contact .elementor-button:active, .boton-contact .elementor-button-link, .boton-contact .elementor-button-link:link, .boton-contact .elementor-button-link:visited, .boton-contact .elementor-button-link:hover, .boton-contact .elementor-button-link:focus, .boton-contact .elementor-button-link:active { color: #ffffff !important; } /* LIGHT MODE: ahora sí, TODO negro en el */ html[data-theme="light"] .boton-contact .elementor-button, html[data-theme="light"] .boton-contact .elementor-button-link, html[data-theme="light"] .boton-contact .elementor-button:link, html[data-theme="light"] .boton-contact .elementor-button:visited, html[data-theme="light"] .boton-contact .elementor-button:hover, html[data-theme="light"] .boton-contact .elementor-button:focus, html[data-theme="light"] .boton-contact .elementor-button:active, html[data-theme="light"] .boton-contact .elementor-button-link:link, html[data-theme="light"] .boton-contact .elementor-button-link:visited, html[data-theme="light"] .boton-contact .elementor-button-link:hover, html[data-theme="light"] .boton-contact .elementor-button-link:focus, html[data-theme="light"] .boton-contact .elementor-button-link:active { color: #111111 !important; } /* también forzamos hijos en light */ html[data-theme="light"] .boton-contact .elementor-button-text, html[data-theme="light"] .boton-contact .elementor-button-icon, html[data-theme="light"] .boton-contact .elementor-button-icon i, html[data-theme="light"] .boton-contact .elementor-button-icon svg { color: #111111 !important; fill: #111111 !important; } /* Borde sci-fi fijo aplicado al WRAPPER (.boton-contact) */ .boton-contact::before { content: ""; position: absolute; inset: -1px; /* borde de 1px hacia afuera */ padding: 1px; /* grosor visible del aro */ border-radius: 999px; background: linear-gradient( 120deg, rgba(2, 3, 10, 1), #4B6C9F, rgba(2, 3, 10, 1), #4B6C9F ); background-size: 250% 250%; background-position: 0% 50%; opacity: 1; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; animation: neonBorderMove 2.4s linear infinite; } /* Variante light del borde */ html[data-theme="light"] .boton-contact::before { background: linear-gradient( 120deg, rgba(240, 242, 255, 1), #4B6C9F, rgba(240, 242, 255, 1), #4B6C9F ); } /* Animación borde (si no existe ya) */ @keyframes neonBorderMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }/* End custom CSS */ /* Start custom CSS for jet-listing-dynamic-field, class: .elementor-element-4fdd024 */.tvt-release-id { display:none !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c20e4b7 *//* ===== CARD BASE ===== */ .release-card { position: relative; overflow: hidden; border-radius: 18px; cursor: pointer; } /* La imagen llena el contenedor */ .release-card .imagen-release img { display: block; width: 100%; height: auto; } /* ===== OVERLAY + CONTENIDO ===== */ .release-card .content-release { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #ffffff; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; } /* Hover: mostrar overlay */ .release-card:hover .content-release { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ===== LIGHT THEME ===== */ html[data-theme="light"] .release-card .content-release { background: rgba(245, 247, 251, 0.76); } html[data-theme="light"] .release-card .content-release * { color: #111111 !important; } /* ===== BORDE SCI-FI SOLO EN HOVER – DARK ===== */ .release-card::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; /* mismo degradado eléctrico que el botón */ background: linear-gradient( 120deg, rgba(5, 8, 24, 1) 0%, #151540 15%, #1f35ff 32%, #ffffff 50%, #1f35ff 68%, #151540 85%, rgba(5, 8, 24, 1) 100% ); background-size: 260% 260%; background-position: 0% 50%; opacity: 0; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.25s ease; z-index: 1; } /* Variante para theme light – degradado pastel + blanco */ html[data-theme="light"] .release-card::before { background: linear-gradient( 120deg, rgba(240, 242, 255, 1) 0%, #d8ddff 15%, #7c88ff 32%, #ffffff 50%, #7c88ff 68%, #d8ddff 85%, rgba(240, 242, 255, 1) 100% ); background-size: 260% 260%; background-position: 0% 50%; } /* Activar borde con animación */ .release-card:hover::before { opacity: 1; animation: neonBorderMove 2.4s linear infinite; } /* Animación */ @keyframes neonBorderMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }/* End custom CSS */