/* ==========================================================================
   Lumen Service - folha de estilos
   Estrutura:
     0. Fontes (arquivos no próprio site)
     1. Variáveis (cores e fontes)
     2. Base
     3. Componentes comuns (container, botão, divisória)
     4. Cabeçalho
     5. Topo (hero)
     6. Apresentação
     7. Serviços
     8. Faixa de destaque
     9. Contato
    10. Rodapé
    11. Responsivo
    12. Animação
    13. Página 404
    14. Página de relatórios
    15. Trabalhe conosco
   ========================================================================== */


/* 0. Fontes ------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
}


/* 1. Variáveis ------------------------------------------------------------ */
:root {
  --navy: #061131;        /* azul da logo oficial */
  --navy-2: #13235a;
  --yellow: #ffde59;      /* amarelo da logo oficial: fundos, detalhes e texto sobre azul */
  --gold-text: #ffde59;   /* amarelo da logo no destaque do título (escolha da empresa) */
  --paper: #f4f5f8;
  --white: #ffffff;
  --ink: #1c2233;
  --muted: #5a6275;
  --line: #d9dce4;
  --tile: #eceef3;

  --section: clamp(56px, 7vw, 88px);   /* espaço vertical padrão entre seções */
  --gap: clamp(24px, 4vw, 48px);       /* espaço entre colunas */
  --t-offset: -.035em;                 /* ajuste ótico da letra "T" no título */

  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  color-scheme: light;
}


/* 2. Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* link "pular para o conteúdo": só aparece ao navegar pelo teclado */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  background: var(--navy);
  color: var(--yellow);
  font-weight: 700;
}

.skip-link:focus {
  top: 0;
}

/* texto lido só por leitores de tela */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 3. Componentes comuns --------------------------------------------------- */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--navy);
  color: var(--yellow);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--navy-2);
}

.btn--small {
  padding: 10px 16px;
  font-size: 12px;
}

.btn svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.vline {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .3);
}

.vline--dark {
  background: var(--line);
}


/* 4. Cabeçalho ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo__mark {
  width: 44px;
  height: 44px;
}

.logo__name {
  width: auto;
  height: 34px;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}

.nav ul a {
  display: inline-block;
  padding-block: 10px;
  color: var(--navy);
  text-decoration: none;
}

.nav ul a:hover {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}


/* 5. Topo (hero) ---------------------------------------------------------- */
.hero {
  overflow: hidden;
  background: var(--white);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gap);
  align-items: center;
  padding-block: var(--section);
}

/* a largura do bloco de texto acompanha a linha mais longa do título,
   assim o parágrafo termina na mesma borda direita do título */
.hero__text {
  width: max-content;
  max-width: 100%;
}

.hero h1 {
  margin: 0 0 20px;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(38px, 6.2vw, 78px);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.hero__line {
  display: block;
}

/* compensa o espaço que a letra "T" tem à esquerda, para alinhar com as linhas de baixo */
.hero__line--first {
  margin-left: var(--t-offset, 0);
}

.hero__line--accent {
  margin-top: .18em;   /* espaço extra para o acento do "É" não encostar na linha de cima */
  color: var(--gold-text);
}

.hero p {
  width: 0;
  min-width: 100%;   /* não alarga o bloco: quebra na largura do título */
  margin: 0;
  text-wrap: pretty;
  font-size: 17px;
}

.hero__btn {
  margin-top: 28px;
}

.hero p strong {
  color: var(--navy);
}

.hero__photo {
  position: relative;
  max-width: 100%;
  background: var(--tile);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.hero__photo picture {
  display: block;
  height: 100%;
}

.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 484 / 580;
  object-fit: cover;
}

/* linha amarela inclinada */
.hero__photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9%;
  z-index: 1;
  width: 3px;
  height: 70%;
  background: var(--yellow);
  transform: skewX(-14deg);
  transform-origin: top;
}

/* bloco azul no canto inferior */
.hero__photo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 22%;
  background: var(--navy);
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}


/* 6. Apresentação --------------------------------------------------------- */
.intro {
  padding-block: var(--section) 0;
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--gap);
  align-items: center;
}

.intro__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
  border-bottom: 6px solid var(--yellow);
}

.intro h2 {
  max-width: 34ch;
  margin: 0 0 12px;
  color: var(--navy);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
}

.intro p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
}


/* 7. Serviços ------------------------------------------------------------- */
.services {
  padding-block: var(--section);
  scroll-margin-top: 80px;   /* não fica escondido atrás do cabeçalho fixo */
}

.title-rule {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.title-rule::before,
.title-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.title-rule h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 22px 8px 18px;
  border-radius: 8px;
  background: var(--tile);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
}

.services__grid svg {
  flex: none;
  width: 42px;
  height: 42px;
  color: var(--navy);
}

.services__grid li:hover svg .acc {
  fill: var(--yellow);
}


/* 8. Faixa de destaque ---------------------------------------------------- */
.focus {
  background: var(--navy);
  color: var(--white);
}

.focus__grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 28px var(--gap);
  align-items: center;
  padding-block: clamp(44px, 5vw, 64px);
}

.focus__icon {
  width: 64px;
  height: 64px;
}

.focus h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.focus h2 span {
  display: block;
  color: var(--yellow);
}

.focus ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.focus li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.focus li svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--yellow);
}


/* 9. Contato -------------------------------------------------------------- */
.contact {
  padding-block: var(--section);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.contact h2 {
  margin: 0 0 24px;
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.contact h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 10px;
  background: var(--yellow);
}

.contact__grid > * {
  min-width: 0;
}

.contact__list a {
  overflow-wrap: anywhere;
}

address {
  font-style: normal;
}

.contact__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;   /* alinha o ícone com a primeira linha do texto */
  color: var(--navy);
}

