/* MeSoCom — site 2026
   Layout: cabeçalho horizontal preto fixo; seções alternando preto / branco / cinza nuvem;
   grade de 12 colunas (max 1200px); o triângulo do logotipo como grade dos três pilares. */
:root {
  --preto: #000000;
  --branco: #FFFFFF;
  --grafite: #313131;
  --texto: rgba(0, 0, 0, 0.74);
  --nuvem: #EDEFF2;
  --cinza-medio: #CCCCCC;
  --ardosia: #49647B;
  --ciano: #00C2CF;
  --vermelho: #F03C48;
  --amarelo: #F8F800;
  --fonte-titulo: "Oswald", "Arial Narrow", Arial, sans-serif;
  --fonte-texto: "Roboto", Arial, Helvetica, sans-serif;
  --largura: 1200px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --header-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--branco);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tipografia */
h1, h2, h3, .btn, .nav a, .eyebrow { font-family: var(--fonte-titulo); }
h1 { font-weight: 400; text-transform: uppercase; font-size: clamp(37px, 5.2vw, 64px); line-height: 1.05; letter-spacing: 0.005em; margin: 0; text-wrap: balance; }
h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.15; margin: 0; color: var(--grafite); text-wrap: balance; }
h2::after { content: ""; display: block; width: 56px; height: 4px; background: var(--ciano); margin-top: 14px; }
.dark h2 { color: var(--branco); }
h3 { font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 18px; line-height: 1.3; margin: 0; color: var(--grafite); }
.dark h3 { color: var(--branco); }
p { margin: 0; max-width: 62ch; }
.lead { font-size: 18px; line-height: 1.55; }
.dark { background: var(--preto); color: var(--cinza-medio); }
.dark p { color: var(--cinza-medio); }
.nuvem { background: var(--nuvem); }
.eyebrow { font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--ardosia); }
.dark .eyebrow { color: var(--ciano); }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-size: 15px; line-height: 1; padding: 16px 24px; border: 1.5px solid transparent; border-radius: 4px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primario { background: var(--vermelho); color: var(--branco); border-color: var(--vermelho); }
.btn-primario:hover { background: #d8303c; border-color: #d8303c; }
.btn-secundario { background: transparent; color: var(--branco); border-color: var(--branco); }
.btn-secundario:hover { background: var(--branco); color: var(--preto); }
.btn-contorno { background: transparent; color: var(--grafite); border-color: var(--grafite); }
.btn-contorno:hover { background: var(--grafite); color: var(--branco); }
.link { color: var(--grafite); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ciano); text-decoration-thickness: 2px; }
.dark .link { color: var(--branco); }

/* Estrutura */
.wrap { max-width: var(--largura); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
section { padding-block: clamp(56px, 8vw, 104px); }
.secao-cabeca { display: grid; gap: 16px; max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Cabeçalho */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--preto); z-index: 60; }
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--preto); color: var(--branco); border-bottom: 1px solid #1a1a1a; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.logo img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--branco); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-size: 14px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--ciano); }
.nav .btn { padding: 12px 18px; font-size: 14px; }
.menu-toggle { display: none; background: none; border: 1.5px solid var(--branco); color: var(--branco); border-radius: 4px; padding: 8px 10px; font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; cursor: pointer; }
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--preto); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter-r) 20px var(--gutter-l); border-bottom: 1px solid #1a1a1a; }
  .nav.aberto { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid #1f1f1f; }
  .nav .btn { margin-top: 16px; justify-content: center; border-radius: 4px; border-bottom: 1.5px solid var(--vermelho); }
}

