/* =====================================================================
   ILUMINIUM BRASIL — base compartilhada por TODAS as páginas:
   tokens, tipografia, nav, botões, cards de produto e rodapé.

   Conceito: verde da marca em repouso, luz quando ativo. A luz quente
   de 3000K — o pingo aceso do "i" do logo — só aparece na ação
   principal e no que a pessoa ativa (hover, seleção, interruptor
   ligado).
   ===================================================================== */

:root{
  /* verde da marca */
  --verde:   #183C32;
  --verde-2: #2B5548;
  --verde-3: #0E241D;

  /* fundos claros */
  --aluminio:   #F3F2ED;
  --aluminio-2: #E6E4DC;
  --aluminio-3: #CFCCC1;
  --papel:      #FFFFFF;

  /* texto */
  --tinta:      #142320;
  --tinta-2:    #5C6A64;
  --tinta-inv:  #F2EDE2;
  --tinta-inv-2: rgba(242,237,226,.7);
  --linha:       rgba(20,35,32,.12);
  --linha-forte: rgba(20,35,32,.22);
  --linha-inv:   rgba(255,255,255,.12);

  /* luz */
  --luz:        #F6B04F;
  --luz-clara:  #FFC877;
  --luz-nucleo: #FFF3DC;
  --ouro:       #7A5A1C;
  --ouro-claro: #D9B46A;
  --foco:       var(--verde);

  /* espaçamento — grade de 8px */
  --s-05: 4px;
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-7:  56px;
  --s-8:  64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;
  --secao: clamp(80px, 10vw, 128px);
  --nav-h: 68px;

  /* cantos — por hierarquia, não um raio pra tudo */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* sombras em camadas, tingidas do verde-escuro */
  --sombra-1: 0 1px 2px rgba(20,35,32,.06), 0 1px 1px rgba(20,35,32,.04);
  --sombra-2: 0 1px 2px rgba(20,35,32,.05), 0 10px 28px -10px rgba(20,35,32,.18);
  --sombra-3: 0 2px 4px rgba(20,35,32,.05), 0 28px 60px -18px rgba(20,35,32,.30);
  --brilho:   0 0 0 1px rgba(255,200,120,.6), 0 10px 30px -8px rgba(246,160,50,.65), 0 0 60px -12px rgba(255,190,100,.7);

  /* movimento */
  --ease:   cubic-bezier(.2,.7,.2,1);
  --t-rapido: .18s;
  --t-medio:  .32s;
  --t-lento:  .7s;

  /* tipografia */
  --serif: 'Archivo', Arial, sans-serif;   /* 13/10: fonte da marca (equivalente grátis da Trade Gothic Extended do manual) */
  --sans:  'Archivo', Arial, sans-serif;
  --fs-h1: clamp(32px, 4.4vw, 62px);
  --fs-h2: clamp(26px, 3.1vw, 40px);
  --fs-h3: clamp(18px, 1.5vw, 21px);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body{ margin: 0; }

body{
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* título de seção não some atrás da nav fixa ao clicar num link do menu */
section[id]{ scroll-margin-top: calc(var(--nav-h) + 16px); }

a{ color: inherit; }
img{ max-width: 100%; display: block; }

::selection{ background: rgba(246,176,79,.38); color: var(--tinta); }

h1, h2, h3{
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--tinta);
  margin: 0;
}

.kicker{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ouro);
  margin-bottom: var(--s-2);
}

:focus-visible{ outline: 2px solid var(--foco); outline-offset: 3px; }
.site-nav, .nav-mobile-menu, .site-footer, .hero, .catalogo-card, .pframe{ --foco: var(--luz); }

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   NAV — transparente sobre o hero da home; vira verde fosco ao rolar
   (.is-solid) ou direto nas páginas internas (.nav-static).
   ===================================================================== */
.site-nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) clamp(20px, 5vw, 56px) 18px;
  transition: background var(--t-medio) var(--ease), padding var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease);
}

.site-nav.is-solid,
.site-nav.nav-static{
  background: rgba(24,60,50,.95);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linha-inv), 0 16px 40px -20px rgba(0,0,0,.6);
  /* 11 + logo 46 + 11 = 68px (--nav-h): a logo ocupa quase toda a barra */
  padding-top: calc(env(safe-area-inset-top, 0px) + 11px);
  padding-bottom: 11px;
}

