@charset "UTF-8";
/* =========================================================================
   TASK INTERNET | /email-corporativo
   Layout específico da página. Depende de task-ds.css.
   Convertida de ui_kits/site/ (fonte de verdade do design system).
   Escopo: .tk-mail
   ========================================================================= */

/* 1. Dobra ------------------------------------------------------------- */
.task-page .tk-mail__hero{padding-block:72px var(--section-y-tight)}
.task-page .tk-mail__hero-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-16);align-items:center}
/* Item de grade nao encolhe abaixo do proprio min-content sem isto,
   e a linha estoura a largura da tela. */
.task-page .tk-mail__hero-grid>*,
.task-page .tk-mail__included-head>*,
.task-page .tk-mail__migration-head>*{min-width:0}
.task-page .tk-mail__hero-body{display:flex;flex-direction:column;gap:var(--space-6)}
.task-page .tk-mail__lead{font-size:var(--fs-body-sm);line-height:var(--lh-normal);max-width:480px}
.task-page .tk-mail__hero-media{position:relative;padding-bottom:var(--space-16)}
.task-page .tk-mail__hero-media .tk-spec{position:absolute;right:var(--space-6);bottom:0;width:340px}

/* 2. O que vem em todos os planos -------------------------------------- */
.task-page .tk-mail__included{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-mail__included-head{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-16);align-items:flex-start}
.task-page .tk-mail__definition{color:var(--white);font-size:var(--fs-body-sm);
  line-height:var(--lh-relaxed)}

/* 3. Planos ------------------------------------------------------------ */
.task-page .tk-mail__plans{display:flex;flex-direction:column;gap:var(--space-12)}
.task-page .tk-mail__plans .tk-plan__cycle{margin-bottom:0}

/* 4. Por que sair do gratuito ------------------------------------------ */
.task-page .tk-mail__why .tk-media-split{grid-template-columns:1.1fr 1fr}
.task-page .tk-mail__why .tk-media-split__body{justify-content:flex-start}
.task-page .tk-mail__why .tk-media-split__media{min-height:380px}
.task-page .tk-mail__list{display:flex;flex-direction:column;gap:var(--space-3)}

/* 5. Migração ---------------------------------------------------------- */
.task-page .tk-mail__migration{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-mail__migration-head{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-16);align-items:center}
.task-page .tk-mail__migration-head h2{max-width:420px}
.task-page .tk-mail__migration-head .tk-note{max-width:420px}

/* 6. Merx e Novomail --------------------------------------------------- */
.task-page .tk-mail__products{display:flex;flex-direction:column;
  gap:var(--space-10);align-items:center}
.task-page .tk-mail__products .tk-grid2{width:100%}
.task-page .tk-mail__product{display:flex;flex-direction:column;gap:var(--space-5);
  border-radius:var(--radius-lg);padding:var(--card-pad-lg)}
.task-page .tk-mail__product--soft{background:var(--surface-brand-soft)}
.task-page .tk-mail__product--deep{background:var(--surface-brand-deep)}
.task-page .tk-mail__product-head{display:flex;align-items:center;
  gap:var(--space-3);color:var(--white)}
.task-page .tk-mail__product-head .tk-i{width:24px;height:24px}
.task-page .tk-mail__product h3{color:var(--white);font-size:var(--fs-h4);
  font-weight:var(--fw-semibold)}
.task-page .tk-mail__product p{color:var(--text-on-brand-muted);
  font-size:var(--fs-body-sm);line-height:var(--lh-normal);flex:1}
.task-page .tk-mail__products .tk-footnote{text-align:center}

/* 7. O que não faz ----------------------------------------------------- */
.task-page .tk-mail__limits{display:flex;flex-direction:column;gap:var(--space-12)}
.task-page .tk-mail__limit{display:flex;flex-direction:column;gap:var(--space-4);
  border-radius:var(--radius-lg);padding:var(--card-pad-lg)}
