/* Estudo de home inspirado na referência Fábrica, adaptado à identidade do Paulo. */
:root {
  --proto-paper: #F5F5F5;
  --paper: var(--proto-paper);
  --soft: var(--proto-paper);
  --proto-ink: #171717;
  --proto-muted: #666663;
  --proto-line: rgba(23,23,23,.16);
  --proto-gutter: clamp(24px, 5.2vw, 88px);
  --proto-space: clamp(88px, 11vw, 164px);
  --proto-ease: var(--ease-entrance);
}
html { scroll-padding-top: 80px; }
body { background: var(--proto-paper); color: var(--proto-ink); }
.wrap { width: calc(100% - var(--proto-gutter)*2); max-width: 1480px; }
.section { padding-block: var(--proto-space); }
.eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: .105em; }
.header { z-index: 30; }
.header nav { gap: clamp(18px, 2.3vw, 34px); }
.nav-link { font-size: 13px; }
.skip { z-index: 99; }

/* O bloco de clientes funciona como pausa curta entre a promessa e a prova. */
.brands-section { padding: clamp(30px,4.2vw,58px) 0 24px; overflow: hidden; }
.brands-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.brands-heading .eyebrow { margin:0; }
.brands-note { max-width: 42ch; color:var(--proto-muted); font-size:13px; text-align:right; }
.brand-window { margin-top:25px; overflow:hidden; position:relative; }
.brand-window::before,.brand-window::after { content:""; position:absolute; inset-block:0; width:7vw; z-index:2; pointer-events:none; }
.brand-window::before { left:0; background:linear-gradient(90deg,var(--proto-paper),transparent); }
.brand-window::after { right:0; background:linear-gradient(270deg,var(--proto-paper),transparent); }
.brand-track { display:flex; align-items:center; gap:clamp(44px,8vw,132px); width:max-content; min-height:70px; padding:8px 4vw; }
.brand-track li { display:grid; place-items:center; flex:none; width:clamp(90px,11vw,150px); height:56px; }
.brand-track a { display:grid; place-items:center; width:100%; height:100%; opacity:.72; transition:opacity var(--dur-fast) var(--proto-ease), transform var(--dur-medium) var(--proto-ease); }
.brand-track a:hover,.brand-track a:focus-visible { opacity:1; transform:translateY(-2px); }
.brand-track img { width:100%; max-width:145px; max-height:42px; object-fit:contain; }
/* Ajuste ótico por marca, e não por posição: o JS duplica a lista para a faixa
   correr sem emenda, então nth-child/last-child só acertavam a primeira volta —
   a Syntax original ficava branca sobre papel branco, invisível. */
.brand-track .brand-easy img { max-width:110px; }
.brand-track .brand-evolue img { max-width:128px; }
.brand-track .brand-negative a { padding:8px 12px; background:transparent; }
.brand-track .brand-negative img { max-height:28px; }
.brand-hint { display:flex; justify-content:space-between; margin-top:13px; color:var(--proto-muted); font-size:11px; letter-spacing:.04em; }
.brand-hint span:last-child { font-size:16px; }
@media (min-width:761px) and (prefers-reduced-motion:no-preference) {
  .brand-track { animation:brand-drift 38s var(--ease-drift) infinite; }
  .brand-window:hover .brand-track,.brand-window:focus-within .brand-track { animation-play-state:paused; }
  @keyframes brand-drift { to { transform:translateX(-50%); } }
}

