/* ===========================================================================
   VALIORO — site v2 layer. Loads AFTER valioro.css and only adds the
   components the simplified site introduces: the numbers band, service
   cards, the horizontal solutions scroller, the two free tools (readiness
   check + valuation calculator), the video block, the trust strip, the
   compact case cards and the floating WhatsApp button.
   Brand tokens come from valioro.css (:root) and tw-config.js.
   =========================================================================== */

/* ---- Numbers band ------------------------------------------------------- */
.stat { padding: 16px 0; }
@media (min-width: 640px) {
  .stat { padding: 8px 32px; }
  .stat + .stat { border-top: 0; border-left: 1px solid var(--cream-300); }
  .stat:first-child { padding-left: 0; }
}
/* Lining figures on purpose: Cormorant's default old-style numerals put the
   digits at x-height, drop the 5 below the line and let K and M tower over
   them ("R$ 250K a 100M" looked broken, Arno 2026-09-20). */
.stat-n { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(44px, 5vw, 64px);
  line-height: 1; letter-spacing: -0.03em; color: var(--night); white-space: nowrap;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* the deal range is the widest string in the band: one size down so it never grazes its column */
.stat-n--wide { font-size: clamp(38px, 4.2vw, 54px); }
.stat-n .u { font-size: .5em; font-style: italic; color: var(--gold-dark); margin: 0 4px; vertical-align: baseline; }
.stat-l { margin-top: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); line-height: 1.5; }

/* ---- Service cards (3) -------------------------------------------------- */
.svc { display: flex; flex-direction: column; gap: 18px; padding: 34px 32px 30px; border-radius: 10px;
  background: var(--cream-50); border: 1px solid var(--cream-300); text-decoration: none; color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.svc:hover { transform: translateY(-4px); border-color: rgba(184,150,46,.6);
  box-shadow: 0 18px 40px -24px rgba(28,35,49,.35); }
.svc-ico { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center;
  background: var(--night); color: var(--gold); }
.svc-ico svg { width: 24px; height: 24px; }
.svc-n { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .16em; color: var(--gold-dark); }
.svc-t { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 30px; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--night); }
.svc-d { font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.svc-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--gold-dark); }
.svc-go .arr { transition: transform .25s var(--ease-out); }
.svc:hover .svc-go .arr { transform: translateX(5px); }
/* dark variant (on the night background) */
.svc--dark { background: var(--panel); border-color: var(--line); }
.svc--dark .svc-t { color: var(--cream); }
.svc--dark .svc-d { color: var(--fog); }
.svc--dark .svc-n, .svc--dark .svc-go { color: var(--gold); }
.svc--dark .svc-ico { background: var(--gold); color: var(--night); }

/* ---- Tool cards on the homepage: unmistakably clickable --------------------
   Arno, 2026-09-20: "it needs to be more clear that you can click on it".
   At rest the CTA is a pill button; on hover the card lifts, the border and a
   corner glow go gold, the title warms and the pill fills. Keyboard focus gets
   the same treatment. */
.tool-card { position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s, background .3s; }
.tool-card::before { content: ""; position: absolute; top: -140px; right: -140px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(184,150,46,.30), rgba(184,150,46,0)); opacity: 0;
  transition: opacity .35s var(--ease-out); pointer-events: none; z-index: -1; }
/* the "Gratuito · 2 minutos · 10 perguntas" line: same size as the description (15px), Arno 2026-09-20 */
.tool-card .svc-n { font-size: 15px; letter-spacing: .06em; line-height: 1.5; }
.tool-card .svc-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(184,150,46,.6); color: var(--gold);
  font-size: 14px; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-out); }
