/* Geral */
:root {
    --blue-oxford:#070F26;
    --blue-french:#0072BC;    
    --blue-electric:#00E3F0;
    --gray:#e6eeff;
    --white:#ffffff;
    
}

body {font-family: Arial, sans-serif ;}
.font-secundario {font-family: Georgia, 'Times New Roman', Times, serif ;}
.text-white{color: var(--white);}
.text-electric{color: var(--blue-electric);}

/* Button*/
.border-button { border: 3px solid var(--blue-electric);}

.botao-principal, .botao-principal:hover, .botao-principal:active, .botao-principal:focus { 
    background-color: var(--blue-oxford) !important;
    color: var(--gray) !important; 
    margin: -3px; 
    position: relative;
    padding: 0 40px;
    border: 3px solid var(--blue-electric) !important;
}
.botao-secundario { 
    background-color: var(--gray);
    color: var(--blue-oxford);
    margin-left:-25px;
    padding: 0 30px 0 50px;
}
.botao-secundario:hover, .botao-secundario:hover, .botao-secundario:active, .botao-secundario:focus{ background-color: var(--blue-french) !important;}


/* Pop-up */
.popup-home{min-width: 520px; min-height: 326px; border-radius:20px; border:0; background-color: var(--blue-french); border: 2px solid var(--white);}
.border-popup{left: -25px; top: -28px; height: 378px; width: auto;}
.text-popup{font-size: 16px;}
.gato{position: absolute; bottom:-10px; right:20px; width: 203px;}
.chotto{position: absolute; bottom:-31px; right:-37px;width:248px;}
.arigato{position: absolute; bottom: 26px; right: 64px; width: 110px;}
.ganbatte{position: absolute; bottom: 30px; right: 10px; width: 210px;}

@media (max-width: 759px) { 
    .popup-home{width: 330px;min-width: 330px; min-height: 270px; margin: 0 auto;}
    .border-popup{left: -19px; top: -17px; height: 304px; width: auto;}
    .text-popup{font-size: 12px;}
    .gato{width: 156px;right: 10px;}
    .chotto{bottom:-24px;width:190px;}
    .arigato{right: 40px; width: 85px;}
    .ganbatte{bottom: 70px; width: 135px;}
}

.close {opacity: 1;z-index: 20;}

.modal-open .modal-backdrop {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.15);
    opacity: 1 !important;
}

/* Form */
.form-registo{
    background-color: var(--gray); 
    font-size: 14px;
    padding-left: 30px;
    margin-right: -20px;
}
.botao-form{background-color: var(--blue-electric);}
.botao-form:hover, .botao-form:active, .botao-form:focus{background-color: var(--blue-oxford) !important;border: 3px solid var(--blue-electric) !important;}

.cor-principal, .text-botao2 { color: var(--blue-oxford); }
        
