/* ==========================================================================
   Secoes escuras: "Plantao 24h" (relogio) e "Faca a conta" (calculadora)
   ========================================================================== */
/* a SECAO inteira e escura (de ponta a ponta), nao um cartao dentro da pagina clara */
#plantao, #calculadora {
  position: relative; isolation: isolate; background: #0a0d09; color: #eef2e8;
  padding-block: clamp(40px, 5vw, 68px);
}
#plantao::before, #calculadora::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 420px at 100% 0%, rgba(196, 255, 0, .12), transparent 70%),
    radial-gradient(620px 420px at 0% 100%, rgba(196, 255, 0, .07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 56px 100%;
}
#plantao::after, #calculadora::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(196, 255, 0, .45), transparent);
}
.dk-panel { position: relative; }
.dk-panel h2 { color: #fff; font-size: clamp(26px, 3.3vw, 40px); line-height: 1.06; }
.dk-panel .eyebrow { margin-bottom: 12px; }
.dk-panel > * p, .dk-panel p { color: #a9b4a3; }
.dk-note { font-size: 12.5px !important; color: #7f8a7a !important; margin: 0; }

/* ---------- PLANTAO 24H ---------- */
.plt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.plt-copy p.plt-lead { font-size: clamp(15px, 1.35vw, 16.5px); line-height: 1.55; margin: 12px 0 18px; max-width: 46ch; }
.plt-toggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: #161a14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.plt-toggle button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 8px 15px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 12.5px;
  background: transparent; color: #a9b4a3; transition: background .25s, color .25s;
}
.plt-toggle button.on { background: #C4FF00; color: #101300; }
.plt-toggle button[data-mode="sem"].on { background: #f2f5ee; }
.plt-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px clamp(18px, 3vw, 40px); margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.plt-stats dt { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #7f8a7a; font-weight: 700; margin: 0 0 6px; }
.plt-stats dd { margin: 0; white-space: nowrap; font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; transition: color .3s; }
.plt[data-mode="sem"] .plt-stats dd.bad { color: #ff6a5e; }
.plt[data-mode="com"] .plt-stats dd.good { color: #C4FF00; }
.plt-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12.5px; color: #a9b4a3; }
.plt-legend li { display: inline-flex; align-items: center; gap: 7px; }
.plt-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.plt-dial { position: relative; width: 100%; max-width: 460px; justify-self: center; container-type: inline-size; touch-action: pan-y; cursor: crosshair; outline: none; }
.plt-dial:focus-visible { box-shadow: 0 0 0 3px #fff; border-radius: 50%; }
.plt-dial svg { width: 100%; height: auto; display: block; overflow: visible; }
.plt-dial .track { fill: none; stroke: #171b15; stroke-width: 30; }
.plt-dial .arc { fill: none; stroke-width: 30; transition: opacity .5s ease; }
.plt-dial .arc-ia { stroke: #C4FF00; opacity: 1; }
.plt-dial .arc-eq { stroke: #7FA300; opacity: 1; }
.plt-dial .arc-gap { stroke: #ef4444; opacity: 0; }
.plt-dial[data-mode="sem"] .arc-ia { opacity: 0; }
.plt-dial[data-mode="sem"] .arc-gap { opacity: 1; }
.plt-dial .tick { stroke: #3a4136; stroke-width: 1.4; }
.plt-dial .tick.major { stroke: #7f8a7a; stroke-width: 2; }
.plt-dial .lbl { fill: #7f8a7a; font: 700 15px "Sora", sans-serif; text-anchor: middle; dominant-baseline: middle; }
.plt-dial .dot { transition: fill .5s ease, r .2s ease; }
.plt-dial .hand { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.plt-dial .hub { fill: #fff; }
.plt-dial .halo { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.plt-dial .period-wedge { stroke-linecap: butt; stroke-opacity: .85; transition: stroke .5s ease, stroke-opacity .5s ease; }
.plt-period { display: flex; align-items: center; justify-content: center; gap: .35em; transition: opacity .26s ease; }
.plt-period svg { width: 2.4cqw; height: 2.4cqw; min-width: 14px; min-height: 14px; overflow: visible; }
.plt-period span { font-family: "Sora", sans-serif; font-weight: 600; font-size: 2.4cqw; letter-spacing: .01em; }
.plt-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 26%; gap: 1cqw; }
.plt-time { font-family: "Sora", sans-serif; font-weight: 800; font-size: 13.5cqw; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.plt-line { font-size: 2.6cqw; line-height: 1.35; color: #a9b4a3; min-height: 7.2cqw; }
.plt-line b { color: #fff; font-weight: 700; }
.plt-line.bad b { color: #ff6a5e; }

/* ---------- CALCULADORA ---------- */
.calc-head { max-width: 520px; margin-bottom: 8px; }
.calc-head p { font-size: clamp(14.5px, 1.3vw, 16px); line-height: 1.55; margin: 10px 0 0; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.cr { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 6px; }
.cr:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cr-top label { color: #cbd4c5; font-size: 14px; font-weight: 600; }
.cr-top output { font-family: "Sora", sans-serif; font-weight: 800; font-size: 17px; color: #C4FF00; font-variant-numeric: tabular-nums; }
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer;
  --p: 50%;
}
.calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #C4FF00 var(--p), #262c23 var(--p)); }
.calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: #262c23; }
.calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: #C4FF00; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 5px solid #C4FF00; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.calc input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 5px solid #C4FF00; }
.calc input[type="range"]:focus-visible { outline: 3px solid rgba(196, 255, 0, .6); outline-offset: 4px; border-radius: 8px; }

.calc-out { border-radius: 26px; padding: clamp(20px, 2.4vw, 28px); background: linear-gradient(180deg, rgba(196, 255, 0, .09), rgba(196, 255, 0, .02)); box-shadow: inset 0 0 0 1px rgba(196, 255, 0, .28); }
.calc-big small { display: block; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: #a9b4a3; }
.calc-big b { display: block; font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -.04em; line-height: 1.02; color: #C4FF00; font-variant-numeric: tabular-nums; margin: 8px 0 6px; word-break: break-word; }
.calc-big em { font-style: normal; color: #a9b4a3; font-size: 14px; }
.calc-rows { list-style: none; padding: 0; margin: 14px 0 16px; }
.calc-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: #cbd4c5; }
.calc-rows li b { font-family: "Sora", sans-serif; color: #fff; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.calc-out .btn { width: 100%; }
.calc-out .dk-note { margin-top: 12px; }
.calc-out .btn { padding: 11px 22px; font-size: 14px; }

@media (max-width: 900px) {
  .plt, .calc-grid { grid-template-columns: 1fr; }
  .plt-dial { order: -1; max-width: 370px; }
  .plt-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .plt-stats dd { font-size: 22px; }
  .plt-toggle button { padding: 9px 12px; font-size: 12.5px; }
  .plt-center { padding: 22%; }
  .plt-line { font-size: 3cqw; }
}
@media (prefers-reduced-motion: reduce) { .plt-dial .arc, .plt-dial .dot, .plt-dial .period-wedge, .plt-period { transition: none; } }

/* ==========================================================================
   TECH PROVIDER META: prova de confianca logo apos a plataforma. Card com o
   selo (brilho azul radial) a esquerda, copy e beneficios a direita.
   ========================================================================== */
/* secao logo apos a plataforma: reduz o padding-top pra nao dobrar o
   respiro vertical entre secoes sem section-head (pedido do Felipe) */
.section-tight-top { padding-top: clamp(20px, 2.6vw, 36px); }

.mp-flow { display: grid; grid-template-columns: clamp(220px, 30vw, 420px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
#meta-provider { padding-bottom: clamp(24px, 3.5vw, 52px); }

/* selo solto, sem caixa: so o brilho azul radial atras e a flutuacao */
.mp-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.mp-glow {
  content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(64, 145, 255, .40), rgba(64, 145, 255, .12) 60%, transparent 75%);
  filter: blur(14px);
}
.mp-seal { width: clamp(200px, 28vw, 400px); max-width: 100%; height: auto; display: block; animation: mpFloat 5.5s ease-in-out infinite; }
@keyframes mpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.mp-card-label {
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  color: #eef2e8; background: rgba(255, 255, 255, .06); border: 1px solid #222b1d;
  padding: 7px 18px; border-radius: var(--radius-pill);
}

.mp-text h2 { color: #fff; font-size: clamp(24px, 3vw, 38px); line-height: 1.1; margin: 0 0 12px; }
.mp-text .mp-lead { color: var(--muted-2); font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.55; margin: 0 0 clamp(16px, 2vw, 22px); max-width: none; }

/* beneficios como cards 2x2, mesmo padrao visual dos outros cartoes do site */
.mp-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.2vw, 14px); margin: 0 0 clamp(16px, 2vw, 22px); }
.mp-benefit {
  background: #11150e; border: 1px solid #222b1d; border-radius: var(--radius);
  padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 18px); text-align: left;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start;
}
.mp-benefit .mp-ic { grid-row: span 2; }
.mp-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(196, 255, 0, .1); color: #C4FF00; display: grid; place-items: center;
}
.mp-ic svg { width: 19px; height: 19px; }
.mp-benefit h3 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(13.5px, 1.1vw, 15px); color: #fff; margin: 2px 0 0; letter-spacing: -.01em; }
.mp-benefit p { font-size: clamp(12.5px, 1vw, 13.5px); color: var(--muted-2); line-height: 1.45; margin: 0; }

.mp-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-pill {
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
  color: #C4FF00; background: rgba(196, 255, 0, .08); border: 1px solid rgba(196, 255, 0, .25);
  padding: 7px 14px; border-radius: var(--radius-pill);
}

@media (max-width: 900px) {
  .mp-flow { grid-template-columns: 1fr; text-align: center; }
  .mp-card { max-width: 320px; margin: 0 auto; }
  .mp-seal { width: min(300px, 80vw); margin: 0 auto; }
  .mp-text .mp-lead { margin-inline: auto; max-width: 60ch; }
  .mp-benefits { grid-template-columns: 1fr; }
  .mp-pills { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mp-seal { animation: none; } }