.tool-card:hover, .tool-card:focus-visible { border-color: var(--gold); background: #1E1E1E; transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(184,150,46,.55), 0 30px 60px -30px rgba(184,150,46,.6); outline: none; }
.tool-card:hover::before, .tool-card:focus-visible::before { opacity: 1; }
.tool-card:hover .svc-t, .tool-card:focus-visible .svc-t { color: var(--gold-light); }
.tool-card:hover .svc-go, .tool-card:focus-visible .svc-go { background: var(--gold); color: var(--night); border-color: var(--gold); }
.tool-card:hover .svc-go .arr { transform: translateX(4px); }
.tool-card:hover .svc-ico { box-shadow: 0 0 0 4px rgba(184,150,46,.25); }
.tool-card .svc-ico { transition: box-shadow .3s; }

/* ---- Preview badge (only injected on *.valioro-website.pages.dev) --------- */
.preview-badge { position: fixed; left: 14px; bottom: 14px; z-index: 70; padding: 6px 10px; border-radius: 6px;
  background: rgba(10,10,10,.82); border: 1px solid rgba(184,150,46,.6); color: var(--gold);
  font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }

/* ---- Nav dropdowns (Serviços, Sobre) -------------------------------------
   Hover opens on a mouse; click/tap and keyboard toggle .open (v2.js). The
   panel is always the night palette, whatever the nav's resting ink. The
   ::before bridge keeps the panel open while the cursor crosses the gap. */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-dd-chev { width: 13px; height: 13px; transition: transform .25s var(--ease-out); flex: none; }
.nav-dd:hover .nav-dd-chev, .nav-dd.open .nav-dd-chev, .nav-dd:focus-within .nav-dd-chev { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; left: -14px; top: calc(100% + 14px); min-width: 268px; padding: 8px; z-index: 60;
  background: var(--night); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s; }
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-dd-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  color: var(--cream); transition: background .18s; }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: var(--panel); outline: none; }
.nav-dd-menu a b { font-family: Geist, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.3; }
.nav-dd-menu a small { font-family: Geist, sans-serif; font-size: 12px; line-height: 1.4; color: var(--fog); }
.nav-dd-menu a[aria-current="page"] b { color: var(--gold); }
/* phones: the children sit under their parent in the full-screen menu */
.m-item.m-sub { letter-spacing: -0.01em; }

/* ---- Hero scroll cue ----------------------------------------------------
   Bottom-centre of the first screen: a mouse outline whose wheel-dot keeps
   sliding down (desktop), a chevron that bobs (phones, where a mouse means
   nothing). The hero is taller than a laptop viewport, so the wrap is FIXED to
   the viewport bottom while the hero is on screen; v2.js anchors it inside the
   hero instead (.is-anchored) when the whole hero fits, and fades it out
   (.is-off) once the visitor has started scrolling: the cue has done its job.
   The wrap is full-width so the inner .hi reveal can keep its own transform. */
.scroll-cue-wrap { position: fixed; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center;
  pointer-events: none; z-index: 30; transition: opacity .45s var(--ease-out); }
.scroll-cue-wrap.is-anchored { position: absolute; }
.scroll-cue-wrap.is-off { opacity: 0; }
.scroll-cue-wrap.is-off .scroll-cue { pointer-events: none; }
.scroll-cue { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; color: var(--fog); opacity: .8; transition: opacity .3s, color .3s; }
.scroll-cue:hover, .scroll-cue:focus-visible { opacity: 1; color: var(--gold); }
.scroll-cue-label { font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue-mouse { display: none; position: relative; width: 22px; height: 34px; border-radius: 12px;
  border: 1.5px solid rgba(184,150,46,.65); transition: border-color .3s; }
.scroll-cue:hover .scroll-cue-mouse { border-color: var(--gold); }
.scroll-cue-mouse i { position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px;
  background: var(--gold); animation: cue-wheel 1.9s cubic-bezier(.45,0,.2,1) infinite; }
.scroll-cue-chev { display: block; width: 18px; height: 18px; color: var(--gold);
  animation: cue-bob 1.6s ease-in-out infinite; }
@keyframes cue-wheel {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(13px); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0; }
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (min-width: 768px) {
  .scroll-cue-mouse { display: block; }
  .scroll-cue-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-mouse i, .scroll-cue-chev { animation: none; }
  .scroll-cue-mouse i { top: 11px; }
}

/* ---- Horizontal solutions scroller -------------------------------------- */
.scroller-wrap { position: relative; }
.scroller { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.scroller::-webkit-scrollbar { display: none; }
.scroller.dragging { cursor: grabbing; scroll-snap-type: none; }
.tile { flex: 0 0 264px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px 24px; border-radius: 10px; background: var(--cream-50); border: 1px solid var(--cream-300);
  user-select: none; transition: border-color .25s, transform .3s var(--ease-out); }
.tile:hover { border-color: rgba(184,150,46,.6); transform: translateY(-3px); }
.tile-ico { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--gold-dark);
  background: var(--cream-200); }
.tile-ico svg { width: 22px; height: 22px; }
.tile-k { font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.tile-t { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 24px; line-height: 1.12; color: var(--night); }
.tile-d { font-size: 14px; line-height: 1.55; color: var(--ink-600); }
.scroll-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-500); background: var(--cream-50);
  color: var(--night); display: inline-grid; place-items: center; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, opacity .18s; }
