/* =========================================================
   Ajustes visuales 2026-08-19
   - Portada desktop: logo y texto sin superposición/cortes
   - Móvil: botón de Maps fuera de la imagen
   - Calendario más compacto
   ========================================================= */

html,body{
  max-width:100%;
  overflow-x:hidden;
}

/* PORTADA — escritorio */
@media(min-width:901px){
  .hero{
    position:relative!important;
    display:block!important;
    min-height:680px!important;
  }

  .hero .hero-content{
    position:absolute!important;
    left:max(5.5vw,48px)!important;
    bottom:92px!important;
    width:min(720px,calc(100% - 430px))!important;
    max-width:720px!important;
    padding:0!important;
    margin:0!important;
    z-index:4!important;
  }

  .hero h1{
    font-size:clamp(3.5rem,5.2vw,5.35rem)!important;
    line-height:.96!important;
    overflow:visible!important;
    word-break:normal!important;
  }

  .hero h1 em{
    display:block!important;
    max-width:100%!important;
  }

  .hero .hero-text{
    max-width:600px!important;
    margin:20px 0 28px!important;
  }

  .bella-logo-portada{
    width:205px!important;
    top:96px!important;
    right:max(4vw,42px)!important;
    left:auto!important;
    z-index:5!important;
  }

  .bella-logo-portada img{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }

  .hero .scroll{
    right:max(4vw,42px)!important;
    bottom:34px!important;
  }
}

/* TABLETA */
@media(min-width:701px) and (max-width:900px){
  .bella-logo-portada{
    width:145px!important;
    top:82px!important;
    right:20px!important;
  }

  .hero .hero-content{
    width:calc(100% - 210px)!important;
    max-width:650px!important;
    margin:0!important;
    padding-left:24px!important;
    padding-right:0!important;
  }

  .hero h1{
    font-size:clamp(3rem,7vw,4.5rem)!important;
  }
}

/* MÓVIL — logo pequeño y texto sin superponerse */
@media(max-width:700px){
  .bella-logo-portada{
    width:118px!important;
    top:78px!important;
    right:14px!important;
    left:auto!important;
    padding:6px 8px!important;
  }

  .hero .hero-content{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin:0 14px!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .hero h1{
    font-size:clamp(2.65rem,12vw,3.8rem)!important;
    line-height:.96!important;
  }

  .hero h1 em{
    display:block!important;
  }
}

/* UBICACIÓN / GOOGLE MAPS
   En móvil el botón propio se muestra debajo del mapa,
   para no tapar controles ni etiquetas del mapa. */
@media(max-width:700px){
  .location-card{
    overflow:hidden!important;
  }

  .location-card > div:first-child{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:10px!important;
  }

  .location-card > div:first-child .eyebrow,
  .location-card > div:first-child h2,
  .location-card > div:first-child p{
    flex:0 0 100%!important;
  }

  .location-card > div:first-child > .btn{
    width:auto!important;
    min-height:46px!important;
    padding:0 18px!important;
    margin:0!important;
    font-size:.95rem!important;
  }

  .map-wrap{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding:0!important;
    background:#0f2e33!important;
  }

  .map-wrap iframe{
    position:relative!important;
    min-height:360px!important;
    height:360px!important;
    width:100%!important;
    flex:none!important;
  }

  .map-business-link{
    position:static!important;
    transform:none!important;
    display:block!important;
    width:calc(100% - 28px)!important;
    max-width:420px!important;
    margin:14px auto 18px!important;
    padding:12px 16px!important;
    text-align:center!important;
    white-space:normal!important;
    line-height:1.25!important;
  }

  .map-business-link:hover{
    transform:none!important;
  }
}

/* CALENDARIO MÁS PEQUEÑO */
.availability-panel{
  width:min(100%,980px)!important;
  margin:28px auto 0!important;
  padding:clamp(14px,2vw,24px)!important;
  border-radius:18px!important;
}

.availability-header h3{
  font-size:clamp(1.4rem,2.2vw,1.9rem)!important;
}

.calendar-controls{
  margin:14px 0 10px!important;
}

.calendar-controls button{
  min-width:38px!important;
  height:38px!important;
  font-size:.9rem!important;
}

.availability-calendar{
  gap:12px!important;
}

.calendar-month{
  padding:12px!important;
  border-radius:14px!important;
}

.calendar-month h4{
  margin:0 0 9px!important;
  font-size:.95rem!important;
}

.calendar-grid{
  gap:3px!important;
}

.calendar-weekday{
  font-size:.66rem!important;
}

.calendar-day{
  font-size:.75rem!important;
  border-radius:7px!important;
}

.availability-actions{
  margin-top:14px!important;
}

@media(max-width:700px){
  .availability-panel{
    width:100%!important;
    padding:14px!important;
    border-radius:16px!important;
  }

  .availability-calendar{
    grid-template-columns:1fr!important;
  }

  .calendar-month{
    max-width:420px!important;
    width:100%!important;
    margin:0 auto!important;
  }

  .calendar-day{
    font-size:.72rem!important;
  }
}


/* AJUSTE MÓVIL/TABLET: sin línea residual del header y sin etiquetas en galería */
@media (max-width: 1100px){
  header, .site-header, .navbar, .nav, .topbar,
  header::before, header::after,
  .site-header::before, .site-header::after,
  .navbar::before, .navbar::after{
    border-bottom:0 !important;
    border-top:0 !important;
    box-shadow:none !important;
    outline:none !important;
  }

  #galeria #official-gallery-grid > .bella-space-photo > span,
  #galeria #official-gallery-grid > .official-managed-card > span,
  #galeria #official-gallery-grid .photo-label,
  #galeria .bella-space-photo .photo-label,
  #galeria .official-managed-card .photo-label{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }
}