/* _content/Maty/Components/Control/HeaderMenu.razor.rz.scp.css */
.text-shadow-drop-center[b-zk9rcmxkbt] {
    animation: text-shadow-drop-center-b-zk9rcmxkbt 0.6s both;
}

.sombra[b-zk9rcmxkbt] {
    box-shadow: 0 20px 25px -5px rgb(255 255 255 / 70%);
    padding:unset !important;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-11-25 22:44:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * @animation text-shadow-drop-center
 * ----------------------------------------
 */
@keyframes text-shadow-drop-center-b-zk9rcmxkbt {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
}
/* _content/Maty/Components/Control/MenuViewer.razor.rz.scp.css */
.menu-container[b-g9cnr2h9j8] {
    min-height: 100vh;
    padding: 1rem;
}

.menu-wrapper[b-g9cnr2h9j8] {
    width: 70%;
    max-width: 100%;
    margin: 0 auto;
}

.menu-title[b-g9cnr2h9j8] {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
    color: #1f2937;
}

.menu-card[b-g9cnr2h9j8] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgb(255 255 255 / 70%);
    overflow: hidden;
}

.menu-controls[b-g9cnr2h9j8] {
    background: #1f2937;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.zoom-controls[b-g9cnr2h9j8] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.control-btn[b-g9cnr2h9j8] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

    .control-btn:hover[b-g9cnr2h9j8] {
        background: #374151;
    }

    .control-btn:active[b-g9cnr2h9j8] {
        background: #111827;
    }

.icon[b-g9cnr2h9j8] {
    font-size: 1.2rem;
    pointer-events: none;
}

.zoom-level[b-g9cnr2h9j8] {
    padding: 0.5rem 0.75rem;
    background: #374151;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    user-select: none;
    min-width: 60px;
    text-align: center;
}

.page-info[b-g9cnr2h9j8] {
    text-align: center;
    flex: 1;
    font-weight: 500;
    font-size: 0.875rem;
    min-width: 100%;
    order: -1;
    margin-bottom: 0.5rem;
}

.menu-viewer[b-g9cnr2h9j8] {
    position: relative;
    background: #f3f4f6;
    /*height: 70vh;*/
    min-height: 400px;
    /*max-height: 800px;*/
    overflow: hidden;
}

    .menu-viewer.fullscreen[b-g9cnr2h9j8] {
        height: 90vh;
        max-height: none;
    }

.image-container[b-g9cnr2h9j8] {
    width: 100%;
    height: 100%;
    overflow: auto;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.menu-image[b-g9cnr2h9j8] {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.nav-btn[b-g9cnr2h9j8] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(31, 41, 55, 0.9);
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-btn:hover[b-g9cnr2h9j8] {
        background: rgba(55, 65, 81, 0.95);
    }

    .nav-btn:active[b-g9cnr2h9j8] {
        background: #111827;
        transform: translateY(-50%) scale(0.9);
    }

.nav-btn-prev[b-g9cnr2h9j8] {
    left: 0.5rem;
}

.nav-btn-next[b-g9cnr2h9j8] {
    right: 0.5rem;
}

.nav-arrow[b-g9cnr2h9j8] {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
}

.thumbnails[b-g9cnr2h9j8] {
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0.5rem;
}

.thumbnails-container[b-g9cnr2h9j8] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.thumbnail[b-g9cnr2h9j8] {
    flex-shrink: 0;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: none;
    padding: 0;
}

    .thumbnail:hover[b-g9cnr2h9j8] {
        border-color: #1f2937;
    }

    .thumbnail:active[b-g9cnr2h9j8] {
        transform: scale(0.95);
    }

.thumbnail-active[b-g9cnr2h9j8] {
    border-color: #1f2937;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.thumbnail img[b-g9cnr2h9j8] {
    width: 70px;
    height: 100px;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.instructions[b-g9cnr2h9j8] {
    margin-top: 1rem;
    text-align: center;
    color: #6b7280;
    padding: 0 1rem;
}

    .instructions p[b-g9cnr2h9j8] {
        font-size: 0.875rem;
    }

/* Scrollbar personalizado */
.image-container[b-g9cnr2h9j8]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.image-container[b-g9cnr2h9j8]::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.image-container[b-g9cnr2h9j8]::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 4px;
}

.thumbnails-container[b-g9cnr2h9j8]::-webkit-scrollbar {
    height: 6px;
}

.thumbnails-container[b-g9cnr2h9j8]::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.thumbnails-container[b-g9cnr2h9j8]::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 3px;
}

/* Tablets */
@@media (min-width: 768px) and (max-width: 1024px) {
    .menu-wrapper[b-g9cnr2h9j8] {
        max-width: 700px;
    }

    .menu-viewer[b-g9cnr2h9j8] {
        height: 60vh;
    }

    .page-info[b-g9cnr2h9j8] {
        min-width: auto;
        order: 0;
        margin-bottom: 0;
    }

    .thumbnail img[b-g9cnr2h9j8] {
        width: 75px;
        height: 105px;
    }
}

/* Móviles pequeños (320px - 480px) */
@@media (max-width: 480px) {
    .menu-container[b-g9cnr2h9j8] {
        padding: 0.5rem;
    }

    .menu-title[b-g9cnr2h9j8] {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .menu-card[b-g9cnr2h9j8] {
        border-radius: 0.5rem;
    }

    .menu-controls[b-g9cnr2h9j8] {
        padding: 0.75rem 0.5rem;
    }

    .control-btn[b-g9cnr2h9j8] {
        min-width: 36px;
        min-height: 36px;
        padding: 0.4rem;
    }

    .icon[b-g9cnr2h9j8] {
        font-size: 1rem;
    }

    .zoom-level[b-g9cnr2h9j8] {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
        min-width: 50px;
    }

    .page-info[b-g9cnr2h9j8] {
        font-size: 0.75rem;
    }

    .menu-viewer[b-g9cnr2h9j8] {
        height: 60vh;
        min-height: 300px;
    }

        .menu-viewer.fullscreen[b-g9cnr2h9j8] {
            height: 85vh;
        }

    .image-container[b-g9cnr2h9j8] {
        padding: 0.25rem;
    }

    .nav-btn[b-g9cnr2h9j8] {
        width: 36px;
        height: 36px;
        padding: 0.4rem;
    }

    .nav-btn-prev[b-g9cnr2h9j8] {
        left: 0.25rem;
    }

    .nav-btn-next[b-g9cnr2h9j8] {
        right: 0.25rem;
    }

    .nav-arrow[b-g9cnr2h9j8] {
        font-size: 1.25rem;
    }

    .thumbnails[b-g9cnr2h9j8] {
        padding: 0.75rem 0.25rem;
    }

    .thumbnails-container[b-g9cnr2h9j8] {
        gap: 0.4rem;
        padding: 0.15rem;
    }

    .thumbnail img[b-g9cnr2h9j8] {
        width: 55px;
        height: 80px;
    }

    .instructions[b-g9cnr2h9j8] {
        margin-top: 0.75rem;
    }

        .instructions p[b-g9cnr2h9j8] {
            font-size: 0.75rem;
        }
}

/* Móviles muy pequeños (< 360px) */
@@media (max-width: 360px) {
    .menu-title[b-g9cnr2h9j8] {
        font-size: 1.25rem;
    }

    .menu-viewer[b-g9cnr2h9j8] {
        height: 55vh;
        min-height: 250px;
    }

    .thumbnail img[b-g9cnr2h9j8] {
        width: 50px;
        height: 70px;
    }

    .control-btn[b-g9cnr2h9j8] {
        min-width: 32px;
        min-height: 32px;
    }

    .nav-btn[b-g9cnr2h9j8] {
        width: 32px;
        height: 32px;
    }

    .nav-arrow[b-g9cnr2h9j8] {
        font-size: 1.1rem;
    }
}

/* Landscape en móviles */
@@media (max-height: 500px) and (orientation: landscape) {
    .menu-viewer[b-g9cnr2h9j8] {
        height: 75vh;
        min-height: 250px;
    }

        .menu-viewer.fullscreen[b-g9cnr2h9j8] {
            height: 90vh;
        }

    .menu-title[b-g9cnr2h9j8] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .thumbnails[b-g9cnr2h9j8] {
        padding: 0.5rem;
    }

    .instructions[b-g9cnr2h9j8] {
        margin-top: 0.5rem;
    }
}
/* _content/Maty/Components/Layout/MainLayout.razor.rz.scp.css */
/* _content/Maty/Components/Layout/NavMenu.razor.rz.scp.css */
/* Navbar transparente inicial */
.navbar[b-6d10kdmgk7] {
    transition: background-color 0.3s ease;
    /*background-color: transparent !important;*/
    background-color: rgba(0, 0, 0, 0.95) !important;
}

    /* Navbar con fondo negro al hacer scroll */
    .navbar.scrolled[b-6d10kdmgk7] {
        background-color: rgba(0, 0, 0, 0.95) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

/* Color de los enlaces */
.navbar-dark .navbar-nav .nav-link[b-6d10kdmgk7] {
    color: white;
}
/* _content/Maty/Components/Pages/Home.razor.rz.scp.css */
.text-flicker-in-glow[b-c6tnbr0p1n] {
    animation: text-flicker-in-glow-b-c6tnbr0p1n 4s linear both;
}

.sombraVideo[b-c6tnbr0p1n] {
    box-shadow: 0 20px 25px -5px rgb(255 255 255 / 70%);
    padding: unset !important;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-11-25 22:46:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-flicker-in-glow
 * ----------------------------------------
 */
@keyframes text-flicker-in-glow-b-c6tnbr0p1n {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
        text-shadow: none;
    }

    10.1% {
        opacity: 1;
        text-shadow: none;
    }

    10.2% {
        opacity: 0;
        text-shadow: none;
    }

    20% {
        opacity: 0;
        text-shadow: none;
    }

    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
    }

    20.6% {
        opacity: 0;
        text-shadow: none;
    }

    30% {
        opacity: 0;
        text-shadow: none;
    }

    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }

    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }

    30.6% {
        opacity: 0;
        text-shadow: none;
    }

    45% {
        opacity: 0;
        text-shadow: none;
    }

    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }

    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }

    55.1% {
        opacity: 0;
        text-shadow: none;
    }

    57% {
        opacity: 0;
        text-shadow: none;
    }

    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }

    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }

    60.1% {
        opacity: 0;
        text-shadow: none;
    }

    65% {
        opacity: 0;
        text-shadow: none;
    }

    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }

    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }

    75.1% {
        opacity: 0;
        text-shadow: none;
    }

    77% {
        opacity: 0;
        text-shadow: none;
    }

    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }

    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }

    85.1% {
        opacity: 0;
        text-shadow: none;
    }

    86% {
        opacity: 0;
        text-shadow: none;
    }

    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }
}


