/* AB — V5.1.1: adições editoriais isoladas, sem reestruturar o site aprovado. */
#projetos-servicos, #sobre, #criacoes, #processo, #contato {scroll-margin-top:76px;}

/* Abertura: opção de pular visível acima do iframe; saída sempre coberta de branco. */
.ab-skip-intro[hidden]{display:none!important;}
.ab-skip-intro{
  position:fixed;z-index:2147483002;top:max(24px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));
  background:#f7f4ef;color:#191919;border:1px solid #bbb2a4;
  font:700 11px/1.2 var(--sans,Arial,sans-serif);letter-spacing:.12em;
  box-shadow:0 4px 18px #0002;padding:12px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:20px;min-height:42px;
}
.ab-skip-intro::before{content:"";position:absolute;width:34px;height:10px;top:-6px;left:calc(50% - 17px);background:#e3d8c5a8;transform:rotate(-4deg)}
.ab-skip-intro:focus-visible{outline:3px solid #555;outline-offset:3px}
@media(max-width:580px){.ab-skip-intro{right:16px;font-size:10px;padding:10px 12px;gap:10px}}

/* Ao final da linha do tempo, uma explicação breve de contratação. */
#processo .ab-processo-outro{
  position:relative;max-width:1100px;margin:clamp(30px,6vw,62px) auto 0;
  padding:clamp(21px,3vw,30px) clamp(20px,3vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:25px;
  border:1px solid #c9c1b490;background:#f9f6efed;box-shadow:0 7px 22px #3427170c;
}
#processo .ab-processo-outro::before{content:"";position:absolute;top:-7px;left:24px;width:65px;height:14px;background:#e7ddc8a3;transform:rotate(-3deg)}
#processo .ab-processo-outro p{margin:0;max-width:68ch;font:400 clamp(13px,1.15vw,15px)/1.7 var(--sans,Arial,sans-serif);color:#46423c}
#processo .ab-processo-outro strong{font-weight:800;color:#181818;display:block;margin-bottom:3px}
#processo .ab-processo-outro a{flex-shrink:0;text-decoration:none;color:#171717;font:800 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.12em;border-bottom:1px solid #a79f92;padding:12px 0;min-height:42px}
#processo .ab-processo-outro a:hover{border-color:#151515}

/* Quem cria — um bloco humano, editorial e simples, após o carrossel. */
.ab-sobre{position:relative;isolation:isolate;width:100%;padding:clamp(62px,7vw,102px) var(--pad) clamp(72px,8vw,112px);color:var(--ink);background:transparent;overflow:hidden}
.ab-sobre__layout{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(235px,.78fr) minmax(0,1.25fr);gap:clamp(38px,7vw,105px);align-items:center;}
.ab-sobre__visual{position:relative;min-height:340px;display:grid;place-items:end center;isolation:isolate;border-bottom:1px solid #8c857972}
.ab-sobre__visual::before{content:"";position:absolute;inset:8% 7% 2%;z-index:-1;border:1px dashed #a69c8d61;transform:rotate(-3deg)}
.ab-sobre__visual::after{content:"";position:absolute;left:8%;bottom:16%;width:30px;height:30px;border:1px solid #948a7b79;border-radius:50%;pointer-events:none}
.ab-sobre__visual img{width:clamp(170px,19vw,246px);height:auto;display:block;max-height:320px;object-fit:contain;filter:drop-shadow(0 7px 5px #15151515);}
.ab-sobre__construction{position:absolute;pointer-events:none;opacity:.55}
.ab-sobre__construction--top{top:4%;left:0;width:74px;border-top:1px solid #8e8577;transform:rotate(-7deg)}
.ab-sobre__construction--side{right:3%;top:12%;height:72px;border-left:1px solid #8e8577;transform:rotate(7deg)}
.ab-sobre__pencil{position:absolute;right:5%;bottom:24%;font:italic 16px Georgia,serif;transform:rotate(-8deg);color:#92897e}
.ab-sobre__text{position:relative;padding:clamp(14px,2vw,26px) 0}
.ab-sobre__eyebrow{font:700 10px/1.45 var(--sans,Arial,sans-serif);letter-spacing:.14em;margin:0 0 24px;color:#6f665a}
.ab-sobre__eyebrow span{color:#aaa295}
.ab-sobre h2{font:800 clamp(39px,5vw,66px)/1.03 var(--serif,Arial,sans-serif);letter-spacing:-.055em;margin:0 0 21px}
.ab-sobre__lead{font:500 clamp(16px,1.55vw,21px)/1.6 var(--sans,Arial,sans-serif);max-width:46ch;margin:0 0 17px;color:#292722}
.ab-sobre__detail{font:400 clamp(13px,1.05vw,15px)/1.7 var(--sans,Arial,sans-serif);max-width:56ch;color:#6d665d;margin:0 0 24px}
.ab-sobre__link{display:inline-flex;gap:20px;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid #817a6c;font:800 10px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.13em;color:#1d1a16}
.ab-sobre__link:hover{border-color:#111}

/* Escolha do serviço em uma folha de papel: comportamento nativo de dialog. */
.ab-service-dialog{color:#171717;border:0;padding:0;background:transparent;max-width:min(94vw,550px);max-height:min(94dvh,740px);box-shadow:none;overflow:visible}
.ab-service-dialog::backdrop{background:rgba(19,18,17,.58);backdrop-filter:blur(5px)}
.ab-service-dialog__paper{position:relative;padding:clamp(23px,5vw,38px);border:1px solid #c4b9a8;background:#faf7f0 url("assets/textures/paper-matte.webp") center/cover;box-shadow:0 25px 85px #0004;max-height:min(90dvh,715px);overflow-y:auto}
.ab-service-dialog__paper::before,.ab-service-dialog__paper::after{content:"";position:absolute;top:-7px;width:63px;height:14px;background:#e4d8c0ba;border:1px solid #a88e6619;pointer-events:none}
.ab-service-dialog__paper::before{left:18px;transform:rotate(-5deg)}
.ab-service-dialog__paper::after{right:18px;transform:rotate(5deg)}
.ab-service-dialog__eyebrow{font:800 10px/1.5 var(--sans,Arial,sans-serif);letter-spacing:.15em;color:#7a7368;margin:0 0 14px}
.ab-service-dialog h2{font:800 clamp(29px,6vw,43px)/1.04 var(--serif,Arial,sans-serif);letter-spacing:-.045em;margin:0 42px 16px 0}
.ab-service-dialog #abServiceDialogDescription{font:400 14px/1.6 var(--sans,Arial,sans-serif);color:#6b655d;margin:0 0 24px}
.ab-service-dialog__options{display:grid;gap:9px}
.ab-service-dialog__options a{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;background:#fffdf9;border:1px solid #d4ccbe;text-decoration:none;color:#1b1a18;font:700 13px/1.45 var(--sans,Arial,sans-serif)}
.ab-service-dialog__options a:hover{background:#f1eadf;border-color:#a69a89}
.ab-service-dialog__options .ab-service-dialog__other{background:#f0ece4;font-weight:500}
.ab-service-dialog__close{position:absolute;right:19px;top:18px;width:36px;height:36px;border:1px solid #bcb3a6;background:#fffbf5;color:#222;display:grid;place-items:center;font-size:23px;cursor:pointer}
.ab-service-dialog :is(a,button):focus-visible{outline:2px solid #46413b;outline-offset:3px}

/* Tipos pequenos funcionam como informação legível, não apenas ornamento. */
#projetos .work-link__features{font-size:clamp(11px,.85vw,12px)!important;line-height:1.6!important}
#projetos .work-link__action{font-size:clamp(10px,.78vw,11px)!important;line-height:1.5!important;min-height:44px}
.ab-criacoes__type,.ab-criacoes__note{font-size:11px}

@media(max-width:699px){
  .ab-sobre{padding:70px max(19px,var(--pad)) 85px}
  .ab-sobre__layout{grid-template-columns:1fr;gap:25px}
  .ab-sobre__visual{min-height:230px;max-width:360px;width:100%;margin:auto}
  .ab-sobre__visual img{width:175px;max-height:225px}
  .ab-sobre__pencil{font-size:13px}
  .ab-sobre h2{font-size:clamp(39px,10vw,51px)}
  .ab-sobre__eyebrow{font-size:10px}
  .ab-sobre__lead{font-size:16px}
  #processo .ab-processo-outro{flex-direction:column;align-items:flex-start;margin-top:25px;gap:5px}
  #processo .ab-processo-outro p{font-size:13px}
  #processo .ab-processo-outro a{font-size:11px}
  #projetos .work-link__features{font-size:11px!important}
  #projetos .work-link__action{font-size:10px!important}
  .ab-service-dialog{max-width:calc(100vw - 26px);width:calc(100vw - 26px)}
  .ab-service-dialog__paper{padding:25px 18px 22px}
  .ab-service-dialog h2{font-size:31px}
  /* Os mesmos rascunhos do desktop, reduzidos e reposicionados nas bordas. */
  #projetos .projects-sticky{isolation:isolate}
  #projetos .ab-editorial-margin--left,
  #projetos .ab-editorial-margin--right{display:block!important;position:absolute!important;z-index:0!important;width:85px!important;height:auto!important;opacity:.11!important;pointer-events:none!important;overflow:hidden!important;transform:none!important}
  #projetos .ab-editorial-margin--left{top:180px!important;left:0!important;clip-path:inset(0 65% 0 0)}
  #projetos .ab-editorial-margin--right{top:450px!important;right:0!important;clip-path:inset(0 0 0 65%)}
  /* Reaproveita os desenhos aprovados em seções novas sem cobrir textos. */
  #criacoes::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:0;top:22px;width:56px;height:170px;background:url("assets/editorial/margem-esquerda.svg") top left/90px auto no-repeat;opacity:.12}
  #sobre::before{content:"";position:absolute;pointer-events:none;z-index:-1;right:0;top:26px;width:54px;height:180px;background:url("assets/editorial/margem-direita.svg") top right/90px auto no-repeat;opacity:.12}
}
@media(prefers-reduced-motion:reduce){
  #projetos .work-link{transition:none!important}
  .ab-sobre *{animation:none!important;transition:none!important}
  .ab-service-dialog *{animation:none!important;transition:none!important}
}

/* A cortina deve ficar inteiramente branca antes de o iframe sair do DOM. */
.ab-intro-white-fade.is-covering{transition:opacity .35s ease-in-out}
.ab-intro-white-fade.is-revealing{transition:opacity .55s ease-in-out}
@media(prefers-reduced-motion:reduce){.ab-intro-white-fade.is-covering,.ab-intro-white-fade.is-revealing{transition:none!important}}


/* V5.1.2 — ajustes finos do rapel, espaçamento e ícone do menu */

/* Menos respiro entre o card final do processo e a próxima seção */
#processo .ab-processo-outro{margin:clamp(22px,4vw,40px) auto 0!important}
.ab-criacoes{padding-top:clamp(34px,4.8vw,56px)!important}
@media(max-width:620px){.ab-criacoes{padding-top:40px!important}}

/* Rapel menor e mais à esquerda, sem invadir a leitura do card */
@media (min-width: 901px){
  #processo .ab-rappel{
    left:5.8%!important;
    top:-6px!important;
    width:clamp(88px,6.2vw,118px)!important;
  }
  #processo .ab-rappel__art{
    filter:drop-shadow(0 3px 2px rgba(25,22,19,.018))!important;
  }
}

/* Ícone do menu mais editorial e compatível com o post-it */
.menu__lines{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:3px!important;
  width:18px!important;
  height:14px!important;
  border:none!important;
  border-radius:0!important;
  background:transparent!important;
}
.menu__lines::before{
  content:"";
  position:absolute;
  left:-8px;
  top:-6px;
  width:1px;
  height:24px;
  background:linear-gradient(180deg, rgba(51,46,39,.22), rgba(51,46,39,.08));
  transform:rotate(-9deg);
  opacity:.8;
}
.menu__lines i{
  display:block!important;
  height:1.5px!important;
  background:currentColor!important;
  border-radius:999px;
  transform-origin:center;
  transition:transform .24s ease, opacity .18s ease, width .18s ease!important;
}
.menu__lines i:nth-child(1){width:16px!important;transform:rotate(-4deg)}
.menu__lines i:nth-child(2){width:12px!important;transform:rotate(1deg)}
.menu__lines i:nth-child(3){width:15px!important;transform:rotate(4deg)}
.menu[aria-expanded="true"] .menu__lines i:nth-child(1){transform:translateY(4.5px) rotate(45deg)!important;width:16px!important}
.menu[aria-expanded="true"] .menu__lines i:nth-child(2){opacity:0!important;transform:scaleX(.2)!important}
.menu[aria-expanded="true"] .menu__lines i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)!important;width:16px!important}
@media(max-width:699px){
  .menu__lines{width:16px!important;height:13px!important;gap:3px!important}
  .menu__lines::before{left:-6px;height:21px;top:-5px}
  .menu__lines i:nth-child(1){width:14px!important}
  .menu__lines i:nth-child(2){width:10px!important}
  .menu__lines i:nth-child(3){width:13px!important}
}


/* V5.1.3 — capas reais do carrossel de criações */

.ab-criacoes__project[data-project="ag"] .ab-criacoes__visual img{object-position:50% 0%}
.ab-criacoes__project[data-project="garota"] .ab-criacoes__visual img{object-position:50% 0%}
.ab-criacoes__project[data-project="benicio"] .ab-criacoes__visual img{object-position:50% 4%}
.ab-criacoes__project[data-project="celso"] .ab-criacoes__visual img{object-position:50% 0%}
@media(max-width:940px){
  .ab-criacoes__project[data-project="ag"] .ab-criacoes__visual img{object-position:50% 0%}
  .ab-criacoes__project[data-project="garota"] .ab-criacoes__visual img{object-position:50% 0%}
  .ab-criacoes__project[data-project="benicio"] .ab-criacoes__visual img{object-position:50% 7%}
  .ab-criacoes__project[data-project="celso"] .ab-criacoes__visual img{object-position:50% 0%}
}


/* V5.1.4 — rapel visível também em larguras intermediárias */

/* Em vez de desaparecer cedo, o rapel continua visível em telas médias */
@media (min-width: 741px) and (max-width: 900px){
  #processo .timeline__footer{position:relative!important; isolation:isolate;}
  #processo .ab-rappel{
    display:block!important;
    position:absolute;
    left:2.6%!important;
    top:-2px!important;
    width:clamp(72px,11vw,92px)!important;
    aspect-ratio:2/3;
    z-index:3!important;
    pointer-events:none;
    user-select:none;
    overflow:visible;
  }
  #processo .ab-rappel__fixacao{
    position:absolute;
    left:57.7%;
    top:-3px;
    transform:translateX(-50%);
    width:6px;
    height:6px;
    border:1.25px solid rgba(31,29,27,.75);
    background:#f8f6f0;
    border-radius:50%;
    z-index:2;
  }
  #processo .ab-rappel__art{
    display:block;
    width:100%;
    height:auto;
    opacity:.98;
    transform-origin:57.7% 0%;
    transform:rotate(-5deg);
    animation:ab-rappel-balanco 5.8s ease-in-out infinite;
    will-change:transform;
    filter:drop-shadow(0 3px 2px rgba(25,22,19,.022))!important;
  }
}
@media (max-width: 740px){
  #processo .ab-rappel{display:none!important;}
}

/* V5.2.2 — reforço de navegação por teclado e áreas de toque no celular. */
.topbar :is(.menu,.brand,.header-contact):focus-visible,
.site-menu :is(a,button):focus-visible,
.work-link__action:focus-visible,
.ab-processo-outro a:focus-visible,
.contact-section__button:focus-visible{outline:2px solid #24221e;outline-offset:3px;}
@media (max-width:620px){
  .ab-criacoes__arrow{width:44px!important;height:44px!important;}
  .ab-criacoes__note{font-size:12px!important;line-height:1.6!important;}
  .ab-convite-dialog__close{min-width:44px;min-height:44px;}
}