/* Landing page. Daylight version of "O plantão que nunca fecha": warm paper, deep green fields, one coral action.
   The arch of the Nestor symbol is the motif: the hero simulation lives inside it, the answered lead gets it,
   the product screenshots sit on arch-topped stages. Fields alternate paper / sand / green, never by lines. */
.home section { padding: var(--gap-section) 0; }
.home .big { font: 600 clamp(2.1rem, 4.2vw, 3.6rem)/1.06 var(--serif); letter-spacing: -0.03em; max-width: 22ch; margin: 0 0 clamp(32px, 4vw, 56px); }
.home p { max-width: 62ch; }

/* Hero */
.home .hero { padding: clamp(32px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.hero-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.hero h1 { font: 600 clamp(2.25rem, 4.4vw, 3.9rem)/1.02 var(--serif); letter-spacing: -0.04em; margin: 0 0 clamp(20px, 2.5vw, 32px); color: var(--ink); }
.hero-lead { font-size: clamp(1.15rem, 1.5vw, 1.32rem); line-height: 1.55; color: var(--ink); }
.hero .cta-row { margin: 34px 0 30px; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-facts li { position: relative; padding-left: 30px; font-size: 1.02rem; color: var(--ink); }
.hero-facts li::before { content: ""; position: absolute; left: 2px; top: 0.4em; width: 14px; height: 16px; border-radius: 999px 999px 3px 3px; background: var(--green-2); }

.hero-arch { background: var(--green); color: var(--on-green); border-radius: var(--arch); padding: clamp(104px, 11vw, 150px) clamp(18px, 3vw, 40px) clamp(20px, 2.5vw, 32px); }
.stage { margin: 0; position: relative; display: grid; gap: 20px; }
.stage-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.stage-top p { margin: 0; }
.clock { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.clock b { font: 600 clamp(2.8rem, 5vw, 4.2rem)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; }
.clock span { font-size: 1.05rem; color: var(--on-green-2); }
.stopwatch { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--green-3); color: var(--on-green); font-size: 0.98rem; transition: background-color 0.3s, color 0.3s; }
.stopwatch b { font: 700 1.25rem/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; min-width: 2.6ch; }
.stage.answered .stopwatch, .stage.done .stopwatch { background: var(--coral); color: var(--coral-ink); }
.stage.answered .stopwatch b, .stage.done .stopwatch b { color: var(--coral-ink); }
.stage-body { display: grid; gap: 22px; align-items: start; }
@media (min-width: 560px) { .stage-body { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; } }
.stage .phone { width: 100%; max-width: 320px; margin: 0 auto; border-color: var(--ink); }
.chat-live { height: 400px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; gap: 7px; padding: 12px 9px 14px; }
.chat-live .msg { max-width: 88%; flex: none; }
.chat-live .msg.in { align-self: flex-start; }
.chat-live .msg.out { align-self: flex-end; }
.msg span { display: block; }
.typing { display: none; flex: none; align-self: flex-end; gap: 4px; margin: 0; padding: 10px 12px; background: #d8efe5; border-radius: 12px; }
.stage.is-typing .typing { display: inline-flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #4f6e64; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.js .stage.playing .m { opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; }
.js .stage.playing .m.on { opacity: 1; transform: none; }

/* Where the lead is: a vertical rail with the coral lead chip travelling down it. */
.rail { --row: 104px; list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-auto-rows: var(--row); gap: 0; }
.rail li:not(.chip) { display: flex; flex-direction: column; justify-content: flex-start; padding: 0 0 0 24px; color: var(--on-green-2); font-size: 0.95rem; position: relative; }
.rail li:not(.chip)::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 14px; border-radius: 999px 999px 3px 3px; background: var(--green-3); }
.rail li:not(.chip)::after { content: ""; position: absolute; left: 5px; top: 24px; width: 2px; height: calc(var(--row) - 24px); background: var(--green-3); }
.rail li:nth-child(4)::after { display: none; }
.rail li b { font-size: 1.08rem; color: #fff; line-height: 1.3; }
.rail .chip { position: absolute; left: 24px; right: 0; top: 52px; height: 42px; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0 14px; border-radius: 12px; background: var(--coral); color: var(--coral-ink); transform: translateY(calc(var(--s, 3) * var(--row))); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2; white-space: nowrap; overflow: hidden; }
.rail .chip b { color: var(--coral-ink); font-size: 0.98rem; }
.rail .chip span { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; }
.stage[data-step="0"] .rail { --s: 0; } .stage[data-step="1"] .rail { --s: 1; } .stage[data-step="2"] .rail { --s: 2; } .stage[data-step="3"] .rail { --s: 3; }
.stage-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.92rem; color: var(--on-green-2); }
.replay { font: inherit; font-weight: 650; color: var(--on-green); background: var(--green-3); border: 0; border-radius: 999px; min-height: 44px; padding: 0 18px; cursor: pointer; transition: background-color 0.18s; }
.replay:hover { background: var(--green-2); }
@media (max-width: 559px) {
  .rail { --row: 64px; grid-auto-flow: column; grid-auto-rows: auto; grid-template-columns: repeat(4, 1fr); height: 156px; }
  .rail li:not(.chip) { padding: 88px 6px 0 0; font-size: 0.8125rem; }
  .rail li:not(.chip)::before { left: 0; top: 76px; }
  .rail li:not(.chip)::after { left: 16px; top: 82px; width: calc(100% - 20px); height: 2px; }
  .rail li b { font-size: 0.86rem; }
  .rail li span { display: none; }
  .rail .chip { left: 0; top: 0; width: 25%; right: auto; height: 64px; padding: 0 6px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; white-space: normal; transform: translateX(calc(var(--s, 3) * 100%)); }
  .rail .chip b { font-size: 0.86rem; }
  .rail .chip span { display: block; font-size: 0.8125rem; line-height: 1.2; }
  .chat-live { height: 360px; }
}

/* Contrast: the same lead, two endings. The ignored one is a closed, square door; the answered one gets the arch. */
.contrast { background: var(--sand); }
.duo { display: grid; gap: 16px; margin-bottom: 28px; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } }
.side { padding: clamp(28px, 3.5vw, 48px); border-radius: 8px; display: flex; flex-direction: column; }
.side h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 24px; }
.side-lost { background: var(--sand-2); color: var(--ink); }
.side-won { background: var(--green); color: var(--on-green); border-radius: var(--arch); padding-top: clamp(96px, 10vw, 150px); }
.side-won h3 { color: #fff; }
.tl { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; flex: 1; align-content: start; }
.tl li { display: grid; grid-template-columns: 6.6em 1fr; gap: 14px; font-size: 1.04rem; line-height: 1.5; }
.tl time { font-weight: 700; font-variant-numeric: tabular-nums; }
.side-lost time { color: var(--spark-700); }
.side-won time { color: var(--coral-2); }
.side-sum { margin: 0; padding-top: 20px; font-size: 1.15rem; }
.side-sum b { font: 600 clamp(1.8rem, 3vw, 2.4rem)/1 var(--serif); display: block; margin-bottom: 6px; }
.side-won .side-sum b { color: #fff; }
.contrast .fine { max-width: 80ch; }
@media (max-width: 420px) { .tl li { grid-template-columns: 1fr; gap: 2px; } }

/* What Nestor does */
.does { background: var(--paper); }
.verbs { list-style: none; margin: 0 0 clamp(56px, 7vw, 96px); padding: 0; display: grid; gap: 32px; }
@media (min-width: 760px) { .verbs { grid-template-columns: repeat(2, 1fr); gap: 40px 56px; } }
@media (min-width: 1100px) { .verbs { grid-template-columns: repeat(4, 1fr); } }
.verbs h3 { font: 600 clamp(1.4rem, 2vw, 1.7rem)/1.15 var(--serif); margin-bottom: 10px; }
.verbs h3::before { content: ""; display: block; width: 26px; height: 30px; margin-bottom: 18px; border-radius: 999px 999px 4px 4px; background: var(--coral); }
.verbs p { margin: 0; font-size: 1.05rem; }
.shot { margin: 0; min-width: 0; }
.shot-arch { background: var(--sand); padding: clamp(80px, 9vw, 120px) clamp(12px, 3vw, 40px) clamp(16px, 3vw, 40px); border-radius: 50% 50% var(--r) var(--r) / clamp(90px, 11vw, 150px) clamp(90px, 11vw, 150px) var(--r) var(--r); }
.shot-on-sand { background: var(--paper); }
.shot-view { overflow-x: auto; border-radius: 12px; -webkit-overflow-scrolling: touch; max-width: 100%; }
.shot img { width: 100%; height: auto; display: block; background: var(--sand-2); }
@media (max-width: 759px) { .shot img { width: 820px; max-width: none; } }
.shot figcaption { margin-top: 14px; font-size: 0.95rem; color: var(--ink-2); }
.guards-row { display: grid; gap: 18px 40px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 860px) { .guards-row { grid-template-columns: repeat(4, 1fr); } }
.guards-row p { margin: 0; font-size: 1.02rem; }
.guards-row b { color: var(--ink); display: block; margin-bottom: 2px; }
.more { margin-top: 36px; }

/* Distribution on the deep green field */
.green { background: var(--green); color: var(--on-green); }
.green .big { color: #fff; max-width: 18ch; }
.green-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1040px) { .green-grid { grid-template-columns: 0.85fr 1.15fr; } }
.green-grid > * { min-width: 0; }
.green p { color: var(--on-green); font-size: 1.1rem; }
.link-light { color: #fff; font-weight: 650; }
.link-light:hover { color: #fff; }
.shot-green { background: var(--green-2); padding: clamp(72px, 8vw, 110px) clamp(12px, 2.5vw, 32px) clamp(16px, 2.5vw, 32px); border-radius: 50% 50% var(--r) var(--r) / clamp(80px, 10vw, 130px) clamp(80px, 10vw, 130px) var(--r) var(--r); }
.shot-green img { background: var(--green-3); }
.green .shot figcaption { color: var(--on-green-2); }
.relay { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 28px 0; padding: 20px 22px; border-radius: 16px; background: var(--green-2); position: relative; }
.relay-p { display: grid; justify-items: center; gap: 6px; font-size: 0.98rem; }
.relay .av { width: 48px; height: 48px; font-size: 1.05rem; background: var(--green-3); position: relative; z-index: 1; }
.relay .av.a3 { background: #9a4a10; }
.relay-ana .av { outline: 5px solid var(--coral); outline-offset: 0; animation: ana 8s infinite; }
.relay-line { position: relative; height: 4px; border-radius: 2px; background: var(--green-3); }
.relay-dot { position: absolute; left: 0; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); animation: hop 8s infinite; }
.green .relay-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.95rem; color: var(--on-green-2); }
@keyframes hop { 0%, 55% { left: 0; } 75%, 100% { left: calc(100% - 16px); } }
@keyframes ana { 0%, 55% { outline-color: var(--coral); } 62%, 100% { outline-color: transparent; } }

/* App */
.app-sec { background: var(--paper); }
.app-grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 980px) { .app-grid { grid-template-columns: 1fr 1fr; } }
.app-grid > * { min-width: 0; }
.app-mock { background: var(--sand); border-radius: var(--arch); padding: clamp(72px, 9vw, 120px) 16px 24px; }
.app-mock .mock { margin-bottom: 40px; }
.app-mock .mock > .example-tag { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.plain { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.plain li { padding-left: 30px; position: relative; font-size: 1.05rem; }
.plain li::before { content: ""; position: absolute; left: 2px; top: 0.38em; width: 14px; height: 16px; border-radius: 999px 999px 3px 3px; background: var(--green-2); }
.plain-coral li::before { background: var(--coral); }

/* CRM parity */
.sandy { background: var(--sand); }
.parity { display: grid; gap: 40px; margin-bottom: clamp(48px, 6vw, 88px); }
@media (min-width: 860px) { .parity { grid-template-columns: 1fr 1fr; gap: 72px; } }
.parity h3 { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--serif); margin-bottom: 20px; }

/* Migration */
.mig-sec { background: var(--paper); }
.mig-grid { display: grid; gap: clamp(40px, 5vw, 80px); align-items: start; }
@media (min-width: 980px) { .mig-grid { grid-template-columns: 1fr 1fr; } }
.mig-grid .big, .price-grid .big { font-size: clamp(2rem, 3.5vw, 3.1rem); }
.mig-lead { font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.mig { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mig li { padding: 24px 26px 24px 76px; background: var(--sand); border-radius: var(--r); position: relative; }
.mig li::before { content: ""; position: absolute; left: 26px; top: 28px; width: 28px; height: 32px; border-radius: 999px 999px 4px 4px; background: var(--green-2); }
.mig li:last-child { background: var(--green); color: var(--on-green); }
.mig li:last-child::before { background: var(--coral); }
.mig li:last-child h3 { color: #fff; }
.mig h3 { font: 600 1.4rem/1.2 var(--serif); margin-bottom: 6px; }
.mig p { margin: 0; font-size: 1.02rem; }

/* Price */
.price-sec { background: var(--sand); }
.price-grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 980px) { .price-grid { grid-template-columns: 1.1fr 0.9fr; } }
.price-grid > * { min-width: 0; }
.example { padding: 18px 22px; background: var(--paper); border-radius: 14px; font-size: 1.05rem; }
.weigh { display: grid; gap: 14px; margin-top: 24px; }
.weigh p { margin: 0; font-size: 1.02rem; }
.tiers-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tiers-plain li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 26px; background: var(--paper); border-radius: 14px; }
.tiers-plain span { font-size: 1.05rem; color: var(--ink); }
.tiers-plain b { font: 600 clamp(1.7rem, 3vw, 2.3rem)/1 var(--serif); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tiers-plain li.mid { background: var(--green); color: var(--on-green); padding-block: 28px; }
.tiers-plain li.mid span { color: var(--on-green); }
.tiers-plain li.mid:nth-child(2) { border-radius: 999px 999px 14px 14px / 48px 48px 14px 14px; padding-top: 40px; }
.tiers-plain li em { display: block; font-style: normal; font-size: 0.92rem; font-weight: 650; color: var(--coral-2); margin-bottom: 4px; }
.tiers-plain li > div { display: grid; }
.tiers-plain .muted { background: var(--sand-2); }
.tiers-plain .muted b { font-size: 1.3rem; }

/* How it starts */
.start-sec { background: var(--paper); }
.start { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
@media (min-width: 860px) { .start { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.start h3 { font: 600 clamp(1.4rem, 2.2vw, 1.8rem)/1.15 var(--serif); margin-bottom: 10px; }
.start h3::before { content: ""; display: block; width: 26px; height: 30px; margin-bottom: 18px; border-radius: 999px 999px 4px 4px; background: var(--green-2); }
.start li:last-child h3::before { background: var(--coral); }
.start p { margin: 0; font-size: 1.05rem; }

/* Audience */
.who-sec { background: var(--sand); }
.audience { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
@media (min-width: 860px) { .audience { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.audience h3 { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--serif); margin-bottom: 10px; }
.audience h3 a { color: var(--ink); text-decoration-thickness: 3px; text-decoration-color: var(--coral); text-underline-offset: 6px; }
.audience h3 a:hover { color: var(--green); }
.audience p { margin: 0; font-size: 1.05rem; }

/* FAQ */
.faq-sec { background: var(--paper); }
.faq-h { font: 600 clamp(2rem, 3.6vw, 3rem)/1.08 var(--serif); letter-spacing: -0.03em; margin: 0 0 28px; max-width: 18ch; }
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; } .faq-grid .faq-h { position: sticky; top: 110px; } }
.faq-grid .faq { margin-top: 0; }
.home .faq details { background: var(--sand); }
.home .faq-a p { font-size: 1.02rem; }

/* Closing */
.home .final-home { padding: clamp(110px, 13vw, 200px) 0; }

/* Reveal on scroll (content stays visible without JS or with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .home .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease var(--d, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms); }
  .js .home .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .relay-ana .av, .relay-dot, .typing i { animation: none !important; }
  .relay-dot { left: auto; right: 0; }
  .relay-ana .av { outline: 0; }
  .rail .chip { transition: none; }
}