/* CredFácil · composição das rotas de SEO (04/11/2026). Mobile-first; o desktop é o min-width.
   Três heros (data-hero): "dividido" (texto + computador com o celular por cima), "centro" (texto no meio e
   o print largo embaixo) e "espelho" (celular grande à esquerda, texto à direita). Todas cobrem 100svh. */

/* ---- hero ---------------------------------------------------------------------------------------- */
/* o fundo é da PRÓPRIA caixa da hero, de ponta a ponta (portão fundo-de-ponta-a-ponta; antes morava num ::before e a
   medida lia a hero sem fundo): luz azul da marca atrás do objeto, um reflexo frio do outro lado e o papel embaixo,
   que é o fundo da seção seguinte (sem costura). Cada luz se apaga antes das bordas: nenhuma vira caixa cortada. */
.hero { position: relative; min-height: 100svh; display: grid; align-content: center; padding: calc(var(--nav-h) + 1.25rem) 0 2rem; isolation: isolate;
  background-color: var(--papel);
  background-image:
    radial-gradient(56rem 34rem at 84% 14%, rgba(37, 99, 235, .13), rgba(37, 99, 235, .05) 45%, transparent 72%),
    radial-gradient(40rem 26rem at 6% 62%, rgba(29, 78, 216, .07), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 46%, var(--papel) 92%); }
/* a luz que respira devagar por cima do fundo (só transform e opacity; parada com "menos movimento"). A caixa dela fica
   DENTRO da hero com folga para o passeio (±3% e escala 1,06), e o degradê vai até o lado mais perto (closest-side):
   apaga antes da borda da própria caixa, então não há corte nem rolagem lateral. */
.hero::before { content: ""; position: absolute; inset: 4% 5% 26% 38%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(96, 141, 255, .18), rgba(96, 141, 255, .06) 55%, transparent); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: hero-luz 14s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
}
@keyframes hero-luz { from { opacity: .45; transform: translate3d(2%, -1%, 0) scale(1); } to { opacity: .9; transform: translate3d(-3%, 2%, 0) scale(1.06); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: center; }
.hero__selo { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--acao-forte); background: rgba(37, 99, 235, .08); border: 1px solid rgba(37, 99, 235, .18); padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem; }
.hero h1 { font-size: var(--f-h1); font-weight: 750; letter-spacing: -0.035em; }
/* o destaque escurece na mesma matiz: o azul de ação sobre a luz azul da hero dava 4,16:1 */
.hero h1 em { font-style: normal; color: var(--acao-forte); }
.hero__sub { font-size: var(--f-1); color: var(--tinta-2); margin-top: 1rem; max-width: 40rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.5rem; }
.hero__ctas .btn { flex: 1 1 9rem; }
.hero__ctas .btn--acao { flex-basis: 100%; }
.hero__nota { margin-top: .875rem; font-size: .875rem; color: var(--tinta-2); }
.hero__nota a { font-weight: 600; }
.cel-oculto { display: none; }
@media (min-width: 30rem) { .cel-oculto { display: inline; } .hero__ctas .btn--acao { flex-basis: auto; } }
@media (min-width: 64rem) { .hero__ctas .btn { flex: 0 0 auto; } }