.task-page .tk-mail__limit h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-mail__limit p{font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-mail__limit--white{background:var(--white);
  border:1px solid var(--border-default);box-shadow:var(--shadow-sm)}
.task-page .tk-mail__limit--white h3{color:var(--text-heading)}
.task-page .tk-mail__limit--white p{color:var(--text-body)}
.task-page .tk-mail__limit--subtle{background:var(--surface-subtle)}
.task-page .tk-mail__limit--subtle h3{color:var(--text-heading)}
.task-page .tk-mail__limit--subtle p{color:var(--text-body)}
.task-page .tk-mail__limit--deep{background:var(--surface-brand-deep)}
.task-page .tk-mail__limit--deep h3{color:var(--white)}
.task-page .tk-mail__limit--deep p{color:var(--text-on-brand-muted)}

/* 8. Suporte ----------------------------------------------------------- */
.task-page .tk-mail__support .tk-media-split{grid-template-columns:1fr 1.2fr}
.task-page .tk-mail__support .tk-media-split__media{min-height:400px}
.task-page .tk-mail__channels{display:flex;flex-direction:column;gap:var(--space-5)}
.task-page .tk-mail__channel{display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--white);border-radius:var(--radius-md);padding:var(--space-5)}
.task-page .tk-mail__channel h3{color:var(--text-heading);font-size:var(--fs-h5);
  font-weight:var(--fw-semibold)}
.task-page .tk-mail__channel p{color:var(--text-body);font-size:var(--fs-body-sm);
  line-height:var(--lh-normal)}
.task-page .tk-mail__channel ul{list-style:disc;padding-left:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-1);color:var(--text-body);
  font-size:var(--fs-body-sm);line-height:var(--lh-normal)}

/* 9. Prova ------------------------------------------------------------- */
.task-page .tk-mail__proof-body{display:flex;flex-direction:column;gap:var(--space-8)}
.task-page .tk-mail__proof-body h2{color:var(--white);font-size:var(--fs-h1);max-width:440px}
.task-page .tk-mail__proof-body h2 span{color:var(--text-on-brand-accent)}
.task-page .tk-mail__proof-body>p{color:var(--text-on-brand-muted);
  font-size:var(--fs-body-sm);line-height:var(--lh-relaxed);max-width:440px}
.task-page .tk-mail__proof-body p b{color:var(--white)}
.task-page .tk-mail__proof-aside{display:flex;flex-direction:column;gap:var(--gap-grid)}
.task-page .tk-mail__proof-aside .tk-photo{border:1px solid var(--border-on-brand)}

/* 10. FAQ: resposta em azul-500 nesta página --------------------------- */
.task-page .tk-mail .tk-faq__a{color:var(--blue-500)}

/* 11. Fechamento ------------------------------------------------------- */
.task-page .tk-mail__close .tk-media-split{grid-template-columns:1.2fr 1fr}
.task-page .tk-mail__close .tk-media-split__media{min-height:340px;
  background:var(--surface-brand-deep)}
.task-page .tk-mail__close h2{color:var(--white);font-size:var(--fs-h1);max-width:480px}
.task-page .tk-mail__close h2 span{color:var(--text-on-brand-accent)}
.task-page .tk-mail__close p{color:var(--text-on-brand-muted);font-size:var(--fs-body-sm);
  line-height:var(--lh-normal);max-width:420px}

/* 12. Responsivo ------------------------------------------------------- */
@media (max-width:900px){
  .task-page .tk-mail__hero{padding-block:32px var(--section-y-tight)}
  .task-page .tk-mail__hero-grid{display:flex;flex-direction:column}
  .task-page .tk-mail__hero-media{padding-bottom:0;display:flex;
    flex-direction:column;gap:12px}
  .task-page .tk-mail__hero-media .tk-photo{aspect-ratio:4/3;width:100%}
  .task-page .tk-mail__hero-media .tk-spec{position:static;width:100%;
    box-shadow:none;border:1px solid var(--border-subtle);padding:4px 14px}
  .task-page .tk-mail__included-head,
  .task-page .tk-mail__migration-head,
  .task-page .tk-mail__why .tk-media-split,
  .task-page .tk-mail__support .tk-media-split,
  .task-page .tk-mail__close .tk-media-split{grid-template-columns:1fr}

  .task-page .tk-mail__why .tk-media-split__body,
  .task-page .tk-mail__support .tk-media-split__body,
  .task-page .tk-mail__close .tk-media-split__body{padding:var(--space-6)}
  .task-page .tk-mail__why .tk-media-split__media,
  .task-page .tk-mail__support .tk-media-split__media{min-height:0}
  .task-page .tk-mail__channel{text-align:center}
  .task-page .tk-mail__channel p{text-align:center}
  .task-page .tk-mail__channel ul{list-style-position:inside;padding-left:0;text-align:center}
  .task-page .tk-mail__channel .tk-btn{align-self:center}
  .task-page .tk-mail__proof-body{text-align:center}
  .task-page .tk-mail__proof-body>p{text-align:left}
}