/* koko.css: refinos da Koko por cima da base da Livia (lp.css + kv.css).
   Fica em arquivo proprio de proposito: lp.css, kv.css e lp.js sao copia
   byte a byte do repo dela, e a proxima sincronizacao substitui os tres sem
   perder nada daqui. Cada bloco abaixo diz o que muda e por que. */

/* Padding das secoes sai do clamp solto e usa a escala. --sp-11 e
   clamp(4rem,3rem+4vw,6rem): 96px em 1440 e 64px em 375, contra 115.2/80
   do valor da base. Reduz todas as fronteiras igualmente, entao o ritmo
   entre secoes continua uniforme. */
.section{padding-block:var(--sp-11)}

/* Secao de contato: a coluna de texto alinha pelo topo do card do form.
   Com align-items:center a coluna (512px em 1440) ficava centralizada na
   track do card (659px) e comecava 73px abaixo dele. `start` alinha as
   duas pelo topo e e pre-condicao do sticky abaixo. */
.final__grid{align-items:start}

/* A coluna de texto acompanha a rolagem enquanto o card do form rola ao
   lado. Medido em 1440 na base nova: 512px de coluna contra 659px de card,
   147px de percurso. `top` = altura real da nav fixa (--nav-h) + um degrau
   da escala, nunca numero chutado. Sticky respeita o grid e para sozinho no
   fim da secao (o overflow:clip de .final nao cria scroll container).
   So acima de 940px, onde .final__grid tem duas colunas; e so sem
   prefers-reduced-motion. Seleciona o primeiro filho do grid para nao
   depender de classe no HTML dela. */
@media(min-width:941px) and (prefers-reduced-motion:no-preference){
  .final__grid > :first-child{position:sticky;top:calc(var(--nav-h) + var(--sp-7))}
}

/* Botao "Pausar animacao" do hero escondido a pedido da PM (17/09/2026).
   O markup e do repo da Livia (index.html, .hero__motion, desde 4153e39) e
   fica la; esconder aqui sobrevive ao proximo sync. O JS dela tem guarda
   (if (motionButton)) e a animacao do hero nao depende do botao. */
.hero__motion{display:none}

/* O "x" sobrescrito do "11x" sumia no Safari: .grad-text pinta o gradiente
   recortado no texto (background-clip:text) e o WebKit nao pinta isso em
   descendente posicionado; o sup da Livia (lp.css:555) usa
   position:relative;top:-1.1em. transform tambem apaga (cria camada, nos
   dois motores). Sobe o sup por alinhamento de flex + margem, sem posicionar.
   Calibrado para cair no MESMO pixel de hoje no Chrome: 14px em 1440,
   10.6px em 768 e 375 (maior desvio medido: 0.5px em 1200 e 1700). */
.proof__num sup{position:static;top:auto;align-self:flex-start;margin-top:calc(.672em - 3.1px)}

/* Hero desktop (>900px): a cabeca da modelo saia de baixo da nav fixa.
   Antes a caixa da foto (.mural__main) comecava em y=0 e a nav (--nav-h)
   cobria o topo da imagem: cabeca 4px (1440x900) a 7px (1440x715) atras da
   nav, medido no DOM. Especificacao fechada pela Gabs em 17/09/2026:
   a caixa comeca no fim da nav e vai ate o fim da secao (top:--nav-h,
   bottom:0, height:auto); a imagem preenche a caixa com cover ancorado no
   topo, entao o que sobra corta EMBAIXO (calca branca), nunca a cabeca.
   Nao muda a altura da secao (a caixa e absoluta, fora do fluxo). So acima
   de 900px, mesmo corte do kv.css dela; o mobile (foto em cima, texto
   embaixo) fica intocado. Mesma especificidade das regras dela em lp.css
   (.mural__main / .mural__main img); este arquivo carrega depois e vence.
   A animacao de camera ja e none!important no lp.css dela (revisao final). */
@media(min-width:901px){
  .mural__main{top:var(--nav-h);bottom:0;height:auto;margin:0;padding:0;transform:none}
  .mural__main img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:none}
}

/* "Beleza Brasileira" do hero transparente no Safari (PM, Mac 1440x715
   DPR 2, 18/09/2026; no Chrome aparece). O em.grad-text da Livia e inline,
   pinta o degrade recortado no texto (background-clip:text) e anima
   background-position; o h1 pai entra com transform+opacity da transicao
   [data-reveal]. No WebKit o recorte em elemento INLINE dentro de camada
   composta e o caso conhecido de texto sumir. Padrao robusto: o span vira
   inline-block (caixa propria para o recorte), com o degrade dela, os dois
   prefixos, fill transparente e cor solida de reserva (o azul do proprio
   degrade); sem text-shadow e sem filter. background-image, NAO o atalho
   background: o atalho zeraria o background-size:220% dela e mataria a
   animacao hero-type-light (a luz que corre no texto) e mudaria as cores.
   Efeito colateral medido: no WebKit o h1 (text-wrap:balance) passa a
   quebrar como no Chrome ("para uma / Beleza Brasileira"); no Chrome, 0 px
   de diferenca.
   Nao reproduzido no WebKit Linux do Playwright (compositor diferente do
   Safari macOS); validado que nada regride em Chromium e WebKit. */
