/* ===== Portada en celular/tablet: misma composición que en la compu =====
   Texto a la izquierda, foto a la derecha, cartel arriba a la derecha,
   tarjetas abajo a la derecha y buscador superpuesto al pie.
   Todo escala con el ancho de pantalla (vw) para mantener las proporciones. */
@media (max-width: 900px) {
  .hm-hero { min-height: 0; align-items: center; padding: calc(84px + 3vw) 0 calc(70px + 6vw); }
  .hm-hero-bg { background-position: 74% center; }
  .hm-hero::before {
    background:
      linear-gradient(90deg, #f4f1ec 0%, rgba(244, 241, 236, .95) 34%, rgba(244, 241, 236, .62) 52%, rgba(244, 241, 236, 0) 70%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .6) 10%, rgba(255, 255, 255, 0) 22%) !important;
  }

  /* dos columnas, igual que en la compu */
  .hm-hero-in { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 2vw; }
  .hm-hero-copy { flex: 0 0 56%; max-width: 56%; min-width: 0; }

  .hm-hero .hm-eyebrow { display: flex; max-width: 100%; font-size: 2.3vw; line-height: 1.5; letter-spacing: .13em; }
  .hm-hero .hm-eyebrow::before { flex: 0 0 auto; align-self: center; margin-right: 1.4vw; }
  .hm-hero .hm-eyebrow::before { width: 3.4vw; }
  .hm-hero h1 { margin: 3.2vw 0 3.4vw; font-size: 10.6vw; line-height: .98; }
  .hm-hero h1 .hm-script.hm-prop { margin-top: .8vw; }
  .hm-hero p { margin: 0 0 4.6vw; max-width: 100%; font-size: 3.3vw; line-height: 1.5; }

  /* botones uno debajo del otro dentro de la columna izquierda */
  .hm-actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2.4vw; max-width: 100%; }
  .hm-actions .hm-btn, .hm-tasar-btn { flex: 0 0 auto; }
  .hm-actions .hm-btn { height: 11.5vw; min-height: 40px; padding: 0 4vw; justify-content: center; font-size: 3.6vw; gap: 2vw; }
  .hm-tasar-btn { height: 12.5vw; min-height: 44px; gap: 2.2vw; padding: 0 1.6vw 0 1.4vw; justify-content: flex-start; }
  .hm-tasar-btn .tb-ic { flex: 0 0 auto; width: 8.4vw; height: 8.4vw; min-width: 30px; min-height: 30px; }
  .hm-tasar-btn .tb-ic svg.i { width: 4.4vw !important; height: 4.4vw !important; }
  .hm-tasar-btn .tb-txt { font-size: 3.15vw; white-space: nowrap; }
  .hm-tasar-btn .tb-txt small { font-size: 2.6vw; margin-top: 2px; }
  .hm-tasar-btn .tb-go { flex: 0 0 auto; width: 6.8vw; height: 6.8vw; min-width: 24px; min-height: 24px; margin-left: auto; }
  .hm-tasar-btn .tb-go svg.i { width: 3.6vw !important; height: 3.6vw !important; }

  /* columna derecha: cartel arriba, tarjetas abajo */
  .hm-hero-side { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 4vw; }
  .hm-sign { margin: 0; padding: 1.6vw 3vw 1.8vw; border-radius: 3.4vw; }
  .hm-sign-a, .hm-sign-b { font-size: 7.4vw; }
  .hm-sign-sub { font-size: 1.85vw; margin-top: -.3vw; }

  .hm-hero-chips { display: flex !important; flex-direction: column; align-items: flex-end; gap: 2.2vw; width: 100%; margin: 0; }
  .hm-gchip { width: 100%; gap: 2vw; padding: 2.2vw 2.6vw 2.2vw 2.4vw; border-radius: 3.6vw; }
  .hm-gchip:nth-child(2) { margin-left: 0; width: 100%; }
  .hm-gchip b { font-size: 5.6vw; min-width: 0; flex: 0 0 auto; }
  .hm-gchip span { font-size: 2.35vw; line-height: 1.25; }
  .hm-gchip span br { display: none; }
  @keyframes hm-float { 50% { transform: translateY(-1.2vw); } }

  /* buscador: superpuesto al pie de la foto, con el botón a la derecha como en la compu */
  .hm-search-wrap { margin-top: calc(-30px - 6vw); }
  .hm-search { grid-template-columns: 1fr 1fr auto; gap: 1.4vw; padding: 1.8vw; border-radius: 5vw; }
  .hm-sf { padding: 1.6vw 3vw; gap: 2vw; border-radius: 3.4vw; }
  .hm-sf > svg.i { display: none; }
  .hm-sf small { font-size: max(10px, 2.6vw); }
  .hm-sf select { font-size: max(12px, 3.2vw); }
  .hm-go { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; height: auto; width: 15vw; min-width: 52px; padding: 0; border-radius: 3.8vw; justify-content: center; }
  .hm-go > span:not([id]) { display: none; }
  .hm-go b:not([hidden]) { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #fff; color: #2f8530; font-size: 11px; line-height: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
  .hm-go { position: relative; }
  .hm-go #qs-word { display: none !important; }
}
/* tablet: el buscador mantiene tamaños de letra normales */
@media (min-width: 641px) and (max-width: 900px) {
  .hm-sf small { font-size: 12px; }
  .hm-sf select { font-size: 14px; }
  .hm-sf > svg.i { display: block; }
  .hm-go { width: 84px; }
  .hm-go svg.i { width: 24px !important; height: 24px !important; }
}
/* Cartel en celular: centrado y "PROPIEDADES" alineado con la n */
@media (max-width: 900px) {
  .hm-sign { padding: 1.5vw 3.3vw 2.3vw 2.75vw; }
  .hm-sign-sub { font-size: 1.55vw; margin-top: .1vw; padding-left: .19em; }
}
/* Celular: foto vertical del living para que se vea completo */
@media (max-width: 900px) and (orientation: portrait) {
  .hm-hero-bg { background-image: url("../img/hero-living-movil.webp"); background-size: cover; background-position: 50% 62%; }
  .hm-hero::before {
    background:
      linear-gradient(90deg, rgba(244, 241, 236, .94) 0%, rgba(244, 241, 236, .86) 34%, rgba(244, 241, 236, .4) 52%, rgba(244, 241, 236, 0) 66%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .55) 8%, rgba(255, 255, 255, 0) 18%) !important;
  }
}