/* =========================================================================
   DELTAS PREMIUM aprovados. Escopo: html[data-px="premium"].
   O CSS e o JS nativos do selo permanecem intactos.
   Regras da casa mantidas: CLS 0 (dimensões explícitas), assets locais, abertura nativa intocada (decisão do dono de 21/09/2026: toca sempre),
   checkbox nativo com accent-color, animação só em transform/opacity.
   ========================================================================= */
:root{
  --px-painel-a:#EAF1F8; --px-painel-b:#E0EAF5; --px-painel-c:#D4E2F1;
  --px-painel-brilho:rgba(255,255,255,.55);
  --px-halo:radial-gradient(closest-side,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  --px-ouro:#A07A37;--px-ouro-texto:#76551C;--px-luz-telas:rgba(255,255,255,.9);--px-cometa-forja:#E0620E;--px-cometa-nucleo:#FFF4DE;--px-cometa-forja-luz:rgba(255,136,34,.62);--px-cometa-forja-halo:rgba(255,96,10,.2);--px-cometa-ouro:#B8862F;--px-cometa-ouro-nucleo:rgba(255,236,190,.9);--px-cometa-ouro-luz:rgba(236,190,90,.55);--px-cometa-nevoa-letra:rgba(255,255,255,.92);--px-cometa-nevoa:rgba(255,255,255,.98);--px-cometa-nevoa-halo:rgba(255,255,255,.75);--px-cometa-nevoa-tinta:rgba(10,37,64,.2);--px-nevoa-1:rgba(255,252,244,.95);--px-nevoa-2:rgba(255,252,246,.82);--px-nevoa-3:rgba(255,253,248,.68);--px-nevoa-4:rgba(255,255,252,.54);--px-nevoa-5:rgba(255,255,255,.4);--px-nevoa-6:rgba(255,255,255,.27);--px-nevoa-7:rgba(255,255,255,.15);--px-bruma:rgba(255,255,255,.96);--px-bruma-tinta:rgba(10,37,64,.24); --px-aviso:#7A4A00; --px-aviso-fundo:#FFF4DC; --px-aviso-borda:#E8C98A;
  --px-divisa:#D3DDE9;
  --px-sombra-cartao:0 34px 64px -36px rgba(10,37,64,.55),0 2px 6px rgba(10,37,64,.06);

  /* céu da abertura no tema claro: pontos de luz dourada */
  --px-estrela-nucleo:#FFF6DA; --px-estrela-ouro:#B8862F; --px-estrela-halo:rgba(184,134,47,.22);
  --px-grafia:rgba(1,46,91,.09);
}

:root[data-theme="dark"]{
  --px-painel-a:#0D1E36; --px-painel-b:#0B1930; --px-painel-c:#09152A;
  --px-painel-brilho:rgba(60,170,211,.14);
  --px-halo:radial-gradient(closest-side,rgba(23,242,252,.14) 0%,rgba(23,242,252,.05) 55%,rgba(23,242,252,0) 100%);
  --px-ouro:#F5CF6A;--px-ouro-texto:var(--px-ouro);--px-luz-telas:rgba(140,210,245,.16);--px-cometa-forja:#FF8A2A;--px-cometa-nucleo:#FFFFFF;--px-cometa-forja-luz:rgba(255,140,40,.9);--px-cometa-forja-halo:rgba(255,90,10,.45);--px-cometa-ouro:#F5CF6A;--px-cometa-ouro-nucleo:rgba(255,244,210,.9);--px-cometa-ouro-luz:rgba(245,207,106,.6);--px-cometa-nevoa-letra:rgba(236,246,255,.9);--px-cometa-nevoa:rgba(240,248,255,.95);--px-cometa-nevoa-halo:rgba(205,232,255,.6);--px-cometa-nevoa-tinta:rgba(95,192,227,.25);--px-nevoa-1:rgba(236,246,255,.5);--px-nevoa-2:rgba(230,243,255,.42);--px-nevoa-3:rgba(224,240,255,.34);--px-nevoa-4:rgba(218,236,255,.26);--px-nevoa-5:rgba(212,232,255,.19);--px-nevoa-6:rgba(206,228,255,.12);--px-nevoa-7:rgba(200,224,255,.07);--px-bruma:rgba(214,240,255,.78);--px-bruma-tinta:rgba(95,192,227,.42); --px-aviso:#FFD98A; --px-aviso-fundo:rgba(245,207,106,.12); --px-aviso-borda:rgba(245,207,106,.45);
  --px-divisa:#1C2E45;
  --px-sombra-cartao:0 34px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(95,192,227,.06);
  --px-grafia:rgba(245,207,106,.09);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --px-painel-a:#0D1E36; --px-painel-b:#0B1930; --px-painel-c:#09152A;
    --px-painel-brilho:rgba(60,170,211,.14);
    --px-halo:radial-gradient(closest-side,rgba(23,242,252,.14) 0%,rgba(23,242,252,.05) 55%,rgba(23,242,252,0) 100%);
    --px-ouro:#F5CF6A;--px-ouro-texto:var(--px-ouro);--px-luz-telas:rgba(140,210,245,.16);--px-cometa-forja:#FF8A2A;--px-cometa-nucleo:#FFFFFF;--px-cometa-forja-luz:rgba(255,140,40,.9);--px-cometa-forja-halo:rgba(255,90,10,.45);--px-cometa-ouro:#F5CF6A;--px-cometa-ouro-nucleo:rgba(255,244,210,.9);--px-cometa-ouro-luz:rgba(245,207,106,.6);--px-cometa-nevoa-letra:rgba(236,246,255,.9);--px-cometa-nevoa:rgba(240,248,255,.95);--px-cometa-nevoa-halo:rgba(205,232,255,.6);--px-cometa-nevoa-tinta:rgba(95,192,227,.25);--px-nevoa-1:rgba(236,246,255,.5);--px-nevoa-2:rgba(230,243,255,.42);--px-nevoa-3:rgba(224,240,255,.34);--px-nevoa-4:rgba(218,236,255,.26);--px-nevoa-5:rgba(212,232,255,.19);--px-nevoa-6:rgba(206,228,255,.12);--px-nevoa-7:rgba(200,224,255,.07);--px-bruma:rgba(214,240,255,.78);--px-bruma-tinta:rgba(95,192,227,.42); --px-aviso:#FFD98A; --px-aviso-fundo:rgba(245,207,106,.12); --px-aviso-borda:rgba(245,207,106,.45);
    --px-divisa:#1C2E45;
    --px-sombra-cartao:0 34px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(95,192,227,.06);
    --px-grafia:rgba(245,207,106,.09);
  }
}

