/* =========================================================================
   Agência Mestre · site
   Fundamentos do tema novo. Derivado do Design System das propostas
   (tinta e papel, Outfit, peso como hierarquia), adaptado para página que
   rola, celular primeiro e conversão. Este arquivo vira o style.css do tema.
   ========================================================================= */

/* ---------- 0. FONTE ---------- */
/* Outfit variável (licença OFL), só o latin, hospedada no próprio site e pré-carregada no head. */
@font-face{font-family:'Outfit';src:url('fonts/outfit-latin-wght.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:optional;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* fonte reserva */
/* Enquanto a Outfit carrega, o texto aparece numa fonte do aparelho ajustada para ocupar o mesmo espaço,
   e a troca não mexe no layout. Valores medidos contra a Outfit em 22/10/2026 (largura média de um texto real
   em cada peso; altura: Outfit 1,00 acima e 0,26 abaixo da linha de base). Arial no computador e no iPhone,
   Roboto no Android. */
@font-face{font-family:'Outfit Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Arimo');font-weight:100 500;
  size-adjust:98.9%;ascent-override:101.1%;descent-override:26.3%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arimo Bold');font-weight:600 700;
  size-adjust:95.8%;ascent-override:104.4%;descent-override:27.1%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arimo Bold');font-weight:800 900;
  size-adjust:102%;ascent-override:98%;descent-override:25.5%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback Android';src:local('Roboto'),local('Roboto-Regular');font-weight:100 500;
  size-adjust:100%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback Android';src:local('Roboto Bold'),local('Roboto-Bold'),local('Roboto');font-weight:600 700;
  size-adjust:101.8%;ascent-override:98.2%;descent-override:25.5%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback Android';src:local('Roboto Bold'),local('Roboto-Bold'),local('Roboto');font-weight:800 900;
  size-adjust:105%;ascent-override:95.2%;descent-override:24.8%;line-gap-override:0%}

/* ---------- 1. TOKENS ---------- */
:root{
  /* tinta e papel (kit das propostas) */
  --ink:#0a0a0a;
  --paper:#f4f2ed;
  --grey:#6b6760;      /* texto de apoio no papel (5,0:1) */
  --grey-d:#93908a;    /* texto de apoio no escuro (6,2:1) */
  --mid:#4a4740;
  --tone:#e3dfd4;
  --tone-ink:#151515;
  --line:#dcd8cc;
  --line-d:#2a2a2a;    /* réguas e bordas no escuro */

  /* site */
  --text:#2b2925;      /* corpo de leitura longa no papel (13,0:1) */
  --surface:#faf9f6;   /* cartão levemente acima do papel */
  --yellow:#ffcb00;    /* acento único da marca: botão, marca-texto, progresso */
  --yellow-h:#ffd633;
  --erro:#b3261e;
  --sucesso:#1d6b32;

  /* tipografia */
  --font:'Outfit','Outfit Fallback','Outfit Fallback Android',sans-serif;
  --fs-display:clamp(3rem,1.8rem + 5vw,6rem);
  --fs-h1:clamp(2.25rem,1.55rem + 2.9vw,4rem);
  --fs-hub:clamp(2.5rem,1.6rem + 3.2vw,4.25rem); /* H1 dos topos de lista: Serviços, Cases, Clientes, Materiais Ricos, Blog, Categoria, Autor */
  --fs-h2:clamp(1.875rem,1.4rem + 2vw,3rem);
  --fs-h3:clamp(1.375rem,1.2rem + .7vw,1.75rem);
  --fs-lead:clamp(1.1875rem,1.05rem + .55vw,1.5rem);
  --fs-read:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --fs-body:1rem;
  --fs-small:.9375rem;
  --fs-xs:.875rem;
  --fs-kicker:.875rem;  /* 14px no celular e no tablet; 12px a partir de 1024px */

  /* espaço */
  --gutter:clamp(1rem,.4rem + 3vw,3rem);
  --container:1240px;
  --measure:42rem;      /* ~68 caracteres no corpo do post */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:clamp(2rem,1.25rem + 3vw,4rem);

  --header-h:4.25rem;
  --tap:2.75rem;        /* alvo de toque mínimo (44px) */

  /* camadas */
  --z-sticky-cta:80; --z-drawer:90; --z-header:100; --z-progress:110; --z-skip:200;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;font-weight:400;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:1024px){:root{--fs-xs:.8125rem;--fs-kicker:.75rem}}
@media (max-width:639px){:root{--fs-hub:clamp(2.125rem,1.6rem + 2.4vw,2.5rem)}}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
/* títulos usam a largura toda (regra do design system): pretty só evita uma palavra sozinha na última linha; balance igualava as linhas e o título parava no meio da tela */
h1,h2,h3,h4{line-height:1.12;font-weight:700;text-wrap:pretty;letter-spacing:-.015em;overflow-wrap:break-word;hyphens:manual}
p{text-wrap:pretty}
::selection{background:var(--yellow);color:var(--ink)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow)}
/* cartão claro dentro de uma faixa escura (formulário do topo): o contorno volta a ser tinta, o amarelo sumiria no papel */
.dark .light :focus-visible{outline-color:var(--ink)}

.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-skip);background:var(--yellow);color:var(--ink);
  padding:.75rem 1.25rem;font-weight:700;text-decoration:none}
.skip-link:focus{top:.75rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 3. LAYOUT ---------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.section{padding-block:var(--s6)}
/* nunca maior que .section: no celular --s6 começa em 32px e --s4 é fixo em 40px */
.section--tight{padding-block:min(var(--s4),var(--s6))}
/* régua entre seções seguidas no mesmo fundo (Home, Post, Serviço, Clientes) */
.section--rule{border-top:1px solid var(--line)}
.dark{background:var(--ink);color:var(--paper);position:relative;isolation:isolate}
.light{background:var(--paper);color:var(--ink)}
.cols{display:grid;gap:var(--s4)}
@media (min-width:768px){
  .c2{grid-template-columns:repeat(2,1fr)}
  .c3{grid-template-columns:repeat(3,1fr)}
  .c4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){.c4{grid-template-columns:repeat(4,1fr)}}

/* grão nos fundos escuros */
.dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* decorativos: sempre z-index:-1 dentro de um pai com isolation:isolate */
.diag{position:absolute;top:-6rem;bottom:-6rem;width:clamp(56px,9vw,150px);z-index:-1;background:var(--tone-ink);
  transform:skewX(-16deg);pointer-events:none}
.light .diag{background:#ece8dd}
.ghost{position:absolute;left:50%;top:50%;z-index:-1;transform:translate(-50%,-50%);font-weight:900;
  font-size:clamp(7rem,24vw,26rem);line-height:.8;letter-spacing:-.01em;color:#101010;pointer-events:none;
  user-select:none;white-space:nowrap}

/* ---------- 4. TIPOGRAFIA ---------- */
.kicker{display:block;font-weight:500;font-size:var(--fs-kicker);letter-spacing:.3em;text-transform:uppercase;color:var(--grey)}
.dark .kicker{color:var(--grey-d)}
.t-display{font-weight:900;font-size:var(--fs-display);line-height:.95;letter-spacing:-.025em}
.t-h1{font-weight:700;font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.025em}
.t-h2{font-weight:700;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em}
.t-h3{font-weight:700;font-size:var(--fs-h3);line-height:1.2}
.t-lead{font-size:var(--fs-lead);line-height:1.45;font-weight:400}
.t-body{font-size:var(--fs-body);line-height:1.65;color:var(--grey)}
.t-small{font-size:var(--fs-small);line-height:1.55;color:var(--grey)}
.dark .t-body,.dark .t-small,.dark .t-lead{color:var(--grey-d)}
.dark .t-body,.dark .t-small{font-weight:500}
.b{font-weight:700}.bk{font-weight:900}.lt{font-weight:300}
.muted{color:var(--grey)}.dark .muted{color:var(--grey-d)}
.dark .b,.dark .bk{color:var(--paper)}
.mt1{margin-top:.75rem}.mt2{margin-top:1.5rem}.mt3{margin-top:2.5rem}.mt4{margin-top:4rem}

/* número protagonista */
.num{font-weight:900;font-size:clamp(3rem,2rem + 4vw,5.5rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num small{font-size:.45em;font-weight:700;letter-spacing:0;margin-left:.05em}
.source{font-size:var(--fs-xs);color:var(--grey);letter-spacing:.02em}
.dark .source{color:var(--grey-d)}

/* ---------- 5. RÉGUAS, CAIXAS E ETIQUETAS ---------- */
.hr{height:1px;background:var(--line);border:0;width:100%}
.dark .hr{background:var(--line-d)}
.rule-top{border-top:2px solid var(--ink);padding-top:1.25rem}
.dark .rule-top{border-top-color:var(--paper)}
.inkbox{background:var(--ink);color:var(--paper);padding:clamp(1.5rem,1rem + 2vw,2.5rem)}
.inkbox .lbl{font-weight:500;font-size:var(--fs-kicker);letter-spacing:.3em;text-transform:uppercase;color:var(--grey-d)}
.inkbox p{color:var(--paper)}
.chip{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--ink);padding:.55em .95em;font-size:var(--fs-small);line-height:1.2}
.dark .chip{border-color:#3a3a3a}
.tag{display:inline-block;background:var(--ink);color:var(--paper);font-size:.6875rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;padding:.45em .8em;text-decoration:none;line-height:1.2}
.dark .tag{background:var(--paper);color:var(--ink)}
.mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding-inline:.05em}

/* ---------- 6. BOTÕES ---------- */
.btn{--bg:var(--yellow);--fg:var(--ink);--bd:var(--yellow);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3rem;padding:.8em 1.4em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);font-weight:700;font-size:1rem;line-height:1.1;
  text-decoration:none;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease)}
.btn svg{width:1.1em;height:1.1em;flex:none;transition:transform .35s var(--ease)}
.btn:active{transform:translateY(1px)}
@media (hover:hover){.btn:hover svg{transform:translateX(3px)}}
.btn--primary:hover{--bg:var(--yellow-h);--bd:var(--yellow-h)}
.btn--secondary{--bg:transparent;--fg:var(--ink);--bd:var(--ink)}
.btn--secondary:hover{--bg:var(--ink);--fg:var(--paper)}
.dark .btn--secondary{--fg:var(--paper);--bd:var(--paper)}
.dark .btn--secondary:hover{--bg:var(--paper);--fg:var(--ink)}
.btn--sm{min-height:2.5rem;padding:.6em 1em;font-size:var(--fs-small)}
@media (pointer:coarse){.btn--sm{min-height:var(--tap)}a.tag{padding-block:.95em}}
.btn--lg{min-height:3.5rem;padding:1em 1.75em;font-size:1.0625rem}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15em}
.link-arrow svg{width:1em;height:1em;transition:transform .35s var(--ease)}
@media (hover:hover){.link-arrow:hover svg{transform:translateX(3px)}}
/* área de toque maior sem mudar o desenho do link */
.link-arrow{position:relative}
.link-arrow::before{content:"";position:absolute;inset:-.75rem -.25rem}

/* ---------- 7. FORMULÁRIOS (marcação do Gravity Forms) ---------- */
.gform_wrapper{--fbd:var(--ink);--fbg:var(--surface)}
.dark .gform_wrapper{--fbd:#3a3a3a;--fbg:#111}
.light .gform_wrapper{--fbd:var(--ink);--fbg:var(--surface)}
.gform_fields{list-style:none;display:grid;gap:1.25rem}
.gfield_label{display:block;font-weight:500;font-size:var(--fs-small);margin-bottom:.4rem}
.gfield_required{color:var(--grey);font-weight:400}
/* um espaço no lugar da margem: quando o rótulo quebra, o "(obrigatório)" começa a segunda linha alinhado, sem recuo */
.gfield_required::before{content:" "}
.ginput_container input[type=text],.ginput_container input[type=email],.ginput_container input[type=tel],
.ginput_container input[type=url],.ginput_container select,.ginput_container textarea{
  width:100%;min-height:3rem;padding:.75rem .9rem;background:var(--fbg);border:1px solid var(--fbd);border-radius:0;
  font-size:1rem;line-height:1.3;transition:box-shadow .2s var(--ease)}
.ginput_container textarea{min-height:8rem;resize:vertical}
.ginput_container select{appearance:none;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1rem}
.ginput_container input:focus,.ginput_container select:focus,.ginput_container textarea:focus{outline:none;box-shadow:0 0 0 3px var(--yellow)}
.ginput_container ::placeholder{color:var(--grey);opacity:1}
.ginput_container select:invalid{color:var(--grey)}
.ginput_container select option{color:var(--ink)}
.dark .gform_wrapper ::placeholder{color:var(--grey-d)}
.light .gform_wrapper ::placeholder{color:var(--grey)}
.gfield_description{font-size:var(--fs-xs);color:var(--grey);margin-top:.35rem}
.gfield_checkbox{list-style:none;display:grid;gap:.5rem}
.gchoice{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-small)}
.gchoice input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--ink);flex:none}
.gfield_error input,.gfield_error select,.gfield_error textarea{border-color:var(--erro);border-width:2px}
.validation_message{color:var(--erro);font-size:var(--fs-xs);font-weight:500;margin-top:.35rem}
.gform_validation_errors{border:2px solid var(--erro);padding:1rem;margin-bottom:1.25rem;color:var(--erro);font-weight:500;font-size:var(--fs-small)}
.gform_footer{margin-top:1.5rem}
.gform_confirmation_message{border-top:2px solid var(--sucesso);padding-top:1rem;font-weight:500}
.form-inline .gform_body{flex:1}
.form-inline form{display:flex;flex-direction:column;gap:.75rem}
@media (min-width:560px){.form-inline form{flex-direction:row;align-items:flex-end}.form-inline .gform_footer{margin:0}}

/* ---------- 8. CABEÇALHO ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--yellow);transform-origin:left;transform:scaleX(0);z-index:var(--z-progress)}
.notice{background:var(--yellow);color:var(--ink);font-size:var(--fs-small)}
.notice .container{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center;justify-content:center;padding-block:.6rem;text-align:center}
.notice a{font-weight:700;display:inline-flex;align-items:center;min-height:var(--tap)}

.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line-d)}
.site-header .container{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--paper);text-decoration:none;flex:none}
.brand__logo{display:block;height:1.75rem;width:auto;aspect-ratio:874.25/232.43}
.site-footer .brand{color:#fff}
.site-footer .brand__logo{height:2.25rem}
.tagline{margin-top:.75rem;font-size:var(--fs-small);font-weight:500;color:var(--paper)}
.nav{margin-left:auto;display:none}
.nav>ul{list-style:none;display:flex;align-items:center;gap:.25rem}
.nav a,.nav button{display:inline-flex;align-items:center;gap:.35em;padding:.55rem .7rem;font-size:.9375rem;font-weight:500;
  text-decoration:none;color:rgba(244,242,237,.82);background:none;border:0;cursor:pointer;transition:color .2s}
.nav a:hover,.nav button:hover,.nav [aria-current=page],.nav button[aria-expanded=true]{color:var(--paper)}
.nav button svg{width:.9em;height:.9em;transition:transform .3s var(--ease)}
.nav button[aria-expanded=true] svg{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.icon-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;background:none;border:0;color:var(--paper);cursor:pointer}
.icon-btn svg{width:1.35rem;height:1.35rem}
.header-actions .btn{display:none;transition:opacity .25s var(--ease),visibility .25s}
.form-in-view .header-actions .btn{opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:1100px){
  .nav{display:block}
  .header-actions{margin-left:0}
  .header-actions .btn{display:inline-flex}
  .menu-toggle{display:none}
}

/* menu de serviços (desktop) */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  display:none}
.mega.is-open{display:block}
.mega .container{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;height:auto;align-items:start;padding-block:2.5rem}
.mega a{text-decoration:none}
/* nome da área no menu: parágrafo, não título (a navegação não entra na hierarquia de títulos da página, que começa no H1) */
.mega__title{font-size:1rem;font-weight:700;letter-spacing:-.005em;line-height:1.3;text-wrap:balance;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--line-d)}
.mega__title a{display:block;color:var(--paper);transition:color .2s var(--ease)}
.mega__title a:hover{color:var(--yellow)}
.mega ul{list-style:none;display:grid;gap:.1rem}
.mega li a{display:block;padding:.35rem 0;font-size:.9375rem;font-weight:400;line-height:1.35;color:rgba(244,242,237,.72);text-wrap:balance;transition:color .2s var(--ease),transform .25s var(--ease)}
.mega li a:hover,.mega li a:focus-visible{color:var(--paper);transform:translateX(3px)}
.mega-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-d);padding-top:1.5rem}
.mega-foot .t-small{color:var(--grey-d)}
.mega-foot .link-arrow{color:var(--paper)}

