/* =========================================================================
   miguelmodesto.com — sistema visual
   Medidas na escala do artboard de 1920: calc(N * var(--px)).
   ========================================================================= */

/* ---------- fontes (alojadas no site) ---------- */
@font-face{font-family:'Onest'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/onest-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/onest-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/onest-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/onest-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Onest'; font-style:normal; font-weight:900; font-display:swap; src:url(../fonts/onest-latin-900-normal.woff2) format('woff2')}
/* Fraunces: só as letras do título do blog, no tamanho óptico de 100 */
@font-face{font-family:'Fraunces MM'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/fraunces-italic-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces MM'; font-style:italic; font-weight:700; font-display:swap; src:url(../fonts/fraunces-italic-700.woff2) format('woff2')}

/* ---------- tokens ---------- */
:root{
  /* --px e --off são afinados pelo site.js; estes valores servem até lá */
  --px: calc(min(100vw, 1920px) / 1920);
  --off: max(0px, calc((100vw - 1920px) / 2));
  --font: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --page:#FFFFFF; --grid:#EDEDED; --panel:#FFFFFF; --ink:#000000; --nav:#4B4B4B;
  --blue:#1E23FF; --ph:#DBDBDB; --caption:#767676;
  --ease: cubic-bezier(.2,.6,.2,1);
  --bt-root: max(calc(460 * var(--px)), calc(50vh - 20 * var(--px)));
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); overflow-x:hidden}
body{margin:0; background-color:var(--page); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect x='5' y='5' width='70' height='70' fill='none' stroke='%23EDEDED' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size:calc(80 * var(--px)) calc(80 * var(--px)); background-position:var(--off) calc(60 * var(--px))}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
img,video{display:block; max-width:100%}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.panel p,.panel h1,.panel h2,.panel h3,.panel li{text-wrap:pretty}

/* ---------- cursor: + fino azul; cinzento ao carregar; branco sobre azul ---------- */
html, a, button, .card, summary{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%231E23FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 12 12, auto; cursor:-webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%231E23FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%231E23FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 2x) 12 12, auto}
.foot, .foot *, .logo, .logo *, .sheet, .sheet *, .menu-btn[aria-expanded="true"], .menu-btn[aria-expanded="true"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 12 12, auto; cursor:-webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 2x) 12 12, auto}
html.pressing, html.pressing *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%234B4B4B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 12 12, auto !important; cursor:-webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%234B4B4B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%234B4B4B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 2x) 12 12, auto !important}
html.pressing .foot, html.pressing .foot *, html.pressing .logo, html.pressing .logo *, html.pressing .sheet, html.pressing .sheet *, html.pressing .menu-btn[aria-expanded="true"], html.pressing .menu-btn[aria-expanded="true"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='%23C4C4C4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 12 12, auto !important}
input, textarea, html.pressing input, html.pressing textarea{cursor:text !important}

/* ---------- moldura: grelha (mais lenta) · conteúdo · moldura (parada) ---------- */
.wrap{position:relative; z-index:1; background:inherit; background-position:var(--off) calc(60 * var(--px) + var(--gy, 0px))}
.topbar{height:calc(20 * var(--px)); background:var(--nav)}
.is-home .topbar,.is-proj .topbar{display:none}
.logo{position:fixed; z-index:30; left:calc(var(--off) + 190 * var(--px)); top:calc(170 * var(--px) + env(safe-area-inset-top,0px)); width:calc(100 * var(--px)); height:calc(100 * var(--px)); display:block;
  transition:transform .12s ease-out, opacity .25s ease; view-transition-name:mm-logo}
.logo img{width:100%; height:100%}
.logo:active{transform:scale(.96)}
.logo.on-blue{opacity:0; pointer-events:none}
.nav{position:fixed; z-index:30; left:calc(var(--off) + 1654 * var(--px)); top:env(safe-area-inset-top,0px); width:calc(266 * var(--px)); height:100vh; pointer-events:none; view-transition-name:mm-nav}
.nav > *{pointer-events:auto}
.nav a{position:absolute; left:0; white-space:nowrap; line-height:1}
.nav .big{font-weight:900; font-size:max(17px, calc(40 * var(--px))); color:var(--nav); letter-spacing:.005em; transition:color 80ms linear, transform .12s ease-out, opacity .25s ease; display:inline-block}
.nav .big:hover,.nav .big[aria-current="page"]{color:var(--blue)}
.nav .big:active{transform:scale(.97)}
.nav .w{top:calc(176 * var(--px))} .nav .i{top:calc(251 * var(--px))} .nav .t{top:calc(333 * var(--px))} .nav .b{top:var(--bt-root)}
.nav .big.on-blue{opacity:0; pointer-events:none}
/* sobre imagem em ecrã inteiro: branco; volta a cinzento palavra a palavra ao passar para o painel */
.nav .big.on-img,.nav .big.on-img[aria-current="page"]{color:#fff; text-shadow:0 0 18px rgba(0,0,0,.18)}
.nav .big.on-img:hover{opacity:.75}
.menu-btn,.sheet{display:none}

/* ---------- painel ---------- */
.panel{position:relative; z-index:1; background:var(--panel); margin:calc(125 * var(--px)) 0 0 calc(var(--off) + 245 * var(--px)); width:calc(1430 * var(--px));
  padding:calc(80 * var(--px)) calc(80 * var(--px)) calc(105 * var(--px)); min-height:calc(935 * var(--px))}
.is-proj .panel{margin-top:0; padding-top:0}
.g16{display:grid; grid-template-columns:repeat(16, 1fr); column-gap:calc(10 * var(--px))}

/* ---------- HOME: slideshow em ecrã inteiro ---------- */
.panel.home{margin:0; width:100%; padding:0; min-height:0}
.slides{position:relative; overflow:hidden; background:var(--ph); height:100vh; height:100svh}
.slides::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to left, rgba(0,0,0,.38), rgba(0,0,0,.12) 22%, rgba(0,0,0,0) 34%)}
.slides .slide{position:absolute; inset:0; opacity:0}
.slides.single .slide{opacity:1}
.slides .slide img{width:100%; height:100%; object-fit:cover}

