/* Calculadoras: mesma aparência do desenho do Figma, agora com campos de verdade. */
[data-calc] { position: relative; z-index: 1; }
.cl-card {
  background: #fff; border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 22px;
  color: #0b0c0f; font-family: 'Instrument Sans', sans-serif; box-sizing: border-box; width: 100%;
}
.cl-estreito .cl-card { padding: 24px; gap: 18px; }
.cl-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-sobre { font: 500 12px/16px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #6b7078; text-transform: uppercase; }
.cl-selo { font: 500 10px/14px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #0b0c0f; border: 1px solid #6b7078; border-radius: 12px; padding: 5px 10px; }
.cl-selo[hidden] { display: none; }

.cl-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-estreito .cl-modos { grid-template-columns: 1fr; }
.cl-modo { display: flex; gap: 12px; text-align: left; background: #fff; border: 1px solid #d9d6d0; border-radius: 10px; padding: 16px; cursor: pointer; font: inherit; color: inherit; transition: background .2s, border-color .2s; }
.cl-modo:hover { border-color: #6b7078; }
.cl-modo.on { background: #f3f1ed; border: 1.5px solid #0b0c0f; padding: 15.5px; }
.cl-radio { flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid #c5cad0; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; }
.cl-modo.on .cl-radio { border-color: #0b0c0f; }
.cl-radio i { width: 8px; height: 8px; border-radius: 50%; background: #0b0c0f; display: none; }
.cl-modo.on .cl-radio i { display: block; }
.cl-modo-txt { display: flex; flex-direction: column; gap: 3px; }
.cl-modo-txt b { font: 700 17px/22px 'Inter', sans-serif; letter-spacing: -.005em; }
.cl-modo-txt span { font: 400 13px/18px 'Instrument Sans', sans-serif; color: #6b7078; }

.cl-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; align-items: start; }
.cl-estreito .cl-grade { grid-template-columns: 1fr; }
.cl-grupo { display: flex; flex-direction: column; gap: 14px; }
.cl-grupo-t { font: 700 17px/24px 'Inter', sans-serif; margin: 0; padding-top: 6px; border-top: 1px solid #d9d6d0; padding-top: 18px; }
.cl-campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl-rotulo { font: 400 14px/22px 'Instrument Sans', sans-serif; }
.cl-caixa { display: flex; align-items: center; gap: 8px; background: #f3f1ed; border: 1px solid #c5cad0; border-radius: 8px; padding: 0 16px; min-height: 52px; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
.cl-caixa:focus-within { border-color: #0b0c0f; box-shadow: 0 0 0 3px rgba(11, 12, 15, .08); }
.cl-afixo { font: 400 15px/20px 'IBM Plex Mono', monospace; color: #6b7078; }
.cl-entrada { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: 700 18px/22px 'Inter', sans-serif; letter-spacing: -.005em; color: #0b0c0f; padding: 14px 0; width: 100%; }
.cl-entrada::placeholder { color: #9aa0a8; font-weight: 400; }
.cl-ajuda { font: 400 12px/17px 'Instrument Sans', sans-serif; color: #6b7078; margin: 0; }
.cl-erro { font: 500 13px/18px 'Instrument Sans', sans-serif; color: #b6323a; margin: 0; }
.cl-erro[hidden] { display: none; }
.cl-campo.erro .cl-caixa { border-color: #d8464b; background: #fbf1f0; }
.cl-nota { font: 400 13px/18px 'Instrument Sans', sans-serif; color: #6b7078; margin: 0; }

.cl-opc { border: 1px solid #d9d6d0; border-radius: 12px; padding: 21px; display: flex; flex-direction: column; gap: 18px; }
.cl-opc-bt { display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: 700 17px/22px 'Inter', sans-serif; color: #0b0c0f; text-align: left; gap: 12px; }
.cl-opc-bt i { font: 400 18px/22px 'IBM Plex Mono', monospace; font-style: normal; color: #6b7078; }
.cl-opc [hidden] { display: none; }

.cl-etapas { display: flex; flex-direction: column; gap: 12px; }
.cl-et-cab { display: grid; grid-template-columns: 1fr 180px 28px; gap: 12px; font: 500 12px/16px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #6b7078; }
.cl-estreito .cl-et-cab { grid-template-columns: 1fr 96px 28px; }
.cl-et { display: grid; grid-template-columns: 1fr 180px 28px; gap: 12px; align-items: center; }
.cl-estreito .cl-et { grid-template-columns: 1fr 96px 28px; }
.cl-et .cl-entrada { background: #f3f1ed; border: 1px solid #c5cad0; border-radius: 8px; padding: 12px 15px; font: 700 16px/21px 'Inter', sans-serif; }
.cl-et .cl-entrada:focus { border-color: #0b0c0f; }
.cl-del { background: none; border: 0; cursor: pointer; font: 400 22px/22px 'Inter', sans-serif; color: #6b7078; padding: 0; }
.cl-del:hover:not(:disabled) { color: #0b0c0f; }
.cl-del:disabled { opacity: .3; cursor: default; }
.cl-link { background: none; border: 0; border-bottom: 1px solid #c5cad0; padding: 0 0 4px; font: 400 14px/22px 'Instrument Sans', sans-serif; color: #0b0c0f; cursor: pointer; align-self: flex-start; transition: border-color .2s; }
.cl-link:hover { border-bottom-color: #0b0c0f; }
.cl-link[hidden] { display: none; }

.cl-acoes { display: flex; flex-wrap: wrap; gap: 14px 20px; }

/* resultado */
.cl-resultado { background: #0b0c0f; color: #f3f1ed; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.cl-estreito .cl-resultado { padding: 22px; }
.cl-barra { display: block; width: 40px; height: 3px; background: #d8464b; }
.cl-r-rot { font: 500 12px/16px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #c5cad0; margin: 0; }
.cl-r-grande { font: 800 64px/66px 'Inter', sans-serif; letter-spacing: -.03em; color: #f3f1ed; margin: 6px 0 0; overflow-wrap: anywhere; }
.cl-estreito .cl-r-grande { font-size: 44px; line-height: 48px; }
.cl-r-medio { font: 700 28px/32px 'Inter', sans-serif; letter-spacing: -.01em; margin: 6px 0 0; }
.cl-estreito .cl-r-medio { font-size: 22px; line-height: 26px; }
.cl-r-sec { font: 700 18px/24px 'Inter', sans-serif; letter-spacing: -.005em; color: #c5cad0; margin: 0; }
.cl-r-dupla { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.cl-r-lado { padding-left: 20px; border-left: 1px solid #2a2c32; }
.cl-estreito .cl-r-lado { padding-left: 0; border-left: 0; }
.cl-r-duplo, .cl-r-triplo { display: grid; gap: 16px; padding-top: 4px; }
.cl-r-duplo { grid-template-columns: 1fr 1fr; }
.cl-r-triplo { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cl-r-mini { font: 700 18px/24px 'Inter', sans-serif; letter-spacing: -.005em; margin: 6px 0 0; }
.cl-r-linha { border: 0; border-top: 1px solid #2a2c32; width: 100%; margin: 4px 0 0; }
.cl-r-leitura { display: flex; flex-direction: column; gap: 10px; }
.cl-r-leitura p { font: 400 14px/22px 'Instrument Sans', sans-serif; color: #c5cad0; margin: 0; }
.cl-r-nota { font: 400 13px/18px 'Instrument Sans', sans-serif; color: #c5cad0; margin: 0; }
.cl-botao { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: #f3f1ed; color: #0b0c0f; border-radius: 8px; padding: 15px 22px; font: 600 15px/20px 'Instrument Sans', sans-serif; text-decoration: none; transition: transform .2s; }
.cl-botao:hover svg { animation: seta-passa .55s cubic-bezier(.4, 0, .2, 1); }
.cl-botao:active { transform: scale(.97); }
.cl-vazio { min-height: 140px; justify-content: center; }
.cl-vazio-t { font: 400 15px/22px 'Instrument Sans', sans-serif; color: #c5cad0; margin: 0; }

/* régua do equilíbrio (ROI/ROAS) */
.cl-regua { padding: 0 0 6px; }
.cl-regua-barra { position: relative; height: 70px; }
.cl-regua-barra i { position: absolute; top: 34px; height: 6px; display: block; }
.cl-regua-barra i.abaixo { left: 0; background: #2a2c32; }
.cl-regua-barra i.acima { background: #c5cad0; }
.cl-regua-barra b.eq { position: absolute; top: 22px; width: 2px; height: 30px; background: #f3f1ed; transform: translateX(-1px); }
.cl-regua-barra em { position: absolute; top: 0; transform: translateX(-50%); font: 500 11px/16px 'IBM Plex Mono', monospace; letter-spacing: .12em; font-style: normal; color: #c5cad0; white-space: nowrap; }
.cl-regua-barra em.roas-t { color: #f3f1ed; top: 52px; }
.cl-regua-barra u.ponto { position: absolute; top: 29px; width: 16px; height: 16px; border-radius: 50%; background: #d8464b; transform: translateX(-8px); box-shadow: 0 0 0 4px rgba(216, 70, 75, .25); }
.cl-regua-esc { display: flex; justify-content: space-between; font: 400 13px/22px 'Instrument Sans', sans-serif; color: #c5cad0; margin-top: 18px; }

/* funil da conversão */
.cl-funil { display: flex; flex-direction: column; gap: 4px; }
.cl-f-linha { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; }
.cl-estreito .cl-f-linha { grid-template-columns: 1fr; gap: 6px; }
.cl-f-nome { font: 700 15px/22px 'Inter', sans-serif; letter-spacing: -.005em; }
.cl-f-barra { display: flex; align-items: center; gap: 10px; }
.cl-f-barra i { display: block; height: 22px; background: #f3f1ed; border-radius: 2px; min-width: 4px; }
.cl-f-barra b { font: 500 13px/18px 'IBM Plex Mono', monospace; color: #f3f1ed; }
.cl-f-trans { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 2px 0 8px 184px; }
.cl-estreito .cl-f-trans { padding-left: 0; }
.cl-f-taxa { font: 500 13px/18px 'IBM Plex Mono', monospace; color: #f3f1ed; }
.cl-f-ic { font: 400 12px/16px 'IBM Plex Mono', monospace; color: #c5cad0; }
.cl-f-menor { font: 500 10px/14px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: #0b0c0f; background: #f3f1ed; padding: 4px 9px; border-radius: 10px; }

.cl-sim { background: #f3f1ed; border: 1px solid #d9d6d0; border-radius: 12px; padding: 19px; display: flex; flex-direction: column; gap: 10px; }
.cl-sim[hidden] { display: none; }
.cl-sim-t { font: 700 17px/22px 'Inter', sans-serif; margin: 0; }
.cl-sim-d { font: 400 13px/18px 'Instrument Sans', sans-serif; color: #6b7078; margin: 0; }
.cl-sim-linha { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
.cl-estreito .cl-sim-linha { grid-template-columns: 1fr; }
.cl-sim-sel { background: #fff; border: 1px solid #c5cad0; border-radius: 8px; padding: 12px 15px; font: 700 16px/21px 'Inter', sans-serif; cursor: pointer; }
.cl-sim-taxa { background: #fff; min-height: 47px; }
.cl-sim-taxa .cl-entrada { padding: 12px 0; font-size: 16px; }
[data-calc] > * { align-self: stretch; }