/* ===== Menu (SPEC §5.4, §6.1) ===== */
.menu { height:var(--menu-h); background:var(--surface-background); }
.menu__inner {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.menu__logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:37px;
  color:var(--secundaria);
}
/* Figma: monograma de 24×31 na caixa de 30×37 abaixo de 900 */
.menu__logo svg { width:24px; height:31px; }
.menu__list { display:flex; gap:20px; }
.menu__link {
  display:block;
  padding:10px 0;            /* alvo de toque de 44px */
  color:var(--text-body);
  text-decoration:none;
}
.menu__link[aria-current="true"] { color:var(--text-action); }
@media (hover:hover) {
  .menu__link:hover { color:var(--text-action); }
}

@media (min-width:900px) {
  .menu__inner { align-items:flex-start; }
  .menu__logo { width:38px; height:47px; margin-top:42px; }
  .menu__logo svg { width:32px; height:41px; }
  /* nav centralizada na viewport, alinhada ao centro da caixa do logo */
  .menu__nav {
    position:absolute;
    left:50%;
    top:calc(42px + 47px / 2);
    width:366px;
    transform:translate(-50%, -50%);
  }
  .menu__list { justify-content:space-between; gap:0; }
  .menu__link { padding:0; }
}

/* ===== Botão (SPEC §5.1) ===== */
.btn {   /* tipografia vem de .t-label */
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-300);
  text-decoration:none; white-space:nowrap;
  color:var(--text-body); background:none; border:0; cursor:pointer;
}
.btn--primario { height:52px; padding:0 20px; border:var(--border-md) solid var(--primaria-450); color:var(--text-action); }
.btn--secundario { height:52px; padding:0 var(--space-200); border-bottom:var(--border-md) solid var(--secundaria); }
.btn--terciario { height:48px; padding:0 var(--space-100); border-bottom:var(--border-md) solid var(--secundaria); }
.btn svg { width:22px; height:22px; flex:none; }
/* foco de menu e botões (§5.1) */
.menu__logo:focus-visible,
.menu__link:focus-visible,
.btn:focus-visible { outline:var(--border-md) solid var(--secundaria); outline-offset:2px; }
@media (hover:hover) {
  .btn--primario:hover { background:var(--primaria-450); color:var(--base); }
  .btn--secundario:hover, .btn--terciario:hover { color:var(--text-action); border-bottom-color:var(--primaria-450); }
}
.btn--primario:active { background:var(--primaria-450); color:var(--base); }
.btn--secundario:active, .btn--terciario:active { color:var(--text-action); border-bottom-color:var(--primaria-450); }

/* ===== Hero (SPEC §6.2; medidas do Figma) ===== */
.hero__text { padding-block:32px 40px; }
.hero__title { line-height:var(--hero-title-lh); }   /* resto vem de .t-title */
.hero__accent { color:var(--text-heading); }
.hero__past { display:none; }       /* mobile: título sem as palavras riscadas */
.hero__past s { text-decoration-thickness:from-font; text-decoration-skip-ink:none; }
/* Quebras do título fixas (critério de aceite do §6.2): 1024 quebra depois de "Web,"; os demais, depois de "UX," */
.hero__br-1024 { display:none; }
.hero__lead { margin-top:var(--space-400); }
.hero__ctas {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-400);
  margin-top:32px;
}
.hero__ctas .btn--primario { align-self:stretch; }
/* mobile: foto em largura total, fora do container */
.hero__photo { display:block; max-width:none; margin-inline:calc(var(--margin) * -1); aspect-ratio:390 / 284; }
.hero__photo img { width:100%; height:100%; object-fit:cover; }

