/* ==========================================================================
   ALT TAB · Início (home) page
   ========================================================================== */

/* ---------- 1. Hero ---------- */
.hero { padding: 32px 0 56px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -30% auto auto; width: 620px; height: 620px; background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 28%, transparent), transparent); pointer-events: none; }
.hero-grid { position: relative; display: grid; gap: 36px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero h1 { font-size: clamp(30px, 7.8vw, 46px); max-width: 20ch; }
.hero .lead { margin-top: 16px; font-size: clamp(16px, 2.2vw, 18px); color: var(--on-dark-2); max-width: 48ch; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--navy-line); background: var(--navy-surface); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--on-dark); }
.hero-badges .ic { color: var(--teal); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cta-row .btn-demo, .cta-row .btn-ghost { flex: 1 1 100%; }
@media (min-width: 560px) { .cta-row .btn-demo, .cta-row .btn-ghost { flex: 0 0 auto; } }
@media (min-width: 1024px) {
  .hero { padding: 56px 0 80px; }
  .hero-grid { grid-template-columns: .92fr 1.08fr; align-items: center; gap: 40px; }
  .hd { max-width: 700px; }
}

/* hero demo: chat + the agent's steps */
.hd { width: 100%; max-width: 640px; justify-self: center; }
.hd-wrap { display: grid; grid-template-columns: 1fr; }
.hd-chat, .hd-agent { background: var(--navy-surface); border: 1px solid var(--navy-line); border-radius: var(--radius-lg); }
.hd-chat { display: flex; flex-direction: column; min-height: 318px; overflow: hidden; box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--navy) 60%, transparent); }
.hd-head { display: flex; align-items: center; gap: 10px; padding: 12px 52px 12px 14px; border-bottom: 1px solid var(--navy-line); }
.hd-head img { height: 22px; width: auto; }
.hd-tag { margin-left: auto; font: 500 11px/1.2 var(--f-mono); color: var(--on-dark-2); white-space: nowrap; min-width: 0; }
.hd-msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.hd-msg { max-width: 88%; border-radius: 16px; padding: 10px 13px; font-size: 15px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.hd-msg.is-on { opacity: 1; transform: none; }
.hd-user { align-self: flex-end; background: var(--violet); color: var(--bg); border-bottom-right-radius: 5px; }
.hd-who { display: block; font: 600 11px/1 var(--f-mono); color: color-mix(in srgb, var(--bg) 78%, transparent); margin-bottom: 6px; }
.hd-bot { align-self: flex-start; background: var(--navy); border: 1px solid var(--navy-line); color: var(--on-dark); border-bottom-left-radius: 5px; }
.hd-via { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-mono); color: var(--violet-l); margin-bottom: 6px; }
.hd-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-dark-2); opacity: 0; transition: opacity .25s ease; }
.hd-status.is-on { opacity: 1; }
.hd-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy-line); border-top-color: var(--violet-l); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hd-input { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 10px 10px 10px 14px; min-height: 48px; border-radius: 14px; background: var(--navy); border: 1px solid var(--navy-line); font-size: 15px; }
.hd-input-text { flex: 1; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-input-text:empty { display: none; }
.hd-input-text.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--violet-l); animation: blink 1s steps(1) infinite; }
.hd-placeholder { flex: 1; color: var(--on-dark-2); opacity: .75; }
.hd-input-text:not(:empty) + .hd-placeholder { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.hd-send { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--navy-line); color: var(--on-dark); transform: rotate(-90deg); transition: background-color .2s ease; }
.hd-send.is-on { background: var(--violet-l); color: var(--navy); }
.hd-send .ic { width: 16px; height: 16px; }

