/* ============ LJ3 — estilos do app (calculadora) ============ */

body.app{
  background:var(--bg-alt);
  padding-bottom:40px;
}

.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:10px;
  height:56px; padding:0 8px 0 4px;
  background:var(--navy); color:#fff;
  box-shadow:0 2px 12px rgba(4,37,82,.22);
}
.appbar-back{
  display:grid; place-items:center; width:44px; height:44px;
  color:#fff; border-radius:10px;
}
.appbar-back:active{background:rgba(255,255,255,.12)}
.appbar-logo{height:26px; width:auto; filter:brightness(0) invert(1)}
.appbar-title{
  margin-left:auto; margin-right:10px;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,.72); text-transform:uppercase;
}

.app-main{max-width:560px; margin:0 auto; padding:0 16px}

.app-hero{padding:26px 0 8px}
.app-hero h1{font-size:1.55rem; margin-bottom:6px; color:var(--navy)}
.app-hero p{font-size:.92rem; color:var(--muted); margin:0}

/* ---------- blocos ---------- */
.calc-form{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.bloco{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:0 1px 2px rgba(4,37,82,.04);
}
.bloco h2{
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); margin:0 0 14px;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
/* O seletor de espessura carrega rotulo longo ("0,40 mm — pronta-entrega").
   Em duas colunas ele trunca em qualquer largura, nao so no celular:
   por isso a linha dele vai sempre inteira. Testado em 02/11/2026. */
.grid2:has(select#esp){grid-template-columns:1fr}
.campo{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.campo:last-child{margin-bottom:0}
.campo > span{font-size:.78rem; font-weight:750; color:#3b4657}
.campo input,.campo select{
  font-family:inherit; font-size:1rem; color:var(--ink);
  padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:#fbfcfd; width:100%;
  transition:border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6472'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:20px;
  padding-right:38px;
}
.campo input:focus,.campo select:focus{
  outline:none; border-color:var(--navy); background:#fff;
  box-shadow:0 0 0 3px rgba(4,37,82,.1);
}
.dica{font-size:.75rem; color:var(--muted); margin:8px 0 0; line-height:1.45}

/* ---------- radio cards ---------- */
.radio-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.rc{cursor:pointer; position:relative}
.rc input{position:absolute; opacity:0; pointer-events:none}
.rc-body{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 12px; border:1.8px solid var(--line); border-radius:12px;
  background:#fbfcfd; transition:border-color .18s, background .18s, box-shadow .18s;
  height:100%;
}
.rc-body b{font-size:.92rem; color:var(--navy); line-height:1.2}
.rc-body em{font-size:.75rem; font-style:normal; color:var(--muted)}
.rc-body i{font-size:.7rem; font-style:normal; color:#98a2b3; margin-top:5px}
.rc input:checked + .rc-body{
  border-color:var(--orange); background:#fff8f4;
  box-shadow:0 0 0 3px rgba(233,93,14,.13);
}
.rc input:focus-visible + .rc-body{outline:2px solid var(--navy); outline-offset:2px}

.btn-calc{margin-top:4px; padding:16px; font-size:1rem}

/* ---------- resultado ---------- */
.resultado{
  margin-top:20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 6px 24px rgba(4,37,82,.09);
  animation:sobe .35s ease both;
}
@keyframes sobe{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

.res-topo{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; padding:20px 18px;
}
.res-label{
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin:0 0 4px;
}
.res-area{font-size:1.9rem; font-weight:800; margin:0; line-height:1}
.res-area small{font-size:.82rem; font-weight:600; color:rgba(255,255,255,.66)}

.res-itens{list-style:none; margin:0; padding:4px 18px}
.res-itens li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.res-itens li:last-child{border-bottom:0}
.res-itens b{display:block; font-size:.92rem; color:var(--ink)}
.res-itens span{display:block; font-size:.76rem; color:var(--muted)}
.res-num{text-align:right; flex:0 0 auto}
.res-num strong{display:block; font-size:1.18rem; font-weight:800; color:var(--navy); line-height:1}
.res-num span{font-size:.7rem}

.res-valor{
  background:#f6f8fb; border-top:1px solid var(--line);
  padding:16px 18px; text-align:center;
}
.res-valor p{margin:0}
.res-valor > p:first-child{
  font-size:.74rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.res-reais{font-size:2rem; font-weight:800; color:var(--orange); line-height:1.15; margin:2px 0 4px !important}
.res-obs{font-size:.76rem; color:var(--muted)}

/* ---------- sob encomenda: sem preço, vai para cotação ---------- */
.dica-enc{
  margin-top:10px; padding:10px 12px; background:#f6f8fb;
  border-left:3px solid var(--navy); border-radius:0 8px 8px 0;
  font-size:.75rem; color:#3b4657;
}
.dica-enc strong{color:var(--navy)}
.res-enc{
  background:#042552; color:#fff;
  padding:16px 18px; text-align:center;
}
.res-enc-tit{
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#c6d0e0; margin:0 0 6px;
}
.res-enc-txt{font-size:.85rem; line-height:1.5; margin:0; color:#eaf0f8}
.res-enc-txt b{color:#fff; font-weight:800}

.resultado .btn-wa{margin:16px 18px 0; width:calc(100% - 36px)}
.res-fine{
  font-size:.71rem; color:#98a2b3; padding:12px 18px 18px; margin:0;
  line-height:1.5;
}

@media (max-width:360px){
  .res-area{font-size:1.6rem}
  .res-reais{font-size:1.7rem}
}