.elementor-3493 .elementor-element.elementor-element-443a2f3{--display:flex;}.elementor-3493 .elementor-element.elementor-element-474ffb0{--display:flex;}.elementor-3493 .elementor-element.elementor-element-daa6c01.elementor-element{--align-self:center;}.elementor-3493 .elementor-element.elementor-element-6701fe4{--display:flex;}.elementor-3493 .elementor-element.elementor-element-dcc6358{--display:flex;}.elementor-3493 .elementor-element.elementor-element-6141a17{--display:flex;}.elementor-3493 .elementor-element.elementor-element-fc8f536{--display:flex;}.elementor-3493 .elementor-element.elementor-element-9614262{--display:flex;}.elementor-3493 .elementor-element.elementor-element-e01a2c9{--display:flex;}body.elementor-page-3493:not(.elementor-motion-effects-element-type-background), body.elementor-page-3493 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#A30B0B;background-image:url("https://carolbiazin.com/wp-content/uploads/2026/08/fundo-red-pc-scaled.webp");background-repeat:no-repeat;background-size:cover;}@media(max-width:767px){.elementor-3493 .elementor-element.elementor-element-daa6c01.elementor-element{--align-self:center;}body.elementor-page-3493:not(.elementor-motion-effects-element-type-background), body.elementor-page-3493 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://carolbiazin.com/wp-content/uploads/2026/08/fundo-cel-vermelho.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}}/* Start custom CSS *//* =====================================================
   ELEVADOR — ESTRUTURA
===================================================== */

.elevator{
    position:relative;
    width:100%;
    max-width:100%;
    margin:0 auto;
}


/* =====================================================
   FUNDO DO ELEVADOR
===================================================== */

.elevator-structure{
    display:block;
    width:100%;
    height:auto;
    position:relative;
    z-index:1;
}


/* =====================================================
   VISOR
===================================================== */

.elevator-display{
    position:absolute;
    z-index:10;
    left:49%;
    top:6%;
    transform:translateX(-50%);
    width:55%;
    height:40%;
    border-radius:14px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,0) 45%,
            rgba(255,255,255,.018)
        ),
        #050505;
    border:3px solid #181818;
    box-shadow:
        inset 0 0 25px rgba(0,0,0,.95),
        inset 0 0 8px rgba(255,255,255,.025),
        0 2px 6px rgba(0,0,0,.75);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}


/* =====================================================
   VIDRO SUJO / FOSCO
===================================================== */

.elevator-display::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:12px;
    pointer-events:none;
    z-index:4;
    opacity:.30;
    background:
        repeating-radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.08) 0,
            rgba(255,255,255,.08) .5px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(
            ellipse at 30% 20%,
            rgba(255,255,255,.06),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 75% 70%,
            rgba(255,255,255,.045),
            transparent 30%
        ),
        radial-gradient(
            ellipse at 55% 45%,
            rgba(255,255,255,.025),
            transparent 35%
        );
    mix-blend-mode:screen;
}


/* =====================================================
   RACHADURAS DO VIDRO
===================================================== */

.display-cracks{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:5;
    pointer-events:none;
    opacity:.9;
}


/* =====================================================
   BOLINHA VERMELHA
===================================================== */

#arrow{
    font-family:Arial, sans-serif;
    color:#ff2d2d;
    font-size:50px;
    line-height:1;
    margin-bottom:20px;
    position:relative;
    z-index:6;
    animation:redLedPulse 1.8s ease-in-out infinite;
}


@keyframes redLedPulse{
    0%{
        opacity:.55;
        text-shadow:
            0 0 2px rgba(255,0,0,.5),
            0 0 5px rgba(255,0,0,.25);
    }
    18%{
        opacity:.9;
        text-shadow:
            0 0 3px rgba(255,0,0,.8),
            0 0 8px rgba(255,0,0,.5),
            0 0 14px rgba(255,0,0,.25);
    }
    34%{
        opacity:.65;
        text-shadow:
            0 0 2px rgba(255,0,0,.55),
            0 0 5px rgba(255,0,0,.25);
    }
    57%{
        opacity:1;
        text-shadow:
            0 0 4px rgba(255,0,0,1),
            0 0 10px rgba(255,0,0,.75),
            0 0 20px rgba(255,0,0,.45);
    }
    72%{
        opacity:.45;
        text-shadow:
            0 0 2px rgba(255,0,0,.4),
            0 0 4px rgba(255,0,0,.2);
    }
    100%{
        opacity:.7;
        text-shadow:
            0 0 3px rgba(255,0,0,.6),
            0 0 7px rgba(255,0,0,.35);
    }
}


/* =====================================================
   NÚMERO DO VISOR
===================================================== */

