/* ════════════════════════════════════════════════════════════════════════════════════════════
   EAGLE DESIGN SYSTEM — fonte única de tokens e primitivas de componente.
   24/08/2026.

   POR QUE ESTE FICHEIRO EXISTE
   Antes dele havia SEIS dialetos independentes — conhecimento.css, eagle-ai.css, entidades.css,
   super-calculadora.css, _erp/admin.css e o CSS do gate embutido no middleware — somando ~680
   custom properties sem fonte partilhada. A medição encontrou 9 conceitos com valor divergente
   (--tinta em #14171a num lado e #11161b no outro; --raio em 14px e 13px) e 9 cores com mais de
   um nome (#c8102e era ao mesmo tempo --vermelho, --eai-acento, --ep-red E --err). Divergência
   dessas não se vê isolada; junta, faz com que nenhuma superfície case com a outra.

   O QUE ESTE FICHEIRO NÃO É
   NÃO é redesenho. A identidade da Eagle está assente e mantém-se: Saira Condensed nos títulos,
   Barlow no texto, #C8102E de acento, moldura escura com corpo claro. Aqui só se CONSOLIDA o que
   já existia e se CORRIGE o que a medição provou estar errado.

   AS ÚNICAS COISAS QUE MUDAM DE VALOR, E PORQUÊ
   Quatro correções de contraste, calculadas mantendo o matiz e mexendo só na luminosidade, todas
   medidas pela fórmula WCAG contra o fundo real:
     · texto secundário sobre claro  #8a939b → #69727b   (3,12:1 → 4,50:1) ← a origem da maioria
       das falhas de contraste do site: 258 na Biblioteca, 56 na loja
     · verde de sucesso sobre claro  #1e8e3e → #1c8238   (4,21:1 → 4,51:1)
     · texto mudo sobre claro        #6b7280 → #6a717f   (4,46:1 → 4,51:1)
     · mudo sobre escuro             #6b7280 → #78808e   (3,72:1 → 4,51:1)
     · acento sobre escuro           #c8102e → #ef3352   (3,06:1 → 4,51:1)

   TODAS as razões acima são medidas contra a superfície REAL mais exigente (#f4f6f7, o fundo das
   páginas), NÃO contra branco puro. Foi esse o erro da primeira versão desta folha: validei
   #6e7881 contra #ffffff, onde dá 4,51:1 e passa — mas sobre o fundo real dá 4,16:1 e reprova.
   Trinta e seis das falhas de contraste da Biblioteca vinham exatamente daí.
   `scripts/auditoria-frontend/valida-paleta.mjs` cruza cada papel com cada superfície e é para
   correr sempre que um valor mudar.
   Tudo o resto da paleta já passava e ficou intacto.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1 · PRIMITIVAS ────────────────────────────────────────────────────────────────────────
     Valores crus. Nenhum componente usa isto diretamente — usa os papéis da secção 2. */

  /* Marca */
  --ep-vermelho:            #c8102e;   /* acento da Eagle. 5,88:1 sobre branco */
  --ep-vermelho-escuro:     #a60d26;
  --ep-vermelho-claro:      #ff7a88;   /* para superfície ESCURA. 7,19:1 sobre #14171a */
  --ep-vermelho-texto-esc:  #ef3352;   /* texto de acento sobre escuro. 4,51:1 (o #c8102e dá 3,06) */
  /* D-COR (decisão do dono): eram TREZE vermelhos literais espalhados por cinco folhas, para
     SETE papéis reais. Os quatro acima já eram tokens; os degradês nunca tinham sido nomeados,
     e por isso viviam copiados em conhecimento.css e admin.css com os mesmos valores. Nomeá-los
     é o que impede o décimo quarto tom de aparecer. */
  --ep-vermelho-grad:       linear-gradient(180deg, #e11b32, #b10e22);   /* botão principal */
  --ep-vermelho-grad-fundo: linear-gradient(180deg, #c81729, #930c1c);   /* o mesmo, pressionado */
  --ep-vermelho-erro-tinta: #7a0a1c;   /* texto de erro sobre --ep-erro-fundo; não é o acento */
  --ep-vermelho-fraco:      #fdecee;

  /* Neutros — escala única, do mais escuro ao mais claro */
  --ep-preto:               #0c0e10;
  --ep-carvao:              #14171a;   /* tinta principal e fundo da moldura escura */
  --ep-grafite:             #23282e;
  --ep-ardosia:             #4a5157;   /* texto secundário sobre claro. 8,06:1 */
  --ep-cinza:               #6a717f;   /* texto mudo. 4,51:1 sobre #f4f6f7, 4,89:1 sobre branco */
  --ep-cinza-claro:         #69727b;   /* CORRIGIDO de #8a939b. 4,50:1 sobre #f4f6f7, 4,88:1 sobre branco */
  --ep-cinza-esc:           #78808e;   /* CORRIGIDO de #6b7280 para uso sobre escuro — 4,51:1 */
  --ep-prata:               #8a939b;   /* só decorativo ou sobre escuro (5,76:1). NUNCA texto sobre claro */
  --ep-linha:               #e4e7ea;   /* linha divisória sobre claro */
  --ep-linha-escura:        #343a40;   /* linha divisória sobre escuro */
  --ep-nevoa:               #f4f6f7;
  --ep-branco:              #ffffff;

  /* Estado */
  --ep-verde:               #1c8238;   /* CORRIGIDO de #1e8e3e. 4,51:1 sobre #f4f6f7, 4,89:1 sobre branco */
  --ep-verde-sobre-tinta:   #1b7f37;   /* verde por cima do PRÓPRIO tinte (#ebf7ee): 4,61:1. O --ep-verde ali só dá 4,44 */
  --ep-verde-escuro-bg:     #26a269;   /* sucesso sobre superfície escura. 5,53:1 */
  --ep-verde-fraco:         #e8f5ec;
  --ep-ambar:               #b45309;   /* 5,02:1 sobre branco */
  --ep-ambar-fraco:         #fff7ed;
  --ep-azul:                #1d4ed8;
  --ep-azul-fraco:          #eff4ff;
  --ep-ciano:               #159bd8;   /* o ciano da marca. DECORATIVO — como texto sobre claro dá 3,13 */
  --ep-ciano-tinta:         #1077a5;   /* o mesmo matiz, legível: 5,00:1 sobre branco, 4,62:1 sobre #f5f6f8 */
  --ep-whatsapp:            #25d366;

  /* Tipografia — as pilhas vivem em eagle-fonts.v2.css, que traz as faces de recurso com
     métrica compensada. Aqui só se declaram valores de reserva para o caso de a folha de
     fontes não carregar; se ela carregar, sobrepõe-se a estes. */
  /* As faces «Recurso» têm de estar NA PILHA, logo a seguir à real: são elas que trazem a
     compensação métrica (size-adjust/ascent-override) que segura o CLS enquanto a fonte da marca
     não chega. Sem elas aqui, quem usa os tokens do sistema não recebe a compensação nenhuma. */
  --ep-fonte-titulo:  'Saira Condensed', 'Saira Condensed Recurso', 'Arial Narrow', Arial, sans-serif;
  --ep-fonte-texto:   'Barlow', 'Barlow Recurso', Arial, system-ui, sans-serif;
  --ep-fonte-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Escala de tipo — razão 1,2 a partir de 16px */
  --ep-t-11: .6875rem;  --ep-t-12: .75rem;   --ep-t-13: .8125rem; --ep-t-14: .875rem;
  --ep-t-16: 1rem;      --ep-t-18: 1.125rem; --ep-t-21: 1.3125rem;--ep-t-25: 1.5625rem;
  --ep-t-31: 1.9375rem; --ep-t-38: 2.375rem; --ep-t-48: 3rem;     --ep-t-64: 4rem;

  /* Pesos de fonte — acrescentado a 27/08/2026.
     ANTES DISTO havia três valores no CSS que o navegador trocava em silêncio, porque não existia
     arquivo de fonte para eles: `500` (virava 400), `750` em `.ia-sugestao-nome` (virava 800) e
     `900` no ERP (virava 800). Quem escrevia o CSS via um número e a tela mostrava outro.
     As duas famílias passaram a ter os nove pesos (ver eagle-fonts.v2.css), carregados sob
     demanda. Estes tokens existem para que ninguém volte a escrever um peso que não existe. */
  --ep-peso-fino:    300;
  --ep-peso-normal:  400;   /* corpo de texto */
  --ep-peso-medio:   500;
  --ep-peso-semi:    600;   /* rótulos e legendas fortes */
  --ep-peso-forte:   700;   /* o peso de trabalho: 94 usos medidos */
  --ep-peso-extra:   800;   /* títulos em Saira Condensed: 65 usos */
  --ep-peso-preto:   900;

  /* Alturas de linha — acrescentado a 27/08/2026.
     Medição antes de escrever: o site usava DEZANOVE valores distintos (de .86 a 1.65), sem
     nenhuma regra. Estes cinco degraus foram tirados dos agrupamentos reais, não inventados:
     1,5 é o corpo (16 usos), 1 é o colado dos botões (12), e havia um enxame entre 1,4 e 1,65.
     Cada valor antigo cai no degrau mais próximo. */
  --ep-lh-colado:  1;      /* botões, números grandes, contadores */
  --ep-lh-titulo:  1.1;    /* títulos em Saira Condensed */
  --ep-lh-medio:   1.3;    /* subtítulos e títulos de cartão */
  --ep-lh-corpo:   1.5;    /* texto corrido — o mais usado do site */
  --ep-lh-solto:   1.65;   /* textos longos, legais, parágrafos densos */

  /* Espaçamento — escala de 4px, sem valores fora dela */
  --ep-e-1: 4px;  --ep-e-2: 8px;  --ep-e-3: 12px; --ep-e-4: 16px; --ep-e-5: 20px;
  --ep-e-6: 24px; --ep-e-8: 32px; --ep-e-10: 40px; --ep-e-12: 48px; --ep-e-16: 64px;

  /* Espaçamento entre letras — acrescentado a 27/08/2026.
     Medição: 18 valores distintos em 80 usos. Dois grupos claros — o ajuste fino de títulos
     condensados (.01 a .04em) e o afastamento de rótulos em CAIXA ALTA (.05 a .18em), que é onde
     o tracking faz falta de verdade: sem ele, maiúsculas coladas ficam ilegíveis em corpo pequeno. */
  --ep-tracking-apertado: -.01em;  /* títulos display muito grandes */
  --ep-tracking-zero:      0;
  --ep-tracking-titulo:   .02em;
  --ep-tracking-rotulo:   .05em;   /* CAIXA ALTA pequena — 16 usos, o mais comum */
  --ep-tracking-largo:    .12em;   /* sobrancelhas e etiquetas de secção */

  /* Camadas — acrescentado a 27/08/2026.
     Medição: 13 valores soltos (1, 5, 10, 20, 30, 50, 60, 80, 100…) espalhados por seis folhas,
     sem nenhuma relação entre eles. Um menu novo tinha 50% de chance de nascer atrás do diálogo.
     A escala reserva faixas e deixa espaço entre elas para caber camada nova sem renumerar tudo. */
  --ep-z-base:      1;    /* elevação dentro do fluxo: cabeçalho de tabela, sobreposição de cartão */
  --ep-z-flutuante: 100;  /* botão flutuante, barra fixa */
  --ep-z-menu:      200;  /* menus suspensos e listas de sugestão */
  --ep-z-fixo:      300;  /* cabeçalho colado ao topo */
  --ep-z-cortina:   400;  /* fundo escurecido do diálogo */
  --ep-z-dialogo:   500;  /* o diálogo em si */
  --ep-z-aviso:     600;  /* mensagens efémeras — ficam ACIMA do diálogo de propósito */

  /* Opacidade — acrescentado a 27/08/2026.
     Medição: 12 valores distintos. Os três que se repetem têm papel claro; o resto era ajuste
     avulso. Desabilitado a .55 é o que os componentes já usavam. */
  --ep-op-desligado: .55;
  --ep-op-discreto:  .62;
  --ep-op-cortina:   .5;

  /* Espessura de borda — acrescentado a 27/08/2026.
     Medição: 1px em 177 usos contra 2px (17) e 3px (25). O 1.5px de quatro usos não tem papel
     próprio: é 1px ou 2px conforme o caso. */
  --ep-borda-fina:   1px;   /* a borda padrão de tudo */
  --ep-borda-media:  2px;   /* anel de foco */
  --ep-borda-grossa: 3px;   /* destaque forte e barras de acento */

  /* Raios — CONSOLIDADO: era 14px na Área e 13px no Eagle AI. Fica 14px, o mais usado */
  --ep-raio-curto: 8px;
  --ep-raio:       14px;
  --ep-raio-cartao:18px;
  --ep-raio-pilula:999px;

  /* Sombras — CONSOLIDADO: as duas variantes divergiam no desfoque e na opacidade */
  --ep-sombra-leve: 0 2px 8px rgba(20, 23, 26, .06);
  --ep-sombra:      0 18px 44px rgba(20, 23, 26, .08);
  --ep-sombra-alta: 0 24px 60px rgba(20, 23, 26, .14);

  /* Alvo de toque — a auditoria encontrou controlos abaixo disto em TODAS as 14 rotas móveis
     medidas (de 5 a 27 por página), e 234 só na aba Catálogo do ERP. É piso, não sugestão. */
  --ep-toque: 44px;

  /* Tamanhos de ícone — acrescentado a 27/08/2026.
     Medição: 16px em 148 usos, mas também 21px em 44 e 13px em 30 — valores a UM PIXEL do
     padrão, que ninguém escolheu de propósito e que nenhuma grelha explica. Ficam quatro degraus;
     os 21 e os 13 pertencem aos degraus de 20 e de 12. */
  --ep-icone-mini:  12px;   /* setas de menu e chevrons */
  --ep-icone-peq:   16px;   /* o mais usado: itens de navegação */
  --ep-icone:       20px;   /* padrão dos botões */
  --ep-icone-gde:   24px;   /* ações destacadas */

  /* Movimento — acrescentado a 27/08/2026 além do token único que já existia.
     Medição: 15 durações distintas. As de interação agrupam-se em 150–200ms; as de ambiente
     (brilho do esqueleto, roda de carregamento) ficam acima de 1s. As curvas estavam todas
     implícitas: só `--ep-transicao` tinha uma nomeada, e as animações longas usavam `linear`,
     que é o que dá o aspecto mecânico. O `.001ms` que aparece 4 vezes é o truque de
     `prefers-reduced-motion` e está certo onde está. */
  --ep-dur-rapida:   120ms;  /* realce ao passar o rato */
  --ep-dur-normal:   160ms;  /* o padrão: mudança de estado de controlo */
  --ep-dur-lenta:    240ms;  /* entrada de painel, abrir menu */
  --ep-dur-ambiente: 1200ms; /* brilho de esqueleto, pulsação de carregamento */
  --ep-curva:        cubic-bezier(.2, .6, .3, 1);   /* saída suave — a curva da casa */
  --ep-curva-entra:  cubic-bezier(.16, .84, .44, 1);/* elemento que ENTRA: rápido no fim */
  --ep-curva-sai:    cubic-bezier(.4, 0, 1, 1);     /* elemento que SAI: acelera e desaparece */
  --ep-transicao: 160ms cubic-bezier(.2, .6, .3, 1);

  /* Larguras — divergiam por superfície, e essa divergência é LEGÍTIMA: cada superfície tem o
     seu propósito. Ficam nomeadas para deixarem de ser número solto. */
  --ep-largura-leitura: 700px;   /* texto corrido: linha confortável */
  --ep-largura-app:     1180px;  /* páginas de conteúdo */
  --ep-largura-loja:    1280px;  /* vitrine e catálogo */
  --ep-largura-painel:  1600px;  /* ERP: densidade acima de conforto de leitura */

  /* ── 2 · PAPÉIS SEMÂNTICOS — superfície CLARA (o corpo do site) ───────────────────────────
     É por aqui que os componentes falam. Trocar o tema troca estes, não as primitivas. */
  --ep-fundo:            var(--ep-branco);
  --ep-fundo-suave:      var(--ep-nevoa);
  --ep-painel:           var(--ep-branco);
  --ep-tinta:            var(--ep-carvao);      /* 17,99:1 */
  --ep-tinta-suave:      var(--ep-ardosia);     /*  8,06:1 */
  --ep-tinta-mudo:       var(--ep-cinza);       /*  4,83:1 */
  --ep-tinta-tenue:      var(--ep-cinza-claro); /*  4,51:1 — corrigido */
  --ep-borda:            var(--ep-linha);
  --ep-acento:           var(--ep-vermelho);
  --ep-acento-tinta:     var(--ep-vermelho);    /*  5,88:1 como texto */
  --ep-acento-fundo:     var(--ep-vermelho-fraco);
  --ep-sucesso:          var(--ep-verde);
  --ep-aviso:            var(--ep-ambar);
  /* erro e acento partilham hoje o mesmo vermelho. Ficam SEPARADOS de propósito: são conceitos
     diferentes e um dia hão de divergir sem que seja preciso caçar ocorrências. */
  --ep-erro:             var(--ep-vermelho);
  --ep-erro-fundo:       var(--ep-vermelho-fraco);
  --ep-foco:             var(--ep-vermelho);
}

/* ── 3 · PAPÉIS SEMÂNTICOS — superfície ESCURA ────────────────────────────────────────────
   Usa-se na moldura (cabeçalho e rodapé) e no gate. O gate ser escuro com o corpo claro é
   DECISÃO do dono, não inconsistência — por isso é um tema, não uma exceção. */
[data-ep-tema="escuro"], .ep-escuro {
  --ep-fundo:            var(--ep-carvao);
  --ep-fundo-suave:      var(--ep-preto);
  --ep-painel:           var(--ep-grafite);
  --ep-tinta:            #e7eaec;
  --ep-tinta-suave:      #c7cdd2;
  --ep-tinta-mudo:       var(--ep-cinza-esc);   /* 4,51:1 — corrigido */
  --ep-tinta-tenue:      var(--ep-prata);       /* 5,76:1 sobre escuro: aqui é legítimo */
  --ep-borda:            var(--ep-linha-escura);
  --ep-acento:           var(--ep-vermelho);
  --ep-acento-tinta:     var(--ep-vermelho-texto-esc); /* 4,51:1 — o #c8102e daria 3,06 */
  --ep-acento-fundo:     rgba(200, 16, 46, .16);
  --ep-sucesso:          var(--ep-verde-escuro-bg);
  --ep-foco:             var(--ep-vermelho-claro);
  /* ACRESCENTADO a 27/08/2026 — estes três faltavam e herdavam o valor do tema CLARO.
     Medido pela fórmula WCAG contra #14171a, o fundo escuro real:
        --ep-erro herdado (#c8102e)   3,06:1  REPROVA (o mínimo para texto é 4,50)
        --ep-aviso herdado (#b45309)  3,58:1  REPROVA
        --ep-erro-fundo (#fdecee)     é um fundo QUASE BRANCO dentro de uma tela escura
     A cor certa para o erro já existia no ficheiro desde 24/08 — `--ep-vermelho-texto-esc`,
     criada exactamente por causa deste 3,06 — e nunca tinha sido ligada ao papel de erro.
     Medido também: hoje nenhuma página viva junta um aviso a uma superfície escura, por isso
     isto não corrigiu nada que estivesse errado NA TELA. Fecha o buraco antes de alguém pôr o
     primeiro erro dentro do gate, que é escuro. */
  --ep-erro:             var(--ep-vermelho-texto-esc);   /* 4,51:1 sobre #14171a */
  --ep-erro-fundo:       rgba(200, 16, 46, .16);         /* o mesmo tratamento do acento no escuro */
  --ep-aviso:            #f0a35e;                        /* âmbar clareado para o escuro */
}

/* ── 4 · PRIMITIVAS DE COMPONENTE ─────────────────────────────────────────────────────────
   Cada uma nasce já com o que a auditoria provou estar em falta: alvo de 44px, foco visível,
   e par de cores que passa contraste. Aplicar isto CORRIGE em vez de repintar. */

/* Foco — a medição encontrou `outline:none` órfão em vários controlos. Aqui é regra da casa. */
.ep-foco-visivel:focus-visible,
.ep-botao:focus-visible, .ep-campo:focus-visible, .ep-ligacao:focus-visible {
  outline: 2px solid var(--ep-foco);
  outline-offset: 2px;
  border-radius: var(--ep-raio-curto);
}

/* Botão */
.ep-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ep-e-2);
  min-height: var(--ep-toque); min-width: var(--ep-toque);
  padding: 0 var(--ep-e-4);
  border: 1px solid transparent; border-radius: var(--ep-raio-curto);
  font-family: var(--ep-fonte-texto); font-size: var(--ep-t-14); font-weight: 700;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: background var(--ep-transicao), border-color var(--ep-transicao), color var(--ep-transicao);
}
.ep-botao--principal { background: var(--ep-acento); color: #fff; }
.ep-botao--principal:hover { background: var(--ep-vermelho-escuro); }
.ep-botao--secundario { background: transparent; color: var(--ep-tinta); border-color: var(--ep-borda); }
.ep-botao--secundario:hover { border-color: var(--ep-tinta-mudo); }
.ep-botao--discreto { background: transparent; color: var(--ep-tinta-suave); }
.ep-botao--discreto:hover { background: var(--ep-fundo-suave); }
.ep-botao[disabled], .ep-botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Botão só de ícone — 44px mesmo quando o ícone é de 20px.
   É o caso do botão de conta do cabeçalho, que estava a 42×42. */
.ep-botao-icone {
  display: inline-grid; place-items: center;
  width: var(--ep-toque); height: var(--ep-toque);
  padding: 0; border: 0; border-radius: var(--ep-raio-curto);
  background: transparent; color: var(--ep-tinta-suave); cursor: pointer;
}
.ep-botao-icone:hover { background: var(--ep-fundo-suave); color: var(--ep-tinta); }
.ep-botao-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Campo — rótulo real é obrigatório; placeholder NÃO é rótulo (a auditoria encontrou vários) */
.ep-rotulo {
  display: block; margin-bottom: var(--ep-e-2);
  font-size: var(--ep-t-13); font-weight: 700; color: var(--ep-tinta-suave);
}
.ep-campo {
  display: block; width: 100%; min-height: var(--ep-toque);
  padding: 0 var(--ep-e-3);
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio-curto);
  background: var(--ep-painel); color: var(--ep-tinta);
  font-family: var(--ep-fonte-texto); font-size: var(--ep-t-16);
}
.ep-campo::placeholder { color: var(--ep-tinta-tenue); }
.ep-campo[aria-invalid="true"] { border-color: var(--ep-erro); }
.ep-campo-erro { margin-top: var(--ep-e-1); font-size: var(--ep-t-13); color: var(--ep-erro); font-weight: 600; }