/* ---- composição ----------------------------------------------------------
   O painel da marca é contexto próprio (z-index 2): durante o voo da abertura
   o selo passa inteiro POR CIMA do cartão, como no nativo (selo-cofre.css:172). */
[data-px="premium"] .px-painel{
  position:relative;isolation:isolate;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
}
[data-px="premium"] .palco{z-index:2}
[data-px="premium"] .px-coluna{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%}

@media (min-width:900px){
  /* em 900-1039 o nativo empilharia e o botão cairia abaixo da dobra */
  [data-px="premium"] .tela{
    display:grid;grid-template-columns:minmax(0,1.08fr) minmax(480px,.92fr);
    align-items:stretch;gap:0;padding:0;
  }

  [data-px="premium"] .px-painel{
    padding:40px clamp(32px,5vw,80px);
    background:
      radial-gradient(56% 44% at 50% 34%,var(--px-painel-brilho),transparent 72%),
      linear-gradient(158deg,var(--px-painel-a) 0%,var(--px-painel-b) 58%,var(--px-painel-c) 100%);
    border-right:1px solid var(--px-divisa);
  }

  /* coluna neutra, com brilho próprio centrado no cartão (painel = palco tingido) */
  [data-px="premium"] .px-coluna{
    padding:32px clamp(28px,4vw,64px);
    background:radial-gradient(60% 45% at 50% 45%,var(--fundo-brilho),transparent 72%),var(--fundo);
  }
}

