.elementor-573 .elementor-element.elementor-element-2708380:not(.elementor-motion-effects-element-type-background), .elementor-573 .elementor-element.elementor-element-2708380 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mecacenter.com.pe/wp-content/uploads/2026/08/mecacenter-servicios-imagen-principal.jpg");}.elementor-573 .elementor-element.elementor-element-2708380 > .elementor-background-overlay{background-color:#0B2D5CD9;opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-573 .elementor-element.elementor-element-2708380 > .elementor-container{max-width:1200px;}.elementor-573 .elementor-element.elementor-element-2708380{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:50px 0px 50px 0px;}.elementor-573 .elementor-element.elementor-element-5a92cb6{text-align:center;}.elementor-573 .elementor-element.elementor-element-fc12a03{padding:0px 200px 0px 200px;text-align:center;}.elementor-573 .elementor-element.elementor-element-fc12a03 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:48px;font-weight:700;text-transform:none;line-height:53px;color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-29c6826{padding:0px 270px 0px 270px;text-align:center;color:#CBD5E1;}.elementor-573 .elementor-element.elementor-element-7bd68c7:not(.elementor-motion-effects-element-type-background), .elementor-573 .elementor-element.elementor-element-7bd68c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F7FB;}.elementor-573 .elementor-element.elementor-element-7bd68c7 > .elementor-container{max-width:1250px;}.elementor-573 .elementor-element.elementor-element-7bd68c7{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:80px 0px 120px 0px;}.elementor-573 .elementor-element.elementor-element-7bd68c7 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-573 .elementor-element.elementor-element-3c81d68 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-573 .elementor-element.elementor-element-13b4ed2:not(.elementor-motion-effects-element-type-background), .elementor-573 .elementor-element.elementor-element-13b4ed2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-13b4ed2 > .elementor-container{max-width:1200px;}.elementor-573 .elementor-element.elementor-element-13b4ed2{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:80px 0px 100px 0px;}.elementor-573 .elementor-element.elementor-element-13b4ed2 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-573 .elementor-element.elementor-element-0bae9f4 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:0px;}.elementor-573 .elementor-element.elementor-element-0bae9f4 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-573 .elementor-element.elementor-element-7155e13{padding:0px 0px 10px 0px;text-align:center;}.elementor-573 .elementor-element.elementor-element-7155e13 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:35px;font-weight:700;text-transform:none;}.elementor-573 .elementor-element.elementor-element-74dcb5b{padding:0px 0px 0px 0px;text-align:center;}.elementor-573 .elementor-element.elementor-element-051f42b{margin-top:20px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-573 .elementor-element.elementor-element-c147465:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-573 .elementor-element.elementor-element-c147465 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-573 .elementor-element.elementor-element-c147465 > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E2E8F0;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 20px 0px 0px;--e-column-margin-right:20px;--e-column-margin-left:0px;padding:40px 20px 40px 20px;}.elementor-573 .elementor-element.elementor-element-c147465 > .elementor-element-populated, .elementor-573 .elementor-element.elementor-element-c147465 > .elementor-element-populated > .elementor-background-overlay, .elementor-573 .elementor-element.elementor-element-c147465 > .elementor-background-slideshow{border-radius:12px 12px 12px 12px;}.elementor-573 .elementor-element.elementor-element-c147465 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-573 .elementor-element.elementor-element-4d48b64 .elementor-icon-box-wrapper{text-align:center;gap:15px;}.elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-stacked .elementor-icon{background-color:#0B2D5C0D;fill:#0B2D5C;color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-framed .elementor-icon, .elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-default .elementor-icon{fill:#0B2D5C0D;color:#0B2D5C0D;border-color:#0B2D5C0D;}.elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-framed .elementor-icon{background-color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-stacked:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-stacked:has(:focus) .elementor-icon{background-color:#0B2D5C;fill:#FFFFFF;color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-default:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-framed:has(:focus) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-default:has(:focus) .elementor-icon{fill:#0B2D5C;color:#0B2D5C;border-color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-4d48b64.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-4d48b64 .elementor-icon{font-size:35px;padding:20px;}.elementor-573 .elementor-element.elementor-element-4d48b64 .elementor-icon-box-title, .elementor-573 .elementor-element.elementor-element-4d48b64 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:700;text-transform:none;}.elementor-573 .elementor-element.elementor-element-4d48b64 .elementor-icon-box-description{font-size:16px;}.elementor-573 .elementor-element.elementor-element-d88cc1d:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-573 .elementor-element.elementor-element-d88cc1d > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-573 .elementor-element.elementor-element-d88cc1d > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E2E8F0;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 10px 0px 10px;--e-column-margin-right:10px;--e-column-margin-left:10px;padding:40px 20px 40px 20px;}.elementor-573 .elementor-element.elementor-element-d88cc1d > .elementor-element-populated, .elementor-573 .elementor-element.elementor-element-d88cc1d > .elementor-element-populated > .elementor-background-overlay, .elementor-573 .elementor-element.elementor-element-d88cc1d > .elementor-background-slideshow{border-radius:12px 12px 12px 12px;}.elementor-573 .elementor-element.elementor-element-d88cc1d > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-573 .elementor-element.elementor-element-6417021 .elementor-icon-box-wrapper{text-align:center;gap:15px;}.elementor-573 .elementor-element.elementor-element-6417021.elementor-view-stacked .elementor-icon{background-color:#0B2D5C0D;fill:#0B2D5C;color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-6417021.elementor-view-framed .elementor-icon, .elementor-573 .elementor-element.elementor-element-6417021.elementor-view-default .elementor-icon{fill:#0B2D5C0D;color:#0B2D5C0D;border-color:#0B2D5C0D;}.elementor-573 .elementor-element.elementor-element-6417021.elementor-view-framed .elementor-icon{background-color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-6417021.elementor-view-stacked:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-6417021.elementor-view-stacked:has(:focus) .elementor-icon{background-color:#0B2D5C;fill:#FFFFFF;color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-6417021.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-6417021.elementor-view-default:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-6417021.elementor-view-framed:has(:focus) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-6417021.elementor-view-default:has(:focus) .elementor-icon{fill:#0B2D5C;color:#0B2D5C;border-color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-6417021.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-6417021.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-6417021 .elementor-icon{font-size:35px;padding:20px;}.elementor-573 .elementor-element.elementor-element-6417021 .elementor-icon-box-title, .elementor-573 .elementor-element.elementor-element-6417021 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:700;text-transform:none;}.elementor-573 .elementor-element.elementor-element-6417021 .elementor-icon-box-description{font-size:16px;}.elementor-573 .elementor-element.elementor-element-05ab33c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-573 .elementor-element.elementor-element-05ab33c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-573 .elementor-element.elementor-element-05ab33c > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E2E8F0;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 0px 20px;--e-column-margin-right:0px;--e-column-margin-left:20px;padding:40px 20px 40px 20px;}.elementor-573 .elementor-element.elementor-element-05ab33c > .elementor-element-populated, .elementor-573 .elementor-element.elementor-element-05ab33c > .elementor-element-populated > .elementor-background-overlay, .elementor-573 .elementor-element.elementor-element-05ab33c > .elementor-background-slideshow{border-radius:12px 12px 12px 12px;}.elementor-573 .elementor-element.elementor-element-05ab33c > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-573 .elementor-element.elementor-element-0e51bd2 .elementor-icon-box-wrapper{text-align:center;gap:15px;}.elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-stacked .elementor-icon{background-color:#0B2D5C0D;fill:#0B2D5C;color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-framed .elementor-icon, .elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-default .elementor-icon{fill:#0B2D5C0D;color:#0B2D5C0D;border-color:#0B2D5C0D;}.elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-framed .elementor-icon{background-color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-stacked:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-stacked:has(:focus) .elementor-icon{background-color:#0B2D5C;fill:#FFFFFF;color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-default:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-framed:has(:focus) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-default:has(:focus) .elementor-icon{fill:#0B2D5C;color:#0B2D5C;border-color:#0B2D5C;}.elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-573 .elementor-element.elementor-element-0e51bd2.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-573 .elementor-element.elementor-element-0e51bd2 .elementor-icon{font-size:35px;padding:20px;}.elementor-573 .elementor-element.elementor-element-0e51bd2 .elementor-icon-box-title, .elementor-573 .elementor-element.elementor-element-0e51bd2 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:700;text-transform:none;}.elementor-573 .elementor-element.elementor-element-0e51bd2 .elementor-icon-box-description{font-size:16px;}@media(max-width:767px){.elementor-573 .elementor-element.elementor-element-fc12a03{padding:0px 0px 0px 0px;}.elementor-573 .elementor-element.elementor-element-fc12a03 .elementor-heading-title{font-size:40px;line-height:40px;}.elementor-573 .elementor-element.elementor-element-29c6826{padding:0px 0px 0px 0px;}.elementor-573 .elementor-element.elementor-element-051f42b{padding:10px 10px 10px 10px;}.elementor-573 .elementor-element.elementor-element-c147465 > .elementor-element-populated{margin:0px 0px 20px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-573 .elementor-element.elementor-element-d88cc1d > .elementor-element-populated{margin:0px 0px 20px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-573 .elementor-element.elementor-element-05ab33c > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}}/* Start custom CSS for text-editor, class: .elementor-element-5a92cb6 */.badge-neon {
    display: inline-block;
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
    border: 1px solid #f39c12;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-3c81d68 */.btn-primary {
    background: #f39c12;
    color: white;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s;
    margin-top: 20px;
}