.hero .display--hero .grad-text{display:inline-block;background-image:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#176184;text-shadow:none;filter:none}

/* Numeros "11 / +30 / No1" cortados no topo (PM, Safari, 1440x715).
   Causa: .proof__num tem line-height .94, entao a area do texto comeca 7px
   ACIMA da caixa do elemento; e .grad-text pinta o gradiente so dentro da
   caixa (background-clip:text). O Chrome estende a pintura ao glifo inteiro,
   o WebKit nao: o que passa da caixa fica transparente. Com a Gotham as
   maiusculas ainda cabem; com fonte de fallback mais alta (Gotham nao
   carregando, como no Pages da Livia) o topo some. Reproduzido no WebKit.
   Da folga a caixa por cima com padding e devolve com margin negativa, e
   calcula o gradiente na mesma area de antes (background-origin). Diff de
   imagem contra o estado anterior em 1440x900 e 1440x715: 0 pixel. */
.proof__num{padding-top:.3em;margin-top:-.3em;background-origin:content-box}

/* ---- Performance (17/09/2026, tools/webp.py + tools/aplica-koko.py) ----
   <picture> entra em volta das imagens com versao webp. display:contents
   tira a caixa do <picture> do layout: o <img> continua sendo o item de
   grid/flex e a filha direta para efeito de tamanho, como no HTML dela. */
picture{display:contents}
/* width/height declarados em todo <img> (reserva espaco, evita salto de
   layout). Sem isto, uma largura vinda do CSS e a altura do atributo
   esticariam a imagem. :where() = especificidade zero: qualquer regra dela
   (ex.: .mural__main img{height:100%}) continua vencendo. */
:where(img[width][height]){height:auto}
/* YouTube dos protocolos: thumbnail estatico + play; o player (~1 MB de
   scripts) so entra no clique. O botao cobre o mesmo slot do iframe. */
.koko-yt{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block;color:#fff}
.koko-yt[hidden]{display:none}
.koko-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.koko-yt__play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(23,61,84,.85)}
.koko-yt__play::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent #fff}
.koko-yt:hover .koko-yt__play,.koko-yt:focus-visible .koko-yt__play{background:#a72269}
.koko-yt__label{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ---- Rodape: assinatura "Ilikia & Co" (18/09/2026, ClickUp 86ak1uapn) ----
   A regra dela no kv.css dimensiona esse logo por LARGURA (145px), que so serve
   para a proporcao do antigo (simbolo + ILIKIA, 837x220). O novo e assinatura
   escrita, sem simbolo, e bem mais largo (1010x214): a mesma largura o deixaria
   com metade da altura de caixa alta dos dois logos ao lado. Dimensionar por
   ALTURA alinha os tres. Especificidade igual a dela; o koko.css carrega depois. */
.foot__logos .foot__ilikia--official{width:auto;height:clamp(24px,2.5vw,34px)}

/* Medicao: controles acessiveis, sem cobrir a primeira dobra. */
.koko-cookies[hidden]{display:none}
.koko-cookies{position:fixed;z-index:1000;right:20px;bottom:20px;width:min(430px,calc(100% - 40px));padding:20px;border:1px solid #94adbd;border-radius:16px;background:#f4fafc;color:#24465c;box-shadow:0 8px 28px #15364826;font-size:13px;line-height:1.55}
.koko-cookies p{margin:0 0 14px}.koko-cookies a{text-decoration:underline}
.koko-cookies>div{display:flex;gap:12px}.koko-cookies button{flex:1;min-height:44px;padding:9px 14px;border:1px solid #335e78;border-radius:24px;background:transparent;color:#24465c;font:inherit;cursor:pointer}
.koko-cookies button[data-cookie-choice=granted]{background:#285c7c;color:#fff}
.koko-cookies button:focus-visible,.koko-cookie-settings:focus-visible{outline:3px solid #655a89;outline-offset:3px}
.koko-cookie-settings{border:0;padding:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;min-height:44px}
/* Assets decorativos nao precisam participar da pintura inicial no celular. */
@media(max-width:600px){.hero__orb img{animation:none}.hero__light{animation:none}.hero .grad-text{animation:none}}