#floor{
    font-family:"H2D2", sans-serif !important;
    color:#f4ebda !important;
    font-size:90px !important;
    font-weight:bold !important;
    line-height:1 !important;
    opacity:.75 !important;
    position:relative;
    z-index:6;
    transform:scale(1.15) scaleY(1.60);
    text-shadow:
        0 0 3px rgba(244,235,218,.25),
        0 0 8px rgba(244,235,218,.12);
    animation:tQueimado 2.8s infinite;
}


/* =========================================
   T — EFEITO DE LUZ QUEIMADA
========================================= */

@keyframes tQueimado{
    0%{ opacity:.75; }
    18%{ opacity:.75; }
    19%{ opacity:.15; }
    20%{ opacity:.65; }
    21%{ opacity:.08; }
    23%{ opacity:.75; }
    45%{ opacity:.75; }
    46%{ opacity:.10; }
    47%{ opacity:.65; }
    48%{ opacity:.05; }
    50%{ opacity:.75; }
    68%{ opacity:.75; }
    69%{ opacity:.12; }
    70%{ opacity:.55; }
    71%{ opacity:.08; }
    73%{ opacity:.75; }
    100%{ opacity:.75; }
}


/* =====================================================
   ANIMAÇÃO DE MOVIMENTO DO VISOR
===================================================== */

#floor.floor-moving{
    animation: floorMoving .18s linear infinite !important;
}

@keyframes floorMoving{
    0%{
        opacity:.35;
        transform:scale(1.15) scaleY(1.60) translateY(-4px);
    }
    50%{
        opacity:.95;
        transform:scale(1.15) scaleY(1.60) translateY(4px);
    }
    100%{
        opacity:.35;
        transform:scale(1.15) scaleY(1.60) translateY(-4px);
    }
}


/* =====================================================
   ÁREA DOS BOTÕES
===================================================== */

.elevator-buttons{
    position:absolute !important;
    z-index:20 !important;
    left:49% !important;
    top:50% !important;
    transform:translateX(-50%) !important;
    width:40% !important;
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    justify-items:center !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:15px !important;
}

.t-button{
    grid-column:1 / 3 !important;
    justify-self:center !important;
    align-self:center !important;
    margin:0 auto 2px auto !important;
}

.t-button,
.elevator-button.active{
    position:relative !important;
}


/* =====================================================
   BRILHO VERMELHO AO REDOR
===================================================== */

.elevator-button.active::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    clip-path:circle(50%);
    pointer-events:none;
    z-index:10;
    border:2px solid rgba(255,45,45,.75);
    box-shadow:
        0 0 6px rgba(255,45,45,.8),
        0 0 14px rgba(255,45,45,.55),
        0 0 25px rgba(255,45,45,.30);
    animation:burnedButtonLight 2.8s infinite;
}


/* =====================================================
   LUZ VERMELHA — BOTÃO SELECIONADO
===================================================== */

.elevator-button.active{
    position:relative !important;
    border-radius:50% !important;
    clip-path:circle(50%) !important;
    box-shadow:
        inset 0 3px 4px rgba(255,255,255,.65),
        inset 0 -6px 9px rgba(0,0,0,.42),
        inset 2px 0 4px rgba(255,255,255,.12),
        0 0 0 2px rgba(255,45,45,.75),
        0 0 6px rgba(255,45,45,.8),
        0 0 14px rgba(255,45,45,.55),
        0 0 25px rgba(255,45,45,.30),
        0 4px 5px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.28);
    animation:burnedButtonLight 2.8s infinite;
}


@keyframes burnedButtonLight{
    0%{ filter:brightness(.98); }
    8%{ filter:brightness(1.08); }
    10%{ filter:brightness(.88); }
    12%{ filter:brightness(1); }
    28%{ filter:brightness(1.05); }
    29%{ filter:brightness(.86); }
    31%{ filter:brightness(1); }
    52%{ filter:brightness(1.05); }
    54%{ filter:brightness(.9); }
    56%{ filter:brightness(1.06); }
    73%{ filter:brightness(1); }
    74%{ filter:brightness(.86); }
    77%{ filter:brightness(1); }
    100%{ filter:brightness(1); }
}


.elevator-button.active::before{
    animation: redInnerFlicker 2.8s infinite;
}

@keyframes redInnerFlicker{
    0%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 10px rgba(255,45,45,.25);
    }
    8%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 16px rgba(255,45,45,.6);
    }
    10%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 6px rgba(255,45,45,.15);
    }
    12%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }
    28%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 15px rgba(255,45,45,.55);
    }
    29%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 5px rgba(255,45,45,.12);
    }
    31%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }
    52%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 15px rgba(255,45,45,.55);
    }
    54%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 6px rgba(255,45,45,.15);
    }
    56%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 16px rgba(255,45,45,.6);
    }
    73%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }
    74%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 5px rgba(255,45,45,.12);
    }
    77%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }
    100%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 10px rgba(255,45,45,.25);
    }
}