/* Hero */
.hero { padding-block: clamp(56px, 8vw, 112px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-texto { display: grid; gap: 28px; }
.hero h1 { color: var(--branco); }
.hero .lead { max-width: 52ch; font-size: clamp(17px, 1.6vw, 20px); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-local { font-size: 14px; color: var(--cinza-medio); }
.hero-cards { display: grid; gap: 14px; }
.hero-card { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; padding: 20px 22px; border: 1px solid #333; border-left: 5px solid var(--ciano); background: #0d0d0d; text-decoration: none; color: var(--branco); transition: border-color .15s ease, background-color .15s ease; }
.hero-card.amarelo { border-left-color: var(--amarelo); }
.hero-card.vermelho { border-left-color: var(--vermelho); }
.hero-card:hover { background: #161616; border-color: #555; border-left-color: inherit; }
.hero-card-icone { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--branco); display: grid; place-items: center; }
.hero-card-icone svg { width: 26px; height: 26px; fill: none; stroke: var(--branco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-card-texto { display: grid; gap: 4px; min-width: 0; }
.hero-card-texto strong { font-family: var(--fonte-titulo); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 18px; line-height: 1.2; }
.hero-card-texto span { font-size: 15px; color: var(--cinza-medio); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Portas */
.portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.porta { display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; padding: 32px 26px; background: var(--branco); border: 1px solid var(--cinza-medio); border-top: 6px solid var(--ciano); min-width: 0; }
.porta.unico { border-top-color: var(--amarelo); }
.porta.eventos { border-top-color: var(--vermelho); }
.porta { scroll-margin-top: calc(var(--header-h) + 16px); }
.porta .icone-servico { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--grafite); display: grid; place-items: center; }
.porta .icone-servico svg { width: 26px; height: 26px; fill: none; stroke: var(--grafite); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.porta h3 { font-size: 22px; letter-spacing: .04em; }
.porta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.porta li { padding-left: 22px; position: relative; }
.porta li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--grafite); }
.porta .acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 1000px) { .portas { grid-template-columns: 1fr; } .porta { grid-template-rows: auto; } }

/* Argumentos */
.argumentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.argumento { display: grid; gap: 12px; min-width: 0; }
.argumento .num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 48px; line-height: 1; color: var(--grafite); }
.argumento .num small { font-size: 18px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; margin-left: 6px; color: var(--ardosia); }
@media (max-width: 760px) { .argumentos { grid-template-columns: 1fr; } }

/* Trabalhos */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.case { display: grid; gap: 14px; text-decoration: none; color: inherit; min-width: 0; }
.case .tela { aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: var(--nuvem); border: 1px solid var(--cinza-medio); }
.case .tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s ease; }
.case:hover .tela img { transform: scale(1.02); }
.case h3 { font-size: 20px; }
.case .meta { font-size: 13px; color: var(--ardosia); }
.case:hover h3 { text-decoration: underline; text-decoration-color: var(--ciano); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.trabalhos-rodape { margin-top: 40px; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cases { grid-template-columns: 1fr; } }

/* Números de estrutura */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.numero { display: grid; gap: 6px; border-left: 1px solid #333; padding-left: 20px; min-width: 0; }
.numero strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--branco); font-variant-numeric: tabular-nums; }
.numero span { color: var(--cinza-medio); }
@media (max-width: 760px) { .numeros { grid-template-columns: 1fr 1fr; } }

/* CTA final */
.cta-final .wrap { display: grid; gap: 24px; justify-items: start; }
.cta-final .contato-direto { display: grid; gap: 4px; font-size: 15px; }
.cta-final .contato-direto a { color: var(--ciano); text-decoration: none; }
.cta-final .contato-direto a:hover { text-decoration: underline; }

/* Rodapé */
.rodape { background: var(--preto); color: var(--cinza-medio); border-top: 1px solid #1a1a1a; padding-block: 48px 32px; font-size: 14px; }
.rodape .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.rodape .marca img { width: 120px; }
.rodape .marca p { margin-top: 16px; max-width: 36ch; }
.rodape h4 { font-family: var(--fonte-titulo); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--branco); margin: 0 0 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a { color: var(--cinza-medio); text-decoration: none; }
.rodape a:hover { color: var(--ciano); }
.rodape .legal { grid-column: 1 / -1; border-top: 1px solid #1f1f1f; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
@media (max-width: 760px) { .rodape .wrap { grid-template-columns: 1fr; gap: 28px; } }

/* Página de case */
.case-hero { padding-block: clamp(48px, 7vw, 96px); }
.case-hero .wrap { display: grid; gap: 28px; }
.case-hero .wrap > * { min-width: 0; }
.case-hero h1 { font-size: clamp(34px, 4.6vw, 56px); }
.case-hero .lead { max-width: 60ch; }
.case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px 32px; border-top: 1px solid #333; padding-top: 24px; max-width: 900px; }
.case-meta div { display: grid; gap: 4px; min-width: 0; }
.case-meta dt { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--ciano); }
.case-meta dd { margin: 0; color: var(--branco); }
.case-meta dl { display: contents; }
.case-corpo .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.case-corpo .texto { display: grid; gap: 28px; }
.case-corpo .texto h2 { font-size: 26px; }
.case-corpo .texto p + p { margin-top: 12px; }
.ferramentas { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ferramentas li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--cinza-medio); }
.ferramentas li:last-child { border-bottom: 1px solid var(--cinza-medio); }
.ferramentas strong { font-family: var(--fonte-titulo); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; color: var(--grafite); }
.ferramentas span { font-size: 15px; }
.moldura { background: var(--nuvem); border: 1px solid var(--cinza-medio); overflow: hidden; }
.moldura img { width: 100%; }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.galeria figure { margin: 0; display: grid; gap: 10px; min-width: 0; }
.galeria .moldura { aspect-ratio: 16 / 10; max-width: 100%; }
.galeria .moldura img { height: 100%; object-fit: cover; object-position: top; }
.galeria figcaption { font-size: 14px; color: var(--ardosia); }
.galeria .larga { grid-column: 1 / -1; }
.galeria .larga .moldura { aspect-ratio: auto; }
.case-proximo .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
@media (max-width: 900px) { .case-corpo .wrap { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .galeria { grid-template-columns: 1fr; } }

/* ---- Páginas internas ---- */
.lang { color: var(--cinza-medio) !important; border: 1px solid #444 !important; border-radius: 4px; padding: 6px 10px !important; font-size: 13px !important; }
.lang:hover { color: var(--branco) !important; border-color: var(--branco) !important; }
.pagina-hero { padding-block: clamp(48px, 7vw, 88px); }
.pagina-hero .wrap { display: grid; gap: 20px; }
.pagina-hero h1 { color: var(--branco); font-size: clamp(34px, 4.6vw, 56px); }
.pagina-hero .lead { max-width: 64ch; }
.prosa { display: grid; gap: 14px; margin-top: 16px; }
.prosa p { max-width: 66ch; }
.secao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 36px; }
.nota { font-size: 14px; color: var(--ardosia); max-width: 48ch; }
.dark .nota { color: var(--cinza-medio); }

/* Serviços */
.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.servico { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.servico .icone-servico { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--grafite); display: grid; place-items: center; }
.servico .icone-servico svg, .item-estrutura .icone-servico svg { width: 26px; height: 26px; fill: none; stroke: var(--grafite); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.servico-texto { display: grid; gap: 10px; min-width: 0; }
.servico-texto h3 { font-size: 20px; }
.entregas { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.entregas li { padding-left: 22px; position: relative; }
.entregas li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--grafite); }
.entregas.claras li::before { border-color: var(--ciano); }
.entregas.claras { max-width: 60ch; }
.chamada-eventos { display: grid; gap: 24px; justify-items: start; }
.chamada-eventos .secao-cabeca { margin-bottom: 0; }
.passos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 28px; counter-reset: passo; }
.passos li { display: grid; gap: 8px; min-width: 0; counter-increment: passo; padding-top: 16px; border-top: 2px solid var(--grafite); }
.passos li::before { content: counter(passo); font-family: var(--fonte-titulo); font-weight: 700; font-size: 32px; line-height: 1; color: var(--grafite); }
.passos strong { font-family: var(--fonte-titulo); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 17px; color: var(--grafite); }
.passos span { font-size: 15px; }
@media (max-width: 760px) { .servicos { grid-template-columns: 1fr; } }

/* Eventos */
.texto-duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.texto-duas-colunas p { max-width: none; }
.grade-estrutura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.item-estrutura { display: grid; gap: 12px; min-width: 0; }
.item-estrutura .icone-servico { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--grafite); display: grid; place-items: center; }
.item-estrutura h3 { font-size: 18px; }
.formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.formato { border: 1px solid var(--cinza-medio); border-top: 6px solid var(--vermelho); padding: 28px 26px; display: grid; gap: 12px; min-width: 0; }
.formato h3 { font-size: 20px; }
.faq { display: grid; gap: 0; max-width: 760px; border-top: 1px solid var(--cinza-medio); }
.faq details { border-bottom: 1px solid var(--cinza-medio); }
.faq summary { cursor: pointer; padding: 18px 0; font-family: var(--fonte-titulo); font-weight: 500; font-size: 18px; color: var(--grafite); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--ciano); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 0 20px; max-width: 66ch; }
@media (max-width: 900px) { .grade-estrutura, .formatos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grade-estrutura, .formatos, .texto-duas-colunas { grid-template-columns: 1fr; } }

