/* ============================================================
   Calculadoras de aço — página de ferramentas
   Alinhado ao padrão das PÁGINAS INTERNAS do site (cards
   arredondados var(--radius), sombra suave, inputs com anel de
   foco vermelho — mesma linguagem de .feat e .tc-form-card).
   O leitor de resultado mantém o número-instrumento Archivo Black.
   ============================================================ */

/* O índice sticky reaproveita .cat-nav + .cat-tab do pages.css
   (mesmo componente da página de Produtos, incluindo o comportamento
   de colar no topo quando o header some — classe body.hdr-hidden).
   Aqui as tabs ficam centralizadas; "safe" evita cortar o início
   quando o conteúdo rola no mobile. */
#calc-nav { justify-content: safe center; }

/* ---- Hero com imagem (texto sempre sobre a área vermelha) ----
   Imagem: canteiro tingido de vermelho; céu branco no canto superior
   esquerdo. Texto vai à direita (desktop) e ao fundo (mobile) — ambos
   sobre o vermelho. Scrim vermelho-escuro reforça a legibilidade. */
/* Hero + menu das calculadoras cabem juntos em uma tela:
   altura do hero = 100dvh menos o header (sticky) menos o meno de tabs.
   --nb-h vem de layout.js; --catnav-h é medido em calculadoras.js. */
.page-hero--calc {
  min-height: calc(100vh - var(--nb-h, 72px) - var(--catnav-h, 56px));
  min-height: calc(100dvh - var(--nb-h, 72px) - var(--catnav-h, 56px));
}
.page-hero--calc .page-hero__bg img { object-position: center; }

/* scrim: aprofunda o vermelho onde o texto fica (à direita, no desktop) */
.page-hero--calc::before {
  background: linear-gradient(to left,
    rgba(115,10,10,.92) 0%, rgba(115,10,10,.5) 30%, rgba(115,10,10,0) 62%);
}

/* texto à direita, tudo branco */
.page-hero--calc .page-hero__inner {
  margin-left: auto; margin-right: 0;
  max-width: 540px; text-align: left;
  padding-block: clamp(48px, 8vh, 92px);
}
.page-hero--calc .kicker,
.page-hero--calc .page-hero__title,
.page-hero--calc .page-hero__title .accent { color: #fff; }
.page-hero--calc .kicker::before,
.page-hero--calc .kicker::after { background: #fff; }
.page-hero--calc .page-hero__lede { color: rgba(255,255,255,.92); }

/* mobile: texto ao fundo, largura cheia, scrim de baixo p/ cima */
@media (max-width: 760px) {
  .page-hero--calc::before {
    background: linear-gradient(to top,
      rgba(115,10,10,.95) 0%, rgba(115,10,10,.58) 34%, rgba(115,10,10,0) 68%);
  }
  .page-hero--calc .page-hero__inner {
    margin-left: 0; max-width: none;
    padding-bottom: clamp(30px, 7vw, 48px);
  }
}

/* ---- Lista de painéis ---- */
.calc-list { display: grid; gap: clamp(24px, 3vw, 40px); }

.calc {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  scroll-margin-top: 120px;
  transition: box-shadow .25s var(--ease-weight);
}
.calc:hover { box-shadow: var(--shadow); }
.calc--single { grid-template-columns: 1fr; }

/* coluna do formulário */
.calc__main { padding: clamp(1.6rem, 3vw, 2.6rem); }

.calc__ic {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 12px; color: var(--red); background: rgba(166,3,3,.08);
  transition: background .25s var(--ease-weight), transform .25s var(--ease-weight);
}
.calc__ic svg { width: 24px; height: 24px; display: block; }
.calc:hover .calc__ic { background: rgba(166,3,3,.14); transform: translateY(-2px); }

.calc__name {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  line-height: 1.02; letter-spacing: -.01em;
  margin-top: 1rem;
}
.calc__desc { margin-top: .6rem; color: var(--gray); max-width: 48ch; font-size: .95rem; }

.calc__form { margin-top: clamp(1.3rem, 2.5vw, 1.8rem); display: grid; gap: 1.1rem; }
.calc__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: grid; gap: .4rem; min-width: 0; }
.field > label { font-size: .85rem; font-weight: 600; color: var(--charcoal); }
.field input,
.field select {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  padding: .8em .9em; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance: none; -webkit-appearance: none;
}
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9em center; padding-right: 2.4em;
}
.field input:focus,
.field select:focus {
  outline: none; border-color: var(--red); background: #fff;
  box-shadow: 0 0 0 3px rgba(166,3,3,.12);
}

/* ---- Leitor de resultado (painel de instrumento escuro) ---- */
.calc__out {
  background: var(--ink); color: #fff; position: relative;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex; flex-direction: column;
}
.calc__out-label {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); position: relative; z-index: 1;
}
.calc__big {
  font-family: var(--display); line-height: .9; letter-spacing: -.02em;
  font-size: clamp(2.6rem, 6.4vw, 4.2rem);
  margin-top: .35rem; position: relative; z-index: 1;
  word-break: break-word;
}
.calc__big .u {
  font-family: var(--font); font-size: .28em; font-weight: 700;
  color: #ff5a5a; margin-left: .25em; letter-spacing: .02em;
}
.calc__sub {
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; gap: .65rem; position: relative; z-index: 1;
}
.calc__subrow { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; align-items: baseline; }
.calc__subrow > span { color: rgba(255,255,255,.6); }
.calc__subrow b { font-family: var(--font); font-weight: 700; white-space: nowrap; }

.calc__foot { margin-top: auto; padding-top: 1.4rem; position: relative; z-index: 1; }
.calc__cta { margin-bottom: .9rem; }
.calc__note { font-size: .76rem; color: rgba(255,255,255,.45); line-height: 1.5; }
.calc--single .calc__note { color: var(--gray); }

/* ---- Conversor de duas vias ---- */
.conv2 {
  margin-top: clamp(1.3rem, 2.5vw, 1.8rem);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.1rem;
  max-width: 520px;
}
.conv2__eq { font-family: var(--display); font-size: 1.5rem; color: var(--red); padding-bottom: .55rem; text-align: center; }

.conv-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.conv-chip {
  border: 1px solid var(--line); background: #fff;
  padding: .5em 1em; border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--charcoal); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.conv-chip:hover { border-color: var(--red); color: var(--red); }

/* ---- Responsivo ---- */
@media (max-width: 820px) {
  .calc { grid-template-columns: 1fr; }
  /* mais respiro entre as calculadoras no mobile */
  .calc-list { gap: 50px; }
}
@media (max-width: 480px) {
  .calc__grid2 { grid-template-columns: 1fr; }
  .conv2 { grid-template-columns: 1fr; }
  .conv2__eq { display: none; }
}