/* =====================================================================
   Presq Agency · en.css · ajustes só da versão em inglês (/us)
   Carregado só nas páginas em inglês, depois do CSS da página. Toda regra começa com html[lang="en-US"]:
   nada daqui vale pro português. Não muda cor, fonte nem grade: só o que o texto em inglês pede.
   ===================================================================== */

/* ---------- 1. Números: "+R$20k", "5.7M", "28.3K" ----------
   Em inglês a unidade é uma letra colada no número (como o "%"), do mesmo tamanho dele; o "R$" encosta no valor.
   No português "mil"/"milhões" são palavras pequenas com respiro (.numero-unidade padrão); "professionals" e
   "spots" da Levany continuam palavras e ficam com a regra do português. */
html[lang="en-US"] .numero-linha .numero-prefixo{margin-right:.03em}
html[lang="en-US"] .numero-linha .numero-unidade.numero-unidade--letra{font-size:1em;letter-spacing:inherit;margin-left:.01em}
html[lang="en-US"] .caso .num-venda .numero-linha .numero-prefixo{margin-right:.03em}
html[lang="en-US"] .caso .num-venda .numero-linha .numero-unidade.numero-unidade--letra{font-size:1em}

/* ---------- 2. Trabalhos · a linha "Real pieces, in Portuguese." embaixo do título das peças ---------- */
html[lang="en-US"] .pecas-aviso{display:flex;width:fit-content;margin-top:var(--e4)}

/* ---------- 3. Início · "How customers reach your business." (computador) ----------
   O fim do título ("reach your business.") cabe numa linha antes do aparelho (sobram 79 px em 1024, mais nas
   larguras maiores); quebrando, "reach" ficava sozinho na linha do meio. */
@media (min-width:1024px){ html[lang="en-US"] .capitulos-tese .tese-fim{white-space:nowrap} }

/* ---------- 4. Início · "Brands Presq’s founders" até 374 px ----------
   A primeira parte do título das marcas (a que acende) pede 333 px na letra de 30 px; abaixo de 375 px ela quebrava e
   deixava "founders" sozinho. A letra acompanha a largura útil (tela menos as margens de 20 px) até caber numa linha. */
@media (max-width:374px){ html[lang="en-US"] .pg-inicio .marcas-titulo{font-size:calc((100vw - 40px) / 11.4)} }

/* ---------- 5. Telas do WhatsApp desenhadas: hora de 12 horas ----------
   "10:14 PM" é mais larga que "22:14": o balão reserva mais espaço pra hora não encostar no texto (no vídeo em inglês
   o estúdio reservou 4,2 em). Vale quando o telas.js escrever a hora em inglês; antes disso só sobra um respiro. */
html[lang="en-US"] .wa-esp{width:calc(var(--pt)*64)}
html[lang="en-US"] .wa-linha.sai .wa-esp{width:calc(var(--pt)*84)}

/* ---------- 6. What we do abaixo de 390 px ----------
   O fim do título ("for your business.") não quebra (servicos.css) e pede 8,1 vezes a letra: abaixo de 390 px ele
   passava da coluna e, abaixo de 350, da tela. A letra acompanha a largura útil (tela menos as margens de 20 px).
   A legenda de cada nível divide a linha com o botão de pausa: sem o espaçamento extra das letras,
   "Pacini, physician" cabe junto em 375 px (com ele, "Pacini," e "physician" ficavam sozinhos). */
@media (max-width:389px){
  html[lang="en-US"] .sv-titulo{font-size:calc((100vw - 40px) / 8.2)}
  html[lang="en-US"] .sv-legenda{letter-spacing:0}
}

/* What we do, celular com movimento reduzido: "Watch the animation" / "See the carousel" descem pra baixo da legenda, que fica
   numa linha só (de 375 a 430 px, espremida ao lado do botão, ela deixava "Your" e "physician" sozinhos; em 320 o botão
   saía da tela). Com movimento nada muda: o seletor só pega o botão no modo "ver" (front.md, D2) */
@media (max-width:767px){ html[lang="en-US"] .sv-legenda:has(> .loop-pausa[data-modo="ver"]){flex-wrap:wrap} }

