/* A conversa em primeiro plano. */
.header { display:grid; grid-template-columns:37.25% 62.75%; min-height:92px; }
.brand-group { display:flex; align-items:center; gap:24px; padding:24px clamp(28px,3.4vw,64px); }
.brand img { width:158px; height:auto; }
.brand-group p { color:#d1d2c8; font-size:12px; line-height:1.4; }
#site-nav { display:flex; align-items:center; justify-content:flex-end; gap:32px; padding:20px 5%; background:var(--yellow); color:var(--ink); font-weight:700; font-size:15px; }
#site-nav>a { padding-block:10px; }
#site-nav>a:not(.access):hover { text-decoration:underline; text-underline-offset:6px; }
.access { display:inline-flex; align-items:center; gap:13px; padding:12px 22px!important; background:var(--ink); color:var(--paper); border-radius:7px; min-height:46px; }
.access .icon { width:17px; height:17px; }
.access:hover { background:#383a31; }
#menu-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #6d7063; border-radius:7px; background:transparent; }
.hero { display:grid; grid-template-columns:37.25% 62.75%; }
.hero-copy { padding:54px clamp(28px,3.4vw,64px) 72px; }
h1 { font-size:clamp(48px,4.65vw,86px); line-height:1.035; letter-spacing:-.032em; font-weight:900; }
h1 em { display:block; }
.hero-aside { margin-top:31px; }
.hero-aside>p { font-size:clamp(17px,1.45vw,23px); line-height:1.5; max-width:390px; color:#dbdcd3; }
.hero-aside .button { margin-top:32px; min-height:59px; font-size:17px; padding-inline:23px; }
.explore-link { display:flex; width:fit-content; align-items:center; gap:17px; font-size:16px; color:#dadbd2; margin-top:25px; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#dadbd277; }
.explore-link .icon { width:20px; height:20px; transition:transform .2s var(--ease); }
.explore-link:hover .icon { transform:translateX(4px); }
.journey-stage { position:relative; height:870px; background:var(--yellow); color:var(--ink); isolation:isolate; overflow:hidden; }
.journey-stage :focus-visible { outline-color:var(--paper); }
#site-nav :focus-visible, .hero-aside .yellow:focus-visible { outline-color:var(--ink); box-shadow:0 0 0 6px var(--paper); }
.journey-card { position:absolute; border-radius:14px; box-shadow:0 24px 42px #20211d28,0 3px 8px #20211d0b; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-heading h3 { font-size:20px; line-height:1.25; font-weight:800; letter-spacing:-.02em; }
.card-heading .icon { width:21px; height:21px; }
.contacts-card { top:31px; left:5.5%; width:47%; padding:25px 27px 20px; background:var(--paper); transform:rotate(-4deg); z-index:1; }
.contact-tabs { display:flex; gap:26px; font-size:14px; color:#626458; margin-top:22px; }
.contact-tabs>span { padding-bottom:10px; }
.contact-tabs>span:first-child { border-bottom:3px solid var(--yellow); font-weight:800; color:var(--ink); }
.contact-search { display:flex; align-items:center; gap:9px; border:1px solid #20211d24; border-radius:5px; height:37px; padding:0 11px; margin:12px 0; color:#66685b; font-size:13px; }
.contact-search .icon { width:17px; height:17px; }
.contacts-card table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; line-height:1.5; white-space:nowrap; }
.contacts-card th { color:#66685b; font-size:13px; font-weight:600; padding:7px 8px; }
.contacts-card td { padding:9px 8px; border-top:1px solid #20211d18; }
.contacts-card td:nth-child(2) { color:#66685b; }
.selected-contact { background:#eeeede; }
.selected-check { display:inline-grid; place-items:center; background:var(--yellow); width:19px; height:19px; border-radius:3px; margin-right:9px; font-size:13px; font-weight:900; }
.conversation-card { z-index:2; top:182px; left:25%; width:71%; min-height:461px; padding:26px 30px 20px; background:var(--ink); color:var(--paper); border:1px solid #44463c; box-shadow:0 30px 55px #20211d3d,0 4px 12px #20211d15; }
.operator-top { display:flex; justify-content:space-between; gap:15px; font-size:13px; line-height:1.4; }
.operator-top>span:first-child { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.operator-top>span:last-child { color:#bfc1b5; text-align:right; }
.status-dot { display:block; width:7px; height:7px; border-radius:50%; background:#acd18b; }
.operator-person { display:flex; flex-direction:column; align-items:center; margin-top:20px; }
.operator-avatar { display:grid; place-items:center; width:76px; height:76px; background:var(--yellow); color:var(--ink); border-radius:50%; font-size:28px; font-weight:800; }
.operator-person h3 { font-size:29px; line-height:1.2; margin-top:13px; font-weight:800; letter-spacing:-.025em; }
.person-note { display:none; margin-top:5px; font-size:13px; color:#c1c2b7; }
.operator-content { text-align:center; margin-top:18px; min-height:46px; }
.operator-content h4 { font-size:15px; font-weight:600; line-height:1.5; margin:0; }
.operator-content p { color:#bfc1b5; font-size:12px; line-height:1.5; margin-top:2px; }
.operator-waveform { display:flex; align-items:center; justify-content:center; gap:5px; height:60px; margin:10px auto 16px; width:85%; }
.operator-waveform i { display:block; width:4px; max-width:5px; flex:1; height:var(--bar); background:var(--yellow); border-radius:8px; transform-origin:center; }
.demo-steps { display:flex; justify-content:space-between; gap:14px; border-top:1px solid #626455; margin:0; padding:13px 0 0; list-style:none; font-size:12px; color:#c1c2b7; }
.demo-steps li { position:relative; }
.demo-steps li[aria-current] { color:var(--yellow); font-weight:800; }
.demo-steps li[aria-current]::before { content:''; position:absolute; top:-14px; height:2px; left:0; right:0; background:var(--yellow); }
#demo-next { display:flex; align-items:center; gap:20px; min-height:48px; max-width:100%; padding:11px 0 0; margin-top:10px; border:0; background:none; color:var(--paper); font-size:14px; font-weight:800; text-align:left; }
#demo-next .icon { width:19px; height:19px; transition:transform .2s var(--ease); }
#demo-next:hover .icon { transform:translateX(4px); }
.receipt-card { top:617px; right:4%; width:38%; padding:23px 24px 20px; z-index:3; background:var(--paper); transform:rotate(3deg); }
.receipt-card .card-heading h3 { font-size:17px; }
.receipt-card .card-heading .icon { color:#567347; width:18px; }
.receipt-card dl { margin:17px 0 0; font-size:13px; }
.receipt-card dl>div { display:grid; grid-template-columns:78px 1fr; gap:9px; padding:9px 0; border-top:1px solid #20211d20; }
.receipt-card dt { color:#626458; }
.receipt-card dd { margin:0; }
.receipt-card dd>span { background:#e5eedc; color:#416338; padding:3px 6px; border-radius:4px; white-space:nowrap; font-size:11px; }
.receipt-card .receipt-observation { display:none; }
.receipt-card>p { display:flex; align-items:center; gap:8px; border-top:1px solid #20211d20; padding-top:13px; margin-top:7px; font-size:12px; font-weight:700; }
.receipt-card>p .icon { width:17px; height:17px; }
.receipt-card>p .icon:last-child { margin-left:auto; }
.stage-note { position:absolute; bottom:13px; left:5%; right:5%; text-align:right; font-size:11px; line-height:1.5; color:#4b451c; }
@media(min-width:1700px) {
  .journey-stage { height:925px; }
  .hero-copy { padding-top:67px; }
  .contacts-card { top:33px; width:45%; padding:30px; }
  .conversation-card { top:222px; left:16%; width:71%; padding:30px 37px 24px; }
  .operator-top { font-size:15px; }
  .operator-avatar { width:85px; height:85px; font-size:32px; }
  .operator-person h3 { font-size:33px; }
  .operator-content { margin-top:25px; }
  .operator-waveform { height:82px; margin-block:18px 22px; }
  .receipt-card { top:653px; width:33%; padding:25px 28px 22px; }
}
@media(min-width:1101px) and (max-width:1300px) {
  .brand-group { gap:16px; padding-inline:34px; }
  .brand img { width:140px; }
  .brand-group p { font-size:11px; }
  #site-nav { gap:23px; font-size:14px; }
  .hero-copy { padding:50px 34px 60px; }
  .hero-aside .button { font-size:15px; gap:15px; padding-inline:18px; }
  .journey-stage { height:865px; }
  .contacts-card { width:57%; left:5%; padding:24px; }
  .conversation-card { left:24%; width:72%; padding-inline:27px; }
  .receipt-card { right:4%; width:39%; }
  .receipt-card dl>div { grid-template-columns:65px 1fr; gap:5px; }
  .receipt-card dd>span { font-size:10px; }
}
@media(max-width:1100px) {
  .header { display:flex; justify-content:space-between; align-items:center; padding-inline:32px; min-height:80px; border-bottom:1px solid #ffffff19; }
  .brand-group { padding:0; }
  .brand-group p { display:none; }
  #site-nav { padding:0; background:none; color:var(--paper); gap:24px; font-size:14px; }
  .access { border:1px solid #686b60; padding:10px 16px!important; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:45px 40px 48px; }
  .hero-message { display:grid; grid-template-columns:1.15fr 1fr; gap:45px; align-items:center; }
  h1 { font-size:clamp(44px,6.4vw,67px); }
  .hero-aside { margin:0; }
  .hero-aside>p { font-size:20px; }
  .hero-aside .button { width:100%; font-size:16px; }
  .journey-stage { height:845px; }
  .contacts-card { top:40px; width:46%; }
  .conversation-card { top:204px; width:72%; }
  .receipt-card { top:580px; width:35%; right:5%; }
}
@media(max-width:800px) {
  .header { min-height:76px; padding-inline:24px; position:relative; z-index:5; }
  .brand img { width:150px; }
  #menu-toggle { display:flex; }
  #site-nav { display:none; position:absolute; top:75px; left:0; right:0; background:var(--ink); padding:16px 24px 24px; flex-direction:column; align-items:stretch; gap:5px; border-bottom:1px solid #5c5e52; box-shadow:0 15px 25px #0003; }
  #site-nav.is-open { display:flex; }
  #site-nav>a { padding:13px 10px; }
  .access { margin-top:8px; justify-content:space-between; }
  .hero-copy { padding:36px 24px 40px; }
  .hero-message { display:block; }
  h1 { font-size:clamp(40px,11.8vw,67px); line-height:1.035; }
  .hero-aside { margin-top:25px; }
  .hero-aside>p { font-size:18px; line-height:1.5; max-width:410px; }
  .hero-aside .button { margin-top:27px; font-size:16px; min-height:57px; }
  .explore-link { margin-top:22px; font-size:15px; }
  .journey-stage { height:auto; display:flex; flex-direction:column; align-items:center; padding:34px 20px 18px; }
  .journey-card { position:relative; top:auto; left:auto; right:auto; width:100%; max-width:560px; border-radius:12px; }
  .contacts-card { width:91%; transform:rotate(-3deg); padding:21px 20px 38px; }
  .card-heading h3 { font-size:18px; }
  .contact-tabs { margin-top:17px; gap:21px; font-size:13px; }
  .contact-search { margin-block:8px; font-size:12px; }
  .contacts-card table { font-size:13px; }
  .contacts-card td, .contacts-card th { padding:8px 5px; }
  .contacts-card th { font-size:12px; }
  .contacts-card tbody>tr:not(:first-child) { display:none; }
  .selected-check { margin-right:5px; width:16px; height:16px; font-size:11px; }
  .conversation-card { margin-top:-23px; padding:22px 21px 23px; min-height:0; }
  .operator-top { font-size:12px; }
  .operator-top>span:last-child { max-width:117px; }
  .operator-person { margin-top:26px; }
  .operator-avatar { width:73px; height:73px; font-size:26px; }
  .operator-person h3 { font-size:29px; }
  .operator-content { margin-top:22px; }
  .operator-waveform { height:66px; width:100%; gap:3px; margin-block:17px 22px; }
  .operator-waveform i { max-width:4px; }
  .demo-steps { gap:9px; font-size:12px; }
  #demo-next { width:100%; justify-content:space-between; font-size:14px; }
  .receipt-card { align-self:flex-end; width:89%; max-width:485px; margin-top:15px; margin-right:5px; padding:21px; transform:rotate(2deg); }
  .receipt-card .receipt-observation { display:grid; }
  .receipt-card dl { font-size:13px; }
  .receipt-card .card-heading h3 { font-size:17px; }
  .stage-note { position:static; align-self:stretch; text-align:center; font-size:10px; max-width:310px; margin:23px auto 0; }
}
@media(max-width:359px) {
  .journey-stage { padding-inline:13px; }
  .conversation-card { padding-inline:18px; }
  .contacts-card { padding-inline:15px; width:96%; }
  .contacts-card td { font-size:11px; }
  .receipt-card { width:93%; padding:18px; }
}
@media(max-width:800px) {
  .contacts-card .contact-tabs, .contacts-card .contact-search { display:none; }
  .contacts-card .card-heading { margin-bottom:16px; }
  .conversation-card .operator-person { margin-top:18px; }
  .conversation-card .operator-avatar { width:66px; height:66px; }
  .conversation-card .operator-content { margin-top:16px; }
  .conversation-card .operator-waveform { margin-block:12px 17px; }
}