/* ELEVEN11 · refino da Rocha Leão: tipografia, cabeçalho, custo do movimento e mobile. Carregado depois de hero-reference.css. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Tipografia ------------------------------------------------------------------------------------------------------
   Duas famílias: Manrope (interface) e Bodoni Moda (editorial). A Cormorant saiu: números, marcas-d'água e o itálico do
   contato passam para a Bodoni Moda, a mesma do nome monumental, e o itálico agora é desenhado (antes era o romano inclinado). */
body{font-kerning:normal;text-rendering:optimizeLegibility}
/* O −0,035 em da Manrope colava letras nos títulos de 30 a 46 px. */
h1,h2,h3{letter-spacing:-.022em}
.hero h1{letter-spacing:-.025em}
.service summary{letter-spacing:-.012em}
.path-index{font-size:36px;line-height:1.05}
.step-number{font-size:60px;line-height:1}
.panel-number{font-size:190px;bottom:-40px}
.display-italic{font:italic 400 1.08em/1.12 var(--serif);letter-spacing:-.03em}
/* Nome monumental: as letras C e H se tocavam em −0,065 em. */
.masthead{letter-spacing:-.052em}
/* Piso de leitura: rótulos de 7 a 10 px subiram para 11–12 px; texto auxiliar para 13–14 px. */
.eyebrow,.office-copy .eyebrow,.family-intro .eyebrow,.benefit-panel .eyebrow,.form-panel>.eyebrow{font-size:12px}
.hero-kicker{font-size:12px;letter-spacing:.14em}
.hero-bottom,.hero-bottom .motion-toggle,.scroll-cue,.motion-toggle{font-size:12px}
.path-label{font-size:11px;letter-spacing:.16em}
.service-no{font-size:12px}
.service-body a{font-size:13px}
.benefit-tabs button{font-size:14px}
.benefit-tabs button>span{font-size:11px}
.family-signature{font-size:11px}
.office-values{font-size:12px;letter-spacing:.03em}
.office-copy .text-link,.contact-copy .text-link,.benefit-panel .text-link{font-size:14px}
.contact-copy .small{font-size:13px!important}
.field input::placeholder{font-size:14px}
.form-privacy{font-size:13px}
.footer-top>p{font-size:14px;line-height:1.6}
.back-top{font-size:13px}
.footer-bottom{font-size:12px}
.prototype-caption{font-size:12px;line-height:1.6}
.floating-contact{font-size:13px}

/* --- Cabeçalho -------------------------------------------------------------------------------------------------------
   Fixo desde o topo, transparente sobre a hero, com fundo que entra em transição logo no início da rolagem. Antes ele rolava
   junto e reaparecia de repente aos 100 px. Sem backdrop-filter: o fundo já é quase opaco, e o desfoque recompunha a tela
   a cada quadro de rolagem no celular. A logo encolhe por transform, sem refazer layout. */
.header,.header.is-scrolled{position:fixed;-webkit-backdrop-filter:none;backdrop-filter:none}
.header{transition:background-color .45s ease,box-shadow .45s ease,height .45s cubic-bezier(.2,.7,.2,1)}
.header.is-scrolled{background:#2e000df7}
.header .brand{transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.header.is-scrolled .brand{width:260px;transform:scale(.85)}

/* --- Movimento --------------------------------------------------------------------------------------------------------
   Camadas grandes da hero em camada própria de compositor. O grão em soft-light (opacidade 4,5 %) obrigava a recompor a
   mistura a cada quadro de parallax; a textura vinho já tem grão fotográfico. */
.hero-backdrop{will-change:transform}
.hero-grain{display:none}
.hero-stage{contain:paint}

/* --- Créditos ELEVEN11 (padrão dos sites do estúdio, nos tons do rodapé noite da Rocha Leão) ----------------------------
   Tom discreto pela cor (#B99B89 sobre #180008, 7,6:1), não por opacidade. Selo e "11" no laranja ELEVEN11 (7,7:1). */
.footer .footer-credit{display:flex;justify-content:center;width:100%;margin-top:26px;padding-top:22px;border-top:1px solid #ecd3b51f}
.studio-credit{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px 16px;min-height:44px;color:#b99b89;font:500 11px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;transition:color .45s ease}
.studio-credit:hover,.studio-credit:focus-visible{color:var(--cream)}
.studio-credit-brand{display:inline-flex;align-items:center;gap:9px}
.studio-credit-mark{height:12px;width:auto;display:block}
.studio-credit-tag{font-size:9px;letter-spacing:.2em;padding:4px 7px 3px;border-radius:999px;color:#fb923c;border:1px solid #fb923c73;transition:border-color .45s ease}
.studio-credit:hover .studio-credit-tag{border-color:#fb923c}
.studio-credit-url:before{content:"\00b7";margin-right:16px;opacity:.6}

/* Invisíveis também para o teclado e o toque: o aviso e o botão flutuante saíam da tela por transform, mas continuavam
   focáveis e clicáveis (e o aviso vazio podia aparecer como uma faixa escura no rodapé de telas baixas). */
.toast{visibility:hidden;transition:transform .3s,visibility 0s .3s}
.toast.show{visibility:visible;transition:transform .3s}
.floating-contact{visibility:hidden;transition:transform .3s,opacity .3s,visibility 0s .3s}
.floating-contact.visible{visibility:visible;transition:transform .3s,opacity .3s}

/* --- Telas médias e celular ------------------------------------------------------------------------------------------- */
@media(min-width:1101px){.office-watermark{font-size:280px;letter-spacing:-.04em}}
@media(min-width:801px) and (max-width:1100px){.header.is-scrolled .brand{width:220px;transform:scale(.88)}.portrait-wrap{left:43%}}
@media(max-width:800px){
 .header.is-scrolled{height:68px}
 .header.is-scrolled .brand{width:205px;transform:scale(.88)}
 .hero-kicker{letter-spacing:.07em}
 .footer .footer-credit{padding-top:18px}
 .studio-credit{letter-spacing:.1em;gap:8px 12px}
 .studio-credit-url{flex-basis:100%;text-align:center}
 .studio-credit-url:before{content:none}
 .menu-toggle{min-width:44px;justify-content:flex-end}
}
@media(max-width:500px){
 .hero-kicker{letter-spacing:.04em}
 .path p{max-width:none}
 /* Os algarismos da Bodoni são mais largos que os da Cormorant: coluna e corpo ajustados para o 02 não tocar o texto. */
 .process-step{grid-template-columns:62px 1fr;column-gap:16px}
 .step-number{font-size:46px;line-height:1.05}
 .office-values{gap:10px 16px}
 .footer-bottom{gap:6px 24px}
}
@media(max-width:350px){
 .header.is-scrolled .brand{width:180px;transform:scale(.9)}
 .hero-kicker{font-size:11px;letter-spacing:.02em}
 .hero-bottom .motion-toggle,.scroll-cue{font-size:11px}
}