@charset "UTF-8";
/* =========================================================================
   TASK INTERNET | /hospedagem-de-site - v2.1
   Layout específico da página. Depende de task-ds.css.
   Escopo: .tk-hosp — nada vaza para header/rodapé Elementor nem para outras páginas.
   ========================================================================= */

/* 1. Dobra ------------------------------------------------------------- */
.task-page .tk-hosp__hero{padding-block:72px var(--section-y-tight)}
.task-page .tk-hosp__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-hosp__hero-grid>*,
.task-page .tk-hosp__migration-head>*,
.task-page .tk-hosp__addons-list>*{min-width:0}
.task-page .tk-hosp__hero-body{display:flex;flex-direction:column;gap:var(--space-6)}
.task-page .tk-hosp__hero-body h1 b{font-weight:var(--fw-bold)}
.task-page .tk-hosp__hero-body h1 span{font-weight:var(--fw-regular)}
.task-page .tk-hosp__lead{font-size:var(--fs-body-sm);line-height:var(--lh-normal);max-width:480px}
.task-page .tk-hosp__hero-media{position:relative;padding-bottom:var(--space-12)}
.task-page .tk-hosp__hero-media .tk-spec{position:absolute;right:var(--space-6);
  bottom:calc(var(--space-12) * -0.5);width:224px;padding:6px var(--space-4);font-size:11px}
.task-page .tk-hosp__hero-media .tk-spec__row{padding-block:5px}

/* 2. Resposta citável -------------------------------------------------- */
.task-page .tk-hosp__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-hosp__answer b{color:var(--white);font-weight:var(--fw-semibold)}

/* 3. Planos ------------------------------------------------------------ */
.task-page .tk-hosp__plans{display:flex;flex-direction:column;gap:var(--space-12)}

/* 4. Em todos os planos ------------------------------------------------ */
.task-page .tk-hosp__included{display:flex;flex-direction:column;gap:var(--space-10)}

