/* =====================================================================
   sobre.css — só o que é exclusivo da página Sobre
   ===================================================================== */

/* letra de caneta (anotações à mão) */
.mao { font-family: var(--f-mao); font-weight: 400; letter-spacing: 0.12em; color: var(--papel); text-transform: uppercase; filter: url(#giz-fino); }

/* ---------- Topo: texto à esquerda, foto + apps à direita ---------- */
.sobre-topo {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px;
  padding: 96px var(--margem) 64px;
}
.sobre-texto { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.sobre-texto h1 { font-size: clamp(64px, 8.9vw, 128px); line-height: 0.88; }
.sobre-texto h1 .linha2 { display: inline-block; white-space: nowrap; }
.nome-mao {
  position: relative; display: inline-block; top: -4px; margin-left: 18px;
  font-family: var(--f-mao); font-weight: 400; font-size: 1.22em; line-height: 0.8; letter-spacing: 0;
  text-transform: uppercase; color: var(--papel); transform: rotate(-4deg); filter: url(#giz-traco);
}
.cidade { position: relative; align-self: flex-start; font-size: 26px; line-height: 1.5; padding-top: 14px; }
.cidade svg { position: absolute; left: -2px; top: 0; width: 78px; height: 20px; overflow: visible; }

.bio { display: flex; flex-direction: column; gap: 22px; }
.bio > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--musgo-escuro); }
.bio span { font-size: 12px; letter-spacing: 0.1em; color: var(--broto); white-space: nowrap; }
.bio p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--papel-2); }