/* telas grandes: o selo cresce na mesma razão (dimensões explícitas: CLS 0) */
@media (min-width:1600px) and (min-height:900px){
  [data-px="premium"] .palco{width:340px;height:377px}
  [data-px="premium"] .wordmark{width:494px;height:59px}
}

/* ---- REFINO DO SÍMBOLO (aditivo). A abertura nativa (voo, impacto,
   revelação, feixe, respiração e tilt do selo-cofre.js) fica INTACTA. ------ */

/* halo de luz atrás do selo: no claro é luz branca (o miolo da marca continua
   neutro); no escuro, o ciano da marca. Nasce no impacto (JS, mesmo relógio). */
[data-px="premium"] .palco::before{
  content:"";position:absolute;left:-22%;top:-14%;width:144%;height:118%;z-index:-1;pointer-events:none;border-radius:50%;
  background:var(--px-halo);
}

/* R1 · feixe metálico: à frente dos laços e do telhado (Z 16 px, mesma
   compensação de escala das .cam), com bordas suaves. As propriedades
   individuais translate/scale se compõem com o transform animado pelo JS
   nativo: nenhum quadro-chave muda. */
[data-px="premium"] .faixa{
  translate:0 0 16px;scale:.984;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}
html[data-px="premium"]{--brilho-feixe:rgba(214,234,255,.5)}
:root[data-theme="dark"][data-px="premium"]{--brilho-feixe:rgba(225,245,255,.72)}

/* grafia de fundo: roseta de guilhoché (a gravura das cédulas e títulos),
   concêntrica ao anel. Simbologia discreta nos números: o círculo interno toca
   o ápice do telhado e o limite do campo está a phi dele; 21 lóbulos x 8 fios
   (Fibonacci; 21 = 3x7, a simetria tripla da triquetra). ~5% em repouso.
   Na iluminação gira meio lóbulo e "trava", como o segredo de um cofre (JS). */
.px-grafia{
  position:absolute;left:50%;top:52.7%;width:189%;aspect-ratio:1;z-index:-1;
  translate:-50% -50%;pointer-events:none;color:var(--px-grafia);opacity:0;
}
.px-grafia svg{display:block;width:100%;height:100%;overflow:visible}