/* o computador (print real do sistema) e o celular (print real) por cima */
.palco { position: relative; padding-bottom: 6%; }
.janela { border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); box-shadow: 0 40px 80px -40px rgba(11, 18, 32, .45), 0 2px 6px rgba(11, 18, 32, .06); overflow: clip; }
.janela__barra { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--linha); background: #F7F7F5; }
.janela__barra i { width: 10px; height: 10px; border-radius: 50%; background: #DCDBD6; }
/* celular = moldura oficial do Galaxy S26 Ultra (quadro 441×916, tela 412×891 em 13,12) com a tela POR CIMA,
   recortada pelo caminho "portrait" do simulator.js (cantos e furo da câmera exatos); a sombra segue a moldura */
.celular { position: absolute; right: -2%; bottom: 0; width: 27%; aspect-ratio: 441 / 916; container-type: inline-size; filter: drop-shadow(0 26px 30px rgba(11, 18, 32, .32)); }
.celular__moldura { position: absolute; inset: 0; width: 100%; height: 100%; }
.celular__tela { position: absolute; left: 2.9478%; top: 1.3100%; width: 93.4240%; height: 97.2707%; border-radius: calc(100cqw * 29.9355 / 441); overflow: clip; background: #F7F7F5;
  -webkit-mask: url(img/galaxy-s26-ultra-tela.svg) 0 0 / 100% 100% no-repeat; mask: url(img/galaxy-s26-ultra-tela.svg) 0 0 / 100% 100% no-repeat; }
.celular__tela img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero__dica { display: inline-flex; gap: .4rem; align-items: center; margin-top: 1rem; font-weight: 600; text-decoration: none; min-height: 44px; }

@media (min-width: 64rem) {
  .hero[data-hero="dividido"] .hero__grade { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .hero[data-hero="espelho"] .hero__grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .hero[data-hero="espelho"] .palco { order: -1; }
  .hero[data-hero="centro"] .hero__texto { text-align: center; margin-inline: auto; max-width: 52rem; }
  .hero[data-hero="centro"] .hero__sub { margin-inline: auto; }
  .hero[data-hero="centro"] .hero__ctas { justify-content: center; }
  /* o print largo cabe na 1ª tela: a largura sai da altura que sobra depois do texto */
  .hero[data-hero="centro"] .palco { width: min(100%, 56rem, calc((100svh - 29rem) * 1.45)); margin-inline: auto; padding-bottom: 3%; }
  .hero[data-hero="centro"] .hero__selo { margin-bottom: .75rem; }
  .hero[data-hero="centro"] .hero__ctas { margin-top: 1.25rem; }
}
/* espelho: o celular é a peça grande, o computador fica atrás */
.hero[data-hero="espelho"] .palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); align-items: end; gap: 0; padding-bottom: 0; }
.hero[data-hero="espelho"] .janela { grid-area: 1 / 1 / 2 / 3; margin-right: 18%; }
.hero[data-hero="espelho"] .celular { position: relative; grid-area: 1 / 2 / 2 / 3; right: auto; width: 100%; margin-bottom: -4%; }
/* tela baixa: o objeto do herói encolhe pela altura */
@media (min-width: 64rem) and (max-height: 880px) { .hero:not([data-hero="centro"]) .palco { max-width: 46rem; margin-inline: auto; } }

/* ---- seções -------------------------------------------------------------------------------------- */
.secao { padding: var(--sp-sec) 0; }
.secao--papel2 { background: var(--papel-2); }
.cabeca { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); max-width: 48rem; }
.cabeca--centro { margin-inline: auto; text-align: center; }
.rotulo { font-size: .875rem; font-weight: 700; color: var(--acao-forte); margin-bottom: .5rem; }
.cabeca h2 { font-size: var(--f-3); }
.cabeca p { margin-top: .75rem; font-size: var(--f-1); color: var(--tinta-2); }

