/*======================================
    BOTONES
======================================*/

.boton{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:14px 28px;

    background:#d97706;

    color:white;

    text-decoration:none;

    border-radius:8px;

    font-weight:600;

    transition:.25s;

}

.boton:hover{

    background:#f59e0b;

    transform:translateY(-2px);

}

.boton-secundario{

    color:#d97706;

    text-decoration:none;

    font-weight:600;

}

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

.visor{

    position:relative;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.visor img{

    width:100%;

    display:block;

}

/*======================================
    BOM
======================================*/

.bom{

    position:absolute;

    top:20px;

    right:20px;

    width:220px;

    background:rgba(255,255,255,.97);

    backdrop-filter:blur(8px);

    border-radius:12px;

    padding:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.bom h3{

    margin:0 0 15px;

    color:#d97706;

}

.bom ul{

    list-style:none;

    margin:0;

    padding:0;

}

.bom li{

    padding:8px 0;

    border-bottom:1px solid #ececec;

    cursor:pointer;

    transition:.2s;

}

.bom li:hover{

    color:#d97706;

}

/*======================================
    HOTSPOTS
======================================*/

.hotspot{

    position:absolute;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#d97706;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 0 18px rgba(217,119,6,.55);

}

.hotspot:hover{

    transform:scale(1.15);

    background:#ff9800;

}

.hs1{

    top:12%;

    left:25%;

}

.hs2{

    top:34%;

    left:54%;

}

.hs3{

    top:58%;

    left:39%;

}

.hs4{

    top:76%;

    left:70%;

}