/* celular: a roseta se dissolve antes do cartão (o painel pinta por cima da coluna) */
@media (max-width:899.98px){ .px-grafia{-webkit-mask-image:linear-gradient(#000 70%,transparent 90%);mask-image:linear-gradient(#000 70%,transparent 90%)} }
html[data-px-textura="sem"] .px-grafia{display:none}

/* céu da abertura: Leão e Câncer acendem junto com a escada dourada e se
   apagam com ela. Invisível em repouso (estado final = CSS). */
.px-ceu{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:layout paint}

@media (max-width:899.98px){ .px-ceu{left:50%;right:auto;width:100vw;margin-left:-50vw} }
.px-ceu__faixa{position:absolute;inset:0;opacity:0}

.px-e{position:absolute;left:0;top:0;pointer-events:none;border-radius:50%;

  /* escuro: céu noturno (núcleo branco, cor B-V, brilho curto e redondo) */
  background:radial-gradient(circle closest-side,#FFFFFF 0%,#FFFFFF 16%,var(--c) 30%,color-mix(in srgb,var(--c) 26%,transparent) 44%,transparent 100%)}

/* claro: pontos de LUZ dourada (a mesma luz da escada), tamanho pela magnitude;
   tinta escura sobre o painel claro lia como poeira na tela. Sem raios. */
:root:not([data-theme="dark"]) .px-e{background:radial-gradient(circle closest-side,var(--px-estrela-nucleo) 0 14%,var(--px-estrela-ouro) 26% 40%,var(--px-estrela-halo) 52%,transparent 100%)}

/* Praesepe: o brilho difuso do aglomerado (as estrelas dele vêm por cima) */
.px-e--aglom{background:radial-gradient(circle closest-side,color-mix(in srgb,var(--c) 24%,transparent) 0%,transparent 100%)}
:root:not([data-theme="dark"]) .px-e--aglom{background:radial-gradient(circle closest-side,var(--px-estrela-halo) 0%,transparent 100%)}

/* ---- lema do painel (ou texto comercial em reserva) ---------------------- */

/* caixa de altura fixa e filhos esticados: a troca de fonte não move nada (CLS 0) */
.px-proposta{width:min(520px,100%);text-align:center;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;block-size:var(--px-lema-h,200px)}
.px-ornato{display:block;width:148px;height:14px;margin:0 auto 14px;color:var(--px-ouro);overflow:visible}

/* repouso = forma atual (linhas com vão, pontos e estrela); o trecho do meio só existe na "linha contínua" */
.px-orn-meio{opacity:0}
.px-orn-centro{transform-box:fill-box;transform-origin:50% 50%}
.px-orn-fx{position:absolute;left:50%;top:0;width:148px;height:14px;margin-left:-74px;pointer-events:none;color:var(--px-ouro)}
.px-orn-fx>span{position:absolute;opacity:0}
.px-orn-linha{left:2px;top:6.5px;width:144px;height:1px;background:currentColor;border-radius:1px}

.px-orn-grego{left:0;right:0;top:50%;margin:-.575em auto 0;width:max-content;line-height:1.15;white-space:nowrap;
  font-size:.84rem;font-weight:650;letter-spacing:.2em;color:var(--px-ouro-texto)}
.px-orn-brasa,.px-orn-onda,.px-orn-onda2{left:50%;top:50%;border-radius:50%}

/* ---- REFINO 3 · rastro de movimento: eco da palavra final na diagonal do cometa
   (filtro estático, só transform/opacity animam). O voo do selo não tem eco. ---- */
html.px-abre #palco,html.px-abre #wordmark{opacity:0}   /* guarda do 1º quadro (ver <head>) */
.px-cometa__eco .px-cl i{opacity:0!important}
.px-cometa__eco .px-cl--final .px-cl__o{opacity:1!important}
.px-cometa__eco{opacity:0;filter:blur(1.2px)}

/* ---- ENTRADA 2 · COMETA (só opacity/transform; camadas estáticas por letra) ---- */
.px-cometa{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:3;contain:layout paint}

@media (max-width:899.98px){ .px-cometa{display:none} }
.px-cometa__trilho{position:absolute;left:0;top:0;white-space:nowrap;font-size:1.45rem;line-height:1.3;font-weight:650;letter-spacing:.06em}
.px-cl{position:relative;display:inline-block}
.px-cl__base{visibility:hidden}
.px-cl i{position:absolute;left:0;top:0;font-style:normal;opacity:0}

/* 3 camadas por letra, empilhadas: ouro (base) · forja (sobre o ouro) · névoa (topo).
   Cruzando só a opacidade, as 5 posições do cometa ficam: forja → forja/ouro →
   OURO PLENO → ouro/névoa → névoa (as mistas são as cores intermediárias). */
.px-cl__o{color:var(--px-cometa-ouro);text-shadow:0 0 .1em var(--px-cometa-ouro-nucleo),0 0 .34em var(--px-cometa-ouro-luz)}
.px-cl__b{color:var(--px-cometa-forja);text-shadow:0 0 .08em var(--px-cometa-nucleo),0 0 .3em var(--px-cometa-forja-luz),0 0 .75em var(--px-cometa-forja-halo)}
.px-cl__p{color:var(--px-cometa-nevoa-letra);text-shadow:0 0 .06em var(--px-cometa-nevoa),0 0 .28em var(--px-cometa-nevoa),0 0 .7em var(--px-cometa-nevoa-halo),0 0 .14em var(--px-cometa-nevoa-tinta)}

/* cabeça: clarão âmbar sobre a letra que nasce (a luz que rasga a tela) */
.px-cometa__luz{position:absolute;left:0;top:0;width:84px;height:64px;opacity:0;
  background:radial-gradient(closest-side,var(--px-cometa-nucleo) 0%,var(--px-cometa-forja-luz) 30%,var(--px-cometa-forja-halo) 58%,transparent 100%)}

/* rastro: névoa brilhante que nasce na altura do texto, onde as letras viram fumaça,
   e afina e esmaece à medida que se afasta da cabeça (elipses estáticas) */
.px-cometa__cauda{position:absolute;left:0;top:0;width:460px;height:48px;opacity:0;
  background:
    radial-gradient(ellipse 8% 48% at 95% 50%,var(--px-nevoa-1) 0%,transparent 100%),
    radial-gradient(ellipse 11% 42% at 85% 50%,var(--px-nevoa-2) 0%,transparent 100%),
    radial-gradient(ellipse 13% 35% at 73% 50%,var(--px-nevoa-3) 0%,transparent 100%),
    radial-gradient(ellipse 15% 28% at 59% 50%,var(--px-nevoa-4) 0%,transparent 100%),
    radial-gradient(ellipse 16% 21% at 44% 50%,var(--px-nevoa-5) 0%,transparent 100%),
    radial-gradient(ellipse 16% 14% at 29% 50%,var(--px-nevoa-6) 0%,transparent 100%),
    radial-gradient(ellipse 16% 8% at 14% 50%,var(--px-nevoa-7) 0%,transparent 100%)}

.px-orn-brasa{width:120px;height:52px;margin:-26px 0 0 -60px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ouro-vivo) 80%,transparent) 0%,color-mix(in srgb,var(--ouro-brasa) 40%,transparent) 45%,transparent 100%)}
.px-orn-onda{width:64px;height:64px;margin:-32px 0 0 -32px;background:radial-gradient(circle,transparent 54%,var(--ouro-brasa) 67%,transparent 76%)}
.px-orn-onda2{width:44px;height:44px;margin:-22px 0 0 -22px;background:radial-gradient(circle,transparent 58%,var(--ouro-vivo) 70%,transparent 79%)}

/* 6 telas empilhadas na mesma caixa (só opacity anima); a frase final fica logo
   abaixo do ornato, sob a logo. Tudo com altura fixa: a troca de fonte não move nada. */
.px-lema-bloco{margin:0;display:flex;flex-direction:column;align-items:stretch;flex:1 1 auto;min-block-size:0}
.px-telas{position:relative;flex:1 1 auto;min-block-size:0}
.px-tela{position:absolute;inset:0;transform-origin:50% 45%}
.px-tela__cam{position:absolute;inset:0;opacity:0;display:flex;flex-direction:column;align-items:center;text-align:center}

/* bruma: a mesma frase feita só de luz turva (text-shadow ESTÁTICO; anima apenas a opacity):
   as palavras condensam dela na entrada e voltam a ela na saída, como matéria do fundo */
.px-tela__bruma,.px-tela__bruma *{color:transparent!important;text-shadow:0 0 .22em var(--px-bruma-tinta),0 0 .35em var(--px-bruma),0 0 .8em var(--px-bruma),0 0 1.5em var(--px-bruma)}

/* clarão difuso atrás da frase só nas transições (a luz de onde elas vêm e para onde voltam) */
.px-telas__luz{position:absolute;inset:-14% -10% -8% -10%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,var(--px-luz-telas) 0%,color-mix(in srgb,var(--px-luz-telas) 45%,transparent) 55%,transparent 100%)}
.px-tela p{margin:0;width:100%;display:flex;align-items:center;justify-content:center}
.px-tela p>span{max-width:100%;text-wrap:balance}

/* cada linha tem altura fixa (em lh): se a fonte chegar tarde e o texto quebrar diferente, nada se move */
.px-tela-intro{block-size:2lh}.px-tela-orig{block-size:1lh}.px-tela-trad{block-size:2lh}.px-tela-fonte{block-size:2lh}
.px-tela-intro{font-size:.98rem;line-height:1.35;font-style:italic;color:var(--texto-suave);text-wrap:balance;margin-bottom:10px!important}

/* versaletes por font-variant (o texto do DOM continua em caixa normal: leitores de tela não soletram) */
.px-tela-orig{font-size:.9rem;line-height:1.15;font-weight:650;letter-spacing:.16em;font-variant-caps:all-small-caps;color:var(--px-ouro-texto);margin-bottom:6px!important}
.px-tela-orig:lang(grc){font-variant-caps:normal;font-size:.84rem;letter-spacing:.2em}
.px-tela-trad{font-size:1.12rem;line-height:1.35;font-weight:500;letter-spacing:-.012em;color:var(--texto);text-wrap:balance;margin-bottom:8px!important}
.px-tela-fonte{font-size:.76rem;line-height:1.35;color:var(--texto-suave);text-wrap:balance}
.px-tela-fonte cite{font-style:italic}

.px-final{position:absolute;left:0;right:0;top:0;margin:0;text-align:center;white-space:nowrap;
  font-size:1.32rem;line-height:1.4;font-weight:500;letter-spacing:-.012em;color:var(--texto);transform-origin:50% 0}
.px-lema-bloco{position:relative}
[data-px="premium"] .marca{position:relative}
.px-final{top:28px}

/* brilho: a MESMA técnica do feixe nativo (janela com rotate+translateX e cópia
   com o inverso, só transform), sincronizado ao feixe da logo pelo JS */
.px-luz{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;overflow:visible}

.px-luz__faixa{position:absolute;overflow:clip;opacity:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.px-luz__int{position:absolute;left:0;top:0;width:100%;height:100%}
.px-luz__copia{position:absolute;display:block;color:var(--brilho-feixe)}
.px-luz__copia *{fill:currentColor!important}
.px-luz__copia--txt{white-space:nowrap;text-align:center;font-size:1.32rem;line-height:1.4;font-weight:500;letter-spacing:-.012em}

/* escuro: texto e nome já são claros; a luz aparece como brilho (filtro estático, não animado) */
:root[data-theme="dark"] .px-luz__copia{color:#FFFFFF;filter:drop-shadow(0 0 5px rgba(150,225,255,.9)) drop-shadow(0 0 12px rgba(120,205,255,.55))}
.px-comercial{display:none}
html[data-px-lema="comercial"] .px-proposta{--px-lema-h:196px}
html[data-px-lema="comercial"] .px-lema-bloco{display:none}
html[data-px-lema="comercial"] .px-comercial{display:flex;flex-direction:column;align-items:stretch}
.px-kicker{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--foco)}
.px-comercial-frase{margin:0 0 16px;font-size:1.2rem;line-height:1.42;font-weight:500;color:var(--texto);text-wrap:balance}
.px-atributos{list-style:none;margin:0;padding:0;display:grid;gap:9px;text-align:left;justify-content:center}
.px-atributos li{display:flex;align-items:center;gap:10px;font-size:.93rem;color:var(--texto-suave)}
.px-atributos svg{flex:0 0 18px;width:18px;height:18px;color:var(--px-ouro)}

@media (max-width:899.98px){ [data-px="premium"] .px-proposta{display:none} }

@media (max-height:700px){
  [data-px="premium"] .px-proposta{--px-lema-h:124px}
  [data-px="premium"] .px-tela-intro{display:none}
  [data-px="premium"] .px-final{top:0}
  [data-px="premium"] .px-tela-trad{font-size:1.05rem}
  html[data-px-lema="comercial"][data-px="premium"] .px-proposta{--px-lema-h:70px}
  [data-px="premium"] .px-ornato,[data-px="premium"] .px-atributos{display:none}
  [data-px="premium"] .px-comercial-frase{margin:0;font-size:1.08rem}
}

@media (max-height:600px){
  [data-px="premium"] .px-proposta{--px-lema-h:84px}
  [data-px="premium"] .px-tela-fonte{display:none}
}

/* ---- cartão -------------------------------------------------------------- */
[data-px="premium"] .cartao{width:min(424px,100%);padding:34px 32px 22px;border-radius:20px;box-shadow:var(--px-sombra-cartao)}
[data-px="premium"] .cartao h1{margin:0 0 24px;font-size:1.62rem;line-height:1.25;font-weight:700;letter-spacing:-.022em;text-align:center}
[data-px="premium"] .campo{margin:0 0 16px}
[data-px="premium"] .campo label{font-size:.875rem;margin-bottom:7px}
.px-ctl{position:relative;display:block}
.px-ic{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--texto-sutil);pointer-events:none}
[data-px="premium"] .px-ctl input{height:50px;padding-left:44px;font-size:1rem;border-radius:12px}
[data-px="premium"] .px-ctl--senha input{padding-right:52px}

/* foco: um único anel (sem contorno duplo), vermelho quando inválido */
[data-px="premium"] .campo input:focus,
[data-px="premium"] .campo input[autofocus]:focus{outline:2px solid var(--foco);outline-offset:0;box-shadow:0 0 0 6px color-mix(in srgb,var(--foco) 14%,transparent)}
[data-px="premium"] .campo input[aria-invalid="true"]{border-color:var(--erro)}
[data-px="premium"] .campo input[aria-invalid="true"]:focus{outline-color:var(--erro);box-shadow:0 0 0 6px color-mix(in srgb,var(--erro) 14%,transparent)}

.px-olho{
  position:absolute;right:5px;top:50%;width:40px;height:40px;margin-top:-20px;
  display:grid;place-items:center;border:0;border-radius:9px;background:none;cursor:pointer;color:var(--texto-sutil);
}
.px-olho:hover{color:var(--texto);background:color-mix(in srgb,var(--foco) 9%,transparent)}
.px-olho svg{width:20px;height:20px}
.px-olho .px-olho-fechado{display:none}
.px-olho[aria-pressed="true"] .px-olho-aberto{display:none}
.px-olho[aria-pressed="true"] .px-olho-fechado{display:block}

/* Caps Lock: aviso visível no próprio campo (não depende de tooltip) */
.px-caps{
  display:flex;align-items:center;gap:7px;margin:8px 0 0;padding:6px 10px;border-radius:8px;
  font-size:.82rem;font-weight:600;color:var(--px-aviso);background:var(--px-aviso-fundo);border:1px solid var(--px-aviso-borda);
}
.px-caps[hidden]{display:none}
.px-caps svg{width:15px;height:15px;flex:0 0 15px}

/* navegador que preenche sozinho: sem o fundo azul do Chrome, cores do tema */
[data-px="premium"] .campo input:-webkit-autofill,
[data-px="premium"] .campo input:-webkit-autofill:hover{
  -webkit-box-shadow:0 0 0 1000px var(--superficie) inset;
  -webkit-text-fill-color:var(--texto);caret-color:var(--texto);
  transition:background-color 99999s ease-out 0s;
}

[data-px="premium"] .campo input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--superficie) inset,0 0 0 6px color-mix(in srgb,var(--foco) 14%,transparent);
  -webkit-text-fill-color:var(--texto);
}