/* link between chat and agent (vertical on mobile, horizontal on desktop) */
.hd-link { position: relative; height: 28px; width: 2px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--navy-line) 0 5px, transparent 5px 9px); }
.hd-packet { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--violet-l); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet-l) 25%, transparent); opacity: 0; }
.hd.go-down .hd-packet { animation: pk-down .6s ease-in forwards; }
.hd.go-up .hd-packet { animation: pk-up .6s ease-in forwards; }
@keyframes pk-down { 0% { opacity: 1; top: -6px; } 100% { opacity: 1; top: calc(100% - 6px); } }
@keyframes pk-up { 0% { opacity: 1; top: calc(100% - 6px); } 100% { opacity: 1; top: -6px; } }

.hd-agent { padding: 14px; }
.hd-agent-title { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f-head); color: var(--on-dark); margin-bottom: 10px; }
.hd-agent-title img { width: 22px; height: 22px; }
.hd-steps { display: grid; gap: 8px; }
.hd-step { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; border: 1.5px solid transparent; background: color-mix(in srgb, var(--navy) 50%, transparent); opacity: .5; transition: opacity .25s ease, border-color .25s ease, background-color .25s ease; }
.hd-step b { display: block; font: 600 16px/1.25 var(--f-head); letter-spacing: -.01em; color: var(--on-dark); }
.hd-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 13px/1 var(--f-mono); background: var(--navy-line); color: var(--on-dark); }
.hd-res { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--on-dark-2); min-height: 1.35em; }
.hd-step.is-active { opacity: 1; border-color: var(--violet-l); background: color-mix(in srgb, var(--violet-l) 12%, transparent); }
.hd-step.is-active .hd-n { background: var(--violet-l); color: var(--navy); }
.hd-step.is-done { opacity: 1; }
.hd-step.is-done .hd-n { background: var(--teal); color: var(--navy); font-size: 0; }
.hd-step.is-done .hd-n::before { content: "✓"; font-size: 14px; }
.hd-step.is-done .hd-res, .hd-step.is-active .hd-res { color: var(--on-dark); }
.hd-res .ok { color: var(--teal); font-weight: 600; }
.hd .anim-toggle { top: 8px; right: 8px; }

@media (min-width: 700px) {
  .hd-wrap { grid-template-columns: 1fr 30px 1fr; align-items: stretch; }
  .hd-chat { min-height: 440px; }
  .hd-link { width: 100%; height: 2px; align-self: center; margin: 0; background: repeating-linear-gradient(90deg, var(--navy-line) 0 5px, transparent 5px 9px); }
  .hd-packet { top: 50%; left: 0; margin: -6px 0 0 -6px; }
  .hd.go-down .hd-packet { animation-name: pk-right; }
  .hd.go-up .hd-packet { animation-name: pk-left; }
  .hd-agent { padding: 16px; }
  .hd .anim-toggle { top: 9px; right: auto; left: calc(50% - 15px - 44px); }
}
@keyframes pk-right { 0% { opacity: 1; left: 0; } 100% { opacity: 1; left: 100%; } }
@keyframes pk-left { 0% { opacity: 1; left: 100%; } 100% { opacity: 1; left: 0; } }
@media (prefers-reduced-motion: reduce) { .hd-spin { animation: none; } .hd-msg, .hd-step { transition: none; } }

/* ---------- 2. Numbers ---------- */
.stats { display: grid; gap: 14px; margin-top: 32px; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px; }
.stat-num { font: 600 clamp(56px, 16vw, 76px)/1 var(--f-head); letter-spacing: -.04em; color: var(--violet); font-variant-numeric: tabular-nums; }
.stat-text { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.stat-src { display: block; margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.stat-src a { color: var(--ink); text-underline-offset: 2px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---------- 3. Pains ---------- */
[data-page="inicio"] .section-title { max-width: 24ch; }
.pain-cards { display: grid; gap: 14px; margin-top: 30px; }
.pain { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px; display: flex; flex-direction: column; }
.pain-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); color: var(--violet); }
.pain-ic .ic { width: 28px; height: 28px; }
.pain h3 { margin-top: 20px; font-size: 21px; line-height: 1.25; }
.pain p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.pain-link { align-self: flex-start; margin-top: auto; padding-top: 18px; display: inline-flex; align-items: flex-start; gap: 6px; font-weight: 700; color: var(--violet); text-decoration: none; }
.pain-link .ic { margin-top: .2em; }
.pain-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .pain-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } }

