@charset "UTF-8";
/* =========================================================================
   TASK INTERNET | /merx
   Convertida de ui_kits/site/MerxParts.jsx, com a composição de Merx.html
   (que inclui o bloco de capturas do painel).
   Depende de task-ds.css. Escopo: .tk-merx
   ========================================================================= */

/* 1. Dobra ------------------------------------------------------------- */
.task-page .tk-merx__hero{padding-block:72px var(--section-y-tight)}
.task-page .tk-merx__hero-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-16);align-items:center}
.task-page .tk-merx__hero-grid>*{min-width:0}
.task-page .tk-merx__hero-body{display:flex;flex-direction:column;gap:var(--space-6)}
.task-page .tk-merx__lead{font-size:var(--fs-body-sm);line-height:var(--lh-normal);max-width:480px}
.task-page .tk-merx__hero-media{position:relative;padding-bottom:var(--space-16)}
.task-page .tk-merx__hero-media .tk-spec{position:absolute;right:var(--space-6);
  bottom:calc(var(--space-16) * -0.35);width:214px;padding:6px var(--space-3);font-size:11px}
.task-page .tk-merx__hero-media .tk-spec__row{padding-block:5px}

/* 2. Resposta citável -------------------------------------------------- */
.task-page .tk-merx__answer p{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);
  max-width:900px;margin-inline:auto;color:var(--white)}
.task-page .tk-merx__answer b{color:var(--white)}

/* 3. Quatro coisas em uma plataforma ----------------------------------- */
.task-page .tk-merx__features{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-merx__features-pair{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid);
  max-width:848px;margin-inline:auto;width:100%}
.task-page .tk-merx__feature{border-radius:var(--radius-lg);padding:var(--card-pad-lg);
  display:flex;flex-direction:column;gap:var(--space-4)}
.task-page .tk-merx__feature-ico{flex:none;width:40px;height:40px;
  border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center}
.task-page .tk-merx__feature-ico .tk-i{width:20px;height:20px}
.task-page .tk-merx__feature h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-merx__feature p{font-size:var(--fs-body-sm);line-height:var(--lh-normal)}

.task-page .tk-merx__feature--white{background:var(--white);border:1px solid var(--border-subtle)}
.task-page .tk-merx__feature--white h3{color:var(--text-heading)}
.task-page .tk-merx__feature--white p{color:var(--text-body)}
.task-page .tk-merx__feature--white .tk-merx__feature-ico{background:var(--blue-100)}
.task-page .tk-merx__feature--white .tk-i{color:var(--blue-500)}

.task-page .tk-merx__feature--brand{background:var(--surface-brand)}
.task-page .tk-merx__feature--brand h3,.task-page .tk-merx__feature--brand p{color:var(--white)}
.task-page .tk-merx__feature--brand .tk-merx__feature-ico{background:var(--white)}
.task-page .tk-merx__feature--brand .tk-i{color:var(--surface-brand)}

.task-page .tk-merx__feature--accent{background:var(--surface-accent)}
.task-page .tk-merx__feature--accent h3,.task-page .tk-merx__feature--accent p{color:var(--white)}
.task-page .tk-merx__feature--accent .tk-merx__feature-ico{background:var(--white)}
.task-page .tk-merx__feature--accent .tk-i{color:var(--surface-accent)}

.task-page .tk-merx__feature--blue{background:var(--blue-100)}
.task-page .tk-merx__feature--blue h3{color:var(--text-heading)}
.task-page .tk-merx__feature--blue p{color:var(--text-body)}
.task-page .tk-merx__feature--blue .tk-merx__feature-ico{background:var(--white)}
.task-page .tk-merx__feature--blue .tk-i{color:var(--blue-500)}

.task-page .tk-merx__feature--soft{background:var(--surface-accent-soft)}
.task-page .tk-merx__feature--soft h3{color:var(--text-heading)}
.task-page .tk-merx__feature--soft p{color:var(--text-body)}
.task-page .tk-merx__feature--soft .tk-merx__feature-ico{background:var(--white)}
.task-page .tk-merx__feature--soft .tk-i{color:var(--red-500)}

/* 4. A plataforma por dentro ------------------------------------------- */
.task-page .tk-merx__screens{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-merx__shot{display:flex;flex-direction:column;gap:var(--space-3)}
.task-page .tk-merx__shot img{width:100%;height:auto;display:block;
  border-radius:var(--radius-lg);border:1px solid var(--border-subtle)}
.task-page .tk-merx__shot figcaption{font-size:var(--fs-caption);color:var(--text-muted)}
.task-page .tk-merx__shots-pair{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid)}

/* 5. Quanto custa ------------------------------------------------------ */
.task-page .tk-merx__pricing .tk-media-split{grid-template-columns:1.15fr 1fr}
.task-page .tk-merx__pricing .tk-media-split__media{min-height:420px}
.task-page .tk-merx__pricing h2{max-width:460px}
.task-page .tk-merx__pricing .tk-media-split__body>p:not(.tk-note){font-size:var(--fs-body-sm);
  line-height:var(--lh-relaxed);max-width:460px}
.task-page .tk-merx__pricing .tk-note{max-width:460px}

/* 6. De onde ele veio -------------------------------------------------- */
.task-page .tk-merx__origin .tk-media-split{grid-template-columns:1fr 1.15fr}
.task-page .tk-merx__origin .tk-media-split__media{min-height:400px;
  background:var(--surface-brand-deep)}
.task-page .tk-merx__origin h2{color:var(--white);max-width:460px}
.task-page .tk-merx__origin .tk-media-split__body>p{color:var(--white);
  font-size:var(--fs-body-sm);line-height:var(--lh-relaxed);max-width:460px}
.task-page .tk-merx__origin .tk-arrowlink{color:var(--white)}
.task-page .tk-merx__origin .tk-arrowlink:hover{color:var(--white)}

/* 7. Responsivo -------------------------------------------------------- */
@media (max-width:900px){
  .task-page .tk-merx__hero{padding-block:32px var(--section-y-tight)}
  .task-page .tk-merx__hero-grid{display:flex;flex-direction:column}
  .task-page .tk-merx__hero-media{padding-bottom:0;display:flex;flex-direction:column;gap:12px}
  .task-page .tk-merx__hero-media .tk-photo{aspect-ratio:4/3;width:100%}
  .task-page .tk-merx__hero-media .tk-spec{position:static;width:100%;box-shadow:none;
    border:1px solid var(--border-subtle);padding:4px 14px;font-size:13px}
  .task-page .tk-merx__features-pair,
  .task-page .tk-merx__shots-pair{grid-template-columns:1fr}
  .task-page .tk-merx__feature-ico{align-self:center}
  .task-page .tk-merx__pricing .tk-media-split,
  .task-page .tk-merx__origin .tk-media-split{grid-template-columns:1fr}
  .task-page .tk-merx__pricing .tk-media-split__body,
  .task-page .tk-merx__origin .tk-media-split__body{padding:var(--space-6)}
  .task-page .tk-merx__pricing .tk-media-split__media,
  .task-page .tk-merx__origin .tk-media-split__media{min-height:0}
  .task-page .tk-merx__shot figcaption{text-align:left}
}