/* ============================================================
   TYLLYE MELO — CSS PRINCIPAL
   Identidade da Arte Final, tirada do site anterior da própria designer:
   roxo #6A0A5F · magenta #E350FD · papel #F4EFEF · tinta #2B2A2A
   Display: Archivo variável (wdth 68 / wght 900) no lugar do Impact
   Corpo:   General Sans   |  Script: Moon Dance
   ============================================================ */

/* ---------- FONTES ---------- */
@font-face{
  font-family:"Archivo";
  src:url("../assets/fontes/archivo-wdth.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
}
@font-face{
  font-family:"General Sans";
  src:url("../assets/fontes/general-sans.woff2") format("woff2-variations");
  font-weight:200 700; font-display:swap;
}
@font-face{
  font-family:"Moon Dance";
  src:url("../assets/fontes/moondance-latin.woff2") format("woff2");
  font-weight:400; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Moon Dance";
  src:url("../assets/fontes/moondance-latin-ext.woff2") format("woff2");
  font-weight:400; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB;
}

/* ---------- TOKENS ---------- */
:root{
  /* Paleta da Arte Final, amostrada do site anterior da Tyllye */
  --roxo:        #E350FD;   /* magenta-violeta de destaque, sobre fundo escuro */
  --roxo-claro:  #CE86E6;   /* preenchimento do título gigante sobre papel.
                               O magenta puro cega em bloco desse tamanho e apaga
                               o script preto que fica por cima, que é o DNA dela. */
  --roxo-vivo:   #7F1F89;   /* roxo da marca: botão, bordas, detalhes */
  --roxo-forte:  #6A0A5F;   /* texto acessível sobre papel */
  --roxo-fraco:  #F6E7FA;
  --roxo-fundo:  #76276E;   /* fundo de seção escura em roxo */
  --papel:       #F4EFEF;
  --papel-2:     #E9E2E6;
  --papel-3:     #DCD3D8;
  --tinta:       #2B2A2A;
  --tinta-2:     #55534F;
  --tinta-3:     #86837D;
  --creme:       #F7EEE2;

  --max:      1240px;
  --gut:      clamp(20px, 5vw, 64px);
  --radius:   14px;
  --radius-g: 26px;

  --sombra-1: 0 2px 10px rgba(43,42,42,.06);
  --sombra-2: 0 14px 40px -14px rgba(43,42,42,.22);
  --sombra-3: 0 30px 70px -28px rgba(43,42,42,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:"General Sans","Segoe UI",system-ui,sans-serif;
  font-weight:400; font-size:clamp(16px,1.05vw,17.5px); line-height:1.62;
  color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* textura de papel: grão sutil, tira a chapação do fundo sólido */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
ul{list-style:none; padding:0}
:focus-visible{outline:3px solid var(--roxo-forte); outline-offset:3px; border-radius:4px}
::selection{background:var(--roxo); color:var(--tinta)}

/* ---------- TIPOGRAFIA ---------- */
.display,h1,h2,h3,.h-num{
  font-family:"Archivo","Haettenschweiler","Arial Narrow",sans-serif;
  font-variation-settings:"wght" 900,"wdth" 68;
  text-transform:uppercase; line-height:.86; letter-spacing:-.005em;
  font-weight:900;
}
h1{font-size:clamp(3.4rem,12vw,9.5rem)}
h2{font-size:clamp(2.6rem,7.4vw,6rem)}
h3{font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:.94}
.script{font-family:"Moon Dance",cursive; text-transform:none; font-weight:400; line-height:1}

/* O DNA da marca dela: Impact rosa gigante com script preto escrito por cima */
.titulo-duplo{position:relative; display:inline-block; padding:.18em 0 .1em}
.titulo-duplo .base{color:var(--roxo-claro); display:block}
.olho{ /* linha de apoio acima do título, sem cara de chip de IA */
  font-size:.8rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--roxo-forte); margin-bottom:1.1rem;
}
.lead{font-size:clamp(1.06rem,1.5vw,1.3rem); color:var(--tinta-2); max-width:62ch; line-height:1.6}
.mini{font-size:.86rem; color:var(--tinta-3); letter-spacing:.02em}
strong,b{font-weight:600}
.roxo{color:var(--roxo-forte)}

/* ---------- LAYOUT ---------- */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.sec{position:relative; padding-block:clamp(72px,10vw,150px); z-index:2}
.sec--tight{padding-block:clamp(52px,6vw,90px)}
.sec--papel2{background:var(--papel-2)}
.sec--tinta{background:var(--tinta); color:var(--papel)}
.sec--tinta .lead,.sec--tinta .mini{color:#C9C6C0}
.grid{display:grid; gap:clamp(18px,2.4vw,34px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- ELEMENTOS DE COLAGEM (a linguagem visual dela) ---------- */
.fita{ /* fita adesiva */
  position:absolute; width:120px; height:34px; background:rgba(227,80,253,.42);
  border-left:1px dashed rgba(255,255,255,.6); border-right:1px dashed rgba(255,255,255,.6);
  box-shadow:0 2px 6px rgba(43,42,42,.12); z-index:3;
}
.raio{position:absolute; color:var(--roxo); pointer-events:none; z-index:0}
.recorte{ /* borda de papel recortado */
  background:var(--papel);
  box-shadow:var(--sombra-2);
  clip-path:polygon(0 2%,3% 0,97% 1.5%,100% 0,99% 98%,96% 100%,4% 99%,0 100%);
}
.halftone{filter:grayscale(1) contrast(1.15)}

/* ---------- HEADER ----------
   Barra roxa sólida com o conteúdo em branco, como ela pediu. A marca usa o
   arquivo branco que ela mesma entregou, então aqui não tem filtro nenhum. */
.topo{
  position:fixed; inset:0 0 auto; z-index:60; padding:14px 0;
  background:var(--roxo-vivo);
  transition:box-shadow .35s var(--ease), padding .35s var(--ease);
}
.topo.solido{box-shadow:0 6px 24px -12px rgba(43,42,42,.45); padding:8px 0}
.topo .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo{display:flex; align-items:center; gap:12px; color:#fff}
.logo svg,.logo img{width:clamp(134px,13.5vw,178px); height:auto}

.logo .tag{
  font-size:.73rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.78); border-left:1px solid rgba(255,255,255,.32); padding-left:12px; line-height:1.3;
}
@media(max-width:640px){.logo .tag{display:none}}

.nav{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.nav a{
  position:relative; font-size:.93rem; font-weight:500; padding:6px 0;
  color:rgba(255,255,255,.82); transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:#fff; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav a[aria-current="page"]{color:#fff; font-weight:600}
@media(max-width:880px){.nav{display:none}}

/* o botão do topo vive sobre o roxo: contorno claro, e no hover inverte.
   O padding extra é porque a letra estava encostando na borda da cápsula. */
.topo .btn{border-color:rgba(255,255,255,.55); color:#fff; padding:13px 26px; gap:9px}
.topo .btn::before{background:#fff}
.topo .btn:hover{color:var(--roxo-forte); border-color:#fff}

/* menu mobile */
.hamb{
  display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.45);
  background:transparent; border-radius:50%; cursor:pointer; position:relative;
}
.hamb span{position:absolute; left:13px; width:20px; height:2px; background:#fff; transition:.3s var(--ease)}
.hamb span:nth-child(1){top:18px} .hamb span:nth-child(2){top:26px}
.hamb[aria-expanded="true"] span:nth-child(1){top:22px; transform:rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){top:22px; transform:rotate(-45deg)}
@media(max-width:880px){.hamb{display:block}}
.menu-mob{
  position:fixed; inset:0; z-index:55; background:var(--papel);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--gut);
  transform:translateY(-100%); transition:transform .55s var(--ease-out); visibility:hidden;
}
.menu-mob.aberto{transform:translateY(0); visibility:visible}
/* O menu estava em Archivo 900 a 11vw: pesado demais no celular, virava um
   paredão de letra. Agora é o mesmo tipo do corpo, com peso e espaçamento
   controlados, e a página fica com cara de menu e não de outdoor. */
.menu-mob a{
  font-family:"General Sans","Segoe UI",system-ui,sans-serif; font-weight:500;
  text-transform:none; font-size:clamp(1.45rem,5.4vw,1.95rem);
  line-height:1.15; letter-spacing:-.01em; color:var(--tinta);
  padding-block:12px; border-bottom:1px solid rgba(43,42,42,.09);
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}
.menu-mob a:last-of-type{border-bottom:0}
.menu-mob a:nth-child(even){color:var(--tinta)}
.menu-mob a:hover,.menu-mob a[aria-current="page"]{color:var(--roxo-forte); padding-left:6px}
.menu-mob a[aria-current="page"]{font-weight:600}
.menu-mob .rodape-mob{
  margin-top:26px; display:flex; flex-direction:column; gap:2px;
  font-size:1rem; font-weight:500; color:var(--roxo-forte);
}
/* o contato não é item de menu: sem risco embaixo e sem o deslocamento do hover */
.menu-mob .rodape-mob a{
  font-size:1rem; color:var(--roxo-forte); border-bottom:0; padding-block:8px;
}
.menu-mob .rodape-mob a:hover{padding-left:0; color:var(--roxo-vivo)}

/* ---------- BOTÕES ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:15px 30px; border-radius:999px; border:1.6px solid var(--tinta);
  background:transparent; color:var(--tinta); font-weight:600; font-size:.97rem;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .25s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--tinta);
  transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn:hover{color:var(--papel)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.975)}
.btn svg{width:18px; height:18px; flex:none}

/* botão principal no roxo da marca, texto claro. O magenta neon fica para
   os títulos e acentos: em botão ele briga com o papel e cansa a leitura. */
.btn--roxo{border-color:var(--roxo-vivo); background:var(--roxo-vivo); color:var(--papel)}
.btn--roxo::before{background:var(--tinta)}
.btn--roxo:hover{color:var(--papel); border-color:var(--tinta)}
.btn--claro{border-color:rgba(244,239,239,.5); color:var(--papel)}
.btn--claro::before{background:var(--roxo)}
.btn--claro:hover{color:var(--tinta); border-color:var(--roxo)}
.btn--g{padding:19px 40px; font-size:1.05rem}
.btn-linha{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* seta que anda no hover */
.btn .seta{transition:transform .4s var(--ease-out)}
.btn:hover .seta{transform:translateX(4px)}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding-top:110px; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(20px,4vw,60px); width:100%}
@media(max-width:940px){.hero__grid{grid-template-columns:1fr; gap:0}}

.hero__nome{position:relative; z-index:4}
.hero__nome .assinatura{width:min(100%,600px); color:var(--tinta); margin-bottom:-.34em; position:relative; z-index:5}
.hero__nome .grito{
  font-family:"Archivo",sans-serif; font-variation-settings:"wght" 900,"wdth" 66;
  text-transform:uppercase; color:var(--roxo-claro); font-size:clamp(4.2rem,15.5vw,12rem);
  line-height:.8; letter-spacing:-.012em; position:relative; z-index:3;
}
/* a frase inteira no lugar de uma palavra só: precisa caber em duas linhas
   sem virar um paredão de letra gigante */
.hero__nome .grito--frase{
  font-variation-settings:"wght" 900,"wdth" 74;
  font-size:clamp(1.75rem,4.6vw,3.5rem); line-height:.98; letter-spacing:-.005em;
  /* respiro em px, não em em: a sobreposição negativa da assinatura foi
     calibrada para a palavra gigante e, com a frase menor, o rabo do "y"
     encostava na primeira linha */
  margin-top:16px;
}
.hero__sub{max-width:47ch; margin-top:26px; position:relative; z-index:6}

.hero__foto{position:relative; z-index:2; justify-self:center}
.hero__foto img{
  width:min(100%,430px); border-radius:6px;
  filter:grayscale(1) contrast(1.12) brightness(1.04);
  box-shadow:var(--sombra-3);
}
.hero__foto::after{ /* moldura deslocada, cara de colagem */
  content:""; position:absolute; inset:16px -16px -16px 16px; border:1.5px solid var(--roxo-vivo);
  border-radius:6px; z-index:-1;
}
@media(max-width:940px){
  .hero{min-height:auto; padding-block:130px 60px}
  .hero__foto{margin-top:44px}
  .hero__foto img{width:min(84%,340px); margin-inline:auto}
}

/* flor/elementos flutuantes do hero */
.hero__deco{position:absolute; pointer-events:none; z-index:1; opacity:.9}
.hero__deco--1{top:12%; right:6%; width:clamp(80px,10vw,150px)}
.hero__deco--2{bottom:8%; left:2%; width:clamp(90px,11vw,170px)}

/* ---------- FAIXA DE CREDENCIAIS ---------- */
.credenciais{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(43,42,42,.14); border-block:1px solid rgba(43,42,42,.14);
}
.cred{background:var(--papel); padding:clamp(24px,3vw,38px) clamp(16px,2vw,28px)}
.cred .v{
  font-family:"Archivo",sans-serif; font-variation-settings:"wght" 900,"wdth" 72;
  font-size:clamp(1.7rem,3.1vw,2.7rem); line-height:.9; color:var(--roxo-forte); text-transform:uppercase;
}
.cred .l{font-size:.87rem; color:var(--tinta-2); margin-top:9px; line-height:1.45}
@media(max-width:820px){.credenciais{grid-template-columns:repeat(2,1fr)}}
/* "Homenageada" tem 11 letras e não cabia em meia tela. Em vez de deixar
   hifenizar (virava "HOMENAGE-ADA"), o Archivo é variável: aqui ele espreme
   de verdade (wdth 62) e a palavra entra inteira numa linha só. */
@media(max-width:560px){
  .cred .v{font-variation-settings:"wght" 900,"wdth" 62; font-size:clamp(1.2rem,5.4vw,1.7rem)}
}

/* ---------- LEQUE DE CAPAS (bloco Design Editorial da home) ---------- */
.capas{
  position:relative; justify-self:center; width:min(100%,420px);
  padding-block:14px; display:grid; place-items:center;
}
.capas img{
  border-radius:3px 10px 10px 3px;
  box-shadow:0 34px 70px -26px rgba(0,0,0,.75), -8px 0 0 -1px #262523;
  transition:transform .6s var(--ease-out);
}
/* as duas de trás ficam absolutas e espiam atrás da capa da frente */
.capas img:nth-child(1),
.capas img:nth-child(2){position:absolute; top:50%; left:50%}
.capas img:nth-child(1){width:64%; transform:translate(-72%,-56%) rotate(-11deg); opacity:.85}
.capas img:nth-child(2){width:66%; transform:translate(-18%,-48%) rotate(9deg); opacity:.9}
.capas img:nth-child(3){position:relative; width:82%; transform:rotate(-3deg); z-index:2}
.capas:hover img:nth-child(1){transform:translate(-86%,-58%) rotate(-15deg)}
.capas:hover img:nth-child(2){transform:translate(-4%,-50%) rotate(13deg)}
@media(max-width:560px){
  .capas{width:min(100%,300px)}
  .capas img:nth-child(1){transform:translate(-68%,-56%) rotate(-11deg)}
  .capas img:nth-child(2){transform:translate(-22%,-48%) rotate(9deg)}
}

/* ---------- CARDS ---------- */
.card{
  position:relative; background:var(--papel); border:1px solid rgba(43,42,42,.13);
  border-radius:var(--radius); padding:clamp(24px,2.6vw,36px); overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease);
}
.card::after{ /* preenchimento rosa que sobe no hover */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--roxo-vivo);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sombra-2); border-color:rgba(43,42,42,.22)}
.card:hover::after{transform:scaleX(1)}
.card .num{
  font-family:"Archivo",sans-serif; font-variation-settings:"wght" 900,"wdth" 70;
  font-size:2.6rem; color:var(--roxo-claro); line-height:.8; margin-bottom:18px; display:block;
}
/* ícone no lugar do número que ela mandou tirar: ilustra o serviço sem
   virar chip de categoria, que é o que ele reprova */
.card__ico{
  width:52px; height:52px; margin-bottom:20px; border-radius:14px;
  display:grid; place-items:center; background:var(--roxo-fraco); color:var(--roxo-forte);
  transition:background .45s var(--ease), color .45s var(--ease);
}
.card__ico svg{width:26px; height:26px}
.card:hover .card__ico{background:var(--roxo-vivo); color:#fff}

/* card com cor de fundo, para as etapas do processo e os diferenciais do Sobre.
   O selo do ícone inverte para branco, senão lilás sobre lilás some. */
.card--cor{background:var(--roxo-fraco); border-color:rgba(127,31,137,.18)}
.card--cor .card__ico{background:#fff; color:var(--roxo-vivo)}
.card--cor:hover{border-color:rgba(127,31,137,.4)}
.card--cor:hover .card__ico{background:var(--roxo-vivo); color:#fff}
.card--cor p{color:var(--tinta-2)}
/* "COMUNICAÇÃO & ESTRATÉGIA" em Archivo condensado estourava a largura do
   card em quatro colunas: aqui o título é menor e pode quebrar palavra longa */
.card h3{margin-bottom:12px; font-size:clamp(1.3rem,1.95vw,1.8rem); overflow-wrap:anywhere; hyphens:auto}
.card p{color:var(--tinta-2); font-size:.97rem}
.card ul{margin-top:16px; display:grid; gap:8px}
.card ul li{position:relative; padding-left:20px; font-size:.94rem; color:var(--tinta-2)}
.card ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--roxo-vivo);
}

/* ---------- MARQUEE DE MARCAS ---------- */
.marquee{overflow:hidden; padding-block:clamp(28px,3.4vw,46px); border-block:1px solid rgba(43,42,42,.13)}
.marquee__trilho{display:flex; width:max-content; animation:corre 46s linear infinite}
.marquee:hover .marquee__trilho{animation-play-state:paused}
.marquee__item{
  font-family:"Archivo",sans-serif; font-variation-settings:"wght" 800,"wdth" 74;
  text-transform:uppercase; font-size:clamp(1.2rem,2.5vw,2rem); color:var(--tinta-3);
  padding-inline:clamp(20px,2.6vw,42px); white-space:nowrap; display:flex; align-items:center; gap:clamp(20px,2.6vw,42px);
  transition:color .3s var(--ease);
}
.marquee__item::after{content:"✦"; color:var(--roxo); font-size:.55em}
.marquee:hover .marquee__item{color:var(--tinta-2)}
@keyframes corre{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__trilho{animation:none; flex-wrap:wrap; width:100%; justify-content:center}}

/* ---------- GALERIA DE PORTFÓLIO ---------- */
.galeria{columns:3; column-gap:clamp(14px,1.7vw,22px)}
@media(max-width:900px){.galeria{columns:2}}
@media(max-width:520px){.galeria{columns:1}}
.peca{
  break-inside:avoid; margin-bottom:clamp(14px,1.7vw,22px); position:relative;
  border-radius:10px; overflow:hidden; background:var(--papel-2); cursor:zoom-in;
  box-shadow:var(--sombra-1); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  display:block; width:100%; border:0; padding:0; text-align:left;
}
.peca img{width:100%; transition:transform .7s var(--ease-out)}
.peca:hover{transform:translateY(-4px); box-shadow:var(--sombra-2)}
.peca:hover img{transform:scale(1.035)}
.peca__info{
  position:absolute; inset:auto 0 0; padding:34px 16px 14px; color:#fff;
  background:linear-gradient(to top,rgba(20,19,19,.88),rgba(20,19,19,0));
  opacity:0; transform:translateY(8px); transition:.42s var(--ease-out);
}
.peca:hover .peca__info,.peca:focus-visible .peca__info{opacity:1; transform:translateY(0)}
.peca__info b{display:block; font-weight:600; font-size:.95rem}
.peca__info span{font-size:.8rem; opacity:.82}
.peca.oculta{display:none}

/* ---------- GRADE UNIFORME DO PORTFÓLIO ----------
   O portfólio deixou de ser um mosaico único com filtro e virou três seções
   separadas (logotipos, redes sociais, projeto gráfico), cada uma com a peça
   inteira dentro de um quadro do mesmo tamanho. Nada é cortado: o object-fit
   é contain, e quem quiser ver de perto clica e abre em tela cheia. */
.grade{display:grid; gap:clamp(12px,1.7vw,22px)}
.grade--logos{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grade--social{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
/* rebranding traz antes e depois na mesma peça, então o quadro é quadrado e
   um pouco maior: as duas marcas empilhadas precisam de espaço para ler */
.grade--rebrand{grid-template-columns:repeat(auto-fill,minmax(265px,1fr))}
.grade--graficos{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grade .peca{margin-bottom:0; display:block; break-inside:auto}
/* height:auto de propósito: quem manda na altura é o aspect-ratio do quadro.
   Com height:100% o aspect-ratio era ignorado e cada card ficava de um tamanho. */
.grade .peca img{width:100%; height:auto; object-fit:contain}
/* 1063x650 é a medida em que ela entregou todas as logos, já padronizadas */
.grade--logos .peca{background:#fff}
.grade--logos .peca img{aspect-ratio:1063/650; padding:18px}
.grade--social .peca{background:var(--papel-2)}
.grade--social .peca img{aspect-ratio:1/1; padding:0}
.grade--rebrand .peca{background:#fff}
.grade--rebrand .peca img{aspect-ratio:1/1; padding:16px}
/* impresso vem em formato variado (outdoor 2:1, abadá 3:4): o quadro é fixo e
   a peça se encaixa dentro inteira, sem corte */
.grade--graficos .peca{background:#fff}
.grade--graficos .peca img{aspect-ratio:4/3; padding:14px}

/* antes e depois de rebranding: o par fica lado a lado e não se separa */
.par{
  display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(43,42,42,.14);
  border-radius:10px; overflow:hidden; box-shadow:var(--sombra-1);
}
.par .peca{border-radius:0; box-shadow:none; background:#fff; position:relative}
.par .peca img{aspect-ratio:16/10; object-fit:contain; padding:16px; width:100%; height:auto}
.par-linha{display:grid; grid-template-columns:repeat(auto-fill,minmax(390px,1fr)); gap:clamp(16px,2.2vw,28px)}
.par__selo{
  position:absolute; top:10px; left:10px; z-index:2; font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:4px;
  background:var(--roxo-fraco); color:var(--roxo-forte);
}
@media(max-width:560px){.par-linha{grid-template-columns:1fr}}

/* ---------- FILTROS DO PORTFÓLIO ----------
   Quatro categorias, sem botão "Tudo": só uma aparece por vez. */
.filtros{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,3.4vw,46px)}
.filtro{
  padding:11px 24px; border-radius:999px; border:1.6px solid var(--roxo-vivo);
  background:transparent; color:var(--roxo-forte); font-size:.94rem; font-weight:600;
  cursor:pointer; transition:.32s var(--ease);
}
.filtro:hover{background:var(--roxo-fraco); transform:translateY(-1px)}
.filtro[aria-pressed="true"]{background:var(--roxo-vivo); color:#fff; border-color:var(--roxo-vivo)}
.cat[hidden]{display:none}

/* rótulo de categoria sob cada peça da prévia da home */
.peca__cat{
  display:block; margin-top:10px; text-align:center; background:var(--roxo-vivo); color:#fff;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 10px; border-radius:8px;
}

/* prévia da home: quadro de altura uniforme e, abaixo dele, o rótulo da
   categoria. O rótulo fica FORA do quadro: dentro, o aspect-ratio somado ao
   overflow:hidden do card simplesmente o cortava. */
.previa .peca{margin-bottom:0; background:none; box-shadow:none; overflow:visible; border-radius:0}
.previa .peca img{
  width:100%; aspect-ratio:4/5; height:auto; object-fit:contain; padding:10px;
  background:var(--papel-2); border-radius:10px; box-shadow:var(--sombra-1);
}
.previa .peca:hover img{transform:none}

/* ---------- ESTANTE DE CATÁLOGOS ---------- */
.estante{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:clamp(22px,3vw,40px)}
.obra{
  position:relative; background:none; border:0; padding:0; cursor:pointer; text-align:left;
  perspective:1400px;
}
.obra__capa{
  position:relative; border-radius:3px 10px 10px 3px; overflow:hidden;
  box-shadow:var(--sombra-2), -7px 0 0 -1px var(--papel-3), -9px 0 0 -1px rgba(43,42,42,.18);
  transform-style:preserve-3d; transition:transform .65s var(--ease-out), box-shadow .65s var(--ease-out);
  background:var(--papel-2);
}
/* teto de altura na capa: o folder com dobra é 1:2 e, sem isto, uma capa
   sozinha esticava duas fileiras da estante e desalinhava tudo */
.obra__capa img{width:100%; display:block; max-height:330px; object-fit:contain; background:var(--papel-2)}
.obra__capa::before{ /* lombada */
  content:""; position:absolute; inset:0 auto 0 0; width:11px; z-index:2;
  background:linear-gradient(90deg,rgba(43,42,42,.26),rgba(43,42,42,.03) 62%,rgba(255,255,255,.16));
}
.obra:hover .obra__capa,.obra:focus-visible .obra__capa{
  transform:rotateY(-13deg) translateZ(14px) translateX(4px);
  box-shadow:var(--sombra-3), -7px 0 0 -1px var(--papel-3), -9px 0 0 -1px rgba(43,42,42,.18);
}
.obra__abrir{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.86);
  background:var(--roxo); color:var(--tinta); border-radius:999px; padding:11px 22px;
  font-weight:600; font-size:.88rem; opacity:0; transition:.45s var(--ease-out);
  box-shadow:var(--sombra-2); white-space:nowrap; z-index:3; pointer-events:none;
}
.obra:hover .obra__abrir,.obra:focus-visible .obra__abrir{opacity:1; transform:translate(-50%,-50%) scale(1)}
.obra__txt{margin-top:16px}
.obra__txt b{display:block; font-weight:600; font-size:1.02rem; line-height:1.28}
.obra__txt span{font-size:.85rem; color:var(--tinta-3); display:block; margin-top:4px}
.obra__tag{
  display:inline-block; margin-top:9px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--roxo-forte); background:var(--roxo-fraco); padding:4px 10px; border-radius:4px;
}

/* ---------- CITAÇÃO / NOTA DA DESIGNER ---------- */
.nota{
  position:relative; padding:clamp(30px,4vw,58px); background:var(--papel);
  border:1px solid rgba(43,42,42,.14); border-radius:var(--radius-g);
}
.nota .aspas{
  font-family:"Moon Dance",cursive; font-size:clamp(2rem,4vw,3.2rem); color:var(--roxo-forte);
  line-height:1; margin-bottom:14px; display:block;
}
.nota p{font-size:clamp(1.02rem,1.35vw,1.18rem); color:var(--tinta-2)}
.nota p + p{margin-top:1.05em}
.nota__assina{margin-top:26px; display:flex; align-items:center; gap:14px}
.nota__assina img,.nota__assina svg{width:118px; color:var(--tinta)}
.nota__assina .quem{font-size:.86rem; color:var(--tinta-3)}

/* ---------- CTA FINAL ---------- */
.cta{position:relative; overflow:hidden; text-align:center}
.cta .titulo-duplo{margin-bottom:22px}
.cta .lead{margin-inline:auto}

/* ---------- FORMULÁRIO ---------- */
.form{display:grid; gap:18px}
.campo{position:relative; display:grid; gap:7px}
.campo label{font-size:.85rem; font-weight:600; letter-spacing:.03em}
.campo input,.campo textarea,.campo select{
  width:100%; padding:14px 16px; border-radius:10px; background:var(--papel);
  border:1.4px solid rgba(43,42,42,.2); transition:.3s var(--ease); font-size:1rem;
}
.campo textarea{min-height:140px; resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--roxo-vivo); box-shadow:0 0 0 4px rgba(227,80,253,.28);
}
.campo .erro{font-size:.8rem; color:#B02525; display:none}
.campo.invalido input,.campo.invalido textarea{border-color:#B02525}
.campo.invalido .erro{display:block}
.form__ok{
  display:none; padding:18px 20px; border-radius:12px; background:var(--roxo-fraco);
  border:1px solid var(--roxo); font-size:.95rem;
}
.form__ok.visivel{display:block}
.mel{position:absolute; left:-9999px; opacity:0; height:0; width:0} /* honeypot anti-spam */

/* ---------- CONTATO: CARTÕES ---------- */
.contato-item{
  display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border-radius:var(--radius);
  border:1px solid rgba(43,42,42,.13); background:var(--papel);
  transition:transform .4s var(--ease-out), border-color .4s var(--ease);
}
.contato-item:hover{transform:translateX(4px); border-color:var(--roxo-vivo)}
.contato-item svg{width:24px; height:24px; flex:none; color:var(--roxo-forte); margin-top:3px}
.contato-item b{display:block; font-weight:600; margin-bottom:2px}
.contato-item span{font-size:.92rem; color:var(--tinta-2)}

/* ---------- LINHA DO TEMPO ---------- */
.linha{position:relative; display:grid; gap:clamp(26px,3vw,42px); padding-left:34px}
.linha::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--roxo),rgba(227,80,253,.15))}
.linha__i{position:relative}
.linha__i::before{
  content:""; position:absolute; left:-31px; top:8px; width:14px; height:14px; border-radius:50%;
  background:var(--papel); border:3px solid var(--roxo-vivo);
}
.linha__i .ano{
  font-family:"Archivo",sans-serif; font-variation-settings:"wght" 900,"wdth" 74;
  font-size:1.5rem; color:var(--roxo-forte); text-transform:uppercase; line-height:1;
}
.linha__i h3{font-size:1.22rem; margin:8px 0 6px; text-transform:none; letter-spacing:0; font-variation-settings:"wght" 700,"wdth" 92; line-height:1.25}
.linha__i p{color:var(--tinta-2); font-size:.97rem}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px}
.faq details{
  border:1px solid rgba(43,42,42,.14); border-radius:12px; background:var(--papel);
  transition:border-color .3s var(--ease);
}
.faq details[open]{border-color:var(--roxo-vivo)}
.faq summary{
  padding:18px 52px 18px 22px; cursor:pointer; font-weight:600; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--roxo-forte); border-bottom:2px solid var(--roxo-forte);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq .resp{padding:0 22px 20px; color:var(--tinta-2); font-size:.97rem}

/* ---------- RODAPÉ ---------- */
.rodape{background:var(--tinta); color:var(--papel); padding-block:clamp(56px,7vw,90px) 30px; position:relative; z-index:2}
.rodape a{color:#DAD7D1; transition:color .28s var(--ease)}
.rodape a:hover{color:var(--roxo)}
.rodape__topo{display:grid; grid-template-columns:1.3fr .8fr .8fr; gap:clamp(26px,4vw,50px); align-items:start}
@media(max-width:820px){.rodape__topo{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rodape__topo{grid-template-columns:1fr}}
.rodape .assinatura{width:190px; margin-bottom:18px}
.rodape h4{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--roxo); margin-bottom:16px; font-weight:600}
.rodape ul{display:grid; gap:10px; font-size:.95rem}
.rodape__base{
  margin-top:clamp(38px,5vw,64px); padding-top:22px; border-top:1px solid rgba(244,239,239,.15);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.83rem; color:#A5A19A;
}
.social{display:flex; gap:10px; margin-top:20px}
.social a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(244,239,239,.24);
  display:grid; place-items:center; transition:.35s var(--ease-out);
}
.social a:hover{background:var(--roxo); border-color:var(--roxo); color:var(--tinta); transform:translateY(-3px)}
.social svg{width:19px; height:19px}

/* ---------- BOTÃO FLUTUANTE WHATSAPP ---------- */
.zap{
  position:fixed; right:20px; bottom:20px; z-index:50; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(37,211,102,.7);
  transition:transform .4s var(--ease-out);
}
.zap:hover{transform:scale(1.08) translateY(-2px)}
.zap svg{width:29px; height:29px}
.zap::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation:pulso 2.6s var(--ease-out) infinite;
}
@keyframes pulso{0%{transform:scale(1);opacity:.8} 70%,100%{transform:scale(1.65);opacity:0}}
@media(prefers-reduced-motion:reduce){.zap::after{animation:none}}

/* ---------- LIGHTBOX DE IMAGEM ---------- */
.lb{
  position:fixed; inset:0; z-index:90; background:rgba(20,19,19,.93); display:none;
  place-items:center; padding:clamp(16px,4vw,50px); backdrop-filter:blur(6px);
}
.lb.aberto{display:grid}
.lb img{max-width:min(94vw,1100px); max-height:86svh; border-radius:8px; box-shadow:var(--sombra-3); object-fit:contain}
.lb__cap{color:#EDEAE4; text-align:center; margin-top:16px; font-size:.92rem}
.lb__cap b{display:block; font-weight:600; font-size:1.02rem}
.lb__x,.lb__nav{
  position:absolute; background:rgba(244,239,239,.12); border:1px solid rgba(244,239,239,.28);
  color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  transition:.3s var(--ease);
}
.lb__x:hover,.lb__nav:hover{background:var(--roxo); color:var(--tinta); border-color:var(--roxo)}
.lb__x{top:20px; right:20px; font-size:1.4rem; line-height:1}
.lb__nav{top:50%; margin-top:-24px}
.lb__nav.ant{left:16px} .lb__nav.prox{right:16px}

/* ---------- REVEAL NO SCROLL ---------- */
[data-rev]{opacity:0; transform:translateY(26px)}
.js-off [data-rev]{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  [data-rev]{opacity:1!important; transform:none!important}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ---------- UTILITÁRIOS ---------- */
.centro{text-align:center}
.mt-1{margin-top:14px} .mt-2{margin-top:26px} .mt-3{margin-top:44px} .mt-4{margin-top:clamp(44px,6vw,80px)}
.pula{
  position:absolute; left:-9999px; top:0; background:var(--tinta); color:var(--papel);
  padding:12px 20px; z-index:200; border-radius:0 0 8px 0;
}
.pula:focus{left:0}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}


/* ============================================================
   REFINO MOBILE
   Alvos de toque de 44px, tipografia mínima legível e ajustes
   de grade que só fazem sentido em tela estreita.
   ============================================================ */

/* --- rodapé: os links tinham 19px de altura, impossíveis de acertar no dedo --- */
.rodape ul a,
.rodape__base a{
  display:inline-block; padding-block:6px; min-height:32px;
}
@media(max-width:900px){
  .rodape ul{gap:4px}
  .rodape ul a{padding-block:11px; min-height:44px}
  .rodape ul li > span{display:inline-block; padding-block:11px}
  .social a{width:46px; height:46px}
}

/* --- prévia do portfólio na home ---
   Em uma coluna, um card 4:5 com logotipo horizontal dentro virava
   um vazio enorme. Em tela estreita vai a duas colunas e fica quadrado. */
@media(max-width:560px){
  .grid.previa{grid-template-columns:repeat(2,1fr); gap:12px; align-items:start}
  .previa .peca img{aspect-ratio:1/1; padding:12px}
  .peca__cat{font-size:.68rem; letter-spacing:.06em; padding:7px 6px}
}


/* --- botão flutuante do WhatsApp ---
   No celular ele passava por cima do texto; encolhe um pouco, respeita a
   área segura do iPhone e o rodapé ganha folga para ninguém ficar embaixo dele. */
@media(max-width:640px){
  .zap{
    width:54px; height:54px;
    right:max(14px, env(safe-area-inset-right));
    bottom:max(14px, env(safe-area-inset-bottom));
  }
  .zap svg{width:27px; height:27px}
  .rodape{padding-bottom:84px}
}

/* --- links soltos de texto (404 e afins) precisam de área clicável --- */
.mini a{display:inline-block; padding:8px 4px; min-height:36px}

/* --- tipografia: nada abaixo de 12.5px em tela de celular --- */
@media(max-width:640px){
  .mini{font-size:.9rem}
  .rodape__base{font-size:.86rem; gap:10px}
  .olho{font-size:.8rem; letter-spacing:.18em}
}

/* --- o campo de seleção do formulário ficava mais baixo que os outros --- */
.campo select{min-height:52px}
.campo input,.campo textarea{min-height:52px}

/* --- catálogos: em tela estreita, capa maior e mais fácil de tocar --- */
@media(max-width:560px){
  .estante{grid-template-columns:repeat(2,1fr); gap:20px}
  .obra__txt b{font-size:.92rem}
  .obra__txt span{font-size:.78rem}
  /* no celular vira uma faixa na base da capa, em vez de um selo no meio dela */
  .obra__abrir{
    opacity:1; left:0; right:0; bottom:0; top:auto; transform:none;
    border-radius:0; padding:8px 6px; text-align:center; font-size:.8rem;
    background:rgba(227,80,253,.95); box-shadow:none;
  }
  .obra:hover .obra__abrir,.obra:focus-visible .obra__abrir{transform:none}
}

/* --- a galeria em coluna única deixava cada peça gigante --- */
@media(max-width:520px){
  .galeria{columns:2; column-gap:12px}
  /* a grade uniforme mantém duas colunas no celular: uma peça por linha
     ocupava a tela inteira e obrigava a rolar meia hora até o fim da seção */
  .grade--logos,.grade--social,.grade--rebrand,.grade--graficos{grid-template-columns:repeat(2,1fr); gap:10px}
  .grade .peca{margin-bottom:0}
  .peca{margin-bottom:12px; background:var(--papel-2)}
  /* legenda centrada e com folga: encostada na borda do card ela parecia
     cortada, principalmente nos cards de fundo branco dos serviços gráficos */
  .peca__info{
    position:static; opacity:1; transform:none; background:none;
    color:var(--tinta); padding:10px 14px 14px; text-align:center;
  }
  .peca__info b{font-size:.8rem; line-height:1.3}
  /* display:block no subtítulo: como inline ele formava uma caixa própria e
     ficava colado à esquerda, mesmo com o text-align:center no pai */
  .peca__info span{display:block; font-size:.72rem; color:var(--tinta-3); opacity:1; line-height:1.35}
}

/* --- no celular o hover não existe: o cartão não pode depender dele --- */
@media(hover:none){
  .card:hover{transform:none}
  .peca:hover{transform:none}
  .peca:hover img{transform:none}
}