/* ZUCCA — camada visual do index-novo.html (carregada DEPOIS do v2.css).
   Não altera o v2.css, que continua servindo o index.html original.
   Direção: base clara e quente, verde mais vivo e uma cor nova,
   o laranja abóbora ("zucca" = abóbora em italiano), para CTAs e destaques. */

:root {
  color-scheme: light;
  --page: #fbf9f3;
  --surface: #f3efe4;
  --surface-2: #ffffff;
  --ink: #14231a;
  --muted: #52615a;
  --line: #e2ddcf;
  --hair: rgb(20 35 26 / .08);
  --accent: #2d7a50;
  --accent-soft: #6fae7f;
  --tech: rgb(45 122 80 / .7);
  --tech-soft: rgb(45 122 80 / .3);
  --header-bg: rgb(251 249 243 / .9);

  /* novas */
  --pop: #f07f2e;          /* laranja abóbora: fundos e botões */
  --pop-hover: #e06b17;
  --pop-ink: #b8501a;      /* laranja para texto sobre fundo claro */
  --pop-soft: #fde4cf;
  --mint: #e2f1e5;
  --on-pop: #1d1208;
  --feature-bg: #24533a;   /* verde institucional, mais vivo */
  --feature-ink: #f6f4ec;
  --radius: 22px;
  --shadow: 0 24px 48px -28px rgb(20 35 26 / .28);
  /* degradê contínuo dos cards de serviço: todos verdes, texto branco legível em toda a faixa */
  --offer-gradient: #123222, #1f4a33 35%, #2a6644 70%, #33804f;
}
[data-theme="dark"] {
  color-scheme: dark;
  --page: #13241b;
  --surface: #1a2e23;
  --surface-2: #203629;
  --ink: #f3f6ef;
  --muted: #b4c5b6;
  --line: #2f4a3a;
  --hair: rgb(159 214 169 / .1);
  --accent: #9fd6a9;
  --accent-soft: #7cc48a;
  --tech: rgb(159 214 169 / .6);
  --tech-soft: rgb(159 214 169 / .25);
  --header-bg: rgb(19 36 27 / .9);

  --pop: #ff9a4d;
  --pop-hover: #ffb070;
  --pop-ink: #ffb070;
  --pop-soft: rgb(255 154 77 / .16);
  --mint: rgb(159 214 169 / .12);
  --feature-bg: #2b6a47;
  --shadow: 0 24px 48px -28px rgb(0 0 0 / .5);
  --offer-gradient: #163b28, #24533a 35%, #2c6a47 70%, #33804f;
}

::selection { background: var(--pop); color: var(--on-pop); }
.eyebrow { color: var(--pop-ink); }

/* ---------- header ---------- */
.header-cta {
  border: 0; border-radius: 999px; padding: 13px 18px;
  background: var(--pop); color: var(--on-pop);
}
.header-cta:hover { background: var(--pop-hover); color: var(--on-pop); }
.theme-control { border-radius: 999px; }
.theme-control button { border-radius: 999px; }