/* Trabalhos */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filtros button { font-family: var(--fonte-titulo); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; padding: 10px 16px; background: transparent; border: 1.5px solid var(--grafite); color: var(--grafite); border-radius: 4px; cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--grafite); color: var(--branco); }
.tela.sem-foto { display: grid; place-items: center; background: var(--preto); }
.tela.sem-foto svg { width: 64px; height: 64px; fill: none; stroke: var(--cinza-medio); stroke-width: 1.5; }
.case-corpo .wrap.uma-coluna { grid-template-columns: minmax(0, 1fr); }
.case-corpo .wrap.uma-coluna .texto { max-width: 760px; }

/* Sobre */
.sobre-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sobre-grid .secao-cabeca { margin-bottom: 0; }
.linha-tempo { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-left: 2px solid var(--ciano); }
.linha-tempo li { display: grid; gap: 4px; padding: 0 0 24px 24px; position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--branco); border: 2px solid var(--ciano); }
.linha-tempo strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: 22px; color: var(--grafite); line-height: 1; }
.linha-tempo span { font-size: 15px; }
.direcao-texto { display: grid; gap: 8px; max-width: 66ch; }
.direcao-texto h3 { font-size: 24px; }
.direcao-texto .meta { color: var(--ardosia); font-size: 14px; }
@media (max-width: 800px) { .sobre-grid { grid-template-columns: 1fr; } }

