/* Trabalhe conosco (/trabalhe-conosco/). Usa só tokens do brizmo.css. */

/* Abertura: roxo da marca + foto real, sem formas decorativas */
.cc-hero { background: var(--roxo-700); color: #fff; padding: var(--s-7) 0 0; overflow: hidden; }
.cc-hero__grade { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: end; }
.cc-hero__texto { padding-bottom: var(--s-9); }
.cc-hero h1 { color: #fff; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem); max-width: 15ch; margin-top: var(--s-6); }
.cc-hero__lead { font-size: var(--t-lg); line-height: 1.65; color: #ece8ff; max-width: 52ch; margin: 0 0 var(--s-4); }
.cc-hero__remoto { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-lg); color: #fff; margin: 0 0 var(--s-6); }
.cc-hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.cc-link-claro { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.cc-link-claro:hover { color: #fff; text-decoration-thickness: 2px; }
.cc-link-claro:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
.migalhas--claro, .migalhas--claro a { color: #e2dcff; }
.migalhas--claro a:hover { color: #fff; }
.migalhas--claro [aria-current] { color: #fff; }
.cc-hero__foto { align-self: stretch; display: flex; }
.cc-hero__foto img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; border-radius: 12px 12px 0 0; display: block; }

/* Título + lead lado a lado */
.cc-intro { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s-7); align-items: end; margin-bottom: var(--s-7); }
.cc-intro h2, .cc-intro .lead { margin: 0; }

/* Mosaico de fotos */
.mosaico { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-4); }
.mosaico figure { margin: 0; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.mosaico__a { grid-row: 1 / 3; display: flex; flex-direction: column; }
.mosaico__a img { flex: 1; min-height: 0; }
.mosaico__b img, .mosaico__c img { aspect-ratio: 16 / 10; height: auto; }
.mosaico__c img { object-position: center 25%; }
.mosaico figcaption { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--s-2); line-height: 1.5; }

/* Cultura: lista com fio + fatos práticos */
.cc-cultura { background: var(--roxo-50); }
.cc-cultura__grade { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-9); align-items: start; }
.principios { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.principios li { padding: var(--s-5) 0; border-top: 1px solid var(--linha-forte); line-height: 1.6; color: var(--tinta-2); max-width: 62ch; }
.principios li:last-child { border-bottom: 1px solid var(--linha-forte); }
.principios strong { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-lg); color: var(--tinta); margin-bottom: 4px; }
.cc-fatos { background: #fff; border-radius: 12px; padding: var(--s-6) var(--s-6) var(--s-4); margin-top: calc(var(--t-3xl) * 1.15 + var(--s-6)); }
.cc-fatos h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.cc-fatos dl { margin: 0; }
.cc-fatos div { padding: var(--s-4) 0; border-top: 1px solid var(--linha); }
.cc-fatos dt { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); margin-bottom: 2px; }
.cc-fatos dd { margin: 0; color: var(--tinta-2); line-height: 1.55; }

/* Áreas: linhas tipo tabela */
.areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.area { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--linha-forte); }
.area h3 { display: flex; align-items: center; gap: 12px; font-size: var(--t-xl); margin: 0; }
.area p { margin: 0; line-height: 1.6; color: var(--tinta-2); }
.area__rot { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--tinta); margin-bottom: 4px; }
.peca { width: 18px; height: 18px; flex: none; border-radius: 7px 7px 7px 2px; }
.peca--laranja { background: var(--laranja); }
.peca--verde { background: var(--verde); }
.peca--azul { background: var(--azul); }
.peca--amarelo { background: var(--amarelo); }

/* Vagas: sem vaga = uma linha discreta; com vaga = lista */
.cc-vagas--vazia { padding: var(--s-6) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: #fff; }
.cc-vagas__linha { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.cc-vagas--vazia p { margin: 0; font-size: var(--t-lg); color: var(--tinta-2); }
.cc-vagas--vazia strong { color: var(--tinta); }
.cc-vagas__itens { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--tinta); }
.cc-vaga { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--linha-forte); }
.cc-vaga h3 { margin: 0 0 var(--s-2); font-size: var(--t-xl); }
.cc-vaga p { margin: 0; color: var(--tinta-2); }
.cc-vagas__nota { margin-top: var(--s-5); color: var(--tinta-2); }

/* Etapas: a ordem importa, então tem número */
.cc-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); counter-reset: et; position: relative; }
.cc-etapas::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--roxo-100); }
.cc-etapas li { counter-increment: et; position: relative; display: block; }
.cc-etapas li::before { content: counter(et); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--roxo); color: #fff; font-family: var(--f-titulo); font-weight: 500; margin-bottom: var(--s-4); position: relative; }
.cc-etapas h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.cc-etapas p { line-height: 1.6; color: var(--tinta-2); margin: 0; }

/* Envio: fechamento da página */
.cc-envio { background: #fff; border-top: 1px solid var(--linha); }
.cc-envio__grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.cc-envio__foto img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; display: block; }
.cc-envio__texto > p { color: var(--tinta-2); line-height: 1.6; max-width: 52ch; }
.cc-email { font-family: var(--f-titulo); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); color: var(--roxo-700) !important; margin: var(--s-5) 0; overflow-wrap: anywhere; }
.cc-envio__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cc-obs { font-size: var(--t-sm); margin-top: var(--s-4); }
.cc-lgpd { font-size: var(--t-sm); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--linha); }
.cc-lgpd strong { color: var(--tinta); }

@media (max-width: 900px) {
  .cc-hero__grade, .cc-intro, .cc-cultura__grade, .cc-envio__grade { grid-template-columns: 1fr; }
  .cc-hero__texto { padding-bottom: 0; }
  .cc-hero__foto img { min-height: 260px; max-height: 340px; }
  .cc-intro { gap: var(--s-4); }
  .cc-fatos { margin-top: 0; }
  .area { grid-template-columns: 1fr; gap: var(--s-3); }
  .cc-etapas { grid-template-columns: 1fr; gap: var(--s-5); }
  .cc-etapas::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .cc-etapas li { padding-left: 60px; }
  .cc-etapas li::before { position: absolute; left: 0; top: 0; }
  .cc-envio__grade { gap: var(--s-6); padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .cc-vaga { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .mosaico { grid-template-columns: 1fr; }
  .mosaico__a { grid-row: auto; }
  .mosaico img, .mosaico__a img { height: auto; aspect-ratio: 4 / 3; flex: none; }
}