@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html,
body {
    height: 100%;
    margin: 0;
    font-family: "Kanit", sans-serif; /* fuente aplicada globalmente */
}

.container {
    display: grid;
    grid-template-rows: 100px auto 50px; /* arriba 100px, centro flexible, abajo 50px */
    height: 100vh; /* ocupa toda la pantalla */
}

.top,
.middle,
.bottom {
    display: flex;
    justify-content: center;    /* centra verticalmente */
    align-items: center;        /* centra horizontalmente */
    padding: 20px;              /* padding de seguridad */
    box-sizing: border-box;
    text-align: center;
}

/* estilos específicos */
.top {
    font-weight: 400;
    flex-direction: row; /* aquí los elementos van al costado */
  
}

.middle {
    font-weight: 600;
    color: #666;
    flex-direction: column; /* aquí sí apilas */
   

}

.bottom {
   
    font-weight: 100;
    flex-direction: row; /* aquí los elementos van al costado */
   
}

.logo_coming {
    width: 100%;
    max-width: 500px;
}

.creditos{
    font-size: 11px;
}

.bottom a{
    color: black;
    text-decoration: none;
}

.bottom a:hover{
    text-decoration: underline
}


/*Codigo tooltips animado*/
        [data-tooltip] {
            position: relative;
            cursor: pointer;
        }

        [data-tooltip]::before,
        [data-tooltip]::after {
            text-transform: none;
            font-family: Arial, Helvetica, sans-serif;
            font-size: .9em;
            line-height: 1;
            position: absolute;
            display: none;
            opacity: 0;
        }

        [data-tooltip]::before {
            content: '';
            border: 6px solid transparent;
            z-index: 8;
        }

        [data-tooltip]::after {
            content: attr(data-tooltip);
            text-align: center;
            min-width: 3em;
            max-width: 21em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 6px 8px;
            border-radius: 3px;
            background: #00aa48;
            color: #FFFFFF;
            font-weight: bold;
            z-index: 7;
        }

        [data-tooltip]:hover::before,
        [data-tooltip]:hover::after {
            display: block;
        }

        [data-tooltip='']::before,
        [data-tooltip='']::after {
            display: none !important;
        }

        /* TOP / DEFAULT */
        [data-tooltip]:not([data-flow])::before,
        [data-tooltip][data-flow^="top"]::before {
            bottom: 100%;
            border-bottom-width: 0;
            border-top-color: #00aa48;
        }

        [data-tooltip]:not([data-flow])::after,
        [data-tooltip][data-flow^="top"]::after {
            bottom: calc(100% + 5px);
        }

        [data-tooltip]:not([data-flow])::before,
        [data-tooltip]:not([data-flow])::after,
        [data-tooltip][data-flow^="top"]::before,
        [data-tooltip][data-flow^="top"]::after {
            left: 50%;
            transform: translate(-50%, -.4em);
        }

        /* BOTTOM */
        [data-tooltip][data-flow^="bottom"]::before {
            top: 100%;
            border-top-width: 0;
            border-bottom-color: #00aa48;
        }

        [data-tooltip][data-flow^="bottom"]::after {
            top: calc(100% + 5px);
        }

        [data-tooltip][data-flow^="bottom"]::before,
        [data-tooltip][data-flow^="bottom"]::after {
            left: 50%;
            transform: translate(-50%, .4em);
        }

        /* LEFT */
        [data-tooltip][data-flow^="left"]::before {
            top: 50%;
            border-right-width: 0;
            border-left-color: #00aa48;
            left: calc(0em - 5px);
            transform: translate(-.5em, -50%);
        }

        [data-tooltip][data-flow^="left"]::after {
            top: 50%;
            right: calc(100% + 5px);
            transform: translate(-.4em, -50%);
        }

        /* RIGHT */
        [data-tooltip][data-flow^="right"]::before {
            top: 50%;
            border-left-width: 0;
            border-right-color: #00aa48;
            right: calc(0em - 7px);
            transform: translate(.4em, -50%);
        }

        [data-tooltip][data-flow^="right"]::after {
            top: 50%;
            left: calc(100% + 5px);
            transform: translate(.5em, -50%);
        }

        @keyframes tooltip-vert {
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes tooltip-horz {
            to {
                opacity: 1;
                transform: translate(0, -50%);
            }
        }

        [data-tooltip]:not([data-flow]):hover::before,
        [data-tooltip]:not([data-flow]):hover::after,
        [data-tooltip][data-flow^="top"]:hover::before,
        [data-tooltip][data-flow^="top"]:hover::after,
        [data-tooltip][data-flow^="bottom"]:hover::before,
        [data-tooltip][data-flow^="bottom"]:hover::after {
            animation: tooltip-vert .5s ease-out forwards;
        }

        [data-tooltip][data-flow^="left"]:hover::before,
        [data-tooltip][data-flow^="left"]:hover::after,
        [data-tooltip][data-flow^="right"]:hover::before,
        [data-tooltip][data-flow^="right"]:hover::after {
            animation: tooltip-horz .5s ease-out forwards;
        }

        /*Codigo tooltips animado*/


.pesta_messenger {
  position: fixed;
  bottom: 40px;
  right: 10px;
  z-index: 9;
}


.pesta_whatsapp {
  position: fixed;
  bottom: 10px;
  right: 12px;
  z-index: 9;
}

.pesta_whatsapp img,
.pesta_messenger img {
  width: 40px;
}

a.link_1{
    color: #00a2d5;
    text-decoration: none;
}

a.link_1:hover{
    color: #fc002f;
    text-decoration:underline;
}