/* Contato */
.contato-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contato-direto-bloco { display: grid; gap: 20px; justify-items: start; }
.lista-contato { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; width: 100%; }
.lista-contato li { display: grid; gap: 2px; border-top: 1px solid var(--cinza-medio); padding-top: 12px; }
.lista-contato span { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--ardosia); }
.lista-contato a { color: var(--grafite); text-decoration: none; }
.lista-contato a:hover { text-decoration: underline; text-decoration-color: var(--ciano); }
.form { display: grid; gap: 18px; background: var(--nuvem); padding: 32px 28px; min-width: 0; }
.form h2::after { display: none; }
.campo { display: grid; gap: 6px; }
.campo label { font-family: var(--fonte-titulo); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--grafite); }
.campo input, .campo select, .campo textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--cinza-medio); background: var(--branco); color: var(--grafite); border-radius: 4px; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--ciano); outline-offset: 1px; border-color: var(--ciano); }
.campo.oculto { position: absolute; left: -9999px; }
.form .btn { justify-self: start; }
.form-ok { background: var(--branco); border-left: 4px solid var(--ciano); padding: 12px 16px; }
@media (max-width: 800px) { .contato-grid { grid-template-columns: 1fr; } }

/* Privacidade */
.legal-texto { max-width: 70ch; }
.legal-texto h2 { font-size: 22px; margin-top: 12px; }