/* Cada projeto vira uma peça editorial: identificação no topo, arte logo abaixo. */
.hero-stack { font-weight:600; letter-spacing:-.07em; }
.projects-section { padding:var(--proto-space) 0 clamp(70px,8vw,116px); }
.projects-heading { display:grid; grid-template-columns:1.1fr .55fr; align-items:end; gap:clamp(28px,7vw,110px); margin-bottom:clamp(38px,6vw,82px); }
.projects-title,.about-title,.skills-heading h2,.experience-heading h2,.contact-title {
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-weight:600; letter-spacing:-.07em;
}
.projects-title { margin-top:20px; max-width:12ch; font-size:clamp(48px,8vw,112px); line-height:.96; text-wrap:balance; }
.projects-intro { max-width:39ch; color:var(--proto-muted); font-size:clamp(15px,1.25vw,18px); line-height:1.55; padding-bottom:5px; }
.projects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,2.4vw,36px); align-items:start; }
.project-entry { min-width:0; }
.project-card { position:relative; isolation:isolate; display:block; overflow:hidden; color:#171717; background:#fff; border-radius:12px; box-shadow:0 1px 1px rgba(0,0,0,.035); transition:transform var(--dur-slow) var(--ease-float),box-shadow var(--dur-slow) var(--ease-float); }
.project-entry-head { position:relative; display:flex; align-items:center; gap:12px; min-height:54px; padding:10px 15px; background:color-mix(in srgb,var(--project-tone,#e8e8e6) 46%,#fff); transition:background-color var(--dur-medium) var(--proto-ease); }
.project-card[href="/case/ams/"] .project-entry-head,
.project-card[href="/case/syntax/"] .project-entry-head {
  background:#242424; color:#fff;
}
.project-card[href="/case/ams/"] .project-number,
.project-card[href="/case/syntax/"] .project-number { color:rgba(255,255,255,.66); }
.project-card[href="/case/ams/"] .project-dots i,
.project-card[href="/case/syntax/"] .project-dots i { background:rgba(255,255,255,.32); }
.project-number { color:#62625e; font-size:9px; letter-spacing:.08em; white-space:nowrap; }
.project-name { font-size:clamp(15px,1.35vw,19px); font-weight:600; letter-spacing:-.07em; line-height:1.1; }
.project-dots { display:flex; gap:4px; margin-left:auto; padding-left:8px; }
.project-dots i { display:block; width:5px; height:5px; border-radius:50%; background:rgba(26,26,26,.22); transition:background-color var(--dur-medium) var(--proto-ease),transform var(--dur-medium) var(--proto-ease); }
.project-image { position:relative; display:block; overflow:hidden; aspect-ratio:750/547; background:var(--project-tone,#e8e8e6); isolation:isolate; }
.project-image > img { display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-float),filter var(--dur-slow) var(--ease-float); }
.project-image::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.16),rgba(255,255,255,.025) 58%,rgba(20,20,20,.08)); transition:opacity var(--dur-slow) var(--proto-ease); }
.project-image::after { content:""; position:absolute; z-index:1; inset:-70% -45%; pointer-events:none; opacity:0; transform:translateX(-80%) rotate(9deg); background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.42) 49.5%,rgba(255,255,255,.12) 53%,transparent 59%); mix-blend-mode:screen; }
.project-card.is-scroll-glint .project-image::after { animation:project-glint var(--dur-slow) var(--ease-float) both; }
@keyframes project-glint { 0% { opacity:0; transform:translateX(-80%) rotate(9deg); } 18% { opacity:.72; } 100% { opacity:0; transform:translateX(80%) rotate(9deg); } }
.project-card:focus-visible { transform:scale(1.018); box-shadow:0 18px 48px rgba(0,0,0,.13); z-index:2; outline:2px solid currentColor; outline-offset:4px; }
.project-card:focus-visible .project-entry-head { background:color-mix(in srgb,var(--project-tone,#e8e8e6) 72%,#fff); }
.project-card:focus-visible .project-dots i { background:rgba(26,26,26,.48); transform:scale(1.12); }
.project-card:focus-visible .project-image > img { transform:scale(1.09); filter:contrast(1.04) saturate(1.06) brightness(.86) blur(5px); }
.project-card:focus-visible .project-image::before { opacity:1; }
@media(hover:hover) and (pointer:fine) {
  .project-card:hover { transform:scale(1.018); box-shadow:0 18px 48px rgba(0,0,0,.13); z-index:2; }
  .project-card:hover .project-entry-head { background:color-mix(in srgb,var(--project-tone,#e8e8e6) 72%,#fff); }
  .project-card:hover .project-dots i { background:rgba(26,26,26,.48); transform:scale(1.12); }
  .project-card:hover .project-image > img { transform:scale(1.09); filter:contrast(1.04) saturate(1.06) brightness(.86) blur(5px); }
  .project-card:hover .project-image::before { opacity:1; }
}
.project-card[href="/case/ams/"]:hover .project-entry-head,
.project-card[href="/case/ams/"]:focus-visible .project-entry-head,
.project-card[href="/case/syntax/"]:hover .project-entry-head,
.project-card[href="/case/syntax/"]:focus-visible .project-entry-head {
  background:#242424;
}
.project-foot { margin-top:28px; text-align:right; color:var(--proto-muted); font-size:11px; }

/* Retrato e copy: rosto pequeno o bastante para não virar uma página biográfica. */
.about-section { background:var(--proto-paper); }
.about-layout { display:grid; grid-template-columns:minmax(230px,.78fr) minmax(0,1.22fr); gap:clamp(40px,9vw,144px); align-items:center; }
.about-photo { position:relative; max-width:340px; justify-self:center; width:100%; }
.about-photo img { width:100%; aspect-ratio:4/5; object-fit:contain; object-position:center; filter:none; }
.portrait-caption { display:block; margin-top:10px; text-align:right; font-size:9px; letter-spacing:.12em; color:#696966; }
.about-copy>.eyebrow { margin-bottom:clamp(22px,3vw,40px); }
.about-title { max-width:13ch; font-size:clamp(40px,6vw,82px); line-height:1; text-wrap:balance; }
.about-section .about-title { font-weight:600; letter-spacing:-.07em; }
.about-title em { font-style:normal; font-weight:600; letter-spacing:-.07em; color:#747470; }
.about-lead { max-width:34ch; margin-top:clamp(25px,4vw,48px); font-size:clamp(18px,2vw,24px); line-height:1.35; letter-spacing:-.025em; }
.about-body { max-width:55ch; margin-top:18px; color:#565653; font-size:15px; line-height:1.7; }
.quiet-link { display:inline-flex; align-items:center; gap:30px; border-bottom:1px solid var(--proto-ink); padding:12px 0 8px; margin-top:24px; font-size:12px; }
.quiet-link span:last-child { transition:transform var(--dur-fast) var(--proto-ease); }
.quiet-link:hover span:last-child { transform:translate(3px,-3px); }

.skills-section { background:#171717; color:#f7f7f4; }
.skills-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(40px,8vw,120px); }
.skills-heading { align-self:start; position:sticky; top:110px; }
.skills-heading .eyebrow { color:#b5b5af; }
.skills-heading h2 { margin-top:24px; max-width:12ch; font-size:clamp(42px,5.5vw,72px); line-height:1.02; }
.skills-heading>p:last-child { max-width:35ch; margin-top:22px; color:#b5b5af; font-size:14px; line-height:1.6; }
.skills-list { border-top:1px solid rgba(255,255,255,.28); }
.skill-row { border-bottom:1px solid rgba(255,255,255,.28); }
.skill-row summary { display:grid; grid-template-columns:44px 1fr 24px; align-items:center; gap:12px; min-height:clamp(74px,9vw,112px); cursor:pointer; list-style:none; }
.skill-row summary::-webkit-details-marker { display:none; }
.skill-index { color:#9a9a94; font-size:10px; }
.skill-name { font-size:clamp(18px,2.5vw,31px); font-weight:600; letter-spacing:-.07em; }
.skill-toggle { position:relative; width:20px; height:20px; justify-self:end; }
.skill-toggle::before,.skill-toggle::after { content:""; position:absolute; top:50%; left:50%; width:14px; height:1px; background:currentColor; transform:translate(-50%,-50%); transition:transform var(--dur-medium) var(--proto-ease),opacity var(--dur-fast) var(--proto-ease); }
.skill-toggle::after { transform:translate(-50%,-50%) rotate(90deg); }
.skill-row[open] .skill-toggle::after { transform:translate(-50%,-50%) rotate(0); opacity:0; }
.skill-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-medium) var(--ease-entrance); }
.skill-row:not([open])>.skill-panel { display:grid; }
.skill-row[open]>.skill-panel { grid-template-rows:1fr; }
.skill-panel-inner { display:grid; min-height:0; overflow:hidden; grid-template-columns:minmax(104px,150px) minmax(0,1fr); gap:clamp(18px,3vw,36px); align-items:start; padding:0 38px 0 56px; opacity:0; transform:translateY(-9px); transition:padding var(--dur-medium) var(--ease-entrance),opacity var(--dur-fast) ease,transform var(--dur-medium) var(--proto-ease); }
.skill-row[open] .skill-panel-inner { padding-bottom:30px; opacity:1; transform:none; }
.skill-image { display:block; width:100%; aspect-ratio:1.12; object-fit:cover; border-radius:7px; }
.skill-copy p { max-width:43ch; color:#bdbdb8; font-size:13px; line-height:1.6; }
.skill-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.skill-tag { display:inline-flex; align-items:center; min-height:27px; padding:5px 10px; border:1px solid #fff; border-radius:999px; background:#fff; color:#171717; font-size:10px; line-height:1.15; }

.experience-section { background:var(--proto-paper); }
.experience-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(40px,8vw,120px); }
.experience-heading h2 { max-width:10ch; margin-top:24px; font-size:clamp(42px,5.8vw,78px); line-height:1.02; font-weight:600; letter-spacing:-.07em; }
.experience-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.experience-item { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:244px; gap:0; padding:20px; border:1px solid rgba(23,23,23,.09); border-radius:10px; background:#fff; }
.experience-period { display:inline-flex; align-items:center; min-height:24px; padding:5px 8px; border-radius:999px; background:#f0f0ee; color:#5c5c58; font-size:8px; letter-spacing:.08em; }
.experience-item>div:last-child { display:flex; flex-direction:column; align-items:flex-start; height:100%; margin-top:23px; }
.experience-item h3 { font-size:clamp(17px,1.65vw,22px); font-weight:600; letter-spacing:-.07em; line-height:1.1; }
.experience-company { margin-top:6px; font-size:12px; }
.experience-description { max-width:35ch; margin-top:auto; padding-top:16px; color:var(--proto-muted); font-size:11px; line-height:1.55; }
.numbers-section { padding:clamp(50px,7vw,96px) 0; background:#e9e9e6; }
.numbers-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.numbers-grid>div { display:flex; flex-direction:column; padding:0 clamp(14px,4vw,58px); border-left:1px solid var(--proto-line); }
.numbers-grid>div:first-child { padding-left:0; border:0; }
.numbers-grid strong { font:400 clamp(72px,13vw,166px)/.9 Arial,"Helvetica Neue",sans-serif; letter-spacing:-.07em; }
.numbers-grid span { max-width:18ch; margin-top:17px; color:#5c5c58; font-size:12px; line-height:1.45; }

.contact-section { background:var(--proto-paper); }
.contact-layout { display:grid; grid-template-columns:1fr minmax(320px,.75fr); gap:clamp(44px,10vw,150px); align-items:start; }
.contact-copy .eyebrow { margin-bottom:28px; }
.contact-title { max-width:9ch; font-size:clamp(52px,8vw,108px); line-height:.96; }
.contact-copy>p:not(.eyebrow) { max-width:40ch; margin-top:25px; color:var(--proto-muted); font-size:15px; line-height:1.6; }
.contact-email,.contact-social { display:flex; width:max-content; max-width:100%; align-items:center; gap:18px; border-bottom:1px solid var(--proto-line); padding:14px 0 10px; font-size:13px; }
.contact-email { margin-top:20px; }
.contact-form { display:grid; gap:18px; padding-top:4px; }
.form-title { margin-bottom:2px; font-size:19px; letter-spacing:-.03em; }
.contact-form label { display:grid; gap:7px; font-size:11px; color:#555550; }
.contact-form input,.contact-form textarea { width:100%; min-height:44px; border:0; border-bottom:1px solid #b9b9b3; border-radius:0; padding:8px 0; background:transparent; color:var(--proto-ink); font:400 15px/1.5 var(--sans); resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { outline:0; border-color:#171717; box-shadow:0 1px #171717; }
.send-button { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:0 16px; margin-top:4px; background:#171717; color:#fff; font-size:12px; transition:background var(--dur-fast),color var(--dur-fast); }
.send-button:hover { background:#deded9; color:#171717; }
.form-note { color:var(--proto-muted); font-size:10px; line-height:1.5; }
.prototype-footer { background:#171717; color:#f4f4f0; padding:clamp(48px,8vw,108px) 0 24px; }
.footer-main { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-bottom:clamp(36px,6vw,78px); }
.footer-eyebrow { margin-bottom:17px; color:#b7b7b1; font-size:10px; letter-spacing:.06em; }
.footer-wordmark { display:block; font-size:clamp(42px,8vw,112px); font-weight:600; letter-spacing:-.07em; line-height:.9; white-space:nowrap; }
.footer-wordmark span { color:#9a9a94; }
.footer-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(100%,360px); min-height:64px; padding:12px 15px 12px 19px; border-radius:5px; background:#fff; color:#171717; font-size:13px; font-weight:600; letter-spacing:-.025em; }
.footer-cta b { display:grid; width:34px; height:34px; place-items:center; flex:none; border-radius:50%; background:#171717; color:#fff; font-size:17px; font-weight:400; transition:transform var(--dur-fast) var(--proto-ease); }
.footer-cta:hover b { transform:translate(2px,-2px); }
.footer-bottom { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); }
.footer-bottom nav { display:flex; align-items:center; gap:clamp(18px,3vw,42px); }
.footer-bottom a,.footer-bottom small { color:#b7b7b1; font-size:10px; }
.footer-bottom a:hover,.footer-bottom a:focus-visible { color:#fff; }
.back-top span { margin-right:5px; }
.prototype-motion [data-reveal] { opacity:0; transform:translateY(18px); filter:blur(3px); }
.prototype-motion [data-reveal].is-visible { opacity:1; transform:none; filter:none; transition:opacity var(--dur-slow) var(--proto-ease),transform var(--dur-slow) var(--proto-ease),filter var(--dur-slow) var(--proto-ease); }
.project-card.reveal-pending { opacity:1; transform:none; }

@media(max-width:900px) {
  .about-layout,.skills-layout { grid-template-columns:.72fr 1.28fr; gap:36px; }
  .experience-layout { grid-template-columns:1fr; gap:34px; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .back-top { justify-self:start; }
  .footer-inner small { justify-self:end; }
}
@media(max-width:700px) {
  :root { --proto-gutter:22px; --proto-space:92px; }
  .brands-section { padding-top:26px; }
  .brands-heading { align-items:center; flex-direction:column; gap:8px; text-align:center; }
  .brands-note { text-align:center; }
  /* No celular a vitrine conserva a lógica da referência: uma faixa contínua,
     com as logos passando dentro de uma janela recortada. */
  .brand-window::before,.brand-window::after { display:block; width:12vw; }
  .brand-track { width:max-content; box-sizing:border-box; min-height:70px; display:flex; align-items:center; gap:42px; padding:10px 12vw; animation:brand-drift-mobile 30s var(--ease-drift) infinite; }
  .brand-track li,.brand-track a { width:clamp(96px,25vw,132px); min-width:0; }
  .brand-track li { height:50px; }
  .brand-track .brand-negative a { padding-inline:0; }
  .brand-track img { width:100%; max-width:100%; max-height:33px; }
  .brand-hint { justify-content:center; gap:12px; margin-top:14px; }
  .projects-heading { display:block; margin-bottom:30px; }
  .projects-title { max-width:10ch; margin-top:17px; font-size:clamp(46px,13vw,68px); }
  .projects-intro { margin-top:20px; font-size:14px; }
  .projects-grid { grid-template-columns:1fr; gap:16px; }
  .project-card,.project-feature,.project-wide { grid-column:auto; border-radius:3px; }
  .project-card { width:100%; max-width:520px; margin-inline:auto; border-radius:10px; }
  .project-entry-head { min-height:48px; gap:9px; padding:9px 12px; }
  .project-name { font-size:15px; }
  .project-number { font-size:8px; }
  .project-foot { margin-top:20px; text-align:left; line-height:1.5; }
  .about-layout { display:flex; flex-direction:column; align-items:stretch; gap:34px; }
  .about-photo { max-width:220px; width:min(100%,220px); margin-inline:auto; }
  .about-title { font-size:clamp(42px,11vw,58px); }
  .about-lead { margin-top:23px; font-size:19px; }
  .about-body { font-size:14px; }
  .skills-layout,.experience-layout { display:block; }
  .skills-heading { position:static; margin-bottom:38px; }
  .skills-heading h2,.experience-heading h2 { max-width:12ch; font-size:clamp(43px,11vw,62px); }
  .skills-heading>p:last-child { font-size:13px; }
  .skill-row summary { grid-template-columns:30px 1fr 20px; gap:8px; min-height:76px; }
  .skill-name { font-size:19px; }
  .skill-panel-inner { grid-template-columns:88px minmax(0,1fr); gap:14px; padding-inline:38px 4px; }
  .skill-row[open] .skill-panel-inner { padding-bottom:23px; }
  .skill-image { aspect-ratio:1; border-radius:5px; }
  .skill-copy p { font-size:12px; }
  .skill-tags { gap:6px; margin-top:12px; }
  .skill-tag { min-height:25px; padding:5px 8px; font-size:9px; }
  .experience-heading { margin-bottom:28px; }
  .experience-list { grid-template-columns:1fr; gap:9px; }
  .experience-item { min-height:0; padding:18px; }
  .experience-item>div:last-child { margin-top:16px; }
  .experience-period { font-size:8px; }
  .experience-description { margin-top:12px; padding-top:0; }
  .numbers-grid { grid-template-columns:1fr; gap:27px; }
  .numbers-grid>div,.numbers-grid>div:first-child { display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; border:0; text-align:center; }
  .numbers-grid strong { font-size:96px; }
  .numbers-grid span { margin:0; max-width:24ch; font-size:12px; }
  .contact-layout { grid-template-columns:1fr; gap:44px; }
  .contact-title { font-size:clamp(54px,14vw,76px); }
  .contact-copy>p:not(.eyebrow) { font-size:14px; }
  .contact-form { gap:15px; }
  .footer-main { align-items:flex-start; flex-direction:column; gap:30px; }
  .footer-wordmark { font-size:clamp(40px,11vw,62px); }
  .footer-cta { width:100%; min-height:58px; }
  .footer-bottom { grid-template-columns:1fr; gap:16px; }
  .footer-bottom nav { justify-content:space-between; flex-wrap:wrap; gap:14px 20px; }
}
@media(max-width:380px) {
  :root { --proto-gutter:18px; }
  .project-name { font-size:14px; }
  .project-entry-head { gap:7px; padding-inline:9px; }
  .project-number { font-size:7px; letter-spacing:.04em; }
  .numbers-grid strong { font-size:82px; }
}
@media(max-width:700px) {
  @keyframes brand-drift-mobile { to { transform:translateX(-50%); } }
}
@media(prefers-reduced-motion:reduce) {
  .brand-track { animation:none!important; }
  [data-reveal],[data-reveal].is-visible { opacity:1; transform:none; filter:none; transition:none; }
  .project-image > img,.brand-track a,.project-card { transition:none; }
  .project-image::after { display:none; }
  .project-image::before,.skill-panel,.skill-toggle::before,.skill-toggle::after { transition:none; }
  .project-card:hover,.project-card:focus-visible { transform:none; box-shadow:none; }
}


/* A arte da hero vem do SVG do Paulo: preservar ruído, escala e composição. */
.hero.hero-art { padding:0; overflow:hidden; background:var(--proto-paper); line-height:0; }
.hero-art-frame picture { display:block; }
.hero-art-frame img { display:block; width:100%; height:auto; }

/* A faixa de identificação respira 10px antes da imagem, como na referência.
   No hover, o grão real do SVG se soma ao glaze para trazer a marca à frente. */
.project-card { overflow:visible; background:transparent; box-shadow:none; }
.project-entry-head { margin-bottom:10px; border-radius:9px; overflow:hidden; }
.project-image { border-radius:10px; }
.project-image::before {
  background-image:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.28),rgba(255,255,255,.08) 56%,rgba(12,12,12,.25)),url('/img/reference/grain.png');
  background-size:cover, 128px 128px; background-blend-mode:normal,soft-light;
  opacity:0; transition:opacity var(--dur-medium) var(--proto-ease);
}
@media(hover:hover) and (pointer:fine) {
  .project-card:hover .project-image::before { opacity:.22; }
}
.project-card:focus-visible .project-image::before { opacity:.22; }
@media(max-width:700px) {
  /* Moldura de papel: laterais menores, topo maior (o cabeçalho fica acima). */
  .hero.hero-art { --hero-pad-x:14px; padding:20px var(--hero-pad-x) 26px; }
  .project-entry-head { margin-bottom:10px; }
}
.hero-art-frame { position:relative; width:100%; }
.hero-copy { position:absolute; z-index:2; inset:0; color:#fff; line-height:normal; }
.hero-copy h1 { position:relative; width:100%; height:100%; margin:0; font-family:"Helvetica World","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:clamp(48px,8.5vw,172px); font-weight:600; letter-spacing:-.07em; line-height:.9; }  /* caixa de título, como a referência — não uppercase */
.hero-word { position:absolute; display:block; white-space:nowrap; }
/* Composição da referência: as três entregas empilhadas com o recuo próprio
   do SVG — Interfaces avança à direita e Campanhas fecha à esquerda. */
.hero-word-brands { left:34.7%; top:27%; }
.hero-word-interfaces { left:41.6%; top:40%; }
.hero-word-campaigns { left:24.1%; top:53.5%; }
@media(max-width:700px) {
  /* Arte retrato (img/hero-mobile.svg) preenche a moldura; cantos arredondados. */
  .hero-art-frame { --panel-w:calc(100vw - 14px*2); aspect-ratio:901/1539;
    border-radius:22px; overflow:hidden; }
  .hero-art-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero-copy { inset:0; }
  /* Posições medidas por getBBox() nas palavras do SVG do Paulo e convertidas
     pela métrica real da fonte (cap-height 0,714em, line-height 1, tracking
     -.07em já no h1). Não ajustar no olho: a composição é a dele. */
  .hero-copy h1 { font-size:calc(var(--panel-w) * 0.12544); line-height:1; }
  .hero-word { left:auto; right:auto; width:auto; text-align:left; transform:none; }
  .hero-word-brands { left:26.585%; top:32.241%; }
  .hero-word-interfaces { left:36.695%; top:38.756%; }
  .hero-word-campaigns { left:12.933%; top:45.809%; }

  /* O retrato herdava uma grade de duas colunas do layout anterior. */
  .about-layout { align-items:center; text-align:center; }
  .about-photo.about-portrait {
    display:flex; flex-direction:column; align-items:center; gap:0;
    width:min(100%,220px); max-width:220px; margin:0 auto;
  }
  .about-photo.about-portrait img {
    display:block; width:100%; max-width:none; height:auto;
    aspect-ratio:4/5; object-fit:contain;
  }
  .about-photo .portrait-caption {
    width:100%; margin-top:10px; padding-top:10px;
    border-top:1px solid rgba(23,23,23,.14); text-align:center;
  }
  .about-copy { width:100%; text-align:center; }
  .about-copy>.eyebrow { text-align:center; }
  .about-copy .about-title,
  .about-copy .about-lead,
  .about-copy .about-body { margin-left:auto; margin-right:auto; text-align:center; }
  .about-copy .quiet-link { margin-left:auto; margin-right:auto; }
}

/* ---- revelação tipográfica ----
   A referência revela título subindo por trás de uma máscara, não com fade.
   `clip-path` entrega isso sem precisar quebrar a frase em <span> por linha —
   e o pequeno sangramento vertical evita cortar acento e descida de letra. */
.prototype-motion [data-reveal="mask"] { opacity:1; filter:none; transform:translateY(.42em); clip-path:inset(0 0 100% 0); }
.prototype-motion [data-reveal="mask"].is-visible { transform:none; clip-path:inset(-.18em 0 -.18em 0);
  transition:transform var(--dur-slow) var(--ease-entrance),clip-path var(--dur-slow) var(--ease-entrance); }
@media(prefers-reduced-motion:reduce) {
  .prototype-motion [data-reveal="mask"],
  .prototype-motion [data-reveal="mask"].is-visible { transform:none; clip-path:none; transition:none; }
}

/* ---- profundidade no hover ----
   Medido na referência (fabrica.framer.media): arte scale(1.13) + blur(7px),
   véu escuro .15→.2, logo scale(.8). Lá os planos se separam porque arte e logo
   são camadas distintas. Nos nossos cartões a logo vem embutida no SVG, então o
   blur levaria a marca junto e ela viraria mancha — inaceitável num portfólio de
   designer. Até existir arte sem a logo, a profundidade vem de escala mais
   escurecimento, que empurram o fundo sem atacar a leitura da marca. */

/* ---- a marca sobre a arte ----
   O Paulo pediu sem placa: só a logo sobre o cartão. Isso devolve o problema
   de legibilidade que a placa resolvia, então medi a luminância da arte onde a
   logo cai e decidi por cartão — Reformax 86 e Evolue 114 pedem negativo,
   Syntax 197 é clara demais para a versão branca e recebe o positivo, Easy 231
   e Flex 155 ficam na cor original. A sombra suave levanta a marca da foto sem
   caixa em volta.

   `--lh` é a altura da marca sobre a arte, afinada por marca: sem isso a
   Reformax, que é só palavra e muito larga, pesaria o dobro da Evolue ao lado.

   PENDENTE: a Evolue é de duas cores e o negativo por filtro apaga o laranja.
   O certo é a versão reversa oficial — pedida ao Paulo. */
.project-brand { position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%;
  width:var(--bw,30%); pointer-events:none;
  transition:transform var(--dur-slow) var(--ease-float); }
/* Largura, não altura: altura em % dentro de pai de altura automática resolve
   como `auto` e a marca sai do tamanho que o arquivo tiver. A largura de cada
   marca é calculada da proporção dela para que todas cheguem à mesma altura
   ótica — a Reformax é quatro vezes mais larga que alta, a Easy menos de três. */
.project-brand img { display:block; width:100%; height:auto;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.42)); }
.project-brand.to-white img { filter:brightness(0) invert(1) drop-shadow(0 3px 14px rgba(0,0,0,.5)); }
.project-brand.to-ink img { filter:brightness(0) drop-shadow(0 3px 14px rgba(255,255,255,.55)); }
/* Evolue mantém as duas cores oficiais (navy + laranja) diretamente sobre a
   arte, sem placa — a caixa clara destoava dos demais cartões. A sombra padrão
   de .project-brand img separa a marca da foto. Uma versão reversa branca, se
   desejada para uniformizar, depende da arte oficial. */
.project-card:focus-visible .project-brand,
.project-card:hover .project-brand { transform:scale(.94); }
@media(prefers-reduced-motion:reduce) {
  .project-brand { transition:none; }
  .project-card:hover .project-image > img,
  .project-card:focus-visible .project-image > img { filter:none; transform:none; }
}