/* Área fim: blog, perguntas em abas, chamada final e rodapé. Usa os tokens de style.css. */

.fim-raiz svg{flex:none}

/* link com seta (texto, sem botão) */
.fim-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px;text-decoration:none;color:var(--tinta);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat;transition:background-size .3s ease}
.fim-link svg{width:18px;height:18px;transition:transform .25s ease}
.fim-link:hover{background-size:0 1px;background-position:100% calc(100% - 9px)}
.fim-link:hover svg{transform:translateX(3px)}

/* ---------- blog ---------- */
.fim-blog{border-top:1px solid var(--linha)}
.fim-blog-topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(28px,4vw,52px)}
.fim-blog-titulo{margin-top:16px;max-width:14em}
.fim-todos svg{width:16px;height:16px}

.fim-cartoes{list-style:none;padding:0;display:grid;gap:16px}
.fim-cartao{position:relative;display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;transition:border-color .25s ease,box-shadow .35s ease,transform .35s ease}
.fim-cartao-foto{aspect-ratio:16/10;overflow:hidden;background:var(--nevoa)}
.fim-cartao-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fim-cartao-corpo{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px}
.fim-cartao-rotulo{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.fim-cartao-titulo{margin:12px 0 8px;font-weight:500;font-size:clamp(21px,1.7vw,24px);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
.fim-cartao-titulo a{text-decoration:none}
/* o cartão inteiro é clicável pelo link do título */
.fim-cartao-titulo a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--raio)}
.fim-cartao-titulo a:focus-visible{outline:none}
.fim-cartao:has(a:focus-visible){outline:2px solid var(--marinho);outline-offset:3px}
.fim-cartao-linha{font-size:15.5px;line-height:1.5;color:var(--cinza)}
.fim-ler{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:22px;font-weight:600;font-size:15px}
.fim-ler i{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--linha);transition:background .25s ease,border-color .25s ease}
.fim-ler i::before{content:"";position:absolute;left:12px;top:19.25px;width:15px;height:1.5px;background:currentColor;transition:transform .25s ease}
.fim-ler i::after{content:"";position:absolute;left:19px;top:15px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .25s ease}
@media (hover:hover){
  .fim-cartao:hover{border-color:#D3D2CA;box-shadow:0 24px 50px -30px rgba(15,27,45,.35);transform:translateY(-3px)}
  .fim-cartao:hover .fim-cartao-foto img{transform:scale(1.04)}
  .fim-cartao:hover .fim-ler i{background:var(--amarelo);border-color:var(--amarelo)}
  .fim-cartao:hover .fim-ler i::before{transform:translateX(2px)}
  .fim-cartao:hover .fim-ler i::after{transform:translateX(2px) rotate(45deg)}
}

/* celular: cartões deslizam de lado, dentro da própria faixa (a página não rola de lado) */
@media (max-width:999px){
  .fim-blog-topo{align-items:flex-start;flex-direction:column}
  .fim-blog-topo .fim-todos{order:2}
  .fim-cartoes{grid-auto-flow:column;grid-auto-columns:min(84%,380px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--lado)*-1);padding:4px var(--lado) 6px;scroll-padding-inline:var(--lado)}
  .fim-cartoes::-webkit-scrollbar{display:none}
  .fim-cartao{scroll-snap-align:start}
}
@media (min-width:1000px){
  .fim-cartoes{grid-template-columns:repeat(3,1fr);gap:24px}
  .fim-cartao-corpo{padding:26px 28px 24px}
}

/* ---------- perguntas ---------- */
.fim-perguntas{background:var(--branco);border-block:1px solid var(--linha)}
.fim-perguntas-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
.fim-perguntas-lado,.fim-perguntas-corpo,.fim-grupo{min-width:0}
.fim-perguntas-titulo{margin:16px 0 18px;max-width:11em}
.fim-perguntas-texto{max-width:26em;margin-bottom:10px}

.fim-abas{display:none}
.fim-js .fim-abas{display:inline-flex;gap:4px;padding:5px;background:var(--nevoa);border-radius:999px;max-width:100%}
.fim-aba{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--cinza);font:500 15px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .25s ease,color .2s ease,box-shadow .25s ease}
.fim-aba:hover{color:var(--tinta)}
.fim-aba[aria-selected="true"]{background:var(--branco);color:var(--tinta);box-shadow:0 1px 2px rgba(15,27,45,.08),0 6px 16px -8px rgba(15,27,45,.25)}