/* busca */
.search-panel{background:var(--ink);border-bottom:1px solid var(--line-d);display:none}
.search-panel.is-open{display:block}
.search-panel form{display:flex;gap:.5rem;padding-block:1rem}
.search-panel input{flex:1;min-height:3rem;padding:.75rem 1rem;background:#111;border:1px solid #3a3a3a;color:var(--paper);font-size:1.0625rem}
.search-panel input:focus{outline:none;box-shadow:0 0 0 3px var(--yellow)}

/* menu do celular */
.drawer{position:fixed;inset:var(--header-h) 0 0 0;background:var(--ink);color:var(--paper);overflow-y:auto;overscroll-behavior:contain;z-index:var(--z-drawer);
  padding:1rem var(--gutter) 6rem;display:none}
.drawer.is-open{display:block}
.drawer ul{list-style:none}
.drawer>nav>ul>li{border-bottom:1px solid var(--line-d)}
.drawer>nav>ul>li>a,.drawer summary{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;font-size:1.375rem;
  font-weight:500;text-decoration:none;cursor:pointer;list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary svg{width:1.1rem;height:1.1rem;transition:transform .3s var(--ease)}
.drawer details[open] summary svg{transform:rotate(180deg)}
.drawer details ul{padding:0 0 1rem}
.drawer details li a{display:block;padding:.5rem 0;color:rgba(244,242,237,.8);text-decoration:none}
.drawer details li.grp>a{color:var(--paper);font-weight:700;margin-top:.5rem}
.drawer .btn{margin-top:2rem}
@media (min-width:1100px){.drawer{display:none!important}}
body.no-scroll{overflow:hidden}

/* ---------- 9. TRILHA (BREADCRUMB) ---------- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .6rem;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.crumbs li{display:flex;gap:.6rem;align-items:center;color:var(--grey)}
.dark .crumbs li{color:var(--grey-d)}
.crumbs li+li::before{content:"/";opacity:.5}
.crumbs a{position:relative;text-decoration:none;display:inline-flex;align-items:center;min-height:2rem}
/* área de toque de 44px sem mudar o desenho da trilha */
.crumbs a::after{content:"";position:absolute;inset:-.375rem 0}
.crumbs a:hover{text-decoration:underline;text-underline-offset:.25em}
.crumbs [aria-current]{color:inherit}
/* celular: a trilha fica numa linha; um nome longo no fim ("A Agência Mestre e Sua História") é cortado com reticências
   em vez de quebrar com a barra no começo da linha de baixo. O nome inteiro continua no HTML e no H1 logo abaixo */
@media (max-width:639px){
  .crumbs ol{flex-wrap:nowrap}
  .crumbs li{flex:none}
  .crumbs li:last-child{flex:0 1 auto;min-width:0}
  .crumbs li:last-child a{display:block;min-width:0;line-height:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- 10. CARTÕES ---------- */
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative}
.card__img{aspect-ratio:3/2;overflow:hidden;background:var(--tone);border:1px solid var(--ink)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.card:hover .card__img img{transform:scale(1.035)}}
.card__meta{display:flex;gap:.75rem;align-items:center;margin-top:1rem;font-size:var(--fs-xs);color:var(--grey);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.card__title{font-size:1.25rem;line-height:1.25;margin-top:.5rem;font-weight:700;letter-spacing:-.01em}
.card__title a{text-decoration:none}
/* link esticado no ::before: no ::after (posição absoluta no fim do texto) o Chromium ignora o text-wrap:pretty e sobra palavra sozinha */
.card__title a::before{content:"";position:absolute;inset:0}
@media (hover:hover){.card:hover .card__title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}}
.card:active .card__img img{opacity:.85}
.card__excerpt{margin-top:.5rem}

/* artigos recomendados: no celular, lista com miniatura ao lado; no desktop, 4 colunas em 2 linhas */
.picks{list-style:none;display:grid;gap:1.25rem;margin-top:var(--s3)}
.pick{position:relative;display:grid;grid-template-columns:7rem 1fr;gap:1rem;align-items:start}
.pick__img{aspect-ratio:3/2;overflow:hidden;background:var(--tone);border:1px solid var(--ink)}
.pick__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pick__cat{display:block;font-size:var(--fs-xs);color:var(--grey);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.pick__title{font-size:1rem;line-height:1.3;margin-top:.25rem;font-weight:700;letter-spacing:-.01em}
.pick__title a{text-decoration:none}
.pick__title a::before{content:"";position:absolute;inset:0}
@media (hover:hover){.pick:hover .pick__img img{transform:scale(1.035)}.pick:hover .pick__title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}}
.pick:active .pick__img img{opacity:.85}
@media (min-width:600px){.picks{grid-template-columns:repeat(2,1fr);gap:1.5rem 2rem}}
@media (min-width:1024px){
  .picks{grid-template-columns:repeat(4,1fr);gap:2.5rem 2rem}
  .pick{grid-template-columns:1fr;gap:0}
  .pick__cat{margin-top:1rem}
  .pick__title{font-size:1.125rem;line-height:1.25;margin-top:.5rem}
}

.case-card{border-top:2px solid var(--ink);padding-top:1.25rem;display:flex;flex-direction:column;gap:.5rem;text-decoration:none}
.case-card .num{font-size:clamp(2.75rem,2rem + 2.5vw,4rem)}
.case-card:hover .b{text-decoration:underline;text-underline-offset:.2em}

.service-card{border:1px solid var(--ink);padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;text-decoration:none;background:var(--surface);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.service-card .t-small{transition:color .3s var(--ease)}
.service-card:hover{background:var(--ink);color:var(--paper)}
.service-card:hover .t-small{color:var(--grey-d)}
.service-card .arrow{margin-top:auto;width:1.25rem;height:1.25rem}

/* ---------- 11. FAIXA DE CTA E RODAPÉ ---------- */
.cta-band{overflow:hidden}
.cta-band .container{position:relative}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;border-top:1px solid var(--line-d);padding-top:2rem}
.stats .num{font-size:clamp(2.25rem,1.6rem + 2.6vw,4rem)}
.stats .t-small{margin-top:.35rem}

.site-footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--line-d);font-size:var(--fs-small);padding-bottom:env(safe-area-inset-bottom)}
.site-footer .grid{display:grid;gap:2.5rem;padding-block:4rem 3rem}
@media (min-width:480px) and (max-width:767px){.site-footer .grid{grid-template-columns:1fr 1fr}.site-footer .grid>:first-child{grid-column:1/-1}}
@media (min-width:768px){.site-footer .grid{grid-template-columns:1.4fr 1fr 1.2fr 1.2fr}}
.site-footer h2{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-kicker);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--grey-d);margin-bottom:1rem}
.site-footer h2 svg{flex:none;width:1.25rem;height:1.25rem;color:var(--yellow)}
.site-footer ul{list-style:none;display:grid;gap:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:var(--tap)}
@media (min-width:768px){.site-footer li a{min-height:2rem}}
.site-footer a{color:rgba(244,242,237,.8);text-decoration:none}
.site-footer a:hover{color:var(--paper);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:.3em}
.site-footer address{font-style:normal;color:var(--grey-d);line-height:1.7;font-weight:500}
.site-footer address a{display:inline-flex;align-items:center;min-height:var(--tap)}
@media (min-width:768px){.site-footer address a{min-height:0}}
.social{display:flex;gap:.25rem;margin-top:1.25rem}
.social a{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid #3a3a3a}
.social a:hover{border-color:var(--paper)}
.social svg{width:1.05rem;height:1.05rem}
/* selos de parceria: imagens reais em preto e branco, centralizados acima da linha final */
.site-footer .seals{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.25rem 2rem;border-top:1px solid var(--line-d);padding-block:2rem}
.seals img{display:block;height:2.5rem;width:auto;filter:grayscale(1);opacity:.8;transition:opacity .3s var(--ease),filter .3s var(--ease)}
@media (hover:hover){.seals img:hover{opacity:1;filter:grayscale(0)}}
.legal{border-top:1px solid var(--line-d);padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;color:var(--grey-d);font-size:var(--fs-xs)}
.legal ul{display:flex;gap:1.5rem;list-style:none}
.legal a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* ---------- 12. POST DO BLOG ---------- */
.post-hero{padding-block:clamp(2rem,1rem + 4vw,4.5rem) 0}
.post-hero__grid{display:grid;gap:2rem;align-items:end}
@media (min-width:1024px){.post-hero__grid{grid-template-columns:1.35fr 1fr;gap:4rem}}
.post-hero h1{margin-top:1.25rem}
.post-hero .t-lead{margin-top:1.5rem}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:2rem;font-size:var(--fs-small);color:var(--grey-d);font-weight:500}
.byline img{width:2.75rem;height:2.75rem;border-radius:50%;filter:grayscale(1)}
.byline .who{display:flex;align-items:center;gap:.75rem;color:var(--paper)}
.byline a{text-decoration:none}
.byline a:hover{text-decoration:underline;text-underline-offset:.25em}
.byline .sep{width:4px;height:4px;background:var(--grey-d);border-radius:50%}
.post-hero__media{position:relative;margin-bottom:-4rem;z-index:1}
.post-hero__media img{width:100%;border:1px solid var(--ink);background:var(--tone)}
.post-hero__spacer{height:3rem}
@media (max-width:1023px){
  .post-hero__media{max-width:34rem}
  .post-hero__media img{aspect-ratio:3/2;object-fit:cover}
  .post-hero__spacer{height:1rem}
}
@media (max-width:639px){.byline .sep{display:none}.byline .who{flex-basis:100%}}

/* no celular: sumário, texto, lateral. No desktop: texto à esquerda; à direita a lateral e, abaixo, o sumário fixo */
.post-layout{display:grid;gap:3rem;padding-block:5.5rem var(--s6)}
.post-aside{display:grid;gap:2rem;align-content:start}
.post-aside .aside-cta{display:none}
@media (min-width:1100px){
  .post-layout{grid-template-columns:minmax(0,var(--measure)) 18rem;grid-template-rows:auto 1fr;justify-content:space-between;column-gap:4rem;row-gap:2.5rem}
  .post-main{grid-column:1;grid-row:1/span 2}
  .post-aside{grid-column:2;grid-row:1}
  .post-aside .aside-cta{display:block}
  .toc{grid-column:2;grid-row:2;align-self:start;position:sticky;top:calc(var(--header-h) + 2rem);
    max-height:calc(100vh - var(--header-h) - 3rem);overflow:auto;scrollbar-width:thin}
}
.decor{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}

/* sumário */
.toc{border-top:2px solid var(--ink);padding-top:1rem}
.toc__toggle{display:flex;width:100%;min-height:var(--tap);justify-content:space-between;align-items:center;background:none;border:0;cursor:pointer;padding:.25rem 0;text-align:left}
.toc__toggle svg{width:1rem;height:1rem;transition:transform .3s var(--ease)}
.toc__toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.js .toc__toggle[aria-expanded=false]+ol{display:none}
@media (min-width:1100px){.toc__toggle{pointer-events:none}.toc__toggle svg{display:none}.js .toc__toggle[aria-expanded=false]+ol{display:grid}}
.toc ol{list-style:none;counter-reset:toc;margin-top:1rem;display:grid;gap:.15rem}
.toc li{counter-increment:toc}
.toc a{display:grid;grid-template-columns:2rem 1fr;padding:.6rem 0;font-size:var(--fs-small);line-height:1.35;color:var(--grey);text-decoration:none;transition:color .2s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-size:var(--fs-xs);font-weight:500;padding-top:.1em;color:var(--grey)}
.toc a:hover,.toc a.is-active{color:var(--ink)}
.toc a.is-active{font-weight:700}
.toc a.is-active::before{color:var(--ink)}

.aside-cta{background:var(--ink);color:var(--paper);padding:1.5rem;position:relative;isolation:isolate;overflow:hidden}
.aside-cta .t-h3{font-size:1.375rem;margin-top:.75rem}
.aside-cta .btn{margin-top:1.25rem}

/* corpo do post: estilos do HTML do editor, inclusive o antigo */
.entry{font-size:var(--fs-read);line-height:1.72;color:var(--text)}
.entry>*+*{margin-top:1.25em}
.entry h2{font-size:clamp(1.625rem,1.3rem + 1.3vw,2.25rem);color:var(--ink);margin-top:2.4em;line-height:1.15;letter-spacing:-.02em}
.entry h3{font-size:clamp(1.3125rem,1.2rem + .5vw,1.5625rem);color:var(--ink);margin-top:2em;line-height:1.25;letter-spacing:-.01em}
.entry h4{font-size:1.0625em;color:var(--ink);margin-top:1.75em;line-height:1.35;letter-spacing:0}
.entry h2+*,.entry h3+*,.entry h4+*{margin-top:.6em}
.entry strong,.entry b{font-weight:700;color:var(--ink)}
.entry a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--grey);text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:background-size .3s var(--ease);background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/100% 0}
.entry a:hover{background-size:100% 100%;text-decoration-color:var(--ink)}
.entry ul,.entry ol{padding-left:1.4em}
.entry li+li{margin-top:.5em}
.entry ul li::marker{color:var(--grey)}
.entry ol li::marker{font-weight:700;color:var(--ink)}
.entry blockquote{border-left:2px solid var(--ink);padding:.25em 0 .25em 1.5em;font-size:1.15em;line-height:1.5;color:var(--ink)}
.entry blockquote cite{display:block;margin-top:.75em;font-size:var(--fs-small);font-style:normal;color:var(--grey)}
.entry hr{border:0;height:1px;background:var(--line);margin-block:2.5em}
.entry code{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:.88em;background:var(--tone);padding:.1em .35em}
.entry pre{background:var(--ink);color:var(--paper);padding:1.25rem;overflow-x:auto;font-size:.875rem;line-height:1.6}
.entry pre code{background:none;padding:0}
.entry img{border:1px solid var(--line)}
.entry .aligncenter{margin-inline:auto}
.entry .alignleft,.entry .alignright{max-width:50%}
@media (min-width:640px){
  .entry .alignleft{float:left;margin:.35em 1.75em 1em 0}
  .entry .alignright{float:right;margin:.35em 0 1em 1.75em}
}
@media (max-width:639px){.entry .alignleft,.entry .alignright{max-width:100%;margin-inline:auto}}
.entry::after{content:"";display:block;clear:both}
.entry .wp-caption,.entry figure{max-width:100%}
.entry .wp-caption img,.entry figure img{width:100%}
.entry .wp-caption-text,.entry figcaption{font-size:var(--fs-xs);color:var(--grey);margin-top:.6em;line-height:1.5}
.entry .table-wrap,.entry .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry table{width:100%;border-collapse:collapse;font-size:.9em;line-height:1.45}
.entry th,.entry td{border-top:1px solid var(--line);padding:.75em .9em .75em 0;text-align:left;vertical-align:top}
.entry thead th{border-top:0;border-bottom:2px solid var(--ink);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--grey)}
.entry iframe,.entry .embed{width:100%;aspect-ratio:16/9;height:auto;border:0}
.entry .embed iframe{height:100%}

/* rodapé do post */
.author-box{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;border-top:2px solid var(--ink);padding-top:1.5rem;margin-top:var(--s5)}
.author-box img{width:4.5rem;height:4.5rem;border-radius:50%;filter:grayscale(1)}
.author-box .t-small{margin-top:.5rem}
.author-box .link-arrow{margin-top:1rem;font-size:var(--fs-small)}
.post-cta{margin-top:var(--s5);overflow:hidden;isolation:isolate;position:relative}
.post-cta .t-h3{margin-top:.75rem;font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
.post-cta .btn{margin-top:1.5rem}
.share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:2.5rem}
.share .kicker{margin-right:.5rem}
.share a,.share button{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid var(--ink);background:none;cursor:pointer;color:var(--ink)}
.share a:hover,.share button:hover,.share a:active,.share button:active{background:var(--ink);color:var(--paper)}
.share .is-done{background:var(--yellow);border-color:var(--yellow)}
.share svg{width:1rem;height:1rem}

/* ---------- 13. SERVIÇO ---------- */
.svc-hero{padding-block:clamp(1.5rem,1rem + 2vw,2.5rem)}
.svc-hero__grid{display:grid;gap:2.5rem}
@media (min-width:1024px){.svc-hero__grid{grid-template-columns:1.1fr 1fr;column-gap:5rem;align-items:center}}
.svc-hero h1{margin-top:1rem;font-size:clamp(2.5rem,1.6rem + 3.2vw,4.25rem)}
.svc-hero .t-lead{margin-top:1.25rem}

/* celular e tablet: a página de conversão abre no formulário.
   Ordem: H1, formulário inteiro e, depois dele, subtítulo e números (nada sai da página). */
@media (max-width:1023px){
  .svc-hero{padding-block:1.25rem 0}
  .svc-hero__grid{gap:1rem}
  .svc-hero__text{display:contents}
  .svc-hero__head{order:1}
  .form-compact#orcamento{order:2}
  .svc-hero__more{order:3;padding-block:1.5rem 2.5rem}
  .svc-hero__more .t-lead{margin-top:0}
}
@media (max-width:639px){
  .svc-hero .crumbs{display:none}
  .svc-hero h1{margin-top:0;font-size:clamp(1.875rem,1.4rem + 2.4vw,2.5rem)}
}

/* número-chave de cada case, colado ao subtítulo */
.hero-proof{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line-d)}
.hero-proof__label{display:block;font-size:var(--fs-small);color:var(--grey-d);font-weight:500}
.hero-proof__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.9rem}
.hero-proof a{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;min-height:var(--tap)}
.hero-proof__list>li{display:flex;flex-direction:column;gap:.2rem}
.hero-proof .num{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);color:var(--paper)}
/* unidades (R$, mil, mi, %) com no mínimo 14px no celular */
.hero-proof .num small{font-size:max(.45em,.875rem)}
/* valor em reais: o "R$" vem antes, menor e alto, como nos cartões de case (.case-big__num .pre).
   Deslocado com top e não com vertical-align: a linha não cresce e os números da grade ficam todos na mesma altura */
.hero-proof .num .pre{position:relative;top:-.9em;margin:0 .12em 0 0}
.hero-proof__metric{font-size:var(--fs-xs);line-height:1.35;color:var(--paper)}
.hero-proof__client{font-size:var(--fs-xs);color:var(--grey-d);font-weight:500}
@media (hover:hover){.hero-proof a:hover .hero-proof__client{color:var(--paper);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:.25em}}
/* celular estreito (até 399px): em três colunas, métrica e cliente quebravam palavra por palavra ("FIA Business / School").
   Uma regra só para todas as telas: cada número vira uma linha, número à esquerda, métrica e cliente à direita,
   como os cases da Home no celular. Fora: Empresa (quatro números em 2×2) e Autor (dois números lado a lado). */
@media (max-width:399px){
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list{grid-template-columns:1fr;row-gap:.875rem}
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list>li:not(:has(>a)),
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list>li>a{display:grid;grid-template-columns:6.75rem minmax(0,1fr);
    grid-template-areas:"num metric" "num client";column-gap:1rem;row-gap:.125rem;align-items:center}
  .hero-proof:not(.about-proof):not(.author-proof) .num{grid-area:num;white-space:nowrap}
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__metric{grid-area:metric;align-self:end}
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__client{grid-area:client;align-self:start}
  /* número sem cliente (Home): uma linha só, métrica centrada na altura do número */
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list>li:not(:has(.hero-proof__client)):not(:has(>a)),
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list>li>a:not(:has(.hero-proof__client)){grid-template-areas:"num metric"}
  .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list>li:not(:has(.hero-proof__client)) .hero-proof__metric{align-self:center}
}

/* formulário compacto (topo e fim da página de serviço): duas colunas a partir de 640px */
.form-compact{padding:clamp(1.25rem,1rem + 1vw,1.75rem);scroll-margin-top:calc(var(--header-h) + 1rem)}
.form-compact .gform_fields{gap:.75rem 1rem}
.form-compact .gfield_label{font-size:var(--fs-xs);margin-bottom:.3rem}
.form-compact .ginput_container input,.form-compact .ginput_container select{min-height:2.625rem;padding:.5rem .8rem}
@media (pointer:coarse){.form-compact .ginput_container input,.form-compact .ginput_container select{min-height:var(--tap)}}
/* a regra acima apagava o espaço da seta do select: o texto passava por baixo dela em colunas estreitas */
.form-compact .ginput_container select{padding-right:2.5rem;text-overflow:ellipsis}
.form-compact .ginput_container textarea{min-height:4rem;height:4rem}
.form-compact .gform_footer{margin-top:1rem}
.form-compact .btn--lg{min-height:3.25rem}
/* cabeçalho do formulário: título que diz o que é e frase do que acontece depois */
.form-head__title{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.form-head__text{font-size:var(--fs-small);line-height:1.5;color:var(--grey);margin-top:.4rem}
.form-compact .gform_wrapper{margin-top:1rem}

/* placeholders só no celular: no desktop os rótulos já dizem tudo */
@media (min-width:640px){.form-compact .gform_wrapper ::placeholder{color:transparent}}
/* no celular o cartão encosta nas bordas da tela e fica enxuto para caber inteiro na primeira tela:
   rótulos ocultos visualmente (continuam para leitor de tela), placeholder do Gravity Forms como guia */
@media (max-width:639px){
  .form-card.form-compact{--px:max(var(--gutter),env(safe-area-inset-left));margin-inline:calc(-1 * var(--px));border-inline:0;
    padding:1rem var(--px) 1.25rem}
  .form-compact .gform_wrapper{margin-top:0}
  .form-compact .gform_fields{gap:.625rem;grid-template-columns:1fr 1fr}
  /* Nome e Telefone lado a lado (campos curtos); o resto em largura total */
  .form-compact .gfield{grid-column:1/-1}
  .form-compact .gfield:nth-child(-n+2){grid-column:auto}
  .form-compact .gfield_label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .form-compact .ginput_container textarea{min-height:3.5rem;height:3.5rem}
  .form-compact .gform_footer{margin-top:.875rem}
  /* o título do formulário fica no mesmo fundo claro dos campos; a linha amarela separa o cartão do topo escuro */
  .form-card.form-compact:has(.form-head){border-top:3px solid var(--yellow);padding-top:1rem}
  .form-compact .form-head{margin-bottom:.875rem}
}
/* celulares baixos (iPhone SE e parecidos): a frase de apoio sai, o título do formulário fica sempre */
@media (max-width:639px) and (max-height:740px){
  .svc-hero{padding-top:.5rem}
  .svc-hero__grid{gap:.75rem}
  .svc-hero h1{font-size:1.75rem}
  .svc-hero .form-head__text{display:none}
  .form-compact .form-head{margin-bottom:.625rem}
  .form-card.form-compact:has(.form-head){padding-top:.875rem}
  .form-compact .gform_fields{gap:.5rem}
  .form-compact .ginput_container textarea{min-height:2.75rem;height:2.75rem}
  .form-compact .gform_footer{margin-top:.75rem}
  .form-card.form-compact{padding-bottom:1rem}
}

/* texto com a primeira frase em destaque */
.entry--intro{max-width:none}
.entry--intro>p:first-child{font-size:clamp(1.375rem,1.15rem + 1vw,2rem);line-height:1.3;color:var(--ink);font-weight:500;letter-spacing:-.01em;text-wrap:pretty}
@media (min-width:900px){
  .entry--intro{display:grid;grid-template-columns:5fr 7fr;column-gap:5rem;align-items:start}
  .entry--intro>*{grid-column:2;margin-top:0}
  .entry--intro>*+*{margin-top:1.25em}
  .entry--intro>p:first-child{grid-column:1;grid-row:1/span 20}
}

/* blocos alternados (repetidor "planos de consultoria") */
.feature{display:grid;gap:2rem;align-items:center;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem);border-top:1px solid var(--line)}
@media (min-width:900px){
  .feature{grid-template-columns:5fr 7fr;gap:5rem}
  .feature:nth-of-type(even){grid-template-columns:7fr 5fr}
  .feature:nth-of-type(even) .illus{order:2}
}
.feature h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em}
.feature .entry{margin-top:1.25rem}
.illus{background:var(--tone);border:1px solid var(--ink);aspect-ratio:1/1;display:grid;place-items:center;padding:12%}
.illus img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply}
/* celular e tablet em coluna única: as ilustrações saem (com loading="lazy" e display:none, nem chegam a ser baixadas) */
@media (max-width:899px){.illus{display:none}}