/* tela de bloqueio em inglês com a letra de 21 pt do vídeo notificacoes-en: "Appointment booked" não encosta no "2m ago" */
html[lang="en-US"] .bq-cab{height:calc(var(--u)*27.3);gap:calc(var(--u)*8)}
html[lang="en-US"] .bq-tit{font-size:calc(var(--u)*21);line-height:calc(var(--u)*27.3)}
html[lang="en-US"] .bq-quando{font-size:calc(var(--u)*18.2);line-height:calc(var(--u)*27.3)}
html[lang="en-US"] .bq-corpo{height:calc(var(--u)*27.3);font-size:calc(var(--u)*21);line-height:calc(var(--u)*27.3)}
html[lang="en-US"] .bq-ativ{height:calc(var(--u)*98.24)}
html[lang="en-US"] .bq-ativ-tit{height:calc(var(--u)*30.94);font-size:calc(var(--u)*23.8);line-height:calc(var(--u)*30.94)}
html[lang="en-US"] .bq-ativ-apoio{height:calc(var(--u)*27.3);font-size:calc(var(--u)*21);line-height:calc(var(--u)*27.3)}

/* ---------- 7. Work · a nota embaixo da abertura (15/10, 23h) ----------
   Os casos são do Brasil (faturamento em reais, peças em português) e a Presq também atende negócios nos EUA: dito de
   frente, logo no topo, pra o dono de negócio americano não precisar adivinhar. Letra menor que o apoio, no tom de apoio. */
html[lang="en-US"] .trab-topo-nota{margin-top:var(--e3);font-size:14px;line-height:1.45;color:var(--apoio);max-width:44ch;text-wrap:pretty}
@media (min-width:1024px){ html[lang="en-US"] .trab-topo-nota{font-size:15px;max-width:56ch} }
/* no celular o apoio reservava duas linhas (o português quebra em duas); no inglês ele cabe numa e a nota vem logo embaixo */
@media (max-width:1023px){ html[lang="en-US"] .trab-topo-apoio{min-height:0} }

/* ---------- 8. Contact · o segundo canal: o Rogge, nos EUA, por mensagem de texto ou ligação (decisão 25) ----------
   Embaixo do WhatsApp do José, separado por um filete: o rótulo, o botão de contorno "Text Rogge" (sms:) e o número
   pra ligar (tel:), centrado como o telefone do José. Só existe no inglês. */
html[lang="en-US"] .cv-eua{display:flex;flex-direction:column;align-items:stretch;gap:var(--e2);margin-top:var(--e2);padding-top:var(--e4);border-top:1px solid var(--linha)}
html[lang="en-US"] .cv-eua-rotulo{justify-content:center}
html[lang="en-US"] .cv-eua-ligar{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:calc(var(--e1) * -1);color:var(--apoio);text-decoration:none}
@media (hover:hover) and (pointer:fine){ html[lang="en-US"] .cv-eua-ligar:hover{color:var(--texto)} }
html[lang="en-US"] .cv-eua-ligar:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}

/* ---------- 9. Rodapé · o número do Rogge nos EUA numa linha só: "Text Rogge" (sms:) · o número (tel:) ---------- */
html[lang="en-US"] .rodape-eua{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;margin:0}

/* ---------- 10. Work · o @ da Julie inteiro na barra do print, no celular (persona, item 18) ----------
   A barra do print tem de 87 a 122 px no celular e o "@julielima_nails" pedia 104 px na letra de 11 px: saía cortado
   ("@julielima_na…"), e a prova que o leitor procuraria no Instagram ficava ilegível. A letra acompanha a largura do print
   (no máximo os 11 px de sempre) e a barra perde 3 px de respiro de cada lado. */
@media (max-width:767px){
  html[lang="en-US"] .peca-print{container-type:inline-size}
  html[lang="en-US"] .peca-print .janela-barra{padding:0 7px}
  html[lang="en-US"] .peca-print .viral-conta{font-size:min(11px, calc((100cqw - 16px) / 9.6));text-overflow:clip}
}
