/* Site DTF — what every page shares: the tokens, the base type, the stripe,
   header, category menu and footer. The Site (index.html) and the order page
   (portal.html) both load it before their own styles. */
:root{
 /* tokens do site institucional */
 --font-family-base:"Roboto",sans-serif; --font-family-title:"Inter",sans-serif;
 --font-color-base:#03060b; --font-color-title:#03060b;
 --font-weight-base:400; --font-weight-title:700; --font-weight-subtitle:600; --font-weight-button:600;
 --font-size-title:3rem; --font-size-subtitle:2rem; --font-size-button:1.4rem;
 --font-size-small:1.2rem; --font-size-base:1.4rem; --font-size-medium:1.6rem; --font-size-big:1.8rem;
 --line-height:1.5;
 --white:#fff; --black:#03060b;
 --gray-1:#f9f9f9; --gray-2:#c3c3c3; --gray-3:#707070; --gray-4:#363636;
 --primary-color:#ffa81a; --secondary-color:#ff7f0a;
 --white-transparency:#ffffffb3; --transition:all .4s ease;
 /* apelidos usados nesta pagina, mapeados nos tokens acima */
 --marinho:var(--black); --papel:var(--white); --cinza:var(--gray-1);
 --tx:var(--font-color-base); --fraco:var(--gray-3); --linha:#e6e6e6;
 --laranja:var(--primary-color); --laranja2:var(--secondary-color);
 --vermelho:#D94A28; --verde:#2E9E5B; --verde-ml:#00A650; --verde-claro:#57D68A;
 --sombra:0 1px 2px rgba(3,6,11,.05), 0 4px 14px rgba(3,6,11,.05);
 --sombra-alta:0 2px 6px rgba(3,6,11,.07), 0 10px 30px rgba(3,6,11,.11)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:62.5%}
body{background:var(--white);color:var(--font-color-base);font-family:var(--font-family-base);
 font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height);
 -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-family-title);color:var(--font-color-title);
 font-weight:var(--font-weight-title);letter-spacing:normal;line-height:1.15}
.w{max-width:1020px;margin:0 auto;padding:0 22px}

/* tarja rotativa, como no site */
.tarja{background:var(--laranja);color:#111;text-align:center;padding:8px 16px;
 font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em}
.tarja a{color:#111;text-decoration:none}

/* topo */
.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:60}
.topo .w{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}
.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap;flex:none}
.logo img{height:26px;width:auto;display:block}
.logotexto{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;color:var(--black);
 letter-spacing:-.03em}
.logotexto i{font-style:normal;color:var(--laranja)}
.acts{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:15px}
.acts a{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px}
.acts a:hover{color:var(--laranja)}

/* menu */
.menu{background:#fff;border-bottom:1px solid var(--linha)}
.menu .w{display:flex;gap:0;flex-wrap:wrap}
.mi{position:relative}
.mi>a{display:block;padding:13px 16px;font-family:"Inter",sans-serif;font-weight:600;
 font-size:15px;color:var(--tx);text-decoration:none;white-space:nowrap}
.mi:hover>a{color:var(--laranja)}
.mi.on>a{color:var(--laranja);box-shadow:inset 0 -2px 0 var(--laranja)}
.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linha);
 border-radius:0 0 9px 9px;min-width:224px;padding:7px 0;z-index:70;
 box-shadow:0 10px 26px rgba(0,0,0,.09)}
.mi:hover .sub,.mi:focus-within .sub{display:block}
.sub a{display:block;padding:8px 17px;font-size:15px;color:var(--fraco);text-decoration:none}
.sub a:hover{color:var(--laranja);background:var(--cinza)}
@media(max-width:820px){
  .menu .w{overflow-x:auto;flex-wrap:nowrap}
  .sub{display:none!important}
}

footer{background:#000;color:#8D9AB0;padding:26px 0 20px;font-size:15px}
.frow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px}
.fmarca{display:flex;align-items:center;gap:9px;font-family:"Inter",sans-serif;
 font-weight:700;font-size:15px;color:var(--laranja);letter-spacing:.06em;white-space:nowrap}
.fmarca img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
footer a{color:#8D9AB0;text-decoration:none}
footer a:hover{color:var(--laranja2)}
.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.fcont{margin-left:auto;text-align:right;font-size:15px;line-height:1.7}
@media(max-width:720px){.fcont{margin-left:0;text-align:left}}
.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;
 justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570}

/* The footer sits at the bottom of the screen even when the page is short. */
body{display:flex;flex-direction:column;min-height:100vh}
body>footer{margin-top:auto}
/* In a column, auto side margins shrink a box to its content: the page's
   centred blocks keep their full width, up to their max-width, as before. */
body>.w{width:100%}