/* ---------- botões ---------- */
.button { border-radius: 999px; gap: 22px; }
.button-solid { background: var(--pop); color: var(--on-pop); border-color: var(--pop); }
.button-solid:hover,
[data-theme="dark"] .button-solid:hover { background: var(--pop-hover); border-color: var(--pop-hover); color: var(--on-pop); }
.button-ghost { border-color: var(--line); background: var(--surface-2); }
.button-ghost:hover { background: var(--mint); color: var(--ink); border-color: var(--accent-soft); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(ellipse 52% 48% at 80% 34%, var(--mint), transparent 72%),
    radial-gradient(ellipse 34% 34% at 96% 88%, var(--pop-soft), transparent 72%),
    radial-gradient(ellipse 30% 30% at 4% 96%, var(--pop-soft), transparent 70%),
    var(--page);
}
.hero h1 em {
  color: var(--accent);
  background: linear-gradient(transparent 80%, var(--pop-soft) 80%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.bp-node { fill: var(--pop); }
/* Trilho de scroll mais curto: a arte do hero se monta mais rápido (v2: até 380px).
   Só no desktop: no celular o trilho não existe (senão sobra um vão vazio). */
@media (min-width: 961px) {
  .hero-track::after { height: clamp(70px, 16svh, 150px); }
}

/* ---------- vitrine ---------- */
.showcase-frame { background: var(--mint); box-shadow: var(--shadow); }

/* ---------- diagnóstico ---------- */
.diag-checklist { border-top: 0; }
.diag-checklist li { grid-template-columns: 52px 1fr; align-items: center; color: var(--ink); }
.diag-checklist li b {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--mint); color: var(--accent);
}
.diag-panel { background: var(--surface-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.diag-tag { border: 0; border-radius: 999px; background: var(--pop-soft); color: var(--pop-ink); }
.diag-stats { gap: 10px; background: transparent; border: 0; }
.diag-stat { background: var(--surface); border-radius: 16px; }
.diag-stat:nth-child(3) b { color: var(--pop-ink); }
.diag-row { background: var(--surface); border: 0; border-radius: 16px; }
.diag-rank { border: 0; border-radius: 50%; background: var(--pop); color: var(--on-pop); }
.diag-bar-track { border-radius: 999px; }
.diag-bar-fill { border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--pop)); }

/* ---------- serviços ---------- */
.offer { background: var(--surface); }
/* frase de apoio em uma linha só (no celular ela volta a quebrar para não vazar da tela) */
.offer .sec-head { max-width: none; }
.offer .sec-head .lead { max-width: none; }
@media (min-width: 900px) { .offer .sec-head .lead { white-space: nowrap; } }
.offer-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; background: transparent; border: 0; }
.offer-grid .deliver-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.offer-grid .deliver-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent-soft); }
.offer-grid .deliver-card .mono {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--mint); color: var(--accent); font-size: 11px; letter-spacing: .04em;
}
.offer-grid .deliver-card h3 { font-size: 20px; }
.offer-grid .deliver-card > p { color: var(--muted); }
.offer-list { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.offer-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.offer-list li + li { margin-top: 11px; }
.offer-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--pop); }

/* Degradê contínuo: um único gradiente atravessa os 3 cards. Cada card mostra
   a sua fatia (1/3 do gradiente), então o tom segue de um card para o outro. */
.offer-grid .deliver-card {
  border-color: transparent; color: var(--feature-ink);
  background: linear-gradient(90deg, var(--offer-gradient));
  background-size: 300% 100%;
}
.offer-grid .deliver-card:nth-child(1) { background-position: 0% 0; }
.offer-grid .deliver-card:nth-child(2) { background-position: 50% 0; }
.offer-grid .deliver-card:nth-child(3) { background-position: 100% 0; }
.offer-grid .deliver-card:hover { border-color: var(--pop); }
.offer-grid .deliver-card .mono { background: var(--pop); color: var(--on-pop); }
.offer-grid .deliver-card .offer-list { border-top-color: rgb(246 244 236 / .2); }

/* Tipografia igual à do bloco "Primeira reunião": títulos leves (como o
   "Plano de automação priorizado") e corpo no mesmo tamanho da lista. */
.offer-grid .deliver-card h3 {
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.035em; line-height: 1.15;
}
.offer-grid .deliver-card > p { font-size: 14.5px; line-height: 1.7; color: rgb(246 244 236 / .82); }
.offer-grid .deliver-card .offer-list li { font-size: 14.5px; line-height: 1.6; color: var(--feature-ink); }

.offer-note {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 30px 0 28px; padding: 10px 16px; border-radius: 999px;
  background: var(--mint); color: var(--ink); font-size: 13.5px;
}
.offer-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.offer .button { display: flex; width: max-content; }