@media (min-width:768px) {
  .hero__inner {
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    grid-template-rows:minmax(0, 1fr);    /* a linha não cresce com a altura natural da foto */
    column-gap:var(--gutter);
    height:523px;
  }
  .hero__text { grid-column:1 / 7; grid-row:1; padding:0; }
  /* foto: altura inteira do hero, largura das colunas 7–12, recorte com cover (§14 item 1) */
  .hero__photo { grid-column:7 / 13; grid-row:1; margin:0; aspect-ratio:auto; height:100%; min-height:0; overflow:hidden; }
  .hero__past { display:inline; }
  .hero__title { margin-top:61px; max-width:353px; white-space:nowrap; }
  .hero__lead { margin-top:20px; max-width:286px; }
  .hero__ctas { align-items:flex-start; margin-top:43px; }
  .hero__ctas .btn--primario { align-self:auto; }
}
@media (min-width:900px) {
  .hero__title { margin-top:64px; max-width:384px; }
  .hero__ctas { margin-top:40px; }
}
@media (min-width:1024px) {
  .hero__inner { height:587px; }
  .hero__title { margin-top:86px; max-width:449px; }
  .hero__br-1024 { display:inline; }
  .hero__br-padrao { display:none; }
  .hero__lead { margin-top:var(--space-400); max-width:332px; }
  .hero__ctas { flex-direction:row; gap:var(--space-600); margin-top:112px; }
}
@media (min-width:1280px) {
  .hero__title { margin-top:131px; max-width:566px; }
  .hero__br-1024 { display:none; }
  .hero__br-padrao { display:inline; }
  .hero__lead { margin-top:36px; max-width:426px; }
  .hero__ctas { gap:40px; margin-top:82px; }
}

/* ===== Tag (SPEC §5.2) — rótulo visual, não é link ===== */
.tag {
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 var(--space-200);
  border:var(--border-sm) solid; white-space:nowrap;
}
.tag--acao { background:var(--primaria-450); border-color:var(--primaria-450); color:var(--base); }
.tag--status { border-color:var(--abissal-300); color:var(--secundaria); }

/* ===== Projetos (SPEC §6.3, §5.3) ===== */
.projetos { background:var(--surface-section); }
.projetos__inner { padding-block:40px; }
.projetos__head { display:flex; flex-direction:column; gap:var(--space-400); }
.projetos__title { margin-bottom:var(--space-400); }   /* título → textos = 32 no mobile */
.projetos__cards { display:grid; grid-template-columns:minmax(0, 1fr); gap:32px; margin-top:32px; }

/* min-width:0: a largura natural das imagens nunca alarga o card (correção defensiva) */
.card { display:flex; flex-direction:column; gap:var(--space-300); min-width:0; color:inherit; text-decoration:none; }
.card__media { aspect-ratio:171 / 100; }
.card__media picture, .card__media img { width:100%; height:100%; }
.card__media img { object-fit:cover; }
.card__caption {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:"title title" "client tag";
  column-gap:var(--space-400); row-gap:var(--space-100);
}
.card__title { grid-area:title; color:var(--text-action); }
.card__client { grid-area:client; }
.card__tag { grid-area:tag; align-self:center; }
.card__br { display:none; }
.tag--acao { display:none; }   /* D6: "Ver projeto" só a partir de 900 */

.card--link:focus-visible { outline:var(--border-md) solid var(--secundaria); outline-offset:var(--space-100); }
@media (hover:hover) {
  .card--link:hover .card__title { text-decoration:underline; text-decoration-thickness:var(--border-md); text-underline-offset:var(--space-100); }
}

