/* gabrielbrina.com.br — site principal. Tokens em tokens.css (paleta Manto). */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--manto);color:var(--tinta);font-family:var(--texto);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--bordo)}
::selection{background:var(--acafrao);color:var(--tinta)}
:focus-visible{outline:3px solid var(--bordo);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--marfim);padding:10px 14px;z-index:10;font-family:var(--display)}
.skip-link:focus{left:8px}
.eyebrow,.section-index,.lab-label,.visual-top,.case-visual-label,.case-meta span,.case-question span,.takeaway span,.next-case>span:first-child,.experience>span,.proofs-note,.work-note,.language-note{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.eyebrow{margin:0 0 16px}

/* larguras */
.site-header,.proofs,.work-section,.approach-section,.lab-section,.about-section,.contact-section,.site-footer,.case-heading,.case-visual,.case-meta,.case-content,.next-case,.profile-heading,.profile-body{width:min(var(--max),calc(100% - 2*var(--gutter)));margin-inline:auto}

/* header */
.site-header{display:flex;align-items:center;gap:28px;min-height:84px;border-bottom:1px solid var(--linha)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--bordo);margin-right:auto}
.brand .gb{width:44px;height:auto;overflow:visible}
.brand .wordmark{height:19px;width:auto;color:var(--bordo)}
.site-header nav{display:flex;gap:26px;font-family:var(--display);font-size:16px;font-weight:500}
.site-header nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1.5px no-repeat;transition:background-size .3s var(--ease-out),color .2s}
.site-header nav a:hover{color:var(--bordo);background-size:100% 1.5px}
.lang-switch{display:flex;gap:2px;border-left:1px solid var(--linha);padding-left:20px;font-family:var(--mono);font-size:12px}
.lang-switch a{text-decoration:none;padding:6px 7px;border-radius:4px;color:var(--tinta-2)}
.lang-switch a:hover{color:var(--bordo)}
.lang-switch a[aria-current]{color:var(--marfim);background:var(--bordo)}

/* botões e links */
.button{display:inline-flex;align-items:center;gap:18px;padding:15px 22px;border-radius:999px;background:var(--marfim);color:var(--bordo);font-family:var(--display);font-size:16px;font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease-out),background .2s}
.button:hover{transform:translateY(-2px)}
.text-link,.quiet-link{font-family:var(--display);font-weight:500;font-size:16px;text-decoration:none;display:inline-flex;gap:8px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;transition:background-size .35s var(--ease-out)}
.text-link:hover,.quiet-link:hover{background-size:0 1.5px;background-position:100% 100%}