/* ---------- próximo passo ---------- */
.contact {
  --ink: var(--feature-ink);
  --muted: rgb(246 244 236 / .8);
  --line: rgb(246 244 236 / .25);
  --hair: rgb(246 244 236 / .12);
  --accent: #bfe8c8;
  --tech: rgb(246 244 236 / .5);
  --tech-soft: rgb(246 244 236 / .22);
  --pop-ink: #ffb070;
  background:
    radial-gradient(ellipse 40% 60% at 92% 100%, rgb(240 127 46 / .28), transparent 70%),
    var(--feature-bg);
  color: var(--ink);
  border-top: 0;
  /* bloco mais compacto (v2: até 144px de respiro, título até 62px) */
  padding-block: clamp(56px, 6vw, 88px);
}
.contact h2 { font-size: clamp(30px, 3.2vw, 44px); margin-top: 18px; }
.contact .lead { margin-top: 16px; }
.contact .button { margin-top: 26px; }
.contact-details { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; }
/* fluxo animado (substitui o desenho do cubo) */
.contact-flow {
  position: absolute; z-index: -1; right: 9%; top: 50%; transform: translateY(-50%);
  width: min(380px, 33%); pointer-events: none; overflow: visible;
}
.flow-line { fill: none; stroke: var(--pop); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; animation: flow-dash 1s linear infinite; }
.flow-dot { fill: var(--pop); }
.flow-node { animation: flow-bob 3.2s ease-in-out infinite; }
.flow-end { fill: rgb(240 127 46 / .22); stroke: var(--pop); stroke-width: 1.8; stroke-linejoin: round; }
.flow-pulse { fill: none; stroke: var(--pop); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: flow-pulse 2.4s ease-out infinite; }
.flow-label { font: 500 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); text-anchor: middle; }
@keyframes flow-dash { to { stroke-dashoffset: -20; } }
@keyframes flow-bob { 50% { transform: translateY(-6px); } }
@keyframes flow-pulse { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
/* tablet e celular: o fluxo sai do canto e aparece centralizado acima do texto */
@media (max-width: 960px) {
  .contact-flow {
    position: relative; right: auto; top: auto; transform: none; z-index: 0;
    display: block; width: min(340px, calc(100% - 40px)); margin: 0 auto 36px;
  }
  .contact-flow .flow-label { font-size: 11px; }
}

/* fluxo do hero: mesma linguagem, em tons do fundo claro.
   Entradas em verde, saída e pontos em laranja, automação em menta. */
.hero-flow { max-width: 520px; overflow: visible; }
.hero-flow .flow-line-in { stroke: var(--accent-soft); }
.hero-flow .flow-in { fill: var(--surface-2); stroke: var(--tech); stroke-width: 1.8; stroke-linejoin: round; }
.hero-flow .flow-core { fill: var(--mint); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.hero-flow .flow-end { fill: var(--pop-soft); }
.hero-flow .flow-label { font-size: 12.5px; letter-spacing: .1em; fill: var(--muted); paint-order: stroke; stroke: var(--page); stroke-width: 5px; stroke-linejoin: round; }
/* rótulos que alternam entre possibilidades */
.hero-flow [data-cycle] { fill: var(--ink); transition: opacity .35s var(--ease); }
.hero-flow .flow-label-result { fill: var(--pop-ink); }
.hero-flow [data-cycle].is-swapping { opacity: 0; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: 1fr; }
  /* empilhados: o degradê contínuo passa a correr de cima para baixo */
  .offer-grid .deliver-card { background-image: linear-gradient(180deg, var(--offer-gradient)); background-size: 100% 300%; }
  .offer-grid .deliver-card:nth-child(1) { background-position: 0 0%; }
  .offer-grid .deliver-card:nth-child(2) { background-position: 0 50%; }
  .offer-grid .deliver-card:nth-child(3) { background-position: 0 100%; }
}
@media (max-width: 960px) {
  /* fluxo do hero ocupa a largura toda (v2 limitava a 300px e os rótulos ficavam minúsculos) */
  .hero-figure .hero-flow { max-width: 100%; }
  .hero-flow .flow-label { font-size: 16px; }
}
@media (max-width: 767px) {
  /* botões com a mesma largura, alinhados entre si */
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .button, .offer .button, .contact .button { width: 100%; }
  .hero { padding-bottom: 32px; }
  .showcase { padding-bottom: 24px; }

  /* diagnóstico: números em linhas compactas, legenda sem quebras tortas */
  .diag-stats { gap: 8px; }
  .diag-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 18px; }
  .diag-stat span { margin-top: 0; text-align: right; }
  .diag-bar-legend { flex-direction: column; gap: 6px; }
  .diag-bar-legend span { white-space: nowrap; }

  .offer-note { border-radius: 16px; align-items: flex-start; }
  .offer-note::before { margin-top: 6px; }
  .offer-grid .deliver-card h3 { font-size: 24px; }

  .contact { padding-block: 56px; }
  .contact-details { margin-top: 26px; }
}