/* título do campo de texto à esquerda, parágrafos à direita (funciona com o HTML do editor) */
.split{display:grid;gap:0}
.split>*+*{margin-top:1.25rem}
@media (min-width:900px){
  .split{grid-template-columns:5fr 7fr;column-gap:5rem;align-items:start}
  .split>h2{grid-column:1;grid-row:1/span 20}
  .split>:not(h2){grid-column:2}
  .split>h2+*{margin-top:0}
}
.split>h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0}
.split>p{font-size:var(--fs-read);line-height:1.72;color:var(--text)}
.split>p strong{color:var(--ink)}

/* depoimento: pessoa à esquerda, citação à direita, altura contida */
.testimonial{padding-block:clamp(1.5rem,1rem + 2vw,2.75rem)}
.testimonial__grid{display:grid;gap:2rem}
@media (min-width:900px){.testimonial__grid{grid-template-columns:5fr 7fr;column-gap:5rem;align-items:start}}
.testimonial__title{font-size:var(--fs-h3);line-height:1.2;color:var(--paper)}
.testimonial blockquote{position:relative;font-size:clamp(1.125rem,1rem + .55vw,1.4375rem);line-height:1.55;color:var(--paper);padding-top:2.75rem}
.testimonial blockquote::before{content:"\201C";position:absolute;top:-.35rem;left:-.05em;font-weight:900;font-size:4.5rem;line-height:1;color:var(--yellow)}
.testimonial blockquote em{font-style:normal}
.testimonial .link-arrow{color:var(--paper);margin-top:1.5rem}
.person{display:flex;align-items:center;gap:1rem;margin-top:1.75rem}
.person img{width:4rem;height:4rem;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none}
.person .b{display:block}

/* cartão de formulário */
.form-card{border:1px solid var(--ink);background:var(--surface);padding:clamp(1.25rem,1rem + 2vw,2.5rem)}
@media (min-width:640px){
  .form-card .gform_fields{grid-template-columns:1fr 1fr}
  .form-card .gfield--full{grid-column:1/-1}
  .form-card .gfield{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .form-card .gfield_label{align-self:end}
}
@supports not (grid-template-rows:subgrid){@media (min-width:640px){.form-card .gform_fields{align-items:end}}}

/* formulário do fim da página de serviço */
.end-form{border-top:1px solid var(--line)}
.end-form.dark{border-top:0;overflow:hidden}
.end-form__grid{display:grid;gap:2.5rem}
@media (min-width:1024px){.end-form__grid{grid-template-columns:1fr 1.1fr;column-gap:5rem;align-items:center}}

/* cases: faixa escura, cartões do mesmo tamanho */
.cases-band{overflow:hidden}
.cases-band .link-arrow{color:var(--paper)}
.cases-grid{display:grid;gap:1px;margin-top:var(--s4);background:var(--line-d);border:1px solid var(--line-d)}
@media (min-width:640px){.cases-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}}
@media (min-width:1024px){.cases-grid{grid-template-columns:repeat(3,1fr)}}
/* cartão de case: todos do mesmo tamanho. Número, o que cresceu e, no rodapé, logo do cliente e link */
.case-big{display:flex;flex-direction:column;padding:clamp(1.5rem,1rem + 1.5vw,2.25rem);background:var(--ink);color:var(--paper);
  text-decoration:none;transition:background-color .35s var(--ease)}
.case-big__num{white-space:nowrap;font-weight:900;font-size:clamp(3rem,2.2rem + 2.6vw,4.5rem);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.case-big__num small{font-size:.42em;font-weight:700;margin-left:.04em;letter-spacing:0}
.case-big__metric{margin:.75rem 0 2rem;font-size:var(--fs-read);line-height:1.4;font-weight:500}
.case-big__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--line-d)}
.case-big__logo{height:1.75rem;width:auto;max-width:55%;object-fit:contain;object-position:left;filter:grayscale(1) invert(1) contrast(1.3);mix-blend-mode:screen;opacity:.85}
.case-big__go{display:inline-flex;align-items:center;gap:.5em;font-weight:700;white-space:nowrap;border-bottom:2px solid var(--yellow);padding-bottom:.15em}
.case-big__go svg{flex:none;width:1em;height:1em;transition:transform .35s var(--ease)}
/* cartão estreito (4 por linha no Agradecimento): quem cede espaço é o logo, nunca a seta (ela encolhia até 1px) */
.case-big__logo{min-width:0}.case-big__go{flex:none}
@media (hover:hover){.case-big:hover{background:#121212}.case-big:hover .case-big__go svg{transform:translateX(3px)}}
.case-big:active{background:#121212}
/* versão clara (fundo de papel), para quando a faixa preta da página é outra, como o formulário no fim do Case */
.cases-grid--light{background:var(--line);border-color:var(--line)}
.cases-grid--light .case-big{background:var(--surface);color:var(--ink);transition:background-color .3s var(--ease),color .3s var(--ease)}
.cases-grid--light .case-big__metric{color:var(--text);transition:color .3s var(--ease)}
.cases-grid--light .case-big__foot{border-top-color:var(--line);transition:border-color .3s var(--ease)}
/* brightness: alguns PNGs (Suhai) têm fundo cinza-claro, que virava um retângulo no cartão claro; no tema, o ideal é o PNG com fundo transparente */
.cases-grid--light .case-big__logo{filter:grayscale(1) contrast(1.1) brightness(1.1);mix-blend-mode:multiply;opacity:.8}
@media (hover:hover){
  .cases-grid--light .case-big:hover{background:var(--ink);color:var(--paper)}
  .cases-grid--light .case-big:hover .case-big__metric{color:var(--paper)}
  .cases-grid--light .case-big:hover .case-big__foot{border-top-color:var(--line-d)}
  .cases-grid--light .case-big:hover .case-big__logo{filter:grayscale(1) invert(1) contrast(1.3);mix-blend-mode:screen}
}
.cases-grid--light .case-big:active{background:var(--ink);color:var(--paper)}
.cases-grid--light .case-big:active .case-big__metric{color:var(--paper)}
.cases-grid--light .case-big:active .case-big__foot{border-top-color:var(--line-d)}
.cases-grid--light .case-big:active .case-big__logo{filter:grayscale(1) invert(1) contrast(1.3);mix-blend-mode:screen}
/* cartões separados (Agradecimento, pedido de 23/10/2026; o mesmo desenho da vitrine de Cases): espaço entre eles,
   borda de 1px e a régua de 2px em tinta abrindo cada cartão */
.cases-grid--gap{gap:clamp(.75rem,.5rem + 1vw,1.25rem);background:none;border:0}
.cases-grid--gap .case-big{border:1px solid var(--line);border-top:2px solid var(--ink);transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
@media (hover:hover){.cases-grid--gap .case-big:hover{border-color:var(--ink)}}
.cases-grid--gap .case-big:active{border-color:var(--ink)}
/* celular: número e métrica lado a lado, rodapé embaixo */
@media (max-width:639px){
  .cases-grid{margin-top:var(--s3)}
  .case-big{display:grid;grid-template-columns:minmax(clamp(6.5rem,31vw,7.75rem),max-content) 1fr;grid-template-areas:"num metric" "foot foot";
    column-gap:1rem;row-gap:1rem;align-items:center;padding:1.25rem}
  .case-big__num{grid-area:num;font-size:clamp(2.5rem,2rem + 3vw,3.25rem)}
  .case-big__metric{grid-area:metric;margin:0;font-size:var(--fs-small);line-height:1.35}
  .case-big__foot{grid-area:foot;margin:0;padding-top:.875rem}
  .case-big__logo{height:1.5rem}
}
/* tablet, grade de 2 colunas com número ímpar de cases (3 no Serviço e no Case): o último ocupa a linha inteira,
   com número e métrica lado a lado, e a grade não fica com um buraco no lugar do 4º cartão */
@media (min-width:640px) and (max-width:1023px){
  .cases-grid:not(.cases-grid--4):not(.vitrine)>.case-big:last-child:nth-child(odd){grid-column:1/-1;display:grid;
    grid-template-columns:max-content 1fr;grid-template-areas:"num metric" "foot foot";column-gap:var(--s3);align-items:center}
  .cases-grid:not(.cases-grid--4):not(.vitrine)>.case-big:last-child:nth-child(odd) .case-big__num{grid-area:num}
  .cases-grid:not(.cases-grid--4):not(.vitrine)>.case-big:last-child:nth-child(odd) .case-big__metric{grid-area:metric;margin:0}
  .cases-grid:not(.cases-grid--4):not(.vitrine)>.case-big:last-child:nth-child(odd) .case-big__foot{grid-area:foot;margin-top:var(--s3)}
}

/* subserviços (páginas-filhas) */
.subs-head{display:grid;gap:.75rem;margin-bottom:var(--s4)}
.subs-head .t-body{font-size:var(--fs-read);color:var(--text)}

/* ---------- HOME ---------- */
.home-hero{overflow:hidden}
.home-hero h1{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.75rem);line-height:1.04}
.home-hero h1 b{font-weight:900}
.home-hero .ghost{font-size:clamp(8rem,22vw,22rem);top:auto;bottom:-.18em;transform:translateX(-50%)}
@media (max-width:639px){.home-hero h1{font-size:1.625rem;line-height:1.12}}
@media (max-width:639px) and (max-height:740px){.home-hero h1{font-size:1.5rem}}

/* logos de clientes */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem 1rem;align-items:center;margin-top:var(--s3)}
@media (min-width:640px){.logos{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.logos{grid-template-columns:repeat(6,1fr);gap:1rem 2rem}}
.logos img{width:100%;height:auto;max-width:12rem;margin-inline:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;opacity:.8}
/* cabeçalho de seção: título com o link à direita; o texto de apoio vem embaixo e ocupa a largura toda */
.section-head,.cases-band__head{display:grid;grid-template-columns:1fr auto;column-gap:2rem;row-gap:.75rem;align-items:end}
.section-head>div,.cases-band__head>div{display:contents}
.section-head>div>:first-child,.cases-band__head>div>:first-child{grid-column:1;grid-row:1}
.section-head>div>:not(:first-child),.cases-band__head>div>:not(:first-child){grid-column:1/-1;grid-row:2;margin-top:0}
.section-head>a,.cases-band__head>a{grid-column:2;grid-row:1;align-self:end;white-space:nowrap}
@media (max-width:639px){
  .section-head,.cases-band__head{grid-template-columns:1fr}
  .section-head>a,.cases-band__head>a{grid-column:1;grid-row:3;justify-self:start}
}
.section-head .t-body{font-size:var(--fs-read);color:var(--text)}

/* logos dos clientes com case: 6 por linha em 3 linhas no desktop; no celular, 3 por linha em 3 linhas */
.logos--cases{grid-template-columns:repeat(3,1fr);gap:1.5rem 1.25rem}
.logos--cases a{display:flex;align-items:center;justify-content:center;min-height:var(--tap)}
.logos--cases img{width:100%;max-width:13rem;height:auto;margin:0;opacity:.75;transition:opacity .25s var(--ease)}
.logos--cases a:hover img,.logos--cases a:focus-visible img{opacity:1}
@media (max-width:639px){.logos--cases a:nth-child(n+10){display:none}}
@media (min-width:640px){.logos--cases{grid-template-columns:repeat(6,1fr);gap:2rem 2.5rem}}

/* link de fechamento da seção, centralizado abaixo do conteúdo */
.section-foot{display:flex;justify-content:center;margin-top:var(--s4)}

/* cinco cases: o primeiro ocupa duas linhas */
.case-big__num .pre{font-size:.42em;font-weight:700;margin-right:.08em;letter-spacing:0;vertical-align:.9em}

/* caminhos por necessidade: blocos com ícone; a grade é desenhada pelas linhas entre os blocos */
.helps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s3)}
@media (min-width:640px){.helps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.helps{grid-template-columns:repeat(3,1fr)}}
.help{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;min-height:5rem;padding:1.125rem 1.25rem;background:var(--surface);
  color:var(--ink);text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.help__icon{display:grid;place-items:center;width:3rem;height:3rem;background:var(--ink);color:var(--yellow);transition:background-color .3s var(--ease),color .3s var(--ease)}
.help__icon svg{width:1.5rem;height:1.5rem}
.help__title{font-weight:500;font-size:1.0625rem;line-height:1.3;text-wrap:pretty}
/* palavra com hífen não se parte ("E- / commerce") */
.help__title .nw{white-space:nowrap}
.help__go{width:1.1rem;height:1.1rem;transition:transform .3s var(--ease)}
@media (hover:hover){
  .help:hover{background:var(--ink);color:var(--paper)}
  .help:hover .help__icon{background:var(--yellow);color:var(--ink)}
  .help:hover .help__go{transform:translateX(3px)}
}
.help:active{background:var(--ink);color:var(--paper)}
/* foco do teclado: o bloco sobe acima dos vizinhos, senão o contorno some atrás deles à direita e embaixo (a grade tem 1px entre os blocos) */
.help:focus-visible{position:relative;z-index:1}
@media (max-width:639px){.help{min-height:4.25rem;padding:.875rem 1rem}.help__icon{width:2.5rem;height:2.5rem}.help__icon svg{width:1.25rem;height:1.25rem}}

/* áreas de serviço: título da área e subserviços; no celular cada área abre e fecha */
.areas{display:grid;gap:0;margin-top:var(--s3);border-top:1px solid var(--ink)}
@media (min-width:768px){.areas{grid-template-columns:repeat(2,1fr);column-gap:3rem;border-top:0}}
@media (min-width:1100px){.areas{grid-template-columns:repeat(4,1fr);row-gap:2.5rem}}
.area{border-bottom:1px solid var(--line)}
@media (min-width:768px){.area{border-bottom:0;border-top:2px solid var(--ink);padding-top:1rem}}
.area summary{display:flex;align-items:center;gap:.875rem;min-height:3.5rem;cursor:pointer;list-style:none;font-weight:700;font-size:1.125rem}
.area summary::-webkit-details-marker{display:none}
.area__icon{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;background:var(--ink);color:var(--yellow)}
.area__icon svg{width:1.25rem;height:1.25rem}
.area summary .area__icon svg{transform:none}
.area__title{color:var(--ink);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.area__title:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}
.area summary>svg{margin-left:auto}
.area summary>svg{width:1rem;height:1rem;flex:none;transition:transform .3s var(--ease)}
.area[open] summary>svg{transform:rotate(180deg)}
@media (min-width:768px){.area summary{min-height:0;cursor:default;margin-bottom:.5rem}.area summary>svg{display:none}.area__title{min-height:0}
  /* aberta desde o primeiro desenho (o site.js também marca open, para navegadores sem ::details-content) */
  .area::details-content{content-visibility:visible}}
.area ul{list-style:none;display:grid;padding-bottom:1rem}
.area li a{display:flex;align-items:center;min-height:var(--tap);color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
@media (min-width:768px){.area li a{min-height:2.25rem;border-bottom:0}}
.area li a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}

/* prêmio */
.award{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.award{grid-template-columns:auto 1fr;column-gap:5rem}}
.award__num{font-weight:900;font-size:clamp(7rem,5rem + 9vw,13rem);line-height:.8;letter-spacing:-.04em;color:var(--paper)}
.award__num small{font-size:.35em;font-weight:700;color:var(--yellow);margin-left:.05em;letter-spacing:0}
.award .t-h2{color:var(--paper)}
.award p{color:var(--grey-d);font-size:var(--fs-read);line-height:1.65;margin-top:1.25rem}

/* depoimentos: grade no desktop, faixa que desliza no celular */
.quotes{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:1rem;margin-top:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:thin}
@media (min-width:900px){.quotes{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-inline:0;padding-inline:0}}
.quote{scroll-snap-align:start;display:flex;flex-direction:column;gap:1.25rem;border-top:2px solid var(--ink);padding-top:1.25rem}
.quote blockquote{font-size:var(--fs-read);line-height:1.6;color:var(--text);position:relative;padding-top:2.25rem}
.quote blockquote::before{content:"\201C";position:absolute;top:-.4rem;left:-.04em;font-weight:900;font-size:3.75rem;line-height:1;color:var(--ink)}
.quote .person{margin-top:auto}
.quote .person img{width:3.25rem;height:3.25rem}

/* perguntas frequentes: título à esquerda (fixo ao rolar no desktop), perguntas abrem e fecham à direita */
.faq{display:grid;gap:var(--s3)}
@media (min-width:1024px){.faq{grid-template-columns:1fr 2fr;gap:4rem;align-items:start}.faq__head{position:sticky;top:calc(var(--header-h) + 2rem)}}
.faq__list{border-top:1px solid var(--ink)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--tap);padding-block:1.25rem;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item :is(h3,h4){font-size:1.125rem;line-height:1.35;font-weight:700}
.faq__item summary svg{flex:none;width:1.25rem;height:1.25rem;transition:transform .3s var(--ease)}
.faq__item[open] summary svg{transform:rotate(180deg)}
@media (hover:hover){.faq__item summary:hover :is(h3,h4){text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}}
.faq__answer{padding-bottom:1.5rem;color:var(--text);font-size:var(--fs-read);line-height:1.65}
.faq__answer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.25em}

/* chamada fixa no celular */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky-cta);padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background:var(--ink);border-top:1px solid var(--line-d);transform:translateY(110%);transition:transform .4s var(--ease)}
.sticky-cta.is-on{transform:none}
@media (min-width:1100px){.sticky-cta{display:none}}

/* ---------- 16. MODELOS NOVOS ---------- */
/* Telas da segunda leva (22/10/2026): Case, Cases, Blog, Categoria, Autor, Busca, Orçamento e Contato, Agradecimento,
   Serviços, Empresa, Clientes, Trabalhe conosco, Materiais ricos, Página padrão, Mapa do site e 404.
   Primeiro os componentes que mais de uma tela usa (16.1); depois um bloco por tela, só com o que é dela. */

/* --- 16.1 COMPONENTES DAS TELAS NOVAS --- */

