/* jota.ai — páginas de produto e de casos de uso (gerado o HTML por scripts/paginas.py). Base: o CSS das internas da PR 158. Carrega DEPOIS de css/novo.css?v=01d263fa (home v2) e só cobre o que a home não tem:
   topo com painel, título de seção, grade de cartões, passos, faixa de chamada e os blocos próprios
   de algumas páginas (documentos, vagas, notícias, Tap to Pay). Hero, duplas arte + texto (.feature),
   botões, pílulas, perguntas, topo e rodapé vêm prontos da home. */

/* Nomes usados pelos estilos próprios de cada página (casos-de-uso, maquininha, notícias). */
:root{
  --warm:#FEFEFD;--warm-2:#F0F0F0;--ink-faint:#6B6B6B;--line:#E4E3E5;--line-soft:#ECECEC;
  --t-display-3:clamp(32px,4vw,56px);--t-heading:clamp(20px,1.9vw,24px);--t-body-lg:clamp(16px,1.4vw,20px);
  --t-body:16px;--t-label:14px;--t-caption:12px;
  --r:40px;--sec-pad:clamp(80px,11vw,160px);--head-gap:clamp(40px,5vw,80px);--gap-grid:16px;--nav-h:132px;
}
@media(max-width:900px){:root{--nav-h:96px;}}
@media(max-width:560px){:root{--nav-h:80px;--r:32px;}}
.footer{--line:#3B454B;--ink-faint:#AAAAAA;}/* borda dos selos no rodapé, igual à home */

/* ---------- TOPO: título + painel (líquido amarelo ou foto da página), botões dentro do painel ---------- */
.ihero .tag{margin-bottom:24px;}
.ihero h1{max-width:13em;}
.ihero .lede{max-width:720px;}
.ihero .lede+.lede{margin-top:12px;}
.ihero .prompt-panel{height:auto;min-height:358px;padding:48px 24px;}
.prompt-panel.photo{aspect-ratio:2252/1266;justify-content:flex-end;padding-bottom:40px;background:#e9e9e9;}
.prompt-panel>picture{position:static;}
.prompt-panel .panel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
.prompt-panel .panel-fig{width:auto;max-width:min(360px,80%);max-height:300px;border-radius:32px;}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.ctas .chip{height:48px;padding:0 20px;}
@media(max-width:560px){
  .ihero .prompt-panel{min-height:345px;padding:32px 20px;border-radius:32px;}
  .prompt-panel.photo{aspect-ratio:auto;padding-bottom:24px;}
  .ctas .chip,.ctas .btn{height:40px;padding:0 16px;font-size:14px;}
}

/* ---------- SEÇÃO: título centrado como "Simples assim" e "É só escolher aí" ---------- */
.isec{margin-top:var(--sec-pad);}
.isec>.wrap>:first-child{margin-top:0;}
.ititle{text-align:center;margin-bottom:var(--head-gap);}
.ititle .tag{margin-bottom:24px;}
.ititle h2{max-width:14em;margin:0 auto;}
.ititle .lede{max-width:780px;margin:24px auto 0;font-size:clamp(17px,1.66vw,24px);line-height:1.3;color:#5a656d;}
.ititle .lede+.lede{margin-top:12px;}
.ititle .isub{max-width:22em;margin:24px auto 0;font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.03em;color:var(--ink);}
/* selo que não é link (ex.: "Conecta com o Google Calendar"), com o desenho das pílulas de canal da home */
.chans span{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 14px;border-radius:85px;background:var(--chip);font-size:13.9px;font-weight:500;}
.inote{max-width:780px;margin:var(--head-gap) auto 0;text-align:center;font-size:clamp(17px,1.66vw,24px);line-height:1.3;color:#5a656d;}
.iactions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:40px;}
@media(max-width:560px){.ititle .lede,.inote{font-size:16px;line-height:20.8px;letter-spacing:-.48px;}}

/* duplas arte + texto: a da home, com a arte da página no lugar do motion */
.isec .features{margin-top:0;}
/* artes das internas são quadradas e algumas têm texto na borda: proporção natural, sem o recorte 543x660 da home */
.isec .feature .art img{height:auto!important;aspect-ratio:auto!important;}
.feature .copy .btn{margin-top:40px;}
.feature .copy .lede{margin-top:40px;font-size:20px;line-height:1.3;color:#5A656D;}
.feature .copy ul{margin-top:24px;padding-left:20px;font-size:18px;line-height:1.4;color:#5A656D;}
.feature .copy ul li+li{margin-top:8px;}
@media(max-width:560px){.feature .copy .btn{margin-top:20px;}.feature .copy ul{font-size:14px;}}

/* cartões soltos (texto sem arte): o card branco dos planos */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
@media(min-width:761px){.tiles:has(>.tile.wide),.tiles:has(>:nth-child(2):last-child),.tiles:has(>:nth-child(4):last-child):has(h3){grid-template-columns:1fr 1fr;}}
@media(max-width:760px){.tiles{grid-template-columns:1fr;}}
.tile{display:flex;flex-direction:column;gap:16px;padding:40px;border-radius:40px;background:#FEFEFD;color:#1C2327;}
.tile>img.ck{width:24px;height:24px;}
.tile h3{font-size:24px;line-height:1.1;font-weight:500;letter-spacing:-.02em;color:#1C2327;}
.tile p{font-size:16px;line-height:1.4;color:#5A656D;}
.tile p:only-child,.tile>img.ck+p:last-child{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.2px;color:#1C2327;}
.tile.wide{grid-column:1/-1;}
.tile img:not(.ck){border-radius:24px;}
@media(max-width:560px){.tile{padding:32px 24px;border-radius:32px;}.tile h3{font-size:20px;}.tile p:only-child,.tile>img.ck+p:last-child{font-size:18px;}}

/* passos numerados */
.steps-num{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.num-step{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:40px 0;border-bottom:1px solid var(--line);align-items:start;}
.num-step .num{font-size:clamp(40px,4.45vw,64px);line-height:.9;letter-spacing:-.03em;color:#818B90;}/* #AAA dá 2.3:1; texto grande pede 3:1 */
.num-step h3{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.2px;color:var(--black);}
.num-step p{margin-top:8px;font-size:16px;line-height:1.4;color:#5A656D;}
@media(max-width:560px){.num-step{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:28px 0;}.num-step .num{font-size:40px;}}

/* faixa de chamada: o painel líquido do topo da home com o título dentro */
.cta-panel{height:auto;min-height:358px;padding:64px 24px;text-align:center;}
.cta-panel h2{max-width:12em;color:var(--black);}
@media(max-width:560px){.cta-panel{min-height:345px;border-radius:32px;padding:48px 20px;}}

/* respostas com mais de um parágrafo, lista ou link */
.faq details p{max-width:640px;font-size:16px;line-height:1.4;color:#5A656D;}
.faq details p+p{margin-top:12px;}
.faq details p:not(:last-child){padding-bottom:0;}
.faq details ul,.faq details ol{max-width:640px;margin:12px 0 0;padding:0 0 0 22px;font-size:16px;line-height:1.5;color:#5A656D;}
.faq details>ul:last-child,.faq details>ol:last-child{padding-bottom:48px;}
.faq details a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}


/* ---------- PÁGINAS GERADAS: blocos próprios ---------- */
.prose{max-width:740px;margin:0 auto;}
.prose p{font-size:18px;line-height:1.6;color:#5A656D;}
.prose p+p,.prose ul,.prose ol{margin-top:16px;}
.prose ul,.prose ol{padding-left:22px;font-size:18px;line-height:1.6;color:#5A656D;}
.prose li+li{margin-top:6px;}
.prose a,.tile a,.answer a,.inote a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.tile ul,.tile ol{padding-left:20px;font-size:16px;line-height:1.5;color:#5A656D;}
/* trilha: Início / Hub / Página */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:calc(var(--nav-h) + 8px);font-size:14px;color:#5A656D;}
.crumbs a{color:#5A656D;}
.crumbs a[aria-current]{color:var(--ink);font-weight:500;}
.crumbs+.hero{padding-top:32px;}
/* espaço da arte do topo: o designer substitui (data-arte = url da página) */
.hero-visual{margin:56px auto 0;max-width:var(--maxw);min-height:358px;border-radius:var(--r-art);background:var(--yellow) url(/img/novo/liquid.webp?v=79c9c502) center/cover no-repeat;}
.hero-visual.photo{min-height:0;background:#fff;overflow:hidden;max-width:543px;}
.hero-visual.photo img{display:block;width:100%;height:auto;}
/* resposta rápida: definição curta, a primeira coisa citável da página */
.answer{max-width:860px;margin:0 auto;padding:40px;border-radius:40px;background:#FEFEFD;}
.answer h2{font-size:14px;line-height:1.2;font-weight:500;letter-spacing:0;text-transform:uppercase;color:#5A656D;max-width:none;}
.answer p{margin-top:16px;font-size:clamp(18px,1.8vw,24px);line-height:1.35;letter-spacing:-.02em;color:var(--ink);}
/* exemplos de pedidos: balões como os da conversa */
.asks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:960px;margin:0 auto;}
.asks li{padding:14px 20px;border-radius:24px 24px 24px 6px;background:#FEFEFD;font-size:16px;line-height:1.35;color:var(--ink);}
.isec .inote:empty{display:none;}
/* cartões de página (filhas e "veja também") */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.link-card{display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:40px;background:#FEFEFD;color:var(--ink);transition:transform .18s,box-shadow .18s;}
.link-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.08);}
.link-card .tag{align-self:flex-start;}
.link-card h3{font-size:24px;line-height:1.1;font-weight:500;letter-spacing:-.02em;}
.link-card p{font-size:16px;line-height:1.4;color:#5A656D;flex:1;}
.link-card .go{font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:2px;}
.related .link-card{background:transparent;border:1px solid var(--line);}
/* guias do blog */
.guides{max-width:860px;margin:0 auto;}
.guides h2{font-size:clamp(24px,2.6vw,32px);line-height:1.1;max-width:none;}
.guides ul{list-style:none;margin-top:20px;border-top:1px solid var(--line);}
.guides li{border-bottom:1px solid var(--line);}
.guides a{display:block;padding:18px 0;font-size:18px;line-height:1.35;color:var(--ink);}
.guides a::after{content:" →";}
@media(max-width:560px){
  .hero-visual{margin-top:40px;min-height:240px;border-radius:32px;}
  .answer{padding:28px 24px;border-radius:32px;}
  .link-card{padding:28px 24px;border-radius:32px;}
  .asks li{font-size:14px;}
}
/* a home zera a margem de .ctas dentro do .hero; aqui o botão fica abaixo do subtítulo */
.hero.ihero .ctas.hero-ctas{margin-top:32px;}
@media(max-width:560px){.hero.ihero .ctas.hero-ctas{margin-top:24px;}.crumbs{padding-top:calc(var(--nav-h) - 16px);}}