/* 5. Ilimitado --------------------------------------------------------- */
.task-page .tk-hosp__unlimited .tk-media-split{grid-template-columns:1.15fr 1fr}
.task-page .tk-hosp__unlimited .tk-media-split__body{padding:var(--space-12);justify-content:flex-start}
.task-page .tk-hosp__unlimited .tk-media-split__media{min-height:460px}
.task-page .tk-hosp__rules{display:flex;flex-direction:column;gap:var(--space-3)}
.task-page .tk-hosp__rules-title{color:var(--text-heading);font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-hosp__unlimited .tk-media-split__body>p:first-of-type{color:var(--blue-800)}
.task-page .tk-hosp__unlimited .tk-row{justify-content:flex-start;gap:var(--space-8)}

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

/* 7. Especificações ---------------------------------------------------- */
.task-page .tk-hosp__specs{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-hosp__specs-pair{width:calc(66.666% - var(--gap-grid) / 3);margin-inline:auto}
.task-page .tk-spec-card{display:flex;flex-direction:column;gap:var(--space-4);
  border-radius:var(--radius-lg);padding:var(--card-pad-lg);background:var(--white-a16)}
.task-page .tk-spec-card:nth-child(even){background:var(--surface-brand-deep)}
.task-page .tk-spec-card .tk-i{width:24px;height:24px;color:var(--white)}
.task-page .tk-spec-card h3{color:var(--white);font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-spec-card p{color:var(--text-on-brand-muted);font-size:var(--fs-body-sm);line-height:var(--lh-normal)}

/* 8. Adicionais -------------------------------------------------------- */
.task-page .tk-hosp__addons{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-hosp__addons-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.task-page .tk-hosp__addon{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.task-page .tk-hosp__addon:nth-child(even){background:var(--surface-subtle);border-color:transparent}
.task-page .tk-hosp__addon dt{color:var(--text-body-strong);font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-hosp__addon dd{display:flex;align-items:baseline;gap:4px;flex:none}
.task-page .tk-hosp__addon dd b{color:var(--red-500);font-size:var(--fs-h5);font-weight:var(--fw-bold)}
.task-page .tk-hosp__addon dd span{color:var(--text-body);font-size:var(--fs-caption)}

/* 9. Quando não é o certo ---------------------------------------------- */
.task-page .tk-hosp__notfor{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-hosp__case{display:flex;flex-direction:column;gap:var(--space-4);
  border-radius:var(--radius-lg);padding:var(--card-pad-lg)}
.task-page .tk-hosp__case h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-hosp__case p{font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-hosp__case--soft{background:var(--white-a16)}
.task-page .tk-hosp__case--soft h3{color:var(--white)}
.task-page .tk-hosp__case--soft p{color:var(--text-on-brand-muted)}
.task-page .tk-hosp__case--deep{background:var(--surface-brand-deep)}
.task-page .tk-hosp__case--deep h3{color:var(--white)}
.task-page .tk-hosp__case--deep p{color:var(--text-on-brand-muted)}
.task-page .tk-hosp__case--light{background:var(--white)}
.task-page .tk-hosp__case--light h3{color:var(--text-heading)}
.task-page .tk-hosp__case--light p{color:var(--text-body)}
.task-page .tk-hosp__notfor .tk-actions{justify-content:center;gap:var(--space-6)}

/* 10. Suporte ---------------------------------------------------------- */
.task-page .tk-hosp__support .tk-media-split{grid-template-columns:1fr 1.2fr}
.task-page .tk-hosp__support .tk-media-split__media{min-height:420px}
.task-page .tk-hosp__channels{display:flex;flex-direction:column;gap:var(--space-5)}
.task-page .tk-hosp__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-hosp__channel h3{color:var(--text-heading);font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-hosp__channel p{color:var(--text-body);font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-hosp__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)}
.task-page .tk-hosp__support .tk-row{justify-content:flex-start;gap:var(--space-8)}

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

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

/* 13. Faixas azuis: cor do texto padrão -------------------------------- */
/* Regra removida na v1.1: pintava de branco tambem o h3 do card claro da secao
   "Quando o plano compartilhado nao e o certo", deixando titulo branco sobre fundo branco.
   Cada bloco sobre faixa azul ja define a propria cor de titulo. */

/* 14. Responsivo ------------------------------------------------------- */
@media (max-width:900px){
  .task-page .tk-hosp__hero{padding-block:32px var(--section-y-tight)}
  .task-page .tk-hosp__hero-grid{display:flex;flex-direction:column}
  .task-page .tk-hosp__hero-media{padding-bottom:0;display:flex;flex-direction:column;gap:12px}
  .task-page .tk-hosp__hero-media .tk-photo{aspect-ratio:4/3;width:100%}
  .task-page .tk-hosp__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-hosp__migration-head,.task-page .tk-hosp__addons-list,.task-page .tk-hosp__unlimited .tk-media-split,.task-page .tk-hosp__support .tk-media-split,.task-page .tk-hosp__close .tk-media-split{grid-template-columns:1fr}
  .task-page .tk-hosp__notfor .tk-actions{justify-content:stretch}
  .task-page .tk-hosp__addon{gap:var(--space-4)}

  /* Padding interno dos blocos flutuantes: as regras de pagina tem 3 classes
     e sobrepunham o padding mobile do task-ds.css. */
  .task-page .tk-hosp__unlimited .tk-media-split__body,
  .task-page .tk-hosp__support .tk-media-split__body,
  .task-page .tk-hosp__close .tk-media-split__body{padding:var(--space-6)}
  .task-page .tk-hosp__unlimited .tk-media-split__media,
  .task-page .tk-hosp__support .tk-media-split__media,
  .task-page .tk-hosp__close .tk-media-split__media{min-height:0}

  /* Regras do "Ilimitado": marcador a esquerda, texto centralizado */
  .task-page .tk-hosp__rules-title{text-align:center}
  .task-page .tk-hosp__unlimited .tk-row{flex-direction:column;align-items:center}

  /* Canais de suporte: titulo, horario e botao centralizados */
  .task-page .tk-hosp__channel{text-align:center}
  .task-page .tk-hosp__channel p{text-align:center}
  .task-page .tk-hosp__channel ul{list-style-position:inside;padding-left:0;
    text-align:center}
  .task-page .tk-hosp__channel .tk-btn{align-self:center}
  .task-page .tk-hosp__support .tk-row{flex-direction:column;align-items:center}

  /* Prova: titulo centralizado, paragrafo a esquerda */
  .task-page .tk-hosp__proof-body{text-align:center}
  .task-page .tk-hosp__proof-body>p{text-align:left}
}