/* ---------- Páginas internas ---------- */
.pagina-hero { padding-block: clamp(48px, 6vw, 88px); }
.pagina-hero .wrap { display: grid; gap: 20px; }
.pagina-hero h1 { font-size: clamp(34px, 4.6vw, 56px); color: var(--branco); }
.pagina-hero .lead { max-width: 60ch; }
.pagina-hero .hero-acoes { margin-top: 8px; }
.idioma { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--cinza-medio); text-decoration: none; border: 1px solid #444; padding: 6px 10px; border-radius: 4px; }
.idioma:hover { color: var(--branco); border-color: var(--branco); }
@media (max-width: 900px) { .nav .idioma { margin-top: 12px; text-align: center; border-bottom: 1px solid #444; } }
.migalhas { font-size: 13px; color: var(--cinza-medio); display: flex; flex-wrap: wrap; gap: 8px; }
.migalhas a { color: var(--cinza-medio); text-decoration: none; }
.migalhas a:hover { color: var(--ciano); }

/* Serviço: bloco "o que é" + entregas */
.servico { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); padding-block: 40px; border-top: 1px solid var(--cinza-medio); scroll-margin-top: calc(var(--header-h) + 16px); }
.servico:last-of-type { border-bottom: 1px solid var(--cinza-medio); }
.servico-intro { display: grid; gap: 16px; align-content: start; }
.servico-intro h3 { font-size: 22px; letter-spacing: .04em; }
.servico-intro .oque { position: relative; }
.servico-intro .oque mark { background: var(--amarelo); color: var(--preto); padding: 0 4px; font-weight: 500; }
.entregas { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.entregas li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.entregas li svg { width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--grafite); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.servico-condicoes { margin-top: 18px; font-size: 14px; color: var(--ardosia); }
.servico .acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
@media (max-width: 860px) { .servico { grid-template-columns: 1fr; } }

/* Processo em passos */
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; counter-reset: passo; }
.passo { display: grid; gap: 10px; min-width: 0; padding-top: 18px; border-top: 2px solid var(--grafite); }
.passo::before { counter-increment: passo; content: counter(passo, decimal-leading-zero); font-family: var(--fonte-titulo); font-weight: 700; font-size: 32px; line-height: 1; color: var(--grafite); }
.dark .passo { border-top-color: var(--cinza-medio); }
.dark .passo::before { color: var(--ciano); }
@media (max-width: 860px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .passos { grid-template-columns: 1fr; } }

/* Eventos: formatos e estrutura */
.formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.formato { border: 1px solid var(--cinza-medio); padding: 28px 26px; display: grid; gap: 12px; align-content: start; background: var(--branco); min-width: 0; }
.formato h3 { font-size: 20px; }
.dark .formato { background: #0d0d0d; border-color: #333; }
@media (max-width: 860px) { .formatos { grid-template-columns: 1fr; } }
.estrutura-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin: 0; padding: 0; list-style: none; }
.estrutura-lista li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid #222; }
.estrutura-lista li strong { display: block; font-family: var(--fonte-titulo); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; color: var(--branco); }
.estrutura-lista li span { color: var(--cinza-medio); font-size: 15px; }
.estrutura-lista .ic { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--branco); display: grid; place-items: center; }
.estrutura-lista .ic svg { width: 22px; height: 22px; fill: none; stroke: var(--branco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .estrutura-lista { grid-template-columns: 1fr; } }
.foto-vaga { aspect-ratio: 16 / 9; max-width: 100%; border: 1px dashed #444; display: grid; place-items: center; color: var(--cinza-medio); font-size: 14px; text-align: center; padding: 16px; }

/* FAQ */
.faq { display: grid; gap: 0; max-width: 820px; }
.faq details { border-top: 1px solid var(--cinza-medio); }
.faq details:last-child { border-bottom: 1px solid var(--cinza-medio); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font-family: var(--fonte-titulo); font-weight: 500; font-size: 18px; color: var(--grafite); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--ardosia); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; max-width: 70ch; }

/* Trabalhos: filtro */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filtro { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; padding: 10px 14px; border: 1.5px solid var(--grafite); background: transparent; color: var(--grafite); border-radius: 4px; cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--grafite); color: var(--branco); }
.case[hidden] { display: none; }
[hidden] { display: none !important; }
.case .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.case .tag { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ardosia); border: 1px solid var(--cinza-medio); padding: 2px 8px; border-radius: 3px; }

