/* ========================================
   GALeS — Mobile Responsive (≤ 900px)
   Aplica em todas as páginas
   ======================================== */

/* ==== HEADER — Hamburger em mobile ==== */
@media(max-width:900px){
  .site-header{top:10px !important;left:10px !important;right:10px !important;transform:none !important;justify-content:space-between;gap:0}
  .h-logo{height:48px;padding:0 12px}
  .h-logo-img{height:28px}
  .h-nav{position:fixed;top:0;left:0;right:0;bottom:0;height:auto;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:78px 20px 40px;border-radius:0;border:none;background:rgba(6,4,2,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);white-space:normal;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:35;overflow-y:auto;box-shadow:none}
  .h-nav.mobile-open{transform:translateX(0)}
  .h-item{display:block;width:100%;border-bottom:1px solid rgba(240,237,232,.08)}
  .h-item>a,.h-item>.h-trigger{padding:22px 12px;height:auto;font-size:16px;letter-spacing:.06em;color:#f0ede8;font-weight:500;justify-content:space-between}
  .h-item>a::after{content:'›';font-size:20px;color:rgba(200,120,60,.7);font-weight:300}
  .h-panel{position:static;transform:none !important;opacity:1;pointer-events:auto;min-width:0;width:100%;background:transparent;border:none;box-shadow:none;padding:0 0 14px 12px;display:none}
  .h-item.mobile-expanded .h-panel{display:block}
  .h-panel::before{display:none}
  .h-panel a{padding:12px 0;font-size:13px;color:rgba(240,237,232,.6);border-radius:0}
  .h-panel a:hover{background:transparent;color:#c87840}
  .h-panel a .h-pdesc{font-size:10px;color:rgba(240,237,232,.32)}

  /* Botão hamburger */
  .mobile-toggle{position:fixed;top:16px;right:14px;z-index:40;width:48px;height:48px;background:rgba(10,8,6,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(240,237,232,.14);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.4);padding:0}
  .mobile-toggle span{display:block;width:20px;height:1.5px;background:#f0ede8;transition:transform .3s,opacity .3s}
  .mobile-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .mobile-toggle.open span:nth-child(2){opacity:0}
  .mobile-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media(min-width:901px){.mobile-toggle{display:none !important}}

/* ==== INDEX — Panels ==== */
@media(max-width:900px){
  .panel{padding:100px 20px 80px !important;min-height:100vh;justify-content:center !important;align-items:flex-start !important}
  .ptitle{font-size:clamp(38px,10vw,60px) !important;line-height:1.05 !important}
  .psub{font-size:15px !important;line-height:1.55 !important;max-width:100% !important}
  .pdesc{font-size:14px !important}
  .eyebrow{font-size:10px !important}

  /* Painel 01 (PRONTO) — mantém à esquerda como no desktop */
  .p0{align-items:flex-start !important;text-align:left !important;justify-content:center !important;padding-bottom:120px !important}
  .p0 .ptitle{text-align:left !important}
  .p0 .psub{text-align:left !important;margin-left:0 !important}
  .scroll-hint{bottom:32px !important}

  /* Mobile: força texto visível (gradientes text-clip às vezes falham em animação travada) */
  .panel .ptitle,.panel .psub,.panel .pdesc,.panel .eyebrow{opacity:1 !important;transform:none !important;animation:none !important;filter:none !important}
  .ptitle{-webkit-text-fill-color:#f0ede8 !important;background:none !important;color:#f0ede8 !important}
  .ptitle em{-webkit-text-fill-color:#c87840 !important;background:none !important;color:#c87840 !important}

  /* Painel 02 (Do orbital) */
  .p1-inner{padding:24px 20px !important;max-width:100% !important;margin:0 !important}

  /* Painel 03 (28 anos) — stats */
  .stats-row{grid-template-columns:repeat(2,1fr) !important;gap:24px !important;margin-top:32px !important;width:100% !important}
  .stats-row > div{padding:0 !important}
  .snum{font-size:32px !important}
  .slabel{font-size:10px !important}

  /* Painel 04 (Instrumentação) — grid 2x4 → 1 coluna */
  .p4{justify-content:flex-start !important;padding-top:88px !important}
  .p4 .ptitle{font-size:clamp(30px,8vw,46px) !important;white-space:normal !important;margin-bottom:4px !important}
  .igrid{grid-template-columns:1fr 1fr !important;margin-top:20px !important}
  .igrid-item{padding:16px 14px !important;font-size:11px !important;border-right:1px solid rgba(240,237,232,.08) !important;border-bottom:1px solid rgba(240,237,232,.08) !important}
  .igrid-item:nth-child(2n){border-right:none !important}
  .igrid-item:nth-last-child(-n+2){border-bottom:none !important}
  .inum{font-size:8px !important}

  /* Painel 03 — captamos labels */
  .p3{justify-content:center !important}
  .rlabels{gap:8px !important;margin-top:28px !important;width:100%}
  .rlabel{font-size:11px !important;padding:10px 16px !important;letter-spacing:.06em !important}

  /* Painel 07 — solo */
  .p6 .ptitle{font-size:clamp(42px,11vw,66px) !important}

  /* Painel 08 — CTA */
  .p7{padding:100px 20px 80px !important;justify-content:center !important}
  .cta-card{margin:0 !important;padding:28px 24px !important;max-width:100% !important;width:100% !important}
  .cta-card .ptitle{font-size:clamp(30px,8vw,44px) !important}
  .cta-btn{font-size:10px !important;padding:12px 18px !important}
}

/* ==== PAGE-HERO (páginas internas) ==== */
@media(max-width:900px){
  .page-hero{padding:120px 20px 48px !important}
  .page-hero h1{font-size:clamp(36px,9vw,60px) !important}
  .page-hero p{font-size:15px !important}
  .section{padding:56px 0 !important}
  .section-header{margin-bottom:36px}
  .section-title{font-size:clamp(24px,6vw,36px) !important}
}

/* ==== EQUIPE ==== */
@media(max-width:900px){
  .crew-grid{grid-template-columns:repeat(2,1fr) !important;gap:24px 16px !important}
}
@media(max-width:520px){
  .crew-grid{grid-template-columns:repeat(2,1fr) !important;gap:20px 12px !important;max-width:100% !important}
  .crew-frame{padding:6px !important}
  .crew-name{font-size:13px !important}
  .crew-role{font-size:9px !important}
}

/* ==== EQUIPAMENTOS ==== */
@media(max-width:900px){
  .eq-block{padding:60px 0 !important}
  .eq-row{padding:0 20px !important;grid-template-columns:1fr !important;gap:32px !important}
  .eq-name{font-size:clamp(30px,8vw,44px) !important;line-height:1.05 !important}
  .eq-specs{grid-template-columns:1fr !important}
  .eq-spec:nth-child(odd){border-right:none !important;padding-right:0 !important}
  .eq-spec:nth-child(even){padding-left:0 !important}
  .eq-groups{grid-template-columns:1fr !important;gap:24px !important}
  /* Software ecosystem */
  .sw-section{padding:80px 0 !important}
  .sw-wrap{padding:0 20px !important}
  .sw-head{margin-bottom:44px}
  .sw-head h2{font-size:clamp(34px,9vw,54px) !important}
  .sw-row{grid-template-columns:1fr !important;gap:12px !important;padding:22px 0 !important}
  .sw-num{padding-top:0 !important;font-size:11px}
  .sw-stage{font-size:16px !important}
  .sw-tool{font-size:10px !important;padding:6px 12px !important}
  .sw-footer{padding:24px !important;margin-top:48px}
}

/* ==== SOBRE / HISTORY / PARCEIROS ==== */
@media(max-width:900px){
  .sf-cols,.about-grid{grid-template-columns:1fr !important;gap:36px !important}
  .ss-grid{grid-template-columns:repeat(2,1fr) !important}
  .partners-grid,.partners{grid-template-columns:repeat(2,1fr) !important}
  .timeline{margin-top:48px}
  .tl-item{flex:0 0 180px !important}
}
@media(max-width:520px){
  .ss-grid{grid-template-columns:1fr !important}
  .partners-grid,.partners{grid-template-columns:1fr !important}
}

/* ==== CONTATO ==== */
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr !important;gap:36px !important}
}

/* ==== PESQUISAS ==== */
@media(max-width:900px){
  .proj-row{grid-template-columns:40px 1fr !important;gap:14px !important;padding:18px 0 !important}
  .proj-row .proj-cat,.proj-row .proj-meta{display:none !important}
  .proj-title{font-size:14px !important}
  .research-grid,.pesq-grid{grid-template-columns:1fr !important}
}

/* ==== NANI PAGE ==== */
@media(max-width:900px){
  .nani{padding:110px 20px 60px !important}
  .nani-grid{grid-template-columns:1fr !important;gap:32px !important}
  .nani-photo{max-width:280px;margin:0 auto}
  .nani-name{font-size:clamp(28px,7vw,42px) !important}
}

/* ==== MEGA-FOOTER ==== */
@media(max-width:900px){
  .mega-footer{padding:56px 20px 24px !important}
  .mf-top{grid-template-columns:1fr !important;gap:36px !important}
  .mf-brand-name{font-size:22px !important}
  .mf-col h4{font-size:11px}
  .mf-col a{font-size:13px !important}
  .mf-bottom{flex-direction:column !important;align-items:flex-start !important;gap:12px !important;text-align:left}
  .mf-social{gap:10px !important}
  .mf-creator{margin-left:0 !important;font-size:10px !important}
  .mf-ig{padding:26px 0 22px !important;gap:10px !important}
  .mf-ig .mf-ig-lbl{font-size:11px !important;letter-spacing:.18em}
  .mf-ig .mf-ig-ic{width:36px;height:36px}
  .mf-ig .mf-ig-ic svg{width:16px;height:16px}
}

/* ==== TOUCH TARGETS + PERF ==== */
@media(max-width:900px){
  a,button{min-height:auto}
  body{cursor:auto !important;-webkit-tap-highlight-color:transparent}
  #grain{opacity:.04 !important}
}