/* hero: campo bordô */
.hero{--pingo:var(--acafrao);background-color:var(--noite);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px;color:var(--marfim);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(56px,8vw,112px) max(var(--gutter),calc((100% - var(--max))/2));min-height:min(78vh,720px)}
.hero .eyebrow{color:#9AA0AB}
.hero .button{background:var(--bordo);color:var(--marfim);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hero .button:hover{background:#8E2534}
.hero h1{font-size:clamp(44px,6.4vw,88px);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin-bottom:28px}
.hero h1 em{color:var(--acafrao)}
.hero-intro{font-size:clamp(19px,1.6vw,22px);max-width:560px;color:#D5D8DE;margin-bottom:34px}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.hero .quiet-link{color:var(--marfim)}
.hero-where{display:flex;gap:18px;flex-wrap:wrap;margin:46px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9AA0AB}
.hero-where span+span{padding-left:18px;border-left:1px solid #3A3E47}
.hero-right{display:flex;justify-content:center}
.hero-right>*{width:100%;max-width:420px}

/* provas */
.proofs{padding:56px 0 40px;border-bottom:1px solid var(--linha)}
.proofs ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.proofs li{border-top:2px solid var(--tinta);padding-top:16px}
.proof-num{display:block;font-family:var(--display);font-weight:600;font-size:clamp(40px,4.4vw,60px);line-height:1;color:var(--tinta);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.proof-text{display:block;font-size:16px;line-height:1.45;color:var(--tinta-2);max-width:250px}
.proofs-note{margin:28px 0 0;text-transform:none;letter-spacing:0;font-size:12px}

/* cabeçalhos de seção */
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.section-heading h2,.approach-intro h2,.about-heading h2{font-size:clamp(36px,4.6vw,60px)}
.section-heading>p{max-width:330px;font-size:16px;color:var(--tinta-2);margin:0}

/* trabalho */
.work-section{padding:96px 0 56px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
.work-item:nth-child(even){margin-top:64px}
.work-link{display:block;text-decoration:none;color:inherit}
.work-visual{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--art-bg);color:var(--art-fg);padding:18px 20px 0;aspect-ratio:600/420}
.visual-top{display:flex;justify-content:space-between;color:inherit;opacity:.8;font-size:11px}
.work-visual .project-art{width:100%;height:auto;margin-top:6px;transition:transform .6s var(--ease-out)}
.work-link:hover .project-art{transform:scale(1.03)}
.visual-arrow{position:absolute;right:16px;bottom:16px;width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:15px;transition:transform .3s var(--ease-out),background .3s}
.work-link:hover .visual-arrow{transform:rotate(45deg)}
.work-caption{padding-top:22px}
.work-caption .eyebrow{margin-bottom:10px}
.work-caption h3{font-size:clamp(24px,2.3vw,30px);margin-bottom:12px;transition:color .2s}
.work-link:hover h3{color:var(--bordo)}
.work-caption>p:not(.eyebrow){font-size:16px;color:var(--tinta-2);margin-bottom:16px}
.work-note{margin-top:44px;text-transform:none;letter-spacing:0}

/* temas dos casos (o desenho lê --art-*) */
.theme-bordo{--art-bg:var(--bordo);--art-fg:var(--marfim);--art-accent:var(--acafrao);--pingo:var(--acafrao)}
.theme-grafite{--art-bg:var(--areia);--art-fg:var(--tinta);--art-accent:var(--bordo);--pingo:var(--ocre)}
.theme-tinta{--art-bg:var(--tinta);--art-fg:var(--manto);--art-accent:var(--acafrao);--pingo:var(--acafrao)}
.theme-azul{--art-bg:var(--azul-escuro);--art-fg:var(--marfim);--art-accent:var(--acafrao);--pingo:var(--acafrao)}
.theme-lab{--art-bg:var(--marfim);border:1px solid var(--linha);--art-fg:var(--tinta);--art-accent:var(--bordo);--pingo:var(--ocre)}

/* como trabalho */
.approach-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;padding:88px 0;border-top:1px solid var(--linha)}
.approach-steps article{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--linha)}
.approach-steps article:first-child{padding-top:0}
.approach-steps span{font-family:var(--mono);font-size:13px;color:var(--bordo);padding-top:6px}
.approach-steps h3{font-size:24px;margin-bottom:8px}
.approach-steps p{font-size:17px;color:var(--tinta-2);margin:0}

/* laboratório */
.lab-section{padding:88px 0;border-top:1px solid var(--linha)}
.lab-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px}
.lab-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;background:var(--marfim);border:1px solid var(--linha);border-radius:var(--raio);padding:26px;min-height:300px;transition:transform .3s var(--ease-out),border-color .3s}
.lab-card:hover{transform:translateY(-4px);border-color:var(--bordo)}
.lab-card h3{font-size:clamp(24px,2.2vw,30px);margin-top:auto}
.lab-card p{font-size:16px;color:var(--tinta-2);margin:0}
.lab-card .text-link{align-self:flex-start;margin-top:8px}
.lab-brand{--pingo:var(--acafrao);background:var(--noite);color:var(--marfim);border-color:var(--noite)}
.lab-brand .lab-label{color:#9AA0AB}
.lab-brand p{color:#C9CDD4}
.lab-brand h3::after{content:'';display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--pingo);margin-left:.08em;vertical-align:.05em}

/* sobre */
.about-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;padding:88px 0;border-top:1px solid var(--linha)}
.about-heading h2{margin-bottom:28px}
.large-copy{font-size:clamp(21px,1.9vw,26px);line-height:1.45}
.about-copy p:not(.large-copy){color:var(--tinta-2)}
.language-note{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:20px;border-top:1px solid var(--linha);text-transform:none;letter-spacing:0}

/* contato */
.contact-section{--pingo:var(--acafrao);background:var(--noite);color:var(--marfim);border-radius:var(--raio);padding:clamp(40px,6vw,80px);margin-bottom:64px}
.contact-section .eyebrow{color:#9AA0AB}
.contact-main h2{font-size:clamp(44px,6.5vw,92px);margin-bottom:36px}
.contact-main h2 em{color:var(--acafrao)}
.contact-email{display:inline-flex;gap:12px;font-family:var(--display);font-size:clamp(22px,2.6vw,34px);font-weight:500;text-decoration:none;border-bottom:2px solid var(--acafrao);padding-bottom:4px;margin-bottom:34px}
.contact-links{display:flex;flex-wrap:wrap;gap:28px;font-family:var(--display);font-size:16px}
.contact-links a{text-decoration:none;border-bottom:1px solid #4A4F5A;padding-bottom:2px}
.contact-links a:hover{border-color:var(--acafrao)}

/* rodapé */
.site-footer{display:flex;align-items:center;gap:24px;justify-content:space-between;border-top:1px solid var(--linha);padding:28px 0 44px;font-family:var(--display);font-size:15px;color:var(--tinta-2)}
.footer-brand{color:var(--bordo)}
.footer-brand .gb{width:52px;height:auto}
.site-footer>a:last-child{text-decoration:none}

/* páginas de caso e nota */
.case-heading{padding:44px 0 48px}
.back-link{display:inline-block;font-family:var(--display);font-size:15px;text-decoration:none;color:var(--tinta-2);margin-bottom:44px}
.back-link:hover{color:var(--bordo)}
.case-heading .eyebrow{color:var(--bordo)}
.case-heading h1{font-size:clamp(40px,5.6vw,76px);max-width:980px;margin-bottom:28px}
.case-intro{font-size:clamp(19px,1.7vw,23px);max-width:780px;color:var(--tinta-2)}
.case-question{display:grid;grid-template-columns:170px 1fr;align-items:baseline;gap:22px;border-top:1px solid var(--linha);margin-top:40px;padding-top:20px;max-width:980px}
.case-question span{color:var(--bordo)}
.case-question p{font-style:italic;font-size:clamp(22px,2.4vw,32px);line-height:1.3;margin:0}
.case-visual{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--art-bg);color:var(--art-fg);padding:48px clamp(16px,6vw,96px) 24px}
.case-visual .project-art{width:100%;max-width:820px;height:auto;margin:0 auto}
.case-visual-label{position:absolute;top:20px;left:24px;color:inherit;opacity:.8}
.case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:32px 0;border-bottom:1px solid var(--linha)}
.case-meta p{font-size:16px;margin:8px 0 0}
.case-content{padding:16px 0 64px}
.case-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px;padding:44px 0;border-bottom:1px solid var(--linha)}
.case-section h2{font-size:clamp(26px,2.6vw,36px);margin-bottom:20px}
.case-section p:not(.section-index){color:var(--tinta-2);max-width:680px}
.takeaway{position:relative;padding:44px 0 0 calc(38.5% + 32px)}
.takeaway::before{content:'';position:absolute;left:calc(38.5% - 6px);top:58px;width:14px;height:14px;border-radius:50%;background:var(--pingo)}
.takeaway span{color:var(--bordo)}
.takeaway p{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.3;margin:14px 0 0}
.next-case{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px 24px;text-decoration:none;border-top:2px solid var(--tinta);padding:28px 0 56px}
.next-case>span:first-child{grid-column:1/-1}
.next-case h2{font-size:clamp(28px,3.4vw,44px)}
.next-case>span:last-child{font-size:40px;color:var(--bordo);transition:transform .3s var(--ease-out)}
.next-case:hover>span:last-child{transform:translate(4px,-4px)}
.case-page .contact-section{margin-top:24px}

/* perfil */
.profile-heading{padding:56px 0 48px;border-bottom:1px solid var(--linha)}
.profile-heading h1{font-size:clamp(56px,8vw,112px);margin-bottom:24px}
.profile-actions{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:32px}
.profile-actions .button{background:var(--bordo);color:var(--marfim)}
.print-button{background:none;border:0;padding:0 0 3px;font-family:var(--display);font-size:16px;font-weight:500;cursor:pointer;color:var(--tinta);border-bottom:1.5px solid currentColor}
.print-contact{display:none}
.profile-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;padding:44px 0;border-bottom:1px solid var(--linha)}
.profile-section h2{font-size:clamp(28px,3vw,40px)}
.profile-section p{color:var(--tinta-2)}
.experience{margin-bottom:28px}
.experience>span{display:block;margin-bottom:6px}
.experience h3{font-size:26px;margin-bottom:6px}
.experience-role{font-family:var(--display);font-weight:500;color:var(--bordo)!important;margin-bottom:6px}

