/* ============================================================
   Responsive — prioridad: tablet horizontal.
   Adaptado a tablet vertical, celular vertical y horizontal.
   ============================================================ */

/* Tablet vertical: cabecera algo más compacta */
@media (max-width: 900px) {
  .hv-hero-inner {
    min-height: clamp(120px, 19vw, 168px);
    padding-bottom: clamp(35px, 5.6vw, 51px);
  }
}

/* Celular / tablet vertical estrecha: cabecera apilada + barra de sonido apilada */
@media (max-width: 700px) {
  .hv-hero-inner {
    min-height: clamp(102px, 27vw, 150px);
    padding-top: 12px;
    padding-bottom: clamp(26px, 6.4vw, 42px);
    gap: 8px 12px;
  }
  .hv-brand { flex: 1 1 100%; min-width: 0; }
  .hv-top-right { flex: 1 1 100%; margin-left: 0; justify-content: center; }
  .hv-logo { width: clamp(38px, 9vw, 52px); }
  .hv-brand-txt h1 { font-size: clamp(19px, 5.4vw, 26px); }
  .hv-brand-txt p { font-size: clamp(11px, 3.2vw, 14px); }
  .hv-bg-wrap { border-radius: 22px; }
  .hv-body { margin-top: -12px; }

  .sound-card { flex-wrap: wrap; align-items: center; }
  .sc-copy { flex: 1 1 55%; min-width: 130px; }
  .sc-vol { flex: 1 1 100%; max-width: none; margin-top: 4px; }
}

/* Celular vertical estrecho */
@media (max-width: 420px) {
  :root { --tap: 46px; }
  .mat-grid { gap: 10px; }
  .mat-card { padding: 9px; border-radius: 20px; }
  .mc-name { font-size: 13.5px; }
  .mc-desc { min-height: 0; }
  .hv-hero-inner { min-height: clamp(92px, 34vw, 120px); }
  .hv-bg-chip { width: 34px; height: 34px; font-size: 15px; }
  .user-chip { padding: 6px 10px; gap: 8px; }
  .uc-avatar { width: 30px; height: 30px; font-size: 16px; }
  .uc-txt b { font-size: 12.5px; }
  .uc-txt small { font-size: 11px; }
}

/* Tablet vertical y celular grande */
@media (min-width: 560px) {
  .screen { padding-left: 28px; padding-right: 28px; }
  .home-v2 { padding-left: 0; padding-right: 0; }
}

/* Tablet horizontal (objetivo principal) */
@media (min-width: 860px) {
  .screen { max-width: 1100px; margin: 0 auto; width: 100%; }
  .home-v2.screen { max-width: none; }
  .houses-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .results-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
  .results-grid .full { grid-column: 1 / -1; }
}

/* Pantallas muy anchas / TV */
@media (min-width: 1280px) {
  .screen { max-width: 1180px; }
  .home-v2.screen { max-width: none; }
  .readout .big { font-size: 92px; }
}

/* Horizontal bajo (celular apaisado) */
@media (max-height: 480px) and (orientation: landscape) {
  .screen { min-height: auto; }
  .boot-splash .boot-logo { font-size: 44px; }
  .countdown .num { font-size: 40vh; }
  .trophy { font-size: 64px; }
  .houses-grid { grid-template-columns: repeat(4, 1fr); }
  .mat-grid, .nav-grid { grid-template-columns: repeat(4, 1fr); }
  .mc-img { aspect-ratio: 16 / 10; }
  .hv-hero-inner {
    min-height: 86px; padding-top: 8px; padding-bottom: 22px;
    align-items: center;
  }
  .hv-brand { flex: 1 1 100%; }
  .hv-top-right { flex: 1 1 100%; margin-left: 0; margin-top: 2px; justify-content: center; }
  .hv-body { margin-top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}