.nav-logo{
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--r-xs);
}
.nav-logo-img{ height: 46px; width: auto; display: block; transition: height var(--t-medio) var(--ease); }
/* na hero (menu transparente) a logo é maior; ao rolar volta pros 30px */
.site-nav:not(.is-solid):not(.nav-static) .nav-logo-img{ height: 48px; }

.nav-links{ display: none; }

.nav-right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav-social,
.nav-burger{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-inv);
  transition: background var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease);
}
.nav-social svg{ width: 17px; height: 17px; stroke: currentColor; }
/* botão do catálogo: no celular só o ícone; no computador ganha o texto */
.nav-catalogo-txt{ display: none; }
/* celular: no topo só catálogo + menu; Instagram e WhatsApp ficam dentro
   do menu (.nav-mobile-social) */
@media (max-width: 860px){
  .nav-right .nav-social:not(.nav-catalogo){ display: none; }
}
.nav-mobile-social{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s-3);
}
.nav-mobile-social a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.28);
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta-inv);
  text-decoration: none;
  transition: background var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease);
}
.nav-mobile-social a:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); }
.nav-mobile-social svg{ width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; }
.nav-social:hover,
.nav-burger:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); }

.nav-burger{ position: relative; cursor: pointer; padding: 0; flex-shrink: 0; }
.nav-burger-lines{ position: relative; width: 16px; height: 12px; }
.nav-burger-lines span{
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s ease, top .25s var(--ease);
}
.nav-burger-lines span:nth-child(1){ top: 0; }
.nav-burger-lines span:nth-child(2){ top: 5px; }
.nav-burger-lines span:nth-child(3){ top: 10px; }
.nav-burger.is-open .nav-burger-lines span:nth-child(1){ top: 5px; transform: rotate(45deg); }
.nav-burger.is-open .nav-burger-lines span:nth-child(2){ opacity: 0; }
.nav-burger.is-open .nav-burger-lines span:nth-child(3){ top: 5px; transform: rotate(-45deg); }

.nav-mobile-menu{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 190;
  background: var(--verde);
  padding: calc(env(safe-area-inset-top, 0px) + 88px) clamp(20px, 5vw, 56px) var(--s-4);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.5);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s var(--ease), opacity .2s ease, visibility 0s linear .28s;
}
.nav-mobile-menu.is-open{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .28s var(--ease), opacity .2s ease;
}
.nav-mobile-links{ list-style: none; margin: 0; padding: 0; }
.nav-mobile-links a{
  display: block;
  padding: var(--s-2) 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 350;
  letter-spacing: -.01em;
  color: var(--tinta-inv);
  text-decoration: none;
  border-bottom: 1px solid var(--linha-inv);
  transition: color var(--t-rapido) var(--ease), padding-left var(--t-medio) var(--ease);
}
.nav-mobile-links a:hover{ color: var(--luz-clara); padding-left: var(--s-1); }

@media (min-width: 861px){
  .site-nav{
    grid-template-columns: 1fr auto 1fr;
    padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
    padding-bottom: 24px;
  }

  .nav-links{
    grid-column: 2;
    display: flex;
    gap: clamp(20px, 2.6vw, 40px);
    list-style: none;
    margin: 0; padding: 0;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--tinta-inv-2);
  }
  .nav-links a{
    position: relative;
    display: block;
    padding: 6px 0;
    text-decoration: none;
    transition: color var(--t-rapido) var(--ease);
  }
  /* o sublinhado é uma fita que acende */
  .nav-links a::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    border-radius: 2px;
    background: var(--luz);
    box-shadow: 0 0 8px rgba(246,176,79,.85);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-medio) var(--ease);
  }
  .nav-links a:hover,
  .nav-links a:focus-visible{ color: var(--tinta-inv); }
  /* em cima da foto da hero (menu transparente): texto mais forte com uma
     sombra leve, pra não sumir na parede clara */
  .site-nav:not(.is-solid):not(.nav-static) .nav-links{ color: rgba(255,255,255,.92); }
  .site-nav:not(.is-solid):not(.nav-static) .nav-links a,
  .site-nav:not(.is-solid):not(.nav-static) .nav-catalogo{ text-shadow: 0 1px 10px rgba(0,0,0,.45); }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after{ transform: scaleX(1); }

  .nav-right{ grid-column: 3; }
  .nav-burger{ display: none; }
  .nav-mobile-menu{ display: none; }
}

/* logo nova (out/2026) é mais larga que a antiga: no celular fica com 40px
   e entre 861 e 1119px encolhe com a tela pra não encostar nos links */