/* =====================================================
   BOTÕES
===================================================== */

.elevator-button{
    position:relative;
    width:60px;
    height:60px;
    padding:0;
    margin:0;
    box-sizing:border-box;
    border:none !important;
    outline:none !important;
    border-radius:50%;
    clip-path:circle(50%);
    cursor:pointer;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.35) 0%,
            rgba(255,255,255,.08) 28%,
            transparent 55%
        ),
        radial-gradient(
            circle at 78% 30%,
            rgba(75,65,55,.18) 0%,
            transparent 18%
        ),
        radial-gradient(
            circle at 20% 72%,
            rgba(70,60,50,.20) 0%,
            transparent 20%
        ),
        radial-gradient(
            circle at 65% 78%,
            rgba(255,255,255,.13) 0%,
            transparent 20%
        ),
        radial-gradient(
            circle at 38% 32%,
            #e4ddd5 0%,
            #d9d0c6 38%,
            #D2C7BB 68%,
            #b9aca0 100%
        );
    box-shadow:
        inset 0 3px 4px rgba(255,255,255,.65),
        inset 0 -6px 9px rgba(0,0,0,.42),
        inset 2px 0 4px rgba(255,255,255,.12),
        0 4px 5px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.28);
    display:flex;
    align-items:center;
    justify-content:center;
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
    transition:
        transform .12s ease,
        box-shadow .12s ease;
}


.elevator-button::before{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    border:1px solid rgba(70,65,60,.45);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.35),
        inset 0 -2px 3px rgba(0,0,0,.28);
    pointer-events:none;
    z-index:2;
}


.elevator-button::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    pointer-events:none;
    z-index:3;
    opacity:.30;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size:180px 180px;
    mix-blend-mode:multiply;
}


.elevator-button span{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:
        translate(-50%, -50%)
        scaleY(1.25) !important;
    z-index:5 !important;
    font-family:"H2D2", sans-serif !important;
    font-size:38px !important;
    font-weight:700 !important;
    line-height:1 !important;
    color:#191815 !important;
    opacity:.92 !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    height:auto !important;
    text-align:center !important;
    text-shadow:none !important;
}


.elevator-button:hover{
    transform:scale(1.03);
}


.elevator-button:active{
    transform:scale(.94);
    box-shadow:
        inset 0 5px 8px rgba(0,0,0,.42),
        inset 0 -2px 3px rgba(255,255,255,.22),
        0 2px 3px rgba(0,0,0,.45);
}


.elevator-button:hover,
.elevator-button:focus,
.elevator-button:focus-visible,
.elevator-button:active,
.elevator-button.active{
    outline:none !important;
    border:none !important;
}


/* =====================================================
   MENSAGEM
===================================================== */

.elevator-message{
    position:absolute !important;
    left:50% !important;
    top:60% !important;
    transform:translate(-50%, -50%) !important;
    width:90% !important;
    height:auto !important;
    margin:0 !important;
    padding:20px 25px !important;
    box-sizing:border-box !important;
    background:transparent !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-direction:column !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-family:"Bootzy TM", "Bootzy", sans-serif !important;
    font-size:20px !important;
    line-height:1.1 !important;
    letter-spacing:1px !important;
    color:#fff !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:999999 !important;
    text-shadow:
        0 8px 18px rgba(0,0,0,.95),
        0 14px 30px rgba(0,0,0,.8),
        0 2px 5px rgba(0,0,0,1) !important;
    transition:
        opacity .4s ease,
        visibility .4s ease !important;
}

.elevator-message.show{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width:600px){
    .elevator-buttons{
        width:60%;
        top:40%;
        row-gap:7px;
    }

    .elevator-button{
        width:52px;
        height:52px;
    }

    .elevator-button span{
        font-size:30px !important;
    }

    #arrow{
        font-size:42px;
        margin-bottom:16px;
    }

    #floor{
        font-size:75px !important;
    }
}


.elevator,
.elevator *{
    -webkit-user-select:none !important;
    -moz-user-select:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
    user-drag:none !important;
}

.elevator img{
    -webkit-user-drag:none !important;
    user-drag:none !important;
    pointer-events:none !important;
}

.elevator-display{
    -webkit-user-select:none !important;
    user-select:none !important;
}

html,
body{
    overflow-x:hidden !important;
}

.elevator{
    position:relative;
    overflow:hidden;
}


/* =====================================================
   BOTÕES MAIORES NO PC
===================================================== */

