.elementor-509 .elementor-element.elementor-element-b8ea98b{--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-509 .elementor-element.elementor-element-750a1b9{--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-509 .elementor-element.elementor-element-f7fd3ff .elementor-heading-title{color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-509 .elementor-element.elementor-element-3edfc4d{color:#000000;}.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-509 .elementor-element.elementor-element-74ddd48 .elementor-heading-title{color:#000000;}.elementor-509 .elementor-element.elementor-element-90bc300{color:#000000;}.elementor-509 .elementor-element.elementor-element-97cac77 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-509 .elementor-element.elementor-element-136d526 .elementor-heading-title{color:#000000;}.elementor-509 .elementor-element.elementor-element-99a9c6e{color:#000000;}/* Start custom CSS for html, class: .elementor-element-8d42142 *//* ===== BUSCADOR ===== */
.buscador {
    width: 100%;
    max-width: 420px;
    padding: 14px 20px;
    border: 2px solid var(--color-tomate);
    border-radius: 10px;
    font-size: 17px;
    margin: 20px auto 40px auto;
    display: block;
    text-align: center;
    outline: none;
}

/* ===== GRID ===== */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    padding: 20px;
    text-align: center;
}

/* ===== ITEM (CAJA UNIFORME PARA ALINEAR) ===== */
.emoji-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;                 /* altura uniforme */
    background: transparent !important;
}

/* ===== ICONO (MISMO TAMAÑO VISUAL) ===== */
.emoji-icon {
    width: 170px;                  /* mantienes tu tamaño base */
    height: 100%;                  /* ocupa la caja */
    max-height: 120px;             /* límite para que no se “dispare” */
    width: auto;                   /* respeta proporción */
    object-fit: contain;           /* nunca se recorta */
    display: block;
    margin: auto;

    /* tu efecto para “disimular fondo” */
    mix-blend-mode: multiply !important;
    background: transparent !important;

    /* hover original, sin cambiar estética */
    transition: transform 0.55s ease;
}

/* ===== HOVER (MISMA ESTÉTICA, PERO SIN DESALINEAR) ===== */
.emoji-item:hover {
    background: transparent !important;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.25))
            drop-shadow(0 0 30px rgba(0,0,0,0.18));
}

.emoji-item:hover .emoji-icon {
    transform: scale(1.42);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .emoji-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .emoji-item {
        height: 130px;
    }

    .emoji-icon {
        max-height: 110px;
    }
}

@media (max-width: 768px) {
    .emoji-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    .emoji-item {
        height: 125px;
    }

    .emoji-icon {
        max-height: 105px;
    }
}

@media (max-width: 480px) {
    .emoji-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }

    .emoji-item {
        height: 120px;
    }

    .emoji-icon {
        max-height: 100px;
    }
}/* End custom CSS */