/* topo das páginas de lista (Serviços, Cases, Clientes, Materiais Ricos): trilha, H1 e frase; os números dos cases ao lado, quando houver */
.hub-hero{overflow:hidden;padding-block:var(--s4)}
.hub-hero__grid{display:grid;gap:var(--s3)}
.hub-hero h1{margin-top:1rem;font-size:var(--fs-hub)}
.hub-hero h1 b{font-weight:900}
.hub-hero .t-lead{margin-top:1rem}
.hub-hero .hero-proof{margin-top:0}
.hub-hero .hero-proof__metric{text-wrap:pretty}
.hub-hero .ghost{font-size:clamp(6rem,17vw,17rem);left:auto;right:-.04em;top:auto;bottom:-.2em;transform:none}
@media (min-width:1024px){
  .hub-hero__grid{grid-template-columns:1.1fr 1fr;column-gap:5rem;align-items:end}
  /* na coluna da direita há espaço: métrica e cliente no tamanho do texto pequeno */
  .hub-hero .hero-proof__metric,.hub-hero .hero-proof__client{font-size:var(--fs-small)}
}
@media (max-width:639px){
  .hub-hero{padding-block:var(--s3)}
  .hub-hero h1{margin-top:.75rem}
  .hub-hero .t-lead{margin-top:.75rem}
}

/* frase de apoio nos topos escuros da Busca e da 404, com links sublinhados em amarelo */
.hero-text{margin-top:.75rem;font-size:var(--fs-read);line-height:1.55;color:var(--grey-d);font-weight:500}
.hero-text a{position:relative;padding-block:.2em;white-space:nowrap;color:var(--paper);font-weight:700;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.25em}
/* área de toque de 44px sem mudar o desenho do link (como no .link-arrow) */
.hero-text a::before{content:"";position:absolute;inset:-.55rem -.2rem}
@media (hover:hover){.hero-text a:hover{text-decoration-thickness:3px}}

/* campo de busca no escuro (Blog, Categoria, Busca, 404): as cores do painel de busca do cabeçalho.
   Botão: no desktop a palavra "Buscar"; no celular só a lupa (o nome continua para leitor de tela), para o texto de exemplo caber inteiro.
   O botão é amarelo na Busca e na 404 (a busca é a ação da página) e em contorno no Blog e na Categoria. */
.busca-form{display:flex;gap:.5rem}
.busca-form__field{position:relative;flex:1;min-width:0}
.busca-form__field svg{position:absolute;left:.9rem;top:50%;width:1.15rem;height:1.15rem;transform:translateY(-50%);color:var(--grey-d);pointer-events:none}
/* text-overflow: abaixo de 360px o texto de exemplo termina em reticências, não cortado no meio da letra */
.busca-form input{width:100%;min-height:3.25rem;padding:.75rem .75rem .75rem 2.75rem;background:#111;border:1px solid #3a3a3a;border-radius:0;
  color:var(--paper);font-size:1.0625rem;line-height:1.3;-webkit-appearance:none;appearance:none;caret-color:var(--yellow);text-overflow:ellipsis;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.busca-form input::placeholder{color:var(--grey-d);opacity:1}
.busca-form input:focus{outline:none;border-color:var(--paper);box-shadow:0 0 0 3px var(--yellow)}
/* o "x" nativo do campo de busca, no desenho do tema; com o campo vazio ele sai e devolve o espaço ao texto de exemplo */
.busca-form input::-webkit-search-cancel-button{-webkit-appearance:none;width:1.5rem;height:1.5rem;margin-left:.5rem;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393908a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/1rem no-repeat}
.busca-form input:placeholder-shown::-webkit-search-cancel-button{display:none}
.busca-form .btn{min-height:3.25rem;flex:none}
.busca-form .btn svg{display:none}
@media (hover:hover){.busca-form .btn:hover svg{transform:none}}
@media (max-width:639px){
  .busca-form__field svg{display:none}
  .busca-form input{padding-left:.875rem}
  .busca-form .btn{width:3.25rem;padding:0}
  .busca-form .btn svg{display:block;width:1.3rem;height:1.3rem}
  .busca-form .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* paginação (Blog, Categoria, Autor, Busca): números no meio, anterior e próxima nas pontas.
   No tema: paginate_links( array( 'type' => 'array' ) ) dentro desta marcação (página atual com aria-current).
   Celular: números em cima, botões embaixo (com os dois, cada um com metade da linha). */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:var(--s4);padding-top:var(--s3);border-top:2px solid var(--ink)}
.pager__list{grid-column:1/-1;grid-row:1;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25rem}
.pager__list a,.pager__list [aria-current]{display:inline-grid;place-items:center;min-width:var(--tap);height:var(--tap);padding-inline:.6rem;border:1px solid transparent;
  font-weight:500;font-variant-numeric:tabular-nums;text-decoration:none;transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.pager__list [aria-current=page]{background:var(--ink);color:var(--paper);font-weight:700}
.pager__gap{display:inline-grid;place-items:center;min-width:1.5rem;height:var(--tap);color:var(--grey)}
.pager__prev{grid-column:1;grid-row:2}
.pager__next{grid-column:2;grid-row:2}
.pager:not(:has(.pager__prev)) .pager__next{grid-column:1/-1}
.pager__prev svg{transform:scaleX(-1)}
@media (hover:hover){
  .pager__list a:hover{border-color:var(--ink)}
  .pager__prev:hover svg{transform:scaleX(-1) translateX(3px)}
}
.pager__list a:active{background:var(--tone)}
.pager .btn{position:relative;white-space:nowrap}
.pager__short{display:none}
/* atalhos para páginas distantes (10, 15, 20...): só aparecem com espaço para eles e o botão na mesma linha; no HTML ficam sempre (caminho do Google até os posts antigos) */
@media (max-width:1023px){.pager__far{display:none}}
/* até 767px, com os dois botões, os rótulos encurtam ("Anterior", "Próxima"); o texto inteiro fica para o leitor de tela */
@media (max-width:767px){
  .pager:has(.pager__prev) .pager__long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .pager:has(.pager__prev) .pager__short{display:inline}
}
@media (min-width:640px){
  .pager{grid-template-columns:1fr auto 1fr;align-items:center}
  .pager__list{grid-column:2;grid-row:1}
  .pager__prev{grid-column:1;grid-row:1;justify-self:start}
  .pager__next,.pager:not(:has(.pager__prev)) .pager__next{grid-column:3;grid-row:1;justify-self:end}
}

/* número da página ao lado do título da lista ("Página 1 de 43"), no .section-head (Blog, Autor) */
.section-head__page{font-size:var(--fs-small);font-weight:500;color:var(--grey);font-variant-numeric:tabular-nums}

/* cartões de post: resumo em até três linhas (as linhas da grade ficam da mesma altura; o texto inteiro continua no HTML) */
.card__excerpt{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* cartões e itens sobre o fundo escuro */
.dark .card__img,.dark .pick__img{border-color:var(--line-d);background:#1a1a1a}
.dark .card__meta,.dark .pick__cat{color:var(--grey-d)}
.dark .card__excerpt{color:var(--grey-d);font-weight:500}
/* post sem imagem destacada: o ícone da categoria no fundo de tom, no mesmo 3:2 (o mesmo .res__media--cat da Busca).
   O quadro escuro com ícone amarelo (.res__media--icon) fica só para resultados que não são post: serviço e página */
.card__img--empty{display:grid;place-items:center;color:var(--ink)}
.card__img--empty svg{width:1.5rem;height:1.5rem}
@media (min-width:640px){.card__img--empty svg{width:clamp(3rem,2rem + 2.5vw,4.5rem);height:clamp(3rem,2rem + 2.5vw,4.5rem)}}

/* lista de posts (Categoria e Autor): 1, 2 e 3 por linha (12 por página: linhas sempre cheias).
   Celular: miniatura ao lado de data e título, resumo embaixo em largura total, separados por régua */
.posts{list-style:none;display:grid}
.posts .card__excerpt{margin-top:.5rem;font-size:var(--fs-small);line-height:1.55;color:var(--grey)}
@media (max-width:639px){
  .posts>*{padding-block:1.25rem;border-top:1px solid var(--line)}
  .posts>:first-child{padding-top:0;border-top:0}
  .posts>:last-child{padding-bottom:0}
  /* a sobra de altura da miniatura vai para a linha do título: data e título ficam sempre juntos */
  .posts .card{display:grid;grid-template-columns:7rem minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"img meta" "img title" "ex ex";column-gap:1rem;align-items:start}
  .posts .card__body{display:contents}
  .posts .card__img{grid-area:img}
  .posts .card__meta{grid-area:meta;margin-top:0;flex-wrap:wrap;gap:.15rem .75rem}
  .posts .card__title{grid-area:title;margin-top:.25rem;font-size:1.0625rem;line-height:1.3}
  .posts .card__excerpt{grid-area:ex;margin-top:.75rem}
}
@media (min-width:640px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem}
  /* resumo até 4 linhas: as linhas da grade ficam parecidas mesmo com resumos longos */
  .posts .card__excerpt{-webkit-line-clamp:4;line-clamp:4}
}
@media (min-width:1024px){.posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 2.5rem}}

/* blocos com ícone (.help da Home): nome e, embaixo, uma linha de apoio (número de artigos ou descrição curta) */
.help__text{display:grid;gap:.125rem;min-width:0}
.help__sub{font-size:var(--fs-small);font-weight:400;line-height:1.4;color:var(--grey);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
@media (hover:hover){.help:hover .help__sub{color:var(--grey-d)}}
.help:active .help__sub{color:var(--grey-d)}
/* três por linha (Blog, Busca, Agradecimento): uma coluna no celular e três a partir de 768px, sem a linha de duas que deixaria um bloco sozinho.
   Tablet: colunas estreitas, então sem a seta e com o ícone do celular, para o nome não quebrar em muitas linhas */
.helps.helps--3{grid-template-columns:1fr}
@media (min-width:768px){.helps.helps--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1023px){
  .helps--3 .help{grid-template-columns:auto 1fr;gap:.75rem;padding-inline:1rem}
  .helps--3 .help__go{display:none}
  .helps--3 .help__icon{width:2.5rem;height:2.5rem}
  .helps--3 .help__icon svg{width:1.25rem;height:1.25rem}
  .helps--3 .help__title{font-size:1rem}
}
/* oito blocos (Categoria): 1, 2 e 4 por linha, sempre linhas cheias, todos da mesma altura */
.helps.helps--4{grid-template-columns:1fr;grid-auto-rows:1fr}
@media (min-width:640px){.helps.helps--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.helps.helps--4{grid-template-columns:repeat(4,1fr)}}

/* filtro com ícone e contagem (Cases, por área; Materiais Ricos, por tipo), no desenho dos caminhos da Home.
   Dois jeitos: links para outra página (nav > ul > a, com aria-current) ou rádios na própria página (.vfilter__opt, sem JavaScript) */
.vfilter{margin-top:var(--s3)}
.vfilter ul,.vfilter__opts{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.vfilter a,.vfilter__opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;height:100%;min-height:3.5rem;padding:.625rem 1rem .625rem .625rem;
  background:var(--surface);color:var(--ink);text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.vfilter__icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;background:var(--ink);color:var(--yellow);transition:background-color .3s var(--ease),color .3s var(--ease)}
.vfilter__icon svg{width:1.125rem;height:1.125rem}
.vfilter__name{font-weight:500;font-size:var(--fs-small);line-height:1.25}
.vfilter__count{font-size:.875rem;font-weight:500;line-height:1.25;color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s var(--ease)}
/* marcado: escuro, com o quadrado do ícone amarelo */
.vfilter a[aria-current],.vfilter__opt:has(input:checked){background:var(--ink);color:var(--paper)}
.vfilter a[aria-current] .vfilter__icon,.vfilter__opt:has(input:checked) .vfilter__icon{background:var(--yellow);color:var(--ink)}
.vfilter a[aria-current] .vfilter__count,.vfilter__opt:has(input:checked) .vfilter__count{color:var(--grey-d)}
/* passar o mouse ou tocar não imita a opção marcada: só um tom acima; a contagem escurece para manter o contraste (o cinza daria 4,2:1) */
@media (hover:hover){
  .vfilter a:not([aria-current]):hover,.vfilter__opt:not(:has(input:checked)):hover{background:var(--tone)}
  .vfilter a:not([aria-current]):hover .vfilter__count,.vfilter__opt:not(:has(input:checked)):hover .vfilter__count{color:var(--mid)}
}
.vfilter a:not([aria-current]):active,.vfilter__opt:not(:has(input:checked)):active{background:var(--tone)}
.vfilter__opt:not(:has(input:checked)):active .vfilter__count{color:var(--mid)}
/* foco: traço escuro na opção clara (o amarelo some no papel), amarelo na opção marcada */
.vfilter a:focus-visible{outline-offset:-5px}
.vfilter a[aria-current]:focus-visible{outline-color:var(--yellow)}
.vfilter__opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-5px}
.vfilter__opt:has(input:checked:focus-visible){outline-color:var(--yellow)}
/* links: 2 colunas a partir de 640px e 4 a partir de 900px; no celular, uma faixa só que desliza para o lado, de borda a borda da tela */
@media (min-width:640px){.vfilter ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.vfilter ul{grid-template-columns:repeat(4,1fr)}}
@media (max-width:639px){
  .vfilter ul{display:flex;gap:.5rem;background:none;border:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .vfilter ul::-webkit-scrollbar{display:none}
  .vfilter li{flex:none;scroll-snap-align:start}
  .vfilter a{min-height:var(--tap);gap:.625rem;padding:.25rem .875rem .25rem .25rem;border:1px solid var(--line);white-space:nowrap}
  .vfilter a[aria-current]{border-color:var(--ink)}
  .vfilter a .vfilter__icon{width:2.125rem;height:2.125rem}
  .vfilter a .vfilter__icon svg{width:1rem;height:1rem}
}
/* rádios: o grupo é um fieldset; cada opção é um rótulo e o rádio cobre a opção inteira (o toque em qualquer ponto marca) */
fieldset.vfilter{border:0;min-width:0;min-inline-size:0}
.vfilter__opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.vfilter__opt{position:relative;cursor:pointer}
.vfilter__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vfilter__txt{display:contents}
/* celular: três blocos lado a lado; em cima o ícone e a contagem, embaixo o nome (quebra em duas linhas quando precisa) */
@media (max-width:639px){
  .vfilter__opt{grid-template-columns:auto 1fr;grid-template-areas:"icon count" "name name";align-content:start;gap:.5rem;min-height:0;padding:.5rem}
  .vfilter__opt .vfilter__icon{grid-area:icon;width:2rem;height:2rem}
  .vfilter__opt .vfilter__icon svg{width:1rem;height:1rem}
  .vfilter__opt .vfilter__name{grid-area:name}
  .vfilter__opt .vfilter__count{grid-area:count;justify-self:end}
}
/* telas de 320px: o nome em 14px para "Infográficos" caber inteiro */
@media (max-width:359px){.vfilter__opt .vfilter__name{font-size:.875rem}}

/* links de redes com o nome da rede (Autor, no escuro; Empresa, no claro): alvo de 44px */
.netlinks{list-style:none}
.netlinks a{display:flex;align-items:center;justify-content:center;gap:.55em;min-height:var(--tap);padding:0 1rem;border:1px solid var(--ink);
  color:var(--ink);text-decoration:none;font-size:var(--fs-small);font-weight:500;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.netlinks svg{width:1.05rem;height:1.05rem;flex:none}
@media (hover:hover){.netlinks a:hover{background:var(--ink);color:var(--paper)}}
.netlinks a:active{background:var(--ink);color:var(--paper)}
.dark .netlinks a{border-color:#3a3a3a;color:var(--paper)}
@media (hover:hover){.dark .netlinks a:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}}
.dark .netlinks a:active{background:var(--paper);color:var(--ink)}

/* números sobre a empresa ou o autor (sem case por trás): legenda em cinza, menor que a dos cases (Autor, Empresa) */
.hero-proof--stat .hero-proof__metric{font-size:var(--fs-small);color:var(--grey-d);font-weight:500;text-wrap:pretty}

/* --- 16.2 CASE (single-cases-mestre.php e modelo-case-interna.php) --- */
/* topo com foto e números do case, ficha e depoimento; o resto vem do post (sumário, texto) e do Serviço (faixa de cases, formulário do fim) */
.case-hero{overflow:hidden;padding-block:clamp(1.25rem,.9rem + 1.5vw,2.25rem) var(--s4)}
.case-hero__grid{display:grid;row-gap:1.5rem}
/* logo do cliente (logo_cliente_monocromatico): o PNG de 265×55 traz o logo centralizado com sobra dos lados; a moldura fina assume essa sobra */
.case-hero__logo{display:block;height:2.5rem;width:auto;margin-top:1.25rem;padding:.3125rem 0;border:1px solid var(--line-d);background:rgba(10,10,10,.55)}
.case-hero__title{margin-top:.875rem;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em}
.case-hero__sub{margin-top:.5rem;font-size:var(--fs-lead);line-height:1.35;font-weight:300;color:var(--paper)}
/* foto do case (imagem_destaque): em cinza, apagando para o preto do topo */
.case-hero__media{position:absolute;inset:0 0 auto 0;height:min(26rem,70%);z-index:-1;pointer-events:none}
.case-hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;filter:grayscale(1) contrast(1.05);opacity:.5}
/* a faixa de cima fica mais escura: é onde a trilha (texto pequeno) passa por cima da foto, e ela precisa de 4,5:1 */
.case-hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,10,.82),rgba(10,10,10,.72) 16%,rgba(10,10,10,.35) 42%,var(--ink) 92%)}
/* números do case: o protagonista do topo.
   No celular, uma coluna para o número e outra para a métrica, compartilhadas pelas três linhas (subgrid):
   as métricas ficam alinhadas mesmo quando um número é mais largo ("+956%", "R$608 mil") */
.case-proof{list-style:none;display:grid;grid-template-columns:minmax(3.2em,max-content) 1fr;column-gap:.75rem;
  border-top:1px solid var(--line-d);font-size:clamp(2.25rem,1.9rem + 1.6vw,2.5rem)}
.case-proof li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding-block:.75rem;
  border-bottom:1px solid var(--line-d)}
