/*
 * calculadora-v2.css: só o que é da página Quanto custa a demora na resposta v2. O comum está em assets/css/v2.css.
 * Texto em _spec/04-COPY/calculadora-v2.md (e, literal, calculadora.md). Superfície clara, herói sem foto,
 * a calculadora num cartão branco (campos à esquerda, resultado à direita no desktop), fechamento esmeralda.
 * Sem contador animado: o resultado entra com opacidade, uma vez.
 */

/* ============================================================ */
/* 1. Herói: página de ferramenta, sem foto                       */
/* ============================================================ */
.pagina--calculadora-v2 .heroi{ display: block; min-height: 0; background: var(--papel); }
.pagina--calculadora-v2 .heroi__texto{
  padding-block: calc(var(--cabecalho-h) + clamp(2.25rem, 5.5vw, 5rem)) clamp(2rem, 4vw, 3.5rem);
}
.pagina--calculadora-v2 .heroi h1{
  max-inline-size: 14ch;
  font-size: clamp(2.5rem, .9rem + 4.4vw, 4.75rem);
  line-height: 1.04;
}
.calc-heroi__grade{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.calc-heroi__texto{ max-inline-size: 40ch; }
.pagina--calculadora-v2 .heroi__apoio{ margin-block-start: 0; max-inline-size: 40ch; }
.pagina--calculadora-v2 .calc-heroi__nota{
  margin-block-start: 1rem;
  font-size: var(--t-pequeno);
  line-height: 1.55;
  color: var(--suave);
}
@media (min-width: 900px){
  .calc-heroi__grade{
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
  }
  .calc-heroi__texto{ padding-block-end: .5rem; }
}

/* ============================================================ */
/* 2. O cartão da calculadora                                     */
/* ============================================================ */
.pagina--calculadora-v2 main > section.calc-sec:not(.heroi){ padding-block: 0 var(--secao); }

[data-calculadora]{
  background: #fff;
  border: 1px solid var(--linha-v2);
  border-radius: 8px;
  padding: clamp(1.25rem, 3.4vw, 3rem);
  box-shadow: 0 1px 2px rgba(11, 61, 46, .05), 0 34px 60px -40px rgba(11, 61, 46, .24);
  color: #151A17;
}
[data-calculadora] [hidden]{ display: none !important; }
[data-calculadora] h2{
  font-size: clamp(1.875rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.08;
}
[data-calculadora] h3{
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.875rem);
  line-height: 1.12;
}
.calc__cab{ margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.calc-apoio{
  margin-block-start: .6rem;
  font-size: var(--t-lide);
  line-height: 1.5;
  color: var(--suave);
}

.calc__grade{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: start;
}
@media (min-width: 900px){
  .calc__grade{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* ---------------------------------------------------------------- */
/* Campos                                                            */
/* ---------------------------------------------------------------- */
.calc-form{ display: flex; flex-direction: column; gap: clamp(1.5rem, 2.6vw, 2rem); }
.calc-campos{ display: flex; flex-direction: column; gap: clamp(1.4rem, 2.4vw, 1.9rem); }
.calc-campo{ gap: .45rem; }
.calc-campo label{ font-size: 1rem; line-height: 1.35; font-weight: 500; color: #151A17; max-inline-size: 46ch; }
.calc-campo__linha{ display: flex; align-items: center; gap: .6rem; }
.calc-campo__unidade{
  flex: none;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: 1rem;
  color: var(--suave);
}
.calc-campo input[type="text"]{
  flex: 0 1 15rem;
  min-inline-size: 0;
  min-block-size: 3rem;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: 1.0625rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.calc-select{
  flex: 0 1 100%;
  max-inline-size: 22rem;
  min-inline-size: 0;
  min-block-size: 3rem;
  padding-inline: var(--sc-3, 1rem) 2.25rem;
  font-size: 1rem;
  color: #151A17;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23556059' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
  border: 1px solid #6C746D;
  border-radius: var(--r-md, 6px);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.calc-select:focus-visible{ border-color: #0B3D2E; box-shadow: 0 0 0 3px var(--anel-claro); }
.calc-select[aria-invalid="true"]{ border-color: #A3302B; }
.calc-campo .ajuda{ max-inline-size: 52ch; line-height: 1.5; color: var(--suave); }
.calc-campo .erro{ max-inline-size: 52ch; line-height: 1.45; }

.calc-acao{ display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.calc-botao{ min-block-size: 3rem; padding-inline: 1.75rem; border-color: #0B3D2E; color: #0B3D2E; }
@media (hover: hover) and (pointer: fine){
  .calc-botao:hover{ background: #0B3D2E; color: #fff; }
}
.calc-botao:focus-visible{ outline: 2px solid #0B3D2E; outline-offset: 3px; box-shadow: none; }
.calc-botao-nota{ font-size: var(--t-pequeno); line-height: 1.5; color: var(--suave); max-inline-size: 46ch; }

/* ---------------------------------------------------------------- */
/* Resultado (à direita no desktop; sticky só no desktop)            */
/* ---------------------------------------------------------------- */
.calc__lado{ align-self: stretch; }
.calc__lado-in{ display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 900px){
  .calc__lado-in{ position: sticky; top: calc(var(--cabecalho-h) + 1.25rem); }
}
.calc-resultado{
  position: relative;
  scroll-margin-top: calc(var(--cabecalho-h) + 1rem);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--papel);
  border: 1px solid var(--linha-v2);
  border-radius: 6px;
}
.calc-resultado__vazio,
.calc-resultado__desatualizado{
  font-size: 1rem;
  line-height: 1.55;
  color: var(--suave);
  max-inline-size: 34ch;
}
.calc-resultado__desatualizado{
  margin-block-end: 1.25rem;
  padding: .7rem .9rem;
  max-inline-size: none;
  color: var(--aviso);
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-borda);
  border-radius: 6px;
  font-size: var(--t-pequeno);
}
.calc-resultado__pronto h3{ margin-block-end: .75rem; }
.calc-resultado__contexto{ margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; color: var(--corpo); max-inline-size: 40ch; }
.calc-resultado__pronto dl{ display: flex; flex-direction: column; margin: 0 0 1.25rem; }
.calc-resultado__pronto dl > div{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-block: 1rem;
  border-block-start: 1px solid var(--linha-v2);
}
.calc-resultado__pronto dt{ margin: 0; font-size: 1rem; line-height: 1.4; color: var(--corpo); max-inline-size: 34ch; }
.calc-resultado__pronto dd{
  margin: 0;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #151A17;
  overflow-wrap: anywhere;
}
.calc-resultado__nota{
  font-size: var(--t-pequeno);
  line-height: 1.5;
  color: var(--suave);
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--linha-v2);
}

/* entrada discreta do resultado (opacidade, uma vez) */
.calc-resultado__pronto.calc-entra{ animation: calc-aparece 600ms var(--curva) 1 both; }
@keyframes calc-aparece{ from{ opacity: 0; } to{ opacity: 1; } }

/* pulso no resultado: o anel do fio de luz, em esmeralda sobre o claro */
.calc-resultado::after{
  content: "";
  position: absolute;
  inset: -5px;
  border: 1.5px solid rgba(11, 61, 46, .6);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
}
.calc-resultado.calc-pulso::after,
.calc__lado[data-calculado].fio-toque .calc-resultado::after{ animation: calc-toque 1.3s var(--curva) 1; }
@keyframes calc-toque{
  0%{ opacity: .9; transform: scale(.97); }
  100%{ opacity: 0; transform: scale(1.04); }
}

/* nota de honestidade: sempre visível, com um fio de 1px acima */
.calc-honestidade{ padding-block-start: 1.25rem; border-block-start: 1px solid var(--linha-v2); }
.calc-honestidade p{ font-size: var(--t-pequeno); line-height: 1.6; color: var(--suave); max-inline-size: 52ch; }

/* ---------------------------------------------------------------- */
/* Como calculamos                                                   */
/* ---------------------------------------------------------------- */
.calc-como{
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: 1px solid var(--linha-v2);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.calc-como h3{ grid-column: 1 / -1; }
.calc-como ol{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: calc-passo;
}
.calc-como ol li{
  counter-increment: calc-passo;
  position: relative;
  padding-inline-start: 2rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--corpo);
  max-inline-size: 52ch;
}
.calc-como ol li::before{
  content: counter(calc-passo) ".";
  position: absolute;
  inset-inline-start: 0;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  color: var(--suave);
}
.calc-como__texto{ display: flex; flex-direction: column; gap: 1rem; }
.calc-como__texto p{ font-size: var(--t-pequeno); line-height: 1.6; color: var(--suave); max-inline-size: 52ch; }
@media (min-width: 900px){
  .calc-como{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ---------------------------------------------------------------- */
/* Link de volta e fechamento                                        */
/* ---------------------------------------------------------------- */
.calc-voltar{ margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.calc-voltar a{
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-weight: 500;
  color: var(--esm);
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  border-radius: 3px;
}
@media (hover: hover) and (pointer: fine){
  .calc-voltar a:hover{ text-decoration-thickness: 2px; }
}
.calc-voltar a:focus-visible{ outline: 2px solid var(--esm); outline-offset: 3px; }

.pagina--calculadora-v2 .fecho__grade{ grid-template-columns: minmax(0, 1fr); }
.pagina--calculadora-v2 .fecho h2{ max-inline-size: 18ch; }
.pagina--calculadora-v2 .fecho .fecho__micro{
  margin-block: 1.25rem 0;
  font-size: var(--t-pequeno);
  line-height: 1.55;
  max-inline-size: 52ch;
}

/* ---------------------------------------------------------------- */
/* Celular                                                           */
/* ---------------------------------------------------------------- */
@media (max-width: 719px){
  .calc-campo__linha input[type="text"]{ flex: 1 1 auto; }
  .calc-select{ max-inline-size: none; }
  .calc-acao{ align-items: stretch; }
  .calc-botao{ inline-size: 100%; }
  /* o botão fixo e a Alta saem de cena enquanto um campo está em foco, para não cobrir o teclado */
  html.fixo-visivel.calc-foco .fixo-cta{ transform: translateY(110%); visibility: hidden; }
  html.calc-foco .alta__botao{ opacity: 0; visibility: hidden; }
}

/* ---------------------------------------------------------------- */
/* Movimento reduzido: nada anima, nada pulsa                        */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .calc-resultado__pronto.calc-entra{ animation: none; }
  .calc-resultado.calc-pulso::after,
  .calc__lado[data-calculado].fio-toque .calc-resultado::after{ animation: none; }
  .calc-campo input[type="text"], .calc-select{ transition: none; }
}