/* ==========================================================================
   TOOLBOX · SUPERFICIES COMERCIALES · Fase 8B.2
   --------------------------------------------------------------------------
   Requiere toolbox-design-tokens.css + toolbox-ui-components.css (en ese
   orden, antes de este archivo). Se carga SOLO en: Home, Configurador,
   Explorador, Casos conectados y Control de demo.
   NO cargar todavía en HQ / Tienda / Mobile / Formación (Fase 8B.3).
   Prefijo reservado: .tb-commercial-
   ========================================================================== */

/* ── A · Reset de acción ────────────────────────────────────────────────
   Los divs/spans interactivos migrados a <button> conservan sus estilos
   visuales inline (contrato DC). Esta clase solo neutraliza los estilos
   de agente del <button> y garantiza la tipografía de la plataforma. */
.tb-commercial-action {
  font-family: var(--tb-font-family);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* ── B · Foco visible unificado (corrige A-01) ──────────────────────────
   Sustituye el anillo por box-shadow de toolbox-ui-components.css por un
   outline: no compite con las sombras inline existentes y funciona sobre
   cualquier fondo. Mismo token de foco (--tb-color-focus). */
.tb-root :focus-visible {
  outline: 2px solid var(--tb-color-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── C · Iconos SVG lineales (corrige A-03) ─────────────────────────────
   Reemplazos de emoji/Unicode funcional. stroke 1.75 · currentColor. */
.tb-commercial-icon { flex: none; display: inline-block; vertical-align: -2px; }

/* ── D · Responsive de superficies comerciales ──────────────────────────
   EXCEPCIÓN DOCUMENTADA E-01: los layouts base viven inline (contrato de
   Design Components); para reordenarlos en breakpoints las media queries
   necesitan !important. Uso restringido a las clases .tb-commercial-*
   de este bloque. Breakpoints canónicos 8B.1: 640 / 820 / 1000. */
@media (max-width: 1000px) {
  .tb-commercial-grid-verticals { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 820px) {
  .tb-commercial-aside { position: static !important; max-width: none !important; }
}
@media (max-width: 640px) {
  .tb-commercial-grid-verticals { grid-template-columns: 1fr !important; }
  .tb-commercial-hero-title { font-size: 40px !important; }
}

/* ── E · Reduced motion (centralizado para las superficies comerciales) ── */
@media (prefers-reduced-motion: reduce) {
  .tb-root *, .tb-root *::before, .tb-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}