/* recursos curtos: 2 colunas já no celular, 3 no tablet, 4 no computador */
.recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 37.5rem) { .recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .recursos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.recurso { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; height: 100%; display: grid; align-content: start; gap: .4rem; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.recurso svg { width: 24px; height: 24px; color: var(--acao); }
.recurso h3 { font-size: 1.0625rem; }
.recurso p { font-size: .9375rem; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) { .recurso:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(11, 18, 32, .5); } }
@media (max-width: 29.99rem) { .recurso p { display: none; } .recurso { padding: .875rem; } }

/* texto + print: lado a lado no tablet e no computador; no celular a MESMA imagem, inteira, embaixo */
.dividido { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
@media (min-width: 48rem) { .dividido { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .dividido--inverso > :first-child { order: 2; } }
.lista-ok { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.lista-ok li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; align-items: start; }
.lista-ok li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: rgba(37, 99, 235, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232563EB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---- ferramenta ---------------------------------------------------------------------------------- */
.ferramenta { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); padding: clamp(1rem, .7rem + 1.4vw, 2rem); box-shadow: 0 30px 60px -45px rgba(11, 18, 32, .45); }
.ferr-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, .6rem + 1.6vw, 2rem); }
@media (min-width: 56rem) { .ferr-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-content: start; }
.campo { display: grid; gap: .3rem; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo label, .campo .rot { font-size: .875rem; font-weight: 600; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; font: 500 1rem/1.3 var(--fonte); color: var(--tinta); background: var(--papel); border: 1.5px solid var(--linha); border-radius: 12px; padding: .6rem .8rem; }
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acao); background: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.segmento { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--papel-2); border-radius: 12px; }
.segmento input { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } /* sem inset, o rádio escondido ia parar fora da tela e dava 153 px de rolagem lateral */
.segmento label { display: grid; place-items: center; min-height: 40px; border-radius: 9px; font-size: .9375rem; font-weight: 600; color: var(--tinta-2); cursor: pointer; text-align: center; padding: 0 .25rem; }
.segmento input:checked + label { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(11, 18, 32, .14); }
.segmento input:focus-visible + label { outline: 3px solid var(--acao); }
.resultado { background: var(--noite); color: #fff; border-radius: var(--raio); padding: clamp(1rem, .8rem + 1vw, 1.75rem); display: grid; gap: 1rem; align-content: start; }
.resultado__grande { display: grid; gap: .2rem; }
.resultado__grande span { font-size: .875rem; color: #AEB5C0; font-weight: 600; }
.resultado__grande strong { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.numero { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: .7rem .8rem; display: grid; gap: .1rem; min-width: 0; }
.numero span { font-size: .8125rem; color: #AEB5C0; }
.numero strong { font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.conta { font-size: .875rem; color: #C3C9D2; line-height: 1.55; }
.conta code { font-family: inherit; color: #fff; }
.ferr-nota { font-size: .875rem; color: var(--tinta-2); margin-top: 1rem; }
.ponte { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: center; background: rgba(37, 99, 235, .06); border: 1px solid rgba(37, 99, 235, .18); border-radius: var(--raio); padding: 1rem 1.25rem; }
.ponte p { font-weight: 600; }
@media (min-width: 48rem) { .ponte { grid-template-columns: minmax(0, 1fr) auto; } }

/* tabela que no celular vira cartão por linha (3 valores = 3 colunas) */
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.tabela th, .tabela td { padding: .55rem .6rem; text-align: right; border-bottom: 1px solid var(--linha); }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela th { font-size: .8125rem; color: var(--tinta-2); font-weight: 700; }
.tabela tfoot td { font-weight: 700; border-bottom: 0; }
.tabela-caixa { max-height: 26rem; overflow-y: auto; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }

/* ---- aviso legal ---------------------------------------------------------------------------------- */
/* caixa inteira na cor de ação, sem faixa lateral grossa (o "side-tab" que o verificador acusa como interface de IA;
   a mesma solução do aviso das páginas legais, commit 5470787) */
.aviso { background: color-mix(in srgb, var(--acao) 6%, #fff); border: 1px solid color-mix(in srgb, var(--acao) 28%, #fff); border-radius: var(--raio); padding: 1.25rem; display: grid; gap: .6rem; }
.aviso h2, .aviso h3 { font-size: var(--f-2); }
.aviso small { color: var(--tinta-2); }

/* ---- FAQ: título de um lado, perguntas do outro; abrir uma fecha a outra --------------------------- */
.faq { display: grid; gap: .5rem; }
.faq details { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 1rem; align-items: center; padding: 1rem 1.1rem; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.0625rem; font-weight: 650; }
.faq summary i { width: 24px; height: 24px; position: relative; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 5px; right: 5px; top: 11px; height: 2px; background: var(--acao); border-radius: 2px; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details > div { padding: 0 1.1rem 1.1rem; color: var(--tinta-2); }

/* ---- outras rotas: 2 colunas no celular, 4 no computador ------------------------------------------- */
.rotas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 64rem) { .rotas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rotas a { display: grid; gap: .2rem; min-height: 44px; padding: .9rem 1rem; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); text-decoration: none; color: var(--tinta); font-weight: 650; font-size: .9375rem; line-height: 1.3; transition: transform .2s, border-color .2s; }
.rotas a span { font-weight: 500; font-size: .8125rem; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) { .rotas a:hover { border-color: var(--acao); transform: translateY(-2px); } }

/* ---- fecho escuro com o par de botões ------------------------------------------------------------- */
.fecho { background: radial-gradient(50rem 22rem at 50% 0%, rgba(37, 99, 235, .35), transparent 70%), var(--noite); color: #fff; text-align: center; }
.fecho h2 { font-size: var(--f-3); }
.fecho p { color: #C3C9D2; margin: .75rem auto 0; max-width: 40rem; font-size: var(--f-1); }
.fecho .hero__ctas { justify-content: center; }
.fecho .btn--linha, .fecho .btn--zap { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.fecho .btn--zap svg { color: #4ADE80; }

/* ---- revelar ao entrar na tela (só depois que o script roda: o conteúdo nunca depende de JS) -------- */
@media (prefers-reduced-motion: no-preference) {
  .js-ok .revelar { opacity: 0; transform: translateY(16px); transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 60ms); }
  .js-ok .revelar.visto { opacity: 1; transform: none; }
  .hero .palco { animation: subir .9s cubic-bezier(.22,1,.36,1) both .1s; }
  .celular { animation: subir 1s cubic-bezier(.22,1,.36,1) both .35s; }
}
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---- impressão (nota promissória): só a nota sai no papel ----------------------------------------- */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff; }
  body > *:not(main), main > *:not(#ferramenta), #ferramenta .cabeca, #ferramenta .campos, #ferramenta .ponte, #ferramenta .ferr-nota, #ferramenta .so-tela { display: none !important; }
  #ferramenta { padding: 0 !important; }
  #ferramenta .ferramenta { border: 0; box-shadow: none; padding: 0; }
  #ferramenta .ferr-grade { display: block; }
}