/* ==========================================================================
   BUSINESS OVERVIEW — DIGART Business — DIGART Studio
   Pattern: Business Overview

   Referencia documental:
     project/03-PRODUCT/P-02-FRONTEND.md (4.1 Grid, 4.2 Contenedores, 12
     Iconografía)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-container, .l-grid,
   .l-col-3). No declara valores independientes de color, tipografía,
   espaciado, tiempo, easing, z-index, sombra ni punto de quiebre. Cuatro
   columnas equivalentes, sin tarjeta ni fondo individual.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.business-overview {
  padding-block: var(--space-8);
  background-color: var(--color-background-default);
}

/* --------------------------------------------------------------------
   2. Elements — encabezado
   -------------------------------------------------------------------- */
.business-overview__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: var(--space-8);
  text-align: center;
}

.business-overview__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

.business-overview__text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
   3. Elements — columnas
   -------------------------------------------------------------------- */
.business-overview__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Tamaño fijo en píxel (Blueprint del sprint: 48px escritorio, 40px
   móvil, 7 Responsive), mayor peso visual que la escala de espaciado
   habitual. */
.business-overview__icon {
  width: 48px;
  height: 48px;
  color: var(--color-error);
}

.business-overview__item-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

.business-overview__item-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
   4. Variants
   Sección reservada: este Pattern no define variantes.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Sección editorial sin elementos interactivos propios; estado base
   (Default) representado por el resto de las reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Sin disparador funcional propio ni JavaScript; el contenido se
   presenta directamente en su estado final.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css. El
   remapeo oficial de spans (RWD-08, layout.css) ya linealiza .l-col-3 en
   una sola columna apilada; solo se resuelve aquí el tamaño móvil del
   icono (40px, Blueprint del sprint).
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .business-overview__icon {
    width: 40px;
    height: 40px;
  }
}