/* ==========================================================================
   VANTAR Dynamics — Responsive layer (tablet + desktop)
   Mobile-first stays the base; these only widen and re-flow on larger screens.
   ========================================================================== */

/* --- Capability states (toolbox) -------------------------------------- */
.toolcard.unavail { opacity: 0.5; }
.toolcard .tc-badge {
  align-self: flex-start;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(212, 154, 23, 0.14); color: var(--yellow);
  border: 1px solid rgba(212, 154, 23, 0.3);
}

.mobile-hint {
  display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}
.mobile-hint .mh-ico { flex: none; width: 46px; height: 46px; }
.mobile-hint .mh-ico svg { width: 100%; height: 100%; }
.mobile-hint h3 { font-size: 1.05rem; margin-bottom: 4px; }
.mobile-hint p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }
.mobile-hint .mh-url {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink);
  background: var(--cream-3); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 7px 14px; cursor: pointer; transition: border var(--dur) var(--ease);
}
.mobile-hint .mh-url:hover { border-color: var(--yellow); }

/* ======================================================================= */
/* Tablet                                                                  */
/* ======================================================================= */
@media (min-width: 700px) {
  :root { --franja: 720px; }
  .app { max-width: 720px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .social { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ======================================================================= */
/* Desktop                                                                 */
/* ======================================================================= */
@media (min-width: 1024px) {
  :root { --maxw: 1120px; --franja: 1120px; }
  .app {
    max-width: 1120px;
    padding-bottom: var(--s-8);
    padding-top: 0;
  }


  /* Roomier sections, centered reading measure */
  .section { padding-left: var(--s-6); padding-right: var(--s-6); }

  /* Hero becomes two columns */
  .hero { padding: var(--s-7) var(--s-6) var(--s-9); }

  /* Denser grids on wide screens */
  .grid { grid-template-columns: repeat(3, 1fr); }
  .tool-grid { grid-template-columns: repeat(3, 1fr); }

  /* Contact: form + aside side by side */
  #contact-mount { max-width: 760px; }

  /* Brand board: three cards in a row */
  #view-brand .section > .card { display: inline-block; }

  /* Modals become centered dialogs */
  .modal { align-items: center; }
  .modal-sheet {
    max-width: 640px;
    border-radius: var(--r-xl);
    max-height: 86dvh;
  }
  .modal-sheet .modal-grip { display: none; }

  /* Tap targets can relax to hover affordances */
  .toolcard:hover, .proj:hover { transform: translateY(-2px); }
}

/* Computadora: la barra de navegación sube a la parte superior */
@media (min-width: 1024px) {
  .bottomnav {
    top: 16px; bottom: auto;
    width: auto; height: 56px;
    grid-auto-columns: auto;
    padding: 0 8px; gap: 2px;
  }
  .navbtn { flex-direction: row; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); }
  .navbtn:not(.nav-logo) svg { display: none; }
  .navbtn span { font-size: 0.86rem; }
  .navbtn:hover { color: var(--ink); background: var(--cream-3); }
  .navbtn.is-active:not(.nav-logo) { background: var(--yellow); }
  .navbtn.is-active:not(.nav-logo) span { color: #0d0d0f; }
  .nav-logo { padding: 6px 14px; }
  .nav-velo {
    top: 0; bottom: auto; height: 110px;
    background: linear-gradient(to bottom, var(--cream) 0%, var(--cream) 35%, rgba(13, 13, 15, 0.85) 60%, rgba(13, 13, 15, 0) 100%);
  }
  .app { padding-top: 72px; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .toolcard:hover, .proj:hover { transform: none; }
}