/* ───────────────────────────────────────────────────────────────────────────
   Saulo Leony — camada responsiva, movimento e PWA

   POR QUE ESTE ARQUIVO EXISTE, e por que ele usa !important:
   a LP foi exportada de uma ferramenta de design com TODO o estilo em atributo
   `style="..."` inline, e sem NENHUMA media query — um layout fixo de 1440px.
   Estilo inline vence folha de estilo; a unica coisa que vence estilo inline e
   uma regra `!important`. Nao e desleixo: e a ferramenta certa para esta forma.

   O QUE ISSO CORRIGIA (medido no site no ar, iPhone 390px, 2026-09-05):
     - "Videos", "Galeria", "Orcamento" e "Enviar pedido" ficavam FORA da tela,
       recortados por um `overflow: hidden` — cortados sem deixar rolar, entao
       simplesmente nao existiam no celular. O botao de enviar o pedido de
       orcamento era um deles.
     - Os grids de duas colunas (`380px minmax(0,1fr)`) nao colapsavam: a coluna
       de texto virava 59px de largura e a biografia saia UMA PALAVRA POR LINHA.
     - A pagina tinha 17.565px de altura no celular — 21 telas de rolagem.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. Nunca recortar sem deixar rolar ──────────────────────────────────── */
/* A regra da casa: `overflow: hidden` no pai esconde conteudo no celular e
   ninguem descobre. Aqui ele existe para conter os efeitos de fundo, entao o
   que se corrige e o layout que estourava — nao se remove o hidden as cegas. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── 2. Grids: colapsar para uma coluna no celular ───────────────────────── */