.scroll-btn:hover { background: var(--night); color: var(--cream); border-color: var(--night); }
.scroll-btn[disabled] { opacity: .3; cursor: default; }
.scroll-btn[disabled]:hover { background: var(--cream-50); color: var(--night); border-color: var(--ink-500); }
.scroll-btn svg { width: 18px; height: 18px; }

/* ---- Free tools (readiness check + valuation calculator) ---------------- */
.tool { border-radius: 14px; background: var(--night); border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(10,10,10,.6); }
.tool-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.tool-tab { appearance: none; background: transparent; border: 0; padding: 20px 18px; cursor: pointer;
  font-family: Geist, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--fog);
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; transition: color .18s; }
.tool-tab svg { width: 18px; height: 18px; flex: none; }
.tool-tab[aria-selected="true"] { color: var(--cream); }
.tool-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.tool-tab:hover { color: var(--cream); }
.tool-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.tool-panel { padding: 30px 26px 30px; }
@media (min-width: 768px) { .tool-panel { padding: 40px 44px 40px; } }
.tool-panel[hidden] { display: none; }
/* single-tool pages have no tabs; the panel still needs its padding */
.tool--single .tool-tabs { display: none; }

/* progress */
.tool-prog { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.tool-prog-bar { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tool-prog-bar > i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s var(--ease-out); }
.tool-prog-n { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .12em; color: var(--fog); white-space: nowrap; }

/* question */
.tool-pillar { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tool-q { margin-top: 12px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2; letter-spacing: -0.01em; color: var(--cream); text-wrap: balance; min-height: 2.4em; }
.tool-opts { display: grid; gap: 10px; margin-top: 26px; }
@media (min-width: 640px) { .tool-opts { grid-template-columns: repeat(3, 1fr); } }
.tool-opt { appearance: none; cursor: pointer; text-align: left; padding: 16px 18px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--cream);
  font-family: Geist, sans-serif; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 12px;
  transition: border-color .18s, background .18s, transform .18s; }
.tool-opt:hover { border-color: var(--gold); background: #191919; transform: translateY(-1px); }
.tool-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tool-opt i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--gold); flex: none; }
.tool-opt[data-v="2"] i { background: var(--gold); }
.tool-opt[data-v="1"] i { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); }
.tool-back { margin-top: 18px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--fog);
  font-family: Geist, sans-serif; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tool-back:hover { color: var(--cream); }
.tool-back[hidden] { display: none; }

/* calculator fields (dark) */
.tool-fields { display: grid; gap: 18px; }
@media (min-width: 640px) { .tool-fields { grid-template-columns: 1fr 1fr; } }
.tool-field label { display: block; font-family: Geist, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fog); margin-bottom: 8px; }
.tool-field input, .tool-field select { width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 14px 15px; font-family: Geist, sans-serif; font-size: 16px; color: var(--cream); outline: none;
  transition: border-color .15s, box-shadow .15s; }
.tool-field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B8962E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.tool-field select option { color: var(--night); background: var(--cream); }
.tool-field input:focus, .tool-field select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,150,46,.25); }
.tool-field input::placeholder { color: var(--ink-500); }
.tool-field .pre { position: relative; }
.tool-field .pre > span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-family: "Geist Mono", monospace; font-size: 13px; color: var(--fog); pointer-events: none; }
.tool-field .pre > input { padding-left: 44px; }
.tool-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tool-hint { font-size: 13px; line-height: 1.5; color: var(--fog); }