.btn-primary:hover {
    background: #d68910;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
    color: white !important;
}
.acc-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    font-family: Montserrat;
    color: white;
}

.interactive-accordion {
    display: flex;
    width: 95%;
    max-width: 1300px;
    height: 550px;
    margin: 0 auto;
    gap: 15px;
}

.acc-panel {
    flex: 1;
    /* Panel cerrado */
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Fondos Reales de los Paneles */
.panel-corte {
    background-image: url('https://mecacenter.com.pe/wp-content/uploads/2026/08/mecacenter-servicios-servicios-corte-de-planchas-de-acero.webp');
}

.panel-doblez {
    background-image: url('https://mecacenter.com.pe/wp-content/uploads/2026/08/Screenshot_92.png');
}

.panel-arenado {
    background-image: url('https://mecacenter.com.pe/wp-content/uploads/2026/08/mecacenter-servicios-servicios-arenado-granallado-y-pintura-industrial.webp');
}

.panel-soldadura {
    background-image: url('https://mecacenter.com.pe/wp-content/uploads/2026/08/mecacenter-servicios-servicios-soldadura-de-estructuras-metalicas-1.webp');
}

.panel-corte-laser{
    background-image: url('https://mecacenter.com.pe/wp-content/uploads/2026/08/mecacenter-servicios-servicios-corte-laser-cnc.webp');
}

.panel-perforacion {
    background-image: url('https://mecacenter.com.pe/wp-content/uploads/2026/08/mecacenter-inicio-perforacion-de-plancahas-de-acero.webp');
}

/* Header Cerrado (Horizontal) */
.acc-header {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 45, 92, 0.9) 0%, rgba(11, 45, 92, 0.4) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 15px;
    text-align: center;
    color: white;
    transition: opacity 0.4s ease;
    z-index: 5;
}