/* "Esqueci minha senha" logo abaixo do campo, à direita: ordem visual = ordem do Tab */
[data-px="premium"] .px-campo-senha > #esqueci{display:block;width:11.5rem;margin:6px 0 0 auto;font-size:.84rem;text-align:right}
.px-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px}
[data-px="premium"] .px-linha .lembrar{margin:0}

.px-link{
  border:0;background:none;padding:4px 2px;cursor:pointer;border-radius:6px;
  font:inherit;font-size:.875rem;font-weight:650;color:var(--foco);
}
.px-link:hover{text-decoration:underline;text-underline-offset:3px}

[data-px="premium"] .entrar{
  height:52px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;font-size:1rem;
  box-shadow:0 14px 26px -16px color-mix(in srgb,var(--acao) 85%,transparent);
}
.px-seta{width:18px;height:18px;transition:transform .14s ease}
.entrar:hover .px-seta{transform:translateX(3px)}
.px-spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--acao-texto) 35%,transparent);border-top-color:var(--acao-texto);animation:px-gira .8s linear infinite}
[data-px="premium"] .entrar[aria-busy="true"]{cursor:progress}
.entrar[aria-busy="true"] .px-spin{display:inline-block}
.entrar[aria-busy="true"] .px-seta{display:none}
.entrar[aria-disabled="true"]{opacity:.62;cursor:not-allowed}