/* ---------- imagens com revelação ---------- */
.ph{position:relative; overflow:hidden; background:var(--ph)}
.ph .art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .9s var(--ease), transform 1.1s var(--ease)}
.ph.in .art, html:not(.js) .ph .art{opacity:1; transform:none}

/* ---------- legendas ---------- */
.cap{margin:calc(20 * var(--px)) 0 0; font-size:max(12px, calc(20 * var(--px))); line-height:1.25; color:var(--nav); font-weight:500; transition:color .25s ease}
.cap b{color:var(--blue); font-weight:900; margin-right:.25em}
.card{display:block}
.card .ph .art{transition:opacity .9s var(--ease), transform .6s var(--ease)}
.card:hover .ph.in .art{transform:scale(1.03)}
.card:hover .cap{color:var(--ink)}

/* ---------- tipografia ---------- */
.tag{margin:0; font-weight:900; font-size:max(11px, calc(20 * var(--px))); color:var(--blue); letter-spacing:.01em}
.lede{position:relative; margin:0; text-indent:calc(269 * var(--px))}
.lede .tag{position:absolute; left:0; text-indent:0}
.lede.s60{font-weight:900; font-size:max(24px, calc(50 * var(--px))); line-height:1.3; letter-spacing:-.01em; text-indent:calc(320 * var(--px))}
.lede.s60 .tag{top:calc(22 * var(--px))}
.lede.s40{font-weight:500; font-size:max(19px, calc(40 * var(--px))); line-height:1.125}
.lede.s40 .tag{top:calc(8 * var(--px))}
.lede strong,.lede b{font-weight:700}
.lede.s60 a{color:var(--blue); text-decoration:underline; text-underline-offset:.12em; text-decoration-thickness:2px}

/* ---------- conteúdo do editor (comum) ---------- */
.entry p,.entry li{font-weight:500; font-size:max(16px, calc(30 * var(--px))); line-height:1.5; margin:0}
.entry p.lede.s40{font-size:max(19px, calc(40 * var(--px))); line-height:1.125}
.entry p.lede.s60{font-weight:900; font-size:max(24px, calc(50 * var(--px))); line-height:1.3}
.entry strong,.entry b{font-weight:700}
.entry a:not(.wp-block-button__link){color:var(--blue); text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px}
.entry a:hover{color:var(--ink)}
.entry figure{margin:0}
.entry img,.entry video{width:100%; height:auto}
.entry figcaption{display:none}
.entry ul,.entry ol{list-style:none; margin:0; padding:0}
.entry ul li{padding-left:1em; text-indent:-1em}
.entry ul li::before{content:'·'; display:inline-block; width:1em; text-indent:0}
.entry .wp-block-group > * + *{margin-top:calc(40 * var(--px))}
/* imagens revelam-se ao entrar no ecrã */
.entry .wp-block-image,.entry .wp-block-video{background:var(--ph); overflow:hidden}
.js .entry .wp-block-image img,.js .entry .wp-block-video video,.js .entry .wp-block-media-text__media img{opacity:0; transform:scale(1.02); transition:opacity .9s var(--ease), transform 1.1s var(--ease)}
.js .entry .in img,.js .entry .in video{opacity:1; transform:none}
.entry .wp-block-image.is-style-pequena,.entry .wp-block-image.is-style-logotipo{width:50%; margin-left:auto; margin-right:auto; background:transparent}
.entry .wp-block-image.is-style-logotipo{padding:calc(210 * var(--px)) 0}
.entry .wp-block-gallery{display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:calc(90 * var(--px))}
.entry .wp-block-gallery > .wp-block-image{margin:0; width:auto}
.entry .wp-block-gallery img{height:auto !important; object-fit:initial !important}
.entry .wp-block-media-text{display:grid; grid-template-columns:1fr 1fr; gap:calc(90 * var(--px)); align-items:center}
.entry .wp-block-media-text__content{grid-column:1; grid-row:1; padding:0}
.entry .wp-block-media-text__media{grid-column:2; grid-row:1; margin:0}
.entry .wp-block-media-text__content > * + *{margin-top:calc(40 * var(--px))}
/* YouTube: 16:9 a toda a largura; Shorts (9:16) a meia largura, centrados */
.entry .wp-block-embed{margin:0}
.entry .wp-block-embed__wrapper{position:relative; aspect-ratio:16/9; background:var(--ph)}
.entry .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper{aspect-ratio:9/16; width:50%; margin:0 auto}
.entry .wp-block-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.entry hr,.entry .wp-block-separator{border:0; height:2px; width:calc(70 * var(--px)); background:var(--blue); margin-left:0; margin-right:auto}

/* ---------- PROJETO ---------- */
.hero-px{overflow:hidden; position:relative}
.hero-px .ph{position:absolute; left:0; right:0; top:-12%; bottom:-12%; will-change:transform}
.is-proj .hero-px{height:100vh; height:100svh; width:100vw; margin-left:calc(-1 * (var(--off) + 325 * var(--px)))}
.is-proj .hero-px::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to left, rgba(0,0,0,.38), rgba(0,0,0,.12) 22%, rgba(0,0,0,0) 34%)}
.pj .entry > *{margin-top:calc(90 * var(--px))}
.pj .entry > .lede{margin-top:calc(256 * var(--px))}
.pj .entry > .lede + *{margin-top:calc(89 * var(--px))}
/* parágrafo isolado: coluna da direita; ou coluna de leitura */
.pj .entry > p:not(.lede){margin-left:calc(680 * var(--px)); max-width:calc(590 * var(--px))}
.pj .entry > p.is-style-coluna-leitura,.pj .entry > .wp-block-group{margin-left:calc(320 * var(--px)); max-width:calc(950 * var(--px))}
.pj .entry > .wp-block-group.is-style-largura-total{margin-left:0; max-width:none}

/* ---------- PÁGINAS (INFO e outras) ---------- */
.pg .entry > p:not(.lede),.pg .entry > .wp-block-group:not(.is-style-servicos),.pg .entry > h2,.pg .entry > h3{margin-left:calc(320 * var(--px))}
.pg .entry > p + p{margin-top:calc(45 * var(--px))}
.pg .entry > .lede + *{margin-top:calc(82 * var(--px))}
.pg .entry > .wp-block-image,.pg .entry > .wp-block-gallery{margin-top:calc(59 * var(--px))}
.pg .g16 + .entry > .lede:first-child{margin-top:calc(170 * var(--px))}
.pg .entry > .wp-block-gallery{grid-template-columns:repeat(16, 1fr); gap:0 calc(10 * var(--px))}
.pg .entry > .wp-block-gallery > :nth-child(odd){grid-column:1/8}
.pg .entry > .wp-block-gallery > :nth-child(even){grid-column:9/17}
.pg .entry h2,.pg .entry h3{font-size:max(17px, calc(40 * var(--px))); font-weight:500; line-height:1.2; color:var(--blue); margin:calc(60 * var(--px)) 0 0}
.portrait{position:relative; grid-column:1/5; height:calc(310 * var(--px)); overflow:hidden; background:var(--ph)}
.portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:48% 35%; transition:opacity .25s ease}
.portrait img.alt{opacity:0}
.portrait:hover img.alt{opacity:1}
/* serviços: etiqueta à esquerda, títulos azuis na coluna de leitura */
.entry .is-style-servicos{position:relative; margin-top:calc(96 * var(--px))}
.entry .is-style-servicos > h2{position:absolute; left:0; top:calc(4 * var(--px)); margin:0; font-weight:900; font-size:max(11px, calc(20 * var(--px))); line-height:1.25; color:var(--blue); letter-spacing:.01em}
.entry .is-style-servicos > h3,.entry .is-style-servicos > p{margin-left:calc(320 * var(--px))}
.entry .is-style-servicos > h3{margin-top:0; font-weight:500; font-size:max(17px, calc(40 * var(--px))); line-height:1.2; color:var(--blue); letter-spacing:.005em}
.entry .is-style-servicos > h3 ~ h3{margin-top:calc(42 * var(--px))}
.entry .is-style-servicos > h3 + p{margin-top:0}
.entry .is-style-servicos > p{font-size:max(15px, calc(30 * var(--px)))}

