*{
  box-sizing:border-box
}

html,body{
  margin:0;
  min-height:100%;
  background:#eee;
  font-family:Arial,sans-serif
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:center;
  gap:20px;
  background:#eee
}

.art{
  position:relative;
  flex:0 1 min(65vw,1254px);
  width:min(65vw,1254px);
  aspect-ratio:1 / 1;
  background:url('fondo-calles.png') center/cover no-repeat
}

.hotspots{
  position:absolute;
  inset:0;
  margin:0;
  padding:0
}

.hotspots input,
.hotspots button{
  position:absolute;
  z-index:20;
  font-family:Arial,sans-serif
}

.hotspots input{
  border:1px solid #777;
  background:rgba(255,255,255,.92);
  color:#222;
  outline:none;
  font-size:20px;
  font-weight:bold;
  padding:0 10px
}

.hotspots input::placeholder{
  color:#555;
  opacity:1;
  font-weight:bold
}

.hotspots button{
  border:0;
  background:rgba(139,30,30,.96);
  color:white;
  font-weight:bold;
  cursor:pointer;
  white-space:nowrap;
  font-size:20px
}

#country{
  left:15.6%;
  top:57.5%;
  width:21.5%;
  height:6.5%
}

#city{
  left:38.4%;
  top:57.5%;
  width:22.2%;
  height:6.5%
}

#street{
  left:62.2%;
  top:57.5%;
  width:21.7%;
  height:6.5%
}

.hotspots button{
  left:32.2%;
  top:65%;
  width:35.8%;
  height:6.2%;
  border-radius:30px;
  font-size:20px;
  padding:0 10px
}

#status{
  flex:0 1 32vw;
  width:min(32vw,600px);
  margin-top:20px;
  padding:24px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  font-size:30px;
  line-height:1.55;
  color:#222;
  text-align:left;
  overflow-wrap:break-word
}

#status:empty{
  display:none
}

#status strong,
#status b{
  font-weight:700
}

@media(max-width:600px){

  html,body{
    width:100%;
    min-height:100%;
    background:#eee
  }

  .page{
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    background:#eee
  }

  .art{
    width:100vw;
    height:200vw;
    min-height:0;
    max-height:none;
    flex:none;
    aspect-ratio:auto;
    position:relative;
    overflow:hidden;

    clip-path:inset(0 0 23vw 0);
    margin-bottom:-61vw;

    background-image:url('fondo-calles.png');
    background-repeat:no-repeat;

    background-position:center -8vw;
    background-size:100% calc(100% + 8vw);
  }

  #country{
    left:10%;
    top:54.05%;
    width:80%;
    height:4.2%;
    min-height:34px;
    display:block;
    font-size:14px;
    padding:3px 10px;
    border-radius:8px
  }

  #city{
    left:10%;
    top:58.05%;
    width:80%;
    height:4.2%;
    min-height:34px;
    display:block;
    font-size:14px;
    padding:3px 10px;
    border-radius:8px
  }

  #street{
    left:10%;
    top:62.05%;
    width:80%;
    height:4.2%;
    min-height:34px;
    display:block;
    font-size:14px;
    padding:3px 10px;
    border-radius:8px
  }

  .hotspots button{
    left:19%;
    top:66.50%;
    width:62%;
    height:5.2%;
    min-height:40px;
    background:rgba(139,30,30,.96);
    border-radius:25px;
    z-index:22;
    font-size:12px;
    padding:0 6px
  }

  #status{
    position:relative;
    display:none;
    width:92vw;
    flex:none;
    margin:20px auto 30px;
    padding:20px 18px;
    font-size:18px;
    line-height:1.6;
    text-align:left;
    overflow-wrap:break-word;
    background:rgba(255,255,255,.97);
    z-index:30
  }

  #status strong,
  #status b{
    font-weight:700
  }
}

@media(max-width:600px) and (max-height:700px){

  .art{
    height:200vw;
    max-height:none
  }

  #country{
    top:54.05%
  }

  #city{
    top:58.05%
  }

  #street{
    top:62.05%
  }

  .hotspots button{
    top:66.50%
  }
}

/* BOTÓN BUSCAR OTRA CALLE */

#new-search{
  display:block;
  width:75%;
  height:78px;
  margin:28px auto 0;
  border:0;
  border-radius:30px;
  background:rgba(139,30,30,.96);
  color:white;
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  white-space:nowrap;
  padding:0 10px
}

@media(max-width:600px){

  #new-search{
    width:67.4%;
    height:40px;
    min-height:40px;
    margin:24px auto 0;
    border:0;
    border-radius:25px;
    background:rgba(139,30,30,.96);
    color:white;
    font-family:Arial,sans-serif;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
    white-space:nowrap;
    padding:0 6px
  }
}