@keyframes rotation-b-c6tnbr0p1n {
    to {
        transform: rotate(360deg) translateX(-50%) translateY(-50%);
    }
}

.bodyH1[b-c6tnbr0p1n] {
    border-radius: 25px;
    width: 100%;
    height: 100vh;
    color: hsl(50, 50%, 50%);
    display: flex;
    overflow: hidden;
    font-family: 'Bangers', cursive;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    &:before

{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(0) translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
    background: repeating-conic-gradient(hsl(0, 50%, 40%), hsl(0, 50%, 50%) 1%);
    content: '';
    animation: rotation-b-c6tnbr0p1n 20s infinite linear;
}

}

h1[b-c6tnbr0p1n] {
    position: relative;
    z-index: 2;
    font-size: 10em;
    letter-spacing: 15px;
    text-transform: uppercase;
    transform: rotate(-10deg);
    text-shadow: 1px 1px hsl(50, 50%, 45%), 2px 2px hsl(50, 50%, 40%), 3px 3px hsl(50, 50%, 35%), 4px 4px hsl(50, 50%, 34%), 5px 5px hsl(50, 50%, 33%), 6px 6px hsl(50, 50%, 32%), 7px 7px hsl(50, 50%, 31%), 8px 8px hsl(50, 50%, 30%), 9px 9px hsl(50, 50%, 29%), 10px 10px hsl(50, 50%, 28%), 10px 10px 30px rgba(0,0,0,.7),
}