@keyframes px-gira{to{transform:rotate(360deg)}}
[data-px="premium"] .rodape{margin-top:22px;padding-top:14px;border-top:1px solid var(--borda-cartao)}

[data-px="premium"] .discreto{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--borda-cartao);font-size:.8rem;color:var(--texto-suave);
}
[data-px="premium"] .discreto:hover{text-decoration:none;color:var(--texto);border-color:var(--borda-controle)}

[data-px="premium"] .discreto::before{content:"";width:14px;height:14px;flex:0 0 14px;background:currentColor;
  -webkit-mask:var(--px-ic) center/contain no-repeat;mask:var(--px-ic) center/contain no-repeat}
[data-px="premium"] #rever{--px-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")}
[data-px="premium"] #tema{--px-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E")}
:root[data-theme="dark"][data-px="premium"] #tema{--px-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/svg%3E")}

/* ---- confiança (abaixo do cartão) --------------------------------------- */

/* largura e altura reservadas: com ou sem a Inter carregada, o cartão não se move */
.px-confianca{display:flex;flex-wrap:wrap;align-items:flex-start;place-content:flex-start center;gap:2px 12px;width:min(424px,100%);block-size:42px;
  font-size:.8rem;line-height:20px;color:var(--texto-sutil);text-align:center}