/* anotações soltas (só no desktop) */
.nota-essa { position: absolute; left: 590px; top: 128px; width: 190px; text-align: right; margin: 0; font-size: 24px; line-height: 1.4; transform: rotate(-3deg); }
.seta-essa { position: absolute; left: 790px; top: 40px; overflow: visible; transform: rotate(-65deg); filter: url(#giz-fino); }
.bolinha { position: absolute; left: 242px; top: 90px; overflow: visible; filter: url(#giz-fino); }

/* coluna da direita */
.sobre-foto { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sobre-foto .tela { margin-top: 4px; padding: 2px; background: var(--noite-2); box-shadow: inset 1px 1px 0 #8C8468, inset -1px -1px 0 #FFFBEA; }
.sobre-foto .tela img { display: block; width: 100%; aspect-ratio: 460 / 500; height: auto; object-fit: cover; object-position: 40% 30%; }
.sobre-foto .rodape-janela { display: flex; justify-content: space-between; padding: 6px 4px 2px; font-size: 11px; }
.sobre-foto .barra-titulo { height: 26px; }
.sobre-foto figcaption { font-size: 11px; letter-spacing: 0.08em; color: var(--musgo); }
.apps { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.apps p { margin: 0; font-size: 24px; transform: rotate(-2deg); }
.apps ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 84px); gap: 12px; }
.apps img { display: block; width: 84px; height: 84px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)) saturate(0.9) contrast(0.96); }

/* ---------- Trajetória ---------- */
.trajetoria { padding: 56px var(--margem) 0; }
.trajetoria h2.titulo { font-size: clamp(36px, 4.2vw, 60px); line-height: 1; margin-bottom: 28px; }
.cab-secao { display: grid; grid-template-columns: 1fr 80px; gap: 40px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--musgo); font-size: 13px; letter-spacing: 0.1em; }
.cab-secao .n { color: var(--musgo); text-align: right; }
.experiencia { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--musgo-escuro); }
.experiencia li { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px 60px; gap: 32px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--musgo-escuro); }
.experiencia .periodo { font-size: 13px; color: var(--broto); }
.empresa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-family: var(--f-serifa); font-size: 32px; line-height: 1.1; }
.empresa img { width: 44px; height: 20px; display: block; }
.empresa .local { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--broto); margin-left: -4px; }
.experiencia .descr { display: block; margin-top: 4px; font-size: 13px; color: #C9CBB8; }
.experiencia .area { font-size: 12px; letter-spacing: 0.06em; color: var(--broto); }
.experiencia .n { font-size: 12px; color: var(--musgo); text-align: right; }
.duas-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.duas-col h3 { margin: 0 0 12px; font-weight: 400; }
.itens { border-top: 1px solid var(--musgo-escuro); }
.itens > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--musgo-escuro); }
.itens .nome { display: block; font-family: var(--f-serifa); font-size: 30px; line-height: 1.1; }
.itens .det { display: block; margin-top: 4px; font-size: 13px; color: #C9CBB8; }
.itens .ano { font-size: 13px; color: var(--broto); white-space: nowrap; }

/* ---------- Conquistas ---------- */
.conquistas { padding: 96px var(--margem) 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cards .janela { box-shadow: inset 1px 1px 0 #FFFBEA, inset -1px -1px 0 #2C2A1E, inset 2px 2px 0 #E9E2C9, inset -2px -2px 0 #8C8468, 0 30px 60px rgba(0,0,0,0.5); }
.cards .barra-titulo { height: 24px; font-size: 12px; padding: 0 4px 0 8px; }
.cards .x { width: 18px; height: 16px; background: var(--bege); color: #171C10; text-align: center; line-height: 14px; box-shadow: inset 1px 1px 0 #FFFBEA, inset -1px -1px 0 #4A4430; }
.conq-corpo { display: flex; gap: 16px; padding: 22px 18px 14px; min-height: 120px; }
.conq-corpo b { display: block; line-height: 1.35; }
.conq-corpo small { display: block; margin-top: 8px; font-size: 12px; color: var(--musgo-escuro); }
.ok { display: flex; justify-content: flex-end; padding: 0 12px 12px; }
.ok a { min-width: 76px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #171C10; text-decoration: none; box-shadow: inset 1px 1px 0 #FFFBEA, inset -1px -1px 0 #2C2A1E, 0 0 0 1px #171C10; }
.ok a:hover { color: #171C10; background: #E2DBC2; }
.ok a:active { box-shadow: inset 1px 1px 0 #2C2A1E, inset -1px -1px 0 #FFFBEA, 0 0 0 1px #171C10; }

/* ---------- A marca ---------- */
.marca { padding: 96px var(--margem) 96px; }
.marca-grid { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 56px; }
.marca-logo { position: relative; height: 280px; background: var(--noite-2); border: 1px solid var(--musgo-escuro); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; }
.glifo-m { font-size: 9.6px; line-height: 11px; color: var(--musgo); }
.marca-logo .creative { font-weight: 500; font-size: 15px; letter-spacing: 0.62em; color: var(--broto); margin-right: -9px; }
.marca-logo .fig { position: absolute; left: 14px; bottom: 12px; font-size: 10px; letter-spacing: 0.08em; color: var(--musgo); }
.marca-logo .cores { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 4px; }
.marca-logo .cores span { width: 14px; height: 14px; }
.marca-texto { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.marca-texto > p { margin: 0; font-family: var(--f-serifa); font-size: 34px; line-height: 1.22; }
.marca-texto .codigo { font-family: var(--f-mono); font-size: 20px; }
.tres-notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--musgo-escuro); font-size: 12px; line-height: 1.6; }
.tres-notas > div { padding: 16px 16px 0; border-left: 1px solid var(--musgo-escuro); }
.tres-notas > div:first-child { padding-left: 0; border-left: 0; }
.tres-notas b { font-weight: 400; color: var(--broto); letter-spacing: 0.08em; }
.tres-notas a { text-underline-offset: 4px; }

/* contato do Sobre: título + "me chama!" */
.contato .titulo-linha { position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 24px; }
.contato.simples .titulo { font-size: clamp(56px, 6.4vw, 92px); line-height: 0.9; }
.me-chama { position: relative; margin: 0; font-size: 22px; transform: rotate(-8deg); align-self: center; }
.me-chama svg { position: absolute; left: -18px; top: 30px; width: 136px; height: 15px; overflow: visible; }
.contato.simples { align-items: flex-end; }

/* ---------- TELAS MENORES ---------- */
@media (max-width: 1100px) {
  .sobre-topo { grid-template-columns: 1fr; padding-top: 64px; }
  .nota-essa, .seta-essa, .bolinha { display: none; }
  .sobre-foto { max-width: 460px; }
  .experiencia li { grid-template-columns: 140px minmax(0, 1fr) 200px; }
  .experiencia .n { display: none; }
  .marca-grid { grid-template-columns: 1fr; }
  .marca-logo { max-width: 520px; }
}
@media (max-width: 800px) {
  .experiencia li { grid-template-columns: 1fr; gap: 6px; }
  .empresa { font-size: 26px; }
  .duas-col, .cards { grid-template-columns: 1fr; }
  .tres-notas { grid-template-columns: 1fr; }
  .tres-notas > div, .tres-notas > div:first-child { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--musgo-escuro); }
  .marca-texto > p { font-size: 26px; }
  .glifo-m { font-size: 6.4px; line-height: 7.4px; }
  .marca-logo { height: 220px; }
}
@media (max-width: 700px) {
  .sobre-topo { padding-top: 40px; gap: 48px; }
  .nome-mao { margin-left: 8px; }
  .cidade { font-size: 20px; }
  .bio > div { grid-template-columns: 1fr; gap: 8px; }
  .itens .nome { font-size: 24px; }
  .apps ul { grid-template-columns: repeat(3, 72px); }
  .apps img { width: 72px; height: 72px; }
  .contato.simples { align-items: flex-start; }
}