.background-secundario{ background-color: #070f26;}

.cor-secundaria_pre{ color: #0072bc;}

.font-size-small {font-size:14px;}   

/* Home */
.back-xmas{
    background-color: var(--blue-oxford);
    background-image: url(../img/background-home2.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.back-xmas::before{
    content: '';
    background-image: url(../img/background-pattern.png);
    background-size: auto;
    background-repeat: repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* opacity: 0.75; */
    mix-blend-mode: soft-light;
}
@media (min-width: 760px) { 
    .texto-home{max-width: 600px;font-size: 1.15rem;}
    .logo{width:530px;}
    .floco-top{left: 30%; top: -4%; width: 8%;}
    .floco-left{left: -5%; top: 71%; width: 10%;}
    .floco-top-right{top: 25%; right: 17%; width: 6%;}
    .floco-left-calendar{left:4%; top:-2%; width: 11%;}
    .floco-right-calendar{bottom:53%; right:-6%;width: 12%;}
    .floco-white-top-calendar{left: 37%; top: 11%; width: 8%;}
    .floco-white-left-calendar{top: 25%; left: -10%;width: 8%;}
    .floco-white-bottom-calendar{bottom: 7%; left: 0%; width: 7%;}
    .floco-white-right-calendar{bottom: 41%; right: -1%; width: 9%;z-index: 50;}
    .calendar{width: 75%;}

    .comment-balon{ 
        background-image: url('../img/coment.svg');
        background-repeat: no-repeat; 
        right: -175px; 
        top: 10px; 
        width:37%; 
        max-width:216px;
        padding: 20px 28px;
    }   

    .comment-balon p{font-size: 14px;line-height: 20px;}
    
    .box12{
        width: 120px;
        height: 120px;
    }
    
    .heart-azu{
        transform-origin: center;
        /* animation: heartbeat 1s infinite; */
        width: 138px;
        bottom: 52px;
        left: 58px;
        filter: drop-shadow(0 0 10px #72caff);
    }
    .heart-ama{
        transform-origin: center;
        /* animation: heartbeat 1s infinite; */
        width: 102px;
        bottom: 74px;
        left: 75px;
        filter: drop-shadow(0 0 10px #ffe88a);
    }
}

@keyframes heartbeat
{
  0%
  {
    transform: scale( .85 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .85 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .85 );
  }
  100%
  {
    transform: scale( .85 );
  }
}

.heart-blue {
    animation: neonPulse 3s ease-in-out infinite;
    animation-delay: 0s;    
    color: #4B9EF2;
}

/* ----------------------------
   Coração Amarelo – 2ª metade brilha
---------------------------- */
.heart-yellow {
    animation: neonPulse 3s ease-in-out infinite;
    animation-delay: 1.5s; /* metade do tempo */
    color: #EDCA44;
}

/* ----------------------------
   KEYFRAMES (unificado)
---------------------------- */
@keyframes neonPulse {

    /* Estado apagado */
    0%, 100% {
        opacity: 0.15;
        filter: drop-shadow(0 0 2px rgba(255,255,255,0.1));
    }

    /* Pico de brilho */
    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 10px currentColor)
            drop-shadow(0 0 25px currentColor)
            drop-shadow(0 0 45px currentColor);
    }
}


 /* snow flakes */
  .snowflake{
    position:fixed;
    pointer-events:none;
    top:-10%;
    z-index:2;
    color:white;
    opacity:0.9;
    will-change: transform, opacity;
  }

@media (max-width: 759px) { 
    .back-xmas{ background-size: contain;}
    .logo{width:300px;}
    .floco-top{left: 30%; top: -2%; width: 13%;}
    .floco-left{display: none;}
    .floco-top-right{top: 23%; right: 8%; width: 10%;}
    .floco-left-calendar{left:4%; top:-2%; width: 11%;}
    .floco-right-calendar{display: none;}
    .floco-white-top-calendar{left: 37%; top: 11%; width: 8%;}
    .floco-white-left-calendar{display: none;}
    .floco-white-bottom-calendar{bottom: 7%; left: 0%; width: 7%;}
    .floco-white-right-calendar{bottom: 41%; right: -1%; width: 9%;z-index: 50;}
    .calendar{width: 95%;} 

    .box12{
        width: 55px;
        height: 55px;
    }

    .heart-azu{
        transform-origin: center;
        /* animation: heartbeat 1s infinite; */
        width: 78px;
        bottom: 29px;
        left: 33px;
        filter: drop-shadow(0 0 10px #72caff);
    }
    .heart-ama{
        transform-origin: center;
        /* animation: heartbeat 1s infinite; */
        width: 57px;
        bottom: 42px;
        left: 43px;
        filter: drop-shadow(0 0 10px #ffe88a);
    }
}


/* GRID */
.container{
    width: 650px;
}
.container2{
    width: 650px;
    display: flex;
    gap: 5px;;
}
.grid1{
    display: grid;
	grid-template-columns: repeat(4, auto);
    grid-template-columns: repeat(4, minmax(25px, 10.5vw));
	grid-auto-rows: 25px;
    grid-auto-rows: minmax(25px,9.5vw);
    gap: 15px;
    justify-content: center;
}
.item{
    background-color: var(--blue-french);
    border: 2px solid var(--white);
    border-radius: 15px;
    font-size: 1.5vw;
    line-height: 28px;
    display: flex;
    padding: 12px;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(300px);
    color: var(--white);
    font-family: 'Noto Sans', sans-serif ;
    font-weight: 600;
    /* cursor: pointer; */
}
.item:hover{
    box-shadow: 0 0 18px 9px #4B9EF2;
}

.text-japanese{
    font-size: 14px;
    padding-left: 5px;
    font-weight: 300;
    color: var(--white);
    z-index: 10;
}

.item img{
    position: absolute;    
}

.dia-off{
    opacity: 0.5;
    width: 85%;
    height: 85%;
    align-self: center;
    justify-self: center;
}

.dia11 {z-index: 10;}
.dia16 {z-index: 10;}
.dia17{z-index: 5;}
.dia24{
    grid-column: span 4; 
    justify-content: flex-end; 
    z-index: 25;
    border: 0px;
    background-color: transparent;
    min-height: 14vw;
    padding: 0px;
    border-radius: 40px;
}
.dia24-text{position: absolute; right: 11%; top: 10%; z-index: 10;}
.dia24.dia-off{
    opacity: 1;
    width: 96%;
    margin-top: 55px;
}
.dia24.dia-off :nth-child(2), .dia24.dia-off :nth-child(3){opacity: 0.5;}

.dia3 img{
    width: 42%;
    bottom: 0%;
    right: 20%;
    transform: translateZ(60px);
    perspective: 300px;
}
.dia5 img{
    width: 60%;
    bottom: -6px;
    right: 13%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia6 img{
    width: 50%;
    bottom: -1%;
    right: 14%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia8 img{
    width: 45%;
    bottom: 3%;
    right: 1%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia11 img{
    width: 37%;
    bottom: -10%;
    left: 33%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia14 img{
    width: 41%;
    bottom: 6%;
    right: 6%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia16 img{
    width: 54%;
    bottom: -7%;
    right: -7%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia17 img{
    width: 29%;
    top: -24%;
    right: 13%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia18 img{
    width: 28%;
    bottom: 0%;
    right: 19%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia21 img{
    width: 44%;
    bottom: -1%;
    right: 17%;
    transform: translateZ(60px);   
    perspective: 300px; 
}
.dia24 :nth-child(2){
    width: 63%;
    bottom: 24%;
    left: 18%;
    transform: translateZ(60px);   
    perspective: 300px;
    filter: drop-shadow(0 0 5px #EDCA44);
}


@media (max-width: 759px) {
    .grid1{
        grid-template-columns: repeat(4, minmax(84px, 10.5vw));
        grid-auto-rows: minmax(75px,9.5vw);
        gap: 7px;
    }
    .item{font-size: 16px;line-height: 18px;padding: 5px;}
    .text-japanese{font-size: 12px;}
    .dia24{min-height: 114px;padding: 0;}
    .border-24{width: 100%;}
    .dia24 :nth-child(2){left: 17%;bottom: 20px}
    .dia24-text{top:13%;right: 13%;}
}


/* Registo */
.back-registo{
    background-color: var(--blue-oxford);
    background-image: url(../img/background-registo2.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.back-registo::before{
    content: '';
    background-image: url(../img/background-pattern.png);
    background-size: auto;
    background-repeat: repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* opacity: 0.75; */
    mix-blend-mode: soft-light;
}
.text-danger-registo, .input-group{width:80%;max-width: 600px;margin: 0 auto;}

@media (min-width: 760px) { 
    .texto-home-registo{max-width: 600px;font-size: 1rem;}
    .floco-top-registo{left: 15%; top: 6%; width: 10%;}
    .floco-bottom-right-registo{bottom: 4%; right: 14%; width: 6%;}
    .floco-right-registo{right: -5%; top: 24%; width: 10%;}
    .floco-left-calendar-registo{left:-23%; top:-6%; width: 10%;}
    .floco-white-left-calendar-registo{top: 9%; left: -48%;width: 23%;}
    .floco-left-registo{left: -90%; top: 83%; width: 30%;}

    .background-registo{padding: 50px 0; width: 50%; max-width: 380px; border-radius: 50px;align-items: center;min-height: 500px;justify-content: center;}
    .border-registo{width: auto; top:-22px; height: 544px;}
    .img-registo{width: 280px;border-radius: 15px;margin-bottom: 24px;}
    .img-registo-fit {width: 350px;border-radius: 15px;margin-bottom: 24px;}
    .img-registo-vertical{width: 100%;border-radius: 15px;height: 265px;object-fit: contain;margin-bottom:8px;}
    .sombra{bottom: -93px;mix-blend-mode: multiply;}
}

@media (max-width: 759px) { 
    .back-registo{background-size: contain;}
    .floco-top-registo{left: 8%; top: 2%; width: 18%;}
    .floco-bottom-right-registo{bottom: 3%; right: 9%; width: 9%;}
    .floco-right-registo{right: -9%; top: 21%; width: 19%;}
    .floco-left-calendar-registo{left:-20%; top:-6%; width: 10%;}
    .floco-white-left-calendar-registo{top: 9%; left: -32%;width: 20%;}
    .floco-left-registo{left: -35%; top: 83%; width: 25%; z-index: -1;}

    .background-registo{padding: 30px 0; width: 63%; max-width: 246px; align-items: center; border-radius: 30px;min-height: 323px;justify-content: center;}
    .border-registo{width: auto; top:-16px; height: 358px;}
    .img-registo{width: 65%;border-radius: 15px;margin-bottom: 24px;}
    .img-registo-fit {width: 90%;margin-bottom: 24px;border-radius: 15px;}
    .img-registo-vertical{width: 100%;border-radius: 15px;height: 165px;object-fit: contain;margin-bottom:8px;}
    .sombra{bottom: -46px; width: 260px; opacity: 0.7;}
}

/* Premiados */
@media (min-width: 760px) { 
    .texto-home-registo{max-width: 600px;font-size: 1rem;}
    .floco-bottom-vencedor{bottom:-8%;right:10%;width: 10%;}
    .home-right{top:5%; right: -9%; width: 20%;}
    .floco-left-vencedor{left: 10%; top: 0%; width: 10%;}
    .border-vencedor{width: 300px;margin-bottom: -63px;}
}

@media (max-width: 759px) { 
    .texto-home-registo{max-width: 600px;font-size: 1rem;}
    .floco-bottom-vencedor{bottom:-6%;right:10%;width: 22%;}
    .home-right{top:5%; right: -9%; width: 25%;}
    .floco-left-vencedor{left: 3%; top: -14%; width: 10%;}
    .border-vencedor{width: 240px;margin-bottom: -52px;}
}

/* Mingles */
.back-xmas-contain{background-size: contain;}
.text-electric-mingles{color: var(--blue-electric);margin-top:46px;}
.floco-left-mingles{left: -5%;top: 250vh; width: 10%;}
.floco-top-right-mingles{top: 50%; right: -30%; width: 12%;}
.gato-mingles{right: -7%;top: 140vh;width: 16%;}
.premio-viagem{
    top: 370px;
    left: -51px;
    background-color: var(--blue-french);
    border: 2px solid var(--white);
    border-radius: 20px;
    display: flex;
    padding: 17px;
    height: 320px;
    width: 320px;
}
.border-mingles{width: auto;height: 375px;top: -29px;left: -24px;}
.imagem-mingles{border-radius: 10px;height: 100%;width: 100%;}
.btn-input-mingle,.btn-input-mingle:hover, .btn-input-mingle:active, .btn-input-mingle:focus{margin-top:-90px;}
.border-registo-mingles-forum{width: auto;top: -35px;height: 520px;left: -38px;}
.post-mingles-forum{background-color:#0072BC;border: 2px solid white;margin-bottom:100px;min-height:455px;}
.img-mingles-forum{width:100%;border-radius:10px;height:300px;object-fit:contain;}

@media (max-width: 759px) { 
    .text-electric-mingles{margin-top:175px;}
    .floco-left-mingles{width: 15%;}
    .floco-top-right-mingles{top: 16%; right: 15%; width: 15%;}
    .gato-mingles{top: 160vh;}
    .premio-viagem{
        top: 255px;
        left: -25px;
        border-radius: 10px;
        padding: 10px;
        height: 130px;
        width: 130px;
    }
    .border-mingles{height: 156px;top: -15px;left: -14px;}
    .btn-input-mingle,.btn-input-mingle:hover, .btn-input-mingle:active, .btn-input-mingle:focus{margin-top:0px;}
    .post-mingles-forum{margin-bottom:50px;min-height: auto;}
    .img-mingles-forum{height:auto;}
}

.form-control{ color: #333333;}
.form-control::-webkit-input-placeholder { color: #333333; }
.form-control:-moz-placeholder { color: #333333; }
.form-control::-moz-placeholder { color: #333333; }
.form-control:-ms-input-placeholder { color: #333333; }

.border-form{ border-bottom: 1px solid #D7E1F0;}
.input-formulario{background-color: #D7E1F0; font-size: 14px;}
.text-danger-mingles{width:100%;max-width: 600px;margin: 0 auto;}


/* MARKET */
@media (min-width: 760px) { 
    .logo-market{width: 700px;}
    .floco-left-market{left: -8%; top: 20%; width: 16%;}
    .home-right-market{top:15%;right: -9%;width: 23%;}
    .vouchers{width: 500px;}
}

@media (max-width: 759px) { 
    .logo-market{width: 350px;}
    .floco-left-market{left: -8%; top: 20%; width: 16%;}
    .home-right-market{top:15%;right: -9%;width: 23%;}
    .vouchers{width: 275px;}
}

/* BINGO */
.display-bingo{display:flex;}
.input-group-bingo{width:80%;max-width: 500px;margin: 0 auto;}
.text-electric-bingo{color: var(--blue-electric);text-align: left;}
.content-instituicao{align-items: center; justify-content: space-between;}
.border-bingo-instituicao{width: auto;top: -13px;left: -11px;height: 156px;}
.box-instituicao{background-color: #189FF8; width: 33%; height: 130px;}
.texto-instituicao{width: 52%; padding: 10px; font-size: 14px;}
.icon-instituicao{width: 8%;flex-direction: column; gap:10px;}
.icon-instituicao img{width: 100%;}
.background-bingo{padding: 40px 0 25px; width: 60%; max-width: 477px; border-radius: 50px;align-items: center;min-height: 320px;justify-content: center;}
.border-bingo{width: auto; top:-18px; height: 363px;}
.img-bingo{width: 550px;border-radius: 15px;z-index: 10;}

@media (max-width: 759px) { 
    .display-bingo{display:block;}
    .text-electric-bingo{text-align: center;padding-bottom: 16px;}
    .content-instituicao{flex-direction: column;;}
    .box-instituicao{width: 220px;text-align: center;}
    .texto-instituicao{width: 100%;text-align: center;}
    .icon-instituicao{flex-direction: row; width: 100%;justify-content: center;}
    .icon-instituicao img{width: 15%;}
    .background-bingo{padding: 25px 0 12px; width: 280px; border-radius: 30px;min-height: 190px;}
    .border-bingo{top:-10px; height: 210px;left: -9px;}
    .img-bingo{width: 308px;z-index: 10;}
}

/* SMS */
@media (min-width: 760px) { 
    .img-registo-sms{width: 100%;border-radius: 15px;height: 222px;object-fit: contain;margin-bottom:8px;}
    .text-sms{font-size:28px; font-weight:300; margin-top: -20px;}
    .border-sms{width: auto; height: 50px; margin-bottom: -37px;}
    .texto-home-sms{max-width: 600px;font-size: 1rem;}
}

@media (max-width: 759px) { 
    .img-registo-sms{width: 100%;border-radius: 15px;height: 130px;object-fit: contain;margin-bottom:8px;}
    .text-sms{font-size:22px; font-weight:300; margin-top: 0px;}
    .border-sms{width: auto; height: 38px; margin-bottom: -29px;}
    .texto-home-sms{max-width: 600px;font-size: 14px;}
}