@media (min-width:768px) {
  .projetos__head {
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    column-gap:var(--gutter); row-gap:0;
    align-content:start;
    min-height:244px;                      /* topo dos cards (284) − padding (40) */
  }
  .projetos__title { grid-column:1 / -1; margin:0; }
  .projetos__text { grid-row:2; margin-top:57px; }
  .projetos__text:nth-of-type(1) { grid-column:1 / 7; }
  .projetos__text:nth-of-type(2) { grid-column:7 / 13; }
  .projetos__cards { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--gutter); margin-top:0; }
  .card { gap:var(--space-400); }
  .card__media { aspect-ratio:29 / 19; }
  .card__caption { grid-template-areas:"title tag" "client client"; }
  .card__tag { align-self:start; margin-bottom:-2px; }   /* tag (26) não aumenta a linha do título (24), como no Figma */
  .card__br { display:inline; }            /* quebras do Figma entre 768 e 1279 */
}
@media (min-width:900px) {
  .projetos__inner { padding-block:64px 48px; }
  .projetos__head { min-height:266px; }   /* topo dos cards (330) − padding (64) */
  .projetos__title { grid-column:1 / 5; grid-row:1 / 3; }
  .projetos__text { grid-row:1; margin-top:86px; }
  .projetos__text:nth-of-type(1) { grid-column:5 / 9; }
  .projetos__text:nth-of-type(2) { grid-column:9 / 13; }
  .card__media { aspect-ratio:17 / 10; }
  .tag--acao { display:inline-flex; }
}
@media (min-width:1024px) {
  .card__media { aspect-ratio:436 / 187; }
}
@media (min-width:1280px) {
  .card__media { aspect-ratio:47 / 20; }
  .card__br { display:none; }
}

/* ===== Faixa de logos (SPEC §6.4) ===== */
.logos { background:var(--surface-section); }
.logos__list {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 106px));
  justify-content:space-between;
  row-gap:var(--space-600);
  padding-block:var(--space-600) 40px;
}
/* divisória na largura do container, sem somar altura (§14 item 5) */
.logos__list::before {
  content:""; position:absolute; inset:0 0 auto; height:var(--border-sm);
  background:var(--secundaria-100);
}
.logos__item img { width:100%; height:auto; }
/* Luminosity do Figma sobre o fundo da seção (Vale, Petrobras, Reckitt; Unilever já vem tratado) */
.logos__item--lum img { mix-blend-mode:luminosity; }

@media (min-width:768px) {
  .logos__list { display:flex; justify-content:space-between; align-items:center; padding-block:32px; }
  .logos__item img { width:106px; height:56px; }
}
@media (min-width:1280px) {
  .logos__item img { width:176px; height:100px; }
}

/* ===== Contato (SPEC §6.5) ===== */
.contato { background:var(--surface-background); }
.contato__inner { display:flex; flex-direction:column; gap:var(--space-600); padding-block:64px; }
.contato__status { color:var(--text-action); }
.contato__acoes { display:flex; flex-direction:column; gap:var(--space-400); }
.contato__acoes > .btn--primario { align-self:stretch; }      /* mobile: primário em largura total */
.contato__links { display:flex; justify-content:center; align-items:center; gap:var(--space-600); }

@media (min-width:768px) {
  .contato__inner { padding-bottom:90px; }
  /* ações em linha, centralizadas na vertical em todos os degraus (§14 item 6) */
  .contato__acoes { flex-direction:row; align-items:center; gap:40px; }
  .contato__acoes > .btn--primario { align-self:auto; }
  .contato__links { gap:40px; }
}
@media (min-width:900px) {
  .contato__inner {
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    column-gap:var(--gutter); row-gap:0;
    padding-block:56px 52px;
  }
  .contato__title { grid-column:1 / -1; }
  /* statement com o topo a 150px da seção (Figma) */
  .contato__statement { grid-column:4 / -1; max-width:461px; margin-top:calc(150px - 56px - var(--title-lh)); }
  .contato__status { grid-column:4 / -1; margin-top:15px; }
  .contato__acoes { grid-column:1 / -1; margin-top:37px; }
}
@media (min-width:1280px) {
  .contato__inner { padding-block:104px 133px; }
  .contato__title { grid-column:1 / 7; grid-row:1 / 4; }
  .contato__statement { grid-column:7 / -1; grid-row:1; max-width:465px; margin-top:22px; }
  .contato__status { grid-column:7 / -1; grid-row:2; margin-top:10px; }
  .contato__acoes { grid-column:7 / -1; grid-row:3; margin-top:83px; }
  .contato__links { gap:var(--space-600); }
}