/* =====================================================================
   TUDO CONSTA — tema manutenção / confiança (laranja + grafite)
   ===================================================================== */
:root {
  --font-head: "Sora", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --brand: #f5921e;            /* laranja */
  --brand-2: #ff7a00;
  --accent: #f5921e;
  --graphite: #3a3d42;
  --ink: #2c2f34;
  --ink-strong: #1c1e22;
  --muted: #6a6f78;
  --bg: #ffffff;
  --bg-soft: #fbf6ef;
  --bg-deep: #23262b;
  --line: #ece7df;
  --card: #ffffff;
  --logo-h: 50px;
}

.eyebrow { color: #b96a00; background: color-mix(in srgb, var(--brand) 16%, transparent); }
.btn { --b: var(--brand); }

/* ----- Hero ----- */
.hero-tudo {
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(245,146,30,.16), transparent 60%),
    linear-gradient(160deg, #fffaf2 0%, #fdeed8 100%);
  color: var(--ink-strong);
  padding-block: clamp(130px, 18vw, 210px) clamp(70px, 10vw, 120px);
}
.hero-tudo h1 { color: var(--ink-strong); }
.hero-tudo h1 .hl { color: var(--brand); }
.hero-tudo .lead { color: #5a5147; }
.hero-tudo__media img { border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(58,61,66,.4); }

/* badge de confiança */
.trust-pill { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px 8px 8px; box-shadow: var(--shadow-sm); font-weight: 700; font-family: var(--font-head); color: var(--ink-strong); font-size: .92rem; }
.trust-pill .ic { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); display: grid; place-items: center; }
.trust-pill .stars { color: var(--brand); letter-spacing: 2px; }

/* float card */
.float-card { position: absolute; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 18px 40px -18px rgba(58,61,66,.4); display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink-strong); font-family: var(--font-head); animation: bob 4s ease-in-out infinite; }
.float-card small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; }
.float-card .dot { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); display: grid; place-items: center; }
.float-card--1 { top: 22px; right: -20px; }
.float-card--2 { bottom: 26px; left: -20px; animation-delay: 1.4s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ----- serviços ----- */
.service-td { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px,3vw,32px); position: relative; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.service-td .icon-badge { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 12px 24px -10px var(--brand); }
.service-td h3 { font-size: 1.2rem; margin-bottom: 8px; }
.service-td p { color: var(--muted); }
.service-td ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.service-td ul li { font-size: .8rem; font-weight: 600; color: #b96a00; background: color-mix(in srgb, var(--brand) 12%, transparent); padding: .35em .75em; border-radius: 100px; }
.service-td:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }

/* ----- por que (graphite) ----- */
.why { background: var(--bg-deep); color: #d9dde2; }
.why h2, .why h3, .why h4 { color: #fff; }
.why-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 28px; transition: transform .3s ease, background .3s ease; }
.why-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.07); }
.why-card .icon-badge { background: var(--brand); color: #fff; }
.why-card p { color: #aeb4bd; }

/* ----- processo (linha laranja) ----- */
.proc { position: relative; }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.proc-grid::before { content: ""; position: absolute; left: 8%; right: 8%; top: 32px; height: 3px; background: repeating-linear-gradient(90deg, var(--brand) 0 16px, transparent 16px 28px); opacity: .5; }
.pstep { text-align: center; position: relative; }
.pstep__n { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 2px solid var(--brand); color: var(--brand); font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; box-shadow: var(--shadow-sm); position: relative; z-index: 2; transition: background .3s ease, color .3s ease, transform .3s ease; }
.pstep:hover .pstep__n { background: var(--brand); color: #fff; transform: translateY(-4px); }
.pstep h4 { margin-bottom: 6px; }
.pstep p { color: var(--muted); }

/* check list */
.check-list { display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .ck { flex: none; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); display: grid; place-items: center; margin-top: 2px; }

/* CTA */
.cta-tudo { background: linear-gradient(120deg, #2a2d33, #1c1e22); }
.cta-tudo::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px; border-radius: 30px; background: radial-gradient(circle, rgba(245,146,30,.3), transparent 70%); }

.section--soft { background: var(--bg-soft); }

@media (max-width: 760px) {
  .proc-grid { grid-template-columns: 1fr; }
  .proc-grid::before { display: none; }
  .float-card--1, .float-card--2 { display: none; }
  .hero-tudo__media { margin-top: 32px; }
}

@media (max-width: 520px) {
  .hero-tudo { padding-top: 90px; }
  .why-card { padding: 20px; }
}