/* ==========================================================================
   OpsyLab — responsive.css
   Overrides mobile-first aplicados sobre o CSS inline existente.
   Carregar APÓS o <style> inline (último <link>) para vencer no cascade.
   ========================================================================== */

/* ============================================================
   MOBILE BASE — aplica em todas as larguras até 959.98px
   ============================================================ */
@media (max-width: 959.98px) {

  /* === HERO === */
  .hero{overflow:hidden}
  .hero-inner{padding:64px 0 32px !important}
  .hero h1{
    font-size:clamp(32px, 9vw, 56px) !important;
    line-height:1.02 !important;
    max-width:100% !important;
    margin-bottom:24px !important;
  }
  .hero-sub{
    font-size:16px !important;
    max-width:100% !important;
    margin-bottom:28px !important;
  }
  .hero-meta{
    flex-wrap:wrap !important;
    gap:10px 16px !important;
    margin-bottom:28px !important;
    font-size:11px !important;
  }
  .hero-meta .sep{display:none}
  .hero-actions{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    width:100%;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
    min-height:48px;
    padding:14px 22px;
  }
  .orbit{display:none !important}

  /* Hero stats — sai de absolute para inline embaixo do hero */
  .hero-stats{
    position:static !important;
    background:rgba(12,23,48,.5);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    margin-top:32px;
  }
  .hero-stats .row{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .hero-stats .cell{
    padding:18px 20px !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .hero-stats .cell:nth-child(2n){border-right:none !important}
  .hero-stats .cell:nth-last-child(-n+2){border-bottom:none}
  .hero-stats .k{font-size:22px !important}
  .hero-stats .l{font-size:10px !important}

  /* === SECTION HEAD (eyebrow + título + descrição) === */
  .section-head{
    grid-template-columns:1fr !important;
    gap:20px !important;
    margin-bottom:40px !important;
  }
  .section-head h2{font-size:clamp(28px, 7.5vw, 44px) !important; line-height:1.05 !important}

  /* === SERVICES — 1 coluna no mobile === */
  .service-grid{
    display:flex !important;
    flex-direction:column;
  }
  .service{
    grid-column:auto !important;
    border-right:none !important;
    border-bottom:1px solid var(--line) !important;
    padding:32px 20px !important;
  }
  .service:last-child{border-bottom:none !important}
  .service h3{font-size:19px !important}
  .service .num{font-size:10px !important; top:14px; right:18px}
  /* O 7º serviço (consultoria) — full-width interno também 1-coluna */
  .service[style*="grid-column:span 12"] > div,
  .service[style*="grid-column: span 12"] > div{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  .service[style*="grid-column:span 12"] h3,
  .service[style*="grid-column: span 12"] h3{font-size:22px !important}

  /* === CLIENTES (faixa de logos) — 2 colunas === */
  .clients{padding:48px 0 24px !important}
  .clients .label{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:20px !important}
  .logos{grid-template-columns:repeat(2, 1fr) !important}
  .logos .cell{
    padding:18px 12px !important;
    min-height:64px !important;
    font-size:10.5px !important;
    text-align:center;
  }

  /* === FESTIVAL BAND === */
  .festival{padding:72px 0 !important; margin-top:48px !important}
  .festival .inner{grid-template-columns:1fr !important; gap:40px !important}
  .festival h2{font-size:clamp(28px,7.5vw,44px) !important}
  .incident-card{font-size:11px !important; padding:18px !important}
  .incident-card .line{grid-template-columns:72px 1fr auto !important; gap:10px !important}

  /* === METODOLOGIA === */
  .method{padding:72px 0 !important}
  .method .steps{grid-template-columns:1fr !important; margin-top:36px !important}
  .method .step{
    border-right:none !important;
    border-bottom:1px solid var(--line);
    padding:24px 0 28px !important;
  }
  .method .step:last-child{border-bottom:none}
  .method .step .n{margin-bottom:24px !important}

  /* === DEPOIMENTOS === */
  .testimonials{padding:72px 0 !important}
  .t-grid{grid-template-columns:1fr !important; gap:16px !important; margin-top:32px !important}
  .t-card{padding:24px 22px !important}
  .t-card blockquote{font-size:15px !important}

  /* === CTA com formulário === */
  .cta{padding:72px 0 !important}
  .cta .inner{grid-template-columns:1fr !important; gap:40px !important}
  .cta h2{font-size:clamp(28px,7.5vw,44px) !important}
  .cta .form-card{padding:22px !important}

  /* === FOOTER === */
  footer{padding:48px 0 24px !important}
  footer .f-grid{
    grid-template-columns:1fr 1fr !important;
    gap:32px !important;
    padding-bottom:32px !important;
  }
  footer .f-grid .f-brand{grid-column:span 2 !important}
  footer .f-compliance{padding:20px 0 !important; font-size:11px !important}
  footer .f-compliance .row{flex-direction:column; gap:4px}
  footer .f-base{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin-top:20px !important;
  }
  footer .f-base .legal-links{flex-wrap:wrap; line-height:2}
  footer .f-base a{padding-block:8px; min-height:44px; display:inline-flex; align-items:center}

  /* === SERVICES section padding === */
  .services{padding:72px 0 24px !important}

  /* === Subnav (kubernetes) — já tem ajuste por sticky right === */
  .subnav{display:none !important}

  /* === Kubernetes specific === */
  .dor-grid{grid-template-columns:1fr !important}
  .dor{border-right:none !important; border-bottom:1px solid var(--line)}
  .dor:last-child{border-bottom:none}
  .mod-grid{grid-template-columns:1fr !important; gap:16px !important}
  .modelos{grid-template-columns:1fr !important; gap:16px !important}
  .plans-grid{grid-template-columns:1fr !important; gap:14px !important}
  .horas-grid{grid-template-columns:1fr !important; gap:40px !important}
  .case-inner{grid-template-columns:1fr !important; gap:40px !important}
  .case-side{position:static !important}
  .case-side .client{font-size:42px !important}
  .method-grid{grid-template-columns:1fr !important}
  .method-step{border-right:none !important; border-bottom:1px solid rgba(255,255,255,.1)}
  .method-step:last-child{border-bottom:none}
  details.q summary{font-size:15px !important; grid-template-columns:32px 1fr 28px !important; gap:12px !important; padding:0 20px 0 18px !important}
  details.q .a{margin:14px 18px 4px 62px !important; font-size:14.5px !important}
  /* Hero da página kubernetes */
  .hero .terminal{font-size:11px !important; padding:14px 16px !important}
  /* Bloco do código tabela */
  .tbl-wrap{overflow-x:auto}

  /* === Quem somos === */
  .origem{padding:72px 0 !important}
  .origem .row{grid-template-columns:1fr !important; gap:32px !important}
  .rir-card{grid-template-columns:1fr !important; gap:24px !important; padding:24px !important}
  .svc-grid{display:flex !important; flex-direction:column}
  .svc{grid-column:auto !important; border-right:none !important; border-bottom:1px solid var(--line)}
  .svc:last-child{border-bottom:none}
  .what{padding-bottom:72px !important}
  .work{padding:72px 0 !important}
  .work .inner{grid-template-columns:1fr !important; gap:32px !important}
  .work .pull{font-size:19px !important; padding-left:16px !important}
  .values{padding:72px 0 !important}
  .values .head{grid-template-columns:1fr !important; gap:20px !important; margin-bottom:32px !important}
  .v-grid{grid-template-columns:1fr !important}
  .v-card{border-right:none !important; border-bottom:1px solid var(--line)}
  .v-card:last-child{border-bottom:none !important}
  .why{padding:72px 0 !important}
  .why ul{grid-template-columns:1fr !important}
  .why li{padding:18px 0 !important; border-right:none !important; padding-right:0 !important; padding-left:0 !important}

  /* === Legal pages (privacidade, termos) === */
  .legal-hero{padding:64px 0 56px !important}
  .legal-hero h1{font-size:clamp(34px,8.5vw,52px) !important; margin-bottom:28px !important}
  .legal-meta{grid-template-columns:1fr 1fr !important; gap:18px !important; padding-top:24px !important}
  .legal-meta strong{font-size:14px !important}
  .legal-body{padding:48px 0 64px !important}
  .legal-grid{grid-template-columns:1fr !important; gap:32px !important}
  .toc{position:static !important; top:auto !important}
  .toc-inner{padding-left:18px}
  .sec h2{font-size:24px !important; line-height:1.15 !important}
  .content .intro{font-size:16px !important; padding:18px 20px !important; margin:0 0 48px}
  .tbl{font-size:13px}
  .tbl th, .tbl td{padding:10px 14px !important}
  .contact-card{grid-template-columns:1fr !important; gap:18px !important; padding:22px !important}

  /* === Cookie banner — mais aderente no mobile === */
  #cookie-banner{
    right:12px !important; left:12px !important; bottom:max(12px, env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:none !important;
  }
}

/* ============================================================
   Refinos extras para viewports muito estreitos (≤380px)
   ============================================================ */
@media (max-width: 380px) {
  .nav .brand img{height:38px !important}
  .hero h1{font-size:32px !important}
  .service h3{font-size:18px !important}
  .hero-stats .k{font-size:20px !important}
  .legal-meta{grid-template-columns:1fr !important}
}

/* ============================================================
   Reduced motion — refinos no nível das animações decorativas
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .orbit,.orbit .spin,.orbit .spin-2,.dot,.dot--red,.dot--orange{
    animation:none !important;
  }
}