.elementor-9791 .elementor-element.elementor-element-68165e4{--display:flex;}.elementor-widget-portfolio a .elementor-portfolio-item__overlay{background-color:var( --e-global-color-accent );}.elementor-widget-portfolio .elementor-portfolio-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-portfolio .elementor-portfolio__filter{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-portfolio .elementor-portfolio__filter.elementor-active{color:var( --e-global-color-primary );}.elementor-9791 .elementor-element.elementor-element-44aaa33{--grid-row-gap:3px;--grid-column-gap:7px;}.elementor-9791 .elementor-element.elementor-element-44aaa33 a .elementor-portfolio-item__overlay{background-color:#FF0074;}.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio-item__title{font-family:"Roboto", Sans-serif;font-size:23px;font-weight:600;}.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter:not(:last-child){margin-right:calc(10px/2);}.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter:not(:first-child){margin-left:calc(10px/2);}.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filters{margin-bottom:10px;}/* Start custom CSS for portfolio, class: .elementor-element-44aaa33 *//* LIMPIEZA TOTAL DE MASONRY - 3GRAFIK STYLE */

/* 1. Añadir espacio y suavizar esquinas */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-post {
    padding: 10px !important; /* Espacio interno */
}

.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-post__thumbnail {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border: 1px solid #f0f0f0 !important;
    transition: all 0.3s ease-in-out;
}

/* 2. Efecto al pasar el mouse (Hover) */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-post:hover .elementor-post__thumbnail {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15) !important;
    border-color: #e0e0e0 !important;
}

/* 3. Evitar que las imágenes se toquen */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-posts-container {
    gap: 25px !important; 
}

/* OVERLAY VIBRANTE CON FUENTE POPPINS - 3GRAFIK STYLE */

/* 1. Fondo con Degradado Fucsia Reforzado */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio-item__overlay {
    background: linear-gradient(0deg, rgba(255, 0, 127, 0.95) 0%, rgba(255, 0, 127, 0.4) 65%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 25px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 2. Implementación de Poppins y Sombra Intensa */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio-item__title {
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important; /* Cambio a Poppins */
    font-size: 1.25rem !important;
    font-weight: 700 !important; /* Poppins se ve genial en este peso */
    text-transform: capitalize !important; /* 'Capitalize' suele verse más amigable que todo en mayúsculas */
    /* Sombra fucsia profunda para máximo contraste */
    text-shadow: 2px 4px 8px rgba(80, 0, 40, 0.9) !important;
    margin: 0 !important;
    transform: translateY(15px);
    transition: transform 0.4s ease !important;
    line-height: 1.2 !important;
}

/* 3. Brillo perimetral al pasar el mouse (Glow Effect) */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio-item:hover .elementor-portfolio-item__thumbnail {
    box-shadow: 0 0 30px rgba(255, 0, 127, 0.7) !important;
    border: 2px solid rgba(255, 0, 127, 1) !important;
}

/* 4. Efecto de entrada del título */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio-item:hover .elementor-portfolio-item__title {
    transform: translateY(0);
}

/* MENÚ INTEGRADO, CENTRADO Y VIBRANTE - 3GRAFIK STYLE */

/* 1. Contenedor Centrado y Estilizado */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filters {
    display: flex !important;
    justify-content: center !important; /* Centra toda la barra */
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    padding: 6px 10px !important;
    border-radius: 15px !important;
    gap: 5px !important; /* Espacio interno constante */
    margin: 0 auto 40px auto !important; /* Centra el bloque y da aire abajo */
    width: fit-content !important; /* Ajusta la barra al contenido */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* 2. Botones con Poppins y Espaciado Equilibrado */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter {
    font-family: 'Poppins', sans-serif !important;
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #444 !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

/* 3. El Toque de Color (Hover) */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter:hover {
    color: #ff007f !important; /* Cambio de color de letra al fucsia */
    background-color: rgba(255, 0, 127, 0.05) !important; /* Fondo fucsia muy suave */
}

/* 4. Categoría Activa (Resalte Fucsia total) */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter.elementor-active {
    background-color: #ff007f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(255, 0, 127, 0.3) !important;
}

/* 5. Limpieza y Optimización Móvil */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter[data-filter="uncategorized"] {
    display: none !important;
}

@media (max-width: 768px) {
    .elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filters {
        width: 95% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* SEPARADORES GRISES PERFECTAMENTE CENTRADOS */

/* 1. Ajuste del contenedor de los filtros */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filters {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important; /* Quitamos el gap para controlar el espacio con padding */
    padding: 8px 15px !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 15px !important;
    width: fit-content !important;
    margin: 0 auto 40px auto !important;
}

/* 2. Botones con espacio simétrico */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter {
    font-family: 'Poppins', sans-serif !important;
    padding: 8px 20px !important; /* Espacio igual a los lados */
    position: relative !important;
    margin: 0 !important;
}

/* 3. La línea divisoria centrada */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0; /* Se pega al borde derecho del botón actual */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: #e0e0e0; /* Gris suave */
}

/* 4. Limpieza visual al interactuar */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter.elementor-active:after,
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter:hover:after,
/* También ocultamos la línea del botón anterior al que tiene hover/active para que no choquen */
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter:hover + .elementor-portfolio__filter:after,
.elementor-9791 .elementor-element.elementor-element-44aaa33 .elementor-portfolio__filter.elementor-active + .elementor-portfolio__filter:after {
    opacity: 0; 
}/* End custom CSS */