@supports not (grid-template-columns:subgrid){.case-proof li{grid-template-columns:minmax(3.2em,max-content) 1fr;column-gap:.75rem}}
.case-proof__num{font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--paper)}
.case-proof__num small{font-size:.5em;font-weight:700;letter-spacing:0;margin-left:.04em}
.case-proof__metric{font-size:var(--fs-small);line-height:1.35;font-weight:500;color:var(--paper)}
/* celular e tablet: H1, números e só então o botão */
@media (max-width:1023px){
  .case-hero__head{order:1}
  .case-proof{order:2}
  .case-hero__cta{order:3}
}
@media (max-width:639px){.case-hero__cta .btn{width:100%}}
/* celulares baixos (iPhone SE e parecidos): tudo um pouco mais junto para os três números caberem na primeira tela */
@media (max-width:639px) and (max-height:740px){
  .case-hero{padding-top:1rem}
  .case-hero__grid{row-gap:1.125rem}
  .case-hero__logo{margin-top:1rem;height:2.25rem}
  .case-hero__title{font-size:1.625rem}
  .case-proof li{padding-block:.5rem}
}
/* tablet: números em três colunas */
@media (min-width:640px){
  .case-hero__title{font-size:clamp(2.25rem,1.5rem + 2vw,3.5rem);line-height:1.06}
  .case-hero__logo{height:2.75rem}
  .case-proof{grid-template-columns:repeat(3,1fr);column-gap:0;border-bottom:1px solid var(--line-d)}
  .case-proof li{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;border-bottom:0;
    padding:1.25rem 1.5rem 1.5rem;font-size:clamp(2.75rem,1.9rem + 2.6vw,4.5rem)}
  .case-proof li:first-child{padding-left:0}
  .case-proof li+li{border-left:1px solid var(--line-d)}
  .case-proof__metric{font-size:var(--fs-read);line-height:1.4}
  /* título longo (mais de 90 caracteres, como os cases antigos): um degrau menor, para os números continuarem na primeira tela */
  .case-hero__title--long{font-size:clamp(2rem,1.3rem + 1.6vw,2.75rem);line-height:1.1}
}
/* desktop: texto à esquerda, foto à direita, números em toda a largura embaixo */
@media (min-width:1024px){
  .case-hero{padding-block:clamp(1.5rem,1rem + 1.5vw,2.5rem) var(--s4)}
  .case-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4rem;row-gap:0}
  .case-hero__head,.case-hero__cta{grid-column:1}
  .case-hero__cta{margin-top:1.75rem}
  .case-proof{grid-column:1/-1;margin-top:var(--s4)}
  .case-hero__media{inset:0 0 0 auto;width:56%;height:auto}
  .case-hero__media img{object-position:center 30%;opacity:.6}
  .case-hero__media::after{background:linear-gradient(to right,var(--ink),rgba(10,10,10,.2) 45%,rgba(10,10,10,0) 70%),
    linear-gradient(to top,var(--ink) 18%,rgba(10,10,10,0) 55%)}
}
/* texto: vídeo do editor com fundo escuro enquanto o player carrega; o topo não tem imagem sobreposta, então o texto começa logo abaixo */
.case-layout .entry iframe{background:var(--ink)}
.post-layout.case-layout{padding-block:var(--s4) var(--s6)}
@media (max-width:1099px){.case-layout{gap:1.5rem}}
/* ficha do case: cliente e serviço; no desktop fica na lateral, acima do sumário, com a mesma régua dele */
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem}
@media (min-width:1100px){.case-facts{border-top:2px solid var(--ink);padding-top:1rem}}
.case-facts dt{font-size:var(--fs-xs);font-weight:500;color:var(--grey)}
.case-facts dd{margin-top:.25rem;font-weight:700;line-height:1.3}
.case-facts a{display:inline-flex;align-items:center;gap:.625rem;min-height:var(--tap);text-decoration:none}
.case-facts a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}
.case-facts dd:not(:has(a)){min-height:var(--tap);display:flex;align-items:center}
.case-facts__icon{display:grid;place-items:center;flex:none;width:2rem;height:2rem;background:var(--ink);color:var(--yellow)}
.case-facts__icon svg{width:1rem;height:1rem}
/* depoimento no fim do texto: a citação da Home (.quote), maior */
.case-quote{margin-top:var(--s6);border-top:2px solid var(--ink);padding-top:1.25rem}
.case-quote__title{font-size:clamp(1.625rem,1.3rem + 1.3vw,2.25rem);line-height:1.15;letter-spacing:-.02em}
.case-quote .quote{margin-top:.25rem;border-top:0;padding-top:0}
.case-quote .quote blockquote{font-size:clamp(1.125rem,1rem + .55vw,1.375rem);line-height:1.55;color:var(--ink)}
.case-quote .quote blockquote strong{font-weight:700}
.case-quote .person{margin-top:0}
.case-quote .person .t-small{display:block}

/* --- 16.3 CASES, VITRINE (cases-home-page.php) --- */
/* topo: .hub-hero; filtro por área: .vfilter. Aqui só a vitrine: .cases-grid e .case-big da Home em versão clara, número na frente */
/* cartões separados (pedido de 23/10/2026: colados pelas linhas de 1px, a lista virava uma tabela só): espaço entre eles,
   borda de 1px e a régua de 2px em tinta abrindo cada cartão */
.vitrine{list-style:none;margin-top:var(--s3);gap:clamp(.75rem,.5rem + 1vw,1.25rem);background:none;border:0}
/* cartões de uma linha sempre da mesma altura; a linha mede o maior cartão dela (com 104 cases, 1fr em todas
   as linhas abriria o vão do cartão mais alto da página inteira) */
@media (min-width:640px){.vitrine{grid-auto-rows:auto}}
@media (min-width:1024px){.vitrine{grid-template-columns:repeat(4,1fr)}}
.vitrine>li{display:flex;min-width:0}
/* filtro sem recarregar (site.js): os cases das outras áreas saem da lista */
.vitrine>li[hidden]{display:none}
.vitrine .case-big{flex:1;min-width:0;padding:1.25rem 1.25rem 1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:2px solid var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.vitrine .case-big__num{font-size:clamp(2.5rem,1.9rem + 1.3vw,3.25rem)}
.vitrine .case-big__metric{margin:.5rem 0 1.25rem;font-size:var(--fs-body);line-height:1.4;font-weight:500;color:var(--text);transition:color .3s var(--ease)}
.vitrine .case-big__foot{align-items:flex-end;gap:.75rem;padding-top:.875rem;border-top-color:var(--line);transition:border-color .3s var(--ease)}
.vcase__who{display:grid;gap:.125rem;min-width:0}
.vcase__client{font-weight:700;font-size:var(--fs-small);line-height:1.3;overflow-wrap:anywhere}
.vcase__area{font-size:.875rem;font-weight:500;line-height:1.3;color:var(--grey);transition:color .3s var(--ease)}
.vcase__go{flex:none;width:1.125rem;height:1.125rem;margin-bottom:.125rem;transition:transform .35s var(--ease)}
/* resumo do case (the_excerpt de hoje): abaixo do número e da métrica, em até 3 linhas na tela; o texto inteiro fica no HTML */
.vcase__ex{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:1.25rem;font-size:var(--fs-small);line-height:1.45;color:var(--grey);transition:color .3s var(--ease)}
.vitrine .case-big:has(.vcase__ex) .case-big__metric{margin-bottom:.625rem}
/* case sem número publicado: o resumo ocupa o lugar do número, no tamanho das métricas (não estica a linha da grade) */
.vitrine .case-big--text .case-big__metric{margin-top:0;font-size:var(--fs-body);line-height:1.4;color:var(--ink)}
@media (hover:hover){
  .vitrine .case-big:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .vitrine .case-big:hover .case-big__metric{color:var(--paper)}
  .vitrine .case-big:hover .vcase__area,.vitrine .case-big:hover .vcase__ex{color:var(--grey-d)}
  .vitrine .case-big:hover .case-big__foot{border-top-color:var(--line-d)}
  .vitrine .case-big:hover .vcase__go{transform:translateX(3px)}
}
.vitrine .case-big:active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vitrine .case-big:active .case-big__metric{color:var(--paper)}
.vitrine .case-big:active .vcase__area,.vitrine .case-big:active .vcase__ex{color:var(--grey-d)}
.vitrine .case-big:active .case-big__foot{border-top-color:var(--line-d)}
.vitrine .case-big:focus-visible{outline-offset:-4px}
/* celular: número e métrica lado a lado (grade do .case-big), cliente e área numa linha embaixo */
@media (max-width:639px){
  .vitrine .case-big{padding:1rem 1rem .875rem;row-gap:.75rem}
  .vitrine .case-big__num{font-size:clamp(2.25rem,1.6rem + 3vw,2.75rem)}
  .vitrine .case-big__metric{margin:0;font-size:var(--fs-small);line-height:1.35}
  .vitrine .case-big__foot{padding-top:.75rem;align-items:center}
  .vcase__who{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.625rem}
  .vitrine .case-big:has(.vcase__ex){grid-template-areas:"num metric" "ex ex" "foot foot"}
  .vitrine .case-big:has(.vcase__ex) .case-big__metric{margin:0}
  .vcase__ex{grid-area:ex;margin:0}
  .vitrine .case-big--text{grid-template-areas:"metric metric" "foot foot"}
}

/* --- 16.4 BLOG, ÍNDICE (page-blog.php) --- */
/* topo escuro: trilha, H1, frase e os quatro destaques. Depois, a busca num bloco claro e os últimos artigos (.posts) com paginação */
.blog-hero{overflow:hidden;padding-block:clamp(1.25rem,.75rem + 2vw,2.5rem) var(--s6)}
.blog-hero__head{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.blog-hero h1{margin-top:.75rem;font-size:var(--fs-hub)}
@media (min-width:900px){.blog-hero h1{margin-top:1rem}}
/* destaques: um grande à esquerda e três empilhados à direita, com miniatura ao lado. No celular: o grande inteiro e os três em linha */
.feat4{display:grid;gap:1.5rem;margin-top:var(--s4)}
.feat4 .card__meta{flex-wrap:wrap;row-gap:.15rem}
.feat4 .card__meta span{color:var(--paper)}
.feat4__lead .card__title{font-size:clamp(1.375rem,1rem + 1.6vw,2.25rem);line-height:1.12;letter-spacing:-.02em}
.feat4__lead .card__excerpt{margin-top:.75rem}
.feat4__side{display:grid}
.feat4__item{display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:1rem;align-items:start;padding-block:1rem;border-top:1px solid var(--line-d)}
.feat4__item:first-child{border-top:0;padding-top:0}
.feat4__item:last-child{padding-bottom:0}
.feat4__item .card__meta{margin-top:0}
.feat4__item .card__title{margin-top:.25rem;font-size:1rem;line-height:1.3}
@media (max-width:399px){.feat4__item .card__meta span{display:none}}
@media (min-width:1024px){
  .feat4{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(2rem,1rem + 2vw,3.5rem);align-items:stretch}
  .feat4__side{grid-template-rows:repeat(3,1fr)}
  .feat4__item{grid-template-columns:minmax(0,42%) minmax(0,1fr);column-gap:1.5rem;align-items:center;padding-block:1.25rem}
  .feat4__item:first-child{padding-top:0}
  .feat4__item:last-child{padding-bottom:0}
  .feat4__item .card__title{font-size:clamp(1.0625rem,.8rem + .5vw,1.3125rem);line-height:1.25}
}
/* busca: bloco claro próprio, entre os destaques (escuros) e a lista; título à esquerda e campo à direita no desktop */
.blog-busca-band{background:var(--tone);padding-block:clamp(1.5rem,1rem + 1.5vw,2.25rem)}
.blog-busca{display:grid;gap:1rem}
@media (min-width:900px){.blog-busca{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:5rem;align-items:center}}
/* campo de busca no claro */
.busca-form--light input{background:var(--surface);border-color:var(--ink);color:var(--ink);caret-color:var(--ink)}
.busca-form--light input::placeholder{color:var(--grey)}
.busca-form--light input:focus{border-color:var(--ink)}
.busca-form--light .busca-form__field svg{color:var(--grey)}
/* últimos artigos: categorias como links (o 'Todos' marcado), a lista .posts da Categoria e a paginação */
.blog-cats{margin-top:var(--s3)}
.blog-cats ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.blog-cats .chip{min-height:var(--tap);color:var(--ink);text-decoration:none;font-weight:500;transition:background-color .25s var(--ease),color .25s var(--ease)}
.blog-cats .chip[aria-current]{background:var(--ink);color:var(--paper)}
@media (hover:hover){.blog-cats .chip:hover{background:var(--ink);color:var(--paper)}}
/* celular: as categorias deslizam para o lado numa linha só */
@media (max-width:639px){
  .blog-cats{margin-inline:calc(var(--gutter) * -1)}
  .blog-cats ul{flex-wrap:nowrap;overflow-x:auto;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;scroll-snap-type:x proximity}
  .blog-cats ul::-webkit-scrollbar{display:none}
  .blog-cats li{flex:none;scroll-snap-align:start}
}
.blog-ultimos .posts{margin-top:var(--s4)}
.blog-ultimos .pager{margin-top:var(--s5)}
.blog-ultimos .nl{margin-top:var(--s5)}
/* newsletter no fim da lista (Blog) e em Materiais Ricos: caixa escura; no celular, botão na largura do campo */
.nl{overflow:hidden}
.nl__grid{display:grid;gap:1.25rem}
@media (min-width:900px){.nl__grid{grid-template-columns:1fr 1fr;column-gap:5rem;align-items:center}}
.nl .t-h3{color:var(--paper)}
.nl .gform_footer{margin-top:0}
@media (max-width:559px){.nl .gform_footer .btn{width:100%}}

/* --- 16.5 CATEGORIA DO BLOG (category.php) --- */
/* topo: trilha, título e descrição. Busca num bloco claro abaixo do topo (.blog-busca-band, o mesmo do Blog).
   Lista: .posts; paginação: .pager; outras categorias: .helps--4 */
.cat-hero{overflow:hidden;padding-block:clamp(1rem,.75rem + 1.25vw,1.75rem) clamp(1.5rem,1rem + 1.5vw,2.25rem)}
.cat-hero__grid{display:grid;gap:1rem;margin-top:.5rem}
.cat-hero__title{font-weight:700;font-size:var(--fs-hub);line-height:1.06;letter-spacing:-.025em;color:var(--paper)}
.cat-hero__desc p+p{margin-top:.75em}
@media (min-width:1024px){.cat-hero__grid{row-gap:1.25rem;margin-top:.75rem}}
.cat-list{padding-block:var(--s4) var(--s6)}
@media (max-width:639px){.cat-list{padding-top:var(--s3)}}
.cat-others{border-top:1px solid var(--line)}

/* --- 16.6 AUTOR (author.php) --- */
/* topo. Celular: foto ao lado do nome, bio e redes embaixo, números no fim.
   Desktop: texto à esquerda; à direita o retrato, apoiado na borda de baixo da faixa. Lista: .posts; paginação: .pager; temas: .helps */
.author-hero{overflow:hidden;padding-top:clamp(1.25rem,1rem + 1.5vw,2.5rem)}
.author-hero__grid{display:grid;grid-template-columns:5.5rem minmax(0,1fr);grid-template-areas:"photo id" "about about" "proof proof";
  column-gap:1rem;align-items:center;margin-top:1.25rem}
.author-hero__text{display:contents}
.author-hero__photo{grid-area:photo;align-self:start;background:var(--tone-ink)}
.author-hero__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.05)}
.author-hero__id{grid-area:id}
.author-hero__name{font-weight:700;font-size:clamp(1.875rem,1.5rem + 1.6vw,2.5rem);line-height:1.04;letter-spacing:-.025em;color:var(--paper)}
.author-hero__role{margin-top:.5rem;font-size:var(--fs-body);font-weight:500;color:var(--grey-d);line-height:1.4}
.author-hero__role a{position:relative;display:inline-block;padding-block:.3rem;color:var(--paper);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.25em}
/* área de toque de 44px sem mudar o desenho do link (o mesmo recurso do .link-arrow) */
.author-hero__role a::before{content:"";position:absolute;inset:-.4rem -.25rem}
@media (hover:hover){.author-hero__role a:hover{text-decoration-thickness:3px}}
.author-hero__about{grid-area:about;margin-top:1.25rem}
.author-proof{grid-area:proof;padding-bottom:var(--s4)}
/* redes do autor (.netlinks): no celular, blocos de mesma largura, dois por linha; com número ímpar de redes, a última ocupa a linha toda.
   O vão entre colunas é o mesmo dos números logo abaixo (1rem), para as duas colunas caírem na mesma linha */
.author-social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
@media (max-width:639px){
  .author-social{column-gap:1rem}
  .author-social li{display:flex;flex:1 1 calc(50% - .5rem)}
  .author-social a{flex:1}
}
/* números do autor: dois, em duas colunas iguais */
.author-proof .hero-proof__list{grid-template-columns:repeat(2,1fr);margin-top:0}
@media (min-width:640px){
  .author-hero__grid{grid-template-columns:8rem minmax(0,1fr);column-gap:1.5rem}
  .author-hero__name{font-size:clamp(2.5rem,1.6rem + 2.4vw,3.25rem)}
}
@media (min-width:1024px){
  .author-hero__grid{grid-template-columns:minmax(0,1fr) clamp(18rem,25vw,23rem);grid-template-areas:none;column-gap:clamp(3rem,6vw,6rem);
    align-items:end;margin-top:1.5rem}
  .author-hero__text{display:block;grid-column:1;grid-row:1;padding-bottom:var(--s6)}
  .author-hero__photo{grid-column:2;grid-row:1;align-self:end}
  .author-hero__photo img{aspect-ratio:4/5}
  .author-hero__name{font-size:var(--fs-hub);line-height:1.04}
  .author-hero__role{margin-top:.875rem;font-size:var(--fs-read)}
  .author-hero__about{margin-top:1.75rem}
  .author-proof{padding-bottom:0}
}
@media (max-width:359px){
  .author-hero__grid{grid-template-columns:4.5rem minmax(0,1fr);column-gap:.875rem}
  .author-hero__name{font-size:1.75rem}
}
.author-posts .posts{margin-top:var(--s3)}
.author-topics{border-top:1px solid var(--line)}

/* --- 16.7 BUSCA (search.php): resultados e busca sem resultados --- */
/* topo: trilha, H1 com o termo entre aspas e frase (.hero-text). Nova busca num bloco claro abaixo (.blog-busca-band) */
.busca-hero{padding-block:clamp(1.25rem,.75rem + 2vw,2.5rem);overflow:hidden}
.busca-hero__grid{display:grid;gap:1rem}
.busca-hero h1{margin-top:.75rem;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);line-height:1.08;letter-spacing:-.02em}
.busca-hero h1 b{font-weight:900}
/* no celular a trilha sai (como no topo do Serviço): a página abre no termo e no campo de busca */
@media (max-width:639px){.busca-hero .crumbs{display:none}.busca-hero h1{margin-top:0}}
/* lista de resultados. Celular: miniatura ao lado do título, resumo embaixo em largura total.
   A partir de 640px: cartões do mesmo tamanho, 2 e depois 3 por linha (12 por página = linhas cheias) */
.resultados{list-style:none;display:grid}
/* no celular a lista começa mais perto do topo: mais resultados na primeira tela */
@media (max-width:639px){.busca-lista{padding-top:var(--s3)}}
.res{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr);grid-template-areas:"media meta" "media title" "ex ex";
  column-gap:1rem;align-content:start;padding-block:1.25rem;border-top:1px solid var(--line)}