.bodyPrecio[b-c6tnbr0p1n] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    perspective: 700px;
    z-index: 10;
    padding: 5px;
    border-radius: 10px;
    gap: 5px;
    background-color: rgba(0, 0, 0, 0.48)
}

    .bodyPrecio h1[b-c6tnbr0p1n] {
        position: relative;
        font-family: 'Exo';
        font-size: 3em;
        margin: 0;
        transform: skew(-15deg);
        letter-spacing: 0.03em;
        display: flex;
        align-items: center;
    }

        .bodyPrecio h1[b-c6tnbr0p1n]::after {
            content: '';
            position: absolute;
            top: -0.1em;
            right: 0.05em;
            width: 0.4em;
            height: 0.4em;
            background: radial-gradient(white 3%, rgba(255, 255, 255, 0.3) 15%, rgba(255, 255, 255, 0.05) 60%, transparent 80%), radial-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 60%) 50% 50% / 5% 100%, radial-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 60%) 50% 50% / 70% 5%;
            background-repeat: no-repeat;
        }

        .bodyPrecio h1 span:first-child[b-c6tnbr0p1n] {
            display: inline-block;
            text-shadow: 0 0 0.1em #8ba2d0, 0 0 0.2em black, 0 0 5em #165ff3;
            -webkit-text-stroke: 0.06em rgba(0, 0, 0, 0.5);
        }

        .bodyPrecio h1 span:last-child[b-c6tnbr0p1n] {
            position: absolute;
            left: 0;
            top: 0;
            background-image: linear-gradient(#032d50 25%, #00a1ef 35%, white 50%, #20125f 50%, #8313e7 55%, #ff61af 75%);
            -webkit-text-stroke: 0.01em #94a0b9;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .bodyPrecio h2[b-c6tnbr0p1n] {
        font-family: 'Mr Dafoe';
        margin: 0;
        font-size: 2.5em;
        color: white;
        text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
        transform: rotate(-7deg);
    }

/* Añadir position relative al contenedor de la imagen */
.icon[b-c6tnbr0p1n] {
    position: relative;
    width: 100%;
    height: 100%;
}


@keyframes lights-b-c6tnbr0p1n {
    0% {
        color: hsl(230, 40%, 80%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), -1em -0.125em 0.5em hsla(40, 100%, 60%, 0), 1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }

    30% {
        color: hsl(230, 80%, 90%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), 0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    40% {
        color: hsl(230, 100%, 95%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 90%, 0.5), -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2), 0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }

    70% {
        color: hsl(230, 80%, 90%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), 0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    100% {
        color: hsl(230, 40%, 80%);
        text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), 1em -0.125em 0.5em hsla(40, 100%, 60%, 0), -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
}

.bodyUbicacion[b-c6tnbr0p1n] {
    border-radius:25px;
    margin: 0;
    /*font: 100% / 1.5 Raleway, sans-serif;*/
    color: hsl(230, 100%, 95%);
    background: linear-gradient(135deg, hsl(230, 40%, 12%), hsl(230, 20%, 7%));
    height: 15vh;
    display: flex;
    opacity:90%;
}

    .bodyUbicacion h2[b-c6tnbr0p1n] {
        margin: auto;
        font-size: 3.5rem;
        font-weight: 300;
        animation: lights-b-c6tnbr0p1n 5s 750ms linear infinite;
    }


/* From Uiverse.io by wilsondesouza */
ul[b-c6tnbr0p1n] {
    list-style: none;
}

.example-2[b-c6tnbr0p1n] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .example-2 .icon-content[b-c6tnbr0p1n] {
        margin: 0 10px;
        position: relative;
    }

        .example-2 .icon-content .tooltip[b-c6tnbr0p1n] {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            padding: 6px 10px;
            border-radius: 5px;
            opacity: 0;
            visibility: hidden;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .example-2 .icon-content:hover .tooltip[b-c6tnbr0p1n] {
            opacity: 1;
            visibility: visible;
            top: -50px;
        }

        .example-2 .icon-content a[b-c6tnbr0p1n] {
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: #4d4d4d;
            background-color: #fff;
            transition: all 0.3s ease-in-out;
        }

            .example-2 .icon-content a:hover[b-c6tnbr0p1n] {
                box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
            }

            .example-2 .icon-content a svg[b-c6tnbr0p1n] {
                position: relative;
                z-index: 1;
                width: 30px;
                height: 30px;
            }

            .example-2 .icon-content a:hover[b-c6tnbr0p1n] {
                color: white;
            }

            .example-2 .icon-content a .filled[b-c6tnbr0p1n] {
                position: absolute;
                top: auto;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                background-color: #000;
                transition: all 0.3s ease-in-out;
            }

            .example-2 .icon-content a:hover .filled[b-c6tnbr0p1n] {
                height: 100%;
            }

            .example-2 .icon-content a[data-social="whatsapp"] .filled[b-c6tnbr0p1n],
            .example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip[b-c6tnbr0p1n] {
                background-color: #128c7e;
            }

            .example-2 .icon-content a[data-social="facebook"] .filled[b-c6tnbr0p1n],
            .example-2 .icon-content a[data-social="facebook"] ~ .tooltip[b-c6tnbr0p1n] {
                background-color: #3b5998;
            }

            .example-2 .icon-content a[data-social="instagram"] .filled[b-c6tnbr0p1n],
            .example-2 .icon-content a[data-social="instagram"] ~ .tooltip[b-c6tnbr0p1n] {
                background: linear-gradient( 45deg, #405de6, #5b51db, #b33ab4, #c135b4, #e1306c, #fd1f1f );
            }

            .example-2 .icon-content a[data-social="youtube"] .filled[b-c6tnbr0p1n],
            .example-2 .icon-content a[data-social="youtube"] ~ .tooltip[b-c6tnbr0p1n] {
                background-color: #ff0000;
            }