/* ==========================================================================
   Thinkhub — /soluciones
   Portado del paquete crudo del diseñador (material/soluciones/site).
   Ese paquete venía con React desde CDN, CSS inline en atributos y SIN media
   queries: acá va como HTML+CSS plano, con nuestros tokens y responsive.

   Diferencias deliberadas respecto del original, ver README:
   - naranja #FF5800 (el del .fig), no el #FE6600 del paquete
   - los GIF de fondo (33 MB) quedaron fuera; el de la sección de cierre pasó
     a mp4 (1.7 MB → 273 KB)
   ========================================================================== */

.page-soluciones { background: var(--c-light); color: var(--c-dark); }

/* --- Encabezado ----------------------------------------------------------- */
.sol-header { padding-block: var(--sol-header-pt) var(--sol-header-pb); }

.sol-header__title {
  margin: 0;
  max-width: 900px;
  font-size: var(--fs-sol-title);
  line-height: 0.98;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-wrap: balance;
}

.sol-header__lead {
  margin: var(--sp-44) 0 0;
  max-width: 620px;
  font-size: var(--fs-sol-lead);
  line-height: 1.5;
  color: var(--c-muted);
}

/* --- Las 3 unidades -------------------------------------------------------
   Cada una es una fila de dos columnas separada por una línea superior. */
.units .container {
  display: flex;
  flex-direction: column;
}

.unit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sol-unit-gap);
  padding-block: var(--sp-80) var(--sp-100);
  border-top: 1px solid var(--c-rule);
}

.unit__intro { display: flex; flex-direction: column; align-items: flex-start; }

.unit__num {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--c-orange);
  margin-bottom: var(--sp-26);
}

/* El logo de submarca se normaliza por altura; el ancho es libre. */
.unit__logo { height: var(--sol-logo-h); width: auto; }

.unit__lead {
  margin: var(--sp-34) 0 0;
  max-width: 400px;
  font-size: var(--fs-sol-unit);
  line-height: 1.5;
  color: var(--c-muted);
}

/* Los nombres de submarca van siempre en minúscula y en naranja (regla del
   diseñador en su README). */
.unit__cta { margin-top: var(--sp-36); }
.unit__cta b { font-weight: var(--fw-medium); color: var(--c-orange); }

/* Las landings de cada submarca todavía no están portadas, así que el CTA
   queda inerte en vez de romper con un 404. */
.unit__cta[aria-disabled="true"] { cursor: default; opacity: 0.55; }
.unit__cta[aria-disabled="true"]:hover { transform: none; }

.unit__detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-44);
  padding-top: var(--sp-56);
}

.unit__block-title { color: var(--c-muted); margin-bottom: var(--sp-24); }

.unit__list { display: flex; flex-direction: column; gap: var(--sp-16); }

.unit__list li {
  font-size: var(--fs-sol-item);
  line-height: 1.45;
  padding-left: var(--sp-24);
  position: relative;
}

.unit__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-orange);
}

.unit__tags { display: flex; flex-wrap: wrap; gap: var(--sp-16) 10px; }

.unit__tags li {
  font-size: var(--fs-sol-tag);
  line-height: 1;
  padding: 9px 16px;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-pill);
  color: var(--c-muted);
}

/* --- Cierre --------------------------------------------------------------- */
.sol-closing { padding-block: var(--sp-100) var(--sp-120); }

.sol-closing__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sol-unit-gap);
  align-items: center;
}

.sol-closing__media {
  width: var(--sol-media-w);
  height: auto;
  border-radius: var(--r-card);
}

.sol-closing__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-36);
}

.sol-closing__dots { display: flex; gap: var(--sp-24); }

.sol-closing__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-orange);
}

.sol-closing__title {
  margin: 0;
  max-width: 620px;
  font-size: var(--fs-sol-closing);
  line-height: 1.1;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-wrap: balance;
}

/* ==========================================================================
   Responsive — el paquete original no traía ninguno
   ========================================================================== */

@media (max-width: 1100px) {
  .unit {
    grid-template-columns: 1fr;
    gap: var(--sp-56);
  }
  .unit__detail { padding-top: 0; }
  .unit__lead { max-width: none; }

  .sol-closing__inner { grid-template-columns: 1fr; gap: var(--sp-56); }
  .sol-closing__media { width: min(var(--sol-media-w), 100%); }
}

@media (max-width: 640px) {
  .unit { padding-block: var(--sp-48) var(--sp-64); }
  .unit__detail { gap: var(--sp-36); }
  .unit__tags { gap: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-closing__media { display: none; }
}