/* responsivo */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-right{order:-1;justify-content:flex-start}
  .hero-right>*{max-width:200px}
  .proofs ul{grid-template-columns:repeat(2,1fr)}
  .lab-grid{grid-template-columns:1fr}
  .lab-card{min-height:0}
  .lab-card h3{margin-top:12px}
  .approach-section,.about-section{grid-template-columns:1fr;gap:32px}
}
@media(max-width:720px){
  body{font-size:17px}
  .site-header{flex-wrap:wrap;gap:4px 18px;padding:12px 0}
  .brand .wordmark{display:none}
  .site-header nav{gap:16px;font-size:15px;order:3;width:100%}
  .site-header nav a:nth-child(2){display:none}
  .lang-switch{border:0;padding:0}
  .section-heading{display:block}
  .section-heading>p{margin-top:16px}
  .work-grid{grid-template-columns:1fr;gap:48px}
  .work-item:nth-child(even){margin-top:0}
  .case-question,.case-section,.profile-section{grid-template-columns:1fr;gap:12px}
  .case-meta{grid-template-columns:1fr;gap:18px}
  .takeaway{padding-left:32px}
  .takeaway::before{left:0}
  .site-footer{flex-wrap:wrap}
}
@media(max-width:420px){
  .proofs ul{gap:22px 16px}
  .proof-text{font-size:14px}
  .hero-where span+span{padding-left:0;border:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
  @page{size:A4;margin:14mm 17mm}
  body{background:white;color:#111;font-size:10pt;line-height:1.4}
  .site-header,.site-footer,.skip-link,.profile-actions,.back-link{display:none!important}
  .profile-heading,.profile-body{width:100%;margin:0;padding:0}
  .profile-heading{padding-bottom:16px}.profile-heading .eyebrow{font-size:8pt;margin-bottom:12px;color:#333}
  .profile-heading h1{font-size:34pt;margin-bottom:14px}.profile-heading h1 em{color:#7B1E2B}
  .profile-heading .case-intro{font-size:11pt;line-height:1.4}
  .print-contact{display:block;font-size:8pt;margin:12px 0 0;line-height:1.5}
  .profile-section{display:grid;grid-template-columns:125px 1fr;gap:20px;padding:16px 0;break-inside:avoid}
  .profile-section h2{font-size:16pt;margin:0}.profile-section p{font-size:9pt;line-height:1.45;margin:0 0 8px;color:#222}
  .experience{margin-bottom:13px}.experience>span{font-size:8pt;margin-bottom:4px;color:#444}
  .experience h3{font-size:12pt;margin-bottom:5px}.experience .experience-role{font-size:9pt;margin-bottom:6px}
  .profile-section>div>a{font-size:9pt}.profile-section:last-child{display:none}
  a{color:#111;text-decoration:none}.profile-page{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}