/* Benvoli sitio de marketing — utilidades de interacción + responsive.
   Los tokens y base viven en styles.css (que importa tokens/*). */

a { text-decoration: none; color: inherit; }

/* Hover de botón sólido / de marca */
.hv-bright { transition: filter .15s ease; }
.hv-bright:hover { filter: brightness(.92); }

/* Hover de botón/superficie suave */
.hv-soft { transition: background .15s ease; }
.hv-soft:hover { background: var(--bn-sunken); }

/* Hover de tarjeta (lift + sombra) */
.lift { transition: transform .16s ease, box-shadow .16s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(32,32,28,.10); }
.lift-3:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(32,32,28,.10); }

/* Marco de "navegador" para placeholders de screenshot */
.frame { border: 1px solid var(--bn-border); border-radius: 14px; overflow: hidden; background: var(--bn-surface); box-shadow: 0 12px 40px rgba(32,32,28,.08); }
.frame-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bn-sunken); border-bottom: 1px solid var(--bn-border-light); }
.frame-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bn-border); }
.frame-url { margin-left: 8px; font-family: var(--bn-font-mono); font-size: 12px; color: var(--bn-faint); }
.frame-body { display: flex; align-items: center; justify-content: center; min-height: 300px; background: var(--bn-sunken); color: var(--bn-faint); font-size: 13px; font-family: var(--bn-font-sans); }

/* Contenedor estándar */
.wrap { max-width: 1160px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* Botón hamburguesa (solo móvil) */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--bn-border); background: var(--bn-surface); cursor: pointer; color: var(--bn-ink); flex-shrink: 0; }

/* Responsive */
@media (max-width: 820px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch !important; gap: 2px !important;
    background: var(--bn-paper); border-bottom: 1px solid var(--bn-border-light);
    padding: 10px 20px 16px; box-shadow: 0 12px 40px rgba(32,32,28,.08);
  }
  header.nav-open .nav-links { display: flex !important; }
  .nav-links a { padding: 11px 4px; font-size: 15px; }
  .nav-links a[href^="https://admin"] { margin-top: 8px; justify-content: center; padding: 12px; }
  h1.hero-h1 { font-size: 38px !important; }
}