.acc-header i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #f39c12;
}

.acc-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Contenido Activo (Azul Marino Corporativo) */
.acc-body {
    position: absolute;
    inset: 0;
    padding: 60px 50px;
    background: linear-gradient(90deg, rgba(11, 45, 92, 0.95) 0%, rgba(11, 45, 92, 0.7) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-30px);
    transition: all 0.5s ease;
    z-index: 10;
}

.acc-body h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    
    font-family: Montserrat;
    font-weight: 700;
    text-transform: none;
    color: white;
}

.acc-body p {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 450px;
    color: #e2e8f0;
    margin-bottom: 10px;
}

/* ESTADO ACTIVO */
.acc-panel.active {
    flex: 4;
    cursor: default;
    box-shadow: 0 15px 30px rgba(11, 45, 92, 0.2);
    border: 2px solid var(--accent);
}

.acc-panel.active .acc-header {
    opacity: 0;
    pointer-events: none;
}

.acc-panel.active .acc-body {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0.2s;
}

/* =========================================
   LOS EFECTOS WOW (Se activan al abrir)
   ========================================= */

/* 1. Corte (Láser Celeste) */
.fx-laser {
    position: absolute;
    top: 0;
    right: 23%;
    width: 2px;
    height: 0;
    background: #00e5ff;
    box-shadow: 0 0 15px #00e5ff, 0 0 30px #00e5ff;
    z-index: 15;
    opacity: 0;
}

