@charset "UTF-8";
/* =========================================================================
   TASK INTERNET | /servidor-vps
   Convertida de ui_kits/site/VpsParts.jsx (fonte de verdade).
   Depende de task-ds.css. Escopo: .tk-vps
   ========================================================================= */

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

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

/* 3. Monte a configuração ---------------------------------------------- */
.task-page .tk-vps__builder{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-vps__os{display:inline-flex;gap:var(--space-1);background:var(--surface-subtle);
  border-radius:var(--radius-pill);padding:var(--space-1);margin-inline:auto}
.task-page .tk-vps__os-btn{border:none;cursor:pointer;font-family:inherit;
  font-size:var(--fs-label);font-weight:var(--fw-semibold);padding:10px 24px;
  border-radius:var(--radius-pill);background:transparent;color:var(--text-body);
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.task-page .tk-vps__os-btn[aria-selected="true"]{background:var(--surface-brand);color:var(--white)}

.task-page .tk-vps__step{border-radius:var(--radius-lg);padding:var(--card-pad-lg);
  display:flex;flex-direction:column;gap:var(--space-4)}
.task-page .tk-vps__step-num{flex:none;width:36px;height:36px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-label);font-weight:var(--fw-bold)}
.task-page .tk-vps__step h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-vps__step p{font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-vps__step--white{background:var(--white);border:1px solid var(--border-subtle)}
.task-page .tk-vps__step--white .tk-vps__step-num{background:var(--surface-brand);color:var(--white)}
.task-page .tk-vps__step--white h3{color:var(--text-heading)}
.task-page .tk-vps__step--white p{color:var(--text-body)}
.task-page .tk-vps__step--brand{background:var(--surface-brand)}
.task-page .tk-vps__step--brand .tk-vps__step-num{background:var(--white);color:var(--surface-brand)}
.task-page .tk-vps__step--brand h3,.task-page .tk-vps__step--brand p{color:var(--white)}
.task-page .tk-vps__step--accent{background:var(--surface-accent)}
.task-page .tk-vps__step--accent .tk-vps__step-num{background:var(--white);color:var(--surface-accent)}
.task-page .tk-vps__step--accent h3,.task-page .tk-vps__step--accent p{color:var(--white)}
.task-page .tk-vps__builder .tk-note{max-width:560px}

/* 4. Três sinais ------------------------------------------------------- */
.task-page .tk-vps__signals{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-vps__card{border-radius:var(--radius-lg);padding:var(--card-pad-lg);
  display:flex;flex-direction:column;gap:var(--space-3)}
.task-page .tk-vps__card h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-vps__card p{font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-vps__card--soft{background:var(--white-a16)}
.task-page .tk-vps__card--soft h3{color:var(--white)}
.task-page .tk-vps__card--soft p{color:var(--text-on-brand-muted)}
.task-page .tk-vps__card--deep{background:var(--surface-brand-deep)}
.task-page .tk-vps__card--deep h3{color:var(--white)}
.task-page .tk-vps__card--deep p{color:var(--text-on-brand-muted)}
.task-page .tk-vps__card--light{background:var(--white)}
.task-page .tk-vps__card--light h3{color:var(--text-heading)}
.task-page .tk-vps__card--light p{color:var(--text-body)}
.task-page .tk-vps__card--white{background:var(--white);border:1px solid var(--border-subtle)}
.task-page .tk-vps__card--white h3{color:var(--text-heading)}
.task-page .tk-vps__card--white p{color:var(--text-body)}
.task-page .tk-vps__card--brand{background:var(--surface-brand)}
.task-page .tk-vps__card--brand h3,.task-page .tk-vps__card--brand p{color:var(--white)}
.task-page .tk-vps__card--accent{background:var(--surface-accent)}
.task-page .tk-vps__card--accent h3,.task-page .tk-vps__card--accent p{color:var(--white)}
.task-page .tk-vps__center{display:flex;justify-content:center}

/* 5. Serviços que acompanham ------------------------------------------- */
.task-page .tk-vps__included .tk-media-split{grid-template-columns:1.25fr 1fr}
.task-page .tk-vps__included .tk-media-split__body{justify-content:flex-start}
.task-page .tk-vps__included .tk-media-split__media{min-height:460px}
.task-page .tk-vps__services{display:flex;flex-direction:column;gap:var(--space-4)}
.task-page .tk-vps__service{border-radius:var(--radius-md);padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-2)}
.task-page .tk-vps__service h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.task-page .tk-vps__service p{font-size:var(--fs-body-sm);line-height:var(--lh-normal)}
.task-page .tk-vps__service--white{background:var(--white);border:1px solid var(--border-subtle)}
.task-page .tk-vps__service--white h3{color:var(--text-heading)}
.task-page .tk-vps__service--white p{color:var(--text-body)}
.task-page .tk-vps__service--brand{background:var(--surface-brand)}
.task-page .tk-vps__service--brand h3,.task-page .tk-vps__service--brand p{color:var(--white)}
.task-page .tk-vps__service--accent{background:var(--surface-accent)}
.task-page .tk-vps__service--accent h3,.task-page .tk-vps__service--accent p{color:var(--white)}

/* 6. VPS ou dedicado --------------------------------------------------- */
.task-page .tk-vps__versus .tk-media-split{grid-template-columns:1.15fr 1fr}
.task-page .tk-vps__versus .tk-media-split__media{min-height:380px;
  background:var(--surface-brand-deep)}
.task-page .tk-vps__versus h2{color:var(--white);max-width:420px}
.task-page .tk-vps__versus p{color:var(--white);font-size:var(--fs-body-sm);
  line-height:var(--lh-relaxed);max-width:460px}

/* 7. Quando não é a resposta ------------------------------------------- */
.task-page .tk-vps__notfor{display:flex;flex-direction:column;gap:var(--space-10)}
.task-page .tk-vps__notfor .tk-note{max-width:560px}

/* 8. Prova ------------------------------------------------------------- */
.task-page .tk-vps__proof{display:flex;flex-direction:column;gap:var(--space-12)}
.task-page .tk-vps__proof-body{display:flex;flex-direction:column;gap:var(--space-6)}
.task-page .tk-vps__proof-body h2{color:var(--white);max-width:460px}
.task-page .tk-vps__proof-body>p{color:var(--white);font-size:var(--fs-body-sm);
  line-height:var(--lh-relaxed);max-width:460px}

/* 9. Responsivo -------------------------------------------------------- */
@media (max-width:900px){
  .task-page .tk-vps__hero{padding-block:32px var(--section-y-tight)}
  .task-page .tk-vps__hero-grid{display:flex;flex-direction:column}
  .task-page .tk-vps__hero-media{padding-bottom:0;display:flex;flex-direction:column;gap:12px}
  .task-page .tk-vps__hero-media .tk-photo{aspect-ratio:4/3;width:100%}
  .task-page .tk-vps__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-vps__os{display:flex;width:100%}
  .task-page .tk-vps__os-btn{flex:1 1 0;padding-inline:8px}
  .task-page .tk-vps__included .tk-media-split,
  .task-page .tk-vps__versus .tk-media-split{grid-template-columns:1fr}
  .task-page .tk-vps__included .tk-media-split__body,
  .task-page .tk-vps__versus .tk-media-split__body{padding:var(--space-6)}
  .task-page .tk-vps__included .tk-media-split__media,
  .task-page .tk-vps__versus .tk-media-split__media{min-height:0}
  .task-page .tk-vps__service{text-align:left}
  .task-page .tk-vps__step-num{align-self:center}
}