/* Cartão */
.ep-cartao {
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio-cartao);
  background: var(--ep-painel); box-shadow: var(--ep-sombra-leve);
  padding: var(--ep-e-5);
}

/* Selo de estado */
.ep-selo {
  display: inline-flex; align-items: center; gap: var(--ep-e-1);
  padding: var(--ep-e-1) var(--ep-e-2); border-radius: var(--ep-raio-pilula);
  font-size: var(--ep-t-12); font-weight: 700;
}
.ep-selo--sucesso { background: var(--ep-verde-fraco); color: var(--ep-verde); }
.ep-selo--aviso   { background: var(--ep-ambar-fraco); color: var(--ep-ambar); }
.ep-selo--erro    { background: var(--ep-erro-fundo);  color: var(--ep-erro); }
.ep-selo--info    { background: var(--ep-azul-fraco);  color: var(--ep-azul); }

/* Estado vazio — a régua exige direção, não ecrã em branco */
.ep-vazio { display: grid; justify-items: center; gap: var(--ep-e-3);
  padding: var(--ep-e-12) var(--ep-e-5); text-align: center; color: var(--ep-tinta-mudo); }
.ep-vazio h3 { margin: 0; font-family: var(--ep-fonte-titulo); font-size: var(--ep-t-25); color: var(--ep-tinta); }
.ep-vazio p  { margin: 0; max-width: 46ch; font-size: var(--ep-t-14); line-height: 1.55; }

