/* ============================================================================
   AFIO — camada responsiva
   ----------------------------------------------------------------------------
   As páginas .dc.html trazem todo o estilo em atributos `style` inline. Por isso
   há dois jeitos de mirar um elemento aqui:

   1. Ganchos `data-m="…"` (preferido) — colocados no HTML do Painel. Explícitos,
      não quebram quando alguém mexe num valor de padding.
   2. Seletores por trecho do `style` — para as páginas que ainda não têm gancho.
      Cada um aparece em DUAS formas: como está no código-fonte e como o React
      re-serializa o atributo no DOM (espaço depois de `:` e de `,`, `0` -> `0px`,
      `.8` -> `0.8`). Se mirar só uma forma, a regra não pega.

   Ordem: base -> celular (<=900) -> celular estreito (<=560) -> telas médias e
   grandes -> preferências do sistema.
   ========================================================================= */

html { scrollbar-gutter: stable; }

/* Nada deve furar a largura da tela no celular. */
@media (max-width: 900px) {
  html { overflow-x: clip; }
  img, video, canvas, svg { max-width: 100%; }
}

/* ============================================================================
   CELULAR — até 900px
   ========================================================================= */
@media (max-width: 900px) {

  /* Hero inicial: só texto no celular; o indicador de rolagem fica de fora
     porque a dobra já mostra a próxima seção. */
  .afio-hero {
    min-height: 0 !important;
    padding-top: 116px !important;
    padding-bottom: 48px !important;
  }
  .afio-hero-copy { gap: 16px !important; }
  .afio-hero-scroll { display: none !important; }

  /* --- respiro das laterais --- */
  [style*="max-width:1240px"],
  [style*="max-width: 1240px"],
  [style*="max-width:1180px"],
  [style*="max-width: 1180px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* --- barra do topo: quebra em duas linhas em vez de estourar --- */
  nav [style*="height:60px"],
  [style*="height: 60px"],
  nav [style*="height:62px"],
  [style*="height: 62px"],
  nav [style*="height:66px"],
  [style*="height: 66px"] {
    height: auto !important;
    min-height: 54px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  nav a { font-size: 12px !important; }
  nav img { height: 16px !important; }
  /* alvo de toque: 44px é o mínimo confortável com o polegar */
  nav a, nav button { min-height: 44px; display: inline-flex; align-items: center; }
  /* o grupo de links fica sempre lado a lado: a logo ocupa a primeira
     linha e os links dividem a segunda inteira, sem botão caindo sozinho
     para uma terceira linha */
  nav [style*="height:60px"] > div,
  nav [style*="height: 60px"] > div,
  nav [style*="height:66px"] > div,
  nav [style*="height: 66px"] > div {
    flex-wrap: nowrap !important;
    width: 100%;
    justify-content: space-between;
    gap: 6px !important;
  }
  nav [style*="height:60px"] > div a,
  nav [style*="height: 60px"] > div a,
  nav [style*="height:66px"] > div a,
  nav [style*="height: 66px"] > div a {
    font-size: 11.5px !important;
    padding: 8px 8px !important;
    white-space: nowrap !important;
  }
  nav { max-width: 100vw; }

  /* --- duas colunas viram uma --- */
  [data-m="grade2"],
  [style*="minmax(0,1.05fr) minmax(0,.95fr)"],
  [style*="minmax(0px, 1.05fr) minmax(0px, 0.95fr)"],
  [style*="minmax(0,1.12fr) minmax(0,.88fr)"],
  [style*="minmax(0px, 1.12fr) minmax(0px, 0.88fr)"],
  [style*="minmax(0,1.15fr) minmax(0,.85fr)"],
  [style*="minmax(0px, 1.15fr) minmax(0px, 0.85fr)"],
  [style*="minmax(0,.85fr) minmax(0,1.15fr)"],
  [style*="minmax(0px, 0.85fr) minmax(0px, 1.15fr)"],
  [style*="minmax(0,1fr) minmax(0,520px)"],
  [style*="minmax(0px, 1fr) minmax(0px, 520px)"],
  [style*="minmax(0,.8fr) minmax(0,1.2fr)"],
  [style*="minmax(0px, 0.8fr) minmax(0px, 1.2fr)"],
  [style*="minmax(0,.7fr) minmax(0,1.3fr)"],
  [style*="minmax(0px, 0.7fr) minmax(0px, 1.3fr)"],
  [style*="minmax(0,.78fr) minmax(0,1.22fr)"],
  [style*="minmax(0px, 0.78fr) minmax(0px, 1.22fr)"],
  [style*="minmax(0,.72fr) minmax(0,1.28fr)"],
  [style*="minmax(0px, 0.72fr) minmax(0px, 1.28fr)"],
  [style*="minmax(0,1fr) minmax(0,.9fr)"],
  [style*="minmax(0px, 1fr) minmax(0px, 0.9fr)"],
  [style*="minmax(0,1fr) minmax(0,.8fr)"],
  [style*="minmax(0px, 1fr) minmax(0px, 0.8fr)"],
  [style*="minmax(0,1fr) minmax(0,1fr)"],
  [style*="minmax(0px, 1fr) minmax(0px, 1fr)"],
  [style*="repeat(2,minmax(0,1fr))"],
  [style*="repeat(2, minmax(0px, 1fr))"],
  [style*="repeat(3,minmax(0,1fr))"],
  [style*="repeat(3, minmax(0px, 1fr))"],
  [style*="minmax(0,1.5fr) repeat(3,minmax(0,.8fr))"],
  [style*="minmax(0px, 1.5fr) repeat(3, minmax(0px, 0.8fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* quatro e cinco colunas viram duas */
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,minmax(0,1fr))"],
  [style*="repeat(4, minmax(0px, 1fr))"],
  [style*="repeat(5,minmax(0,1fr))"],
  [style*="repeat(5, minmax(0px, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* --- gaps largos apertam --- */
  [style*="gap:64px"], [style*="gap: 64px"] { gap: 30px !important; }
  [style*="gap:48px"], [style*="gap: 48px"] { gap: 26px !important; }
  [style*="gap:44px"], [style*="gap: 44px"] { gap: 24px !important; }
  [style*="gap:36px"], [style*="gap: 36px"] { gap: 22px !important; }

  /* No celular NADA fica grudado na tela: as narrativas sticky do desktop
     viram seções normais que rolam com a página (regras completas na parte
     de narrativas, mais abaixo). */
  [style*="position:sticky"]:not(nav),
  [style*="position: sticky"]:not(nav) { position: static !important; top: auto !important; }

  /* seções esticadas só para dirigir a rolagem voltam à altura natural */
  [style*="height:230vh"], [style*="height: 230vh"],
  [style*="height:300vh"], [style*="height: 300vh"],
  [style*="height:320vh"], [style*="height: 320vh"] { height: auto !important; }
  [style*="min-height:300vh"], [style*="min-height: 300vh"] { min-height: 0 !important; }

  /* a arte lateral de login/registro vai para baixo do formulário */
  [style*="height:clamp(440px,72vh,600px)"],
  [style*="height: clamp(440px, 72vh, 600px)"],
  [style*="height:clamp(460px,78vh,700px)"],
  [style*="height: clamp(460px, 78vh, 700px)"] { order: 2 !important; height: 340px !important; }

  /* a tabela de comparação rola na horizontal em vez de encolher */
  #comparativo { overflow-x: auto !important; }
  #comparativo [style*="minmax(0,1.6fr) repeat(3,minmax(0,.8fr))"],
  [style*="minmax(0px, 1.6fr) repeat(3, minmax(0px, 0.8fr))"] { min-width: 520px !important; }

  /* --- títulos grandes cabem na tela --- */
  h1 { font-size: clamp(32px, 9vw, 44px) !important; letter-spacing: -.025em !important; }
  h2 { font-size: clamp(24px, 6.4vw, 34px) !important; }

  /* --- campos: 16px evita o zoom automático do iOS ao focar --- */
  input, select, textarea { font-size: 16px !important; }

  /* ------------------------------------------------------------------
     PAINEL — o que o dono do negócio usa no balcão, com o celular na mão
     ------------------------------------------------------------------ */

  /* topo do painel: perfil e links não competem por espaço */
  [data-m="nav"] { row-gap: 6px !important; }

  /* links soltos de uma linha só (faixa do teste, rodapé) medem ~12–18px de
     altura: dá para ler, mas não para acertar com o polegar */
  [data-m="faixa"] a,
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* As abas (Agenda e vendas / Aparência / Assinatura) somam mais de 360px.
     Viram uma faixa que rola na horizontal, com encaixe e sem barra à mostra —
     em vez de quebrar em três linhas ou espremer o texto. */
  [data-m="abas"] {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-m="abas"]::-webkit-scrollbar { display: none; }
  [data-m="abas"] > span {
    flex: none;
    scroll-snap-align: start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* seletor de modelo (Barbearia / Salão / Impacto / Essencial): mesma faixa rolável */
  [data-m="modelos"] {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-m="modelos"]::-webkit-scrollbar { display: none; }
  [data-m="modelos"] > span { flex: none; min-height: 40px; display: inline-flex; align-items: center; }

  /* paleta de cores: seis opções em uma coluna viram uma lista longa demais.
     Duas colunas mantêm tudo à vista sem rolar. (Vence a regra genérica de
     repeat(3,…) acima por vir depois, com a mesma especificidade + !important.) */
  [data-m="cores"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m="cores"] > span { min-height: 44px; }

  /* cartões de plano e do Gestão 360: um embaixo do outro, largura inteira */
  [data-m="planos"],
  [data-m="extras"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m="planos"] > div { min-height: 44px; }

  /* ------------------------------------------------------------------
     NARRATIVAS DE ROLAGEM — no celular viram seções normais
     ------------------------------------------------------------------
     No desktop, as cenas ("Como é hoje", o site do Yuri se montando, o
     painel do Gestão 360) são palcos sticky de 100vh que o JS dirige
     conforme a página rola. No celular isso pesava: tela presa, três
     telas de rolagem por seção e conteúdo que nascia invisível. Aqui os
     palcos viram blocos comuns e TUDO nasce visível — as regras com
     !important vencem os estilos inline que o JS continua escrevendo. */

  /* os palcos de 100vh ficam com a altura do próprio conteúdo */
  [style*="height:100vh"][style*="overflow:hidden"],
  [style*="height: 100vh"][style*="overflow: hidden"],
  [style*="height:100vh"][style*="display:grid"],
  [style*="height: 100vh"][style*="display: grid"] {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    align-content: start !important;
    padding-top: 40px !important;
    padding-bottom: 34px !important;
    row-gap: 18px !important;
  }

  /* tudo o que o JS revelaria aos poucos já aparece pronto */
  [data-msg], [data-step], [data-block],
  [style*="will-change:opacity,transform"], [style*="will-change: opacity, transform"],
  [style*="will-change:transform,opacity"], [style*="will-change: transform, opacity"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }
  [style*="translate3d(0,48px,0)"], [style*="translate3d(0, 48px, 0)"],
  [style*="translate3d(0,18px,0)"], [style*="translate3d(0, 18px, 0)"] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-desc] {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 6px !important;
    transition: none !important;
  }
  [data-num] { color: #F08A4B !important; }

  /* a janela do mini-site vira um quadro parado: mais leve e nada some */
  [data-preview], [data-view] { max-width: 100% !important; }
  [data-view] { height: min(46vh, 400px) !important; min-height: 0 !important; }
  [data-view] > div { transform: none !important; }

  /* o teatro do cursor (seta, anel de clique, aviso "confirmado") e os
     brilhos varrendo a tela são decoração cara — fora do celular */
  [data-view] [style*="pointer-events:none"],
  [data-view] [style*="pointer-events: none"] { display: none !important; }

  /* a barra fixa do desktop quebra em três linhas no celular e cobre um
     terço da tela — aqui ela rola junto com a página, sólida e compacta */
  nav[style*="position:fixed"], nav[style*="position: fixed"] {
    position: static !important;
    background: #0B0B0C !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: rgba(245, 240, 232, .08) !important;
  }
  nav a { min-height: 40px !important; }
  nav [style*="padding:9px 16px"], nav [style*="padding: 9px 16px"],
  nav [style*="padding:9px 18px"], nav [style*="padding: 9px 18px"] { padding: 8px 12px !important; }

  /* as barras de app (Painel/Personalizar) continuam grudadas — são uma
     linha só — mas opacas: sem blur, o fundo .9 deixava o conteúdo vazar */
  nav[style*="position:sticky"], nav[style*="position: sticky"] {
    background: #0B0B0C !important;
  }

  /* animações decorativas de fundo não pagam o que custam no celular */
  [style*="animation:afioSweep"], [style*="animation: afioSweep"],
  [style*="animation:afioHalo"], [style*="animation: afioHalo"],
  [style*="animation:afioGlow"], [style*="animation: afioGlow"] { animation: none !important; }
  [style*="backdrop-filter:blur"], [style*="backdrop-filter: blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  [style*="will-change"] { will-change: auto !important; }

  /* a dica "role para ver" flutuando sobre a prévia vira ruído na tela
     pequena — o toque já rola naturalmente */
  [data-dica-rolar] { display: none !important; }

  /* sem barra fixa, o herói não precisa dos 96px que a compensavam */
  [style*="padding:96px 0 40px"], [style*="padding: 96px 0px 40px"] { padding-top: 40px !important; min-height: 0 !important; }

  /* a ponte "⌁" entre seções pedia 76px de respiro — no celular vira um vão */
  [style*="padding:76px 0 48px"], [style*="padding: 76px 0px 48px"] { padding: 34px 0 22px !important; }

  /* balões da conversa: largura toda, recheio menor */
  [data-msg] { max-width: 100% !important; padding: 9px 11px !important; font-size: 13px !important; }

  /* títulos das cenas ("Sua agenda mora no WhatsApp.") têm 46px fixos */
  [style*="font:300 46px"], [style*="font: 300 46px"] { font-size: clamp(22px, 6vw, 28px) !important; }
  [style*="font:300 38px"], [style*="font: 300 38px"] { font-size: clamp(20px, 5.4vw, 25px) !important; }

  /* o vão de 72px entre as colunas do palco do chat */
  [style*="gap:72px"], [style*="gap: 72px"] { gap: 18px !important; }
}

/* ============================================================================
   CELULAR ESTREITO — até 560px
   ========================================================================= */
@media (max-width: 560px) {
  [style*="max-width:1240px"], [style*="max-width: 1240px"],
  [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 14px !important; padding-right: 14px !important; }

  [style*="padding:38px 36px"], [style*="padding: 38px 36px"] { padding: 22px 18px !important; }
  [style*="padding:38px 34px"], [style*="padding: 38px 34px"] { padding: 24px 18px !important; }
  [style*="padding:30px 28px"], [style*="padding: 30px 28px"] { padding: 20px 16px !important; }
  [style*="padding:26px 24px"], [style*="padding: 26px 24px"] { padding: 18px 16px !important; }

  [style*="repeat(2,minmax(0,1fr))"],
  [style*="repeat(2, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* a paleta continua em duas colunas: a cor é reconhecida pela bolinha, não
     pelo texto, então o aperto não atrapalha */
  [data-m="cores"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }

  /* logo + banner das fotos do site: um embaixo do outro */
  [data-m="grade2"] [style*="height:78px"],
  [data-m="grade2"] [style*="height: 78px"] { height: 92px !important; }

  /* o painel do Gestão 360 mostra números grandes; a 360px eles vazam */
  [style*="font:300 34px"], [style*="font: 300 34px"] { font-size: 28px !important; }
  [style*="font:300 32px"], [style*="font: 300 32px"] { font-size: 26px !important; }
}

/* ============================================================================
   PC — fluidez em qualquer janela, sem perder a imersão
   ========================================================================= */

/* telas médias (notebook de 13", janela dividida) */
@media (min-width: 901px) and (max-width: 1180px) {
  [style*="max-width:1240px"], [style*="max-width: 1240px"],
  [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="gap:64px"], [style*="gap: 64px"] { gap: 40px !important; }
  [style*="gap:48px"], [style*="gap: 48px"] { gap: 32px !important; }
  [style*="gap:44px"], [style*="gap: 44px"] { gap: 30px !important; }
  [style*="gap:36px"], [style*="gap: 36px"] { gap: 26px !important; }
  [style*="padding:38px 36px"], [style*="padding: 38px 36px"] { padding: 30px 26px !important; }
}

/* janelas baixas: a prévia encolhe em vez de sair da tela */
@media (min-width: 901px) and (max-height: 820px) {
  [data-preview] { height: clamp(330px, calc(100vh - 260px), 560px) !important; }
  [data-view] { height: min(66vh, 560px) !important; }
}

/* monitores grandes: mais respiro, mesma composição */
@media (min-width: 1600px) {
  [style*="max-width:1180px"], [style*="max-width: 1180px"] { max-width: 1280px !important; }
  [style*="max-width:1240px"], [style*="max-width: 1240px"] { max-width: 1340px !important; }
}

/* telas de alta densidade: nada de imagem borrada */
@media (min-resolution: 2dppx) {
  img { image-rendering: auto; }
}

/* telas muito estreitas: aperta os botões da nav para os três itens
   continuarem lado a lado sem estourar a largura */
@media (max-width: 374px) {
  nav [style*="height:60px"] > div a,
  nav [style*="height: 60px"] > div a,
  nav [style*="height:66px"] > div a,
  nav [style*="height: 66px"] > div a {
    font-size: 10.5px !important;
    padding: 8px 4px !important;
    letter-spacing: -.01em;
  }
}

/* ============================================================================
   REVEAL AO ROLAR — celular
   ----------------------------------------------------------------------------
   O afio-loader.js marca com data-anima os blocos que nascem abaixo da dobra
   (só em páginas de marketing) e adiciona html.afio-anima. A especificidade
   html.afio-anima [data-anima] vence de propósito as regras acima que forçam
   tudo visível — e o estado .afio-entrou vence o estado base.
   ========================================================================= */
@media (max-width: 900px) {
  html.afio-anima [data-anima] {
    opacity: 0 !important;
    transform: translate3d(0, 26px, 0) !important;
    transition: opacity .6s ease, transform .7s cubic-bezier(.22, .9, .3, 1) !important;
  }
  html.afio-anima [data-anima].afio-entrou {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================================
   PREFERÊNCIAS DO SISTEMA
   ========================================================================= */

/* quem pede menos movimento, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto !important; }
}