/* Sobre */
.sobre-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sobre-grid .texto { display: grid; gap: 18px; }
.sobre-grid .texto p { max-width: 65ch; }
.diretor { border: 1px solid var(--cinza-medio); padding: 28px; display: grid; gap: 10px; background: var(--branco); }
.diretor .nome { font-family: var(--fonte-titulo); font-weight: 500; font-size: 24px; color: var(--grafite); }
.diretor .cargo { color: var(--ardosia); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--fonte-titulo); }
.valores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.valor { display: grid; gap: 10px; padding-top: 16px; border-top: 2px solid var(--ciano); min-width: 0; }
.valor:nth-child(2) { border-top-color: var(--vermelho); } .valor:nth-child(3) { border-top-color: var(--amarelo); } .valor:nth-child(4) { border-top-color: var(--grafite); }
@media (max-width: 900px) { .sobre-grid { grid-template-columns: 1fr; } .valores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .valores { grid-template-columns: 1fr; } }
.linha-tempo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.marco { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid #444; min-width: 0; }
.marco strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: 28px; color: var(--branco); }
@media (max-width: 760px) { .linha-tempo { grid-template-columns: 1fr 1fr; } }

/* Contato */
.contato-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.canais { display: grid; gap: 22px; }
.canal { display: grid; gap: 4px; }
.canal .rotulo { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--ardosia); }
.canal a { font-size: 20px; color: var(--grafite); text-decoration: none; font-weight: 500; }
.canal a:hover { text-decoration: underline; text-decoration-color: var(--ciano); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.form { display: grid; gap: 18px; background: var(--branco); border: 1px solid var(--cinza-medio); padding: clamp(22px, 3vw, 36px); }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--grafite); font-weight: 500; }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--cinza-medio); background: var(--nuvem); color: var(--grafite); border-radius: 3px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--ciano); outline-offset: 0; border-color: var(--ciano); }
.form textarea { min-height: 120px; resize: vertical; }
.form .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .nota { font-size: 13px; color: var(--ardosia); }
.form .hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; }
.form .erro { color: var(--vermelho); font-size: 14px; }
@media (max-width: 900px) { .contato-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form .duas { grid-template-columns: 1fr; } }

/* Texto longo (privacidade) */
.prosa { max-width: 72ch; display: grid; gap: 16px; }
.prosa h2 { font-size: 24px; margin-top: 16px; }
.prosa h2::after { display: none; }
.prosa ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Galeria com uma só coluna quando poucas telas */
.galeria.uma { grid-template-columns: 1fr; }
.case-corpo .texto p { max-width: 60ch; }

/* Aviso de cookies */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--preto); color: var(--cinza-medio); border-top: 1px solid #333; padding: 18px var(--gutter-r) calc(18px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; font-size: 14px; }
.cookies[hidden] { display: none; }
.cookies p { max-width: 70ch; margin: 0; }
.cookies a { color: var(--ciano); }
.cookies-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cookies .btn { padding: 12px 18px; font-size: 13px; }