/* querodobra.com.br: versão de arquivo (2026). Fonte Pitanga (Fabio Haag Type), a mesma do site antigo. */
@font-face { font-family: Pitanga; src: url(/fonts/pitanga-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Pitanga; src: url(/fonts/pitanga-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Pitanga; src: url(/fonts/pitanga-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Pitanga; src: url(/fonts/pitanga-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Pitanga; src: url(/fonts/pitanga-extrabold.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --amarelo: #fff97a;
  --amarelo-forte: #ffff00;
  --amarelo-diy: #fdf336;
  --amarelo-claro: #fff6b3;
  --preto: #000;
  --tinta: #0a0500;
  --texto: #504e4a;
  --cinza: #f1f1f1;
  --cinza-2: #ececec;
  --cinza-3: #808080;
  --rodape: #f9f8f8;
  --oliva: #b5a300;
  --roxo: #850177;
  --branco: #fff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--branco); color: var(--tinta); font: 500 16px/1.6 Pitanga, "Helvetica Neue", Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 .5em; color: var(--preto); }
p { margin: 0 0 1em; }
.pequeno { font-size: 13px; line-height: 1.5; }
.centro { text-align: center; justify-content: center; }

/* faixa e topo */
.faixa { display: block; background: var(--amarelo); color: #3a3a3a; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 18px 16px; }
.faixa:hover { text-decoration: underline; }
.topo { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 24px; }
.logo img { width: 110px; height: auto; }
.menu { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.menu a { text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 600; color: #3a3a3a; letter-spacing: .01em; }
.menu a:hover, .menu a.ativo { color: var(--oliva); }

/* botões e links */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; padding: 11px 22px; border: 2px solid var(--preto); border-radius: 999px; text-transform: uppercase; text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: .01em; background: var(--preto); color: var(--branco); transition: background .15s, color .15s; }
.btn:hover { background: transparent; color: var(--preto); }
.btn.preto { background: var(--preto); color: var(--branco); }
.btn.vazado { background: transparent; color: var(--preto); border-width: 1px; }
.btn.vazado:hover { background: var(--preto); color: var(--branco); }
.btn.branco { background: var(--branco); color: var(--preto); border-color: var(--branco); border-radius: 2px; }
.btn.branco:hover { background: var(--amarelo-forte); border-color: var(--amarelo-forte); }
.btn.vazado-branco { background: transparent; color: var(--branco); border: 1px solid var(--branco); }
.btn.vazado-branco:hover { background: var(--branco); color: var(--preto); }
.link-mini { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; color: var(--texto); }
.link-mini.claro { color: var(--branco); }

/* capa da home */
.capa { max-width: 1140px; margin: 10px auto 20px; border-radius: 14px; background: #262640 center bottom / cover no-repeat; min-height: 566px; display: flex; color: var(--branco); }
.capa-conteudo { margin: 0 auto; padding: 56px 24px 260px; text-align: center; max-width: 760px; }
.capa h1 { color: var(--branco); text-transform: none; font-size: clamp(32px, 5.4vw, 52px); letter-spacing: -0.01em; }
.capa p { font-size: 17px; font-weight: 500; margin: 0 auto 26px; max-width: 640px; }
.capa .botoes { justify-content: center; margin-bottom: 24px; }

/* encerramento */
.encerramento { max-width: 1200px; margin: 0 auto 40px; background: var(--amarelo-claro); padding: 80px 9%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.encerramento h2 { text-transform: none; font-size: clamp(38px, 5vw, 58px); letter-spacing: -0.02em; margin-bottom: .25em; }
.encerramento-data { font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); margin-bottom: .6em; }
.pilula { justify-self: center; display: inline-block; white-space: nowrap; border: 2px solid var(--preto); border-radius: 999px; padding: 10px 30px; font-weight: 700; font-size: clamp(17px, 1.9vw, 24px); text-decoration: none; letter-spacing: -0.01em; }
.pilula:hover { background: var(--preto); color: var(--amarelo-claro); }

/* títulos de seção */
.titulo-secao { text-align: center; font-size: clamp(30px, 4vw, 42px); margin-top: 20px; }
.sub-secao { text-align: center; text-transform: uppercase; font-size: 15px; color: var(--texto); margin-bottom: 40px; }

/* o que ficou */
.ficou { max-width: 1200px; margin: 0 auto 60px; padding: 0 16px; }
.ficou-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }
.ficou-card { display: flex; flex-direction: column; gap: 10px; background: var(--cinza); border-radius: 14px; padding: 30px 24px; text-decoration: none; text-transform: uppercase; font-size: 13px; color: var(--texto); min-height: 170px; transition: transform .15s; }
.ficou-card:hover { transform: translateY(-3px); }
.ficou-card.amarelo { background: var(--amarelo-forte); color: var(--preto); }
.ficou-nome { font-weight: 800; font-size: 24px; color: var(--preto); letter-spacing: -0.02em; line-height: 1.05; }

/* vitrine */
.vitrine { padding: 20px 10px 60px; }
.grade { display: grid; gap: 10px; margin-bottom: 10px; max-width: 1260px; margin-left: auto; margin-right: auto; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; margin: 0; background: #dde0de; border-radius: 14px; overflow: hidden; aspect-ratio: 624 / 665; }
.g3 .card { aspect-ratio: 410 / 462; background: var(--cinza); }
.g4 .card { aspect-ratio: 305 / 314; background: var(--cinza); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card figcaption { position: relative; z-index: 1; text-align: center; padding: 46px 12px 0; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(18px, 2.6vw, 36px); line-height: 1; color: var(--preto); }
.g3 .card figcaption { font-size: clamp(16px, 1.9vw, 25px); padding-top: 40px; }
.g4 .card figcaption { font-size: clamp(15px, 1.8vw, 24px); padding-top: 30px; }
.card.escuro { background: #000; }
.card.escuro figcaption { color: var(--branco); }

/* parece papel + experiência */
.duo { max-width: 1050px; margin: 0 auto; padding: 40px 24px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: start; }
.duo h2 { font-size: 22px; letter-spacing: -0.03em; margin-top: 60px; }
.duo h2 u { text-underline-offset: 3px; }
.duo p { text-transform: uppercase; font-size: 15px; line-height: 1.75; color: var(--tinta); }
.duo .tyvek { width: 227px; margin-top: 26px; }
.duo-amarelo { background: var(--amarelo-forte); padding: 50px 56px 60px; }
.duo-amarelo h2 { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 24px; }
.duo-amarelo h2 img { width: 26px; }
.nota { font-size: 12px !important; font-weight: 700; margin-top: 1.6em; }
.circulo { display: inline-block; padding: 2px 6px; border: 2px solid var(--roxo); border-radius: 50%; color: var(--roxo); transform: rotate(-4deg); }

/* produção */
.producao { min-height: 450px; background: #333 center / cover no-repeat; display: flex; align-items: center; justify-content: center; padding: 20px; }
.producao h2 { color: var(--branco); text-align: center; font-size: clamp(26px, 3.2vw, 38px); max-width: 560px; text-shadow: 0 2px 18px rgba(0,0,0,.45); margin: 0; }

/* manifesto: cada linha ocupa a largura toda (tamanho calculado pela largura medida da linha) */
.manifesto { background: var(--preto); color: var(--branco); padding: 70px 4.7% 60px; container-type: inline-size; }
.manifesto-texto { margin: 0; font-weight: 800; text-transform: uppercase; line-height: 1.04; letter-spacing: -0.01em; }
.manifesto-texto span { display: block; white-space: nowrap; font-size: calc(var(--k) * 1cqi); }
.manifesto-texto b { color: var(--amarelo-forte); font-weight: 800; }
.manifesto-logo { width: 140px; margin: 50px auto 0; }

/* páginas internas */
.estreita { max-width: 640px; margin: 50px auto; padding: 0 24px; }
.estreita h2 { font-size: 32px; }
.estreita p { text-transform: uppercase; font-size: 17px; line-height: 1.55; }
.intro-porque { max-width: 760px; margin: 40px auto 50px; padding: 0 24px; }
.intro-porque h1 { font-size: clamp(44px, 8vw, 84px); }
.intro-porque p { text-transform: uppercase; font-size: 17px; line-height: 1.7; color: var(--texto); }
.intro-porque strong { color: var(--tinta); }
.caixa-preta { max-width: 800px; margin: 30px auto 30px; background: var(--preto); color: var(--branco); border-radius: 14px; padding: 40px 24px; text-align: center; }
.caixa-preta h1 { color: var(--branco); font-size: clamp(32px, 4.5vw, 44px); }
.caixa-preta p { text-transform: uppercase; margin: 0; font-size: 15px; }
.aviso { max-width: 800px; margin: 0 auto 40px; background: var(--amarelo); border-radius: 14px; padding: 18px 28px; text-align: center; text-transform: uppercase; font-size: 15px; line-height: 1.35; }
.aviso p { margin: 0; }
.aviso-titulo { font-weight: 800; font-size: 18px; margin-bottom: 6px !important; }

/* diy */
.duo-diy { display: grid; grid-template-columns: 46% 54%; margin-top: 70px; }
.duo-cinza { background: var(--cinza-2); padding: 100px 8% 100px 9%; }
.duo-amarelo-diy { background: var(--amarelo-diy); padding: 100px 9% 100px 11%; }
.duo-diy h2 { font-size: 30px; letter-spacing: -0.04em; text-transform: uppercase; }
.lista-traco { list-style: none; padding: 0; margin: 0; text-transform: uppercase; font-size: 21px; line-height: 1.5; }
.lista-traco li { margin-bottom: 1.1em; }
.lista-traco li::before { content: "_ "; }
.passos { padding-left: 1.3em; text-transform: uppercase; font-size: 19px; line-height: 1.4; }
.passos li { margin-bottom: .8em; }
.duo-amarelo-diy p { text-transform: uppercase; font-size: 17px; }
.duo-amarelo-diy .pequeno { font-size: 12px; font-weight: 700; }
.bloco-video { max-width: 1240px; margin: 20px auto; background: var(--preto); color: var(--branco); display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; align-items: center; padding: 80px 6%; }
.bloco-video h2 { color: var(--branco); font-size: 30px; letter-spacing: -0.04em; }
.bloco-video p { text-transform: uppercase; font-size: 20px; line-height: 1.3; }
.video { position: relative; aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-link { font-size: 11px !important; margin-top: 8px; text-transform: uppercase; }
.sabia { display: grid; grid-template-columns: 36% 64%; margin-top: 70px; }
.sabia-foto { background: #3a2a2a center / cover no-repeat; min-height: 420px; }
.sabia-texto { background: var(--amarelo-diy); padding: 100px 7% 100px 6%; }
.sabia-texto h2 { font-size: 34px; letter-spacing: -0.04em; }
.sabia-texto p { text-transform: uppercase; font-size: 20px; line-height: 1.6; }
.oque { background: var(--cinza-3); color: var(--branco); text-align: center; padding: 120px 24px; }
.oque h2 { color: var(--branco); font-size: 34px; letter-spacing: -0.04em; }
.oque p { text-transform: uppercase; font-size: 22px; max-width: 600px; margin: 0 auto 1.4em; }
.quatro { background: var(--cinza-2); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 80px 8%; text-align: center; }
.quatro h3 { font-size: 26px; letter-spacing: -0.04em; }

/* blog */
.blog-capa { max-width: 1100px; margin: 30px auto 60px; padding: 0 24px; position: relative; }
.blog-capa img { width: 58%; aspect-ratio: 577 / 350; object-fit: cover; filter: grayscale(.2) contrast(.85) brightness(1.08); opacity: .82; }
.blog-capa h1 { position: absolute; left: 50%; top: 50%; transform: translateY(-50%); font-size: clamp(36px, 6.6vw, 76px); line-height: .88; margin: 0; }
.blog-grade { max-width: 1100px; margin: 0 auto 60px; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; align-items: start; }
.post-card { box-shadow: 0 0 10px rgba(0,0,0,.15); background: var(--branco); }
.post-card-corpo { padding: 26px 30px 24px; }
.post-card h2 { font-size: 19px; letter-spacing: -0.03em; margin-bottom: .55em; }
.post-card h2 a { text-decoration: none; }
.post-card p { text-transform: uppercase; font-size: 12px; color: var(--texto); line-height: 1.6; margin-bottom: 1em; }
.leia { font-size: 12px; font-weight: 700; color: var(--oliva); text-decoration: none; text-transform: uppercase; }
.post-card-data { border-top: 1px solid #eaeaea; padding: 14px 30px; margin: 0; font-size: 12px; color: #adadad; }

.post article { max-width: 640px; margin: 40px auto 20px; padding: 0 24px; }
.post-meta { font-size: 12px; text-transform: uppercase; font-weight: 700; color: var(--texto); }
.post-meta a { text-decoration: none; }
.post h1 { font-size: clamp(30px, 5vw, 42px); letter-spacing: 0; margin-bottom: .7em; }
.post-capa { margin: 0 0 30px; width: 100%; }
.post-corpo { text-transform: uppercase; color: var(--texto); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.post-corpo strong, .post-corpo b { color: var(--tinta); }
.post-corpo h2, .post-corpo h3, .post-corpo h4 { font-size: 22px; letter-spacing: 0; margin-top: 1.6em; line-height: 1.4; }
.post-corpo img { margin: 24px auto; height: auto; }
.post-corpo a { color: var(--tinta); text-underline-offset: 2px; }
.post-corpo blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--amarelo-forte); }
.post-corpo hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }
.post-corpo .video { margin: 24px 0; }
.post .manifesto { margin: 40px calc(50% - 50vw); }

.caixa-virou { max-width: 820px; margin: 60px auto; background: var(--amarelo-forte); padding: 44px 40px; text-align: center; }
.caixa-virou-titulo { font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 3vw, 30px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: .5em; }
.caixa-virou p { text-transform: uppercase; font-size: 14px; }
.caixa-virou .botoes { justify-content: center; margin-top: 20px; }

/* tamanho */
.tam { max-width: 1100px; margin: 40px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.tam-foto img { margin: 0 auto; max-height: 640px; width: auto; }
.sobretitulo { font-weight: 800; text-transform: uppercase; font-size: 17px; color: var(--texto); margin-bottom: .4em; }
.tam h1 { font-size: clamp(30px, 3.6vw, 40px); color: #3a3a3a; }
.tam-texto > p { text-transform: uppercase; font-size: 17px; line-height: 1.3; color: #3a3a3a; }
.tam-lista { list-style: none; padding: 0; text-transform: uppercase; font-size: 14px; line-height: 1.8; margin: 0 0 .5em; }
.medir { width: 240px; margin: 20px 0; }
.calc input { display: block; width: 100%; max-width: 340px; margin-bottom: 8px; padding: 10px 14px; border: 1px solid #999; font: inherit; font-size: 14px; }
.calc button { width: 100%; max-width: 340px; padding: 12px; background: #687078; color: var(--branco); border: 0; font: 700 13px Pitanga, sans-serif; text-transform: uppercase; cursor: pointer; }
.calc button:hover { background: var(--preto); }
.calc-titulo { font-weight: 800; text-transform: uppercase; font-style: italic; margin-bottom: 4px; }
.calc-resultado { font-weight: 800; text-transform: uppercase; margin-top: 12px; }
.tam-tabela { max-width: 760px; margin: 70px auto; padding: 0 24px; text-align: center; }
.tam-tabela h2 { font-size: 20px; letter-spacing: -0.03em; }
.tam-tabela > p { text-transform: uppercase; font-size: 14px; }
.tam-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 50px; text-align: left; margin: 40px 0; }
.tam-cols h3 { font-size: 17px; letter-spacing: -0.03em; }
.tam-cols ul { list-style: none; padding: 0; margin: 0; text-transform: uppercase; font-size: 14px; line-height: 1.25; }
.tam-final { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 30px; text-align: center; max-width: 1280px; margin: 0 auto; overflow: hidden; }
.tam-final h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.04em; }
.tam-final p { text-transform: uppercase; }

/* rodapé */
.rodape { background: var(--rodape); border-top: 4px solid var(--texto); margin-top: 0; }
.virou { background: var(--preto); color: var(--branco); text-align: center; padding: 40px 24px; }
.virou-titulo { font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: .4em; color: var(--amarelo-forte); }
.virou p { max-width: 720px; margin: 0 auto; text-transform: uppercase; font-size: 14px; }
.virou a { color: var(--amarelo-forte); }
.colunas { max-width: 1120px; margin: 0 auto; padding: 60px 24px 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.col-titulo { font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 14px; }
.colunas a { display: block; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 500; margin-bottom: 11px; color: var(--tinta); }
.colunas a:hover { color: var(--oliva); }
.selos { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 22px; align-items: center; }
.selos img { max-height: 90px; width: auto; }
.estrelas { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; text-transform: uppercase; color: var(--oliva); border-bottom: 1px solid #ddd; padding: 0 24px 22px; margin: 0; }
.estrelas img { width: 72px; }
.assinatura { text-align: center; padding: 26px 24px 34px; }
.assinatura img { width: 120px; margin: 0 auto 10px; }
.assinatura p { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-3); margin: 0; }

/* celular */
@media (max-width: 900px) {
  .ficou-grade { grid-template-columns: repeat(2, 1fr); }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .blog-grade { grid-template-columns: repeat(2, 1fr); }
  .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quatro { grid-template-columns: repeat(2, 1fr); }
  .tam-final { grid-template-columns: 1fr; }
  .tam-final .lado { display: none; }
}
@media (max-width: 700px) {
  body { font-size: 15px; }
  .faixa { padding: 12px 16px; font-size: 11px; }
  .topo { flex-direction: column; gap: 12px; padding: 16px; }
  .menu { margin: 0; justify-content: center; gap: 8px 18px; }
  .capa { margin: 0 16px 16px; min-height: 0; background-size: auto 100%; background-position: 46% bottom; }
  .capa-conteudo { padding: 40px 18px 230px; }
  .capa p { font-size: 15px; }
  .encerramento { grid-template-columns: 1fr; padding: 50px 24px; text-align: left; gap: 20px; }
  .pilula { justify-self: start; }
  .ficou { padding: 0 16px; }
  .ficou-grade { grid-template-columns: 1fr; }
  .ficou-card { min-height: 0; padding: 24px 22px; }
  .g2 { grid-template-columns: 1fr; }
  .card figcaption { padding-top: 30px; }
  .g3 .card figcaption, .g4 .card figcaption { padding-top: 18px; font-size: 15px; }
  .duo { grid-template-columns: 1fr; padding: 20px 16px 40px; }
  .duo h2 { margin-top: 20px; }
  .duo-amarelo { padding: 30px 24px 36px; }
  .producao { min-height: 300px; }
  .manifesto { padding: 40px 16px 40px; }
  .manifesto-logo { width: 100px; margin-top: 30px; }
  .duo-diy, .sabia { grid-template-columns: 1fr; }
  .duo-cinza, .duo-amarelo-diy, .sabia-texto { padding: 50px 24px; }
  .lista-traco { font-size: 18px; }
  .sabia-foto { min-height: 300px; }
  .sabia-texto p, .bloco-video p { font-size: 17px; }
  .bloco-video { grid-template-columns: 1fr; padding: 40px 20px; gap: 16px; margin: 16px 0; }
  .oque { padding: 70px 24px; }
  .oque p { font-size: 17px; }
  .quatro { grid-template-columns: 1fr; padding: 50px 24px; }
  .caixa-preta, .aviso { margin-left: 16px; margin-right: 16px; }
  .blog-capa img { width: 100%; }
  .blog-capa h1 { position: static; transform: none; margin-top: 18px; }
  .blog-grade { grid-template-columns: 1fr; padding: 0 16px; }
  .post article { padding: 0 16px; }
  .post-corpo { font-size: 15px; }
  .caixa-virou { margin: 40px 16px; padding: 32px 20px; }
  .tam { grid-template-columns: 1fr; gap: 20px; }
  .tam-cols { grid-template-columns: 1fr; }
  .colunas { padding: 40px 20px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .selos { grid-column: 1 / -1; grid-template-columns: repeat(4, max-content); gap: 14px; }
  .selos img { max-height: 64px; }
}