/* Anúncio para leitor de ecrã — o carrinho precisa disto para anunciar que o produto entrou */
.ep-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Movimento reduzido — respeitado em todo o sistema */
@media (prefers-reduced-motion: reduce) {
  .ep-botao, .ep-botao-icone, .ep-campo { transition: none; }
}


/* ── 5 · FUNDAÇÕES DE DISPOSITIVO MÓVEL ───────────────────────────────────────────────────────
   O móvel não é o desktop encolhido — é 68% das encomendas do mercado, e tem falhas próprias que
   nenhuma medição de desktop apanha. Esta secção existe porque o dono reparou que "as cores no
   celular são diferentes do desktop, sem vida" e a auditoria encontrou alvos de toque abaixo do
   mínimo em TODAS as 14 rotas móveis medidas.

   Nota honesta: a causa da diferença de cor relatada NÃO foi estabelecida. A hipótese de
   auto-escurecimento do Chrome Android não se reproduziu em ambiente controlado. O que está
   provado é que o site não declarava color-scheme em lado nenhum — e isso resolve-se aqui,
   independentemente de ser ou não a causa daquilo. */

:root {
  /* Sem esta declaração o browser fica livre para aplicar o seu próprio esquema a controlos
     nativos (campos, seletores, barras de rolagem) e, em alguns Android, à página inteira. */
  color-scheme: light;
}
[data-ep-tema="escuro"], .ep-escuro { color-scheme: dark; }

