/* MAYAA STUDIO · páginas internas (cases, portfólio, pilar, privacidade)
   Mesmo sistema da home: tinta #0B0B0B, papel #F6F4EF, Lato (400, 700, 900). */
@font-face{font-family:'Lato';src:url(/assets/fonts/lato-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(/assets/fonts/lato-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(/assets/fonts/lato-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{
  --ink:#0B0B0B; --paper:#F6F4EF; --smoke:#6B6864; --line:#DAD5CB;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,36px);
  --max:1500px;
}
*,*::before,*::after{ box-sizing:border-box; }
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; }
body{ margin:0; background:var(--ink); color:var(--paper); font-family:'Lato',sans-serif; font-weight:400; letter-spacing:.005em; overflow-x:hidden; line-height:1.55; }
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:8px; z-index:10001; background:var(--paper); color:var(--ink); padding:10px 14px; }
.skip:focus{ left:8px; }

/* Seções */
.sec{ padding:clamp(72px,10vw,144px) var(--gut); position:relative; }
.sec--dark{ background:var(--ink); color:var(--paper); }
.sec--light{ background:var(--paper); color:var(--ink); }
.wrap{ max-width:var(--max); margin:0 auto; position:relative; }
.u-smoke{ color:#8C877C; }
.sec--dark .u-smoke{ color:#8B857A; }
.sec--light .muted{ color:rgba(11,11,11,.62); }
.sec--dark .muted{ color:rgba(246,244,239,.62); }

/* Tipo */
.display{ font-family:'Lato',sans-serif; font-weight:900; line-height:.92; letter-spacing:-.03em; text-wrap:balance; margin:0; }
.display .it{ font-style:normal; font-weight:400; }
.kicker{ font-family:'Lato',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; }
.h-xl{ font-size:clamp(3rem,9.5vw,8.6rem); }
.h-lg{ font-size:clamp(2.4rem,6vw,5.6rem); }
.h-md{ font-size:clamp(1.9rem,3.6vw,3.2rem); line-height:1; }
.h-sm{ font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.08; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; max-width:46ch; font-weight:400; }
.prose p{ max-width:62ch; font-size:16px; line-height:1.7; margin:0 0 1.1em; }
.prose h2{ font-family:'Lato',sans-serif; font-weight:700; letter-spacing:-.02em; font-size:clamp(1.35rem,2.2vw,1.8rem); line-height:1.1; margin:2.2em 0 .7em; }
.prose ul{ max-width:62ch; padding-left:1.1em; margin:0 0 1.2em; }
.prose li{ margin:.35em 0; line-height:1.6; }
.prose a{ text-underline-offset:3px; }

/* Header */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:9000; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px var(--gut); color:var(--paper); transition:background-color .4s ease,color .3s ease; }
.hdr.compact{ background:rgba(11,11,11,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.hdr.on-light{ color:var(--ink); }
.hdr.on-light.compact{ background:rgba(246,244,239,.72); }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand svg{ width:30px; height:auto; aspect-ratio:1584/1473; }
.brand span{ font-family:'Lato',sans-serif; font-weight:900; font-size:15px; letter-spacing:-.02em; line-height:1; }
.brand span b{ font-weight:400; }
.nav{ display:none; gap:34px; font-size:13px; letter-spacing:.02em; }
.nav a,.nav-link{ position:relative; text-decoration:none; }
.nav a::after,.nav-link::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:currentColor; transition:width .4s var(--ease); }
.nav a:hover::after,.nav a[aria-current="page"]::after,.nav-link:hover::after{ width:100%; }
.hdr-r{ display:flex; align-items:center; gap:14px; }
@media (min-width:1024px){ .nav{ display:flex; } .burger{ display:none !important; } }

/* Botões */
.btn{ display:inline-flex; align-items:center; gap:12px; font-family:'Lato',sans-serif; font-weight:700; font-size:14px; letter-spacing:.01em; text-decoration:none; border:1px solid currentColor; border-radius:999px; padding:15px 28px; position:relative; overflow:hidden; isolation:isolate; cursor:pointer; background:none; color:inherit; }
.btn--sm{ padding:9px 18px; font-size:12.5px; }
.btn > *{ position:relative; z-index:2; transition:color .45s ease; }
.btn::before{ content:''; position:absolute; inset:0; z-index:1; background:currentColor; transform:translateY(101%); transition:transform .55s var(--ease); }
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.sec--dark .btn:hover > *,.hdr .btn:hover > *,.menu .btn:hover > *{ color:var(--ink); }
.sec--light .btn:hover > *,.hdr.on-light .btn:hover > *{ color:var(--paper); }
.hdr.on-light .btn:hover > *{ color:var(--paper); }
.hdr-cta{ display:none; }
@media (min-width:640px){ .hdr-cta{ display:inline-flex; } }

/* Menu mobile */
.burger{ width:28px; padding:8px 0; margin:-8px 0; display:flex; flex-direction:column; gap:5px; align-items:flex-end; background:none; border:0; color:inherit; cursor:pointer; }
.burger span{ display:block; height:1.5px; background:currentColor; transition:transform .4s var(--ease),opacity .3s; }
.burger span:nth-child(1),.burger span:nth-child(3){ width:28px; } .burger span:nth-child(2){ width:20px; }
.burger.on span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.menu{ position:fixed; inset:0; z-index:8999; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; justify-content:space-between; padding:96px 24px 32px; transform:translateY(-100%); visibility:hidden; transition:transform .7s cubic-bezier(.76,0,.24,1),visibility .7s; }
.menu.open{ transform:none; visibility:visible; }
.menu nav{ display:flex; flex-direction:column; gap:6px; }
.menu nav a{ font-family:'Lato',sans-serif; font-weight:900; letter-spacing:-.03em; font-size:clamp(2.2rem,11vw,4rem); line-height:1.08; text-decoration:none; }
.menu-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; color:rgba(246,244,239,.7); }

/* Hero de página */
.phero{ min-height:78svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:140px; overflow:hidden; }
.phero .kanji{ position:absolute; right:-2%; top:6%; font-size:min(46vw,34rem); line-height:1; color:rgba(246,244,239,.05); pointer-events:none; user-select:none; }
.sec--light .kanji{ color:rgba(11,11,11,.05); }
.crumbs{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:28px; display:flex; flex-wrap:wrap; gap:8px; }
.crumbs a{ text-decoration:none; opacity:.7; } .crumbs a:hover{ opacity:1; }
.tagline{ display:inline-flex; align-items:center; gap:10px; border:1px solid currentColor; border-radius:999px; padding:8px 16px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
.hero-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px; margin-top:48px; padding-top:24px; border-top:1px solid rgba(246,244,239,.16); }
.sec--light .hero-meta{ border-color:var(--line); }
.hero-meta dt{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; opacity:.55; margin-bottom:6px; font-weight:700; }
.hero-meta dd{ margin:0; font-size:15px; }
@media (min-width:900px){ .hero-meta{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Grades */
.g2{ display:grid; gap:40px; }
@media (min-width:900px){ .g2{ grid-template-columns:5fr 7fr; gap:64px; } .g2--even{ grid-template-columns:1fr 1fr; } }
.rule{ height:1px; background:currentColor; opacity:.16; margin:0 0 40px; border:0; }
.num{ font-family:'Lato',sans-serif; font-weight:400; font-size:13px; letter-spacing:.2em; opacity:.55; }

/* Série de imagens */
.serie{ margin-top:clamp(56px,8vw,112px); }
.serie-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 40px; margin-bottom:28px; }
.serie-h p{ max-width:44ch; margin:0; }
.gal{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:640px){ .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }
@media (min-width:1024px){ .gal--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .gal--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.fig{ margin:0; }
.fig .frame{ overflow:hidden; background:rgba(128,128,128,.12); }
.fig img{ width:100%; height:auto; transition:transform 1.2s var(--ease); }
.fig:hover img{ transform:scale(1.025); }
.fig figcaption{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:12.5px; line-height:1.4; }
.fig figcaption span:last-child{ opacity:.55; white-space:nowrap; }

/* Vídeo */
.vid{ position:relative; margin:0; max-width:420px; }
.vid video{ width:100%; aspect-ratio:9/16; object-fit:cover; background:#141414; }
.vid-wrap{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .vid-wrap{ grid-template-columns:minmax(0,420px) 1fr; gap:72px; } }

/* Embed do Instagram sob demanda */
.ig{ border:1px solid rgba(128,128,128,.35); padding:28px; max-width:540px; }
.ig p{ margin:0 0 18px; font-size:14px; line-height:1.6; }
.ig .ig-slot{ margin-top:18px; }
.ig .instagram-media{ margin:0 !important; min-width:0 !important; width:100% !important; max-width:100% !important; }

/* Lista de cases (segmento · entregável) */
.clist{ list-style:none; margin:0; padding:0; border-top:1px solid currentColor; }
.clist li{ border-bottom:1px solid rgba(128,128,128,.35); }
.clist a{ display:grid; grid-template-columns:1fr auto; gap:6px 24px; align-items:center; padding:24px 0; text-decoration:none; }
.clist .seg{ grid-column:1/-1; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; opacity:.6; font-weight:700; }
.clist .t{ font-family:'Lato',sans-serif; font-weight:900; letter-spacing:-.025em; font-size:clamp(1.5rem,3.4vw,2.8rem); line-height:1; transition:transform .5s var(--ease); }
.clist .arr{ font-size:22px; transition:transform .5s var(--ease); }
.clist a:hover .t{ transform:translateX(10px); }
.clist a:hover .arr{ transform:translate(4px,-4px); }

/* Cartões de case (portfólio) */
.cards{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
.card{ display:block; text-decoration:none; }
.card .frame{ overflow:hidden; aspect-ratio:4/5; background:rgba(128,128,128,.12); }
.card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.card:hover img{ transform:scale(1.04); }
.card .meta{ padding-top:16px; display:flex; flex-direction:column; gap:8px; }
.card .seg{ font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; opacity:.6; font-weight:700; }
.card .t{ font-family:'Lato',sans-serif; font-weight:900; letter-spacing:-.025em; font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1; }
.card .d{ font-size:14.5px; opacity:.7; max-width:46ch; }

/* Prova (número) */
.proof{ display:grid; gap:32px; }
@media (min-width:900px){ .proof{ grid-template-columns:auto 1fr; gap:72px; align-items:end; } }
.proof .big{ font-family:'Lato',sans-serif; font-weight:900; letter-spacing:-.04em; font-size:clamp(5rem,15vw,12rem); line-height:.85; }
.caveats{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.caveats li{ display:flex; gap:12px; font-size:15px; line-height:1.5; }
.caveats li::before{ content:'·'; opacity:.5; font-weight:700; }

/* Pilares */
.pillars{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid rgba(128,128,128,.35); }
.pillars li{ display:grid; grid-template-columns:52px 1fr; gap:6px 18px; padding:26px 0; border-bottom:1px solid rgba(128,128,128,.35); }
@media (min-width:900px){ .pillars li{ grid-template-columns:80px 260px 1fr; align-items:baseline; } }
.pillars h3{ margin:0; font-family:'Lato',sans-serif; font-weight:900; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.025em; line-height:1; }
.pillars p{ margin:0; max-width:56ch; font-size:15.5px; line-height:1.6; grid-column:2/-1; }
@media (min-width:900px){ .pillars p{ grid-column:auto; } }

/* FAQ */
.faq{ border-top:1px solid currentColor; }
.faq details{ border-bottom:1px solid rgba(128,128,128,.35); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font-family:'Lato',sans-serif; font-weight:700; letter-spacing:-.015em; font-size:clamp(1.1rem,1.8vw,1.45rem); line-height:1.2; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:0 0 auto; width:14px; height:14px; position:relative; }
.faq summary .pm::before,.faq summary .pm::after{ content:''; position:absolute; left:0; top:6.5px; width:14px; height:1.5px; background:currentColor; transition:transform .4s var(--ease); }
.faq summary .pm::after{ transform:rotate(90deg); }
.faq details[open] summary .pm::after{ transform:rotate(0); }
.faq .a{ padding:0 0 26px; max-width:64ch; font-size:15.5px; line-height:1.7; }
.faq .a p{ margin:0 0 .8em; }

/* CTA final */
.cta-band{ text-align:left; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; margin-top:36px; }

/* Rodapé */
.ftr{ background:var(--ink); color:var(--paper); border-top:1px solid rgba(246,244,239,.1); overflow:hidden; }
.ftr-tick{ padding:22px 0; border-bottom:1px solid rgba(246,244,239,.1); white-space:nowrap; overflow:hidden; }
.ftr-tick span{ display:inline-block; font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:.3em; color:rgba(246,244,239,.7); padding-right:48px; }
.ftr-g{ display:grid; gap:40px; padding:56px var(--gut); max-width:var(--max); margin:0 auto; }
@media (min-width:900px){ .ftr-g{ grid-template-columns:5fr 3fr 4fr; } }
.ftr-g ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; color:rgba(246,244,239,.75); }
.ftr-g a{ text-decoration:none; }
.ftr-logo{ width:140px; height:auto; aspect-ratio:1; margin-bottom:18px; opacity:.95; }
.ftr-b{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:0 var(--gut) 32px; max-width:var(--max); margin:0 auto; font-size:12px; letter-spacing:.03em; color:rgba(246,244,239,.42); }

/* Animação: só esconde se o GSAP carregou (classe .anim no <html>) */
.anim .reveal{ opacity:0; transform:translateY(28px); }
.anim.rm .reveal{ transform:none; }
.reveal-line{ display:block; overflow:hidden; padding-bottom:.08em; }
.anim .reveal-line > span{ display:block; transform:translateY(110%); }
.anim.rm .reveal-line > span{ transform:none; opacity:0; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fig img,.card img,.clist .t,.clist .arr{ transition:none !important; }
  .fig:hover img,.card:hover img{ transform:none; }
}

/* Logos de clientes (portfólio) */
.logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .logos{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .logos{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.logo-cell{ background:var(--paper); display:flex; align-items:center; justify-content:center; padding:28px 22px; min-height:120px; }
.logo-cell img{ max-height:56px; width:auto; max-width:100%; object-fit:contain; }
.logo-cta{ gap:.8rem; color:var(--ink); text-decoration:none; font:700 .7rem/1 'Lato',sans-serif; letter-spacing:.34em; text-transform:uppercase; }
@media (min-width:640px){ .logo-cta{ grid-column:span 3; } }
@media (min-width:1024px){ .logo-cta{ grid-column:span 5; } }
.clist-next .display{ transition:transform .5s var(--ease); }
.clist-next:hover .display{ transform:translateX(8px); }
.phero > .wrap{ width:100%; }
.sec{ display:flow-root; }
.phero{ display:flex; }
/* Séries com recorte uniforme (4:5); .gal--free mantém a proporção original da peça */
.gal:not(.gal--free) .frame{ aspect-ratio:4/5; }
.gal:not(.gal--free) .frame img{ width:100%; height:100%; object-fit:cover; }
.gal--free{ align-items:start; }
.gal--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }