/* Artes de Gabriel em Ajustado — computador e celular, 27/10/2026. */
@font-face{font-family:GothicTitle;src:url('assets/gothic-medium.woff2') format('woff2');font-display:swap;font-weight:500}
.display{font-family:Neue,Arial,sans-serif;line-height:.96;letter-spacing:-.04em}
.gothic-heading svg,.hero-lettering{display:block;width:100%;height:auto;overflow:visible}
.mobile-only,.essence-mobile{display:none}

/* Abertura: enquadramentos separados, conforme os dois PSDs. */
.brand>span{font-family:GothicTitle,serif;font-weight:500;font-size:25px;letter-spacing:0;line-height:1}
.brand>span>span{font-family:Neue,Arial,sans-serif;font-size:9px;letter-spacing:.25em}
.hero-picture{position:absolute;inset:0;z-index:-3;display:block}
.hero-picture .hero-photo{position:static;width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.hero-name{left:auto;right:5%;bottom:9.6%;width:31.875vw;min-width:0}
.hero h1{font-size:inherit;line-height:1;letter-spacing:0;font-weight:500}
.hero-bottom{right:2.2vw;bottom:3.9%}

/* A tipografia decorativa permanece vetorial e a foto central é independente. */
.essence{display:flex;flex-direction:column;padding:28px var(--space) 34px;overflow:hidden}
.essence-art{display:grid;place-items:center;flex:1;position:relative;width:100vw;height:auto;min-height:55.5556vw;max-height:none;margin:47px calc(-1 * var(--space)) 0;isolation:isolate}
.essence-lettering{width:100%;height:auto;overflow:hidden}
.essence-scene{position:relative;width:100%;perspective:1000px}
.essence-scene>.essence-lettering{display:block}
.essence-photo-frame{position:absolute;left:36.80556%;top:19.625%;width:26.38889%;height:63.375%;overflow:hidden;pointer-events:none;transform-origin:center;backface-visibility:hidden}
.essence-follow-photo{width:100%;height:100%;object-fit:cover}
.essence-photo-treatment{filter:grayscale(1) contrast(1.15) brightness(1.08);transform-box:fill-box;transform:scale(1.22);transform-origin:50% 58%}
@media(min-width:701px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .essence-photo-frame{transition:transform 350ms cubic-bezier(.2,.65,.3,1),box-shadow 350ms ease}
}
.essence-bottom{margin-top:34px;gap:40px}
.essence-bottom h2{font-size:clamp(18px,1.875vw,27px)}
.essence-bottom p{font-size:13px;line-height:1.6}

/* Portfólio: oito fotos e título gótico das artes novas. */
.portfolio .section-heading{margin:28px 0 26px}
.portfolio .gothic-heading{width:35.1vw;flex-shrink:0;font-size:inherit;line-height:1;white-space:normal}
.portfolio .section-heading>p{font-size:14px;min-width:220px}
.portfolio-footer>.text-link{min-height:32px;padding:5px 18px}

/* Sobre mim: retrato, texto e título crescem sem sobrepor conteúdo. */
.artist-revised{display:flex;flex-direction:column;padding:56px var(--space) 40px}
.artist-meta{display:flex;justify-content:space-between;margin-left:44.7%;font-size:12px;line-height:1.42}
.artist-meta>span:last-child{text-align:right}
.artist-layout{display:grid;grid-template-columns:37.5% minmax(0,1fr);gap:7.2%;margin-top:7.5vw;align-items:start}
.artist-photo-round{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden}
.artist-photo-round img{width:100%;height:100%;object-fit:cover}
.artist-biography{padding-top:9.72vw;max-width:490px}
.artist-biography p{font-size:clamp(18px,1.806vw,28px);line-height:1.35;letter-spacing:-.015em}
.artist-contact{display:inline-flex;gap:66px;align-items:center;min-height:44px;margin-top:32px;font-size:16px}
.artist-contact:hover{text-decoration:underline;text-underline-offset:5px}
.artist-contact svg{width:110px;height:auto}
.artist-title{font-family:Neue,Arial,sans-serif;font-weight:700;font-size:14.56vw;letter-spacing:-.035em;line-height:.75;text-align:right;white-space:nowrap;margin-top:auto;padding-top:7.5vw}

/* Especialidades: Helvetica Neue nos nomes, gótica no título da composição. */
.specialties .section-heading{margin:72px 0 55px}
.specialties .gothic-heading{width:37.5vw;flex-shrink:0;font-size:inherit;line-height:1}
.specialty h3{font-family:Neue,Arial,sans-serif;font-size:clamp(27px,3.645vw,58.5px);letter-spacing:-.025em;line-height:1.05}
.specialty a{align-items:center;border:1px solid #d8d6cf;border-radius:999px;padding:4px 10px;min-height:26px;line-height:1.4}
.cover-note .text-link{border:0;border-radius:999px;background:var(--paper);color:var(--ink);padding:3px 16px;min-height:28px;font-size:10px}

/* Ajustes de tamanho para a largura natural da Helvetica Neue. */
.process>.display{font-size:clamp(36px,5.775vw,87px);line-height:1.02}
.process-steps h3{font-size:22px}
.faq h3{font-size:30px}
.closing-cta .display{font-size:clamp(36px,4.95vw,75px);line-height:1.02}
/* A chamada final se une ao rodapé, sem reservar uma tela inteira. */
#conteudo>.closing-cta{min-height:0;padding-bottom:0}
.closing-cta .solid-button{min-width:260px;min-height:72px;padding:22px 32px;border-radius:999px;font-size:14px;justify-content:space-between;gap:40px}
.closing-cta .button-arrow{width:24px;height:24px}
.contact-dialog .contact-heading{gap:30px}
.contact-dialog .contact-heading h2{font-size:clamp(64px,8vw,112px);line-height:.95}
.menu-dialog nav>a{font-family:Neue,Arial,sans-serif;font-size:8vw;letter-spacing:-.035em;line-height:1.3}
.menu-dialog nav>a[href="contato.html"]{background:#3b3b38;color:var(--paper);padding-inline:16px}

@media(min-width:1700px){
 .hero-name{left:auto;right:4vw;width:31.875vw;min-width:0}
 .essence{padding-left:4vw;padding-right:4vw}
 .essence-art{margin-left:-4vw;margin-right:-4vw}
}
@media(min-width:701px) and (max-width:1050px){
 .brand>span{font-size:23px}
 .portfolio .section-heading>p{min-width:180px;font-size:12px}
 .portfolio .section-heading{gap:24px}
 .specialties .section-heading{gap:24px}
 .specialties .section-heading>p{min-width:150px;font-size:12px}
 .specialty{grid-template-columns:28px minmax(0,1fr) 44%;gap:16px}
 .specialty h3{font-size:3.45vw}
 .artist-contact{gap:32px;font-size:13px}
 .contact-dialog .contact-heading{display:block}
 .contact-dialog .contact-heading>div{margin-top:26px}
 .closing-cta>div{align-items:start;flex-direction:column}
}
@media(max-width:700px){
 .desktop-only,.essence-desktop{display:none}
 .mobile-only{display:inline}
 .essence-mobile{display:block}
 .site-header{padding:20px 22px}
 .brand{gap:9px}.brand img{width:26px;height:50px}
 .brand>span{font-size:23px}.brand>span>span{font-size:6.8px;letter-spacing:.22em}
 .menu-toggle{padding:7px 11px;min-height:34px}
 #conteudo>.hero .hero-name{left:22px;right:auto;width:78.46vw;bottom:9.6%}
 .hero-intro{top:19.2%}.hero-intro .eyebrow{max-width:175px}
 #conteudo>.hero .hero-bottom{left:22px;right:22px;bottom:calc(27px + env(safe-area-inset-bottom))}
 .hero-bottom>a{min-height:40px}
 .essence{padding:24px 22px 23px}
 .essence-art{margin-top:17px;min-height:166.6667vw;margin-left:-22px;margin-right:-22px}
 .essence-bottom{grid-template-columns:minmax(0,1fr) 44px;gap:14px 15px;margin-top:26px}
 .essence-bottom h2{grid-column:1/-1;font-size:22px;line-height:26px}
 .essence-bottom p{grid-column:1;grid-row:2;font-size:13px;line-height:20px}
 .essence-bottom .round-link{grid-column:2;grid-row:2;align-self:center}
 .portfolio .section-heading{display:block;margin:31px 0 26px}
 .portfolio .gothic-heading{width:80vw;font-size:inherit}
 .portfolio .section-heading>p{margin-top:12px;min-width:0;font-size:12px;line-height:18px}
 .portfolio-footer>.text-link{min-height:44px;font-size:9px;padding:6px 13px}
 .artist-revised{padding:28px 22px 32px}
 .artist-meta{margin:0;font-size:8px;line-height:12px}
 .artist-layout{display:block;margin-top:50px}
 .artist-photo-round{width:81.54vw;max-width:100%;margin:0 auto}
 .artist-biography{padding:0;margin:42px 0 0 10px;max-width:none}
 .artist-biography p{font-size:clamp(18px,5.128vw,22px);line-height:1.425;letter-spacing:-.015em}
 .artist-contact{font-size:14px;gap:45px;margin-top:20px}
 .artist-contact svg{width:75px}
 .artist-title{font-size:16.2vw;letter-spacing:-.035em;text-align:center;margin-left:-8px;margin-right:-8px;padding-top:94px}
 .specialties .section-heading{display:block;margin:45px 0 35px}
 .specialties .gothic-heading{width:100%;font-size:inherit}
 .specialties .section-heading>p{font-size:12px;max-width:none;margin-top:24px}
 .specialty{grid-template-columns:24px minmax(0,1fr);gap:10px}
 .specialty h3{font-size:9.7vw;letter-spacing:-.03em;overflow-wrap:normal}
 .specialty p{font-size:14px}
 .specialty a{font-size:9px;padding:8px 12px;min-height:44px;max-width:100%;gap:16px}
 .cover-note .text-link{min-height:44px;padding:8px 16px}
 .process>.display{font-size:10vw;line-height:1.05;overflow-wrap:normal}
 .process-steps h3{font-size:25px}
 .faq h3{font-size:31px}
 .closing-cta .display{font-size:12.4vw;line-height:1.05}
 .closing-cta .solid-button{width:100%;min-width:0;min-height:68px;padding:20px 26px}
 .contact-dialog .contact-heading h2{font-size:15.5vw;line-height:.98}
 .contact-dialog .contact-heading>div{flex-wrap:wrap}
 .menu-dialog nav>a{font-size:8vw;min-width:0}
}

/* Respostas curtas ao toque, mouse e teclado, sem movimento contínuo. */
@media(prefers-reduced-motion:no-preference){
  :is(.solid-button,.text-link,.round-link,.nav-contact,.menu-toggle,.specialty a){
    transition:transform 220ms cubic-bezier(.2,.65,.3,1),background-color 220ms ease,color 220ms ease,border-color 220ms ease;
  }
  :is(.solid-button,.text-link,.nav-contact,.specialty a)>span,
  .artist-contact svg{transition:transform 260ms cubic-bezier(.2,.65,.3,1)}
  :is(.solid-button,.text-link,.round-link,.nav-contact,.menu-toggle,.specialty a):focus-visible{transform:translateY(-2px)}
  :is(.solid-button,.nav-contact,.specialty a):focus-visible>span{transform:translate(3px,-3px)}
  .hero-bottom .text-link:focus-visible>span{transform:translateY(3px)}
  .artist-contact:focus-visible svg{transform:translateX(6px)}

  .desktop-nav>a:not(.nav-contact),.footer-top>div>a{
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;background-position:left bottom;background-size:0 1px;
    transition:background-size 240ms ease;
  }
  .desktop-nav>a:not(.nav-contact):focus-visible,.footer-top>div>a:focus-visible{background-size:100% 1px}
  :is(.menu-close,.contact-close,.lightbox-close,.lightbox-media>button){transition:transform 200ms ease,opacity 200ms ease}
  .work:focus-visible img{transform:scale(1.035)}
  .work{transition:transform 160ms ease}
  .faq details[open]>p{animation:detail-enter 220ms ease-out}
  :is(.contact-dialog,.menu-dialog,.lightbox)[open]{animation:dialog-enter 240ms cubic-bezier(.2,.65,.3,1)}
  :is(.contact-dialog,.menu-dialog,.lightbox)[open]::backdrop{animation:backdrop-enter 220ms ease-out}

  @media(hover:hover) and (pointer:fine){
    :is(.solid-button,.text-link,.round-link,.nav-contact,.menu-toggle,.specialty a):hover{transform:translateY(-2px)}
    :is(.hero-bottom .text-link,.portfolio-footer .text-link,.specialty a):hover{background-color:var(--paper);color:var(--ink);border-color:var(--paper)}
    :is(.closing-cta .solid-button,.cover-note .text-link,.desktop-nav .nav-contact):hover{background-color:#d5d1c6;color:var(--ink)}
    .desktop-nav .nav-contact:hover{text-decoration:none}
    :is(.solid-button,.nav-contact,.specialty a):hover>span{transform:translate(3px,-3px)}
    .hero-bottom .text-link:hover>span{transform:translateY(3px)}
    .artist-contact:hover svg{transform:translateX(6px)}
    .desktop-nav>a:not(.nav-contact):hover,.footer-top>div>a:hover{background-size:100% 1px;text-decoration:none}
    :is(.menu-close,.contact-close,.lightbox-close):hover{opacity:.65}
    .lightbox-media>.previous:hover{transform:translateX(-4px)}
    .lightbox-media>.next:hover{transform:translateX(4px)}
  }

  :is(.solid-button,.text-link,.round-link,.nav-contact,.menu-toggle,.specialty a,.menu-close,.contact-close,.lightbox-close,.lightbox-media>button):active{transform:scale(.97);transition-duration:90ms}
  .work:active{transform:scale(.99)}
}
@keyframes detail-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}

/* Prévia sem controles de galeria e setas com desenho/alinhamento consistentes. */
.work-preview{min-width:0}
.work-preview img{width:100%;height:100%;object-fit:cover}
.button-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.button-arrow{display:block;width:20px;height:20px;flex-shrink:0}
.nav-contact .button-arrow,.specialty .button-arrow{width:15px;height:15px}
.round-link{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:0;line-height:1}
.round-link>.button-arrow{width:22px;height:22px}
.faq details>p a{text-decoration:underline;text-underline-offset:3px}
.site-footer .brand{flex-shrink:0}
.footer-top{flex-wrap:wrap}

/* Texto equivalente às letras vetoriais, disponível para leitores de tela. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}


/* Fontes locais e desenhos vetoriais preservam a identidade entre dispositivos. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.ui-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.menu-toggle>span,.menu-close,.lightbox-close{display:inline-flex;align-items:center;gap:9px}
.menu-toggle .ui-icon{width:17px;height:17px}
.menu-close .ui-icon,.lightbox-close .ui-icon{width:16px;height:16px}
.menu-dialog nav .ui-icon{width:24px;height:24px}
.section-meta>a{display:inline-flex;align-items:center;gap:8px}
.section-meta .ui-icon{width:14px;height:14px}
.hero-bottom .ui-icon{width:22px;height:22px}
.cover-note>span>.ui-icon{width:32px;height:32px}
.lightbox-media>button{display:grid;place-items:center}
.lightbox-media>button>.ui-icon{width:26px;height:26px}
.faq summary>span{display:inline-flex;flex-shrink:0}
.faq summary .ui-icon{width:18px;height:18px}

/* Rodapé conforme as artes de Gabriel: nome gótico sem assinatura ou subtítulo. */
.site-footer{position:relative;padding:28px var(--space) 26px;background:var(--ink);color:var(--paper)}
.footer-topline{position:absolute;top:28px;right:var(--space);display:flex;align-items:center;font-size:.625rem;letter-spacing:.07em}
.footer-topline>a{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.footer-topline .ui-icon{width:16px;height:16px}
.site-footer .footer-wordmark{display:block;width:max-content;max-width:100%;margin:92px 0 60px;font-family:GothicTitle,serif;font-weight:500;font-size:clamp(4rem,15.85vw,13.75rem);line-height:1;letter-spacing:0;white-space:nowrap}
.footer-wordmark>span{font:inherit;letter-spacing:inherit}
.closing-cta>.closing-meta{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;margin-top:0}
.closing-meta>a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.625rem;letter-spacing:.07em}
.closing-meta .ui-icon{width:16px;height:16px}
.footer-layout{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:32px;padding-bottom:48px}
.footer-column{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.footer-column h2{font:400 .625rem/1.5 Neue,Arial,sans-serif;letter-spacing:.1em;color:#aaa89f;margin:0 0 16px}
.footer-column>a{display:inline-flex;align-items:center;gap:12px;min-height:36px;font-size:.875rem;line-height:1.5;max-width:100%}
.footer-column>a:hover,.footer-topline>a:hover{text-decoration:underline;text-underline-offset:5px}
.footer-column .ui-icon{width:16px;height:16px}
.footer-column>p{font-size:.8125rem;line-height:1.7;color:#aaa89f;margin-top:13px}
.footer-contact{justify-self:end}
.footer-base{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px;color:#aaa89f;font-size:.625rem;line-height:1.6;letter-spacing:.03em}
.footer-credit{font-size:.75rem;letter-spacing:0}
.footer-credit strong{font-weight:400;color:var(--paper)}
/* Camada decorativa recortada no rodapé; os links continuam clicáveis. */
.site-footer{isolation:isolate}
.footer-logo-trail{display:none;position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.footer-trail-mark{position:absolute;display:block;width:clamp(108px,10vw,150px);aspect-ratio:96.64/188.87;opacity:0;transform-origin:center;pointer-events:none;filter:drop-shadow(0 0 1px #ffffff70) drop-shadow(3px 5px 4px #0008)}
.footer-trail-art{position:relative;display:block;width:100%;height:100%}
.footer-trail-art::before,.footer-trail-art::after{content:'';position:absolute;inset:0;-webkit-mask:url('assets/logo.svg') center/contain no-repeat;mask:url('assets/logo.svg') center/contain no-repeat}
.footer-trail-art::before{background:linear-gradient(135deg,#e4e4e4,#545454 42%,#b9b9b9 70%,#262626);transform:translate(2px,3px)}
.footer-trail-art::after{background:var(--trail-finish)}
.footer-trail-mark[data-finish="silver"]{--trail-finish:linear-gradient(125deg,#eeeeee 8%,#737373 30%,#fff 46%,#9e9e9e 60%,#e4e4e4 85%)}
.footer-trail-mark[data-finish="graphite"]{--trail-finish:linear-gradient(135deg,#0b0b0b 10%,#696969 30%,#151515 46%,#4b4b4b 65%,#080808 90%)}
.footer-trail-mark[data-finish="white"]{--trail-finish:linear-gradient(145deg,#fff 15%,#f1f1f1 55%,#cecece)}
.footer-trail-mark[data-finish="black"]{--trail-finish:linear-gradient(120deg,#030303 25%,#414141 42%,#080808 58%,#000 85%)}
.footer-trail-mark[data-finish="chrome"]{--trail-finish:linear-gradient(150deg,#333 8%,#fff 24%,#777 39%,#fafafa 52%,#272727 64%,#dadada 80%,#fff)}
.footer-trail-mark[data-finish="pearl"]{--trail-finish:linear-gradient(115deg,#fafafa 12%,#9c9c9c 38%,#f6f6f6 50%,#d2d2d2 72%,#fff)}
@media(min-width:1101px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .footer-logo-trail{display:block}
}
@media(min-width:701px) and (max-width:1100px){
 .site-footer .footer-wordmark{margin-top:86px;margin-bottom:69px}
 .desktop-nav{display:none}
 .menu-toggle{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:11px 16px;border:1px solid #73726b;border-radius:999px;background:transparent;font-size:.6875rem}
 .footer-column>a{min-height:44px}
}
@media(pointer:coarse){
 .desktop-nav>a,.footer-column>a,.specialty a,.portfolio-footer>.text-link{min-height:44px}
 .desktop-nav>a{display:inline-flex;align-items:center}
 .lightbox-media{grid-template-columns:44px minmax(0,1fr) 44px}
}
@media(max-width:700px){
 .menu-toggle{min-height:44px}
 .site-footer{container-type:inline-size;padding:24px 22px calc(24px + env(safe-area-inset-bottom))}
 .footer-topline{top:24px;right:22px;font-size:.5625rem}
 .site-footer .footer-wordmark{margin:-6px 0 20px;font-size:clamp(3rem,calc((100cqw - 124px)/2.913),6.25rem);line-height:1.22}
 .footer-wordmark>span{display:block}
 .closing-meta>.eyebrow{font-size:8px}
 .closing-meta>a{font-size:.5625rem;letter-spacing:0;gap:8px}
 .closing-cta>.closing-meta{gap:16px}
 .footer-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:19px 18px;padding-bottom:32px}
 .footer-column h2{font-size:.625rem;margin-bottom:8px}
 .footer-column>a{min-height:44px;font-size:.8125rem;gap:6px}
 .footer-column>p{font-size:.75rem}
 .footer-contact{justify-self:start}
 .footer-contact>a{flex-wrap:wrap}
 .footer-base{flex-wrap:wrap;gap:12px;padding-top:20px}
 .footer-credit{flex-basis:100%}
}