.acc-panel.active .fx-laser {
    opacity: 1;
    animation: laserCut 2.5s infinite ease-in-out;
}

@keyframes laserCut {
    0% {
        height: 0;
        top: 0;
    }

    50% {
        height: 100%;
        top: 0;
    }

    100% {
        height: 0;
        top: 100%;
    }
}

/* 2. Doblez (Pliegues Dinámicos) */
.fx-metal-bend {
    position: absolute;
    right: 15%; 
    bottom: 25%;
    width: 140px; 
    height: 10px;
    z-index: 15;
    perspective: 600px; /* Profundidad 3D */
    display: flex;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.acc-panel.active .fx-metal-bend { opacity: 1; }

.metal-half {
    width: 50%; 
    height: 8px;
    background: linear-gradient(to bottom, #f8fafc, #94a3b8);
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

.left-half { 
    transform-origin: right center; /* Se dobla desde el centro hacia la derecha */
    border-radius: 4px 0 0 4px; 
}

.right-half { 
    transform-origin: left center;  /* Se dobla desde el centro hacia la izquierda */
    border-radius: 0 4px 4px 0; 
    background: linear-gradient(to bottom, #e2e8f0, #64748b); /* Ligero cambio de luz */
}

/* Las animaciones en bucle simulando la prensa */
.acc-panel.active .left-half { animation: bendLeft 3s infinite alternate ease-in-out; }
.acc-panel.active .right-half { animation: bendRight 3s infinite alternate ease-in-out; }

@keyframes bendLeft { 
    0%, 15% { transform: rotate(0deg); } 
    85%, 100% { transform: rotate(-55deg); } 
}
@keyframes bendRight { 
    0%, 15% { transform: rotate(0deg); } 
    85%, 100% { transform: rotate(55deg); } 
}

/* 3. Arenado (Brocha de Limpieza) */
.panel-arenado {
    filter: grayscale(0%);
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 1s ease;
}

.panel-arenado.active {
    filter: grayscale(0%);
}

.fx-brush-wipe {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(20deg);
    z-index: 12;
}

.acc-panel.active .fx-brush-wipe {
    animation: brushWipe 3s ease forwards;
}

@keyframes brushWipe {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* =========================================
   4. SOLDADURA (Física real de chispas volando)
   ========================================= */
.fx-sparks-fly {
    position: absolute;
    inset: 0;
    z-index: 50; /* Lo subimos a 20 para que pase por encima del acc-body (que tiene 10) */
    pointer-events: none;
}

.spark-fly {
    z-index: 20;
    position: absolute;
    /* Las hacemos nacer un poco más adentro de la tarjeta para garantizar que se vean al nacer */
    bottom: 5%; 
    right: 5%; 
    background: #f39c12;
    border-radius: 50%;
    box-shadow: 0 0 8px #f39c12, 0 0 15px #ffffff;
    opacity: 0;
}

.acc-panel.active .spark-fly {
    animation: shootSpark infinite;
    animation-timing-function: cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* Modificamos un poco las trayectorias (--tx, --ty) para que no salgan tanto de la pantalla */
.sp-1 { width: 4px; height: 4px; animation-duration: 1.2s !important; animation-delay: 0.1s !important; --tx: -150px; --ty: -200px; }
.sp-2 { width: 7px; height: 7px; animation-duration: 1.6s !important; animation-delay: 0.5s !important; --tx: -80px; --ty: -300px; } 
.sp-3 { width: 3px; height: 3px; animation-duration: 0.9s !important; animation-delay: 0.2s !important; --tx: -200px; --ty: -120px; } 
.sp-4 { width: 5px; height: 5px; animation-duration: 1.4s !important; animation-delay: 0.8s !important; --tx: -100px; --ty: -250px; }
.sp-5 { width: 8px; height: 8px; animation-duration: 1.8s !important; animation-delay: 0.4s !important; --tx: -250px; --ty: -180px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 25px #f39c12;} 
.sp-6 { width: 3px; height: 3px; animation-duration: 1.1s !important; animation-delay: 0.9s !important; --tx: -60px;  --ty: -180px; }
.sp-7 { width: 5px; height: 5px; animation-duration: 1.5s !important; animation-delay: 0.6s !important; --tx: -180px; --ty: -260px; }

@keyframes shootSpark {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
}

/* 5. Perforación (Agujeros) */
.fx-holes {
    position: absolute;
    right: 10%;
    top: 0;
    bottom: 0;
    width: 30%;
    z-index: 12;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    opacity: 0;
}

.acc-panel.active .fx-holes {
    opacity: 1;
}

.hole {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #020a14 50%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 50%;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.8);
    margin-left: auto;
    transform: scale(0);
}

.acc-panel.active .h1 {
    animation: punchHole 0.4s ease forwards;
    animation-delay: 0.5s;
}

.acc-panel.active .h2 {
    animation: punchHole 0.4s ease forwards;
    animation-delay: 1s;
    margin-right: 30px;
}

.acc-panel.active .h3 {
    animation: punchHole 0.4s ease forwards;
    animation-delay: 1.5s;
}

@keyframes punchHole {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================
   EFECTO WOW: TUERCAS DEL LOGO GIRANDO (CORREGIDO)
   ========================================= */

/* Contenedor general en la esquina inferior derecha */
.fx-logo-gears {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 100px;  /* Ajustamos el lienzo para que respiren bien */
    height: 100px;
    z-index: 10;
    pointer-events: none; 
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.acc-panel.active .fx-logo-gears {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.4s; 
}

/* La estructura base de UNA tuerca */
.gear {
    position: absolute;
    /* Tamaño IDÉNTICO y caja perfectamente cuadrada para evitar deformación al girar */
    width: 44px; 
    height: 44px; 
    
    /* Hexágono matemáticamente perfecto (respeta la proporción real de la figura) */
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    
    /* Agujero central con difuminado del 2% para eliminar los "dientes de sierra" (Anti-aliasing) */
    -webkit-mask: radial-gradient(circle at center, transparent 28%, rgba(0,0,0,1) 30%);
    mask: radial-gradient(circle at center, transparent 28%, rgba(0,0,0,1) 30%);
}

/* Colores exactos y posiciones ajustadas para formar el isotipo a la perfección */
.g-grey {
    background-color: #b3b3b3; 
    top: 0;
    right: 12px;
}

.g-blue {
    background-color: #3fa9f5; 
    top: 25px;
    left: 2px;
}

.g-dark {
    background-color: #021a40; 
    bottom: 5px;
    right: 12px;
}

/* Animaciones de giro (ahora el contenedor cuadrado gira, y la figura se mantiene perfecta) */
.acc-panel.active .g-grey {
    animation: spinGear 6s linear infinite; 
}

.acc-panel.active .g-blue {
    animation: spinGearReverse 8s linear infinite; 
}

.acc-panel.active .g-dark {
    animation: spinGear 5s linear infinite; 
}

@keyframes spinGear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinGearReverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}



/* ==================================================
   RESCATE RESPONSIVE: ACORDEÓN EN CELULARES (CORREGIDO)
   ================================================== */
@media (max-width: 992px) {
    /* 1. Reducimos la altura exagerada a algo mucho más ajustado */
    .interactive-accordion { 
        flex-direction: column; 
        height: 700px !important; /* Mucho menos espacio vacío */
    }

    /* 2. El panel abierto crece lo justo y necesario */
    .acc-panel.active { 
        flex: 4.5 !important; /* Bajamos de 8 para no estirarlo tanto */
    }

    /* 3. Ajuste de la cabecera cerrada */
    .acc-header { 
        flex-direction: row; 
        padding: 20px; 
        justify-content: flex-start; 
    }
    
    .acc-header i { 
        margin-bottom: 0; 
        margin-right: 15px; 
        font-size: 1.6rem; 
    }
    
    .acc-header h3 { 
        text-align: left; 
        font-size: 1rem;
    }

    /* 4. Ajustes del interior para el texto */
    .acc-body { 
        padding: 25px 20px !important; 
        justify-content: flex-start !important; 
    }

    .acc-body h2 { 
        font-size: 1.4rem !important; 
        margin-bottom: 12px !important; 
    }

    .acc-body p { 
        font-size: 0.85rem !important; 
        line-height: 1.5 !important; 
        margin-bottom: 20px !important; 
    }

    .btn-primary {
        align-self: flex-start; 
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
        margin-top: 0 !important;
    }

    /* 5. OCULTAMOS los efectos pesados (láser, doblez, chispas) */
    .fx-laser, 
    .fx-metal-bend, 
    .fx-brush-wipe, 
    .fx-sparks-fly, 
    .fx-holes {
        display: none !important;
    }

    /* 6. RESCATAMOS LAS TUERCAS Y LAS PONEMOS JUNTO AL BOTÓN */
    .fx-logo-gears {
        display: block !important; 
        position: absolute !important; /* Posición absoluta dentro del panel */
        bottom: 25px !important;       /* A la misma altura que el padding inferior del panel */
        right: 20px !important;        /* Pegado a la derecha, respetando el padding */
        left: auto !important;         /* Borramos cualquier left que hayamos puesto antes */
        margin-top: 0 !important;      /* Borramos márgenes negativos */
        
        transform: scale(0.55) translateY(20px) !important; 
        transform-origin: right bottom !important; /* El origen de la escala ahora es la esquina inferior derecha */
    }

    .acc-panel.active .fx-logo-gears {
        opacity: 1 !important;
        transform: scale(0.55) translateY(0) !important; 
        transition-delay: 0.2s !important;
    }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-c147465 */.elementor-573 .elementor-element.elementor-element-c147465:hover{
    
    transform: translateY(-10px);
    
    box-shadow: 0 15px 30px rgba(11, 45, 92, 0.08);

}

.elementor-573 .elementor-element.elementor-element-c147465 div:hover{
    border-color: #79a1c1 !important;
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-d88cc1d */.elementor-573 .elementor-element.elementor-element-d88cc1d:hover{
    
    transform: translateY(-10px);
    
    box-shadow: 0 15px 30px rgba(11, 45, 92, 0.08);

}

.elementor-573 .elementor-element.elementor-element-d88cc1d div:hover{
    border-color: #79a1c1 !important;
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-05ab33c */.elementor-573 .elementor-element.elementor-element-05ab33c:hover{
    
    transform: translateY(-10px);
    
    box-shadow: 0 15px 30px rgba(11, 45, 92, 0.08);

}

.elementor-573 .elementor-element.elementor-element-05ab33c div:hover{
    border-color: #79a1c1 !important;
}/* End custom CSS */