.whatsapp p {
  max-width: 40ch;
  margin: 0 0 20px;
}

.btn--whatsapp svg {
  width: 22px;
  height: 22px;
}

.whatsapp .note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}


/* 10. Rodapé -------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 28px;
}

.site-footer a {
  display: inline-block;
  padding: 8px;
  margin: -8px;
}

.site-footer svg {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--white);
}


/* 11. Responsivo ---------------------------------------------------------- */
/* telas largas: os 8 serviços numa linha só */
@media (min-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .services__grid li {
    padding-inline: 4px;
    font-size: 11px;
    letter-spacing: 0;
  }
}

@media (max-width: 960px) {
  .focus__grid {
    grid-template-columns: auto 1fr;
  }

  .focus__grid .vline {
    display: none;
  }

  .focus ul {
    grid-column: 1 / -1;
  }
}

/* menu abaixo da logo quando não cabe tudo numa linha */
@media (max-width: 1040px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .nav nav {
    order: 3;
    width: 100%;
  }

  /* menu em abas: uma linha só no tablet */
  .nav ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    font-size: 13px;
  }

  .nav ul a {
    display: block;
    padding: 8px 4px;
    border-radius: 8px;
    background: var(--tile);
    text-align: center;
    white-space: nowrap;
  }

  .nav ul a:hover {
    text-decoration: none;
    background: var(--line);
  }

  .nav ul li a[aria-current="page"] {
    background: var(--navy);
    color: var(--yellow);
    text-decoration: none;
  }
}

/* celular: 3 itens em cima e 2 embaixo */
@media (max-width: 600px) {
  .nav ul {
    grid-template-columns: repeat(6, 1fr);
  }

  .nav li {
    grid-column: span 2;
  }

  .nav li:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (max-width: 760px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  /* no celular o texto ocupa a largura toda */
  .hero__text {
    width: auto;
  }

  .hero p {
    width: auto;
  }

  .hero__photo img {
    aspect-ratio: 4 / 3;
    object-position: center 20%;
  }

  .intro__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .contact__grid {
    row-gap: 48px;
  }

  .contact__grid .vline {
    display: none;
  }
}

@media (max-width: 440px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .btn {
    padding: 12px 16px;
    font-size: 12px;
  }

  .nav .btn {
    padding: 8px 12px;
    font-size: 11px;
  }

  .logo__mark {
    width: 38px;
    height: 38px;
  }

  .logo__name {
    height: 29px;
  }
}


/* 12. Animação ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .hero h1,
  .hero p,
  .hero .btn {
    animation: rise .6s ease-out both;
  }

  .hero p {
    animation-delay: .08s;
  }

  .hero .btn {
    animation-delay: .16s;
  }

  @keyframes rise {
    from { transform: translateY(10px); }
    to   { transform: none; }
  }
}


/* 13. Página 404 ---------------------------------------------------------- */
.not-found {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding-block: 96px;
}

.not-found h1 {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 48px;
  line-height: 1;
}

.not-found p {
  margin: 0 0 8px;
  color: var(--muted);
}


/* 14. Página de relatórios (igualdade salarial) --------------------------- */
.nav ul a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.report {
  max-width: 820px;
  padding-block: var(--section);
}

.report h1 {
  margin: 0 0 24px;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.report__intro {
  display: grid;
  gap: 12px;
  max-width: 65ch;
  color: var(--muted);
}

.report__intro p {
  margin: 0;
}

.report__title {
  margin: 48px 0 16px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.report__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 10px;
  background: var(--yellow);
}

.reports {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reports a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}

.reports a:hover {
  border-color: var(--navy);
}

.reports__tag {
  flex: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--navy);
  color: var(--yellow);
  font-size: 12px;
  letter-spacing: .06em;
}

/* aviso que some sozinho quando houver pelo menos um relatório na lista */
.reports__empty {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
}

.reports:has(li) + .reports__empty {
  display: none;
}

.report__contact {
  margin: 40px 0 0;
  color: var(--muted);
  font-size: 14px;
}


/* 15. Trabalhe conosco (banco de talentos) -------------------------------- */
.talent {
  display: grid;
  gap: 32px;
}

.talent__steps {
  display: grid;
  gap: 10px;
  max-width: 65ch;
  margin: 0;
  padding-left: 22px;
}

.talent__steps li::marker {
  color: var(--navy);
  font-weight: 700;
}

.talent__send {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.talent__label {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
}

.talent__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.talent__buttons .btn {
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
}

.btn--outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--navy);
  color: var(--navy);
}

.btn--outline:hover {
  background: var(--tile);
}

.talent__alt {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.talent__email {
  color: var(--navy);
  overflow-wrap: anywhere;
  user-select: all;   /* um clique seleciona o e-mail inteiro para copiar */
}

.talent__areas h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 16px;
}

.talent__areas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.talent__areas li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tile);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}

.report__contact a {
  display: inline-block;
  padding-block: 4px;
  overflow-wrap: anywhere;
}

/* aviso PCD */
.pcd {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 4px solid var(--yellow);
  border-radius: 10px;
  background: var(--navy);
  color: var(--white);
}

.pcd__icon {
  width: 32px;
  height: 32px;
  color: var(--yellow);
}

.pcd h2 {
  margin: 0 0 6px;
  line-height: 1.3;
  color: var(--yellow);
  font-size: 18px;
  font-weight: 700;
}

.pcd p {
  margin: 0;
  max-width: 60ch;
}