.fim-grupo-nome{margin:40px 0 4px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.fim-grupo:first-child .fim-grupo-nome{margin-top:0}
.fim-js .fim-grupo-nome{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.fim-js .fim-grupos{display:grid;margin-top:18px}
.fim-js .fim-grupo{grid-area:1/1;min-width:0;visibility:hidden;opacity:0}
.fim-js .fim-grupo.fim-ativo{visibility:visible;opacity:1}
.fim-js .fim-grupo.fim-ativo .fim-item{animation:fim-entra .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes fim-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.fim-item{border-bottom:1px solid var(--linha)}
.fim-item h4{font:inherit}
.fim-pergunta{display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;column-gap:20px;width:100%;min-height:44px;padding:22px 0;border:0;background:none;color:var(--tinta);font:500 clamp(17.5px,1.4vw,20px)/1.3 var(--sans);letter-spacing:-.015em;text-align:left;cursor:pointer}
.fim-pergunta i{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--linha);transition:background .25s ease,border-color .25s ease}
.fim-pergunta i::before,.fim-pergunta i::after{content:"";position:absolute;left:9.5px;top:14.75px;width:11px;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fim-pergunta i::after{transform:rotate(90deg)}
.fim-pergunta[aria-expanded="true"] i{background:var(--amarelo);border-color:var(--amarelo)}
.fim-pergunta[aria-expanded="true"] i::after{transform:rotate(0)}
@media (hover:hover){.fim-pergunta:hover i{border-color:var(--tinta)}}
.fim-pergunta:focus-visible{outline-offset:2px}
.fim-raiz:not(.fim-js) .fim-pergunta{cursor:default}
.fim-raiz:not(.fim-js) .fim-pergunta i{display:none}

.fim-js .fim-resposta{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s}
.fim-js .fim-resposta.fim-aberta{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1),visibility 0s}
.fim-resposta>div{min-height:0;overflow:hidden}
.fim-resposta p{max-width:36em;padding:0 52px 24px 0;font-size:16.5px;line-height:1.55;color:#363A42}

@media (min-width:1000px){
  .fim-perguntas-grade{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,7vw,120px)}
  .fim-perguntas-lado{position:sticky;top:calc(var(--topo-altura) + 40px)}
  .fim-pergunta{padding:26px 0}
}

/* ---------- chamada final: uma folha com marcas de corte ---------- */
.fim-chamada{padding:clamp(72px,10vw,140px) 0}
.fim-folha{position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:4px;padding:clamp(48px,7vw,96px) clamp(22px,6vw,96px) clamp(28px,3vw,36px);text-align:center;box-shadow:0 40px 80px -60px rgba(15,27,45,.45)}
.fim-corte{position:absolute;width:30px;height:30px;color:var(--tinta);opacity:.55;pointer-events:none}
.fim-corte::before,.fim-corte::after{content:"";position:absolute;background:currentColor}
.fim-corte::before{width:30px;height:1px}
.fim-corte::after{width:1px;height:30px}
.fim-corte-1{left:-1px;top:-1px;transform:translate(-100%,-100%)}
.fim-corte-1::before{bottom:0;left:-6px}.fim-corte-1::after{right:0;top:-6px}
.fim-corte-2{right:-1px;top:-1px;transform:translate(100%,-100%)}
.fim-corte-2::before{bottom:0;right:-6px}.fim-corte-2::after{left:0;top:-6px}
.fim-corte-3{left:-1px;bottom:-1px;transform:translate(-100%,100%)}
.fim-corte-3::before{top:0;left:-6px}.fim-corte-3::after{right:0;bottom:-6px}
.fim-corte-4{right:-1px;bottom:-1px;transform:translate(100%,100%)}
.fim-corte-4::before{top:0;right:-6px}.fim-corte-4::after{left:0;bottom:-6px}
.fim-folha-cor{position:absolute;left:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);width:56px}
.fim-chamada-titulo{font-size:clamp(36px,5.6vw,76px);line-height:1.02;letter-spacing:-.035em;max-width:13em;margin:0 auto}
.fim-chamada-titulo em{display:block}
.fim-chamada-texto{max-width:30em;margin:22px auto 0}
.fim-chamada-acoes{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:32px}
.fim-folha-slug{display:flex;justify-content:space-between;gap:12px;margin-top:clamp(40px,6vw,72px);padding-top:14px;border-top:1px dashed #D6D5CE;font:400 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
@media (min-width:700px){.fim-chamada-acoes{flex-direction:row;justify-content:center;gap:28px}}
@media (max-width:520px){
  .fim-chamada .conteiner{width:min(100% - 56px,var(--largura))}
  .fim-folha{padding-inline:14px}
  .fim-chamada .btn{width:100%;padding:0 16px;font-size:15.5px}
  .fim-folha-slug{margin-inline:6px}
  .fim-folha-slug span:nth-child(2){display:none}
  .fim-corte{width:20px;height:20px}
  .fim-corte::before{width:20px}
  .fim-corte::after{height:20px}
}

/* ---------- rodapé ---------- */
.fim-rodape{padding:clamp(56px,7vw,96px) 0 calc(28px + env(safe-area-inset-bottom,0px))}
.fim-rodape a{text-decoration:none}
.fim-rodape-grade{display:grid;grid-template-columns:1fr 1fr;gap:44px 24px}
.fim-rodape-marca{grid-column:1/-1}
.fim-rodape-logo{font-size:19px;color:#fff;min-height:44px}
.fim-rodape-logo .marca-cmyk i:nth-child(4){background:#fff}
.fim-rodape-frase{margin-top:14px;max-width:24em;font-size:16px;line-height:1.5;color:#C9D3E1}
.fim-rodape-rotulo{font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--marinho-texto);margin-bottom:14px}
.fim-rodape-coluna ul{list-style:none;padding:0}
.fim-rodape-coluna li a,.fim-rodape-fone{display:inline-block;padding:12px 0;font-size:16px;line-height:1.3;color:#fff;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .25s ease}
.fim-rodape-coluna li a:hover,.fim-rodape-fone:hover{text-decoration-color:currentColor}
.fim-rodape-coluna li+li{margin-top:0}
.fim-rodape-contato{grid-column:1/-1}
.fim-rodape-nome{font-size:16px;color:#C9D3E1}
.fim-rodape-fone{font:500 clamp(24px,2.4vw,30px)/1.1 var(--sans);letter-spacing:-.02em;padding:10px 0}
.fim-rodape-onde{font-size:15px;color:var(--marinho-texto)}
.fim-rodape-base{display:flex;align-items:center;gap:16px;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font:400 12.5px/1.4 var(--mono);color:var(--marinho-texto)}
.fim-rodape-base .barra-cor{flex:none;width:48px}
.fim-nq{white-space:nowrap}
@media (min-width:760px){
  .fim-rodape-grade{grid-template-columns:1.4fr 1fr 1fr 1.1fr}
  .fim-rodape-marca,.fim-rodape-contato{grid-column:auto}
}
/* a barra fixa do celular some na chamada e no rodapé (data-esconde-barra, base.js): o rodapé não precisa de folga extra */
@media (max-width:379px){
  .fim-chamada .btn svg{display:none}
  .fim-chamada .btn{white-space:normal;text-align:center;font-size:15px;padding:10px 14px}
}
@media (max-width:520px){.fim-chamada-titulo{font-size:clamp(30px,9.2vw,44px)}}
@media (max-width:420px){
  .fim-js .fim-abas{display:flex;width:100%}
  .fim-aba{flex:1 1 auto;padding:0 8px;font-size:14.5px}
}

/* entrada discreta: só para quem ainda está abaixo da tela (fim.js põe e tira a classe) */
.fim-js .fim-blog-topo>*,.fim-js .fim-cartao,.fim-js .fim-perguntas-lado>*,.fim-js .fim-folha{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--fim-atraso,0ms),translate .8s cubic-bezier(.2,.7,.2,1) var(--fim-atraso,0ms),border-color .25s ease,box-shadow .35s ease,transform .35s ease}
.fim-js .fim-espera{opacity:0;translate:0 28px}

@media (prefers-reduced-motion:reduce){
  .fim-js .fim-espera{opacity:1;translate:none}
  .fim-js .fim-grupo.fim-ativo .fim-item{animation:none}
  .fim-cartao,.fim-cartao-foto img{transform:none!important}
}