@media (max-width: 900px) {
  /* Duas colunas assimetricas viram uma. O `:not` preserva o par 76px+1fr, que
     e uma coluna de icone estreita e continua fazendo sentido no celular. */
  [style*="grid-template-columns"]:not([style*="repeat("]):not([style*="76px"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* A grade 2x2 de "A EXPERIENCIA" vira uma coluna: sao paragrafos, nao cartoes
     curtos, e 190px de largura nao e medida de leitura. */
  [style*="repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* A lista do repertorio e column-count: 2 — no celular sao duas colunas de
     ~160px, estreitas demais para titulo de musica com artista embaixo. */
  [style*="column-count: 2"] { column-count: 1 !important; }
}
@media (max-width: 560px) {
  [style*="repeat(3"], [style*="repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 3. Flex nunca estoura: envolve ──────────────────────────────────────── */
@media (max-width: 900px) {
  /* !important porque este seletor mira o elemento PELO estilo inline dele:
     sem isso o inline vence e a regra nao roda. Medido: 16 dos 66 casados ja
     tinham flex-wrap inline (todos "wrap", entao sem dano), mas os outros 50
     dependem desta linha. */
  [style*="display: flex"]:not([style*="column"]) { flex-wrap: wrap !important; }
}

/* ── 4. Cabecalho ────────────────────────────────────────────────────────── */
/* No celular ficam a marca e o CTA. Os quatro links de secao saem: a pagina e
   uma rolagem unica e todas as secoes aparecem no caminho, entao o custo e
   baixo — e menor que o de um CTA que nao cabe na tela. */
@media (max-width: 900px) {
  header { padding: 16px 20px !important; gap: 12px !important; }
  header img { width: 54px !important; height: 54px !important; }
  header nav { gap: 0 !important; }
  header nav a:not([href="#orcamento"]) { display: none !important; }
  header nav a[href="#orcamento"] {
    padding: 12px 20px !important;
    min-height: 44px;              /* alvo de toque */
    display: inline-flex !important;
    align-items: center;
  }
}

/* ── 5. Tipografia que cabe ──────────────────────────────────────────────── */
/* clamp() no lugar do px fixo: o titulo de 62px ocupava mais que a largura do
   aparelho e era recortado no meio da palavra. Tracking negativo no grande,
   como manda a escala tipografica da casa. */
@media (max-width: 900px) {
  [style*="font-size: 62px"] { font-size: clamp(34px, 8.6vw, 62px) !important; letter-spacing: -0.01em !important; }
  [style*="font-size: 46px"] { font-size: clamp(28px, 7vw, 46px) !important; }
  [style*="font-size: 44px"] { font-size: clamp(27px, 6.8vw, 44px) !important; }
  [style*="font-size: 38px"] { font-size: clamp(25px, 6vw, 38px) !important; }
  [style*="font-size: 34px"] { font-size: clamp(23px, 5.4vw, 34px) !important; }
  [style*="font-size: 30px"] { font-size: clamp(22px, 5vw, 30px) !important; }
}

/* ── 6. Respiro lateral ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [style*="padding: 48px"], [style*=" 48px;"] { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 560px) {
  [style*="padding: 48px"], [style*=" 48px;"] { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── 7. Formulario: o piso de 16px do iOS ────────────────────────────────── */
/* Abaixo de 16px o iOS DA ZOOM ao focar o campo e o layout inteiro salta. Nao e
   preferencia de tamanho: e correcao de comportamento. Os campos estavam com
   14,5px. */
input, select, textarea {
  font-size: max(16px, 14.5px) !important;
}
button, [type="submit"] { min-height: 44px; }

/* ── 8. Toque nao tem hover ──────────────────────────────────────────────── */
/* Em aparelho de toque o navegador GRUDA o hover ate se tocar em outro lugar, e
   o elemento fica parecendo selecionado sem estar. */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: rgba(212,175,55,.18); }
}

/* ── 9. Foco visivel — nunca removido ────────────────────────────────────── */
/* ESTA REGRA NAO RODAVA, e a auditoria de 2026-09-07 mediu: os seis controles
   do formulario carregavam `outline: none` INLINE, e estilo inline vence folha
   sem `!important`. O `style-focus="border-color: #D4AF37; ..."` que deveria
   substitui-lo e atributo MORTO — `grep style-focus support.js` devolve zero:
   o runtime nao processa esse atributo, ele so existe no editor visual.

   Resultado medido em Chromium, tabulando de verdade: outline `none`,
   box-shadow zerado, e a borda no foco IDENTICA a do repouso nos seis campos.
   Quem navega por teclado atravessava "Nomes -> Data -> WhatsApp -> Local ->
   Formacao -> Mensagem" sem ver onde estava, e digitava a data no campo do
   WhatsApp. E WCAG 2.4.7.

   O `outline: none` inline foi removido do HTML no mesmo commit. O
   `!important` aqui e cinto e suspensorio: nesta pagina TUDO e estilo inline,
   e a proxima mao que mexer no formulario vai escrever inline de novo. */
:focus-visible {
  outline: 2px solid #D4AF37 !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* A borda tambem responde, porque o anel sozinho a 3px de distancia nao liga
   visualmente ao campo quando os campos estao encostados. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: #D4AF37 !important;
  outline-offset: 2px;
}

/* O placeholder era a UNICA indicacao do formato da data — e placeholder some
   ao primeiro toque. O formato passou para o rotulo, permanente; aqui fica so
   o contraste, que estava em 2,57:1. */
input::placeholder, textarea::placeholder { color: #7C766C; }

/* ── 10. Altura real da tela no celular ──────────────────────────────────── */
/* 100vh no iOS mede a tela SEM a barra do navegador, entao o rodape do heroi
   ficava fora. dvh acompanha a barra. */
@media (max-width: 900px) {
  [style*="min-height: 100vh"] { min-height: 100dvh !important; }
}

/* ── 11. Area segura do iPhone ───────────────────────────────────────────── */
body { padding-bottom: env(safe-area-inset-bottom); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. O HERÓI — textura, legibilidade e movimento

   Tres camadas, e a ordem importa. z-index 1 nas duas primeiras: acima da foto
   e dos dois veus, ABAIXO do texto (z-index 2) e do cabecalho (z-index 3).
   Grao sobre texto produz franja no antialiasing — a doutrina proibe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 15a. Escurecimento do topo — correcao MEDIDA, nao decoracao ──────────── */
/* Medido em 1440px, amostrando a parede real atras de cada link do cabecalho:
   os CINCO reprovam em contraste sobre a parte clara da foto.
     Formacoes 4,12:1 · Repertorio 4,00:1 · Videos 2,56:1 · Galeria 2,56:1
     Orcamento 2,41:1  <- e o CTA
   Exigido: 4,5:1. O veu que ja existia foi calibrado para o RODAPE do heroi
   (0,6 no topo caindo para 0,16 aos 20%), e aos 6% de altura — onde o menu
   mora — ele nao segura nada.
   Este scrim resolve as duas coisas de uma vez: devolve o contraste e da forma
   ao canto superior, que era a area chapada da imagem. */
section:first-of-type::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 34%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 10, 9, .88) 0%,
    rgba(11, 10, 9, .62) 26%,
    rgba(11, 10, 9, .28) 58%,
    rgba(11, 10, 9, 0) 100%);
}

/* ── 15b. Grao — o que tira a parede da condicao de "retangulo renderizado" ─ */
/* feTurbulence em data-URI: ~250 bytes, independente de resolucao, e a forma
   mais confiavel de fazer superficie chapada parecer material impresso.
   Valores da casa: fractalNoise (turbulence le como mapa de textura),
   baseFrequency 0.85, 4 oitavas, stitchTiles (sem ele aparece a grade), e
   saturate 0 — sem isso o ruido sai COLORIDO e cintila.
   soft-light e o blend seguro sobre fotografia; overlay tem mais contraste mas
   endurece a pele. 0,035 fica na faixa que le como material, nao como efeito. */
section:first-of-type::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;   /* FIXO: sem isto o SVG rasteriza no DPR do
                                     aparelho e o grao SOME na tela retina */
  opacity: .035;
  mix-blend-mode: soft-light;
}
@media (min-resolution: 2dppx) {
  section:first-of-type::after { opacity: .05; }
}

/* ── 15c. Movimento ───────────────────────────────────────────────────────── */
/* A doutrina da casa proibe fundo animado em tela cheia, e nomeia aurora,
   meteoro e gradiente giratorio como coisas que LEEM BARATO — viraram
   assinatura de pagina gerada por IA. Entao nada de movimento ambiente aqui.
   O que da vida sem isso sao duas coisas, e nenhuma e autonoma:

   1) a ENTRADA, que acontece uma vez e nao cansa;
   2) o PARALLAX, que o visitante dirige com o proprio dedo — quando ele para,
      o movimento para. E a categoria gestual, nao a ambiente. */

/* O PARALLAX SAIU DAQUI, e a remocao e deliberada.
   O handoff de motion (secao 5) poe KEN BURNS nesta foto e diz, com todas as
   letras: "Nao mexa na foto de fundo — ela tem o ken burns e os dois
   transforms conflitam". O parallax passou para o CONTEUDO do heroi
   (data-hero-content), que e onde o handoff o quer. Ver assets/motion.css?v=d12ce927. */

/* ── 15d. O scrim pesa diferente no celular ──────────────────────────────── */
/* Em 390px o unico item do cabecalho e o botao "Orcamento", que ja tem borda e
   fundo proprios — ele nao depende do scrim para ler. E o veu lateral que ja
   existia (90deg, 0.72 a esquerda) cobre quase toda a largura nessa viewport.
   Somado ao scrim de 34%, o Saulo desaparecia atras do texto: medido, a foto
   virava fundo preto com uma silhueta.
   Aqui o scrim serve so para assentar o logo e o botao — 22% e alfa menor. */
@media (max-width: 900px) {
  section:first-of-type::before {
    height: 22%;
    background: linear-gradient(180deg,
      rgba(11, 10, 9, .62) 0%,
      rgba(11, 10, 9, .34) 40%,
      rgba(11, 10, 9, 0) 100%);
  }
}

/* ── 16. O heroi no celular: variante RETRATO ────────────────────────────── */
/* Medido: em 390x844 a foto paisagem e escalada ate a altura casar exatamente
   (844/1013), entao NAO HA SOBRA VERTICAL e o object-position Y nao faz efeito
   nenhum — mover o X so tirava o Saulo do quadro. Nao era ajustavel por CSS: a
   composicao precisava ser outra.
   O recorte retrato (1100x2200, do original de 4976px) poe o rosto dele a 22%
   da altura, que e a UNICA faixa livre no celular — o texto ocupa de 30% para
   baixo.
   <picture> e nao duas <img> com display:none: o navegador baixa so a variante
   que casa a media query. Com duas <img>, ele baixaria as duas. */
@media (max-width: 900px) {
  img[src*="foto-saulo-lirios"] {
    /* 0.50 de aspecto contra 0.462 do iPhone 14: sobra horizontal, e o X
       centraliza. Contra 0.562 do iPhone SE: sobra vertical, e o 34% mantem o
       rosto acima do titulo em vez de centralizar no peito. */
    object-position: 50% 34% !important;
  }
}

/* ── 16b. Telas CURTAS (iPhone SE e afins, 667px de altura) ──────────────── */
/* Medido em 375x667: o bloco de texto comeca a 102px do topo, e o rosto do
   Saulo cai aos 167px — ele fica atras do titulo. E nao da para resolver com
   object-position: a sobra vertical ali e de apenas 83px, curso insuficiente.
   A faixa livre e que e pequena demais, porque o texto e ALTO: o titulo quebra
   em 4 linhas e a frase italica em outras 4.
   Entao a correcao e no texto, nao na foto — encolher o suficiente para abrir
   headroom, sem passar do piso de legibilidade. */
@media (max-width: 900px) and (max-height: 700px) {
  [style*="font-size: 62px"] { font-size: clamp(29px, 7.6vw, 44px) !important; }
  [style*="font-size: 46px"] { font-size: clamp(24px, 6.2vw, 38px) !important; }
  /* a frase italica de apoio */
  [style*="font-style: italic"][style*="font-size: 19px"],
  [style*="font-style: italic"][style*="font-size: 20px"] { font-size: 16.5px !important; }
  /* o respiro entre os blocos do heroi */
  section:first-of-type [style*="z-index: 2"] { padding-bottom: 48px !important; }
}

/* ── 17. O fundo de "Quem conduz" no celular ─────────────────────────────── */
/* A imagem foi composta para tela larga: ela ja traz um degrade preto a
   ESQUERDA, feito para o texto. Em 390px o `cover` recorta uma fatia do MEIO,
   perde esse degrade, e o texto passa a cair sobre a parte clara da foto.
   MEDIDO em 390px, amostrando o fundo real atras de cada paragrafo:
     paragrafo 1   8,27:1  passa
     paragrafo 2   3,54:1  REPROVA   <- exigido 4,5:1
     paragrafo 3   4,68:1  passa raspando
   Entao no celular o veu fica mais forte. Nao e gosto: e o que devolve a
   leitura. A imagem continua la, como atmosfera. */
@media (max-width: 900px) {
  .sl-fundo-conduz {
    background-image:
      linear-gradient(180deg, #0B0A09 0%, rgba(11, 10, 9, .82) 12%, rgba(11, 10, 9, .86) 50%, rgba(11, 10, 9, .88) 86%, #0B0A09 100%),
      url(fundo-quem-conduz.jpg) !important;
  }
}