html {
  /* O iOS aumenta o corpo de texto por conta própria ao rodar o ecrã; isto trava-o. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* O CIRCUITO QUE FALTAVA. O sistema definia `--ep-fonte-texto` e nunca a aplicava a lado nenhum:
     quem não declarasse fonte própria caía no serif por omissão do browser. Na página do Eagle AI
     isso era visível a olho nu — a fonte vive em `.eai`, um invólucro, e a navegação partilhada
     vive FORA dele, por isso a barra e o logo desenhavam em Times New Roman. Onze elementos.
     Definir tokens sem os aplicar é ter um sistema que não governa nada; uma página que declare a
     sua própria fonte continua a ganhar, porque a folha dela vem depois desta. */
  font-family: var(--ep-fonte-texto);
  /* O realce cinzento do toque no Android tapa a cor da marca no instante do clique. */
  -webkit-tap-highlight-color: rgba(200, 16, 46, .14);
}

/* Campos: 16px é o piso no móvel. Abaixo disso o iOS dá zoom automático ao focar, e o
   utilizador cai fora do enquadramento da página no meio do checkout. */
@media (max-width: 820px) {
  .ep-campo, input, select, textarea { font-size: max(16px, var(--ep-t-16)); }
}

/* Barra gestual do iPhone: elemento fixo no fundo tem de ceder espaço, senão o indicador
   do sistema corta o botão de compra. */
.ep-fixo-fundo {
  padding-bottom: calc(var(--ep-e-3) + env(safe-area-inset-bottom, 0px));
}
.ep-seguro-lados {
  padding-left: max(var(--ep-e-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--ep-e-4), env(safe-area-inset-right, 0px));
}

/* Alvo de toque: em ecrã de toque o piso sobe para todos os controlos, não só os do sistema.
   A área tocável cresce por pseudo-elemento, sem alterar o desenho visual. */
@media (pointer: coarse) {
  .ep-botao, .ep-botao-icone, .ep-campo, .ep-ligacao-toque {
    min-height: var(--ep-toque);
  }
  /* Ação que TEM de parecer uma ligação («Esqueci a senha», «Entrar com link mágico»). Como não
     tem moldura, nasce com a altura da linha de texto — 20px na área do cliente. Estas vivem DENTRO
     de um parágrafo, por isso não se pode dar-lhes `min-height`: isso esticava a linha inteira.
     Cresce-se por dentro e devolve-se o espaço com margem negativa — a caixa que o dedo acerta vai
     a 44px e o texto fica exatamente onde estava. Mesma técnica das bandeiras da loja.

     A classe é DUPLICADA de propósito no seletor. A página que usa este padrão escreve o seu
     próprio `button.text-action { padding: 0 }` — tipo+classe, que ganha a uma classe só, e a
     primitiva não pegava (medido: os botões ficaram nos 20px). Duplicar a classe leva a
     especificidade a (0,2,0) sem introduzir dependência de ordem nem de estrutura. É a mesma
     armadilha que apanhou a ligação de saltar do Eagle AI: contar com a ordem de escrita não
     chega — a regra tem de ganhar. */
  .ep-accao-texto.ep-accao-texto { padding-block: 12px; margin-block: -12px; }
  .ep-alvo-ampliado { position: relative; }
  .ep-alvo-ampliado::after {
    content: ""; position: absolute; inset: 50% 50% 50% 50%;
    width: var(--ep-toque); height: var(--ep-toque);
    transform: translate(-50%, -50%);
  }
}

