/* =========================================================
   PORTADA RESPONSIVE — CELULAR Y TABLETA
   Mantiene el estilo aprobado de escritorio:
   video limpio, sin laterales borrosos, logo proporcionado
   y composición adaptada a cada pantalla.
   ========================================================= */

/* TABLETA */
@media (min-width: 700px) and (max-width: 1099px) {
  .hero {
    width: 100% !important;
    max-width: none !important;
    min-height: 700px !important;
    height: 82vh !important;
    max-height: 820px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .hero-bg-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #0d292d !important;
  }

  .hero .hero-content {
    position: absolute !important;
    left: 6vw !important;
    bottom: 58px !important;
    width: 58% !important;
    max-width: 560px !important;
    z-index: 4 !important;
  }

  .hero h1 {
    font-size: clamp(3rem, 6.2vw, 4.6rem) !important;
    line-height: .96 !important;
  }

  .hero .hero-text {
    max-width: 520px !important;
  }

  .bella-logo-portada {
    position: absolute !important;
    top: 88px !important;
    right: 4vw !important;
    left: auto !important;
    width: clamp(155px, 20vw, 210px) !important;
    z-index: 5 !important;
  }

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

/* CELULAR */
@media (max-width: 699px) {
  .hero {
    width: 100% !important;
    max-width: none !important;
    min-height: 680px !important;
    height: 88svh !important;
    max-height: 790px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .hero-bg-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #0d292d !important;
  }

  .hero .hero-content {
    position: absolute !important;
    left: 7vw !important;
    right: 7vw !important;
    bottom: 42px !important;
    width: auto !important;
    max-width: none !important;
    z-index: 4 !important;
  }

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

  .hero .hero-text {
    max-width: 92% !important;
  }

  .bella-logo-portada {
    position: absolute !important;
    top: 82px !important;
    right: 5vw !important;
    left: auto !important;
    width: clamp(118px, 34vw, 155px) !important;
    z-index: 5 !important;
  }

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

  .hero .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .hero .hero-actions a,
  .hero .hero-actions button {
    max-width: 100% !important;
  }
}

/* Celulares angostos */
@media (max-width: 430px) {
  .hero {
    min-height: 650px !important;
    height: 86svh !important;
  }

  .bella-logo-portada {
    width: 120px !important;
    top: 76px !important;
  }

  .hero .hero-content {
    left: 6vw !important;
    right: 6vw !important;
    bottom: 34px !important;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 11.5vw, 3.35rem) !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;
  }
}