/* ---------- 4. How it works ---------- */
.how-steps { display: grid; gap: 12px; margin-top: 32px; counter-reset: none; }
.how-step { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--radius-lg); background: var(--navy-surface); border: 1px solid var(--navy-line); }
.how-n { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--violet-l); color: var(--navy); font: 700 17px/1 var(--f-mono); }
.how-step p { font-size: 18px; line-height: 1.45; color: var(--on-dark-2); }
.how-step b { font-weight: 700; color: var(--on-dark); }
@media (min-width: 900px) { .how-steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } .how-step { flex-direction: column; gap: 18px; padding: 24px 22px; } }

/* ---------- 5. Comparison ---------- */
.compare .section-sub { max-width: 62ch; }
.table-wrap { margin-top: 30px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp thead { display: none; }
.cmp tr { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 10px; margin-bottom: 10px; }
.cmp th[scope="row"] { display: block; font: 600 17px/1.2 var(--f-head); text-align: left; margin-bottom: 8px; }
.cmp td { display: grid; grid-template-columns: 36% 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.cmp td::before { content: attr(data-label); font: 600 12px/1.35 var(--f-mono); color: var(--ink-2); padding-top: 2px; }
.cmp td.is-us { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--violet) 6%, transparent); margin: 4px -8px -4px; padding: 10px 8px; border-radius: 8px; border-top: 0; }
.cmp td.is-us::before { color: var(--violet); }
@media (min-width: 900px) {
  .cmp { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .cmp thead { display: table-header-group; }
  .cmp tr { display: table-row; border: 0; padding: 0; margin: 0; border-radius: 0; }
  .cmp th, .cmp td { display: table-cell; padding: 18px 20px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
  .cmp thead th { border-top: 0; font: 600 13px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
  .cmp thead th.is-us { color: var(--violet); }
  .cmp th[scope="row"] { display: table-cell; font-size: 16px; margin: 0; width: 24%; }
  .cmp td { font-size: 15px; width: 38%; }
  .cmp td::before { content: none; }
  .cmp td.is-us, .cmp thead th.is-us { background: color-mix(in srgb, var(--violet) 6%, transparent); margin: 0; padding: 18px 20px; border-radius: 0; border-top: 1px solid var(--line); }
  .cmp thead th.is-us { border-top: 0; }
}

/* ---------- 6. Control ---------- */
.controls { display: grid; gap: 14px; margin-top: 32px; }
.ctl { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg-alt); }
.ctl-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); color: var(--violet); }
.ctl h3 { margin-top: 16px; font-size: 20px; line-height: 1.25; }
.ctl p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 18px 22px; border-radius: var(--radius-lg); border: 2px dashed var(--line); color: var(--ink-2); font-size: 15.5px; }
.soon-tag { font: 700 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; background: var(--ink); color: var(--bg); }
@media (min-width: 640px) { .controls { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .controls { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---------- 7. Cost ---------- */
.cost-grid { display: grid; gap: 32px; align-items: center; }
.cost-more { margin-top: 24px; }
.cost-panel { background: var(--navy-surface); border: 1px solid var(--navy-line); border-radius: var(--radius-lg); padding: 20px; }
.cost-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font: 600 13px/1.3 var(--f-mono); color: var(--on-dark); }
.cost-tag { color: var(--on-dark-2); font-weight: 500; }
.cost-rows { display: grid; gap: 16px; margin-top: 18px; }
.cost-rows li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.cost-name { font-weight: 600; font-size: 15.5px; color: var(--on-dark); }
.cost-area { font: 500 12.5px/1.3 var(--f-mono); color: var(--on-dark-2); }
.cost-bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 6px; background: var(--navy); overflow: hidden; }
.cost-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 6px; background: var(--violet-l); }
@media (min-width: 900px) { .cost-grid { grid-template-columns: 1fr 1fr; gap: 56px; } .cost-panel { padding: 28px; } }

