/* ============================================================
   Selector (home) — capa standalone sobre la variante híbrida
   Solo afecta a la página del selector (.selector-page),
   no a la exploración del lienzo.
   ============================================================ */
html, body { margin: 0; height: 100%; background: var(--bg); }
body { font-family: var(--ff-sans); }

.selector-page { min-height: 100vh; min-height: 100svh; display: flex; }
.selector-page .v-hybrid { flex: 1; min-height: 100vh; min-height: 100svh; }

/* tarjetas como enlaces reales */
.selector-page a.card { text-decoration: none; color: inherit; }
.selector-page a.skip { cursor: pointer; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .selector-page .v-hybrid { padding: 34px 40px 36px; }
  .selector-page .v-hybrid h1 { font-size: 52px; }
}

/* ---------- Móvil: tarjetas apiladas ---------- */
@media (max-width: 760px) {
  .selector-page .v-hybrid { padding: 26px 22px 30px; }
  .selector-page .v-hybrid .core { justify-content: flex-start; padding-top: 18px; }
  .selector-page .v-hybrid h1 {
    white-space: normal; text-wrap: balance;
    font-size: 38px; line-height: 1.06; margin-bottom: 18px;
  }
  .selector-page .v-hybrid .lead {
    font-size: 16px; margin-bottom: 32px; max-width: 36ch;
  }
  .selector-page .v-hybrid .cards {
    flex-direction: column; gap: 16px; max-width: 480px; margin: 0 auto;
  }
  .selector-page .v-hybrid .card { padding: 26px 24px 24px; }
  .selector-page .v-hybrid .card p { min-height: 0; margin-bottom: 24px; max-width: none; }
  .selector-page .v-hybrid .card h3 { font-size: 27px; }
  .selector-page .v-hybrid .who .role { display: none; }
  .selector-page .v-hybrid .footnote { margin-top: 30px; }
}

@media (max-width: 440px) {
  .selector-page .v-hybrid h1 { font-size: 32px; }
  .selector-page .v-hybrid .eyebrow::before,
  .selector-page .v-hybrid .eyebrow::after { width: 16px; }
}

/* respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .selector-page .v-hybrid .card,
  .selector-page .v-hybrid .chip,
  .selector-page .bif-arrow { transition: none !important; }
}

/* ---------- Pantallas grandes / 4K: escalar todo el diseno ---------- */
@media (min-width: 2200px) { html { zoom: 1.25; } }
@media (min-width: 2560px) { html { zoom: 1.4; } }
@media (min-width: 3000px) { html { zoom: 1.6; } }
@media (min-width: 3400px) { html { zoom: 1.8; } }
@media (min-width: 3800px) { html { zoom: 2; } }

/* con zoom activo, 100vh no se compensa: usar cadena de porcentajes */
@media (min-width: 2200px) {
  html, body { height: 100%; }
  #root { height: 100%; }
  .selector-page { min-height: 0; height: 100%; }
  .selector-page .v-hybrid { min-height: 0; }
  body { overflow: hidden; }
}