/* result */
.tool-result { display: none; }
.tool-result.on { display: block; animation: toolIn .5s var(--ease-out) both; }
@keyframes toolIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.res-k { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.res-band { margin-top: 10px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--cream); }
.res-band em { font-style: italic; font-weight: 400; color: var(--gold); }
.res-sub { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--fog); max-width: 620px; }
.res-grid { margin-top: 28px; display: grid; gap: 22px; }
@media (min-width: 768px) { .res-grid { grid-template-columns: 1.1fr 1fr; gap: 36px; } }
.res-pillars { display: grid; gap: 12px; }
.res-p { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 14px; }
@media (max-width: 420px) { .res-p { grid-template-columns: 90px 1fr; } }
.res-p b { font-family: Geist, sans-serif; font-weight: 500; font-size: 13px; color: var(--cream); }
.res-p .bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.res-p .bar > i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 4px;
  transition: width 1s var(--ease-out); }
.res-p .bar > i.lo { background: #8E5A3A; }
.res-p .bar > i.mid { background: var(--gold-deep); }
.res-list { display: flex; flex-direction: column; gap: 10px; }
.res-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--cream); }
.res-list li::before { content: ""; flex: none; margin-top: 7px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.res-list li.ok::before { background: var(--ink-500); }
.res-list .muted { color: var(--fog); }
/* calculator figures */
.res-range { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.res-range b { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1; letter-spacing: -0.02em; color: var(--cream); white-space: nowrap; }
.res-range i { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(22px, 2.4vw, 30px); color: var(--gold); }
.res-scale { margin-top: 22px; height: 10px; border-radius: 5px; position: relative;
  background: linear-gradient(90deg, #2A2A2A 0%, #5A4A22 50%, var(--gold) 100%); }
.res-scale > i { position: absolute; top: -5px; width: 2px; height: 20px; background: var(--cream); border-radius: 1px; }
.res-scale-l { margin-top: 8px; display: flex; justify-content: space-between; font-family: "Geist Mono", monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.res-note { margin-top: 20px; padding: 14px 16px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.55; color: var(--fog); }
.res-note b { color: var(--cream); font-weight: 500; }

/* lead form inside the tool result */
.tool-lead { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.tool-lead h3 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; color: var(--cream); }
.tool-lead h3 em { font-style: italic; font-weight: 400; color: var(--gold); }
.tool-lead p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--fog); }
.tool-lead form { margin-top: 18px; display: grid; gap: 12px; }
@media (min-width: 640px) { .tool-lead form { grid-template-columns: 1fr 1fr; } .tool-lead form .span2 { grid-column: 1 / -1; } }
.tool-lead input[type="text"], .tool-lead input[type="email"], .tool-lead input[type="tel"] { width: 100%; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 13px 15px; font-family: Geist, sans-serif; font-size: 15px;
  color: var(--cream); outline: none; transition: border-color .15s, box-shadow .15s; }
.tool-lead input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,150,46,.25); }
.tool-lead input::placeholder { color: var(--ink-500); }
.tool-lead .consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--fog); cursor: pointer; }
.tool-lead .consent input { margin-top: 2px; accent-color: var(--gold); }
.tool-lead .consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.tool-lead .submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tool-restart { background: none; border: 0; padding: 0; cursor: pointer; color: var(--fog); font-family: Geist, sans-serif;
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.tool-restart:hover { color: var(--cream); }
.tool-ok { display: none; align-items: center; gap: 10px; border: 1px solid var(--gold); background: rgba(184,150,46,.1);
  border-radius: 6px; padding: 14px 18px; font-size: 15px; color: var(--gold); margin-top: 18px; }
.tool-ok.flex { display: flex; }
.tool-ok svg { width: 18px; height: 18px; flex: none; }

/* ---- Video block --------------------------------------------------------- */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(10,10,10,.7); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,10,10,.28);
  border: 0; cursor: pointer; transition: background .2s; }
