@charset "UTF-8";
/* =========================================================================
   TASK INTERNET | /atendex
   Convertida de ui_kits/site/AtxParts.jsx (fonte de verdade).
   A tabela comparativa reusa o componente .tk-table do task-ds.css,
   com o destaque na coluna do meio em vez da última.
   Depende de task-ds.css. Escopo: .tk-atx
   ========================================================================= */

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

/* 2. Resposta citável -------------------------------------------------- */
.task-page .tk-atx__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-atx__answer b{color:var(--white)}

/* 3. O problema que ele resolve ---------------------------------------- */
.task-page .tk-atx__problem .tk-media-split{grid-template-columns:1.15fr 1fr}
.task-page .tk-atx__problem .tk-media-split__media{min-height:480px}
.task-page .tk-atx__problem h2{max-width:470px}
.task-page .tk-atx__problem .tk-media-split__body>p{font-size:var(--fs-body-sm);
  line-height:var(--lh-relaxed);max-width:460px}
.task-page .tk-atx__eyebrow{color:var(--text-accent);font-size:var(--fs-label);
  font-weight:var(--fw-semibold)}
.task-page .tk-atx__list{display:flex;flex-direction:column;gap:var(--space-3)}

/* 4. Planos ------------------------------------------------------------ */
.task-page .tk-atx__plans{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-atx__plan{border-radius:var(--radius-lg);padding:var(--card-pad-lg);
  display:flex;flex-direction:column;gap:var(--space-5)}
.task-page .tk-atx__plan h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.task-page .tk-atx__plan-price{display:flex;align-items:baseline;gap:var(--space-2)}
.task-page .tk-atx__plan-price b{font-size:var(--fs-h3);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight)}
.task-page .tk-atx__plan-price span{font-size:var(--fs-caption)}
.task-page .tk-atx__plan-desc{font-size:var(--fs-body-sm);
  line-height:var(--lh-normal);flex:1}
.task-page .tk-atx__plan--white{background:var(--white);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}
.task-page .tk-atx__plan--white h3,.task-page .tk-atx__plan--white .tk-atx__plan-price b{color:var(--text-heading)}
.task-page .tk-atx__plan--white .tk-atx__plan-price span,
.task-page .tk-atx__plan--white .tk-atx__plan-desc{color:var(--text-body)}
.task-page .tk-atx__plan--brand{background:var(--surface-brand)}
.task-page .tk-atx__plan--brand h3,.task-page .tk-atx__plan--brand .tk-atx__plan-price b,
.task-page .tk-atx__plan--brand .tk-atx__plan-price span,
.task-page .tk-atx__plan--brand .tk-atx__plan-desc{color:var(--white)}
.task-page .tk-atx__plan--accent{background:var(--surface-accent)}
.task-page .tk-atx__plan--accent h3,.task-page .tk-atx__plan--accent .tk-atx__plan-price b,
.task-page .tk-atx__plan--accent .tk-atx__plan-price span,
.task-page .tk-atx__plan--accent .tk-atx__plan-desc{color:var(--white)}
.task-page .tk-atx__plans .tk-actions{justify-content:center}

/* Tabela: a primeira coluna de plano perde o topo arredondado do componente,
   porque aqui o destaque está na segunda. Nada mais muda. */
.task-page .tk-atx .tk-table{min-width:620px}

/* 5. O que faz sair do Básico ------------------------------------------ */
.task-page .tk-atx__upgrade{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-atx__card{border-radius:var(--radius-lg);padding:var(--card-pad-lg);
  display:flex;flex-direction:column;gap:var(--space-3)}
.task-page .tk-atx__card h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-atx__card p{font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-atx__card--soft{background:var(--white-a16)}
.task-page .tk-atx__card--soft h3{color:var(--white)}
.task-page .tk-atx__card--soft p{color:var(--text-on-brand-muted)}
.task-page .tk-atx__card--deep{background:var(--surface-brand-deep)}
.task-page .tk-atx__card--deep h3{color:var(--white)}
.task-page .tk-atx__card--deep p{color:var(--text-on-brand-muted)}
.task-page .tk-atx__card--light{background:var(--white)}
.task-page .tk-atx__card--light h3{color:var(--text-heading)}
.task-page .tk-atx__card--light p{color:var(--text-body)}
.task-page .tk-atx__upgrade .tk-actions{justify-content:center;gap:var(--space-6)}

/* 6. De onde ele veio -------------------------------------------------- */
.task-page .tk-atx__origin .tk-media-split{grid-template-columns:1fr 1.15fr}
.task-page .tk-atx__origin .tk-media-split__media{min-height:400px;
  background:var(--surface-brand-deep)}
.task-page .tk-atx__origin h2{color:var(--white);max-width:460px}
.task-page .tk-atx__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-atx__origin .tk-actions{gap:var(--space-6);align-items:center}
.task-page .tk-atx__origin .tk-arrowlink{color:var(--white)}
.task-page .tk-atx__origin .tk-arrowlink:hover{color:var(--white)}

/* 7. Responsivo -------------------------------------------------------- */
@media (max-width:900px){
  .task-page .tk-atx__hero{padding-block:32px var(--section-y-tight)}
  .task-page .tk-atx__hero-grid{display:flex;flex-direction:column}
  .task-page .tk-atx__hero-media{padding-bottom:0;display:flex;flex-direction:column;gap:12px}
  .task-page .tk-atx__hero-media .tk-photo{aspect-ratio:4/3;width:100%}
  .task-page .tk-atx__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-atx__problem .tk-media-split,
  .task-page .tk-atx__origin .tk-media-split{grid-template-columns:1fr}
  .task-page .tk-atx__problem .tk-media-split__body,
  .task-page .tk-atx__origin .tk-media-split__body{padding:var(--space-6)}
  .task-page .tk-atx__problem .tk-media-split__media,
  .task-page .tk-atx__origin .tk-media-split__media{min-height:0}
  .task-page .tk-atx__eyebrow{text-align:center}
  .task-page .tk-atx__plan-price{justify-content:center}
}