/* Tabor, guias de busca (segunda leva). Só o que o estilo.css não tem: texto corrido, resposta em destaque,
   lista numerada de passos, bloco "Baixe o modelo", mock estático da mensagem e "Leia também".
   Mesmos tokens do estilo.css. Sem gradiente, sem desfoque, sem animação. */

.pg--guia{padding-bottom:0}
/* a migalha e a linha "Por Tabor" alinham com o H1: o estilo.css as deixa 24 px para dentro no computador */
.migalhas,.byline{box-sizing:content-box}
.byline{margin-top:12px}
.pg--guia .pg__h1{max-width:14em}

/* resposta em destaque, logo depois do H1 */
.resposta{padding:20px 16px 8px}
.resposta__in{max-width:1200px;margin:0 auto}
.resposta__caixa{max-width:46rem;margin:0;padding:20px 20px 20px 22px;background:var(--cartao);border-radius:var(--raio);box-shadow:0 0 0 1px var(--cartao-borda) inset;border-left:5px solid var(--link)}
.resposta__rot{margin:0 0 8px;font:600 13px/1.2 "Switzer",sans-serif;color:var(--texto-2)}
.resposta__p{margin:0;font-size:18px;line-height:1.55;color:var(--texto);text-wrap:pretty}

/* texto corrido */
.guia-sec{padding:44px 16px 8px}
.guia-sec--tab{padding-top:36px}
.prosa{max-width:46rem}
.prosa--larga{max-width:1000px}
.prosa h2{margin:0 0 14px;font:700 28px/1.1 "Host Grotesk",sans-serif;letter-spacing:-.03em;text-wrap:balance}
.prosa h2:not(:first-child){margin-top:44px}
.prosa h3{margin:26px 0 8px;font:700 20px/1.2 "Host Grotesk",sans-serif;letter-spacing:-.02em}
.prosa p{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--corpo);text-wrap:pretty}
.prosa p:last-child{margin-bottom:0}
.prosa ul{margin:0 0 14px;padding-left:22px;font-size:17px;line-height:1.6;color:var(--corpo)}
.prosa ul li{margin:0 0 6px;padding-left:2px}
.prosa .tab-escala{max-width:1000px;margin:20px 0 0}
.prosa .tab-escala__nota{margin:12px 0 22px;font:500 13px/1.3 "Switzer",sans-serif;color:var(--texto-2)}
.prosa--larga .tab-escala{margin-top:20px}

/* passos numerados */
.passos-lista{list-style:none;margin:6px 0 14px;padding:0;counter-reset:passo}
.passos-lista li{position:relative;counter-increment:passo;margin:0 0 14px;padding:2px 0 0 46px;font-size:17px;line-height:1.6;color:var(--corpo);min-height:32px}
.passos-lista li::before{content:counter(passo);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--btn-fundo);color:var(--btn-texto);font:600 15px/32px "Switzer",sans-serif;text-align:center}
.passos-lista b{color:var(--texto)}

/* baixe o modelo */
.baixe{max-width:1000px;margin:22px 0 0;padding:20px;background:var(--cartao);border-radius:var(--raio);box-shadow:0 0 0 1px var(--cartao-borda) inset}
.baixe__t{margin:0 0 6px;font:700 20px/1.2 "Host Grotesk",sans-serif;letter-spacing:-.02em}
.baixe__p{margin:0 0 14px;font-size:16px;line-height:1.5;color:var(--corpo)}
.baixe__bts{display:flex;flex-direction:column;gap:10px}
.baixe__bts .btn{width:100%}
.baixe__nota{margin:12px 0 0;font:500 13px/1.4 "Switzer",sans-serif;color:var(--texto-2)}

