/* ==========================================================================
   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);
}

/* La última cierra con línea, así el bloque queda encajonado. */
.unit:last-child { border-bottom: 1px solid var(--c-rule); }

/* Cada submarca tiñe su número, el nombre en el CTA y sus tags. `--brand` es
   el acento y `--brand-soft` el relleno de los tags. */
.unit--core  { --brand: var(--c-orange);      --brand-soft: var(--c-core-soft); }
.unit--cloud { --brand: var(--c-violet);      --brand-soft: var(--c-cloud-soft); }
.unit--smart { --brand: var(--c-violet-deep); --brand-soft: var(--c-violet); }

.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(--brand);
  margin-bottom: var(--sp-26);
}

/* El logo también entra a la landing. Se normaliza por altura; el ancho libre. */
.unit__logo-link { display: block; transition: opacity var(--dur) var(--ease); }
.unit__logo-link:hover { opacity: var(--hover-op); }
.unit__logo { height: var(--sol-logo-h); width: auto; display: block; }

.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);
}

/* Pastilla de contorno sobre fondo claro. No usa .btn--outline: ése toma
   `color: white` porque está pensado para los bloques oscuros, y acá dejaba la
   palabra "Ver" invisible contra el papel.
   Los nombres de submarca van siempre en minúscula y en su color (regla del
   diseñador en su README). */
.unit__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  margin-top: var(--sp-36);
  padding: 12px var(--sp-24);
  border: 1px solid var(--c-rule-str);
  border-radius: var(--r-pill);
  font-size: var(--fs-sol-cta);
  font-weight: var(--fw-medium);
  color: var(--c-dark);
  transition: border-color var(--dur) var(--ease);
}

.unit__cta:hover { border-color: var(--brand); }

.unit__cta b { font-weight: var(--fw-medium); color: var(--brand); }

.unit__cta::after {
  content: '';
  width: 11px;
  height: 11px;
  flex: none;
  background: currentColor;
  -webkit-mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
  mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
}

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

/* Los rótulos van en caja normal y en tinta plena, no en versalitas grises. */
.unit__block-title {
  margin: 0 0 18px;
  font-size: var(--fs-sol-label);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--c-dark);
}

/* Viñeta neutra: acá el color lo pone el tag, no la lista. */
.unit__list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--c-muted);
}

.unit__list li {
  font-size: var(--fs-sol-item);
  line-height: 1.45;
}

.unit__tags { display: flex; flex-wrap: wrap; gap: 9px; }

.unit__tags li {
  font-size: var(--fs-sol-tag);
  line-height: 1.2;
  padding: 8px 17px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--c-dark);
}

/* --- Cierre --------------------------------------------------------------- */
/* Es el único bloque oscuro de la página: cierra contra el footer, que ya lo
   es. Tiene que serlo, además, porque el objeto animado viene sobre fondo
   blanco y se apoya en `lighten` para sacárselo de encima. */
.sol-closing {
  padding-block: var(--sol-closing-pt);
  background: var(--c-dark);
  color: var(--c-white);
}

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

/* Caja de alto fijo: el objeto se acomoda adentro sin recortarse. */
.sol-closing__media {
  height: var(--sol-media-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* El mp4 sale del mismo GIF que traía el paquete, con fondo blanco: `invert`
   lo pasa a negro, `hue-rotate` devuelve el tono del objeto y `lighten` hace
   desaparecer el negro contra el fondo de la sección. */
.sol-closing__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: lighten;
}

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

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

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

.sol-closing__title {
  margin: var(--sp-28) 0 var(--sp-44);
  max-width: 680px;
  font-size: var(--fs-sol-closing);
  line-height: 1.05;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--c-violet);
  text-wrap: pretty;
}

/* ==========================================================================
   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; }
  .sol-closing__media { justify-content: flex-start; }
}

@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; }
}