@media(min-width:601px){
    .elevator-button{
        width:100px !important;
        height:100px !important;
    }

    .elevator-button span{
        font-size:46px !important;
    }

    .elevator-buttons{
        column-gap:20px !important;
        row-gap:40px !important;
    }
}

.elevator-button,
.elevator-button:hover,
.elevator-button:focus,
.elevator-button:focus-visible,
.elevator-button:active,
.elevator-button.active{
    outline:none !important;
    border:none !important;
    border-radius:50% !important;
    clip-path:circle(50%) !important;
    box-shadow:
        inset 0 3px 4px rgba(255,255,255,.65),
        inset 0 -6px 9px rgba(0,0,0,.42),
        inset 2px 0 4px rgba(255,255,255,.12),
        0 4px 5px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.28) !important;
    background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    -webkit-tap-highlight-color:transparent !important;
}

.elevator-button:focus,
.elevator-button:focus-visible{
    outline:0 !important;
    outline-offset:0 !important;
}

.elevator-button::-moz-focus-inner{
    border:0 !important;
    padding:0 !important;
}

.t-button::after{
    border-radius:50% !important;
    clip-path:circle(50%) !important;
}

@media(min-width:601px){
    #floor{
        font-size:200px !important;
    }

    .elevator{
        position:relative !important;
    }

    .elevator-message{
        position:absolute !important;
        left:49% !important;
        top:30% !important;
        transform:translate(-50%, -50%) !important;
        width:70% !important;
    }
}


/* =====================================================
   CÍRCULO PRATA CAINDO (PARANDO MAIS NO ALTO E BRILHANDO)
===================================================== */

.falling-note{
    position:fixed;
    top:0;
    left:50%;
    width:44px;
    height:44px;
    background:
        linear-gradient(
            135deg,
            #f2f2f2 0%,
            #c4c4c4 55%,
            #9e9e9e 100%
        );
    box-shadow:
        2px 3px 6px rgba(0,0,0,.35),
        inset 0 0 4px rgba(255,255,255,.4);
    border-radius:50%;
    z-index:2147483647;
    pointer-events:auto !important;
    cursor:pointer;
    opacity:0;
    transform:translate(-50%, -10vh) rotate(-6deg);
    transition:transform .2s ease, filter .2s ease;
}

.falling-note:hover{
    transform:translate(calc(-50% - 15px), 68vh) scale(1.15) rotate(5deg) !important;
    filter:brightness(1.3) !important;
}

.falling-note.falling{
    /* Executa a queda (4s) e depois ativa o brilho em looping infinito */
    animation: 
        noteFall 4s cubic-bezier(0.25, 1, 0.5, 1) forwards,
        pulseGlow 2s ease-in-out infinite 4s;
}


/* =====================================================
   BRILHO INTERNO CONTINUO
===================================================== */

.falling-note::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.45) 18%,
            rgba(255,255,255,0) 55%
        );
    opacity:.35;
    animation:brilhoPrata 1.8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes brilhoPrata{
    0%,100%{ opacity:.2; }
    50%{ opacity:1; }
}


/* =====================================================
   LOOPING DE BRILHO EXTENSO (QUANDO PARA NO CHÃO)
===================================================== */

@keyframes pulseGlow{
    0%, 100%{
        box-shadow: 
            0 0 10px rgba(255, 255, 255, 0.6),
            0 0 20px rgba(255, 255, 255, 0.3),
            2px 3px 6px rgba(0, 0, 0, 0.35);
        filter: brightness(1);
    }
    50%{
        box-shadow: 
            0 0 25px rgba(255, 255, 255, 1),
            0 0 45px rgba(255, 255, 255, 0.8),
            0 0 65px rgba(255, 255, 255, 0.5),
            2px 3px 6px rgba(0, 0, 0, 0.35);
        filter: brightness(1.35);
    }
}


/* =====================================================
   ANIMAÇÃO DA QUEDA (PARA EM 68vh — MAIS ACIMA)
===================================================== */

@keyframes noteFall{
    0%{
        opacity:0;
        transform:translate(-50%, -10vh) rotate(-6deg);
    }
    6%{
        opacity:1;
    }
    20%{
        transform:translate(calc(-50% - 40px), 18vh) rotate(12deg);
    }
    40%{
        transform:translate(calc(-50% + 55px), 35vh) rotate(-16deg);
    }
    60%{
        transform:translate(calc(-50% - 45px), 50vh) rotate(10deg);
    }
    80%{
        transform:translate(calc(-50% + 30px), 62vh) rotate(-8deg);
    }
    100%{
        opacity:1;
        transform:translate(calc(-50% - 15px), 68vh) rotate(5deg);
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){
    .falling-note{
        width:34px;
        height:34px;
    }
}/* End custom CSS */