/* hub.rufato.company · estilo único (tokens + seletor). Fontes locais, sem CDN. */
/* ==========================================================================
   Hubs Rufato Company · tokens base (iguais para TODAS as empresas)
   Mesmos nomes de variável do base.css em produção (/_hub/static).
   Por empresa muda só o theme-<empresa>.css: cores, logo e elemento.
   ========================================================================== */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/Poppins-Regular.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/Poppins-Medium.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/Poppins-SemiBold.woff2") format("woff2")}

:root{
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* escala tipográfica aprovada */
  --fs-h1:1.75rem;   --lh-h1:1.25;  /* 28px / 600 */
  --fs-h2:1.25rem;   --lh-h2:1.3;   /* 20px / 600 */
  --fs-h3:1rem;      --lh-h3:1.4;   /* 16px / 500 */
  --fs-body:.9375rem;--lh-body:1.5; /* 15px / 400 */
  --fs-label:.8125rem;--lh-label:1.4;/* 13px / 500 (label e botão) */
  --fs-small:.75rem; --lh-small:1.4;/* 12px / 400 (rodapé) */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  /* espaços e raios */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --r-1:8px; --r-2:10px; --r-3:14px;
  --w-form:370px;
  --h-campo:2.75rem;           /* 44px: campo e botão */

  /* neutros (iguais aos de produção) */
  --text:#1F2328; --text-2:#5E6066; --line:#D6D6D6; --line-soft:#EEEEEF; --card:#FFFFFF;

  /* REGRA DE PROPORÇÃO DA LOGO
     Toda logo é recortada justa na tinta (sem margem interna) e escalada de modo
     uniforme até ocupar a MESMA ÁREA de retângulo envolvente:
        altura = √(área ÷ razão)   largura = altura × razão
     razão = largura/altura do arquivo original (vem do theme). */
  --logo-area:14000;           /* px² no painel desktop  */
  --logo-area-m:7200;          /* px² na faixa mobile    */
  --logo-area-card:6400;       /* px² nos cards do hub.rufato.company */

  /* elemento gráfico da marca (marca d'água): MESMA ÁREA para todas (mesma regra da logo)
        altura = √(área ÷ razão)   largura = √(área × razão)
     e sangra a mesma fração do próprio tamanho para fora do canto (direita e base). */
  --mark-area:150000;          /* px² no painel desktop */
  --mark-area-m:30000;         /* px² na faixa mobile   */
  --mark-bleed:.08;            /* 8% da largura/altura do elemento fica fora do painel */

  /* cores de marca: placeholders, cada theme sobrescreve */
  --brand-primary:#0A0A0A; --brand-accent:#2346F5; --brand-surface:#F1F2F4;
  --on-primary:#FFFFFF; --on-accent:#FFFFFF;
  --mark-opacity:.07;

  /* derivados (iguais à produção) */
  --brand-primary-dark:color-mix(in srgb,var(--brand-primary) 82%,#000);
  --brand-accent-dark:color-mix(in srgb,var(--brand-accent) 82%,#000);
  --brand-accent-soft:color-mix(in srgb,var(--brand-accent) 22%,transparent);
  --on-primary-soft:color-mix(in srgb,var(--on-primary) 72%,transparent);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--card);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p{margin:0}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-semibold);letter-spacing:-.01em}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-semibold)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-medium)}
.label{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--fw-medium)}
.small{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-regular)}
a{color:inherit}

/* hub.rufato.company · seletor de empresas. Identidade Rufato Company:
   preto #0A0A0A, branco #FFFFFF, cobalto #2346F5, cinza #5E6066, gelo #F1F2F4.
   Tipografia: Poppins (padrão dos hubs). Cards reaproveitam os themes de cada empresa. */
:root{--rf-preto:#0A0A0A;--rf-branco:#FFFFFF;--rf-cobalto:#2346F5;--rf-cinza:#5E6066;--rf-gelo:#F1F2F4;
  --text:var(--rf-preto);--text-2:var(--rf-cinza)}
body{background:var(--rf-gelo)}
.seletor{min-height:100vh;display:flex;flex-direction:column;padding:var(--sp-6) var(--sp-8)}
.topo{display:flex;align-items:center;justify-content:space-between}
.topo .logo-rf{height:calc(sqrt(var(--logo-area-card) / 5.1025) * 1px);height:round(calc(sqrt(var(--logo-area-card) / 5.1025) * 1px),1px)}
.topo .small{color:var(--text-2)}
.conteudo{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:1120px;margin:0 auto;padding:var(--sp-7) 0}
.conteudo .sub{margin-top:var(--sp-2);color:var(--text-2)}
.cards{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);list-style:none;padding:0}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:var(--rf-branco);
  border:1px solid transparent;border-radius:var(--r-3);overflow:hidden;transition:border-color .15s,transform .15s}
.card:hover,.card:focus-visible{border-color:var(--rf-cobalto);outline:none}
.card .faixa{position:relative;overflow:hidden;height:168px;display:flex;align-items:center;justify-content:center;background:var(--c-primary)}
.card .faixa img{height:calc(sqrt(var(--logo-area-card) / var(--c-ratio)) * 1px);height:round(calc(sqrt(var(--logo-area-card) / var(--c-ratio)) * 1px),1px);width:auto}
.card .info{padding:var(--sp-5);display:grid;gap:var(--sp-1)}
.card .nome{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-medium)}
.card .info .small{color:var(--text-2)}
.card .ir{margin-top:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);color:var(--rf-cobalto)}
.card .ir svg{width:14px;height:14px;transition:transform .15s}
.card:hover .ir svg{transform:translateX(3px)}
.rodape-rf{display:flex;justify-content:flex-end;color:var(--text-2)}
.rodape-rf a{text-decoration:none}
@media (max-width:760px){
  .seletor{padding:var(--sp-5)}
  .topo .small{display:none}
  .conteudo{justify-content:flex-start;padding:var(--sp-7) 0 var(--sp-6)}
  .cards{grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-5)}
  .card{flex-direction:row;align-items:stretch}
  .card .faixa{width:140px;height:auto;min-height:92px;flex:none}
  .card .faixa img{height:calc(sqrt(1600 / var(--c-ratio)) * 1px);height:round(calc(sqrt(1600 / var(--c-ratio)) * 1px),1px)}
  .card .info{padding:var(--sp-3) var(--sp-4);align-content:center}
  .card .ir{display:none}
  .card .seta-m{display:flex}
  .rodape-rf{flex-direction:column;gap:var(--sp-1);text-align:center}
}
/* Cores e proporção de cada cartão (fora do HTML, para a CSP não precisar de unsafe-inline) */
.card-disbrafix{--c-primary:#012F61;--c-ratio:4.5866}
.card-webferragens{--c-primary:#4A4A4A;--c-ratio:6.1013}
.card-pro{--c-primary:#EDF3FE;--c-ratio:3.0602}
.card-brandmarket{--c-primary:#F5EFE0;--c-ratio:7.9067}
/* Domínios reais são longos; o card não pode passar da tela no mobile */
.cards>li,.card .info{min-width:0}
@media (max-width:760px){.card .faixa{width:120px}}