/* ============================================================================
  MOBILE NATIVO v2 — Estúdio Jeff Britto
  Só @media ≤899px. Desktop intacto.
  Padrão: tela cheia no hero, feed editorial na galeria,
  listas densas (IA/Sobre), tipografia legível a 30cm.
============================================================================ */

@media (max-width: 899px) {
  :root {
    --gutter: 22px !important;
    --maxw: 100% !important;
    --t-hero: clamp(1.85rem, 7.2vw, 2.35rem) !important;
    --t-sec: 1.35rem !important;
    --t-lead: .9rem !important;
    --t-body: .875rem !important;
    --t-label: .5rem !important;
    --raw-safe: 64px; /* espaço pro botão RAW não tapar conteúdo */
  }

  .wrap { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; box-sizing: border-box !important; }

  .sec { padding: 40px 0 !important; }
  .sec-head { max-width: 100% !important; margin-bottom: 20px !important; }
  .sec-title { font-size: var(--t-sec) !important; line-height: 1.15 !important; }
  .sec-lead { font-size: var(--t-lead) !important; line-height: 1.5 !important; max-width: 100% !important; }
  .label { font-size: .5rem !important; letter-spacing: .18em !important; margin-bottom: 10px !important; }
  .hl { width: 20px !important; }
  .sec-ghost { font-size: clamp(4rem, 22vw, 7rem) !important; opacity: .04 !important; }

  /* ═══════════════ HERO — tela cheia, texto legível ═══════════════ */
  #home {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    box-sizing: border-box !important;
  }
  #gl, #cover { inset: 0 !important; width: 100% !important; height: 100% !important; }
  /* Véu forte: garante contraste mesmo sobre céu/lata claros */
  .veil {
    background:
      linear-gradient(to top,
        #141110 0%,
        rgba(20,17,16,.92) 22%,
        rgba(20,17,16,.55) 48%,
        rgba(20,17,16,.2) 68%,
        transparent 82%) !important;
  }
  /* NÃO zerar laterais — .hero{padding:0} colava o texto na beira */
  .hero,
  .hero.wrap {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    padding-bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + var(--raw-safe))) !important;
  }
  .eyebrow { margin-bottom: 14px !important; gap: 10px !important; padding-right: 8px !important; }
  .eyebrow-t { font-size: .48rem !important; letter-spacing: .12em !important; }
  .title {
    font-size: var(--t-hero) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
    max-width: 16ch !important;
    text-shadow:
      0 1px 1px rgba(0,0,0,.5),
      0 8px 32px rgba(0,0,0,.65) !important;
  }
  .title .line { display: block !important; }
  .sub {
    max-width: 34ch !important;
    margin-bottom: 22px !important;
    margin-top: 0 !important;
    padding-right: 4px !important;
  }
  .sub-i {
    font-size: .88rem !important;
    line-height: 1.45 !important;
    color: rgba(240,235,226,.88) !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.55) !important;
  }
  .ctas {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .ctas .btn {
    width: 100% !important;
    flex: none !important;
    justify-content: center !important;
    min-height: 50px !important;
    font-size: .6rem !important;
    letter-spacing: .14em !important;
  }
  .scroll-cue { display: none !important; }
  .hero-slide-idx { display: none !important; }

  /* ═══════════════ PORTFOLIO — trilho horizontal (peek da próxima) ═══════════════ */
  #work { padding-top: 36px !important; padding-bottom: 20px !important; }
  #work .sec-head { margin-bottom: 14px !important; }
  #work .sec-title { font-size: 1.4rem !important; }
  .work-cats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .work-cats::-webkit-scrollbar { display: none; }
  .work-cat {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: .55rem !important;
    border-radius: 999px !important;
  }
  /* full-bleed pra o peek da próxima card na beira direita */
  .work-track {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .work-rail {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    padding-left: var(--gutter) !important;
    /* sem padding-right: o último card respira via padding do grid */
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .work-rail::-webkit-scrollbar { display: none !important; }
  .work-grid,
  .work-grid.work-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: max-content !important;
    padding: 0 !important;
    padding-right: var(--gutter) !important;
  }
  /* ~78vw: mostra ~22% da próxima → dá pra ver que tem mais */
  .work-grid .work-item,
  .work-grid .work-item.wide,
  .work-grid .work-item.tall {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    max-width: 320px !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 14px !important;
    scroll-snap-align: start !important;
  }
  /* Sem hover no touch — cores e meta ativas (desktop continua cinza até hover) */
  .work-item .wi-img,
  .work-item.is-active .wi-img {
    filter: grayscale(0) brightness(.9) contrast(1.06) !important;
    transform: scale(1.04) !important;
  }
  .work-item .wi-meta {
    opacity: 1 !important;
  }
  .wi-meta {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
  .wi-cat {
    font-size: .55rem !important;
    letter-spacing: .14em !important;
    margin-bottom: 4px !important;
  }
  .wi-name {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    font-family: var(--display) !important;
  }
  .wi-line { display: none !important; }
  .wi-index {
    top: 14px !important;
    left: 14px !important;
    font-size: 1.15rem !important;
    opacity: .85 !important;
  }
  .wi-raw { display: none !important; }
  .wi-top-btns { top: 12px !important; right: 12px !important; }
  .wi-compare {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 7px !important;
    opacity: .9 !important;
  }
  .work-constellation { display: none !important; }
  #work-gl { display: none !important; }
  /* dica + barra — iguais ao desktop, visíveis no cel */
  .work-hint {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding-inline: var(--gutter) !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0 !important; /* troca o copy só no cel */
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink-faint) !important;
  }
  .work-hint::before {
    content: 'Role pra ver mais' !important;
    font-size: .5rem !important;
    letter-spacing: .16em !important;
  }
  .work-hint::after {
    content: '→' !important;
    font-size: .5rem !important;
    color: var(--gold) !important;
  }
  .work-progress {
    display: block !important;
    position: relative !important;
    height: 1px !important;
    margin-top: 14px !important;
    padding-inline: var(--gutter) !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.07) !important;
    overflow: hidden !important;
  }

  /* ═══════════════ LABS / IA — lista limpa tipo Settings ═══════════════ */
  .sec-labs {
    min-height: 0 !important;
    padding: 36px 0 28px !important;
    align-items: stretch !important;
  }
  .sec-labs::after {
    background: linear-gradient(to bottom, rgba(20,17,16,.75), rgba(20,17,16,.92)) !important;
  }
  .labs-field, .labs-aura, .lab-reveal { display: none !important; }
  .sec-labs .sec-head { margin-bottom: 12px !important; }
  .lab-thesis {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    margin-top: 8px !important;
    max-width: 18ch !important;
  }
  .lab-lead {
    font-size: .85rem !important;
    line-height: 1.45 !important;
    margin-top: 10px !important;
    color: var(--ink-dim) !important;
  }
  .lab-index {
    margin-top: 18px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  .lab-row {
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    column-gap: 10px !important;
    padding: 14px 0 !important;
    align-items: start !important;
  }
  .lab-row:hover,
  .lab-row.is-active { padding-left: 0 !important; }
  .lab-row-n {
    font-size: .55rem !important;
    padding-top: 5px !important;
    color: var(--gold) !important;
  }
  .lab-row-title {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    color: var(--ink) !important;
  }
  .lab-row-tools {
    grid-column: 2 !important;
    margin-top: 4px !important;
    font-size: .48rem !important;
    letter-spacing: .1em !important;
    white-space: normal !important;
    opacity: .65 !important;
  }
  .lab-row-desc {
    grid-column: 2 !important;
    font-size: .8rem !important;
    line-height: 1.4 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  .lab-row.is-active .lab-row-desc {
    max-height: 7em !important;
    opacity: 1 !important;
    margin-top: 8px !important;
  }
  .lab-row:hover .lab-row-desc {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
  }
  .lab-row.is-active:hover .lab-row-desc {
    max-height: 7em !important;
    opacity: 1 !important;
    margin-top: 8px !important;
  }
  .lab-meta {
    display: none !important; /* métricas ocupam espaço demais no phone */
  }

  /* ═══════════════ BRANDING — matriz 2×2 com respiro ═══════════════ */
  #branding { padding-top: 32px !important; padding-bottom: 48px !important; }
  #branding .wrap { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  #branding .brc { gap: 14px !important; margin: 14px 0 20px !important; }
  #branding .brc-media {
    aspect-ratio: 16 / 10 !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  }
  #branding .brc-frame { inset: 8px !important; }
  #branding .brc .br-card-name { font-size: 1.4rem !important; }
  #branding .brc .br-card-meta {
    font-size: .82rem !important;
    line-height: 1.45 !important;
    margin-top: 8px !important;
    max-width: 36ch !important;
  }
  #branding .brc-tags { margin: 12px 0 14px !important; gap: 6px !important; }
  #branding .brc-cta { margin-top: 4px !important; }
  #branding .br-creds {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
  }
  #branding .br-cred b { font-size: 1rem !important; margin-bottom: 3px !important; }
  #branding .br-cred span { font-size: .75rem !important; line-height: 1.4 !important; }
  #branding .br-matrix {
    margin-top: 22px !important;
    padding-top: 18px !important;
  }
  #branding .br-matrix-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
  }
  #branding .br-matrix-lbl {
    font-size: .52rem !important;
    letter-spacing: .16em !important;
    color: var(--gold) !important;
  }
  #branding .br-matrix-note {
    font-size: .8rem !important;
    line-height: 1.4 !important;
    max-width: 28ch !important;
  }
  /* 2 colunas com diagramação — nunca 1 col colada na beira */
  #branding .br-matrix-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }
  #branding .br-pillar {
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding: 14px 12px 14px 0 !important;
  }
  #branding .br-pillar:nth-child(odd) {
    padding-right: 14px !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
  }
  #branding .br-pillar:nth-child(even) {
    padding-left: 14px !important;
  }
  #branding .br-pillar:nth-child(-n+2) {
    border-top: 1px solid rgba(201,162,75,.18) !important;
    padding-top: 14px !important;
  }
  #branding .br-pillar-h,
  #branding .br-matrix-grid h4 {
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
    color: var(--gold-hi) !important;
  }
  #branding .br-pillar ul { gap: 6px !important; }
  #branding .br-pillar li,
  #branding .br-matrix-grid li,
  #branding .br-matrix-grid p {
    font-size: .72rem !important;
    line-height: 1.35 !important;
  }
  #branding .br-invite {
    margin-top: 20px !important;
    padding-top: 16px !important;
    padding-bottom: var(--raw-safe) !important;
  }
  #branding .br-invite-txt { font-size: .85rem !important; line-height: 1.45 !important; }

  /* ═══════════════ SOBRE — foto limpa + stats 1 linha ═══════════════ */
  #about { padding: 36px 0 48px !important; }
  .about-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }
  .about-visual {
    max-width: 168px !important;
    width: 42% !important;
    margin: 0 auto 0 0 !important;
    order: 0 !important;
    overflow: visible !important;
  }
  .about-photo {
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .about-frame { inset: 6px -6px -6px 6px !important; }
  .about-corners { inset: -6px !important; }
  .about-quote-mark { display: none !important; }
  .about-mark { width: 20px !important; height: 20px !important; top: -10px !important; left: -4px !important; }
  /* meta de craft sob a foto = bagunça no cel — some */
  .about-meta { display: none !important; }
  .about-badge {
    padding: 5px 7px !important;
    bottom: 8px !important;
    right: 6px !important;
  }
  .about-badge b { font-size: .9rem !important; }
  .about-badge span { font-size: 5.5px !important; }
  .about-text {
    order: 1 !important;
    padding-right: 0 !important;
    display: block !important;
    max-width: 100% !important;
  }
  .about-title-var,
  .about-text .sec-title {
    font-size: 1.35rem !important;
    margin-bottom: 12px !important;
    max-width: 14ch !important;
  }
  .about-clients { margin: 10px 0 !important; }
  .clients-row { gap: 6px 10px !important; }
  .client-logo { font-size: 8px !important; letter-spacing: .06em !important; }
  .about-tools {
    font-size: 8px !important;
    line-height: 1.5 !important;
    margin: 6px 0 14px !important;
    letter-spacing: .06em !important;
  }
  .about-quote {
    font-size: .95rem !important;
    line-height: 1.4 !important;
    margin: 8px 0 14px !important;
    max-width: 32ch !important;
  }
  .about-bio {
    font-size: .86rem !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
    max-width: 38ch !important;
  }
  /* 100+ · 35+ · 12+ · SP — uma linha só, pequeno */
  .about-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--line) !important;
    order: 2 !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .about-stats::-webkit-scrollbar { display: none; }
  .about-stats .stat-dot {
    display: inline !important;
    margin: 0 8px !important;
    opacity: .35 !important;
    color: var(--gold) !important;
    font-size: .7rem !important;
  }
  .stat-item {
    display: inline-flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .stat-item b {
    display: inline !important;
    font-size: .92rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* ═══════════════ ORÇAMENTO — opções densas (não cards gigantes) ═══════════════ */
  .orc-options,
  .orc-opts-3 {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .orc-opt {
    padding: 12px 14px !important;
    min-height: 0 !important;
    border-radius: 10px !important;
  }
  .orc-opt-hd { font-size: .92rem !important; }
  .orc-opt-sub { font-size: .68rem !important; line-height: 1.3 !important; }
  .orc-step-q { font-size: .95rem !important; margin-bottom: 12px !important; }
  .orc-progress-steps {
    gap: 4px !important;
    margin-bottom: 14px !important;
    justify-content: stretch !important;
  }
  .orc-ps {
    flex: 1 !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    min-height: 40px !important;
  }
  .orc-ps .orc-ps-label { font-size: 7px !important; }
  .orc-ps .orc-ps-num { width: 16px !important; height: 16px !important; font-size: 7px !important; }

  /* ═══════════════ MANIFESTO — 1 linha + scroll ═══════════════ */
  .manifesto { padding: 32px 0 !important; }
  .manifesto-track span {
    font-size: clamp(1.75rem, 10vw, 2.75rem) !important;
    white-space: nowrap !important;
  }

  /* ═══════════════ CONTATO / FOOTER — espaço pro RAW ═══════════════ */
  .contact-grid { gap: 28px !important; }
  .contact-lead { font-size: .85rem !important; line-height: 1.45 !important; }
  .ci-row { padding: 10px 0 !important; }
  .cf input, .cf select, .cf textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  .contact-form .btn { width: 100% !important; min-height: 50px !important; }
  #contact {
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
  }
  .orc-sec { padding-bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + var(--raw-safe))) !important; }
  .footer {
    padding: 20px 0 max(96px, calc(env(safe-area-inset-bottom, 0px) + 80px)) !important;
  }
  .footer .wrap,
  .footer-in {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box !important;
  }
  .footer-in {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
  }
  .footer-nav {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    max-width: 100% !important;
  }
  .footer-nav a {
    font-size: .52rem !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .footer-cp {
    flex: 0 0 auto !important;
    text-align: left !important;
    margin-top: 4px !important;
    padding-right: 120px !important; /* não fica sob o RAW */
  }

  /* ═══════════════ RAW — flutuante sem tapar rodapé ═══════════════ */
  #raw-toggle {
    bottom: max(18px, env(safe-area-inset-bottom, 12px)) !important;
    right: max(14px, env(safe-area-inset-right, 14px)) !important;
    padding: 8px 12px !important;
    min-height: 38px !important;
    font-size: 9px !important;
    z-index: 100020 !important;
  }

  /* Nav */
  #nav .nav-inner { height: 56px !important; min-height: 56px !important; }
  .brand-name { font-size: 1.05rem !important; }

  /* Serviços accordion — barras compactas */
  #servicos .svc-acc { gap: 5px !important; margin-top: 14px !important; }
  #servicos .svc-panel,
  #servicos .svc-panel:hover {
    height: 48px !important;
    overflow: hidden !important;
  }
  #servicos .svc-panel.is-open,
  #servicos .svc-panel.is-open:hover {
    height: auto !important;
    overflow: visible !important;
  }
  #servicos .svc-panel-bar { height: 48px !important; padding: 0 12px !important; }
  #servicos .svc-panel-name { font-size: 1rem !important; }
  #servicos .svc-panel-body,
  #servicos .svc-panel:hover .svc-panel-body {
    display: none !important;
    position: static !important;
    height: auto !important;
    opacity: 1 !important;
    grid-template-columns: 1fr !important;
    padding: 0 12px 12px !important;
  }
  #servicos .svc-panel.is-open .svc-panel-body { display: grid !important; }
  #servicos .svc-panel-media {
    aspect-ratio: 16 / 9 !important;
    max-height: 120px !important;
  }
}

/* Phones estreitos — NÃO voltar stats pra 2×2 nem matriz 1 col */
@media (max-width: 600px) {
  :root {
    --gutter: 20px !important;
    --t-hero: clamp(1.7rem, 7.5vw, 2.05rem) !important;
    --t-sec: 1.22rem !important;
  }
  .lab-thesis { font-size: 1.22rem !important; }
  .lab-row-title { font-size: .98rem !important; }
  #branding .br-matrix-grid { grid-template-columns: 1fr 1fr !important; }
  .about-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
  }
  .stat-item b { font-size: .85rem !important; }
  .stat-item { font-size: 6.5px !important; }
  .about-stats .stat-dot { margin: 0 6px !important; }
  .work-grid .work-item,
  .work-grid .work-item.wide,
  .work-grid .work-item.tall {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    max-width: 300px !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 12px !important;
  }
  .work-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    width: max-content !important;
  }
}