/* ======================================================================
   LAYOUT DO SITE — SIMPLES E DIRETO
   ----------------------------------------------------------------------
   Referências da Luiza: home da Tátil (grade de projetos com tags e nome)
   e o portfólio do Behance (abertura de projeto com número, ficha e capa;
   peças em grades justas, com cantos arredondados e pouca legenda).
   Vale só para páginas com <body class="p2">, por cima do css/site.css.
   ====================================================================== */

.p2{
  --pad:clamp(20px, 4vw, 64px);
  --raio:clamp(12px, 1.4vw, 22px);
  --vao:clamp(12px, 1.4vw, 22px);
}
.p2 .wrap{max-width:1560px;}

/* ---------- Topo: discreto, sem linha ---------- */
.p2 .topbar{border-bottom:none; padding:clamp(18px,2.4vw,32px) var(--pad);}
.p2 .topbar .logo{font-size:clamp(14px,1.2vw,17px); letter-spacing:0.04em;}
.p2 .topbar .menu{gap:6px clamp(14px,2vw,32px);}
.p2 .topbar .menu a{color:var(--ink);}
.p2 .topbar .menu a:hover{color:var(--soft);}

/* ---------- Aparecer suave ao entrar na tela ---------- */
.p2.suave .entra{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.p2.suave .entra.visto{opacity:1; transform:none;}
/* Os cartões de projeto e a abertura do case nunca ficam transparentes: as fotos aparecem sempre com a cor cheia */
.p2.suave .cartao.entra, .p2.suave .abre-case.entra{opacity:1;}


/* ======================================================================
   HOME
   ====================================================================== */
.h-topo{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px clamp(32px,6vw,120px);
  padding:clamp(40px,7vw,120px) var(--pad) clamp(32px,4vw,64px);
}
.h-topo h1{font-weight:700; font-size:clamp(52px,11vw,200px); line-height:.86; letter-spacing:-.045em;}
.h-topo .lado{max-width:24em; padding-bottom:clamp(4px,1vw,16px);}
.h-topo .lado .k{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-bottom:12px;}
.h-topo .lado p{font-size:clamp(15px,1.25vw,19px); line-height:1.45; color:#1c1c1c;}

/* Grade de projetos */
.h-grade{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px) var(--vao);
  padding:0 var(--pad) clamp(64px,9vw,140px);
}
.cartao{display:block; text-decoration:none;}
.cartao.largo{grid-column:1 / -1;}
.cartao .foto{position:relative; overflow:hidden; border-radius:var(--raio); background:#eee; aspect-ratio:1920/980;}
.cartao .foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.cartao:hover .foto img{transform:scale(1.04);}
.cartao .seta{
  position:absolute; top:clamp(12px,1.4vw,20px); right:clamp(12px,1.4vw,20px);
  width:clamp(36px,3.2vw,48px); aspect-ratio:1; border-radius:50%;
  background:#fff; color:var(--ink);
  display:grid; place-items:center; font-size:clamp(16px,1.4vw,20px); line-height:1;
  transition:background .3s ease, color .3s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.cartao:hover .seta{background:var(--ink); color:#fff; transform:rotate(45deg);}
.cartao .tags{margin-top:clamp(12px,1.2vw,18px); font-size:clamp(11px,.95vw,13px); letter-spacing:.04em; color:var(--soft);}
.cartao .nome{margin-top:6px; font-weight:700; font-size:clamp(22px,2.4vw,38px); letter-spacing:-.02em; line-height:1.05;}

/* Sobre, em poucas palavras */
.h-sobre{
  display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px,6vw,120px);
  padding:clamp(56px,8vw,120px) var(--pad);
  border-top:1px solid var(--line);
}
.h-sobre .grande{font-weight:700; font-size:clamp(26px,3.6vw,60px); line-height:1.06; letter-spacing:-.03em;}
.h-sobre .fatos{display:block; text-decoration:none;}
.h-sobre .fatos .cell{position:relative; padding:clamp(14px,1.6vw,22px) 2.2em clamp(14px,1.6vw,22px) 0; border-top:1px solid var(--line);}
.h-sobre .fatos .cell::after{content:"→"; position:absolute; right:0; top:50%; transform:translate(-6px,-50%); opacity:.35; transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;}
.h-sobre .fatos:hover .cell::after{transform:translate(0,-50%); opacity:1;}
.h-sobre .fatos .cell:first-child{border-top:none; padding-top:0;}
.h-sobre .fatos .k{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); font-weight:700; margin-bottom:6px;}
.h-sobre .fatos .v{font-size:clamp(15px,1.3vw,19px); line-height:1.4;}

/* Contato */
.h-contato{padding:clamp(56px,8vw,120px) var(--pad) clamp(64px,9vw,140px); border-top:1px solid var(--line);}
.h-contato h2{font-weight:700; font-size:clamp(44px,9vw,160px); line-height:.9; letter-spacing:-.045em;}
.h-contato .links{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vw,56px);}
.h-contato .links a{
  text-decoration:none; font-size:clamp(15px,1.4vw,20px);
  border:1px solid var(--ink); border-radius:999px; padding:.7em 1.3em;
  transition:background .3s ease, color .3s ease;
}
.h-contato .links a:hover{background:var(--ink); color:#fff;}
.p2 .h-contato + .footer{display:none;}


/* ======================================================================
   CASE
   ====================================================================== */

/* Abertura: número + nome, texto, ficha e capa, tudo num quadro só */
.abre-case{
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
  margin:clamp(8px,1vw,16px) var(--pad) 0;
  border:1px solid var(--line); border-radius:var(--raio); overflow:hidden;
}
.abre-case .num{
  font-size:clamp(56px,7.5vw,128px); line-height:.8; letter-spacing:-.05em; font-weight:400;
  padding:clamp(24px,3.4vw,56px) 0 0 clamp(20px,3vw,48px);
}
.abre-case .info{padding:clamp(24px,3.4vw,56px) clamp(20px,3vw,48px); display:flex; flex-direction:column;}
.abre-case h1{
  font-weight:700; font-size:clamp(30px,3.6vw,60px); line-height:1; letter-spacing:-.03em;
  padding-bottom:clamp(14px,1.6vw,24px); border-bottom:1px dashed rgba(0,0,0,.35);
}
.abre-case .desc{font-size:clamp(14px,1.15vw,17px); line-height:1.5; color:#1c1c1c; margin:clamp(16px,2vw,28px) 0 clamp(24px,3vw,40px);}
.abre-case .ficha{margin-top:auto; display:grid; gap:8px;}
.abre-case .ficha .cell{display:grid; grid-template-columns:7.5em 1fr; gap:12px; font-size:clamp(13px,1.05vw,15px); line-height:1.4;}
.abre-case .ficha .k{font-weight:700;}
.abre-case .capa{background:#eee; min-height:100%;}
.abre-case .capa img{width:100%; height:100%; object-fit:cover; display:block;}

.frase-case{
  font-weight:700; font-size:clamp(28px,4.6vw,76px); line-height:1; letter-spacing:-.035em;
  padding:clamp(48px,7vw,110px) var(--pad) clamp(40px,6vw,96px); max-width:16em;
}

/* Seções: só número e nome, sem linha comprida */
.p2 .section-label{margin-bottom:clamp(14px,1.6vw,22px); gap:12px;}
.p2 .section-label::after{display:none;}
.p2 .section-label .num,
.p2 .section-label .name{font-size:clamp(12px,1vw,14px); letter-spacing:.08em;}
.p2 .section-label .name{color:var(--ink);}

/* Peças: grades justas, cantos arredondados, legenda curta */
.p2 .grid2, .p2 .grid3{gap:var(--vao); margin-bottom:var(--vao);}
.p2 .grid2 + .section-label,
.p2 .grid3 + .section-label,
.p2 .natural-fig + .section-label{margin-top:clamp(48px,7vw,110px);}
.p2 figure img,
.p2 .natural-fig img{border-radius:var(--raio);}
.p2 .tile-fig, .p2 .icon-fig, .p2 .seal-fig{border-radius:var(--raio);}
.p2 .tile-fig img, .p2 .icon-fig img, .p2 .seal-fig img{border-radius:0;}
.p2 .natural-fig{width:auto; margin:0 var(--pad) var(--vao);}
.p2 .natural-fig.contained{max-width:none; margin:0 var(--pad) var(--vao);}
.p2 .natural-fig.contained img{max-width:900px; margin:0 auto; background:var(--tile);}
.p2 figcaption,
.p2 .natural-fig figcaption{
  border-top:none; padding:0; margin-top:10px;
  font-size:clamp(12px,1vw,14px); letter-spacing:0; color:var(--ink);
}
.p2 .tile-fig figcaption, .p2 .icon-fig figcaption{margin-top:clamp(12px,1.4vw,20px);}
.p2 figcaption .n{display:none;}

/* Fechamento e próximo projeto */
.p2 .closing{border-top:none; padding:clamp(64px,9vw,140px) var(--pad);}
.p2 .closing p{font-size:clamp(28px,4.6vw,76px); line-height:1; letter-spacing:-.035em; max-width:16em;}
.p2 .case-nav{border-bottom:none; margin-bottom:clamp(32px,4vw,56px);}


/* ---------- Celular ---------- */
@media (max-width:760px){
  .h-topo{grid-template-columns:1fr;}
  .h-grade{grid-template-columns:1fr;}
  .h-sobre{grid-template-columns:1fr;}
  .abre-case{grid-template-columns:auto 1fr;}
  .abre-case .capa{grid-column:1 / -1; grid-row:1; aspect-ratio:1920/980; min-height:0;}
  .abre-case .ficha .cell{grid-template-columns:1fr; gap:2px;}
  .p2 .grid3{grid-template-columns:1fr 1fr;}
}


/* ======================================================================
   SOBRE MIM
   ====================================================================== */
.s-corpo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(28px,5vw,96px);
  padding:0 var(--pad) clamp(64px,9vw,140px);
}
.s-foto{
  aspect-ratio:4/5; border-radius:var(--raio); background:var(--tile); overflow:hidden;
  display:grid; place-items:center; text-align:center; padding:20px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--soft);
}
.s-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.s-texto{font-size:clamp(16px,1.4vw,21px); line-height:1.55; color:#1c1c1c; max-width:40em;}
.s-texto h2{font-weight:700; font-size:clamp(12px,1vw,14px); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:clamp(32px,4vw,56px) 0 12px; padding-top:clamp(16px,2vw,24px); border-top:1px solid var(--line);}
.s-texto h2:first-child{margin-top:0; padding-top:0; border-top:none;}
.s-texto p + p{margin-top:1em;}
.s-texto ul{list-style:none;}
.s-texto li{padding:10px 0; border-top:1px solid var(--line);}
.s-texto li:first-child{border-top:none;}
.s-aviso{border:1px dashed rgba(0,0,0,.35); border-radius:var(--raio); padding:clamp(20px,3vw,40px); color:var(--soft);}

@media (max-width:760px){
  .s-corpo{grid-template-columns:1fr;}
  .s-foto{aspect-ratio:1/1; max-width:420px;}
}

/* ---------- Ajustes de celular (testado em 390px) ---------- */
@media (max-width:760px){
  /* menu: área de toque confortável */
  .p2 .topbar{padding-bottom:6px; gap:2px 24px;}
  .p2 .topbar .menu{gap:0 22px;}
  .p2 .topbar .menu a{padding:14px 0; font-size:12px;}
  /* abertura do case: capa, depois número, depois o texto em largura total */
  .abre-case{grid-template-columns:1fr;}
  .abre-case .num{padding:20px 20px 0; font-size:56px;}
  .abre-case .info{padding:10px 20px 24px;}
  /* rodapé dos cases: links fáceis de tocar */
  .p2 .footer .col .v a{padding:10px 0;}
  .p2 .case-nav a{padding:10px 0;}
}


/* ---------- Componentes que só alguns cases usam, no mesmo padrão ---------- */
.p2 .section-label{margin-top:clamp(48px,7vw,110px);}
.p2 .frase-case + .section-label{margin-top:0;}
.p2 .moodboard-fig, .p2 .fullbleed{width:auto; margin:0 var(--pad) var(--vao);}
.p2 .moodboard-fig img, .p2 .fullbleed img{border-radius:var(--raio);}
.p2 .moodboard-fig figcaption, .p2 .fullbleed figcaption{padding:0; margin-top:10px;}
.p2 .crop-fig .crop{border-radius:var(--raio);}
.p2 .crop-fig .crop img{border-radius:0;}
.p2 .divulgacao{margin-bottom:var(--vao);}
.p2 .seal-note{margin-top:0; margin-bottom:0;}
.p2 .seal-note p{margin-left:0; color:var(--ink); font-size:clamp(12px,1vw,14px);}


/* ======================================================================
   HOME — LAYOUT FINAL
   Primeira tela em três blocos, diferenciais, trabalhos e contato.
   ====================================================================== */
.p2.home{--pad:clamp(20px, 6.25vw, 80px);}   /* margem lateral de 80px no desktop */

/* Rótulo de seção: linha preta em cima + maiúsculas pequenas */
.rotulo{
  border-top:1px solid var(--ink); padding-top:14px;
  font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.i-secao{padding:0 var(--pad) clamp(64px,9vw,140px);}
.i-secao .h-grade{padding:clamp(24px,3vw,40px) 0 0;}

/* ---------- Primeira tela ---------- */
.i-tela{
  display:grid; grid-template-columns:290fr 520fr 300fr; gap:clamp(32px,6vw,140px);
  align-items:start;
  padding:clamp(28px,4.5vw,72px) var(--pad) clamp(64px,8vw,120px);
}
.i-foto{
  width:100%; max-width:290px; aspect-ratio:4/5; background:var(--tile); overflow:hidden;
  display:grid; place-items:center; text-align:center; padding:16px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--soft);
}
.i-foto:has(img){padding:0;}
.i-foto img{width:100%; height:100%; object-fit:cover; display:block;}

.i-nome{max-width:520px;}
.i-nome h1{font-weight:700; font-size:clamp(72px,10vw,128px); line-height:.84; letter-spacing:-.055em; margin-left:-.04em;}
.i-nome h1 span{display:block;}
.i-frase{font-weight:700; font-size:20px; line-height:1.25; letter-spacing:-.03em; margin-top:clamp(20px,2.4vw,32px);}

.i-destaque{width:100%; max-width:300px; justify-self:end; border-top:3px solid var(--ink); padding-top:16px;}
.i-destaque h2{font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:clamp(16px,2vw,24px);}
.i-servicos{font-weight:700; font-size:clamp(17px,1.6vw,20px); line-height:1.22; letter-spacing:-.02em;}

/* ---------- Diferenciais ---------- */
.i-diferenciais{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(20px,2.6vw,48px);
  padding-top:clamp(28px,3.4vw,48px);
}
.i-diferenciais .n{font-weight:700; font-size:14px; margin-bottom:clamp(10px,1.2vw,16px);}
.i-diferenciais h3{font-weight:700; font-size:clamp(18px,1.65vw,21px); line-height:1.1; letter-spacing:-.02em;}
.i-diferenciais p{font-size:14px; line-height:1.45; color:#1c1c1c; margin-top:8px;}

/* ---------- Contato: linha preta em cima ---------- */
.p2.home .h-contato{margin:0 var(--pad); padding-left:0; padding-right:0; border-top:1px solid var(--ink);}

/* ---------- Tablet: diferenciais em 3 colunas ---------- */
@media (max-width:1100px){
  .i-diferenciais{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:clamp(28px,4vw,40px);}
}

/* ---------- Celular: tudo empilhado (foto, nome e frase, o que eu posso fazer, diferenciais, trabalhos, contato) ---------- */
@media (max-width:900px){
  .i-tela{grid-template-columns:1fr; gap:32px;}
  .i-foto{max-width:min(62%,290px);}
  .i-nome h1{font-size:clamp(72px,24vw,128px);}
  .i-destaque{max-width:none; justify-self:stretch;}
}
@media (max-width:760px){
  .i-diferenciais{grid-template-columns:1fr; row-gap:0; padding-top:8px;}
  .i-diferenciais .item{display:grid; grid-template-columns:2.6em 1fr; column-gap:8px; padding:18px 0; border-bottom:1px solid var(--line);}
  .i-diferenciais .item:last-child{border-bottom:none;}
  .i-diferenciais .n{margin:0; grid-row:1 / span 2; font-size:15px; padding-top:3px;}
  .i-diferenciais h3{font-size:21px;}
  .i-diferenciais p{margin-top:4px;}
}


/* ======================================================================
   SOBRE MIM — LAYOUT FINAL (mesma linguagem da home)
   ====================================================================== */
.s-abre{grid-template-columns:290fr 960fr;}
.s-intro{max-width:960px;}
.s-cargo{font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:clamp(14px,1.6vw,22px);}
.s-intro h1{font-weight:700; font-size:clamp(60px,9vw,128px); line-height:.86; letter-spacing:-.055em; margin-left:-.04em;}
.s-apresentacao{font-weight:700; font-size:clamp(20px,2vw,28px); line-height:1.22; letter-spacing:-.03em; margin-top:clamp(24px,3vw,40px); max-width:30em;}

.i-diferenciais.quatro{grid-template-columns:repeat(4,minmax(0,1fr));}

.s-grande{font-size:clamp(22px,2.6vw,38px); line-height:1.2; letter-spacing:-.025em; max-width:30em; padding-top:clamp(28px,3.4vw,48px);}

/* Linhas de título + texto: experiência, fatos e habilidades */
.s-linhas{padding-top:clamp(8px,1vw,16px);}
.s-linhas .linha{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:8px clamp(24px,4vw,80px);
  padding:clamp(18px,2vw,28px) 0; border-bottom:1px solid var(--line);
}
.s-linhas .linha:last-child{border-bottom:none;}
.s-linhas.numeradas .linha{grid-template-columns:3em minmax(0,1fr) minmax(0,1.5fr); column-gap:clamp(8px,1.2vw,20px);}
.s-linhas .n{font-weight:700; font-size:14px; padding-top:4px;}
.s-linhas h3{font-weight:700; font-size:clamp(18px,1.65vw,21px); line-height:1.15; letter-spacing:-.02em;}
.s-linhas .detalhe{font-size:14px; line-height:1.4; color:var(--soft); margin-top:6px;}
.s-linhas .txt{font-size:clamp(15px,1.2vw,17px); line-height:1.5; color:#1c1c1c; max-width:38em;}

.s-lista{list-style:none; padding-top:clamp(8px,1vw,16px);}
.s-lista li{padding:clamp(14px,1.6vw,20px) 0; border-bottom:1px solid var(--line); font-size:clamp(16px,1.4vw,19px); line-height:1.35;}
.s-lista li:last-child{border-bottom:none;}

.s-site{margin-top:clamp(20px,2.4vw,32px); font-size:14px; letter-spacing:.04em; color:var(--soft);}

@media (max-width:1100px){
  .i-diferenciais.quatro{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(28px,4vw,40px);}
}
@media (max-width:900px){
  .s-abre{grid-template-columns:1fr;}
  .s-intro h1{font-size:clamp(60px,19vw,128px);}
}
@media (max-width:760px){
  .i-diferenciais.quatro{grid-template-columns:1fr; row-gap:0;}
  .s-linhas .linha{grid-template-columns:1fr;}
  .s-linhas.numeradas .linha{grid-template-columns:2.6em 1fr; column-gap:8px;}
  .s-linhas.numeradas .linha .txt{grid-column:2;}
}


/* ---------- Foto justificada nos limites do texto ----------
   Desktop: a foto começa e termina na mesma altura do bloco de texto ao lado
   (a altura é medida pelo js/site.js). Celular: a foto ocupa a largura do texto. */
@media (min-width:901px){
  .i-foto[data-altura-de]{height:var(--altura-texto, auto); width:auto; max-width:100%; aspect-ratio:4/5;}
}
@media (max-width:900px){
  .i-foto, .i-foto[data-altura-de]{width:100%; max-width:none; height:auto; aspect-ratio:4/5;}
}