/* Navegação de rodapé: são ligações dentro de <nav>, não texto corrido — a exceção «inline» da
   WCAG 2.5.8 NÃO se aplica a elas, e a medição encontrou-as a 22-23px de altura em todas as
   páginas da raiz. Cresce a área tocável sem alterar o desenho: o texto fica onde estava, o que
   aumenta é o que o dedo acerta. A ligação de e-mail que vive no <p> abaixo do <nav> continua de
   fora, e bem — essa está mesmo em linha numa frase. */
@media (pointer: coarse) {
  footer nav a { display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--ep-toque); min-width: var(--ep-toque); }
  /* A loja monta as suas listas de rodapé em <div>, não em <nav>, e a medição apanhou-as a
     16-19px de altura. Aqui NÃO se centra: são colunas encostadas à esquerda e centrar mudaria
     o desenho. Cresce só a altura que o dedo acerta. A ligação de e-mail dentro de <p> fica de
     fora pela exceção «inline» da 2.5.8 — essa está mesmo no meio de uma frase. */
  footer a:not(nav a):not(p a) { display: flex; align-items: center;
    min-height: var(--ep-toque); min-width: var(--ep-toque); }
  /* Caixas de seleção e rádios nascem a 13x13 — o dedo não acerta. O controlo cresce; o desenho
     do quadrado mantém-se porque quem o pinta é a moldura do rótulo, não o input. */
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: var(--ep-toque); display: inline-flex; align-items: center; }
}

/* Texto: 12px é o piso de legibilidade. A medição encontrou 101 elementos abaixo disso só na
   Biblioteca, e 52 na home guiada. */
@media (max-width: 820px) {
  .ep-texto-pequeno { font-size: max(12px, var(--ep-t-12)); }
}

/* ── 6 · ÍCONES ───────────────────────────────────────────────────────────────────────────────
   A auditoria encontrou DOIS sistemas de ícone a conviver, e por vezes no mesmo menu:
     · emoji  — 🧪 e 💉 no dropdown Calculadoras da loja e da Área;
                📦 🧾 📨 ➕ 👤 💬 ♻️ no menu do ERP
     · ASCII  — ▦ * ! ◔ $ no mesmo menu do ERP
   ao lado do padrão real da casa, que é SVG de traço a 16px.

   Emoji como ícone falha por três razões concretas: desenha diferente em cada plataforma, não
   recolore com o texto, e é lido em voz alta pelo leitor de ecrã com o nome do emoji. A skill de
   loja é categórica ("NEVER use emojis in storefront UI") e a arbitragem da régua deu-lhe razão
   neste caso, por os emoji não serem elemento de marca.

   O contrato: todo o ícone é SVG de traço, grelha de 24, traço 1.8, herda currentColor. */

.ep-icone {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ep-icone--16 { width: 16px; height: 16px; }
.ep-icone--24 { width: 24px; height: 24px; }
.ep-icone--cheio { fill: currentColor; stroke: none; }

/* ── 7 · TABELA E DENSIDADE (ERP) ─────────────────────────────────────────────────────────────
   O ERP é denso DE PROPÓSITO — ali a régua de conversão não se aplica e um painel apertado é bom
   painel. O que continua a valer é legibilidade, cabeçalho fixo e rolagem contida. */

.ep-tabela { width: 100%; border-collapse: collapse; font-size: var(--ep-t-13); }
.ep-tabela th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--ep-e-2) var(--ep-e-3); text-align: left;
  background: var(--ep-fundo-suave); color: var(--ep-tinta-suave);
  font-weight: 700; border-bottom: 1px solid var(--ep-borda); white-space: nowrap;
}
.ep-tabela td { padding: var(--ep-e-2) var(--ep-e-3); border-bottom: 1px solid var(--ep-borda); }
.ep-tabela tbody tr:hover { background: var(--ep-fundo-suave); }
/* Tabela larga rola DENTRO da sua caixa — a página nunca rola na horizontal. */
.ep-tabela-caixa { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 8 · ITENS VISUAIS ────────────────────────────────────────────────────────────────────────
   O vocabulário visual que o site usa todos os dias. Cada peça nasce com o que a auditoria
   provou estar em falta: alvo de 44px, foco visível, par de cores que passa contraste, e estado
   vazio ou de erro com direção em vez de ecrã em branco. */

/* Aviso — UM sítio para o aviso, quatro cores para o tipo. A régua exige que o modificador mude
   a cor e o ícone, nunca o sítio: quem já sabe onde ler continua a ler no mesmo sítio. */
.ep-aviso {
  display: flex; gap: var(--ep-e-3); align-items: flex-start;
  padding: var(--ep-e-3) var(--ep-e-4);
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio);
  background: var(--ep-fundo-suave); color: var(--ep-tinta);
  font-size: var(--ep-t-14); line-height: 1.5;
}
.ep-aviso .ep-icone { margin-top: 1px; }
/* O componente pinta os SEUS filhos. Sem isto, uma regra da página (por exemplo um `strong`
   branco herdado do cabeçalho escuro) escorrega para dentro do aviso e some no fundo claro —
   aconteceu na página de entrega, onde «Entregamos apenas no Brasil.» ficou a 1,06:1. */
