/* Protótipo do site da Fissena: estrutura do template Financer (index-2),
   reescrita com código próprio; nenhum arquivo do template entra aqui.
   Cores: o canal fiscal do design system da e45 (azul profundo #2A4A7A e
   azul vivo #3E7FC4) no lugar do degradê rosa e violeta do template. */

@font-face { font-family: "Urbanist"; src: url("assets/fontes/urbanist-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("assets/fontes/urbanist-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("assets/fontes/urbanist-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("assets/fontes/urbanist-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fontes/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fontes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --azul: #2A4A7A;          /* azul profundo, o canal fiscal da e45: marca e ação */
  --azul-forte: #1F3A63;    /* hover da ação */
  --azul-vivo: #3E7FC4;     /* dado, destaque e fim do degradê */
  --azul-claro: #A9C8EA;    /* acento sobre fundo escuro */
  --celeste: #EAF1FA;       /* fundo dos selos e dos ícones */
  --marinho: #0F1E36;       /* faixas escuras */
  --marinho-2: #16294A;
  --tinta: #0F1B2D;
  --tinta-suave: #56627A;
  --fundo: #F5F8FC;
  --branco: #FFFFFF;
  --linha: #E1E7F0;
  --verde: #1F7A44;         /* "autorizada", o positivo da e45 */
  --verde-fundo: #E7F4EC;
  --degrade: linear-gradient(135deg, #3E7FC4 0%, #2A4A7A 100%);
  --titulo: "Urbanist", system-ui, sans-serif;
  --corpo: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --largura: 1200px;
  --raio: 14px;
  --sombra: 0 24px 60px -30px rgba(15, 30, 54, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--branco); color: var(--tinta); font: 400 16px/1.65 var(--corpo); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(38px, 5vw, 60px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: 20px; line-height: 1.3; }
h1 em, h2 em { font-style: normal; color: var(--azul-vivo); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 3px; }

.dentro { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
.secao { padding-block: 110px; }
.cab { margin-bottom: 56px; }
.cab--centro { text-align: center; max-width: 760px; margin-inline: auto; }
.cab--centro h2 { margin-top: 14px; }
.secao__intro { margin-top: 16px; color: var(--tinta-suave); }

.pular { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--azul); color: #fff; border-radius: 8px; }
.pular:focus { left: 16px; }

/* selo em pílula clara, como as etiquetas do Financer */
.selo { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--celeste); color: var(--azul); font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.selo--escuro { background: rgba(169, 200, 234, .14); color: var(--azul-claro); }
.selo-status { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--verde-fundo); color: var(--verde); font: 600 12px var(--corpo); vertical-align: middle; }

/* botões em pílula */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 999px; font: 600 15px var(--titulo); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
.botao--cheio { background: var(--azul); color: #fff; }
.botao--cheio:hover { background: var(--azul-forte); }
.botao--contorno { border: 1.5px solid var(--azul); color: var(--azul); }
.botao--contorno:hover { background: var(--azul); color: #fff; }
.botao--claro { background: #fff; color: var(--marinho); }
.botao--claro:hover { background: var(--celeste); }
.botao--grande { min-height: 54px; padding: 0 30px; font-size: 16px; }
.link-seta { font: 600 15px var(--titulo); color: var(--tinta); text-decoration: none; }
.link-seta::after { content: " →"; color: var(--azul-vivo); }
.link-seta:hover { color: var(--azul); }

.icone-redondo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--degrade); box-shadow: 0 14px 30px -14px rgba(42, 74, 122, .8); }
.icone-redondo svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* TOPO */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topo.is-rolado { border-bottom-color: var(--linha); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.topo__marca img { width: 146px; }
.topo__nav { display: flex; gap: 4px; padding: 6px; border: 1px solid var(--linha); border-radius: 999px; }
.topo__nav a { padding: 8px 16px; border-radius: 999px; color: var(--tinta); font: 600 14px var(--titulo); text-decoration: none; }
.topo__nav a:hover, .topo__nav a.is-ativo { background: var(--celeste); color: var(--azul); }
.topo__lado { display: flex; align-items: center; gap: 18px; }
.topo__e45 img { width: 40px; }
.topo__menu { display: none; min-height: 44px; padding: 0 18px; border: 1px solid var(--linha); border-radius: 999px; background: #fff; font: 600 14px var(--titulo); color: var(--tinta); }
.topo__movel { display: grid; padding: 8px 16px 20px; border-top: 1px solid var(--linha); background: #fff; }
.topo__movel[hidden] { display: none; }
.topo__movel a { padding: 12px 0; color: var(--tinta); font: 600 16px var(--titulo); text-decoration: none; border-bottom: 1px solid var(--linha); }

/* ABERTURA */
.abertura { position: relative; overflow: hidden; padding: 72px 0 96px; background: radial-gradient(900px 500px at 85% 20%, rgba(62, 127, 196, .12), transparent 70%), var(--branco); }
.abertura__grade { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.abertura h1 { margin-top: 20px; }
.abertura__sub { margin-top: 22px; max-width: 54ch; font-size: 18px; color: var(--tinta-suave); }
.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.abertura__nota { margin-top: 26px; font: 500 13px var(--mono); color: var(--tinta-suave); }
.abertura__arte { position: relative; min-height: 520px; }
.riscos { position: absolute; left: 4%; top: 2%; width: 80px; height: 70px; background: repeating-linear-gradient(115deg, transparent 0 10px, rgba(42, 74, 122, .35) 10px 12px); -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.foto { margin: 0; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--alta { position: absolute; right: 0; top: 178px; width: 42%; aspect-ratio: 4 / 5; }
.foto--baixa { position: absolute; right: 0; top: 0; width: 42%; aspect-ratio: 3 / 2; }
.cartao { position: absolute; z-index: 2; border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao--grafico { left: 0; top: 64px; width: 53%; padding: 26px 24px 22px; background: linear-gradient(180deg, #F0F6FD, #E1ECF8); }
.cartao__raio { position: absolute; right: -14px; top: -18px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--degrade); }
.cartao__raio svg { width: 22px; fill: #fff; }
.cartao__rotulo { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.cartao__valor { margin-top: 6px; font: 700 30px var(--titulo); color: var(--tinta); }
.barras { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 18px; }
.barras i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--degrade); }
.cartao--escuro { left: 0; top: 384px; width: 53%; padding: 18px 22px; background: var(--marinho); }
.cartao--escuro .cartao__rotulo { color: var(--azul-claro); }
.cartao--escuro .cartao__valor { color: #fff; font-size: 24px; }
.abertura__exemplo { position: absolute; left: 0; bottom: 8px; font: 500 12px var(--mono); color: var(--tinta-suave); }

/* FAIXA DE TERMOS */
.faixa-termos { overflow: hidden; background: var(--marinho); padding: 26px 0; }
.faixa-termos__lista { display: flex; gap: 56px; width: max-content; margin: 0; padding: 0; list-style: none; animation: correr 40s linear infinite; }
.faixa-termos__lista li { color: #fff; font: 700 22px var(--titulo); white-space: nowrap; opacity: .9; }
.faixa-termos__lista li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 14px; border-radius: 2px; background: var(--azul-vivo); vertical-align: middle; }
@keyframes correr { to { transform: translateX(-50%); } }

/* POR QUE */
.tres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tres__card { padding: 44px 32px; border-radius: var(--raio); text-align: center; transition: background .25s, transform .25s; }
.tres__card:hover, .tres__card--destaque { background: var(--celeste); }
.tres__card h3 { margin-top: 24px; }
.tres__card p { margin-top: 12px; color: var(--tinta-suave); }

/* PARA QUEM */
.para-quem { background: var(--fundo); }
.para-quem__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.para-quem__arte { position: relative; padding: 40px 40px 40px 60px; }
.para-quem__arte .foto { aspect-ratio: 4 / 5; max-width: 420px; }
.flutua { position: absolute; display: grid; place-items: center; border-radius: 12px; box-shadow: var(--sombra); }
.flutua svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flutua--icone { left: 20px; top: 70px; width: 64px; height: 64px; background: #fff; }
.flutua--icone svg { width: 30px; stroke: var(--azul-vivo); }
.flutua--marca { left: 20px; bottom: 90px; width: 92px; height: 92px; background: var(--degrade); }
.flutua--marca svg { width: 36px; fill: #fff; stroke: none; }
.flutua--medidor { right: 0; top: 110px; width: 170px; padding: 18px; background: #fff; text-align: center; }
.flutua--medidor svg { width: 110px; transform: rotate(-90deg); }
.medidor__trilho { fill: none; stroke: var(--celeste); stroke-width: 10; stroke-dasharray: 4 4; }
.medidor__arco { fill: none; stroke: var(--azul-vivo); stroke-width: 10; stroke-dasharray: 289; stroke-dashoffset: 260; stroke-linecap: round; }
.flutua--medidor p { position: absolute; left: 0; right: 0; top: 52px; display: grid; }
.flutua--medidor small { font-size: 10px; color: var(--tinta-suave); }
.flutua--medidor b { font: 700 22px var(--titulo); }
.flutua__nota { display: block; margin-top: 6px; font: 500 11px var(--mono); color: var(--tinta-suave); }
.para-quem h2 { margin-top: 16px; }
.numerada { margin: 36px 0 0; padding: 0; list-style: none; counter-reset: n; }
.numerada li { padding: 20px 0; border-bottom: 1px solid var(--linha); counter-increment: n; }
.numerada h3::before { content: counter(n) ". "; color: var(--azul-vivo); }
.numerada p { margin-top: 6px; color: var(--tinta-suave); }

/* COMO FUNCIONA */
.como { position: relative; overflow: hidden; background: var(--marinho); color: #fff; }
.como::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 10% 100%, rgba(62, 127, 196, .25), transparent 70%), radial-gradient(600px 400px at 95% 0%, rgba(62, 127, 196, .18), transparent 70%); }
.como .dentro { position: relative; }
.como h2 em { color: var(--azul-claro); }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.passos li { position: relative; }
.passos li:not(:last-child)::after { content: ""; position: absolute; top: 32px; left: calc(50% + 52px); width: calc(100% - 64px); border-top: 2px dashed rgba(169, 200, 234, .4); }
.passos h3 { margin-top: 26px; }
.passos p { margin-top: 10px; color: #C3D2E6; }

/* RECURSOS */
.seis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.seis li { padding: 36px 30px; border-radius: var(--raio); background: #fff; box-shadow: 0 18px 50px -32px rgba(15, 30, 54, .45); border: 1px solid var(--linha); transition: transform .25s; }
.seis li:hover { transform: translateY(-6px); }
.seis .icone-redondo { width: 56px; height: 56px; }
.seis .icone-redondo svg { width: 24px; height: 24px; }
.seis h3 { margin-top: 22px; }
.seis p { margin-top: 10px; color: var(--tinta-suave); font-size: 15px; }

/* REFORMA */
.reforma { padding-top: 40px; }
.reforma__caixa { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 64px; border-radius: 20px; background: radial-gradient(500px 300px at 90% 50%, rgba(62, 127, 196, .35), transparent 70%), var(--marinho); color: #fff; overflow: visible; }
.reforma h2 { margin-top: 16px; }
.reforma__texto p:not(.selo) { margin-top: 16px; color: #C3D2E6; }
.reforma .botao { margin-top: 28px; }
.nota { justify-self: center; width: min(100%, 340px); padding: 24px; border-radius: 18px; background: #fff; color: var(--tinta); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); transform: rotate(4deg) translateY(-10px); }
.nota__cab { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--linha); }
.nota__cab b { display: block; font: 700 16px var(--titulo); }
.nota__cab small { font: 500 12px var(--mono); color: var(--tinta-suave); }
.nota__cab .selo-status { margin-left: auto; }
.nota__linhas { margin: 14px 0; display: grid; gap: 8px; }
.nota__linhas div { display: flex; justify-content: space-between; font-size: 14px; }
.nota__linhas dt { color: var(--tinta-suave); }
.nota__linhas dd { margin: 0; font: 500 13px var(--mono); }
.nota__qr { display: grid; grid-template-columns: repeat(3, 14px); gap: 4px; }
.nota__qr i { height: 14px; background: var(--tinta); }
.nota__qr i:nth-child(2n) { background: var(--azul-vivo); }

/* PLANOS */
.planos { background: radial-gradient(800px 400px at 50% 100%, rgba(62, 127, 196, .08), transparent 70%); }
.precos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.preco { display: flex; flex-direction: column; padding: 40px 32px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); box-shadow: 0 18px 50px -32px rgba(15, 30, 54, .45); text-align: center; }
.preco--destaque { border-color: var(--azul); box-shadow: 0 30px 60px -30px rgba(42, 74, 122, .55); }
.preco__nome { font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.preco__faixa { margin-top: 8px; color: var(--tinta-suave); font-size: 14px; }
.preco__valor { margin: 20px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--linha); font: 700 30px var(--titulo); }
.preco__valor span { font: 500 14px var(--corpo); color: var(--tinta-suave); }
.preco ul { flex: 1; margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--tinta-suave); font-size: 15px; }
.planos__aviso { margin-top: 28px; text-align: center; font-size: 14px; color: var(--tinta-suave); }

/* CONTATO */
.contato { padding-top: 0; }
.contato__caixa { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px 64px; border-radius: 20px; background: var(--degrade); color: #fff; }
.contato__texto p { margin-top: 14px; color: #E4EEF9; }
.contato__form { min-height: 220px; padding: 28px; border-radius: var(--raio); background: #fff; color: var(--tinta); }
.contato__aguardando { color: var(--tinta-suave); font-size: 14px; }

/* ENTENDA */
.entenda { background: var(--fundo); }
.tres-artigos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tres-artigos figure { margin: 0 0 20px; border-radius: var(--raio); overflow: hidden; aspect-ratio: 3 / 2; }
.tres-artigos img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tres-artigos li:hover img { transform: scale(1.04); }
.etiqueta { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--celeste); color: var(--azul); font-size: 13px; font-weight: 500; }
.tres-artigos h3 { margin-top: 14px; }
.tres-artigos p { margin-top: 8px; color: var(--tinta-suave); font-size: 15px; }
.tres-artigos cite { display: block; margin-top: 12px; font: 500 12px var(--mono); font-style: normal; color: var(--tinta-suave); }

/* PERGUNTAS */
.perguntas__grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.perguntas h2 { margin-top: 16px; }
.perguntas .botao { margin-top: 28px; }
.acordeao { display: grid; gap: 12px; }
.acordeao details { border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.acordeao details[open] { border-color: var(--azul-vivo); box-shadow: 0 18px 40px -30px rgba(42, 74, 122, .6); }
.acordeao summary { position: relative; padding: 18px 56px 18px 22px; cursor: pointer; list-style: none; font: 600 17px var(--titulo); }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--celeste); color: var(--azul); font-size: 18px; }
.acordeao details[open] summary::after { content: "−"; background: var(--azul); color: #fff; }
.acordeao details p { padding: 0 22px 20px; color: var(--tinta-suave); }

/* RODAPÉ */
.rodape { background: var(--marinho); color: #C3D2E6; padding: 80px 0 32px; }
.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rodape__marca img { width: 146px; }
.rodape__marca p { margin-top: 18px; max-width: 30ch; }
.rodape__e45 { display: inline-block; margin-top: 20px; }
.rodape__e45 img { width: 56px; }
.rodape h2 { font: 700 17px var(--titulo); color: #fff; margin-bottom: 16px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.rodape a { color: #fff; }
.rodape__legal { display: grid; gap: 4px; padding-top: 24px; font-size: 13px; }

/* ENTRADA AO ROLAR */
.revela { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.revela.is-visivel { opacity: 1; transform: none; }

/* RESPONSIVO */
@media (max-width: 1100px) {
  .topo__nav, .topo__lado .botao { display: none; }
  .topo__menu { display: block; }
  .abertura__grade, .para-quem__grade, .perguntas__grade, .reforma__caixa, .contato__caixa { grid-template-columns: 1fr; }
  .abertura__arte { max-width: 560px; width: 100%; margin-inline: auto; }
  .tres, .seis, .precos, .tres-artigos { grid-template-columns: 1fr 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .para-quem__arte { max-width: 520px; }
}
@media (max-width: 640px) {
  .secao { padding-block: 76px; }
  .abertura { padding-top: 40px; }
  .abertura__arte { min-height: 440px; }
  .cartao--grafico { width: 56%; padding: 20px 16px; }
  .cartao--escuro { top: 330px; width: 56%; }
  .barras { height: 100px; gap: 6px; }
  .foto--alta { top: 130px; }
  .abertura__exemplo { left: 0; }
  .tres, .seis, .precos, .tres-artigos, .passos, .rodape__grade { grid-template-columns: 1fr; }
  .passos li::after { display: none; }
  .reforma__caixa, .contato__caixa { padding: 40px 22px; }
  .para-quem__arte { padding: 20px 10px 20px 30px; }
  .flutua--medidor { width: 140px; }
  .topo__e45 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .revela { opacity: 1; transform: none; }
}