/* Base compartilhada da v05: home e páginas de case. */
/* Medidas do Figma (frame "Site Desktop V1", 2140 px de largura).
   --s converte 1 px do Figma para a tela: calc(N * var(--s)). */
:root{
  --s:calc(min(100vw,2140px) / 2140);
  --preto:#161616;
  --creme:#ffeade;
  --vermelho:#ff004f;
  /* Fundos ocupam a tela toda; o conteúdo fica nos 1840 px centrais do Figma. */
  --margem:calc((100vw - 1840 * var(--s)) / 2);
}
*{box-sizing:border-box}
body{margin:0;background:var(--preto);color:var(--creme);font-family:'Satoshi',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.r{color:var(--vermelho)}
.pagina{overflow:hidden}

/* Menu fixo: transparente sobre o hero (hover preto); depois do hero ganha faixa escura translúcida (hover vermelho). */
.menu{position:fixed;top:0;left:0;right:0;z-index:10;height:calc(194 * var(--s));padding:0 var(--margem);display:flex;justify-content:space-between;align-items:center;transition:background-color .3s,height .3s,backdrop-filter .3s}
/* Logo como máscara pra trocar de cor no hover: preto sobre o hero vermelho, vermelho depois de rolar (mesma regra dos links). */
.marca{display:block;width:calc(50 * var(--s));aspect-ratio:50/34.4024;background:var(--creme);-webkit-mask:url(assets/logo.svg) center/contain no-repeat;mask:url(assets/logo.svg) center/contain no-repeat;transition:background-color .2s}
.menu > a:hover .marca{background:var(--preto)}
.menu.rolou > a:hover .marca{background:var(--vermelho)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:calc(45 * var(--s));font-weight:500;font-size:calc(20 * var(--s))}
.menu a{transition:color .2s}
.menu ul a:hover{color:var(--preto)}
.menu.rolou{height:calc(97 * var(--s));background:rgba(22,22,22,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.menu.rolou ul a:hover{color:var(--vermelho)}
.abre{display:none}

/* ---------- Blocos ---------- */
.bloco{scroll-margin-top:calc(90 * var(--s));padding:calc(123 * var(--s)) var(--margem) 0}
.rotulo{margin:0;font-size:calc(26 * var(--s));letter-spacing:calc(-1.3 * var(--s));line-height:1}
.titulo{margin:0;font-weight:500;font-size:calc(92 * var(--s));letter-spacing:calc(-4.6 * var(--s));line-height:1}
.claro{background:var(--creme);color:var(--preto)}

/* Contato */
.contato{position:relative;padding-bottom:calc(70 * var(--s))}
.redes{position:absolute;top:calc(123 * var(--s));right:var(--margem);display:flex;gap:calc(16.3 * var(--s))}
/* Ícone como máscara: a cor vem do background, então o hover pode ficar vermelho. */
.redes a{display:block;width:calc(39.8 * var(--s));aspect-ratio:39.8/39.79;background:var(--creme);-webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat;transition:background-color .2s}
.redes a:hover{background:var(--vermelho)}
/* URLs declaradas aqui resolvem a partir do base.css, então servem para qualquer pasta. */
.redes .ig{--icone:url(assets/instagram.svg);aspect-ratio:39.05/39.79}
.redes .in{--icone:url(assets/linkedin.svg)}
.claro .redes a:not(:hover){background:var(--preto)}
.claro .rodape{border-top-color:var(--preto)}
.email{display:inline-flex;align-items:center;gap:calc(4 * var(--s));margin-top:calc(40.6 * var(--s));font-weight:500;font-size:calc(22 * var(--s));letter-spacing:calc(-1.1 * var(--s));transition:color .2s}
.email img{width:calc(15.04 * var(--s));height:auto;transform:rotate(-45deg)}
.email:hover{color:var(--vermelho)}
.rodape{display:flex;justify-content:space-between;margin-top:calc(147.4 * var(--s));padding-top:calc(24 * var(--s));border-top:.69px solid var(--creme);font-size:calc(18 * var(--s));letter-spacing:calc(-.9 * var(--s));line-height:1}
.rodape a:hover{color:var(--vermelho)}

/* ---------- Celular ---------- */
@media (max-width:760px){
  :root{--s:calc(100vw / 900);--margem:16px}
  .menu{height:calc(160 * var(--s))}
  .menu.rolou{height:calc(110 * var(--s))}
  .marca{width:calc(70 * var(--s))}
  .menu.aberto > a:hover .marca{background:var(--vermelho)}
  .menu > a{position:relative;z-index:2}
  /* Hambúrguer: 2 traços que viram X; os links abrem em tela cheia. */
  .abre{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin-right:-10px;padding:10px;background:none;border:0;cursor:pointer}
  .abre span{display:block;height:2px;background:var(--creme);transition:transform .3s}
  .menu.aberto .abre span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu.aberto .abre span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .menu ul{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:28px;padding:0 24px;background:var(--preto);font-size:40px;font-weight:700;letter-spacing:-1.5px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .menu ul a:hover{color:var(--vermelho)}
  /* backdrop-filter prende o fixed dentro da barra: tira enquanto o menu está aberto. */
  .menu.aberto{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu.aberto ul{opacity:1;visibility:visible}
  .rotulo{font-size:calc(34 * var(--s))}
  .email{font-size:calc(36 * var(--s))}
  .rodape{font-size:calc(32 * var(--s))}
  /* Redes saem do canto (batiam no título) e vão para baixo dele, com área de toque maior. */
  .redes{position:static;margin-top:calc(50 * var(--s));gap:20px}
  .redes a{width:26px}
}