/* =====================================================================
   GH NOVAES — PORTFÓLIO · responsive.css
   Camada exclusiva para celulares (largura até 767px).
   Tudo aqui está dentro de @media (max-width:767px) ou menor,
   portanto NÃO afeta o desktop. Edite aqui para mudar só o mobile.
   ===================================================================== */
/* =====================================================================
   MOBILE COMPACTO — vale apenas abaixo de 768px. Nada aqui afeta o desktop.
   Ideia: "tela de apresentação" — textos e imagens próximos, faixas
   horizontais para galerias, menos espaço vertical, leitura confortável.
   ===================================================================== */
@media (max-width:767px){
  body{font-size:15px}
  .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .top .wrap{padding-block:10px}
  .brand{font-size:16px}

  /* faixas horizontais com rolagem própria (sem arrastar a página para os lados) */
  .m-rail{display:flex!important;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-18px;padding-inline:18px;padding-bottom:4px;scroll-padding-inline:18px}
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail>*{scroll-snap-align:start;flex:0 0 auto}

  /* seções e cabeçalhos: ~30% menos espaço vertical */
  .sec{padding-block:52px}
  .sec-head{margin-bottom:22px;gap:8px}
  .sec-head .mono{padding-top:0}
  .sec-head h2{font-size:clamp(26px,7.6vw,31px);letter-spacing:-.035em;line-height:1.04}
  .sec-head p{margin-top:10px;font-size:15px;line-height:1.5}

  /* ---------- capa ---------- */
  .hero2{padding-block:22px 30px}
  .h-top{padding-bottom:10px;margin-bottom:18px;gap:4px 14px;font-size:11px}
  .h-top span:nth-child(2){order:3;flex-basis:100%}
  .hero2 .name{font-size:clamp(50px,15.2vw,66px);line-height:.88}
  .h-grid{margin-top:18px;gap:14px}
  .headline{font-size:clamp(21px,6vw,25px);line-height:1.12;max-width:none}
  .h-side{gap:14px}
  .h-side .sub{font-size:15px;line-height:1.5}
  .hero-actions{gap:8px}
  .hero-actions .btn{padding:12px 16px;font-size:14.5px}
  .h-index{margin-top:22px;gap:10px;margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px;scrollbar-width:none}
  .h-index::-webkit-scrollbar{display:none}
  .tile,.tile:first-child{flex:0 0 38%;aspect-ratio:3/4}
  .tile .t-lab{padding:26px 10px 9px}
  .tile .t-lab b{font-size:14px}
  .tile .t-lab .mono{font-size:11px}

  /* ---------- marcas: grade 3×2 ---------- */
  .clients .wrap{padding-block:14px}
  .logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .lg{height:50px;padding:0 6px}
  .lg img{height:20px;max-width:100%;object-fit:contain}
  .lg .txt{font-size:13.5px;text-align:center;line-height:1.1}

  /* ---------- empresas: cabeçalho curto → 3 capas na mesma faixa → ações ---------- */
  .works{gap:40px}
  .work,.work:nth-child(even){display:grid;grid-template-columns:1fr;gap:10px}
  .work .w-info{display:contents}
  .work .w-logo{order:1;height:26px;margin-bottom:-2px}
  .work .w-meta{order:2;font-size:11px;gap:4px 12px}
  .work h3{order:3;font-size:26px}
  .work .w-info>p{order:4;font-size:15px;line-height:1.5;max-width:none}
  .work .mosaic{order:5;margin-top:4px;gap:8px}
  .work .tags{order:6;gap:6px}
  .work .w-actions{order:7;margin-top:2px;gap:8px}
  .tag{font-size:12px;padding:4px 9px}
  .btn.sm{padding:10px 14px;font-size:13.5px}
  .mosaic figure{border-radius:8px}
  .mosaic figure:nth-child(2){transform:none}
  .mosaic .open-hint{display:none}
  .rbadge{left:6px;top:6px;font-size:9.5px;padding:4px 7px 4px 5px}
  .rplay{width:34px;height:34px;margin:-17px 0 0 -17px}
  .rplay svg{width:12px;height:12px}

  /* estudo de caso (janela) */
  .cs-hero{padding-block:22px;gap:12px}
  .cs-hero h2{font-size:40px}
  .cs-hero p{font-size:15px}
  .cs-hero .w-logo{margin-bottom:12px;height:30px}
  .cs-body{grid-template-columns:1fr;gap:14px;padding-bottom:22px}
  .cs-body p{font-size:14.5px}
  .cs-sub{padding-top:22px}
  .cs-sub h4{font-size:19px}
  .cs-reels{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:8px;padding-top:12px;max-width:none}
  .rcard{border-radius:10px}
  .rcard .ov{padding:9px}
  .rcard b{font-size:13.5px}
  .rcard small,.rcard .mono{display:none}
  .rcard .play{width:32px;height:32px}.rcard .play svg{width:12px;height:12px}
  .cs-gal{columns:2;column-gap:8px;padding-block:14px}
  .cs-gal figure{margin-bottom:8px}
  .cs-foot{padding-bottom:32px}

  /* ---------- RECOM ---------- */
  .band .sec-head h2{font-size:clamp(25px,7.2vw,30px)}
  .recom-logo{height:28px;margin-bottom:16px!important}
  .case{gap:18px;padding-block:32px}
  .case-side{gap:10px}
  .case-side h3{font-size:25px}
  .case-side p{font-size:15px;line-height:1.5}
  .dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-top:4px}
  .dl div{padding-top:9px;gap:3px}
  .dl dt{font-size:11px}
  .dl dd{font-size:13px;line-height:1.45}
  .dash{border-radius:14px}
  .dash-bar{padding:9px 12px;gap:8px}
  .dash-bar .ttl{font-size:13px}
  .dash-tabs button{padding:5px 10px;font-size:12px}
  .dash-body{padding:10px;gap:8px}
  .kpis{gap:8px}
  .kpi{padding:10px 11px;gap:3px;border-radius:10px}
  .kpi .lab{font-size:11.5px}
  .kpi .val{font-size:19px}
  .kpi .sub{font-size:11px;gap:6px}
  .panels{gap:8px}
  .panel{padding:10px 11px 6px;border-radius:10px}
  .panel h4{font-size:13px;margin-bottom:4px}
  .legend{font-size:11px;gap:10px}
  #lineChart{max-height:170px}
  #funnelChart{max-height:150px}
  .dash-foot{padding:8px 12px;font-size:11px}
  .feat-list{margin-top:10px;gap:8px}
  .feat{flex:0 0 72%;padding:12px;gap:4px}
  .feat b{font-size:16px}
  .feat span{font-size:13px}
  .pages{gap:8px}
  .pages figure,.pages .big{flex:0 0 40%;grid-column:auto;grid-row:auto}
  .pages .big{flex-basis:52%}
  .capline{margin-top:8px;font-size:12.5px}

  /* ---------- audiovisual ---------- */
  .videos{gap:8px}
  .videos .stack{grid-template-columns:1fr 1fr;gap:8px}
  .vid .ov{padding:12px}
  .vid h3{font-size:17px}
  .vid.sm h3{font-size:13.5px;line-height:1.2}
  .vid .mono{font-size:11px;margin-bottom:4px}
  .vid .play{width:40px;height:40px}.vid .play svg{width:14px;height:14px}
  .vid.sm .play{width:30px;height:30px}.vid.sm .play svg{width:11px;height:11px}
  .vnotes{margin-top:16px;padding-top:0;gap:10px;border-top:0}
  .vnotes>div{flex:0 0 74%;border:1px solid var(--line);border-radius:12px;padding:12px;gap:4px}
  .vnotes b{font-size:16px}
  .vnotes span{font-size:13.5px}
  .events{grid-template-columns:38% 1fr;gap:14px;margin-top:32px;align-items:start}
  .ev-photo{aspect-ratio:3/4;max-width:none}
  .ev-text{gap:8px}
  .ev-text h3{font-size:20px;line-height:1.1}
  .ev-text p{font-size:14px;line-height:1.5}
  .ev-reel{grid-column:1/-1;grid-template-columns:62px 1fr;gap:12px;padding:8px;max-width:none}
  .ev-reel img{width:62px;height:84px}
  .ev-reel b{font-size:15.5px}

  /* ---------- e-mail ---------- */
  .principles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-bottom:22px}
  .principles div{padding-top:10px;gap:3px}
  .principles b{font-size:16px}
  .principles span{font-size:13.5px}
  .mail-grid{grid-auto-columns:64%;gap:10px;margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px}
  .mail .shot{max-height:330px}
  .mail figcaption{padding:10px 12px 12px;font-size:13px}
  .peek{width:34px;height:34px}

  /* ---------- 2P: catálogo e apresentações ---------- */
  .cat{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none}
  .cat figure{gap:6px}
  .cat figcaption{flex-direction:column;gap:0;font-size:12.5px}
  .cat figcaption span{font-size:11.5px}
  .spreads{margin-top:22px;gap:8px}
  .spreads figure,.spreads .wide{flex:0 0 74%;grid-column:auto;grid-row:auto}
  .spreads figcaption{font-size:12.5px}
  .spreads figcaption span{display:inline}
  .deck{margin-top:32px;padding-top:24px;gap:14px}
  .deck-info{gap:10px}
  .deck-info h3{font-size:24px}
  .deck-info p{font-size:14.5px;line-height:1.5}
  .deck-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-top:0;margin-inline:-18px;padding-inline:18px}
  .deck-list::-webkit-scrollbar{display:none}
  .deck-list li{flex:0 0 auto}
  .deck-list button{display:inline-flex;gap:6px;width:auto;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px}
  .deck-list button:hover{padding-left:12px}
  .deck-list button[aria-selected="true"]{border-color:var(--ink)}
  .screen{padding:6px;border-radius:12px}
  .deck-ctrl button{width:38px;height:38px}

  /* ---------- sobre: foto menor ao lado da frase principal ---------- */
  .about2{grid-template-columns:36% 1fr;gap:14px 16px;align-items:start}
  .about-text{display:contents}
  .about-photo{grid-column:1;grid-row:1;position:relative;top:0;max-width:none;aspect-ratio:4/5;border-radius:6px}
  .about-photo figcaption{display:none}
  .quote{grid-column:2;grid-row:1;font-size:clamp(17px,4.9vw,20px);line-height:1.22;align-self:center}
  .a-lead,.roles,.a-body,.a-close{grid-column:1/-1}
  .a-lead{font-size:15.5px;margin-top:6px}
  .roles{grid-template-columns:1fr;gap:14px;padding-top:16px}
  .role{gap:6px}
  .role-tag b{font-size:17px}
  .role p{font-size:15px;line-height:1.55}
  .a-body{font-size:15px;line-height:1.6;padding-top:16px}
  .a-close{font-size:18px}
  #sobre .wrap>div[style*="height"]{height:44px!important}
  .fronts .front{padding:14px 0;gap:4px}
  .front h3{font-size:18px}
  .front p{font-size:14.5px}
  .front span{font-size:11.5px}

  /* ---------- contato ---------- */
  .contact{padding-block:56px 32px}
  .contact h2{font-size:clamp(38px,11vw,46px)}
  .contact-grid{margin-top:24px;gap:18px}
  .contact-grid p{font-size:15px}
  .chan a,.chan .row{grid-template-columns:78px minmax(0,1fr) auto;padding:12px 2px}
  .chan .v{font-size:15px}
  footer .wrap{font-size:12px;padding-block:16px}
}
@media (max-width:374px){
  .hero2 .name{font-size:48px}
  .tile,.tile:first-child{flex-basis:42%}
  .dl dd{font-size:12.5px}
  .kpi .val{font-size:17px}
  .quote{font-size:16.5px}
}