/* 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}
/* Contato e "Saiba mais" (página dedicada) lado a lado; em tela estreita o segundo desce. */
.service-links{display:flex;flex-wrap:wrap;column-gap:30px}
.panel-links{grid-column:2;justify-self:start;display:flex;flex-wrap:wrap;column-gap:32px;position:relative;z-index:1}
/* Formulário da página inicial com envio pelo site (apply.py, FORM_LIVE): e-mail, aceite, campo isca, verificação
   anti-robô e a confirmação que substitui o formulário. O .consent vence os estilos de .field label e .field input do pacote. */
.field .consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-weight:400;cursor:pointer}
.field .consent input{width:20px;height:20px;padding:0;margin:2px 0 0;accent-color:var(--wine)}
.field .consent span{font-size:13px;line-height:1.6;color:var(--ink)}
.field .consent a{color:var(--wine);text-underline-offset:3px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ts{margin-top:18px}.ts:empty{display:none}
form[hidden]{display:none!important}
.form-done{margin-top:26px;outline:0}
.form-done::before{content:'';display:block;width:44px;height:1px;margin-bottom:22px;background:#dcbc98}
.form-done-t{margin-bottom:12px;font:400 30px/1.15 var(--serif);color:var(--wine)}
.form-done p:not(.form-done-t){font-size:15px;line-height:1.6;color:var(--ink)}
.form-again{margin-top:20px;padding:0;min-height:44px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--wine);font:600 14px/1.4 var(--ui);cursor:pointer}
.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 champagne dourado do tema
   (#DCBC98, 11,2:1), no lugar do laranja ELEVEN11, para o crédito conversar com a marca do site. */
.footer .footer-credit{display:flex;justify-content:center;width:100%;margin-top:26px;padding-top:22px;border-top:1px solid #ecd3b51f}
.studio-credit{--credit-accent:#dcbc98;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:var(--credit-accent);border:1px solid #dcbc9873;transition:border-color .45s ease}
.studio-credit:hover .studio-credit-tag{border-color:var(--credit-accent)}
.studio-credit-accent{fill:var(--credit-accent)}
.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}

/* --- Identificação profissional (art. 44 do Código de Ética da OAB) ---------------------------------------------------
   Assinatura da seção Escritório: nome no itálico da Bodoni, inscrição em versalete da Manrope. Vinho 9,3:1 e
   cinza 5,0:1 sobre #efe6da. */
.office-copy>p.office-signature{display:flex;flex-direction:column;gap:7px;margin:30px 0 0;color:var(--wine)}
.office-signature-name{font:italic 400 27px/1.15 var(--serif);letter-spacing:-.01em}
.office-signature-role{font:500 12px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Rodapé: footer.css (o mesmo das landing pages), anexado a este arquivo pelo apply.py. */

/* --- Navegação entre páginas ------------------------------------------------------------------------------------------
   Transição entre documentos (página inicial e landing pages): a página que sai esmaece e a que entra sobe 12 px.
   Navegadores sem suporte trocam de página como sempre. */
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:rl-vt-out .32s ease both}
 ::view-transition-new(root){animation:rl-vt-in .55s cubic-bezier(.2,.7,.2,1) both}
 @keyframes rl-vt-out{to{opacity:0}}
 @keyframes rl-vt-in{from{opacity:0;transform:translateY(12px)}}
}

/* --- 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}
}

/* Propriedade intelectual: a mesma seção vinho de Família, espelhada (brilho e palavra de fundo à direita), para as duas
   frentes escuras da página não parecerem repetidas. */
.ip{background:radial-gradient(ellipse at 90% 85%,#700021 0%,#440012 65%)}
.ip .family-word{left:auto;right:-15px}
/* Links no texto de pensão (leva v3): revisão, cobrança e exoneração levam às páginas dedicadas. Vence .service-body a do pacote. */
.service-body p a.inline-link{display:inline;margin:0;padding:0;font-size:inherit;color:#ecd3b5;border-bottom:0;text-decoration:underline;
 text-decoration-color:#dcbc9880;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s ease}
.service-body p a.inline-link:hover{text-decoration-color:#ecd3b5}
/* ELEVEN11 · rodapé único da Rocha Leão (página inicial, landing pages). Fundo noite com brilho vinho, frase da marca,
   quatro colunas e o nome monumental em Bodoni Moda, o mesmo da hero da página inicial. Contraste sobre #180008:
   champagne 13,9:1, #c9ab95 8,9:1, #b99b89 7,6:1. Movimento só onde há suporte a animação por rolagem e sem preferência
   por movimento reduzido; sem suporte, tudo aparece parado e completo. */
.site-footer{--sf-cream:#ecd3b5;--sf-gold:#dcbc98;--sf-soft:#c9ab95;--sf-dim:#b99b89;--sf-line:#ecd3b521;--focus:#ecd3b5;
 position:relative;isolation:isolate;overflow:hidden;background:#180008;color:var(--sf-soft);padding:clamp(72px,9vw,136px) 0 28px;
 font-family:var(--ui)}
.site-footer p{margin:0;max-width:none}
.site-footer ul{margin:0;padding:0;list-style:none}
.site-footer :where(a,button):focus-visible{outline:2px solid var(--sf-cream);outline-offset:3px}
.sf-glow{position:absolute;z-index:-1;left:-10%;right:-10%;top:-35%;height:85%;pointer-events:none;
 background:radial-gradient(ellipse 46% 58% at 24% 52%,#7800204d,transparent 72%),radial-gradient(ellipse 36% 46% at 84% 30%,#4d001573,transparent 72%)}
.sf-wrap{width:min(1200px,100% - 2*clamp(20px,5vw,72px));margin-inline:auto;container-type:inline-size}

/* Abertura: frase da marca e convite */
.sf-lead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:36px 64px;padding-bottom:clamp(48px,6vw,84px);border-bottom:1px solid var(--sf-line)}
.sf-statement{max-width:14em;font:500 clamp(30px,2.4vw + 14px,56px)/1.08 var(--ui);letter-spacing:-.032em;color:var(--sf-cream);text-wrap:balance}
.sf-statement em{display:block;margin-top:.12em;font:italic 400 1.06em/1.08 var(--serif);letter-spacing:-.02em;color:var(--sf-gold)}
.sf-cta{display:inline-flex;align-items:center;gap:18px;min-height:56px;color:var(--sf-cream);font:600 17px/1.3 var(--ui);text-decoration:none}
.sf-cta .sf-arrow{box-sizing:content-box;width:20px;height:20px;padding:17px;border:1px solid #ecd3b566;border-radius:50%;
 transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.sf-cta:hover .sf-arrow,.sf-cta:focus-visible .sf-arrow{background:var(--sf-cream);border-color:var(--sf-cream);color:#4d0015;transform:rotate(45deg)}

/* Colunas */
.sf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;padding-block:clamp(44px,5vw,64px)}
.sf-h{margin-bottom:18px!important;font:500 12px/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--sf-dim)}
.sf-col{font-size:16px;line-height:1.6}
.sf-col p+p{margin-top:6px}
.sf-col ul+.sf-h,.sf-col p+.sf-h{margin-top:36px!important}
.sf-col a{display:inline-flex;align-items:center;min-height:44px;color:var(--sf-cream);text-decoration:none;
 background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size .4s cubic-bezier(.2,.7,.2,1),color .3s ease}
.sf-col a:hover,.sf-col a:focus-visible{background-size:100% 1px}
.sf-col a[aria-current=page]{color:var(--sf-dim)}
.sf-col a[aria-current=page]::after{content:'';width:5px;height:5px;margin-left:10px;border-radius:50%;background:var(--sf-gold)}
.sf-name{font:italic 400 24px/1.2 var(--serif);color:var(--sf-cream)}
.sf-muted{color:var(--sf-dim);font-size:15px}
.sf-inline{min-height:auto!important}

/* Nome monumental: duas palavras distribuídas na largura, como o masthead da hero da página inicial */
.sf-mark{display:flex;justify-content:space-between;gap:2%;margin-top:clamp(8px,2vw,24px);padding-bottom:.04em;text-decoration:none;
 font:400 16.4cqi/.86 var(--serif);font-optical-sizing:none;font-variation-settings:'opsz' 96,'wght' 400;letter-spacing:-.06em;
 text-transform:uppercase;white-space:nowrap;view-timeline:--sfmark block}
/* O til do à fica acima da caixa da letra: o respiro no topo entra no recorte do gradiente (background-clip:text). */
.sf-mark span{display:block;padding:.2em .06em 0 0;margin-top:-.2em;background:linear-gradient(180deg,#ecd3b5 30%,#dcbc98 60%,#ecd3b51a 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .4s ease}
.sf-mark:hover span{opacity:.86}

/* Base */
.sf-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;margin-top:clamp(28px,3vw,40px);
 padding-top:20px;border-top:1px solid var(--sf-line);font-size:13px;line-height:1.6;color:var(--sf-dim)}
.sf-actions{display:flex;align-items:center;gap:8px 28px}
.sf-text{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--sf-soft);
 font:500 13px/1.4 var(--ui);text-decoration:none;cursor:pointer;transition:color .3s ease}
.sf-text:hover,.sf-text:focus-visible{color:var(--sf-cream)}
.sf-text .sf-arrow{width:16px;height:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sf-text:hover .sf-arrow{transform:translateY(-3px)}
.site-footer .footer-credit{display:flex;justify-content:center;width:100%;margin-top:18px;padding-top:18px;border-top:1px solid var(--sf-line)}

/* Movimento ligado à rolagem: a frase e as colunas sobem ao entrar; o nome monumental emerge de baixo, palavra por palavra.
   Só faixas de entrada (entry): o rodapé fica no fim do documento e faixas de cover podem nunca terminar. */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .sf-lead,.sf-col{animation:sf-rise both cubic-bezier(.2,.7,.2,1);animation-timeline:view();animation-range:entry calc(var(--d,0) * 6%) entry calc(75% + var(--d,0) * 6%)}
  .sf-mark span{animation:sf-mark both cubic-bezier(.2,.7,.2,1);animation-timeline:--sfmark;animation-range:entry 0% entry 100%}
  .sf-mark span+span{animation-range:entry 18% entry 100%}
  @keyframes sf-rise{from{opacity:0;transform:translateY(36px)}}
  @keyframes sf-mark{from{opacity:0;transform:translateY(42%)}}
 }
}

@media (max-width:959px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
 .site-footer{padding-bottom:104px}
 .sf-lead{align-items:flex-start}
 .sf-grid{gap:36px 20px}
 .sf-name{font-size:22px}
 .sf-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){.sf-grid{grid-template-columns:minmax(0,1fr)}}