/* ======================================================================
   SITE LUIZA HIDD — CSS COMPARTILHADO
   ----------------------------------------------------------------------
   Este arquivo vale para TODAS as páginas do site (home, sobre e cases).
   Mudou aqui, mudou no site inteiro.

   Diretriz: fonte única Helvetica Now Display, layout só em preto e
   branco. As fotos dos projetos mantêm as cores originais.
   ====================================================================== */

:root{
  --ink:#0a0a0a;                 /* preto do texto */
  --soft:#6e6e6e;                /* cinza das legendas e rótulos */
  --line:rgba(0,0,0,0.14);       /* linhas finas */
  --bg:#ffffff;                  /* fundo */
  --tile:#f4f4f4;                /* fundo cinza-claro das peças soltas */
  --pad:clamp(24px, 6vw, 120px); /* margem lateral */
  --fonte:"Helvetica Now Display","Liberation Sans",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--ink);
  font-family:var(--fonte); -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto;}
a{color:inherit;}
.wrap{width:100%; max-width:1920px; margin:0 auto;}


/* ---------- Barra do topo (igual em todas as páginas) ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px 32px;
  padding:clamp(24px,4vw,56px) var(--pad) clamp(16px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.topbar .logo{font-weight:700; font-size:clamp(15px,1.6vw,22px); letter-spacing:0.06em; text-transform:uppercase; text-decoration:none;}
.topbar .menu{display:flex; flex-wrap:wrap; align-items:center; gap:8px clamp(18px,2.4vw,40px);}
.topbar .menu a{font-size:clamp(11px,1vw,13px); letter-spacing:0.08em; text-transform:uppercase; color:var(--soft); text-decoration:none; padding:6px 0;}
.topbar .menu a:hover,
.topbar .menu a[aria-current="page"]{color:var(--ink);}
.topbar .menu .idioma{color:var(--ink); font-weight:700; border:1px solid var(--ink); padding:6px 10px;}
.topbar .menu .idioma:hover{background:var(--ink); color:var(--bg);}


/* ---------- Capa do case ---------- */
.hero{width:100%; aspect-ratio:1920/980; overflow:hidden; position:relative;}
.hero img{width:100%; height:100%; object-fit:cover; display:block;}


/* ---------- Título grande ---------- */
.headline{padding:clamp(48px,8vw,120px) var(--pad) clamp(32px,5vw,80px);}
.headline .eyebrow{font-size:clamp(11px,1vw,13px); letter-spacing:0.08em; text-transform:uppercase; color:var(--soft); margin-bottom:clamp(16px,2vw,28px);}
.headline h1{
  font-weight:700;
  font-size:clamp(36px,6.5vw,104px);
  line-height:1.02;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  max-width:1500px;
}


/* ---------- Bloco "O projeto": rótulo + parágrafo ---------- */
.intro{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:clamp(24px,4vw,80px);
  padding:0 var(--pad) clamp(56px,8vw,120px);
}
.intro .label{font-weight:700; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink);}
.intro p{font-size:clamp(16px,1.6vw,26px); line-height:1.55; max-width:1180px; color:#1c1c1c;}


/* ---------- Faixa Cliente / Segmento / Entregáveis ---------- */
.metastrip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 var(--pad) clamp(56px,8vw,140px);
}
.metastrip .cell{padding:clamp(18px,2.5vw,36px) clamp(14px,2vw,40px); border-left:1px solid var(--line);}
.metastrip .cell:first-child{border-left:none;}
.metastrip .cell .k{font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--soft); margin-bottom:10px; font-weight:700;}
.metastrip .cell .v{font-size:clamp(13px,1.2vw,18px); line-height:1.4;}


/* ---------- Título de seção numerada ---------- */
.section-label{
  padding:0 var(--pad);
  margin-bottom:clamp(24px,4vw,48px);
  display:flex; align-items:baseline; gap:20px;
}
.section-label .num{font-weight:700; font-size:15px; letter-spacing:0.06em;}
.section-label .name{font-weight:700; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--soft);}
.section-label::after{content:""; flex:1; height:1px; background:var(--line); align-self:center;}


/* ---------- Grades de 2 e 3 colunas ---------- */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,60px);
  padding:0 var(--pad);
  margin-bottom:clamp(32px,5vw,56px);
}
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,60px);
  padding:0 var(--pad);
  margin-bottom:clamp(32px,5vw,56px);
}
.grid3.compacta{gap:clamp(16px,2.5vw,40px);}