@media (max-width: 860px){
  .nav-logo-img,
  .site-nav:not(.is-solid):not(.nav-static) .nav-logo-img{ height: 40px; }
}
.nav-logo-img{ max-width: none; }   /* nunca espremer: o tamanho vem da altura */
/* logo da hero fica em 48px no máximo (out/2026: hero mais leve) */
@media (min-width: 861px) and (max-width: 999px){
  .nav-logo-img,
  .site-nav:not(.is-solid):not(.nav-static) .nav-logo-img{ height: 30px; }
}
@media (min-width: 1000px) and (max-width: 1119px){
  .nav-logo-img,
  .site-nav:not(.is-solid):not(.nav-static) .nav-logo-img{ height: 38px; }
}

/* telas largas: logo ainda maior na hero e o catálogo ganha o texto
   (entre 861 e 1119px não cabe junto com os links do meio) */
@media (min-width: 1120px){
  .site-nav:not(.is-solid):not(.nav-static) .nav-logo-img{ height: 48px; }

  .nav-catalogo{
    width: auto;
    gap: 8px;
    padding: 0 16px 0 13px;
    border-radius: var(--r-pill);
    border-color: rgba(246,176,79,.55);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
  }
  .nav-catalogo:hover,
  .nav-catalogo:focus-visible{ border-color: var(--luz); background: rgba(246,176,79,.14); }
  .nav-catalogo-txt{ display: inline; }
}

/* =====================================================================
   BOTÕES
   .btn-brand  — ação principal: verde em repouso, acende ao tocar.
   .btn-outline — ação secundária.
   ===================================================================== */
.btn-brand,
.btn-outline{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease),
    box-shadow var(--t-medio) var(--ease),
    transform var(--t-rapido) var(--ease);
}

.btn-brand{
  border: 0;
  background: var(--verde);
  color: var(--tinta-inv);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--sombra-1);
}
.btn-brand:hover,
.btn-brand:focus-visible{
  background: var(--verde-2);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(246,176,79,.6), 0 12px 30px -10px rgba(246,160,50,.6);
}
.btn-brand:active{ transform: translateY(0); }

.btn-outline{
  border: 1.5px solid var(--linha-forte);
  background: transparent;
  color: var(--tinta);
  padding: 0 24px;
}
.btn-outline:hover,
.btn-outline:focus-visible{ border-color: var(--tinta); background: var(--papel); }

/* =====================================================================
   CARDS DE PRODUTO — grid da home (#produtos) e páginas de loja.
   No hover, uma fita acende na borda de baixo da foto e banha o texto
   de luz quente — igual LED embaixo de prateleira.
   ===================================================================== */
.produtos-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 640px){ .produtos-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .produtos-grid{ grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }

.produto-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-1);
  transition: transform var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease);
}
.produto-card:hover,
.produto-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--linha-forte), var(--sombra-3);
}

.produto-media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--aluminio-2);
}
.produto-media::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 2px;
  background: var(--luz-nucleo);
  box-shadow: 0 0 10px 1px rgba(246,176,79,.95), 0 0 26px 4px rgba(246,176,79,.5);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--t-medio) var(--ease), transform var(--t-lento) var(--ease);
}
.produto-card:hover .produto-media::after,
.produto-card:focus-visible .produto-media::after{ opacity: 1; transform: scaleX(1); }

.produto-media .produto-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t-lento) var(--ease);
}
.produto-card:hover .produto-photo{ transform: scale(1.05); }

/* fotos de fita real (fio na ponta esquerda) — corte puxado pra direita */
.produto-photo.crop-right{ object-position: 75% center; }

.produto-media-badge{
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  z-index: 3;
  background: rgba(20,35,32,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--tinta-inv);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

.produto-body{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-3) var(--s-4);
}
.produto-body::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(246,176,79,.16), rgba(246,176,79,0));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-lento) var(--ease);
}
.produto-card:hover .produto-body::before,
.produto-card:focus-visible .produto-body::before{ opacity: 1; }

.produto-card h3{ position: relative; font-size: var(--fs-h3); font-weight: 450; letter-spacing: -.01em; }
.produto-card p{ position: relative; font-size: 15px; line-height: 1.6; color: var(--tinta-2); margin: 0; }

.produto-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  transition: color var(--t-rapido) var(--ease);
}
.produto-link::after{
  content: "";
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-medio) var(--ease);
}
.produto-card:hover .produto-link,
.produto-compact:hover .produto-link{ color: var(--ouro); }
.produto-card:hover .produto-link::after,
.produto-compact:hover .produto-link::after{ transform: translateX(4px); }