.res:first-child{border-top:0;padding-top:0}
.res__media{grid-area:media;align-self:start;aspect-ratio:3/2;overflow:hidden;background:var(--tone);border:1px solid var(--ink)}
.res__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.res__meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:.25rem .75rem;font-size:var(--fs-xs);line-height:1.3;color:var(--grey);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.res__title{grid-area:title;margin-top:.35rem;font-size:1.0625rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.res__title a{padding-block:.15em;text-decoration:none}
.res__title a::before{content:"";position:absolute;inset:0}
.res__ex{grid-area:ex;margin-top:.75rem;font-size:var(--fs-small);line-height:1.55;color:var(--grey);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
/* termo buscado marcado no título e no resumo, com o marca-texto do tema */
.res mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);color:inherit;padding-inline:.05em}
@media (hover:hover){
  .res:hover .res__media img{transform:scale(1.035)}
  .res:hover .res__title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
}
.res:active .res__media img{opacity:.85}
/* página de serviço: o ícone da página no lugar da imagem destacada (hoje é só um fundo decorativo) */
.res__media--icon{position:relative;isolation:isolate;display:grid;place-items:center;background:var(--ink);color:var(--yellow)}
.res__media--icon .diag{left:62%;width:28%}
.res__media svg{width:1.5rem;height:1.5rem}
/* post sem imagem destacada: o ícone da categoria no fundo de tom */
.res__media--cat{display:grid;place-items:center;color:var(--ink)}
@media (hover:hover){.res:hover .res__media--icon{background:#121212}}
@media (min-width:640px){
  .resultados{grid-template-columns:repeat(2,1fr);gap:2.5rem 2rem}
  .res{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "meta" "title" "ex";padding:0;border:0}
  .res__media{margin-bottom:1rem}
  .res__title{margin-top:.5rem;font-size:1.25rem;line-height:1.25}
  .res__ex{margin-top:.5rem}
  .res__media svg{width:clamp(3rem,2rem + 2.5vw,4.5rem);height:clamp(3rem,2rem + 2.5vw,4.5rem)}
}
@media (min-width:1024px){.resultados{grid-template-columns:repeat(3,1fr)}}

/* --- Busca sem resultados (redesenho de 23/10/2026): "um caminho por vez"
   Uma coluna, três passos, do mais forte para o mais fraco:
   1. aviso + nova busca + dicas (topo escuro); 2. os cinco mais lidos, só títulos; 3. a linha "Ou vá para".
   Usa o que já existe: .dark, .diag, .crumbs, .busca-form, .hero-text, .t-h3 --- */

/* --- passo 1: topo --- */
.bvc-hero{overflow:hidden;padding-block:clamp(1.5rem,.75rem + 2.5vw,3rem) clamp(2rem,1.25rem + 2.5vw,3.5rem)}
/* desktop: a coluna da esquerda (7 de 12); à direita só as diagonais, como no topo da 404 */
@media (min-width:1024px){
  .bvc-hero .container{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4rem}
}
.bvc-hero h1{margin-top:1rem;font-size:clamp(2.125rem,1.4rem + 2.6vw,3.75rem);line-height:1.04;letter-spacing:-.025em}
/* o resultado em 900, numa linha própria; embaixo, em peso menor, "para" na cor de apoio e o termo em branco */
.bvc-hero__none{display:block;font-weight:900}
.bvc-hero__term{display:block;font-weight:500;color:var(--grey-d);overflow-wrap:anywhere}
.bvc-hero__q{color:var(--paper)}
.bvc-hero__form{margin-top:clamp(1.25rem,1rem + 1vw,2rem)}

/* dicas: lista curta, com um quadrado pequeno no lugar do marcador; os links seguem o .hero-text (sublinhado amarelo) */
.bvc-dicas{list-style:none;display:grid;gap:.375rem;margin-top:1.25rem}
.bvc-dicas li{position:relative;padding-left:1.125rem}
.bvc-dicas li::before{content:"";position:absolute;left:0;top:.62em;width:.375rem;height:.375rem;background:var(--grey-d)}

/* celular: a trilha sai (como na busca com resultados); a página abre no aviso e no campo */
@media (max-width:639px){
  .bvc-hero .crumbs{display:none}
  .bvc-hero h1{margin-top:0}
}

/* entrada das diagonais ao abrir a página (só decoração; o texto já nasce na tela). Mesma animação da 404 */
@media (prefers-reduced-motion:no-preference){
  .bvc-hero .diag{animation:e404-faixa 1.1s var(--ease) both}
  .bvc-hero .diag+.diag{animation-delay:.08s}
}

/* --- passo 2: os mais lidos, só títulos --- */
/* menor que o topo em tudo: título no tamanho H3, linhas de texto de leitura, sem imagem */
.bvc-lidos{padding-top:var(--s6)}
.bvc-lista{list-style:none;margin-top:var(--s3);border-top:1px solid var(--ink)}
.bvc-lista li{border-bottom:1px solid var(--line)}
.bvc-lista a{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:3.5rem;padding-block:.875rem;
  font-size:var(--fs-read);font-weight:500;line-height:1.35;color:var(--ink);text-decoration:none;
  transition:background-color .2s var(--ease)}
.bvc-lista svg{flex:none;width:1.1rem;height:1.1rem;transition:transform .3s var(--ease)}
@media (hover:hover){
  .bvc-lista a:hover span{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}
  .bvc-lista a:hover svg{transform:translateX(3px)}
}
/* toque: o mesmo retorno do .help (fundo de tom enquanto o dedo está na linha) */
.bvc-lista a:active{background:var(--tone)}

/* --- passo 3: "Ou vá para", uma linha discreta de links de texto (da proposta A) --- */
.bvc-saida{padding-block:var(--s4) var(--s6)}
.bvc-atalhos{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem}
.bvc-atalhos__rotulo{font-size:var(--fs-small);font-weight:500;color:var(--grey)}
.bvc-atalhos ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 1.5rem}
.bvc-atalhos li{display:flex;align-items:center;min-height:var(--tap)}
.bvc-atalhos a{font-size:var(--fs-small);font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.3em;text-decoration-color:var(--grey);position:relative;padding-block:.15em;transition:text-decoration-color .2s var(--ease)}
/* área de toque de 44px sem mudar o desenho do link; o contorno de foco fica justo no texto */
.bvc-atalhos a::before{content:"";position:absolute;inset:-.7rem -.4rem}
@media (hover:hover){.bvc-atalhos a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}}

/* --- 16.8 ORÇAMENTO E CONTATO (page-orcamento.php e page-contato.php) --- */
/* o topo é o do Serviço (.svc-hero): no desktop, texto à esquerda e formulário inteiro à direita na primeira tela;
   no celular e no tablet, H1, formulário e só depois o resto */
/* desktop estreito (iPad deitado, 1024 a 1279px): o formulário ganha largura para os rótulos quebrarem menos e o botão continuar na primeira tela */
@media (min-width:1024px) and (max-width:1279px){.orc-hero .svc-hero__grid{grid-template-columns:1fr 1.15fr;column-gap:3rem}}
/* desktop: trilha e H1 no alto, alinhados ao topo do cartão (Orçamento e Contato com o H1 na mesma altura, qualquer que seja a coluna mais alta).
   Telas de até 820px de altura (1366×768): o cartão perde 12px em cima e embaixo para caber inteiro, borda de baixo incluída */
@media (min-width:1024px){.orc-hero .svc-hero__grid{align-items:start}}
@media (min-width:1024px) and (max-height:820px){.orc-hero .form-card{padding-block:1.75rem}}
/* formulários 8 (Orçamento) e 4 (Contato), larguras de hoje no Gravity Forms: Nome inteiro; e-mail e telefone lado a lado;
   empresa e funcionários lado a lado; mensagem inteira. No celular só e-mail e telefone ficam lado a lado (campos curtos) */
@media (max-width:639px){
  .form-conv .gform_fields .gfield{grid-column:1/-1}
  .form-conv .gform_fields .gfield--par{grid-column:auto}
}
/* canais de contato (só no Contato): ícone de traço amarelo na caixa com borda dos ícones sociais do rodapé.
   A linha inteira é o link (toque de 44px ou mais). O endereço não tem link: sem mapa, ninguém é recebido no escritório. */
.channels{list-style:none;display:grid;border-top:1px solid var(--line-d)}
.channel{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon label" "icon value";column-gap:1rem;row-gap:.125rem;
  align-items:center;min-height:4.25rem;padding-block:.875rem;border-bottom:1px solid var(--line-d);color:var(--paper);text-decoration:none}
.channel__icon{grid-area:icon;display:grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid #3a3a3a;color:var(--yellow);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.channel__icon svg{width:1.25rem;height:1.25rem}
.channel__label{grid-area:label;align-self:end;font-size:var(--fs-xs);font-weight:500;line-height:1.3;color:var(--grey-d)}
.channel__value{grid-area:value;align-self:start;font-size:var(--fs-read);font-weight:500;line-height:1.4;overflow-wrap:anywhere;text-wrap:pretty}
/* 320px: o e-mail quebrava no meio ("...agenciamestre.co / m"); um ponto a menos no texto e no vão e ele cabe numa linha */
@media (max-width:359px){.channel{column-gap:.75rem}.channel__value{font-size:var(--fs-body)}}
.channel__sub{display:block;font-size:var(--fs-small);color:var(--grey-d)}
/* bairro, cidade e CEP não se partem ("São / Paulo"): a linha só quebra nos pontos que os separam */
.channel__sub>span{white-space:nowrap}
a.channel .channel__value{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.3em;
  transition:text-decoration-color .25s var(--ease)}
@media (hover:hover){
  a.channel:hover .channel__value{text-decoration-color:var(--yellow)}
  a.channel:hover .channel__icon{border-color:var(--paper)}
}
a.channel:active .channel__icon{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
/* depois dos canais, os números dos cases não repetem a régua de cima */
.channels-wrap+.hero-proof{border-top:0;padding-top:0}
@media (min-width:1024px){.orc-hero .channels-wrap{margin-top:var(--s4)}}
/* celular e tablet: quando os números abrem o bloco logo abaixo do formulário, a régua e o respiro de cima saem */
@media (max-width:1023px){.orc-hero .svc-hero__more>.hero-proof:first-child{margin-top:0;padding-top:0;border-top:0}}
/* seis cases (Orçamento): a mesma grade de três colunas, em duas linhas */
.hero-proof--6 .hero-proof__list{row-gap:1.5rem}
/* vagas (só no Contato): título e link na mesma linha, no tom da faixa de busca do Blog (.blog-busca-band) */
.contact-jobs{background:var(--tone)}
/* Conheça a Mestre: mosaico (bento) de blocos em tinta, tom e um amarelo, só com peças do site (.dark, .ghost, .diag, .chip, .link-arrow).
   Celular: uma coluna, na ordem do HTML. Tablet: duas colunas. Computador: quatro colunas com áreas nomeadas */
.contact-about .bento{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1)}

/* bloco: cada um é um contêiner, para o número crescer com a largura do próprio bloco */
.bento__tile{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;margin:0;
  padding:var(--s3);background:var(--tone);color:var(--ink);overflow:hidden;container-type:inline-size}

/* número protagonista: o mesmo corpo em todos os blocos; cabe no bloco mais estreito ("500+" ocupa ~2,1em) */
.bento__stat{display:flex;flex-direction:column;gap:var(--s2)}
.bento__num{display:block;font-weight:900;line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-size:clamp(3.5rem,2rem + 4vw,5.5rem);font-size:clamp(4rem,40cqi,6rem)}
.bento__num small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:.04em}
.bento__say{font-size:1.25rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;text-wrap:pretty}

/* linhas com régua (anos da história, parcerias): o mesmo desenho dos anos do prêmio */
.bento__rows{list-style:none;display:grid;margin-top:auto;padding-top:var(--s3)}
.bento__rows li{display:flex;align-items:baseline;gap:1rem;padding-block:.75rem;border-top:1px solid var(--ink);
  font-size:var(--fs-body);line-height:1.4;font-weight:500;color:var(--text)}
.bento__rows li:last-child{padding-bottom:0}
.bento__year{flex:none;min-width:3.25rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}

/* apresentação: título, posicionamento com o trecho-chave em destaque e o link para a Empresa */
.bento__lead{background:var(--ink);color:var(--paper)}
/* a palavra-fantasma da Home preenche o vão entre o título e a frase; só existe no computador, onde o bloco ocupa duas linhas da grade */
.bento__lead .ghost{display:none;left:-.03em;transform:translateY(-50%);font-size:clamp(5rem,18vw,16rem);font-size:26cqi}
.bento__lead .diag{left:auto;right:8%;width:clamp(48px,7vw,110px)}
.bento__lead .t-h2{color:var(--paper)}
.bento__claim{margin-top:var(--s2);font-size:var(--fs-lead);line-height:1.4;color:var(--grey-d);text-wrap:pretty}
.bento__claim b{font-weight:700;color:var(--paper)}
/* o link fica dentro de um parágrafo e corre como texto: numa tela de 320px ele quebra em duas linhas, cada uma com o seu sublinhado */
/* o parágrafo (bloco) segura a área de toque: num link partido em duas linhas, o ::before preso ao próprio link ficava com 25px de altura em parte do texto */
.bento__more{position:relative;align-self:flex-start;margin-top:var(--s4)}
.bento__link{display:inline;position:static;color:var(--paper);border-bottom:2px solid var(--yellow);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bento__link svg{display:inline-block;vertical-align:-.12em;margin-left:.5em}
/* a seta nunca desce sozinha: vai junto com a última palavra */
.bento__nw{white-space:nowrap}
/* área de toque de 44px sem afastar o sublinhado do texto */
.bento__link::before{content:"";position:absolute;inset:-.75rem -.25rem}

/* o que fazemos: etiquetas e a frase do time, em tinta */
.bento__serv{background:var(--ink);color:var(--paper)}
.bento__title{font-size:var(--fs-h3);line-height:1.2;color:var(--paper)}
.bento__tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.bento__tags .chip{color:var(--paper);font-weight:500}
.bento__foot{margin-top:auto;padding-top:var(--s3);font-size:var(--fs-read);line-height:1.45;font-weight:500;color:var(--paper)}

/* prêmio: o único bloco amarelo da página; os quatro anos desenham o "4×" */
.bento__prize{background:var(--yellow)}
.bento__note{margin-top:auto;padding-top:var(--s3);font-size:var(--fs-body);line-height:1.45;font-weight:500}
.bento__years{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1);margin-top:.75rem}
.bento__years li{border-top:2px solid var(--ink);padding-top:.5rem;font-size:var(--fs-small);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}

/* foto: troféus em cinza; no celular e no tablet o bloco tem proporção própria, no computador ocupa a linha da grade */
.bento__photo{padding:0;background:var(--ink);aspect-ratio:16/9}
.bento__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:grayscale(1) contrast(1.08)}
.bento__photo figcaption{position:absolute;left:0;bottom:0;max-width:calc(100% - var(--s3));padding:.5rem .875rem;background:var(--ink);color:var(--paper);
  font-size:var(--fs-small);line-height:1.35;font-weight:500}

/* ---------- tablet: duas colunas ---------- */
@media (min-width:640px){
  .contact-about .bento{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"lead lead" "hist serv" "prize count" "photo photo"}
  .bento__lead{grid-area:lead}.bento__hist{grid-area:hist}.bento__serv{grid-area:serv}
  .bento__prize{grid-area:prize}.bento__count{grid-area:count}.bento__photo{grid-area:photo;aspect-ratio:auto;min-height:15rem}
  .bento__lead{min-height:20rem}
  .bento__lead .bento__claim{margin-top:auto;padding-top:var(--s4)}
  .bento__lead .bento__more{margin-top:var(--s3)}
}

/* ---------- computador: quatro colunas, apresentação grande à esquerda ---------- */
@media (min-width:1024px){
  .contact-about .bento{grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-areas:"lead lead prize count" "lead lead photo photo" "hist hist serv serv"}
  .bento__tile{padding:var(--s4)}
  .bento__lead{min-height:0}
  .bento__lead .ghost{display:block}
  .bento__lead .bento__claim{font-size:var(--fs-h3);line-height:1.3}
  .bento__photo{min-height:16rem}
  /* história no bloco largo: 2008 ao lado da frase; 2010 e 2020 lado a lado embaixo */
  .bento__hist .bento__stat{flex-direction:row;align-items:flex-end;gap:var(--s3)}
  .bento__hist .bento__say{padding-bottom:.1em}
  .bento__hist .bento__rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3)}
  .bento__hist .bento__rows li{flex-direction:column;gap:.25rem;padding-bottom:0}
}
/* de 1024 a 1199px, o bloco de uma coluna fica estreito: menos respiro interno para o número caber */
@media (min-width:1024px) and (max-width:1199px){
  .bento__prize,.bento__count{padding:var(--s3)}
}

/* entrada: os blocos já nascem visíveis; o site.js só esconde os que estão abaixo da dobra (data-a) e respeita o movimento reduzido.
   A foto entra com um leve recuo de escala, só ela */
@media (prefers-reduced-motion:no-preference){
  .bento__photo img{transition:transform 1.4s var(--ease)}
  .bento__photo.reveal-pending img{transform:scale(1.08)}
  .bento__photo.reveal-pending.is-in img{transform:none}
}

/* computador: o "2008" fica no bloco largo; a conta abaixo dá a ele o mesmo corpo do "4×" e do "500+" dos blocos estreitos
   (40% da largura útil do bloco estreito, escrita em função da largura útil do bloco largo) */
@media (min-width:1024px){.bento__hist .bento__num{font-size:clamp(4rem,calc(20cqi - 1.1rem),6rem)}}
@media (min-width:1024px) and (max-width:1199px){.bento__hist .bento__num{font-size:clamp(4rem,calc(20cqi - .3rem),6rem)}}

/* --- 16.9 AGRADECIMENTO (page-agradecimento.php) --- */
/* quem chega aqui acabou de pedir um orçamento: o botão de orçamento do menu sai (no tema: body.page-template-page-agradecimento) */
.page-agradecimento .header-actions .btn,
.page-agradecimento .drawer .btn{display:none!important}
/* topo: o do Serviço (.svc-hero), com o cartão dos próximos passos no lugar do formulário da página anterior */
@media (min-width:1024px){
  .thanks-hero .svc-hero__grid{grid-template-columns:1.2fr 1fr;column-gap:4.5rem}
  .thanks-text{margin-top:1.5rem}
}
.thanks-hero h1{margin-top:1.25rem}
/* selo de confirmação: o traço do visto se desenha uma vez ao abrir (sem movimento, aparece pronto) */
.thanks-badge{display:grid;place-items:center;width:3.5rem;height:3.5rem;background:var(--yellow);color:var(--ink)}
.thanks-badge svg{width:2rem;height:2rem;stroke-dasharray:24}
@media (prefers-reduced-motion:no-preference){
  .thanks-badge{animation:thanks-pop .5s var(--ease) both}
  .thanks-badge svg{animation:thanks-draw .55s var(--ease) .25s both}
}
@keyframes thanks-pop{from{transform:scale(.6);opacity:0}}
@keyframes thanks-draw{from{stroke-dashoffset:24}}
.thanks-text p{font-size:var(--fs-read);line-height:1.6;color:var(--grey-d);font-weight:500}
.thanks-text p+p{margin-top:.875rem}
.thanks-text strong{color:var(--paper);font-weight:700}
/* cartão dos próximos passos */
.next-card{background:var(--surface);color:var(--ink);border:1px solid var(--ink);padding:clamp(1.25rem,1rem + 1vw,1.75rem)}
.next-card .form-head__title{margin-bottom:1.25rem}
.steps{list-style:none;display:grid}
.step{position:relative;display:grid;grid-template-columns:2.5rem 1fr;column-gap:1rem;align-items:start;padding-bottom:1.25rem}
.step:last-child{padding-bottom:0}
/* linha que liga um passo ao outro */
.step:not(:last-child)::before{content:"";position:absolute;left:calc(1.25rem - .5px);top:2.5rem;bottom:0;width:1px;background:var(--line)}
.step.is-done::before{background:var(--ink)}
.step__mark{position:relative;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);background:var(--surface);
  color:var(--grey);font-weight:700;font-variant-numeric:tabular-nums}