.video-play:hover { background: rgba(10,10,10,.12); }
.video-play span { width: 84px; height: 84px; border-radius: 50%; background: var(--gold); color: var(--night);
  display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(184,150,46,.18); transition: transform .25s var(--ease-out); }
.video-play:hover span { transform: scale(1.06); }
.video-play svg { width: 30px; height: 30px; margin-left: 4px; }

/* ---- Trust strip ---------------------------------------------------------- */
.trust { display: flex; gap: 16px; align-items: flex-start; }
.trust-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--cream-200); color: var(--gold-dark); }
.trust-ico svg { width: 22px; height: 22px; }
.trust b { display: block; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 24px; line-height: 1.15; color: var(--night); }
.trust p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-600); }

/* ---- Compact case cards (Resultados) -------------------------------------- */
.case { display: flex; flex-direction: column; gap: 22px; padding: 32px 30px; border-radius: 12px;
  background: var(--cream-50); border: 1px solid var(--cream-300); }
.case-k { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.case-t { margin-top: 8px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--night); }
.case-src { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-600); }
.case-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.case-l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
/* lining figures: the value ranges carry an M, and Cormorant's old-style digits made them look broken (same fix as .stat-n) */
.case-v { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 30px; line-height: 1; color: var(--night); white-space: nowrap;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.case-v .to { color: var(--gold-dark); font-style: italic; font-weight: 400; margin: 0 6px; }
.case-bars { display: grid; gap: 8px; }
.case-bar { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 10px;
  font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .1em; color: var(--ink-600); }
.case-bar .bar { height: 8px; border-radius: 4px; background: var(--cream-200); overflow: hidden; position: relative; }
.case-bar .bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--ink-500); }
.case-bar.after .bar-fill { background: var(--gold); }
.case-bar .line { position: absolute; top: -4px; bottom: -4px; left: 71%; width: 1px; border-left: 1px dashed var(--ink-500); }
.case-bar .val { text-align: right; color: var(--night); font-weight: 500; }
.case-why { font-size: 14px; line-height: 1.6; color: var(--ink-700); padding-top: 18px; border-top: 1px solid var(--cream-300); }
.case-why b { font-weight: 500; color: var(--night); }

/* ---- Program timeline (Serviços) ------------------------------------------ */
.qtr { position: relative; padding: 26px 0 0; }
.qtr::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--cream-300); }
.qtr::after { content: ""; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.qtr-n { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .16em; color: var(--gold-dark); }
.qtr-t { margin-top: 8px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--night); }
.qtr-d { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-600); }

/* ---- Pillars strip ---------------------------------------------------------- */
.pillar { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px; border-radius: 10px;
  background: var(--cream-50); border: 1px solid var(--cream-300); }
.pillar-n { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .16em; color: var(--gold-dark); }
.pillar-t { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--night);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } /* "R$ 250K a R$ 100M" on the investors tile */
.pillar-d { font-size: 13px; line-height: 1.55; color: var(--ink-600); }

/* ---- Check list (compact, contact page) ------------------------------------ */
.checks { display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-700); }
.checks svg { flex: none; margin-top: 3px; width: 17px; height: 17px; color: var(--gold-deep); }

/* ---- Floating WhatsApp button ----------------------------------------------- */
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px 12px 12px; border-radius: 999px; background: var(--gold); color: var(--night);
  font-family: Geist, sans-serif; font-size: 13px; font-weight: 500; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(184,150,46,.4), 0 14px 36px -14px rgba(10,10,10,.6);
  transition: transform .25s var(--ease-out), background .18s; }
.wa-fab:hover { background: var(--gold-light); transform: translateY(-2px); }
.wa-fab svg { width: 22px; height: 22px; flex: none; }
.wa-fab .lbl { display: none; }
@media (min-width: 640px) { .wa-fab .lbl { display: inline; } .wa-fab { right: 24px; bottom: 24px; } }
/* keep clear of the tool result form on phones */
@media (max-width: 639px) { .wa-fab { padding: 12px; } }

/* ---- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tool-result.on { animation: none; }
  .res-p .bar > i, .tool-prog-bar > i { transition: none; }
}