@media (min-width: 1000px){
  .produto-body{ padding: 28px 32px 32px; }
}

/* =====================================================================
   CARDS COMPACTOS — fontes, sensores e acessórios. Sem foto: um ícone
   num bloquinho de alumínio que acende no hover.
   ===================================================================== */
.produtos-compact-head{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-10) 0 var(--s-3);
}
.produtos-compact-head .kicker{
  margin: 0;
  font-size: 22px;
  color: var(--tinta);
  white-space: nowrap;
}
.produtos-compact-head::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha-forte);
}

.produtos-compact{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
@media (min-width: 760px){ .produtos-compact{ grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }

.produto-compact{
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--s-2);
  row-gap: 6px;
  align-content: start;
  padding: var(--s-3);
  background: var(--papel);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-1);
  transition: transform var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease);
}
.produto-compact > *{ grid-column: 2; }
.produto-compact:hover,
.produto-compact:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--linha-forte), var(--sombra-2);
}

.produto-compact-icon{
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--verde);
  background: linear-gradient(160deg, #F8F9FA 0%, #DCE0E4 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(20,35,32,.08), 0 0 0 1px rgba(20,35,32,.08), 0 1px 2px rgba(20,35,32,.10);
  transition: box-shadow var(--t-medio) var(--ease), color var(--t-medio) var(--ease);
}
.produto-compact-icon svg{
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.produto-compact:hover .produto-compact-icon,
.produto-compact:focus-visible .produto-compact-icon{
  color: var(--ouro);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(246,176,79,.65), 0 0 22px -4px rgba(246,176,79,.85);
}

.produto-compact h3{ font-size: 21px; font-weight: 450; letter-spacing: -.01em; align-self: center; }
.produto-compact p{ font-size: 14.5px; line-height: 1.6; color: var(--tinta-2); margin: 0; }
.produto-compact .produto-link{ padding-top: var(--s-1); font-size: 13.5px; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.site-footer{
  background: var(--verde-3);
  color: var(--tinta-inv-2);
  padding: var(--s-7) 0 var(--s-3);   /* rodapé mais baixo (out/2026) */
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* no celular: logo em cima, colunas de 2 em 2 */
  gap: var(--s-4) var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--linha-inv);
}
@media (max-width: 639px){ .footer-about{ grid-column: 1 / -1; } }
@media (min-width: 1000px){ .footer-grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-5); } }

.footer-logo{ display: inline-block; margin-bottom: 14px; border-radius: var(--r-xs); }
.footer-logo-img{ height: 46px; width: auto; display: block; }   /* mesmo tamanho da logo do menu */

.footer-grid p{ font-size: 14px; line-height: 1.6; max-width: 30ch; margin: 0; }

.footer-col h3{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta-inv);
  margin: 0 0 12px;
}
.footer-col ul{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.footer-col a{
  text-decoration: none;
  color: var(--tinta-inv-2);
  transition: color var(--t-rapido) var(--ease);
}
.footer-col a:hover{ color: var(--tinta-inv); }

.footer-social{ display: flex; gap: 10px; margin-top: var(--s-2); }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--linha-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-inv);
  transition: border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease);
}
.footer-social a svg{ width: 17px; height: 17px; stroke: currentColor; }
.footer-social a:hover{ border-color: rgba(246,176,79,.6); color: var(--luz-clara); }

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: var(--s-2);
  font-size: 12.5px;
  color: rgba(245,246,247,.5);
}

/* =====================================================================
   FONTE DA MARCA (13/10/2026): sai a serifada Fraunces, entra a Archivo
   larga — a equivalente grátis da Trade Gothic LT Extended do manual do
   designer. Títulos em negrito largo, sem itálico; os textinhos acima dos
   títulos viram rótulo em maiúsculas espaçadas, como no manual.
   ===================================================================== */
body{ font-stretch: 108%; }
h1, h2, h3, h4{ font-stretch: 125%; font-weight: 650 !important; letter-spacing: -.012em; }
em, .kicker, .rep-eyebrow{ font-style: normal !important; }
h1 em, h2 em, h3 em, h4 em{ font-weight: 400 !important; }
.kicker, .rep-eyebrow{
  font-family: var(--sans);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-mobile-links a{ font-stretch: 125%; font-weight: 600; font-size: 21px; }