/*
 * Tema PISOATÉRMICO — manual da marca v1.1 (nov/2026)
 * Amarelo #E0D932 e preto #1D1D1B; Raleway (ExtraBold nos títulos, Light com tracking nos subtítulos)
 * e Figtree no texto; formas a 45° como na logo; linha horizontal espessa; tom positivo e próximo.
 */
:root {
  --amarelo: #E0D932;
  --preto: #1D1D1B;
  --branco: #FFFFFF;
  --papel: #F6F6F2;
  --linha: #D9D8CF;
  --suave: #5C5B55;
  --amarelo-texto: #79751B;   /* texto pequeno amarelo sobre claro */
  --rosa: #D42B8D;            /* Rosa Destaque: só alertas */
  --titulo: "Raleway", "Segoe UI", system-ui, sans-serif;
  --corpo: "Figtree", "Segoe UI", system-ui, sans-serif;
  --corte: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
body { background: var(--papel); color: var(--preto); font: 400 1rem/1.55 var(--corpo); }
:focus-visible { outline: 3px solid var(--preto); outline-offset: 3px; }
.sobre-preto :focus-visible { outline-color: var(--amarelo); }

/* porta */
.porta { background: var(--preto); color: var(--branco); }
.porta::before, .porta::after { content: ""; position: absolute; width: 140vmax; height: 46px; background: #2B2B28; transform: rotate(-45deg); left: -20vmax; top: 30%; }
.porta::after { transform: rotate(45deg); top: 62%; }
.porta .logo { width: 180px; }
.porta h1 { font: 800 1.75rem/1.2 var(--titulo); margin: 0 0 6px; }
.porta p { margin: 0 0 28px; color: #CFCFC8; }
.porta label { font-weight: 600; }
.campo { font: 500 1rem var(--corpo); border: 2px solid var(--branco); background: transparent; color: var(--branco); }
.campo:focus { border-color: var(--amarelo); outline: none; }
.porta-erro { color: #FF7AC4; }
.porta-voltar { color: #CFCFC8; }

/* botões */
.botao { font: 800 1rem var(--titulo); letter-spacing: .02em; background: var(--amarelo); color: var(--preto); clip-path: var(--corte); }
.botao:hover { background: #ECE55A; }
.botao--preto { background: var(--preto); color: var(--amarelo); }
.botao--preto:hover { background: #33332F; }

/* topo */
.topo { background: var(--preto); color: var(--branco); }
.topo-barra .logo { width: 132px; }
.topo-barra nav a, .topo-barra .link-simples { color: #CFCFC8; }
.topo-barra nav a:hover, .topo-barra .link-simples:hover { color: var(--branco); }
.linha-marca { height: 10px; background: var(--amarelo); position: relative; z-index: 1; }
.abertura h1 { font: 800 clamp(2.4rem, 6vw, 4.2rem)/1.02 var(--titulo); margin: 0; max-width: 12ch; }
.abertura p { font: 300 clamp(1.05rem, 2vw, 1.3rem)/1.5 var(--titulo); letter-spacing: .04em; color: #DADAD3; }
.topo .losango { position: absolute; right: -120px; top: 40px; width: 420px; height: 420px; border: 46px solid var(--amarelo); transform: rotate(45deg); }
.topo .losango::after { content: ""; position: absolute; inset: 70px; background: var(--amarelo); }

/* ferramentas */
.secao-titulo { font: 800 1.35rem/1.2 var(--titulo); }
.ferramenta { background: var(--amarelo); color: var(--preto); clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%); transition: transform .2s ease; }
.ferramenta:hover { transform: translateY(-3px); }
.ferramenta h3 { font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1.1 var(--titulo); }
.ferramenta p { font-size: 1.05rem; }
.em-breve { border-top: 3px solid var(--preto); }
.em-breve li { border-bottom: 1px solid var(--linha); }
.em-breve h3 { font: 800 1.1rem var(--titulo); }
.em-breve p { color: var(--suave); }
.selo { font: 600 .85rem var(--corpo); color: var(--amarelo-texto); }
.rodape { color: var(--suave); }
.rodape .logo { width: 96px; }

/* apresentação de orçamento */
.cabeca-ferramenta h1 { font: 800 clamp(2rem, 4.6vw, 3rem)/1.08 var(--titulo); }
.cabeca-ferramenta p { color: #DADAD3; }
.cabeca-ferramenta .voltar { color: #CFCFC8; text-decoration: none; font-size: .95rem; }
.envio { background: var(--branco); border: 3px dashed var(--preto); }
.envio:hover, .envio.arrastando { background: #FBFAE3; }
.envio.arrastando { border-style: solid; }
.envio-icone { width: 64px; height: 64px; border: 10px solid var(--preto); transform: rotate(45deg); position: relative; }
.envio-icone::after { content: ""; position: absolute; inset: 9px; background: var(--amarelo); }
.envio strong { font: 800 1.2rem var(--titulo); }
.envio span { color: var(--suave); }
.passos li { color: var(--suave); }
.passos li::before { font: 800 .95rem var(--titulo); color: var(--preto); background: var(--amarelo); }
.vazio { border-left: 6px solid var(--amarelo); color: var(--suave); }
.vazio h2 { font: 800 1.25rem var(--titulo); color: var(--preto); }
.estado { font: 800 1.15rem var(--titulo); }
.girando { border-color: var(--preto); border-top-color: var(--amarelo); }
.arquivo-nome { color: var(--suave); }
.tira { background: var(--preto); }
.tira figcaption { color: #BDBDB5; }
.bloco h3 { font: 800 1rem var(--titulo); }
.cards-escolhidos li { background: var(--amarelo); font-weight: 600; }
.cards-escolhidos button { background: var(--preto); color: var(--amarelo); font-weight: 800; }
.motivos { color: var(--suave); }
.motivos b { color: var(--preto); font-weight: 600; }
select { border: 2px solid var(--preto); background: var(--branco); color: var(--preto); }
.alerta { border-left: 6px solid var(--rosa); background: var(--branco); }
.alerta h3 { color: var(--rosa); font: 800 1rem var(--titulo); }
.alerta .item + .item { border-top: 1px solid var(--linha); }
.nota { color: var(--suave); }

@media (max-width: 1000px) { .topo .losango { right: -260px; } }
@media (max-width: 600px) {
  .topo .losango { width: 220px; height: 220px; border-width: 26px; right: -150px; top: 70px; }
  .topo .losango::after { inset: 38px; }
  .abertura p { max-width: 30ch; }
}