/* ==========================================================================
   Thinkhub — landings de submarca (thinkcore / thinkcloud / thinksmart)
   Portadas del paquete del diseñador. Las tres comparten estructura:
   hero → beneficios → pilares → CTA. Una sola hoja para las tres.
   ========================================================================== */

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

/* --- Hero ----------------------------------------------------------------- */
.marca-hero {
  padding-block: var(--sp-100) var(--sp-120);
  padding-top: calc(var(--navbar-h) + var(--sp-64));
}

.marca-hero__back {
  display: inline-block;
  margin-bottom: var(--sp-56);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  transition: color var(--dur) var(--ease);
}

.marca-hero__back:hover { color: var(--c-orange); }

.marca-hero__logo {
  display: block;
  height: var(--sol-logo-h);
  width: auto;
  margin-bottom: var(--sp-44);
}

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

.marca-hero__lead {
  margin: var(--sp-36) 0 0;
  max-width: 720px;
  font-size: var(--fs-sol-lead);
  line-height: 1.5;
  color: var(--c-muted);
}

/* --- Beneficios ----------------------------------------------------------- */
.benef { padding-block: var(--sp-100); border-top: 1px solid var(--c-rule); }

.benef__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-56) var(--sp-36);
  margin-top: var(--sp-56);
}

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

.benef__icon { width: 32px; height: 32px; margin-bottom: var(--sp-4); }

.benef__name {
  margin: 0;
  font-size: var(--fs-sol-unit);
  line-height: 1.25;
  font-weight: var(--fw-medium);
}

.benef__text {
  margin: 0;
  font-size: var(--fs-sol-item);
  line-height: 1.5;
  color: var(--c-muted);
}

/* --- Pilares -------------------------------------------------------------- */
.pilares {
  padding-block: var(--sp-120);
  background: var(--c-dark);
  color: var(--c-white);
}

.pilares__title {
  margin: var(--sp-24) 0 var(--sp-72);
  max-width: 900px;
  font-size: var(--fs-marca-h2);
  line-height: 1.1;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-wrap: balance;
}

.pilares__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-56) var(--sp-36);
  list-style: none;
}

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

.pilar__num {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  color: var(--c-orange);
}

.pilar__name {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

.pilar__text {
  margin: 0;
  font-size: var(--fs-sol-item);
  line-height: 1.5;
  color: var(--c-border);
}

/* --- CTA ------------------------------------------------------------------ */
.marca-cta { padding-block: var(--sp-120); }

.marca-cta .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-44);
}

.marca-cta__text {
  margin: 0;
  max-width: 800px;
  font-size: var(--fs-marca-h2);
  line-height: 1.15;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-wrap: balance;
}

/* Los nombres de submarca van siempre en minúscula y en naranja. */
.marca-cta__text b { font-weight: var(--fw-bold); color: var(--c-orange); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .benef__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .benef__list { grid-template-columns: 1fr; gap: var(--sp-36); }
  .pilares__list { grid-template-columns: 1fr; gap: var(--sp-44); }
  .marca-hero__back { margin-bottom: var(--sp-36); }
}