.step__mark svg{width:1.25rem;height:1.25rem}
.is-done .step__mark{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.is-now .step__mark{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.step__body{display:flex;flex-direction:column;gap:.125rem;padding-top:.3rem}
.step__title{font-weight:700;line-height:1.3}
.step__when{font-size:var(--fs-small);line-height:1.4;color:var(--grey)}
.is-now .step__when{color:var(--ink);font-weight:500}
/* o passo em andamento pulsa duas vezes ao abrir e para (menos de 5 s: nada se mexe sem parar ao lado do texto, WCAG 2.2.2) */
@media (prefers-reduced-motion:no-preference){
  .is-now .step__mark::after{content:"";position:absolute;inset:-1px;border:2px solid var(--yellow);pointer-events:none;opacity:0;
    animation:step-pulse 2.2s var(--ease) .8s 2}
}
@keyframes step-pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
/* celular e tablet: H1, cartão e só depois o texto. O selo fica ao lado do H1 (empilhado, ele gastava uma linha inteira) */
@media (max-width:1023px){
  .next-card{order:2}
  .thanks-hero .svc-hero__more{padding-block:.5rem 2rem}
  .thanks-head{display:flex;align-items:center;gap:1rem}
  .thanks-badge{flex:none}
  .thanks-hero h1{margin-top:0}
}
/* celular: o cartão encosta nas bordas, com a linha amarela no topo (igual ao formulário compacto) */
@media (max-width:639px){
  .thanks-hero .svc-hero__grid{gap:1.25rem}
  .thanks-head{gap:.875rem}
  .thanks-badge{width:2.75rem;height:2.75rem}
  .thanks-badge svg{width:1.5rem;height:1.5rem}
  .next-card{--px:max(var(--gutter),env(safe-area-inset-left));margin-inline:calc(-1 * var(--px));border-inline:0;border-top:3px solid var(--yellow);
    padding:1.125rem var(--px) 1.25rem}
  .next-card .form-head__title{margin-bottom:1rem}
  .step{padding-bottom:1rem}
}
/* cases: quatro do mesmo tamanho (2×2 até 1199px, 4 em linha depois) */
@media (min-width:1024px){.cases-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.cases-grid--4{grid-template-columns:repeat(4,1fr)}
  /* cartão estreito: menos recuo lateral e vão menor no pé, para o logo caber ao lado do "Ver o case" */
  .cases-grid--4 .case-big{padding-inline:1.5rem}.cases-grid--4 .case-big__foot{gap:.75rem}}
/* foco: o contorno padrão do site (tinta, por fora do cartão); com os cartões claros e separados, o amarelo por dentro sumia */
/* depoimentos na faixa escura */
.thanks-quotes .quote{border-top-color:var(--paper)}
.thanks-quotes .quote blockquote{color:var(--paper)}
.thanks-quotes .quote blockquote::before{color:var(--yellow)}
.quote__by{margin-top:auto;font-weight:700;color:var(--paper)}
.thanks-quotes .t-h2{margin-bottom:0}
/* mais da Mestre: .helps--3, com o nome em negrito acima da linha de apoio */
.thanks-more .help__title{font-weight:700}

/* --- 16.10 SERVIÇOS, CATÁLOGO (page-servicos.php) --- */
/* topo: .hub-hero só com trilha, H1 e frase (os números saíram em 23/10/2026). Serviços em destaque: título da seção e blocos do mesmo tamanho,
   separados por um espaço, com borda de 1px e a régua de 2px em tinta (o desenho da vitrine de Cases e dos cases do Agradecimento) */
.svcs-destaques{padding-bottom:0}
.destaques{list-style:none;display:grid;gap:clamp(.75rem,.5rem + 1vw,1.25rem);margin-top:var(--s3)}
.destaque{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "text text" "go go";
  column-gap:1rem;row-gap:.75rem;align-items:center;padding:1.125rem 1.25rem 1.25rem;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-top:2px solid var(--ink);transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.destaque .help__icon{grid-area:icon}
.destaque__title{grid-area:title;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.015em}
.destaque__text{grid-area:text;font-size:var(--fs-body);line-height:1.6;color:var(--text);transition:color .3s var(--ease)}
/* o link tem altura de toque de 44px; o sublinhado amarelo fica no texto e acompanha cada linha quando o nome quebra; o bloco inteiro é clicável pelo link */
.destaque__go{grid-area:go;justify-self:start;display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);font-weight:700;
  color:inherit;text-decoration:underline 2px var(--yellow);text-underline-offset:.45em;text-decoration-skip-ink:none}
.destaque__go>svg{width:1em;height:1em;flex:none;transition:transform .35s var(--ease)}
.destaque__go::after{content:"";position:absolute;inset:0}
@media (hover:hover){
  .destaque:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .destaque:hover .destaque__text{color:var(--grey-d)}
  .destaque:hover .help__icon{background:var(--yellow);color:var(--ink)}
  .destaque:hover .destaque__go>svg{transform:translateX(3px)}
}
.destaque:active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.destaque:active .destaque__text{color:var(--grey-d)}
/* foco pelo teclado: o contorno vai no bloco inteiro (sem :has, fica no próprio link) */
@supports selector(:has(*)){
  .destaque:has(.destaque__go:focus-visible){outline:2px solid var(--ink);outline-offset:-4px}
  .destaque__go:focus-visible{outline:none}
}
@media (max-width:639px){
  .destaque{padding:1rem}
  .destaque .help__icon{width:2.5rem;height:2.5rem}
  .destaque .help__icon svg{width:1.25rem;height:1.25rem}
}
@media (min-width:900px){
  .destaques{grid-template-columns:repeat(3,1fr)}
  .destaque{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.75rem 1.75rem 1.25rem}
  .destaque__title{margin-top:.25rem}
  .destaque__go{margin-top:auto}
}
/* três colunas estreitas (900 a 1099px): menos recuo lateral, para o título e o link do primeiro bloco não quebrarem */
@media (min-width:900px) and (max-width:1099px){.destaque{padding-inline:1.25rem}}
/* catálogo: as áreas da Home (details.area), cada área numa linha, nome à esquerda e serviços à direita */
.catalogo{margin-top:var(--s3);border-top:2px solid var(--ink)}
.catalogo .area{border-bottom:1px solid var(--line)}
/* a última área fica sem régua: logo abaixo vem a régua da seção do formulário (.end-form), e as duas linhas se repetiam (23/10/2026) */
.catalogo .area:last-child{border-bottom:0}
.area__name{font:inherit;letter-spacing:-.01em}
.catalogo .area ul{padding:0 0 .75rem calc(2.5rem + .875rem)}
.catalogo .area li a{justify-content:space-between;gap:1rem;padding-block:.5rem;border-bottom:0;border-top:1px solid var(--line);line-height:1.3}
.catalogo .area li a>svg{flex:none;width:1rem;height:1rem;opacity:.4;transition:opacity .25s var(--ease),transform .35s var(--ease)}
@media (hover:hover){.catalogo .area li a:hover>svg{opacity:1;transform:translateX(3px)}}
.catalogo .area li a:active{color:var(--ink)}
/* tablet: nome da área em cima, serviços embaixo em duas colunas (alinhados ao nome) */
@media (min-width:768px){
  .catalogo .area{padding-block:1.25rem;border-top:0}
  .catalogo .area summary{margin:0 0 .5rem;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
  .catalogo .area ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;padding-bottom:0}
  /* serviços da mesma linha com a mesma altura: quando um nome quebra em duas linhas, o vizinho e as setas ficam centralizados na mesma altura */
  .catalogo .area li{display:flex}
  .catalogo .area li a{flex:1 1 auto;min-height:var(--tap);font-size:1.0625rem}
  /* a primeira linha de serviços não leva régua: o nome da área já separa */
  .catalogo .area li:nth-child(-n+2) a{border-top:0}
}
/* desktop: nome à esquerda, serviços à direita em três colunas.
   details como grade: navegadores sem suporte mostram o nome em cima e os serviços embaixo (como no tablet) */
@media (min-width:1100px){
  .catalogo .area{display:grid;grid-template-columns:minmax(15rem,3fr) minmax(0,9fr);column-gap:3rem;padding-block:1.5rem}
  .catalogo .area summary{align-self:start;align-items:flex-start;margin:0}
  /* nome em duas linhas (Criação e Desenvolvimento): o ícone fica alinhado à primeira linha */
  .catalogo .area__name{padding-top:calc((2.5rem - 1.2em)/2);line-height:1.2}
  .catalogo .area ul{grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
  .catalogo .area li:nth-child(3) a{border-top:0}
}

/* --- 16.11 EMPRESA (page-empresa.php) --- */
/* topo. Celular: H1, frase, números 2×2 e a foto dos troféus recortada no centro (a trilha fica só no HTML, como no Serviço).
   Desktop: H1 e frase à esquerda, números 2×2 à direita; a foto em largura total no pé da faixa */
.about-hero{overflow:hidden;padding-top:clamp(1.25rem,1rem + 1.5vw,2.5rem)}
.about-hero__ghost{left:auto;right:-.04em;top:.1em;transform:none;font-size:clamp(7rem,4rem + 16vw,19rem)}
.about-hero__grid{display:grid;gap:0;margin-top:1.25rem}
.about-hero .t-lead{margin-top:1.25rem}
/* sem a régua de cima dos números (23/10/2026) */
.about-proof{border-top:0;padding-top:0}
.about-proof .hero-proof__list{grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem}
@media (min-width:640px) and (max-width:1023px){.about-proof .hero-proof__list{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){
  .about-hero__grid{grid-template-columns:7fr 5fr;column-gap:5rem;align-items:end}
  .about-proof{margin-top:0}
  .about-proof .hero-proof__list{gap:1.75rem 2rem}
  .about-proof .num{font-size:clamp(2.5rem,1.6rem + 1.6vw,3.25rem)}
}
/* foto dos troféus (imagem destacada da página): some nas bordas, no alto e embaixo para dentro da faixa escura.
   Embaixo desde 23/10/2026: logo depois vem "O que nos torna diferentes", também escura, e a foto terminava num corte seco */
.about-hero__media{margin:var(--s4) auto 0;max-width:1440px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 35%,#000 70%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 35%,#000 70%,transparent);
  mask-composite:intersect}
.about-hero__media img{width:100%;height:auto;aspect-ratio:1440/412;object-fit:cover;filter:grayscale(1) contrast(1.05)}
@media (max-width:639px){
  .about-hero__media{margin-top:var(--s3);-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
  .about-hero__media img{aspect-ratio:16/9}
}
/* prêmios: selo, nome e texto; blocos separados por um espaço, com borda de 1px e a régua de 2px em tinta (o desenho da vitrine de Cases,
   desde 23/10/2026), 2 colunas a partir de 900px.
   Celular: selo pequeno ao lado do nome, texto na largura toda embaixo. A partir de 640px: selo à esquerda de tudo */
.awards{list-style:none;display:grid;gap:clamp(.75rem,.5rem + 1vw,1.25rem);margin-top:var(--s3)}
@media (min-width:900px){.awards{grid-template-columns:repeat(2,1fr)}}
.award-item{display:grid;grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"seal title" "text text";column-gap:1rem;row-gap:.75rem;
  align-items:center;padding:1.25rem 1rem;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--ink)}
.award-item>div{display:contents}
.award-item__seal{grid-area:seal;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.award-item__title{grid-area:title;font-size:1.1875rem;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.award-item__text{grid-area:text;font-size:var(--fs-body);line-height:1.6;color:var(--text)}
@media (min-width:640px){
  .award-item{grid-template-columns:6.5rem minmax(0,1fr);grid-template-areas:"seal title" "seal text";grid-template-rows:auto 1fr;
    column-gap:1.5rem;row-gap:.5rem;align-items:start;padding:1.75rem}
  .award-item__title{align-self:end}
}
/* linha do tempo. Celular: foto à esquerda sobre a régua vertical; ano, título e texto ao lado.
   Desktop: título da seção fixo à esquerda (como as perguntas frequentes da Home); ano, foto e texto à direita */
.history{border-top:1px solid var(--line)}
.history__grid{display:grid;gap:var(--s3)}
@media (min-width:1024px){
  .history__grid{grid-template-columns:1fr 2fr;gap:4rem;align-items:start}
  .history__head{position:sticky;top:calc(var(--header-h) + 2rem)}
}
.tl{--img:3.5rem;--year:0rem;--gap:1rem;list-style:none;display:grid}
.tl__item{position:relative;display:grid;grid-template-columns:var(--img) minmax(0,1fr);grid-template-areas:"img year" "img body";
  column-gap:var(--gap);align-content:start;padding-bottom:1.75rem}
/* régua que liga as fotos */
.tl__item::before{content:"";position:absolute;top:var(--img);bottom:0;left:calc(var(--year) + var(--img) / 2);width:1px;background:var(--line)}
.tl__item:last-child{padding-bottom:0}
.tl__item:last-child::before{display:none}
.tl__img{grid-area:img;position:relative;width:var(--img);height:var(--img);object-fit:cover;border:1px solid var(--ink);background:var(--tone);filter:grayscale(1) contrast(1.05)}
.tl__year{grid-area:year;font-weight:900;font-size:1.5rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tl__body{grid-area:body;margin-top:.4rem}
.tl__title{font-size:1.125rem;line-height:1.3;font-weight:700}
.tl__body p{margin-top:.3rem;font-size:var(--fs-body);line-height:1.6;color:var(--text)}
/* ano repetido (dois marcos no mesmo ano): o número sai da tela e fica para leitor de tela */
.tl__item--same .tl__year{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.tl__item--same .tl__body{margin-top:0}
@media (min-width:640px){
  .tl{--img:4.5rem;--year:6rem;--gap:1.5rem}
  .tl__item{grid-template-columns:var(--year) var(--img) minmax(0,1fr);grid-template-areas:"year img body";column-gap:0;padding-bottom:2rem}
  .tl__item::before{left:calc(var(--year) + var(--img) / 2)}
  .tl__year{font-size:2rem;padding-top:.15rem}
  .tl__body{margin-top:0;padding-left:var(--gap)}
  .tl__title{font-size:1.25rem}
}
/* o que nos torna diferentes (faixa escura): 4 itens, 2×2 a partir de 768px */
.values{overflow:hidden}
.values__list{list-style:none;display:grid;gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:var(--s3)}
@media (min-width:768px){.values__list{grid-template-columns:repeat(2,1fr)}}
.value{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.25rem 1rem;background:var(--ink)}
@media (min-width:640px){.value{padding:1.75rem;gap:1.25rem}}
.value__icon{display:grid;place-items:center;width:3rem;height:3rem;background:var(--tone-ink);border:1px solid #3a3a3a;color:var(--yellow)}
.value__icon svg{width:1.5rem;height:1.5rem}
.value__title{font-size:1.1875rem;line-height:1.25;color:var(--paper);letter-spacing:-.01em}
.value__text{margin-top:.4rem;font-size:var(--fs-read);line-height:1.5;color:var(--grey-d);font-weight:500}
/* topo escuro seguido da faixa escura dos diferenciais: as diagonais do topo somem antes do pé e a desta seção surge aos poucos,
   para a emenda entre as duas não virar uma linha reta */
.about-hero>.decor{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.values>.decor{-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
/* A Mestre em fatos (no lugar de "Nossos Mestres", 23/10/2026): frase de definição em largura total, a ficha num cartão escuro
   (lista de definições, rótulo e valor) e as perguntas que as pessoas fazem às IAs, em duas colunas a partir de 900px */
.facts{border-top:1px solid var(--line)}
.facts__intro{margin-top:var(--s2)}
.facts__card{margin-top:var(--s4);padding:var(--s3) var(--s2)}
.facts__card-title{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.015em;color:var(--paper)}
.ficha{display:grid;margin-top:var(--s2)}
.ficha__row{display:grid;gap:.25rem;padding-block:.875rem;border-top:1px solid var(--line-d)}
.ficha dt{font-size:var(--fs-small);line-height:1.4;font-weight:500;color:var(--grey-d)}
.ficha dd{font-size:var(--fs-body);line-height:1.5;font-weight:500;color:var(--paper)}
.facts__list{display:grid;margin-top:var(--s4)}
.fact{padding-block:var(--s3);border-top:1px solid var(--line)}
.fact:first-child{border-top:2px solid var(--ink)}
.fact__q{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
.fact__a{margin-top:.625rem;font-size:var(--fs-read);line-height:1.65;color:var(--text)}
.fact__a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.25em}
@media (hover:hover){.fact__a a:hover{text-decoration-color:var(--ink)}}
@media (min-width:640px){
  .facts__card{padding:var(--s4) var(--s3)}
  .ficha__row{grid-template-columns:9.5rem minmax(0,1fr);column-gap:1.5rem;align-items:baseline}
}
@media (min-width:1024px){.facts__card{padding:var(--s4)}}
/* ficha em duas colunas a partir de 1280px (antes disso o valor ficava espremido ao lado do rótulo); a régua de cima de cada linha continua desenhando a tabela */
@media (min-width:1280px){.ficha{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}}
/* perguntas frequentes depois de "A Mestre em fatos" (duas seções claras): régua de seção até 1023px; a partir de 1024px a régua de tinta da lista,
   ao lado do título, já separa, e as duas linhas se repetiriam */
@media (max-width:1023px){.faq-empresa{border-top:1px solid var(--line)}}
/* perguntas em duas colunas: cada linha da grade abre com a régua de 2px */
@media (min-width:900px){
  .facts__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4rem}
  .fact:nth-child(2){border-top:2px solid var(--ink)}
}

/* --- 16.12 CLIENTES (page-clientes.php) --- */
/* depois do formulário vêm os depoimentos (.section--rule). No celular o cartão do formulário encosta nas bordas e já fecha com uma linha,
   então a seção seguinte fica sem régua (23/10/2026) */
@media (max-width:639px){.end-form + .section--rule{border-top:0}}
/* topo: .hub-hero só com trilha, H1 e frase (os números saíram em 23/10/2026). Parede de logos em duas partes (galeria do ACF) com a chamada de hoje no meio.
   Cada logo é um quadrado de 185×185 (o fundo faz parte da imagem), então a grade é de quadrados iguais separados por linhas finas.
   36 logos fecham linhas cheias em 4, 6, 9 e 12 colunas; a segunda parte fecha a última linha com o bloco de cases (.cli-tail) */
.logos.logos--wall{grid-template-columns:repeat(4,1fr);gap:1px;margin-top:0;align-items:stretch;list-style:none;
  background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.logos.logos--wall{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1024px){.logos.logos--wall{grid-template-columns:repeat(9,1fr)}}
@media (min-width:1280px){.logos.logos--wall{grid-template-columns:repeat(12,1fr)}}
.logos--wall>li{position:relative;min-width:0;aspect-ratio:1;overflow:hidden;background:var(--surface)}
.logos.logos--wall img{width:100%;height:100%;max-width:none;margin:0;object-fit:contain;opacity:.88;transition:filter .3s var(--ease),opacity .3s var(--ease)}
/* logo com case publicado: link para o case, com a marca amarela no canto */
.logos--wall a{position:relative;display:block;width:100%;height:100%;color:var(--ink)}
.logos--wall a::after{content:"";position:absolute;inset:0;border:2px solid var(--ink);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
/* foco: borda escura e anel amarelo por dentro, visíveis no logo claro e no escuro */
.logos--wall a:focus-visible{outline:3px solid var(--yellow);outline-offset:-5px}
.logos--wall a:focus-visible::after{opacity:1}
.cli-mark{position:absolute;top:0;right:0;z-index:1;display:grid;place-items:center;width:1.375rem;height:1.375rem;
  background:var(--yellow);color:var(--ink);transition:background-color .25s var(--ease),color .25s var(--ease)}
.cli-mark svg{width:.875rem;height:.875rem;transform:rotate(-45deg)}
@media (hover:hover){
  .logos--wall a:hover img{filter:none;opacity:1}
  .logos--wall a:hover::after{opacity:1}
  .logos--wall a:hover .cli-mark{background:var(--ink);color:var(--yellow)}
}
.logos--wall a:active img,.logos--wall a:focus-visible img{filter:none;opacity:1}
.logos--wall a:focus-visible .cli-mark{background:var(--ink);color:var(--yellow)}
.logos--wall a:active::after{opacity:1}
@media (max-width:639px){.cli-mark{width:1.25rem;height:1.25rem}.cli-mark svg{width:.8125rem;height:.8125rem}}
/* legenda da marca */
.cli-legend{display:flex;align-items:center;gap:.625rem;margin-bottom:var(--s2);font-size:var(--fs-small);font-weight:500;line-height:1.3;color:var(--text)}
.cli-legend .cli-mark{position:static;flex:none}
/* bloco que fecha a última linha: total de cases publicados, link para a vitrine.
   Ocupa as colunas que faltam (o tema calcula --r4, --r6, --r9 e --r12 a partir do número de logos) */
.logos--wall>.cli-tail{grid-column:span var(--r4,1);aspect-ratio:auto;background:var(--ink);container-type:inline-size}
@media (min-width:640px){.logos--wall>.cli-tail{grid-column:span var(--r6,1)}}
@media (min-width:1024px){.logos--wall>.cli-tail{grid-column:span var(--r9,1)}}
@media (min-width:1280px){.logos--wall>.cli-tail{grid-column:span var(--r12,1)}}
.cli-tail a{display:flex;align-items:center;gap:.25rem 1rem;width:100%;height:100%;padding:.75rem 1.25rem;color:var(--paper);text-decoration:none;
  transition:background-color .3s var(--ease)}
.cli-tail a::after{display:none}
.cli-tail .num{font-size:clamp(2.25rem,1.8rem + 1.6vw,3.25rem);color:var(--paper)}
.cli-tail__text{font-weight:500;font-size:var(--fs-read);line-height:1.25}
.cli-tail__go{flex:none;width:1.25rem;height:1.25rem;margin-left:auto;color:var(--yellow);transition:transform .35s var(--ease)}
@media (hover:hover){.cli-tail a:hover{background:#121212}.cli-tail a:hover .cli-tail__go{transform:translateX(3px)}}
.cli-tail a:active{background:#121212}
.cli-tail a:focus-visible{outline-color:var(--yellow);outline-offset:-4px}
/* bloco de uma coluna só (quadrado): número em cima, texto e seta embaixo */
@container (max-width:11rem){
  .cli-tail a{flex-wrap:wrap;align-content:center;padding:.625rem .75rem;column-gap:.375rem}
  .cli-tail .num{flex-basis:100%;font-size:2rem}
  .cli-tail__text{flex:1;font-size:var(--fs-xs)}
  .cli-tail__go{width:1rem;height:1rem;align-self:flex-end}
}
/* chamada do meio: título com o botão na mesma linha; a frase de apoio embaixo, na largura toda */
.cli-cta{overflow:hidden;padding-block:var(--s4)}
.cli-cta__grid{display:grid;gap:1rem;justify-items:start}
.cli-cta .t-lead b{font-weight:700;color:var(--paper)}
@media (min-width:900px){
  .cli-cta__grid{grid-template-columns:1fr auto;column-gap:2.5rem;row-gap:.75rem;align-items:end}
  .cli-cta__grid .t-lead{grid-column:1/-1;grid-row:2}
  .cli-cta__grid .btn{grid-column:2;grid-row:1}
}
@media (max-width:639px){.cli-cta .btn{width:100%;margin-top:.25rem}}

/* --- 16.13 TRABALHE CONOSCO (page-trabalhe-conosco.php) --- */
/* topo: trilha, título, frase, texto sobre a Mestre e o botão para o site de vagas, numa coluna só (os números saíram em 23/10/2026) */
.tc-hero{overflow:hidden;padding-block:clamp(1.25rem,1rem + 1.5vw,2.5rem) var(--s6)}
.tc-hero .ghost{font-size:clamp(7rem,21vw,21rem);top:auto;bottom:-.2em;transform:translateX(-50%)}
.tc-hero__text{margin-top:1.25rem}
.tc-hero__tagline{margin-top:.875rem;font-size:var(--fs-h3);line-height:1.2;font-weight:300;letter-spacing:-.01em;color:var(--paper)}
.tc-hero__lead{margin-top:1.25rem}
.tc-hero__cta{margin-top:var(--s3)}
@media (max-width:639px){.tc-hero__cta{width:100%}}
@media (min-width:1024px){
  .tc-hero__text{margin-top:1.5rem}
  .tc-hero__tagline{margin-top:1rem}
  .tc-hero__lead{margin-top:1.5rem}
}
/* missão: frase de destaque na largura toda; a assinatura embaixo com o marca-texto amarelo */
.tc-mission__text{font-size:clamp(1.5rem,1.05rem + 2vw,2.75rem);line-height:1.2;font-weight:500;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.tc-mission__sign{margin-top:var(--s3);font-size:var(--fs-lead);line-height:1.3}
.tc-mission__sign strong{font-weight:700}
/* valores (faixa escura). Celular: lista com régua, ícone à esquerda, nome e texto à direita.
   A partir de 640px: duas colunas; a partir de 1024px, três (duas linhas cheias). Cada valor abre com a régua clara, como as áreas da Home */
.tc-values-band{overflow:hidden}
.tc-values{list-style:none;display:grid;margin-top:var(--s3);border-top:1px solid var(--paper)}
.tc-value{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.3rem;align-items:center;
  padding-block:1.25rem;border-bottom:1px solid var(--line-d)}
.tc-value__icon{grid-row:1/span 2;align-self:start;display:grid;place-items:center;width:var(--tap);height:var(--tap);
  border:1px solid #3a3a3a;color:var(--yellow)}
.tc-value__icon svg{width:1.375rem;height:1.375rem}
.tc-value__name{font-size:1.1875rem;line-height:1.25;font-weight:700;color:var(--paper)}
.tc-value__text{font-size:var(--fs-body);line-height:1.6;color:var(--grey-d);font-weight:500}
@media (min-width:640px){
  .tc-values{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem;row-gap:var(--s4);border-top:0}
  .tc-value{grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start;row-gap:.875rem;
    padding:1.25rem 0 0;border-bottom:0;border-top:2px solid var(--paper)}
  .tc-value__icon{grid-row:auto;align-self:center}
  .tc-value__text{grid-column:1/-1;align-self:start}
}
@media (min-width:1024px){
  .tc-values{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3rem}
  .tc-value__name{font-size:1.3125rem}
  .tc-value__text{font-size:var(--fs-read);line-height:1.6}
}
/* chamada final para o site de vagas (no lugar da lista, 23/10/2026): faixa no tom da busca do Blog e das vagas do Contato.
   A partir de 900px, título e botão na mesma linha e o texto embaixo na largura toda (como o .cli-cta); no celular, o botão na largura toda.
   Texto de apoio no tom do texto (o cinza do .t-body não passa no contraste sobre o --tone) */
.tc-cta{background:var(--tone)}
.tc-cta .t-body{color:var(--text);font-size:var(--fs-read)}
.tc-cta__grid{display:grid;gap:var(--s3);justify-items:start}
@media (min-width:900px){
  .tc-cta__grid{grid-template-columns:minmax(0,1fr) auto;column-gap:4rem;row-gap:.75rem;align-items:end}
  .tc-cta__grid>div{display:contents}
  .tc-cta__grid h2{grid-column:1;grid-row:1}
  .tc-cta__grid p{grid-column:1/-1;grid-row:2;margin-top:0}
  .tc-cta__grid .btn{grid-column:2;grid-row:1}
}
@media (max-width:639px){.tc-cta .btn{width:100%}}

/* --- 16.14 MATERIAIS RICOS (page-materiais-ricos.php) --- */
/* topo: .hub-hero; filtro por tipo: .vfilter com rádios. Estante de capas em grade simétrica (2, 3 e 5 colunas: os 30 materiais fecham todas as linhas) */
/* a seção vem logo depois do topo escuro: menos espaço em cima para a primeira fileira de capas aparecer inteira */
.mr-lib{padding-top:min(var(--s6),var(--s4))}
.mr-lib .vfilter{margin-top:0}
.mats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) .75rem;margin-top:var(--s3)}
@media (min-width:640px){.mats{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.25rem}}
@media (min-width:1024px){.mats{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4) 1.5rem}}
.mats>li{display:flex;min-width:0}
/* filtro: só os materiais do tipo marcado */
.mr-lib:has(#tipo-ebooks:checked) .mats>li:not([data-tipo=ebooks]),
.mr-lib:has(#tipo-infograficos:checked) .mats>li:not([data-tipo=infograficos]){display:none}
.mat{position:relative;flex:1;display:flex;flex-direction:column;min-width:0}
.mat__cover{aspect-ratio:1/1;overflow:hidden;background:var(--tone);border:1px solid var(--ink)}
.mat__cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .2s var(--ease)}
.mat__title{margin-block:.875rem;font-size:1rem;line-height:1.3;font-weight:700;letter-spacing:-.01em;text-wrap:pretty}
.mat__title a{display:block;min-height:var(--tap);text-decoration:none}
.mat__title .nw{white-space:nowrap}
/* o cartão inteiro leva o clique do título */
.mat__title a::before{content:"";position:absolute;inset:0}
/* rodapé do cartão: na mesma altura em toda a linha (a régua alinha a estante) */
.mat__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding-top:.625rem;border-top:1px solid var(--line);
  font-size:.875rem;font-weight:500;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.mat__foot svg{flex:none;width:1.125rem;height:1.125rem;color:var(--ink);transition:transform .35s var(--ease)}
@media (min-width:1024px){.mat__title{font-size:1.0625rem}}
@supports selector(:has(*)){
  .mat__title a:focus-visible{outline:none}
  .mat:has(.mat__title a:focus-visible){outline:2px solid var(--ink);outline-offset:6px}
}
@media (hover:hover){
  .mat:hover .mat__cover img{transform:scale(1.035)}
  .mat:hover .mat__title a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.25em}
  .mat:hover .mat__foot svg{transform:translate(2px,-2px)}
}
.mat:active .mat__cover img{opacity:.85}
/* newsletter (bloco de hoje no fim da página): o .nl do Blog; a lista acima já dá o espaço de cima */
.mr-news{padding-top:0}
.mr-news .nl strong{color:var(--paper)}

/* --- 16.15 PÁGINA PADRÃO E MAPA DO SITE (page.php, page-politicas-e-privacidades.php, page-sitemap.php) --- */
/* topo das duas páginas: trilha e título no escuro, sem imagem */
.page-hero{overflow:hidden;padding-block:var(--s2) var(--s3)}
@media (min-width:768px){.page-hero{padding-block:var(--s3) var(--s4)}}
.page-hero h1{margin-top:.75rem}
/* página padrão: coluna de leitura do post e sumário. Celular: sumário recolhido e, abaixo, o texto.
   Desktop: texto à esquerda na largura do post, sumário fixo à direita */
.page-layout{display:grid;gap:var(--s3);padding-block:var(--s3) var(--s6)}
/* tablet e notebook pequeno (sumário ainda em cima): a grade limita a coluna de leitura à largura do post, alinhada à esquerda como o título */
@media (min-width:768px) and (max-width:1099px){.page-layout{grid-template-columns:minmax(0,var(--measure))}}
@media (min-width:1100px){
  .page-layout{grid-template-columns:minmax(0,var(--measure)) 18rem;justify-content:space-between;column-gap:4rem;padding-top:var(--s5)}
  .page-layout>.entry{grid-column:1;grid-row:1}
  .page-layout>.toc{grid-column:2;grid-row:1}
}
/* texto jurídico: seções numeradas como no sumário, títulos menores que os do post (são muitos e curtos) */
.entry--legal{counter-reset:sec}
.entry--legal>h2{counter-increment:sec;display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;
  font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);line-height:1.2;letter-spacing:-.015em;margin-top:2.25em}
/* o número é visual (o leitor de tela lê só o título); navegador sem o texto alternativo do content usa a primeira linha */
.entry--legal>h2::before{content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero) / "";font-size:var(--fs-small);font-weight:500;letter-spacing:.02em;
  color:var(--grey);font-variant-numeric:tabular-nums}
.entry--legal>h2+*{margin-top:.75em}
/* o texto da seção alinha com o título, não com o número; nas listas, o marcador fica pendurado nesse recuo */
@media (min-width:640px){.entry--legal>h2~:not(h2){padding-left:2.4rem}}
.entry--legal ol{list-style:decimal}
.entry--legal li>ol{margin-top:.5em}
/* links no meio do texto (os e-mails): área de toque mais alta sem mexer na linha; o marca-texto do hover continua só no texto, como no post */
.entry--legal a{padding-block:.3em;background-origin:content-box;background-clip:content-box}
/* rótulo do sumário com 14px enquanto o sumário fica no fluxo do texto (até 1099px: Post, Case e Página) */
@media (max-width:1099px){.toc .kicker{font-size:.875rem}}
/* títulos longos no sumário quebram sem deixar pedaço sozinho ("opt-" / "out") */
.page-layout .toc a{text-wrap:pretty}
/* notebook de tela baixa (1366×768): os 14 itens cabem no sumário fixo sem rolagem interna */
@media (min-width:1100px) and (max-height:860px){.page-layout .toc ol{margin-top:.5rem}.page-layout .toc a{padding-block:.4rem}}
.smap{border-top:1px solid var(--line)}
.smap:first-of-type{border-top:0}
.smap .section-head .t-body{margin-top:0}
/* lista de links: uma coluna no celular; no desktop, a mesma grade das áreas de serviço (as colunas se alinham entre as seções).
   Ordem por título, da esquerda para a direita; cada linha da grade tem a altura do título mais longo dela */
.smap-list{list-style:none;display:grid;column-gap:3rem;margin-top:var(--s3);border-top:1px solid var(--ink)}
.smap-list a{display:flex;align-items:center;min-height:var(--tap);height:100%;padding-block:.5rem;border-bottom:1px solid var(--line);
  color:var(--text);line-height:1.35;text-decoration:none;text-wrap:pretty}
.smap-list a[aria-current]{color:var(--grey)}
@media (hover:hover){
  .smap-list a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}
}
.smap-list a:active{color:var(--ink)}
@media (min-width:640px){.smap-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){
  .smap-list{padding-top:.75rem}
  .smap-list a{align-items:flex-start;min-height:2.25rem;padding-block:.375rem;border-bottom:0}
}
@media (min-width:1100px){.smap-list{grid-template-columns:repeat(4,minmax(0,1fr))}.smap-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* áreas de serviço (componente da Home): no desktop, todos os cabeçalhos com a altura de um título em duas linhas,
   para as listas começarem na mesma altura; itens de duas linhas com respiro */
@media (min-width:768px){
  .smap .area summary{min-height:2.875rem}
  .smap .area__title{line-height:1.25;min-height:1.75rem}
  .smap .area li a{padding-block:.375rem;line-height:1.35}
}
/* páginas de serviço sem filhas, abaixo das áreas, com a régua das áreas */
.smap-sub{margin-top:var(--s4);padding-top:1rem;border-top:1px solid var(--ink);font-size:1.125rem;font-weight:700;line-height:1.3}
.smap-sub+.smap-list{margin-top:.25rem;border-top:0}
@media (min-width:768px){.smap-sub{border-top-width:2px}.smap-sub+.smap-list{padding-top:.25rem}}
/* artigos do blog: uma linha por categoria; abre a lista de artigos */
.smap-cats{margin-top:var(--s3);border-top:1px solid var(--ink)}
.smap-cat{border-bottom:1px solid var(--line)}
.smap-cat>summary{display:grid;grid-template-columns:1fr auto auto;align-items:center;column-gap:1rem;min-height:3.5rem;padding-block:.625rem;
  cursor:pointer;list-style:none}
.smap-cat>summary::-webkit-details-marker{display:none}
.smap-cat__name{font-size:1.125rem;font-weight:700;line-height:1.3}
.smap-cat__count{font-size:var(--fs-small);color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.smap-cat>summary>svg{width:1.25rem;height:1.25rem;flex:none;transition:transform .3s var(--ease)}
.smap-cat[open]>summary>svg{transform:rotate(180deg)}
@media (hover:hover){.smap-cat>summary:hover .smap-cat__name{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}}
/* categoria aberta: a linha fica presa sob o cabeçalho enquanto a lista rola, e fecha de onde você estiver */
.smap-cat[open]>summary{position:sticky;top:var(--header-h);z-index:1;background:var(--paper);box-shadow:0 1px 0 var(--line)}
.smap-cat__body{padding-bottom:var(--s3)}
.smap-cat__body .smap-list{margin-top:0;padding-top:.25rem;border-top:0;font-size:var(--fs-small)}
.smap-cat__body .link-arrow{margin-top:1.25rem;font-size:var(--fs-small)}
@media (min-width:1100px){.smap-cat__body .smap-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- 16.16 404 (404.php) --- */
/* redesenho de 23/10/2026, com as ideias da busca sem resultado: topo com o número, o H1 em 900, uma frase com humor, a frase prática (.hero-text)
   e a busca (.busca-form, botão amarelo); depois os mais lidos (.bvc-lidos) e a linha "Ou vá para" (.bvc-saida) */
.e404-hero{overflow:hidden;padding-block:clamp(1.25rem,.75rem + 2vw,2.5rem) clamp(1.75rem,1.25rem + 2vw,3rem)}
.e404-hero__grid{display:grid;gap:.875rem}
/* o "404" (opc_404_titulo_pagina): número protagonista, como o 4× do prêmio na Home */
.e404-hero__code{font-weight:900;font-size:clamp(4.5rem,2rem + 11vw,14rem);line-height:.78;letter-spacing:-.02em;color:var(--paper);
  font-variant-numeric:tabular-nums;user-select:none}
.e404-hero h1{font-size:clamp(2.125rem,1.4rem + 2.6vw,3.75rem);line-height:1.04;letter-spacing:-.025em;color:var(--paper)}
/* "não encontrada" com a linha amarela embaixo: é o que a pessoa precisa ler primeiro. Sublinhado de texto, que acompanha as duas linhas no celular */
.e404-hero__mark{text-decoration:underline var(--yellow);text-decoration-thickness:.09em;text-underline-offset:.14em;text-decoration-skip-ink:none}
/* a frase com humor: logo abaixo do aviso, grande e clara; a frase prática vem menor, na cor de apoio */
.e404-hero__humor{margin-top:.875rem;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.25;font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.e404-hero .hero-text{margin-top:.75rem}
@media (min-width:1024px){
  .e404-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4rem;align-items:center}
  .e404-hero__main{grid-column:1;grid-row:1}
  .e404-hero__code{grid-column:2;grid-row:1;justify-self:end}
}
/* entrada do número e das diagonais ao abrir a página (só decoração; o texto já nasce na tela) */
@media (prefers-reduced-motion:no-preference){
  .e404-hero__code{animation:e404-sobe .9s var(--ease) both}
  .e404-hero .diag{animation:e404-faixa 1.1s var(--ease) both}
  .e404-hero .diag+.diag{animation-delay:.08s}
}
@keyframes e404-sobe{from{opacity:0;transform:translateY(.12em)}}
@keyframes e404-faixa{from{opacity:0;transform:skewX(-16deg) translateX(-1.5rem)}}

/* ---------- 13b. VÍDEO DO YOUTUBE (fachada) ---------- */
/* A capa e o botão chegam com a página; o player (cerca de 1 MB de JavaScript do YouTube) só carrega no clique. */
.yt{position:relative;display:block;aspect-ratio:16/9;background:var(--ink);overflow:hidden;color:var(--ink)}
.yt img{width:100%;height:100%;object-fit:cover;border:0;transition:opacity .3s var(--ease)}
.yt__play{position:absolute;left:50%;top:50%;width:4.5rem;height:4.5rem;transform:translate(-50%,-50%);display:grid;place-items:center;
  background:var(--yellow);transition:transform .3s var(--ease)}
.yt__play svg{width:1.75rem;height:1.75rem;margin-left:.2rem}
@media (hover:hover){.yt:hover img{opacity:.85}.yt:hover .yt__play{transform:translate(-50%,-50%) scale(1.06)}}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.entry a.yt{background:var(--ink);text-decoration:none}

/* ---------- 14. MOVIMENTO ---------- */
/* o conteúdo é visível por padrão; o JS só esconde o que está abaixo da dobra e revela ao rolar */
.reveal-pending{opacity:0;transform:translateY(24px)}
.reveal-pending.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.reveal-pending[data-a=line]{opacity:1;transform:scaleX(0);transform-origin:left}
.reveal-pending[data-a=line].is-in{transform:scaleX(1);transition:transform 1.1s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal-pending{opacity:1!important;transform:none!important}
}

/* ---------- 15. IMPRESSÃO ---------- */
@media print{
  .site-header,.site-footer,.post-aside,.cta-band,.share,.progress,.notice,.sticky-cta{display:none!important}
  .dark{background:#fff;color:#000}
  .facts__card :is(.facts__card-title,dt,dd){color:#000}
  .entry{max-width:none}
}