/* ============================================================
   Wobe — site institucional · tokens compartilhados
   Portado de "Wobe Redesign.html" (Claude Design), styles.css.
   ============================================================ */

/* ---- fontes da marca (woff2, subset original do kit) ---- */
@font-face{font-family:"Henderson Sans";src:url("fonts/henderson-sans-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Henderson Sans";src:url("fonts/henderson-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Henderson Sans";src:url("fonts/henderson-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Henderson Sans";src:url("fonts/henderson-sans-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("fonts/proxima-nova-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("fonts/proxima-nova-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("fonts/proxima-nova-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Barricada";src:url("fonts/barricada-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Cores institucionais */
  --marrom:#4a1811;
  --marrom-2:#2d0e08;
  --creme:#fff8d6;
  --creme-2:#fdf2c0;
  --creme-3:#f6e9b3;
  --offwhite:#faf6e8;

  /* Cores temáticas (uma por origem) */
  --br:#ffab00;
  --us:#003fbd;
  --fr:#d10000;
  --mx:#ef7d00;   /* México — o laranja da paleta temática */
  --en:#00d3d3;   /* Inglaterra — o ciano da paleta temática; texto em marrom */

  --display:"Henderson Sans",system-ui,sans-serif;
  --script:"Barricada","Henderson Sans",cursive;
  --body:"Proxima Nova",system-ui,-apple-system,sans-serif;

  /* Gutter lateral: 56px no artboard de 1280 → fluido até 20px no celular */
  --gut:clamp(20px,4.375vw,56px);
  /* Largura da faixa: o artboard inteiro (1280). Com --gut de 56px de cada
     lado, o conteúdo dá os mesmos 1168px do comp. */
  --wrap:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,figcaption{margin:0}
ul,ol{list-style:none;padding:0}
dl,dt,dd{padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
em{font-style:normal}

/* Foco visível — o design não previa, mas teclado precisa */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* Pula-navegação */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;font-size:14px;font-weight:700}
.skip:focus{left:8px;top:8px;background:var(--creme);color:var(--marrom)}

@media print{.skip{display:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}