/* ---------- Figuras e legendas ---------- */
figure{margin:0;}
figure img{width:100%; display:block; object-fit:cover; background:#eee;}
figcaption{
  margin-top:16px;
  font-size:12.5px; letter-spacing:0.05em; color:var(--soft);
  display:flex; justify-content:space-between; gap:16px;
  border-top:1px solid var(--line);
  padding-top:12px;
}
figcaption .n{font-weight:700; color:var(--ink);}

/* natural-fig: imagem em largura total, sem corte */
.natural-fig{width:100%; margin-bottom:clamp(56px,8vw,140px);}
.natural-fig img{width:100%; height:auto; display:block;}
.natural-fig figcaption{padding:16px var(--pad) 0; margin-top:0;}
.natural-fig.contained{max-width:820px; margin-left:auto; margin-right:auto;}

/* fullbleed: largura total COM corte (só para fotos que aguentam) */
.fullbleed{width:100%; margin-bottom:clamp(56px,8vw,140px);}
.fullbleed img{width:100%; display:block; aspect-ratio:1920/820; object-fit:cover;}
.fullbleed figcaption{padding:16px var(--pad) 0; margin-top:0;}
.fullbleed.campaign-fig img{aspect-ratio:1920/760;}

/* tile-fig / icon-fig / seal-fig: peça solta sobre fundo cinza-claro */
.tile-fig{background:var(--tile); padding:clamp(20px,2.5vw,36px);}
.tile-fig img{width:100%; height:auto; display:block; object-fit:contain; background:transparent;}
.icon-fig{background:var(--tile); padding:clamp(14px,2vw,28px);}
.icon-fig img{aspect-ratio:1/1; object-fit:contain; background:transparent;}
.seal-fig{
  background:var(--tile);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,4vw,48px);
}
.seal-fig img{width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; background:transparent;}
.seal-note{padding:0 var(--pad); margin-top:calc(-1 * clamp(16px,3vw,44px)); margin-bottom:clamp(56px,8vw,100px);}
.seal-note p{font-size:clamp(13px,1.2vw,18px); color:var(--soft); max-width:1180px; margin-left:calc(280px + clamp(24px,4vw,80px));}

/* recortes de proporção fixa (fotos que aguentam recorte) */
.card-fig img{aspect-ratio:960/650; object-fit:cover;}
.mark-fig img{aspect-ratio:930/640; object-fit:cover;}
.process-fig img{aspect-ratio:930/640; object-fit:cover; object-position:30% center;}
.box-fig img{aspect-ratio:930/640; object-fit:cover; background:var(--tile);}
.ident-fig img{aspect-ratio:930/560; object-fit:cover;}
.square-fig img{aspect-ratio:1/1; object-fit:cover;}
.crop-fig{overflow:hidden;}
.crop-fig .crop{width:100%; aspect-ratio:930/640; overflow:hidden;}
.crop-fig .crop img{height:212%; width:100%; object-fit:cover; object-position:top;}

/* texto + imagem lado a lado */
.divulgacao{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:clamp(24px,4vw,80px);
  align-items:center;
  padding:0 var(--pad);
  margin-bottom:clamp(56px,8vw,140px);
}
.divulgacao .label{font-weight:700; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin-bottom:clamp(14px,2vw,24px);}
.divulgacao p{font-size:clamp(14px,1.3vw,20px); line-height:1.6; color:#1c1c1c; max-width:520px;}
.divulgacao figure img{width:100%; display:block;}


/* ---------- Frase de fechamento ---------- */
.closing{
  padding:clamp(64px,10vw,160px) var(--pad) clamp(56px,8vw,120px);
  border-top:1px solid var(--line);
}
.closing p{
  font-weight:700;
  font-size:clamp(26px,4vw,56px);
  line-height:1.18;
  letter-spacing:-0.01em;
  max-width:1400px;
}


/* ---------- Navegação entre cases (fim de cada case) ---------- */
.case-nav{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:16px 32px;
  margin:0 var(--pad) clamp(48px,7vw,100px);
  padding:clamp(18px,2.5vw,32px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.case-nav a{text-decoration:none; font-size:clamp(11px,1vw,13px); letter-spacing:0.08em; text-transform:uppercase; color:var(--soft);}
.case-nav a strong{color:var(--ink); font-size:clamp(15px,1.6vw,22px); letter-spacing:0.02em; margin-left:10px;}
.case-nav a:hover{color:var(--ink);}


/* ---------- Rodapé com contato (igual em todas as páginas) ---------- */
.footer{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px 48px;
  padding:0 var(--pad) clamp(48px,7vw,100px);
}
.footer .col .k{font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--soft); margin-bottom:10px; font-weight:700;}
.footer .col .v{font-size:16px; line-height:1.7;}
.footer .col .v a{display:block; text-decoration:none; border-bottom:1px solid transparent; width:fit-content;}
.footer .col .v a:hover{border-bottom-color:var(--ink);}
.footer .brand{font-weight:700; font-size:19px; letter-spacing:0.06em; text-transform:uppercase;}
.footer .col.contato{text-align:right;}
.footer .col.contato .v a{margin-left:auto;}


/* ---------- Botão flutuante de WhatsApp (todas as páginas) ---------- */
.zap{
  position:fixed; z-index:80;
  right:calc(24px + env(safe-area-inset-right, 0px));
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .25s ease, opacity .3s ease, visibility .3s;
}
.zap svg{width:28px; height:28px; display:block; fill:currentColor;}
.zap:hover{transform:scale(1.08);}
.zap:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
/* some quando os botões de contato da própria página estão na tela, para não cobri-los */
.zap.escondido{opacity:0; visibility:hidden; pointer-events:none;}


/* ---------- Celular ---------- */
@media (max-width:760px){
  .intro{grid-template-columns:1fr;}
  .grid2{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr;}
  .grid3.compacta{grid-template-columns:1fr 1fr;}
  .metastrip{grid-template-columns:1fr;}
  .metastrip .cell{border-left:none; border-top:1px solid var(--line);}
  .metastrip .cell:first-child{border-top:none;}
  .seal-note p{margin-left:0;}
  .divulgacao{grid-template-columns:1fr;}
  .divulgacao figure{order:-1;}
  .footer .col.contato{text-align:left;}
  .footer .col.contato .v a{margin-left:0;}
}
@media (max-width:480px){
  .grid3.compacta{grid-template-columns:1fr;}
}