/* ViralizaYa - tema "Ambar" por cima do CSS da Hourden (26/10/2026).

   Antes era o tema "Neon" copiado do SeguidoresYa (roxo + limao). Trocado
   para a ViralizaYa ter identidade propria: azul-marinho profundo no fundo,
   laranja como cor de acao e ambar como acento. Botao laranja leva tinta
   escura (contraste ~8:1); o degrade laranja->ambar fica para enfeite.

   Este arquivo entra DEPOIS da folha da Hourden e troca so as variaveis e os
   poucos lugares que tinham cor fixa. */

/* Outfit (fonte da marca) carrega por <link> paralelo injetado no <head><meta charset="utf-8"> pelo
   esCasca() do porta.php (com preconnect), em vez do @import serializado que
   ficava aqui. Mexer na fonte? Alterar la, nao reintroduzir @import. */

:root{
  --fundo:#0B1220;
  --painel:#121B2E;
  --painel2:#1A2540;
  --linha:#27344F;
  --tinta:#FFFFFF;
  --texto:rgba(255,255,255,.78);
  --fraca:rgba(226,232,245,.66);
  --a:#FF8A1F;
  --b:#FFC53D;
  --marca:#FF8A1F;
  --marca-texto:#FF8A1F;
  --marca-forte:#FF8A1F;
  --grad:linear-gradient(90deg, #FF8A1F, #FFC53D);
  /* texto em degrade no escuro: ambar clareado na ponta */
  --grad-texto:linear-gradient(90deg, #FF8A1F, #FFD27A);
  --sy-ya:#FF8A1F;
  --sy-botao-tinta:#0B1220;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --fundo:#FFFFFF; --painel:#FFF8F1; --painel2:#FFEFDF; --linha:#F1DCC7;
    --tinta:#0B1220; --texto:#3F4658; --fraca:#636B7E;
    --marca-texto:#C2410C; --erro:#D92D20;
    /* laranja (#C2410C) e ambar (#B45309) escurecidos: os dois passam AA no branco */
    --grad-texto:linear-gradient(90deg, #B45309, #C2410C);
    --sy-ya:#C2410C;
  }
}
:root[data-theme="light"]{
  --fundo:#FFFFFF; --painel:#FFF8F1; --painel2:#FFEFDF; --linha:#F1DCC7;
  --tinta:#0B1220; --texto:#3F4658; --fraca:#636B7E;
  --marca-texto:#C2410C; --erro:#D92D20;
  --grad-texto:linear-gradient(90deg, #B45309, #C2410C);
  --sy-ya:#C2410C;
}

/* --------------------------------------------------------------- fonte -- */
body{font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,h4,.marca{font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
h1,h2{letter-spacing:-.02em}

/* -------------------------------------------------------------- marca -- */
.marca .sy-ya{color:var(--sy-ya); font-weight:800}
.marca .mk{border-radius:8px}

/* ---------------------------------------- superficies com tinta escura -- */
/* Tudo o que a Hourden pintava com o degrade + tinta #04140A vira laranja
   chapado + tinta azul-marinho. */
.btn-1,
.preco.destaque::after,
.passos li::before,
.abas-admin a.on,
.tr-passos li.agora .tr-n,
.sd-chip.on,
.pg-chips a.on,
.lado-av{background:var(--a); color:var(--sy-botao-tinta)}
.btn-1:hover{filter:brightness(1.06)}
.pd-abas a.on,.pd-num{color:var(--sy-botao-tinta)}

/* O botao de pagar/adicionar saldo: laranja, a cor de acao da marca. */
.btn-pagar{background:var(--a); color:var(--sy-botao-tinta); border-color:var(--a);
  box-shadow:0 6px 18px -8px rgba(255,138,31,.55)}
.btn-addfunds .mais{background:rgba(11,18,32,.16)}

/* O "Most picked" do cartao de preco: o texto vem do CSS, entao e aqui que
   ele vira espanhol. */
.preco.destaque::after{content:"Más elegido"}

/* No claro o laranja ganha borda um tom abaixo para nao estourar no branco. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .btn-1,
  :root:not([data-theme="dark"]) .btn-pagar{border:1px solid #E06F0A}
}
:root[data-theme="light"] .btn-1,
:root[data-theme="light"] .btn-pagar{border:1px solid #E06F0A}

/* ------------------------------------------------ desempenho do /blog -- */
/* O indice do blog imprime ~595 posts de uma vez. Sem isto, cada clique num
   chip de categoria ou letra na busca refazia o layout dos 595 (medido: 75ms
   de main-thread no reset "todos", ~300ms no celular -> INP ruim), e o render
   inicial tambem pagava os 595. `content-visibility:auto` faz o navegador
   pular o layout/pintura dos posts fora da tela ate rolar ate eles; o
   `contain-intrinsic-size` reserva a altura para a barra de rolagem nao pular.
   Tudo segue no DOM (links internos e indexacao intactos). Medido depois:
   reset "todos" caiu de 75ms para ~9ms. */
ul.posts li.post{content-visibility:auto;contain-intrinsic-size:0 118px}