/* Celular e tablet (15/09/2026) — a mesma folha nas duas camadas: site/*.dc.html e dist/.
   Os seletores usam ids e atributos data-* escritos no .dc.html, que sobrevivem à captura do
   build. !important porque o layout do sistema é escrito em style inline. */

:root{--afo-curva:cubic-bezier(.2,.6,.2,1)}

/* ---------- Menu com três traços (até 960px) ---------- */
.afo-menu-botao,.afo-menu{display:none}

@media (max-width:960px){
  #afo-topbar nav{display:none !important}
  #afo-topbar{padding-right:76px !important}

  .afo-menu-botao{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    position:fixed;top:18px;right:20px;z-index:61;width:44px;height:44px;padding:0;
    border-radius:999px;border:1px solid rgba(236,231,224,.22);background:rgba(20,20,20,.55);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#ece7e0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:top 260ms var(--afo-curva),border-color 160ms var(--afo-curva),background-color 160ms var(--afo-curva)
  }
  .afo-menu-botao:hover{border-color:rgba(236,231,224,.5)}
  .afo-menu-botao span{display:block;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:transform 260ms var(--afo-curva),opacity 160ms var(--afo-curva)}
  html.afo-menu-aberto .afo-menu-botao{border-color:rgba(176,138,78,.6);background:rgba(10,10,10,.6)}
  html.afo-menu-aberto .afo-menu-botao span:nth-child(1){transform:translate3d(0,6.5px,0) rotate(45deg)}
  html.afo-menu-aberto .afo-menu-botao span:nth-child(2){opacity:0}
  html.afo-menu-aberto .afo-menu-botao span:nth-child(3){transform:translate3d(0,-6.5px,0) rotate(-45deg)}

  /* Painel: tela inteira abaixo do menu fixo, que continua por cima com o botão virando X.
     Sem WhatsApp desde 15/09/2026 (a pedido do cliente); no pé, só o currículo em PDF. */
  .afo-menu{
    display:flex;flex-direction:column;position:fixed;inset:0;z-index:59;
    padding:calc(104px + env(safe-area-inset-top,0px)) 24px calc(28px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(180deg,rgba(176,138,78,.07),rgba(10,10,10,0) 42%),rgba(10,10,10,.97);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    opacity:0;transition:opacity 180ms var(--afo-curva)
  }
  .afo-menu[hidden]{display:none !important}
  html.afo-menu-aberto .afo-menu{opacity:1;transition-duration:280ms}
  html.afo-menu-aberto,html.afo-menu-aberto body{overflow:hidden}

  .afo-menu-lista{list-style:none;margin:0;padding:0;border-top:1px solid rgba(236,231,224,.14)}
  .afo-menu-lista li{border-bottom:1px solid rgba(236,231,224,.14)}
  .afo-menu-item{
    display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:18px 2px;
    font:200 clamp(28px,8.4vw,40px)/1.1 Sora,system-ui,sans-serif;letter-spacing:-.035em;color:#ece7e0;text-decoration:none;
    opacity:0;transform:translate3d(0,18px,0);
    transition:opacity 160ms var(--afo-curva),transform 160ms var(--afo-curva),color 160ms var(--afo-curva)
  }
  html.afo-menu-aberto .afo-menu-item{
    opacity:1;transform:none;
    transition:opacity 420ms var(--afo-curva),transform 560ms var(--afo-curva),color 160ms var(--afo-curva);
    transition-delay:calc(70ms + var(--i,0) * 45ms),calc(70ms + var(--i,0) * 45ms),0ms
  }
  .afo-menu-item:hover,.afo-menu-item:focus-visible,.afo-menu-item[aria-current]{color:#b08a4e}
  .afo-menu-item:focus-visible{outline-offset:-2px}
  .afo-menu-aqui{flex:none;font:600 9.5px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,231,224,.6)}

  .afo-menu-acoes{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity 160ms var(--afo-curva)}
  html.afo-menu-aberto .afo-menu-acoes{opacity:1;transition:opacity 420ms var(--afo-curva) 260ms}
  .afo-menu-sec{
    display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
    font:700 11px/1 Manrope,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
    transition:background-color 140ms var(--afo-curva),border-color 160ms var(--afo-curva),color 140ms var(--afo-curva)
  }
  .afo-menu-sec{border:1px solid rgba(236,231,224,.3);color:#ece7e0;font-weight:600}
  .afo-menu-sec:hover,.afo-menu-sec:focus-visible{border-color:#ece7e0;color:#ece7e0}
  .afo-menu-sec span{font-size:15px}
}

/* ---------- Capa do Currículo no celular e no tablet em pé ---------- */
@media (max-width:760px),(max-width:1024px) and (orientation:portrait){
  /* Capa do Currículo: retrato grande no alto, texto na base sobre um scrim.
     A camada de trás ("Anderson" atrás do retrato) sai; o nome inteiro fica na camada da frente. */
  [data-heroi-texto]{justify-content:flex-end !important;padding:96px clamp(24px,5.7vw,44px) 36px !important}
  [data-heroi-texto="fundo"]{display:none !important}
  [data-heroi-texto="frente"] h1 > span:first-child{visibility:visible !important;animation:afoRise 760ms var(--afo-curva) both}
  [data-heroi-texto="frente"] p{font-size:15px !important;line-height:1.6 !important}
  [data-heroi-retrato] img{height:88% !important;object-fit:cover !important;object-position:58% 0 !important}
  [data-heroi-retrato]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.9) 48%,rgba(10,10,10,.35) 70%,rgba(10,10,10,0) 82%)}
  #afo-luz{display:none !important}
  [data-dica-rolar]{display:none !important}
}

/* ---------- Celular (até 760px) ---------- */
@media (max-width:760px){
  /* Coluna central com recuo de 24px, alinhada ao texto da capa e da cena. */
  [data-coluna]{padding-left:24px !important;padding-right:24px !important}

  /* Logo no menu fixo (19/09/2026): um pouco menor no celular; a área de toque cresce
     por fora, sem mexer na altura do menu. */
  #afo-topbar > a:first-child{padding:9px 8px;margin:-9px -8px}
  #afo-topbar > a:first-child img{height:34px !important}

  /* Banda de números em 2 x 2. */
  [data-banda-numeros]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-banda-numeros] > div{padding:26px 18px 28px !important}
  [data-banda-numeros] [data-count]{font-size:clamp(38px,11vw,56px) !important}

  /* Trajetória e cases: menos recuo interno. */
  #afo-role-panel{padding:26px 22px 30px !important}
  [data-case]{padding:26px 22px 28px !important}

  /* Banda de contato. */
  #contato{padding:44px 24px !important}

  /* Rodapé: links com área de toque de 44px. */
  [data-rodape]{padding:48px 24px 32px !important;gap:36px !important}
  [data-rodape-lista]{gap:0 !important}
  [data-rodape-lista] a{display:flex;align-items:center;min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .afo-menu,.afo-menu-item,.afo-menu-acoes,.afo-menu-botao,.afo-menu-botao span{transition:none !important}
  html.afo-menu-aberto .afo-menu-item{transition:none !important}
}