.ep-aviso, .ep-aviso p, .ep-aviso strong, .ep-aviso b, .ep-aviso a { color: inherit; }
.ep-aviso strong, .ep-aviso b { font-weight: 700; }
.ep-aviso p { margin: 0; }
.ep-aviso p + p { margin-top: var(--ep-e-2); }
.ep-aviso--info    { border-color: #bfd3ff; background: var(--ep-azul-fraco);  color: #10306e; }
.ep-aviso--sucesso { border-color: #b6e0c4; background: var(--ep-verde-fraco); color: #0f4a24; }
.ep-aviso--atencao { border-color: #f0d5a8; background: var(--ep-ambar-fraco); color: #6b3d05; }
.ep-aviso--erro    { border-color: #f0b7c1; background: var(--ep-erro-fundo);  color: var(--ep-vermelho-erro-tinta); }

/* Diálogo — foco preso dentro, fecho por Escape, e o foco volta a quem o abriu.
   A auditoria encontrou um popup que transbordava 194px no móvel e não rolava. */
.ep-dialogo-fundo {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: var(--ep-e-4); background: rgba(12, 14, 16, .74);
  overflow-y: auto; overscroll-behavior: contain;
}
.ep-dialogo {
  width: min(560px, 100%); max-height: calc(100dvh - var(--ep-e-8));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio-cartao);
  background: var(--ep-painel); box-shadow: var(--ep-sombra-alta);
}
.ep-dialogo-topo { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ep-e-3); padding: var(--ep-e-5); border-bottom: 1px solid var(--ep-borda); }
.ep-dialogo-topo h2 { margin: 0; font-family: var(--ep-fonte-titulo); font-size: var(--ep-t-25);
  line-height: 1.05; color: var(--ep-tinta); }
/* rola por DENTRO — a página por baixo nunca rola, e o conteúdo longo não transborda */
.ep-dialogo-corpo { padding: var(--ep-e-5); overflow-y: auto; }
.ep-dialogo-pe { display: flex; flex-wrap: wrap; gap: var(--ep-e-2); justify-content: flex-end;
  padding: var(--ep-e-4) var(--ep-e-5); border-top: 1px solid var(--ep-borda); }

/* Menu suspenso — o gatilho ESCREVE aria-expanded. O botão de conta da loja declarava
   aria-haspopup="menu" e nunca abria menu nenhum nem escrevia o estado: é o defeito a evitar. */
.ep-menu-caixa { position: relative; }
.ep-menu {
  position: absolute; top: calc(100% + var(--ep-e-2)); right: 0; z-index: 30;
  min-width: 220px; padding: var(--ep-e-1);
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio);
  background: var(--ep-painel); box-shadow: var(--ep-sombra);
}
[aria-expanded="false"] + .ep-menu, .ep-menu[hidden] { display: none; }
.ep-menu-item {
  display: flex; align-items: center; gap: var(--ep-e-3); width: 100%;
  min-height: var(--ep-toque); padding: 0 var(--ep-e-3);
  border: 0; border-radius: var(--ep-raio-curto); background: none;
  color: var(--ep-tinta); font: inherit; font-size: var(--ep-t-14); text-align: left;
  text-decoration: none; cursor: pointer;
}
.ep-menu-item:hover { background: var(--ep-fundo-suave); }
.ep-menu-item[aria-current="page"] { color: var(--ep-acento-tinta); font-weight: 700; }

/* Abas */
.ep-abas { display: flex; gap: var(--ep-e-1); border-bottom: 1px solid var(--ep-borda);
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ep-aba {
  min-height: var(--ep-toque); padding: 0 var(--ep-e-4);
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--ep-tinta-mudo); font: inherit; font-size: var(--ep-t-14); font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.ep-aba[aria-selected="true"] { color: var(--ep-tinta); border-bottom-color: var(--ep-acento); }

/* Trilha — ÚNICA exceção ao alvo de 44px em todo o sistema, e é deliberada: a WCAG 2.2
   (SC 2.5.8, exceção «inline») isenta ligações que vivem dentro de uma linha de texto. Forçar
   44px de altura numa trilha partiria o alinhamento do texto sem ganho nenhum de acessibilidade.
   Toda a OUTRA exceção ao piso de 44px é defeito, não decisão. */
.ep-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ep-e-2);
  font-size: var(--ep-t-13); color: var(--ep-tinta-mudo); }
.ep-trilha a { color: var(--ep-tinta-suave); text-decoration: none; }
.ep-trilha a:hover { text-decoration: underline; }
.ep-trilha [aria-current="page"] { color: var(--ep-tinta); }

/* Paginação — cada número é alvo de 44px e a página atual diz-se por aria-current */
.ep-paginacao { display: flex; flex-wrap: wrap; gap: var(--ep-e-1); align-items: center; }
.ep-pagina {
  display: inline-grid; place-items: center;
  min-width: var(--ep-toque); min-height: var(--ep-toque); padding: 0 var(--ep-e-2);
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio-curto);
  background: var(--ep-painel); color: var(--ep-tinta);
  font-size: var(--ep-t-14); text-decoration: none;
}
.ep-pagina[aria-current="page"] { background: var(--ep-acento); border-color: var(--ep-acento); color: #fff; font-weight: 700; }

/* Preço — o desconto diz-se, não se pinta só. A régua exige preço e frete claros à cabeça. */
.ep-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ep-e-2); }
.ep-preco-valor { font-family: var(--ep-fonte-titulo); font-size: var(--ep-t-31);
  font-weight: 800; line-height: 1; color: var(--ep-tinta); }
.ep-preco-antes { font-size: var(--ep-t-14); color: var(--ep-tinta-tenue); text-decoration: line-through; }
.ep-preco-nota  { flex-basis: 100%; font-size: var(--ep-t-13); color: var(--ep-tinta-mudo); }

/* Cartão de produto */
.ep-produto { display: flex; flex-direction: column; gap: var(--ep-e-3);
  padding: var(--ep-e-4); border: 1px solid var(--ep-borda);
  border-radius: var(--ep-raio-cartao); background: var(--ep-painel);
  transition: border-color var(--ep-transicao), box-shadow var(--ep-transicao); }
.ep-produto:hover { border-color: var(--ep-tinta-tenue); box-shadow: var(--ep-sombra-leve); }
/* proporção reservada: sem isto a imagem chega e empurra tudo (é CLS) */
.ep-produto-imagem { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--ep-raio);
  background: var(--ep-fundo-suave); object-fit: cover; }
.ep-produto-nome { margin: 0; font-size: var(--ep-t-16); font-weight: 600; color: var(--ep-tinta); }
.ep-produto-estado { font-size: var(--ep-t-13); font-weight: 600; }
.ep-produto-estado--disponivel { color: var(--ep-sucesso); }
.ep-produto-estado--ultimos    { color: var(--ep-aviso); }
.ep-produto-estado--esgotado   { color: var(--ep-tinta-mudo); }

/* Seletor de variante — estado por BORDA e preenchimento, nunca por mudança subtil de cor,
   e a variante esgotada diz-se além de ficar desativada. */
.ep-variantes { display: flex; flex-wrap: wrap; gap: var(--ep-e-2); }
.ep-variante {
  min-height: var(--ep-toque); padding: 0 var(--ep-e-4);
  border: 1.5px solid var(--ep-borda); border-radius: var(--ep-raio-curto);
  background: var(--ep-painel); color: var(--ep-tinta);
  font: inherit; font-size: var(--ep-t-14); cursor: pointer;
}
.ep-variante[aria-pressed="true"] { border-color: var(--ep-acento); background: var(--ep-acento-fundo);
  color: var(--ep-acento-tinta); font-weight: 700; }
.ep-variante[disabled] { opacity: .5; cursor: not-allowed; text-decoration: line-through; }

/* Quantidade */
.ep-quantidade { display: inline-flex; align-items: center;
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio-curto); overflow: hidden; }
.ep-quantidade button { width: var(--ep-toque); height: var(--ep-toque); border: 0;
  background: var(--ep-painel); color: var(--ep-tinta); font-size: var(--ep-t-18); cursor: pointer; }
.ep-quantidade button:hover { background: var(--ep-fundo-suave); }
.ep-quantidade input { width: 3.5ch; height: var(--ep-toque); border: 0; text-align: center;
  background: var(--ep-painel); color: var(--ep-tinta); font: inherit; font-size: var(--ep-t-16); }

