/* ==========================================
   LAYOUT
========================================== */

.caminho-layout{
    display:flex;
    gap:24px;
    align-items:flex-start;
}

/* ==========================================
   PAINEL DA EXPEDIÇÃO
========================================== */

#acampamento{

    margin-top:20px;

    background:#fdfbf7;

    border:1px solid #e8dcc5;

    border-radius:20px;

    padding:18px 24px;

    margin-bottom:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

#acampamento h3{

    margin:0 0 16px;

    font-size:20px;

    font-weight:700;

    color:#4d3b28;

}

#lista-base{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px 30px;

}

.base-item{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:15px;

}

.nome{

    white-space:nowrap;

    color:#2f2f2f;

    font-weight:500;

}

.linha{

    flex:1;

    border-bottom:1px dashed #bca98a;

    margin-top:2px;

}

.base-item strong{

    white-space:nowrap;

    color:#6b4e2e;

    font-weight:700;

}

/* ==========================================
   MAPA
========================================== */

.mapa-expedicao{

    position:relative;

    flex:1;

}

#mapa{

    width:100%;

    display:block;

    border-radius:20px;

}

/* ==========================================
   PIN
========================================== */

.pin{

    position:absolute;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#fff;
    border:4px solid #f59e0b;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    transform:translate(-50%,-50%);
    box-shadow:0 12px 25px rgba(0,0,0,.30);
    transition:.3s;
    cursor:pointer;
    box-sizing:border-box;

}

.pin:hover{

    transform:translate(-50%,-50%) scale(1.15);

}.pin{

    position:absolute;

    width:42px;
    height:42px;

    border-radius:50% 50% 50% 0;

    transform:translate(-50%,-100%) rotate(-45deg);

    display:flex;
    justify-content:center;
    align-items:center;

    border:3px solid #fff;

    box-shadow:0 8px 18px rgba(0,0,0,.35);

    cursor:pointer;

    transition:
    box-shadow .25s,
    filter .25s;

    z-index:5;

}

.pin span{

    transform:rotate(45deg);

    font-size:22px;

    user-select:none;

}

.pin:hover{

    animation:pinBounce .45s ease forwards;

    box-shadow:0 16px 28px rgba(0,0,0,.45);

    z-index:100;

}

.pin:hover .tooltip-pin{

    opacity:1;

    visibility:visible;

    bottom:65px;

}

@keyframes pinBounce {

    0%{
        transform:translate(-50%,-100%) rotate(-45deg) scale(1);
    }

    30%{
        transform:translate(-50%,-115%) rotate(-45deg) scale(1.18);
    }

    55%{
        transform:translate(-50%,-104%) rotate(-45deg) scale(1.08);
    }

    75%{
        transform:translate(-50%,-110%) rotate(-45deg) scale(1.12);
    }

    100%{
        transform:translate(-50%,-105%) rotate(-45deg) scale(1.10);
    }

}



.tooltip-pin{

    position:absolute;

    left:50%;

    bottom:75px;

    transform:translateX(-50%) rotate(45deg);

    min-width:190px;

    background:#fff;

    border-radius:14px;

    padding:14px;

    box-shadow:0 12px 28px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transition:all .25s ease;

    text-align:center;

    z-index:999;

}

.tooltip-pin strong{

    font-size:16px;

}

.tooltip-pin p{

    margin:8px 0;

    font-size:13px;

    line-height:1.4;

}

.tooltip-pin hr{

    border:none;

    border-top:1px solid #eee;

    margin:8px 0;

}

.expedicao-geral{

    margin-bottom:25px;

}

.titulo-expedicao{

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

}

.barra-geral{

    width:100%;

    height:18px;

    background:#ddd;

    border-radius:30px;

    overflow:hidden;

}

#progresso-geral{

    width:0;

    height:100%;

    background:linear-gradient(90deg,#22c55e,#16a34a);

    transition:width .8s ease;

}

#texto-progresso{

    margin-top:10px;

    font-size:15px;

    font-weight:600;

    text-align:right;

}
@keyframes brilhoFinal{

    0%{

        box-shadow:0 0 0 rgba(255,215,0,.2);

    }

    50%{

        box-shadow:
        0 0 18px gold,
        0 0 35px gold;

    }

    100%{

        box-shadow:0 0 0 rgba(255,215,0,.2);

    }

}
@keyframes brilhoFinal{

    0%{

        box-shadow:0 0 0 rgba(255,215,0,.2);

    }

    50%{

        box-shadow:
        0 0 15px gold,
        0 0 30px gold;

    }

    100%{

        box-shadow:0 0 0 rgba(255,215,0,.2);

    }

}
.pin-finalizado{

    animation:
        pinBounce 2s infinite,
        brilhoFinal 2s infinite;

}