.px-confianca a{color:var(--texto-suave);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);border-radius:4px}
.px-confianca a:hover{color:var(--texto);text-decoration-color:currentColor}
.px-seguro{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--texto-suave)}
.px-seguro svg{width:14px;height:14px;color:var(--px-ouro)}
.px-sep{opacity:.5}
.px-versao{flex-basis:100%;font-size:.75rem;color:var(--texto-suave)}

/* ---- celular ------------------------------------------------------------- */
@media (max-width:559.98px){
  [data-px="premium"] .cartao{padding:28px 22px 18px}
  .px-confianca .px-sep{display:none}
  .px-confianca{gap:4px 16px}
}

/* toque: alvos de 44 px nos controles secundários (sem invadir o campo) */
@media (pointer:coarse){
  [data-px="premium"] .px-olho{width:44px;height:44px;margin-top:-22px;right:3px}
  [data-px="premium"] .px-ctl--senha input{padding-right:54px}
  [data-px="premium"] .px-campo-senha > #esqueci{min-height:44px;margin:0 -6px -6px auto;padding:0 6px}
  [data-px="premium"] .px-linha{margin:0 0 6px}
  [data-px="premium"] .lembrar{min-height:44px}
  [data-px="premium"] .lembrar label{padding:12px 0;flex:1}
  [data-px="premium"] .lembrar input{width:22px;height:22px}
  [data-px="premium"] .discreto{min-height:44px}
    .px-confianca{row-gap:0;block-size:auto;min-block-size:44px}
  .px-confianca a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
}

/* ---- telas baixas: o botão Entrar continua acima da dobra ---------------- */
@media (max-height:700px){
  [data-px="premium"] .cartao{padding:24px 26px 16px}
  [data-px="premium"] .cartao h1{font-size:1.35rem;margin-bottom:16px}
  [data-px="premium"] .px-ctl input{height:46px}
  [data-px="premium"] .entrar{height:48px}
  [data-px="premium"] .rodape{margin-top:14px;padding-top:10px}
}

@media (max-height:660px){
  [data-px="premium"] .cartao h1{margin-bottom:12px}
  [data-px="premium"] .px-ctl input{height:42px}
  [data-px="premium"] .entrar{height:44px}
  [data-px="premium"] .campo{margin-bottom:11px}
  [data-px="premium"] .px-linha{margin-bottom:14px}
  [data-px="premium"] .px-confianca>:not(.px-versao){display:none}
  [data-px="premium"] .px-confianca{block-size:18px}
}