/* mock estático da mensagem (as classes .wa-* vêm do estilo.css) */
.guia-wa{margin:0;max-width:340px}
.guia-wa__tela{border-radius:22px;overflow:hidden;background:var(--wa-fundo);box-shadow:var(--sombra-obj)}
.guia-wa .wa-corpo{flex:none;overflow:visible}
.guia-wa .wa-fio{transition:none;padding-bottom:16px}
.guia-wa .wa-bts{width:88%}
.guia-wa .wa-bt{cursor:default}
.guia-wa .wa-bt:hover{background:var(--wa-in)}
.guia-wa .wa-bt:active{transform:none}
.guia-wa__leg{margin:12px 0 0;font:500 13px/1.4 "Switzer",sans-serif;color:var(--texto-2)}
.guia-tabor{padding:44px 16px 8px}
.guia-tabor__in{max-width:1200px;margin:0 auto;display:grid;gap:28px;align-items:center}
.guia-tabor__txt h2{margin:0 0 14px;font:700 28px/1.1 "Host Grotesk",sans-serif;letter-spacing:-.03em;text-wrap:balance}
.guia-tabor__txt p{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--corpo);text-wrap:pretty}
.guia-tabor__acao{margin-top:20px}
.guia-tabor__acao .btn{width:100%}
.guia-tabor__cena{display:flex;justify-content:center}

/* leia também */
.leia{padding:44px 16px 56px}
.leia__in{max-width:1200px;margin:0 auto}
.leia__t{margin:0 0 16px;font:700 28px/1.1 "Host Grotesk",sans-serif;letter-spacing:-.03em}
.leia__lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.leia__lista a{display:block;min-height:44px;padding:16px 18px;background:var(--cartao);border-radius:var(--raio);box-shadow:0 0 0 1px var(--cartao-borda) inset;text-decoration:none;color:var(--texto);transition:background-color .2s}
.leia__lista a:hover{background:#fff}
.leia__lista strong{display:block;font:700 18px/1.2 "Host Grotesk",sans-serif;letter-spacing:-.02em}
.leia__lista span{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:var(--texto-2)}

@media (min-width:640px){
  .prosa h2,.guia-tabor__txt h2,.leia__t{font-size:32px}
  .baixe__bts{flex-direction:row;flex-wrap:wrap}
  .baixe__bts .btn{width:auto}
  .guia-tabor__acao .btn{width:auto}
  .leia__lista{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:960px){
  .resposta{padding:28px 24px 8px}
  .resposta__caixa{padding:26px 28px 26px 30px}
  .resposta__p{font-size:20px}
  .guia-sec{padding:64px 24px 8px}
  .guia-sec--tab{padding-top:48px}
  .prosa h2,.guia-tabor__txt h2,.leia__t{font-size:38px;letter-spacing:-.035em}
  .prosa h3{font-size:22px}
  .guia-tabor{padding:64px 24px 8px}
  .guia-tabor__in{grid-template-columns:1.2fr 1fr;gap:64px}
  .leia{padding:64px 24px 80px}
  .leia__lista{grid-template-columns:repeat(3,1fr)}
}

/* tabela dos guias no celular: rótulo e nome na mesma linha, para o cartão do domingo não ficar comprido */
@media (max-width:719px){
  .prosa .tab-escala td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 16px;text-align:right;font-size:16px}
  .prosa .tab-escala td::before{display:block;flex:none;margin:0;text-align:left}
}

.prosa .baixe__p{font-size:16px;margin:0 0 14px}
.prosa .baixe__nota{margin:12px 0 0;font:500 13px/1.4 "Switzer",sans-serif;color:var(--texto-2)}

/* cinema: a resposta rápida é uma faixa azul; "onde o Tabor entra" é uma faixa tinta */
.resposta{padding:40px 16px 44px}
.resposta__caixa{border-left-color:var(--coral)}
.guia-tabor{padding:56px 16px}
@media (min-width:960px){.resposta{padding:56px 24px 64px}.guia-tabor{padding:88px 24px}}

.resposta__modelo{margin:14px 0 0}
.resposta__modelo a{display:inline-flex;align-items:center;min-height:44px}