/* ---------- 8. Cases by area ---------- */
.uses { display: grid; gap: 14px; margin-top: 32px; }
.use { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg); }
.use-area { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.use h3 { margin-top: 14px; font-size: 21px; }
.use dl { margin: 14px 0 0; display: grid; gap: 12px; }
.use dt { font: 600 11.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.use dd { margin: 6px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.use dd.said { padding-left: 12px; border-left: 3px solid var(--violet-l); font-style: italic; color: var(--ink-2); }
@media (min-width: 700px) { .uses { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .uses { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---------- Trust ---------- */
.norms { display: grid; gap: 12px; margin-top: 30px; }
.norm { display: grid; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--line); }
.norm b { font: 600 20px/1.2 var(--f-head); color: var(--ink); }
.norm span { color: var(--ink-2); font-size: 15px; }
.norm-note { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.sources { margin-top: 28px; padding: 22px 20px; border-radius: var(--radius-lg); background: var(--navy); color: var(--on-dark); }
.sources-title { font-size: 19px; }
.source { margin-top: 16px; padding: 18px; border-radius: var(--radius); background: var(--navy-surface); border: 1px solid var(--navy-line); display: flex; flex-direction: column; }
.source-org { font: 600 12px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--violet-l); }
.source-figs { display: grid; gap: 10px; margin: 14px 0; }
.source-figs li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.4; color: var(--on-dark); }
.source-figs b { font: 600 24px/1 var(--f-head); letter-spacing: -.02em; color: var(--on-dark); }
.source-meta { margin-top: auto; font-size: 13px; color: var(--on-dark-2); }
.source-meta a { color: var(--on-dark); text-underline-offset: 2px; }
.sources :focus-visible { outline-color: var(--violet-l); }
@media (min-width: 900px) {
  .norms { grid-template-columns: repeat(3, 1fr); }
  .sources { padding: 30px 32px; }
  .source-figs { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* ---------- 8. Pioneer ---------- */
.pioneer { background: var(--navy); position: relative; overflow: hidden; }
.pioneer::before { content: ""; position: absolute; right: -200px; bottom: -260px; width: 640px; height: 640px; background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 25%, transparent), transparent); }
.pioneer-grid { position: relative; display: grid; gap: 26px; }
.seats { margin-top: 20px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 2px dashed var(--on-dark-2); border-radius: 12px; font-size: 15px; color: var(--on-dark); }
.perks { display: grid; gap: 12px; }
.perk { padding: 20px; border-radius: var(--radius); background: var(--navy-surface); border: 1px solid var(--navy-line); }
.perk h3 { font-size: 19px; }
.perk p { margin-top: 6px; color: var(--on-dark-2); font-size: 15px; }
.pioneer-cta { display: grid; gap: 16px; }
.pioneer-cta .small { color: var(--on-dark-2); }
.seats a { color: var(--violet-l); }
@media (min-width: 560px) { .pioneer-cta .btn { justify-self: start; } }
@media (min-width: 1024px) {
  .pioneer-grid { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .perks { grid-row: span 2; }
}

/* ---------- FAQ ---------- */
.faq-list { margin-top: 28px; display: grid; gap: 10px; }
.faq details { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative; font: 600 17px/1.35 var(--f-head); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding: 0 20px 20px; color: var(--ink-2); }

/* ---------- Final CTA ---------- */
.final { text-align: center; border-top: 1px solid var(--navy-line); }
.final-inner { display: grid; justify-items: center; }
.final .section-title { margin: 0 auto; }
.final .section-sub { margin: 14px auto 28px; }