/* Carregamento — a régua exige indicador em toda a chamada de rede */
.ep-esqueleto { border-radius: var(--ep-raio-curto);
  background: linear-gradient(90deg, var(--ep-fundo-suave) 25%, #eef1f3 37%, var(--ep-fundo-suave) 63%);
  background-size: 400% 100%; animation: ep-brilho 1.4s ease-in-out infinite; }
@keyframes ep-brilho { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
.ep-roda { width: 18px; height: 18px; border: 2px solid var(--ep-borda);
  border-top-color: var(--ep-acento); border-radius: 50%; animation: ep-roda .7s linear infinite; }
@keyframes ep-roda { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  .ep-esqueleto { animation: none } .ep-roda { animation-duration: 2.4s }
}

/* Medidor */
.ep-medidor { height: 6px; border-radius: var(--ep-raio-pilula);
  background: var(--ep-fundo-suave); overflow: hidden; }
.ep-medidor > span { display: block; height: 100%; border-radius: inherit;
  background: var(--ep-acento); transition: width var(--ep-transicao); }

/* ── 8.5 · ESTADOS QUE FALTAVAM ───────────────────────────────────────────────────────────────
   Acrescentado a 27/08/2026, depois de medir o ficheiro inteiro: havia ZERO seletores `:active`
   em todo o sistema. Nenhum controlo do site — nem o botão de comprar — dava sinal de ter sido
   premido. Num telemóvel, onde não existe `:hover`, o pressionar É o único retorno que a pessoa
   tem entre tocar e a página responder; sem ele o toque parece não ter funcionado, e a pessoa
   toca outra vez.

   A COR DO PRESSIONADO NÃO É NOVA. `--ep-vermelho-grad-fundo` foi criada a 24/08 com o comentário
   «o mesmo, pressionado» e nunca chegou a ser ligada a um `:active` — está a ser usada como hover
   em conhecimento.css. Aqui ela passa a servir para o que foi nomeada. O sistema proíbe inventar
   um décimo quarto vermelho, e não foi preciso.

   O DESLOCAMENTO DE 1px é o que faz o estado funcionar em qualquer fundo, claro ou escuro, e em
   botão transparente onde a cor sozinha não mostraria nada. É metáfora física: o botão desce. */

.ep-botao:active:not([disabled]):not([aria-disabled="true"]),
.ep-botao-icone:active,
.ep-variante:active:not([disabled]),
.ep-pagina:active,
.ep-quantidade button:active:not([disabled]) { transform: translateY(1px); }

.ep-botao--principal:active:not([disabled]) { background: var(--ep-vermelho-grad-fundo); }
.ep-botao--secundario:active:not([disabled]) { background: var(--ep-fundo-suave); border-color: var(--ep-tinta-mudo); }
.ep-botao--discreto:active:not([disabled])   { background: var(--ep-acento-fundo); }
.ep-botao-icone:active                       { background: var(--ep-acento-fundo); color: var(--ep-acento-tinta); }

/* Quem pediu menos movimento não recebe o deslocamento — recebe a cor, que basta como retorno. */
@media (prefers-reduced-motion: reduce) {
  .ep-botao:active, .ep-botao-icone:active, .ep-variante:active,
  .ep-pagina:active, .ep-quantidade button:active { transform: none; }
}

/* ── Botão a trabalhar ────────────────────────────────────────────────────────────────────────
   Sem isto, quem toca em «Pagar» não sabe se o toque entrou, e toca de novo — que num checkout
   significa pedido duplicado. A LARGURA É PRESERVADA de propósito: trocar o texto por «...» faz
   o botão encolher e a página saltar debaixo do dedo. */
.ep-botao[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.ep-botao[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: var(--ep-borda-media) solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: ep-roda .7s linear infinite;
}
.ep-botao--secundario[aria-busy="true"]::after,
.ep-botao--discreto[aria-busy="true"]::after {
  border-color: var(--ep-borda); border-top-color: var(--ep-acento);
}
@media (prefers-reduced-motion: reduce) {
  .ep-botao[aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* ── Campo: os estados que faltavam ───────────────────────────────────────────────────────────
   Existia só o normal, o foco e o inválido. Faltavam quatro, e cada um responde a uma pergunta
   que o cliente faz sem dizer: «dá para escrever aqui?» (desabilitado), «isto é só leitura?»
   (só-leitura), «ficou certo?» (válido) e «este campo é clicável?» (rato por cima). */
.ep-campo:hover:not([disabled]):not([readonly]) { border-color: var(--ep-tinta-tenue); }
.ep-campo[disabled] {
  opacity: var(--ep-op-desligado); cursor: not-allowed;
  background: var(--ep-fundo-suave); border-color: var(--ep-borda);
}
.ep-campo[readonly] { background: var(--ep-fundo-suave); color: var(--ep-tinta-suave); cursor: default; }
.ep-campo[aria-invalid="true"]:focus-visible { outline-color: var(--ep-erro); }
.ep-campo[data-ep-valido="true"] { border-color: var(--ep-sucesso); }
.ep-campo-ajuda { margin-top: var(--ep-e-1); font-size: var(--ep-t-13); color: var(--ep-tinta-mudo); }
.ep-campo-ok    { margin-top: var(--ep-e-1); font-size: var(--ep-t-13); color: var(--ep-sucesso); font-weight: var(--ep-peso-semi); }

/* ── Caixa de seleção e escolha única ─────────────────────────────────────────────────────────
   Não existiam como componente. O site tem consentimento de marketing, filtros e escolha de
   forma de pagamento — três lugares onde a pessoa precisa de ver, sem dúvida, o que escolheu.
   O quadrado tem 24px, mas a área tocável é a do rótulo inteiro, que é o que respeita os 44px. */
.ep-escolha { display: flex; align-items: flex-start; gap: var(--ep-e-2);
  min-height: var(--ep-toque); padding: var(--ep-e-1) 0; cursor: pointer; }
.ep-escolha input[type="checkbox"], .ep-escolha input[type="radio"] {
  flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--ep-acento); cursor: pointer;
}
.ep-escolha input:disabled, .ep-escolha:has(input:disabled) { opacity: var(--ep-op-desligado); cursor: not-allowed; }
.ep-escolha-texto { font-size: var(--ep-t-14); line-height: var(--ep-lh-corpo); color: var(--ep-tinta-suave); }
.ep-escolha:has(input[aria-invalid="true"]) .ep-escolha-texto { color: var(--ep-erro); }

/* ── Selector ─────────────────────────────────────────────────────────────────────────────────
   Herda tudo de `.ep-campo` e só acrescenta a seta e o espaço para ela. A seta é desenhada em
   CSS e não em imagem: assim muda de cor com o tema, o que uma imagem não faz. */
.ep-selector {
  appearance: none; padding-right: var(--ep-e-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ep-selector[disabled] { cursor: not-allowed; }

/* ── Foco onde não havia ──────────────────────────────────────────────────────────────────────
   Item de menu, aba, página, variante, cartão de produto e botões de quantidade eram alcançáveis
   por teclado e não mostravam onde o teclado estava. Para quem não usa rato, isso é navegar às
   cegas. Reaproveita exactamente o mesmo anel do resto do sistema. */
.ep-menu-item:focus-visible, .ep-aba:focus-visible, .ep-pagina:focus-visible,
.ep-variante:focus-visible, .ep-produto:focus-visible, .ep-produto a:focus-visible,
.ep-escolha input:focus-visible, .ep-selector:focus-visible, .ep-quantidade button:focus-visible {
  outline: var(--ep-borda-media) solid var(--ep-foco);
  outline-offset: 2px;
  border-radius: var(--ep-raio-curto);
}
.ep-menu-item[aria-disabled="true"], .ep-aba[aria-disabled="true"], .ep-pagina[aria-disabled="true"] {
  opacity: var(--ep-op-desligado); cursor: not-allowed; pointer-events: none;
}
.ep-aba:hover:not([aria-selected="true"]) { color: var(--ep-tinta); }
.ep-pagina:hover:not([aria-current="page"]) { background: var(--ep-fundo-suave); }
.ep-quantidade button[disabled] { opacity: var(--ep-op-desligado); cursor: not-allowed; }

/* ── Esqueletos por superfície ────────────────────────────────────────────────────────────────
   Existia só `.ep-esqueleto`, um retângulo genérico. Um retângulo genérico no lugar de um cartão
   de produto não reserva a mesma altura — e quando o conteúdo chega, a página salta. Estes três
   nascem com a proporção da coisa que substituem. */
.ep-esq-linha { height: 1em; margin-bottom: var(--ep-e-2); }
.ep-esq-linha:last-child { width: 60%; }
.ep-esq-produto { display: flex; flex-direction: column; gap: var(--ep-e-3); }
.ep-esq-produto > .ep-esqueleto:first-child { aspect-ratio: 1 / 1; width: 100%; }
.ep-esq-linha, .ep-esq-produto > .ep-esqueleto { border-radius: var(--ep-raio-curto);
  background: linear-gradient(90deg, var(--ep-fundo-suave) 25%, var(--ep-borda) 37%, var(--ep-fundo-suave) 63%);
  background-size: 400% 100%; animation: ep-brilho var(--ep-dur-ambiente) ease-in-out infinite; }
[aria-busy="true"] > .ep-esqueleto, [aria-busy="true"] .ep-esq-linha { pointer-events: none; }

/* ── Diálogo: entrada e saída ─────────────────────────────────────────────────────────────────
   Aparecer de repente lê-se como falha de carregamento. A entrada usa a curva de ENTRADA, que
   trava no fim; a cortina só esmaece, porque um fundo que se move rouba a atenção do conteúdo. */
.ep-dialogo[open], .ep-dialogo-fundo[data-aberto="true"] { animation: ep-entra var(--ep-dur-lenta) var(--ep-curva-entra) both; }
@keyframes ep-entra { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ep-dialogo[open], .ep-dialogo-fundo[data-aberto="true"] { animation: none; }
}

/* ── 9 · MARCA ────────────────────────────────────────────────────────────────────────────────
   A marca é item visual do sistema, não um ficheiro solto que cada superfície escolhe à sorte.

   O QUE HAVIA ANTES DESTA SECÇÃO
   Cinco ficheiros de marca sem regra de uso, e três defeitos concretos:
     · o logótipo completo em uso (eagle-pharma-logo.png) NÃO tem canal alfa — traz fundo branco
       cozido, portanto mostra uma caixa branca em qualquer superfície que não seja branca;
     · a versão recortada COM transparência (eagle-pharma-logo-cutout.png) estava no repositório
       sem ser usada em ficheiro nenhum;
     · 1,12 MB num único logótipo — 5,6x o teto de 200 KB. O conjunto derivado inteiro, com todos
       os tamanhos que o site precisa, pesa 498 KB.

   AS DUAS FORMAS DA MARCA
     · MARCA  — águia e molécula, sem texto. É a forma de uso corrente: cabeçalho, favicon,
                app, avatar, qualquer sítio pequeno ou onde o nome já esteja escrito ao lado.
     · LOGÓTIPO — marca + «EAGLE PHARMA» + assinatura. É a forma de apresentação: gate, primeira
                dobra, documentos, impressão. Nunca em tamanho pequeno: o texto perde-se.

   REGRA DE ESCOLHA: se o nome «Eagle Pharma» já está escrito ao lado, usa-se a MARCA. Repetir o
   nome no logótipo e outra vez em texto é dizer a mesma coisa duas vezes. */

.ep-marca, .ep-logotipo { display: block; height: auto; user-select: none; }

/* Marca — tamanhos servidos, um ficheiro por escala, sem pedir 928px para mostrar 40 */
.ep-marca { width: var(--ep-marca-largura, 40px); }
.ep-marca--pequena { --ep-marca-largura: 32px; }
.ep-marca--media   { --ep-marca-largura: 48px; }
.ep-marca--grande  { --ep-marca-largura: 96px; }

/* Logótipo — piso de 180px de largura. Abaixo disto a assinatura fica ilegível e deve usar-se
   a marca em vez do logótipo. */
.ep-logotipo { width: clamp(180px, 26vw, 320px); }
.ep-logotipo--grande { width: clamp(240px, 36vw, 480px); }

/* Espaço de respeito — a marca precisa de ar à volta. A medida é meia altura da própria marca,
   e nada entra nessa faixa: nem texto, nem borda, nem outro logótipo. */
.ep-marca-caixa, .ep-logotipo-caixa { display: inline-flex; align-items: center; }
.ep-marca-caixa   { padding: calc(var(--ep-marca-largura, 40px) * .25); }
.ep-logotipo-caixa{ padding: var(--ep-e-4); }

/* Sobre superfície escura — a marca tem contraste próprio e NÃO se inverte nem se recolore.
   O que muda é o que está à volta dela. A sombra separa-a do fundo sem lhe tocar. */
[data-ep-tema="escuro"] .ep-marca, .ep-escuro .ep-marca,
[data-ep-tema="escuro"] .ep-logotipo, .ep-escuro .ep-logotipo {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45));
}

/* Bloqueio de mau uso — estas regras existem para que o erro seja visível em revisão de código,
   não para serem contornadas. */
.ep-marca[style*="rotate"], .ep-logotipo[style*="rotate"],
.ep-marca[style*="skew"],   .ep-logotipo[style*="skew"] { outline: 3px dashed var(--ep-erro); }

/* ── Telefone com seletor de país ────────────────────────────────────────────────────────
   O seletor é injetado por assets/telefone-pais.js ANTES do input, dentro desta caixa. O
   input mantém o número COMPLETO (com o código do país): os três formulários que usam isto
   leem o valor de maneiras diferentes — POST nativo pelo name, leitura por id, e o React do
   bundle a escutar o change do próprio input — e um campo escondido a espelhar o valor só
   serviria aos dois primeiros. */
.ep-tel-caixa { display: flex; gap: 8px; align-items: stretch; width: 100%; }
.ep-tel-caixa > select.ep-tel-pais {
  flex: 0 0 auto; max-width: 42%; min-width: 0;
  font: inherit; color: inherit; background: inherit;
  border: 1px solid var(--ep-borda, #C6CCD1); border-radius: var(--ep-raio, 9px);
  padding: 0 8px; min-height: var(--ep-toque, 44px); cursor: pointer;
}
.ep-tel-caixa > input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) {
  /* Em tela estreita o nome do país e o número não cabem lado a lado sem espremer os dois. */
  .ep-tel-caixa { flex-wrap: wrap; }
  .ep-tel-caixa > select.ep-tel-pais { max-width: 100%; flex: 1 1 100%; }
}