/* ---------- TALK: formulário em frase ---------- */
.talk .entry > .lede{margin-top:calc(9 * var(--px))}
.sform{margin-top:calc(150 * var(--px)); width:calc(950 * var(--px)); min-width:min(100%, 340px)}
.sform .sf{margin:0; font-weight:500; font-size:max(20px, calc(40 * var(--px))); line-height:1.7; color:var(--ink)}
.sform .sf-m{margin-top:calc(50 * var(--px))}
.sform .f{display:inline-block; position:relative}
.sform input,.sform textarea{border:0; border-bottom:1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius:0; background:transparent; color:var(--blue); caret-color:var(--blue); outline:none; transition:border-color .2s ease}
.sform .f input{display:inline-block; width:auto; field-sizing:content; min-width:5ch; max-width:100%; font:inherit; padding:0 .15em; line-height:1.2}
.sform .f input::placeholder,.sform .f textarea::placeholder{color:color-mix(in srgb, var(--ink) 28%, transparent)}
.sform .f input:focus,.sform .f textarea:focus,.sform .f.bad input,.sform .f.bad textarea{border-bottom-color:var(--blue)}
.sform input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--panel) inset; -webkit-text-fill-color:var(--blue)}
.sform .f .err{position:absolute; left:0; top:100%; margin:0; color:var(--blue); font-weight:500; font-size:max(11px, calc(16 * var(--px))); line-height:1.4; white-space:nowrap}
.sform .sf-t{display:block; margin-top:calc(14 * var(--px))}
.sform .sf-t textarea{display:block; width:100%; field-sizing:content; min-height:calc(150 * var(--px)); resize:none; font:500 max(17px, calc(30 * var(--px)))/1.5 var(--font); padding:calc(6 * var(--px)) 0 calc(10 * var(--px))}
.sform .sf-t .err{position:static; display:block; margin-top:6px}
.sform .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.sform .form-err{margin:calc(30 * var(--px)) 0 0; color:var(--blue); font-weight:500; font-size:max(13px, calc(20 * var(--px)))}
.sform .form-err:empty{display:none}
.send{display:flex; justify-content:flex-start; margin-top:calc(60 * var(--px))}
.send button{all:unset; display:inline-flex; align-items:center; gap:.45em; font-weight:900; font-size:max(14px, calc(25 * var(--px))); color:var(--blue); letter-spacing:.02em; transition:transform .1s ease-out, color 80ms linear, opacity .2s}
.send button .arw{display:inline-block; font-weight:500; transition:transform .3s var(--ease)}
.send button:hover{color:var(--ink)}
.send button:hover .arw{transform:translateX(.3em)}
.send button:active{transform:scale(.97)}
.send button:focus-visible{outline:2px solid var(--blue); outline-offset:4px}
.sform.busy .send button{opacity:.4; pointer-events:none}
.thanks{display:none}
.talk.sent .sform{display:none !important}
.talk.sent .thanks{display:block; animation:rise .5s var(--ease) both}
.thanks .again{display:inline-block; margin-top:calc(40 * var(--px)); font-weight:900; font-size:max(12px, calc(20 * var(--px))); color:var(--blue)}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ---------- WORK: montra empilhada ---------- */
.wk .proj-card{display:block; position:relative}
.pc-img{position:relative; overflow:hidden; height:calc(710 * var(--px)); background:var(--ph)}
.pc-pic{position:absolute; left:0; right:0; top:-12%; bottom:-12%; transform:translate3d(0,var(--py,0%),0) scale(var(--ps,1)); transition:transform .6s var(--ease); will-change:transform}
.pc-pic img{width:100%; height:100%; object-fit:cover}
.pc-cap{margin:0}
.pc-cap b{font-weight:900}
.mode-b .proj-card{position:sticky; top:calc((100vh - 710 * var(--px)) / 2)}
.mode-b .pc-img{transform:scale(var(--sc,1)); transform-origin:50% 0}
.mode-b .pc-img::before{content:''; position:absolute; inset:0; z-index:2; background:#000; opacity:var(--dim,0); pointer-events:none}
.mode-b .pc-img::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 45%)}
.mode-b .pc-cap{position:absolute; z-index:3; left:calc(40 * var(--px)); bottom:calc(36 * var(--px)); color:#fff; font-size:max(13px, calc(20 * var(--px))); line-height:1.25; font-weight:500}
.mode-b .pc-cap b{display:block; font-size:max(18px, calc(35 * var(--px))); line-height:1.15; letter-spacing:-.005em}
.mode-b .proj-card:hover .pc-pic{--ps:1.03}
.mode-b{padding-bottom:calc(80 * var(--px))}
/* MAIS PROJETOS: 3 colunas, 4:3, legenda por baixo */
.wkg{margin-top:calc(200 * var(--px))}
.wk + .wkg{margin-top:calc(120 * var(--px))}
.wkg > .tag{display:block; margin-bottom:calc(30 * var(--px))}
.wkg-grid{display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(40 * var(--px)); row-gap:calc(60 * var(--px))}
.wkg-card{transition:opacity .3s ease}
.wkg-card .ph{aspect-ratio:4/3}
.wkg-grid:has(.wkg-card:hover) .wkg-card:not(:hover){opacity:.45}

/* ---------- BLOG ---------- */
/* as·si·mé·tri·co: um peso ou uma família por sílaba */
.blog .lede.blog-title{color:var(--blue); font-size:max(40px, calc(100 * var(--px))); line-height:1.05; font-weight:400; letter-spacing:-.01em}
.blog .lede.blog-title .tag{top:calc(34 * var(--px))}
.sy.b{font-family:'Fraunces MM', Georgia, serif; font-style:italic; font-weight:700}
.sy.r{font-weight:400} .sy.t{font-weight:300}
.sy.i{font-family:'Fraunces MM', Georgia, serif; font-style:italic; font-weight:400; letter-spacing:0}
.blist{list-style:none; margin:calc(120 * var(--px)) 0 0 calc(320 * var(--px)); padding:0}
.blist li + li{margin-top:calc(80 * var(--px))}
.blist a{display:block; transition:opacity .3s ease}
.blist:has(a:hover) a:not(:hover){opacity:.4}
.blist .d,.art .date{margin:0; font-size:max(12px, calc(20 * var(--px))); font-weight:500; color:var(--nav); letter-spacing:.02em}
.blist h2{margin:calc(10 * var(--px)) 0 0; font-size:max(22px, calc(50 * var(--px))); line-height:1.15; font-weight:900; color:var(--ink); transition:color .2s ease}
.blist a:hover h2{color:var(--blue)}
.blist .s{margin:calc(8 * var(--px)) 0 0; font-size:max(14px, calc(25 * var(--px))); line-height:1.333; font-weight:500; color:var(--nav)}
/* artigo */
.art > .lede{color:var(--blue)}
.art .sub{margin:calc(24 * var(--px)) 0 0 calc(320 * var(--px)); font-size:max(14px, calc(25 * var(--px))); line-height:1.333; font-weight:500; color:var(--nav)}
.art .date{margin:calc(16 * var(--px)) 0 0 calc(320 * var(--px)); font-size:max(11px, calc(16 * var(--px)))}
.art .body{margin:calc(100 * var(--px)) 0 0 calc(320 * var(--px)); max-width:calc(950 * var(--px))}
.art .body > * + *{margin-top:calc(40 * var(--px))}
.art .body .wp-block-gallery{gap:calc(10 * var(--px))}
.art .body h2,.art .body h3{margin-bottom:0; font-size:max(16px, calc(30 * var(--px))); line-height:1.5; font-weight:900}
.art .body figcaption{display:block; margin-top:calc(12 * var(--px)); font-size:max(11px, calc(16 * var(--px))); line-height:1.4; color:var(--caption); font-weight:500; background:var(--panel)}
.art .body .wp-block-gallery > figcaption{grid-column:1/-1; margin-top:0}
.art .body .wp-block-gallery .wp-block-image figcaption{display:none}
.art .more{margin:calc(150 * var(--px)) 0 0 calc(320 * var(--px)); padding-top:calc(30 * var(--px)); border-top:1.5px solid var(--blue)}
.art .more .blist{margin:calc(30 * var(--px)) 0 0}
.art .more .blist h2{font-size:max(18px, calc(35 * var(--px)))}
.art .back{display:inline-block; margin-top:calc(60 * var(--px)); font-weight:900; font-size:max(12px, calc(20 * var(--px))); color:var(--blue); letter-spacing:.02em}
.art .back:hover{color:var(--ink)}

/* ---------- POLÍTICA DE PRIVACIDADE ---------- */
.priv{position:relative; font-size:max(14px, calc(20 * var(--px))); line-height:1.25; font-weight:500}
.priv > .tag{position:absolute; left:0; top:calc(14 * var(--px))}
.priv .txt{margin-left:calc(320 * var(--px)); padding-top:calc(10 * var(--px)); max-width:calc(950 * var(--px))}
.priv .entry p,.priv .entry li{font-size:inherit; line-height:inherit}
.priv h2,.priv h3{font-size:1em; font-weight:900; margin:1.25em 0 0}
.priv .txt > :first-child{margin-top:0}
.priv a{color:var(--blue)}
.priv .txt > p:last-child{margin-top:2.2em; font-size:max(12px, calc(14 * var(--px))); color:var(--blue)}

/* ---------- FOOTER revelado: o site sobe como uma folha ---------- */
.foot{position:sticky; bottom:0; z-index:0; background:var(--blue); color:#fff; height:max(300px, calc(490 * var(--px))); font-size:max(11px, calc(12 * var(--px)))}
.foot .in{position:relative; height:100%; margin-left:var(--off); width:calc(1920 * var(--px))}
.foot .in > *{position:absolute; margin:0}
.foot a{transition:opacity .15s ease} .foot a:hover{opacity:.7}
.foot :focus-visible{outline-color:#fff}
.f-msg{left:calc(190 * var(--px)); top:calc(102 * var(--px)); font-size:max(22px, calc(40 * var(--px))); line-height:1.125; font-weight:300}
.f-msg a{display:inline-block; font-weight:900; background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat; transition:background-size .3s ease, transform .12s ease-out}
.f-msg a:hover,.f-msg a:focus-visible{opacity:1; background-size:100% 2px}
.f-msg a:active{transform:scale(.98)}
.f-logo{left:calc(190 * var(--px)); top:calc(268 * var(--px)); width:max(32px, calc(50 * var(--px))); height:max(32px, calc(50 * var(--px))); box-shadow:0 0 0 1px #fff; display:block}
.f-logo img{width:100%; height:100%}
.f-copy{left:calc(260 * var(--px)); top:calc(287 * var(--px)); line-height:1}
.f-copy b{font-weight:700}
.f-nav{left:calc(1654 * var(--px)); top:calc(125 * var(--px)); display:flex; flex-direction:column; font-weight:700; line-height:1.5}
.f-priv{left:calc(1654 * var(--px)); top:calc(233 * var(--px)); line-height:1}
.f-li{left:calc(1654 * var(--px)); top:calc(287 * var(--px)); font-weight:700; line-height:1}

/* ---------- transição entre páginas: dissolve de 0,3 s; Mm e navegação ficam ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.3s ease both vt-out; mix-blend-mode:normal; z-index:1}
::view-transition-new(root){animation:none; mix-blend-mode:normal}
@keyframes vt-out{to{opacity:0}}

/* ---------- mobile ---------- */
@media (max-width: 820px){
  body{background-size:40px 40px; background-position:0 30px}
  .wrap{background-position:0 calc(30px + var(--gy, 0px))}
  .topbar{height:8px}
  .logo{left:14px; top:calc(22px + env(safe-area-inset-top,0px)); width:52px; height:52px}
  .nav{display:none}
  .menu-btn{display:grid; place-items:center; position:fixed; z-index:40; right:14px; top:calc(22px + env(safe-area-inset-top,0px)); width:52px; height:52px; background:var(--panel); border:0; padding:0; box-shadow:0 0 0 1px var(--grid)}
  .menu-btn svg{width:26px; height:26px; transition:transform .35s var(--ease)}
  .menu-btn[aria-expanded="true"]{background:var(--blue)}
  .menu-btn[aria-expanded="true"] svg{transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] path{stroke:#fff}
  .sheet{display:flex; flex-direction:column; justify-content:flex-end; position:fixed; inset:0; z-index:35; background:var(--blue); color:#fff; padding:96px 22px calc(40px + env(safe-area-inset-bottom,0px));
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s}
  .sheet.open{opacity:1; visibility:visible; transition:opacity .25s ease}
  .sheet a{font-weight:900; font-size:48px; line-height:1.05; letter-spacing:-.01em; opacity:.55}
  .sheet a[aria-current="page"]{opacity:1}
  .panel{margin:88px 10px 0; width:auto; padding:26px 16px 48px; min-height:0}
  .panel.home{margin:0; padding:0}
  .is-proj .hero-px{margin-left:-26px}
  .g16{column-gap:0}
  .wk .proj-card{margin-top:30px}
  .pc-img{height:auto; aspect-ratio:4/3}
  .mode-b .proj-card{top:90px}
  .mode-b .pc-cap{left:14px; bottom:12px; font-size:14px}
  .cap{margin-top:8px}
  .lede{text-indent:64px}
  .lede.s60,.entry p.lede.s60{font-size:24px; line-height:1.3; text-indent:64px}
  .lede.s60 .tag{top:10px}
  .lede.s40,.entry p.lede.s40{font-size:20px; line-height:1.2}
  .lede.s40 .tag{top:4px}
  .entry p,.entry li{font-size:17px; line-height:1.4}
  .blist,.art .sub,.art .date,.art .body,.art .more{margin-left:0}
  .blist{margin-top:36px} .blist li + li{margin-top:32px}
  .blog .lede.blog-title{font-size:40px} .blog .lede.blog-title .tag{top:12px}
  .art .body{margin-top:36px; max-width:none} .art .body > * + *{margin-top:16px}
  .art .more{margin-top:56px}
  /* projeto */
  .pj .entry > *{margin-top:16px}
  .pj .entry > .lede{margin-top:40px}
  .pj .entry > .lede + *{margin-top:36px}
  .pj .entry > p:not(.lede),.pj .entry > p.is-style-coluna-leitura,.pj .entry > .wp-block-group{margin-left:0; max-width:none}
  .entry .wp-block-gallery{gap:12px}
  .entry .wp-block-image.is-style-pequena,.entry .wp-block-image.is-style-logotipo{width:70%}
  .entry .wp-block-image.is-style-logotipo{padding:48px 0}
  .entry .wp-block-media-text{grid-template-columns:1fr; gap:16px}
  .entry .wp-block-media-text__media{grid-column:1; grid-row:2}
  .entry .wp-block-group > * + *{margin-top:14px}
  /* páginas */
  .pg .entry > p:not(.lede),.pg .entry > .wp-block-group:not(.is-style-servicos),.pg .entry > h2,.pg .entry > h3{margin-left:0}
  .pg .g16{display:block}
  .portrait{width:56%; height:auto; aspect-ratio:1}
  .pg .g16 + .entry > .lede:first-child{margin-top:36px}
  .pg .entry > .lede + *{margin-top:24px}
  .pg .entry > p + p{margin-top:14px}
  .pg .entry > .wp-block-gallery{display:block; margin-top:32px}
  .pg .entry > .wp-block-gallery > :nth-child(odd){width:78%}
  .pg .entry > .wp-block-gallery > :nth-child(even){width:88%; margin:16px 0 0 auto}
  .entry .is-style-servicos{margin-top:44px}
  .entry .is-style-servicos > h2{position:static; margin-bottom:14px}
  .entry .is-style-servicos > h3,.entry .is-style-servicos > p{margin-left:0}
  .entry .is-style-servicos > h3{font-size:18px}
  .entry .is-style-servicos > h3 ~ h3{margin-top:16px}
  .entry .is-style-servicos > p{font-size:16px}
  .wkg,.wk + .wkg{margin-top:56px} .wkg-grid{grid-template-columns:1fr 1fr; column-gap:12px; row-gap:28px}
  .sform{width:100%; margin-top:40px}
  .sform .sf{font-size:22px; line-height:1.8}
  .sform .sf-t textarea{min-height:110px}
  .priv > .tag{position:static; display:block; margin-bottom:16px} .priv .txt{margin-left:0; max-width:none}
  .foot{height:auto; font-size:12px}
  .foot .in{width:auto; margin:0; padding:48px 24px calc(40px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:22px}
  .foot .in > *{position:static}
  .f-msg{font-size:26px; margin-bottom:12px}
  .f-nav{flex-direction:row; flex-wrap:wrap; gap:6px 18px; font-size:13px}
  .f-logo{width:36px; height:36px; margin-top:10px; order:5}
  .f-copy{order:6; margin-top:-8px}
}

/* ---------- reduzir movimento: parallax, revelações e efeitos desligam-se ---------- */
@media (prefers-reduced-motion: reduce){
  .js .entry .wp-block-image img,.js .entry .wp-block-video video,.js .entry .wp-block-media-text__media img{opacity:1!important; transform:none!important}
  .pc-pic{transform:none!important} .mode-b .pc-img{transform:none!important} .mode-b .pc-img::before{opacity:0!important}
  *,*::before,*::after{animation:none!important; transition-property:color, background-color, opacity!important}
  .ph .art{opacity:1; transform:none}
  .slides .slide:first-child{opacity:1}
  .hero-px .ph{transform:none!important}
  .foot{position:relative}
  ::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

 /* etiqueta numa linha própria quando já não cabe pendurada */
@media (max-width: 1100px){
  .lede,.lede.s60,.lede.s40,.entry p.lede,.entry p.lede.s60{text-indent:0}
  .lede .tag{position:static; display:block; margin-bottom:10px}
}
/* mobile: pares de imagens nos projetos passam a seguidos */
@media (max-width: 820px){
  .pj .entry .wp-block-gallery{grid-template-columns:1fr; gap:16px}
}
/* menu mobile: linha de rodapé no painel azul */
.sheet-foot{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:40px; font-size:12px; font-weight:500; line-height:1.4}
.sheet .sheet-foot a{font-size:inherit; font-weight:700; line-height:inherit; letter-spacing:0; opacity:1}
.sheet-foot span{flex-basis:100%}
.sheet-foot b{font-weight:700}
/* menu mobile: LinkedIn numa linha própria, com mais destaque */
.sheet .sheet-foot a[href*="linkedin"]{order:-1; flex-basis:100%; font-size:20px; font-weight:900; letter-spacing:.01em; margin-bottom:14px}

/* ---------- MOBILE · WORK como índice (26/10/2026) ---------- */
@media (max-width: 820px){
  /* uma linha por projeto: texto à esquerda, miniatura à direita */
  .mode-b{padding-bottom:0}
  .wk .proj-card,.mode-b .proj-card,.wkg .wkg-card{position:static; top:auto; margin-top:0; display:grid; grid-template-columns:minmax(0,1fr) 104px; column-gap:16px; align-items:center; padding:14px 0; border-top:1px solid var(--ph)}
  .wk .proj-card > .pc-img,.wkg .wkg-card > .ph{grid-column:2; grid-row:1}
  .wk .proj-card > .pc-cap,.wkg .wkg-card > .cap{grid-column:1; grid-row:1}

  /* montra: sem empilhado, sem escurecer, sem parallax */
  .pc-img,.mode-b .pc-img{height:auto; aspect-ratio:4/3; transform:none}
  .mode-b .pc-img::before,.mode-b .pc-img::after{display:none}
  .pc-pic,.mode-b .proj-card:hover .pc-pic{inset:0; transform:none; transition:none}

  /* legendas: cliente grande, tipo pequeno */
  .mode-b .pc-cap,.wkg .wkg-card .cap{position:static; margin:0; color:var(--nav); font-size:13px; line-height:1.3; font-weight:500}
  .mode-b .pc-cap b,.wkg .wkg-card .cap b{display:block; margin:0 0 4px; color:var(--ink); font-size:24px; line-height:1.1; font-weight:900; letter-spacing:-.01em}

  /* MAIS PROJETOS junta-se à lista, separado por uma linha azul */
  .wkg,.wk + .wkg{margin-top:0}
  .wkg > .tag{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .wkg-grid{display:block}

  /* sem hovers no toque; só resposta ao carregar */
  .wkg-grid:has(.wkg-card:hover) .wkg-card:not(:hover){opacity:1}
  .card:hover .cap{color:var(--nav)}
  .card:hover .ph.in .art{transform:none}
  .wk .proj-card:active,.wkg .wkg-card:active{opacity:.55}
}
/* ---------- MOBILE · página de projeto (26/10/2026) ---------- */
.pj-later{display:none}
@media (max-width: 820px){
  /* capa na proporção natural, sem ecrã inteiro nem parallax */
  .is-proj .hero-px{height:auto}
  .is-proj .hero-px::after{display:none}
  .hero-px .ph{position:relative; inset:auto; transform:none !important; will-change:auto}
  .hero-px .ph .art{position:static; height:auto; object-fit:initial}

  /* fim do projeto: ver num ecrã grande */
  .pj-later{display:block; margin-top:56px; padding-top:20px; border-top:1.5px solid var(--blue)}
  .pj-later p{margin:0; font-size:17px; line-height:1.4; font-weight:500}
  .pj-send{display:inline-flex; align-items:center; gap:.4em; margin-top:14px; font-weight:900; font-size:16px; color:var(--blue); letter-spacing:.02em}
  .pj-send:active{opacity:.55}
}
/* ---------- MOBILE · footer só com a frase e a assinatura ---------- */
@media (max-width: 820px){
  .f-nav,.f-priv,.f-li{display:none}
}
/* ---------- MOBILE · home: nome, bem-vindo, projetos ---------- */
.slides picture{display:block; width:100%; height:100%}
.home-m{display:none}
@media (max-width: 820px){
  .panel.home .slides{display:none}
  .home-m{display:block; padding:110px 26px 48px}
  .hm-nome{margin:0; font-weight:900; font-size:min(18vw, 96px); line-height:.95; letter-spacing:-.02em; color:var(--ink)}
  .hm-nome span{display:block}
  .hm-ola{margin:24px 0 48px; font-weight:500; font-size:20px; line-height:1.2; color:var(--blue)}
  .hm-all{display:inline-flex; align-items:center; gap:.4em; margin-top:24px; font-weight:900; font-size:16px; color:var(--blue); letter-spacing:.02em}
  .hm-all:active{opacity:.55}
}
/* 27/10 · LÍNGUAS: PT EN por baixo do BLOG (desktop) e no menu (mobile) */
.nav .langs{position:absolute; left:0; top:calc(var(--bt-root) + 62 * var(--px)); display:flex; gap:calc(16 * var(--px))}
.nav .langs a{position:static}
.nav .big.lg{font-size:max(11px, calc(12 * var(--px))); font-weight:500; letter-spacing:.04em}
.nav .big.lg[aria-current="true"]{color:var(--blue); font-weight:700}
.nav .big.lg.on-img{color:#fff}
@media (max-width: 820px){
  .sheet .sheet-langs{display:flex; gap:18px; margin-top:28px}
  .sheet .sheet-langs a{font-size:20px; line-height:1; letter-spacing:.02em; opacity:.55}
  .sheet .sheet-langs a[aria-current="true"]{opacity:1}
}