/* bcx-portal v0.1.0 · CSS herdado do mockup aprovado v0.1.5 · skin Rosa V */
:root{
    --primary:#EC5424;
    --primary-dark:#c93f14;
    --ink:#14181d;
    --ink-soft:#4a5460;
    --line:#e7e3df;
    --paper:#ffffff;
    --sand:#f7f5f3;
    --sky:#0e73b8;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6}
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1200px;margin:0 auto;padding:0 20px}

  /* ---------- barra ponte da loja ---------- */
  .shopbar{background:var(--ink);color:#fff;font-size:13px}
  .shopbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px}
  .shopbar a{color:#fff;opacity:.92}
  .shopbar a strong{color:#ffb59d}
  .shopbar .right{display:flex;gap:18px}

  /* ---------- header ---------- */
  header.portal{background:#fff;border-bottom:3px solid var(--primary);position:sticky;top:0;z-index:50;box-shadow:0 1px 6px rgba(20,24,29,.06)}
  .masthead{display:flex;align-items:center;gap:14px;height:64px}
  .masthead img.logo{height:34px;width:auto}
  .masthead .portal-word{font-size:21px;font-weight:800;letter-spacing:3.5px;color:var(--ink);border-left:2px solid var(--line);padding-left:14px;line-height:1}
  .masthead .portal-word small{display:block;font-size:10px;font-weight:600;letter-spacing:2px;color:var(--primary);margin-top:3px}
  .masthead nav{margin-left:auto;display:flex;gap:22px;font-size:14.5px;font-weight:600}
  .masthead nav a{padding:6px 0;border-bottom:3px solid transparent}
  .masthead nav a:hover,.masthead nav a.on{color:var(--primary);border-color:var(--primary)}
  .masthead .icons{display:flex;gap:14px;margin-left:22px;color:var(--ink-soft)}
  .burger{display:none;margin-left:auto;font-size:24px;background:none;border:none;cursor:pointer;color:var(--ink)}

  /* ---------- ticker em alta ---------- */
  .ticker{background:var(--sand);border-bottom:1px solid var(--line);font-size:13.5px}
  .ticker .wrap{display:flex;align-items:center;gap:16px;height:38px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .ticker b{color:var(--primary);font-weight:800;letter-spacing:.5px;font-size:12px;text-transform:uppercase}
  .ticker a{color:var(--ink-soft)}
  .ticker a:hover{color:var(--primary)}
  .ticker span.dot{color:var(--line)}

  /* ---------- botão Rankings no menu (cara do portal) ---------- */
  .masthead nav a.nav-rankings{background:var(--primary);color:#fff;border-radius:999px;padding:7px 16px;border-bottom:none}
  .masthead nav a.nav-rankings:hover{background:var(--primary-dark);color:#fff}

  /* ---------- página de Rankings (estilo do portal; Insaness só como crédito) ---------- */
  .rk-head{padding:10px 0 6px}
  .rk-head h1{font-size:34px;font-weight:800;letter-spacing:-.4px}
  .rk-head p.sub{font-size:17px;color:var(--ink-soft);margin-top:8px;max-width:640px}
  .rk-byline{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--ink-soft)}
  .rk-byline .marca-prov{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;letter-spacing:2px;color:#9a751f;font-size:14px}
  .rk-tabelas{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:28px 0 10px}
  .rk-tab{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .rk-tab .titulo{background:var(--sand);padding:14px 20px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line)}
  .rk-tab .titulo h3{font-size:16px;font-weight:800}
  .rk-tab .titulo span{font-size:12px;color:var(--ink-soft)}
  .rk-tab table{width:100%;border-collapse:collapse;font-size:15px}
  .rk-tab td{padding:13px 20px;border-bottom:1px solid var(--line)}
  .rk-tab tr:last-child td{border-bottom:none}
  .rk-tab .pos{font-weight:800;font-size:17px;color:var(--primary);width:46px}
  .rk-tab .nome{font-weight:700}
  .rk-tab .sub{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400}
  .rk-tab .delta{font-weight:700;font-size:13px;text-align:right;width:60px}
  .rk-tab .delta.up{color:#0b8a3e}
  .rk-tab .delta.down{color:#c92214}
  .rk-tab .pe{padding:13px 20px;background:var(--sand);border-top:1px solid var(--line);font-size:13.5px;font-weight:700}
  .rk-tab .pe a{color:var(--primary)}
  .rk-nota{font-size:13px;color:var(--ink-soft);margin:16px 0 30px}
  @media(max-width:960px){.rk-tabelas{grid-template-columns:1fr}}

  /* ---------- strip de provas ---------- */
  .provas{border-bottom:1px solid var(--line);background:#fff}
  .provas .wrap{display:flex;gap:12px;padding:14px 20px;overflow-x:auto;scrollbar-width:none}
  .prova{min-width:196px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:#fff;flex-shrink:0}
  .prova .data{font-size:12px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.5px}
  .prova .nome{font-size:14px;font-weight:700;margin:2px 0;line-height:1.35}
  .prova .meta{font-size:12px;color:var(--ink-soft)}
  .prova.cta{background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--primary)}

  /* ---------- hero ---------- */
  .hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px;padding:26px 0}
  .manchete{position:relative;border-radius:14px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;cursor:pointer}
  .manchete img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .manchete .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,0) 34%,rgba(10,14,20,.86) 88%)}
  .manchete .txt{position:relative;padding:30px;color:#fff;max-width:640px}
  .tag{display:inline-block;background:var(--primary);color:#fff;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:5px;margin-bottom:12px}
  .manchete h1{font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-.4px}
  .manchete p{margin-top:10px;font-size:16px;opacity:.9}
  .destaques{display:flex;flex-direction:column;gap:22px}
  .destaque{position:relative;border-radius:14px;overflow:hidden;flex:1;min-height:209px;display:flex;align-items:flex-end;cursor:pointer}
  .destaque img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .destaque .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,0) 30%,rgba(10,14,20,.85) 92%)}
  .destaque .txt{position:relative;padding:18px;color:#fff}
  .destaque h3{font-size:18px;font-weight:800;line-height:1.3}
  .destaque .tag{font-size:10.5px;padding:3px 8px;margin-bottom:8px}

  /* ---------- corpo em 2 colunas ---------- */
  .cols{display:grid;grid-template-columns:1fr 320px;gap:36px;padding-bottom:20px}

  .franja{margin:26px 0 8px}
  .franja-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:18px}
  .franja-head h2{font-size:21px;font-weight:800;letter-spacing:-.2px;position:relative;padding-left:14px}
  .franja-head h2::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:5px;background:var(--primary);border-radius:3px}
  .franja-head a{font-size:13.5px;font-weight:700;color:var(--primary)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{cursor:pointer}
  .card .thumb{border-radius:10px;overflow:hidden;aspect-ratio:16/10;margin-bottom:10px;background:var(--sand)}
  .card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
  .card:hover .thumb img{transform:scale(1.045)}
  .card .kicker{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--primary)}
  .card h3{font-size:16.5px;font-weight:700;line-height:1.35;margin-top:4px}
  .card .meta{font-size:13px;color:var(--ink-soft);margin-top:6px}
  .card.destacada{grid-column:span 2}
  .card.destacada .thumb{aspect-ratio:16/8}
  .card.destacada h3{font-size:21px}

  /* lista compacta dentro de franja */
  .lista-mini{display:flex;flex-direction:column;gap:14px}
  .lista-mini .item{display:flex;gap:12px;cursor:pointer}
  .lista-mini .item img{width:104px;height:72px;object-fit:cover;border-radius:8px;flex-shrink:0}
  .lista-mini .item h4{font-size:14.5px;font-weight:700;line-height:1.35}
  .lista-mini .item .kicker{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--primary)}

  /* ---------- sidebar ---------- */
  aside .box{border:1px solid var(--line);border-radius:12px;padding:20px;margin:26px 0}
  aside .box h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;padding-left:12px;position:relative}
  aside .box h3::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:4px;background:var(--primary);border-radius:2px}
  .maislidas{counter-reset:n;display:flex;flex-direction:column;gap:14px}
  .maislidas a{display:flex;gap:12px;font-size:14.5px;font-weight:600;line-height:1.4;counter-increment:n;align-items:baseline}
  .maislidas a::before{content:counter(n);font-size:24px;font-weight:800;color:var(--line);min-width:26px;line-height:1}
  .maislidas a:hover{color:var(--primary)}
  .prod-card{text-align:center}
  .prod-card .rotulo{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
  .prod-card img{width:150px;margin:0 auto 12px;height:150px;object-fit:contain;background:var(--sand);border-radius:10px;padding:10px}
  .prod-card h4{font-size:16px;font-weight:800}
  .prod-card p{font-size:13.5px;color:var(--ink-soft);margin:6px 0 14px}
  .btn{display:inline-block;background:var(--primary);color:#fff;font-weight:700;font-size:14.5px;padding:11px 26px;border-radius:999px;border:none;cursor:pointer}
  .btn:hover{background:var(--primary-dark)}
  .btn.ghost{background:#fff;color:var(--primary);border:2px solid var(--primary)}
  .news-box{background:var(--ink);color:#fff;border:none!important}
  .news-box h3{color:#fff}
  .news-box h3::before{background:var(--primary)}
  .news-box p{font-size:14px;opacity:.85;margin-bottom:14px}
  .news-box input{width:100%;padding:11px 14px;border-radius:8px;border:none;font-size:14.5px;margin-bottom:10px;font-family:inherit}
  .news-box .btn{width:100%}

  /* ---------- banda ponte pra loja ---------- */
  .banda-loja{background:linear-gradient(100deg,var(--ink) 0%,#26313d 100%);color:#fff;border-radius:16px;margin:34px 0;padding:34px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
  .banda-loja .txt{flex:1;min-width:260px}
  .banda-loja h2{font-size:25px;font-weight:800;line-height:1.25;letter-spacing:-.3px}
  .banda-loja h2 em{color:#ff8a5e;font-style:normal}
  .banda-loja p{margin-top:8px;font-size:15.5px;opacity:.85}
  .banda-loja .prods{display:flex;gap:14px}
  .banda-loja .prods img{width:110px;height:110px;object-fit:contain;background:#fff;border-radius:12px;padding:8px}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#fff;margin-top:30px}
  footer .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:44px 0}
  footer h4{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#ff8a5e;margin-bottom:14px}
  footer a{display:block;font-size:14px;opacity:.8;margin-bottom:9px}
  footer a:hover{opacity:1}
  footer .brand p{font-size:14px;opacity:.75;margin-top:12px;max-width:320px}
  footer .legal{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:12.5px;opacity:.65;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
  footer img.logo{height:30px;filter:brightness(0) invert(1)}

  /* ---------- WIDGET de mini-app (estilo widget de sistema) ---------- */
  .app-widget{position:relative;border-radius:20px;padding:18px;color:#fff;cursor:pointer;display:flex;flex-direction:column;min-height:238px;overflow:hidden;
    box-shadow:0 8px 22px rgba(20,24,29,.16),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .18s ease,box-shadow .18s ease}
  .app-widget:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 16px 34px rgba(20,24,29,.24),inset 0 1px 0 rgba(255,255,255,.28)}
  .app-widget::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 6%,rgba(255,255,255,.28),transparent 46%);pointer-events:none}
  .aw-corrida{background:linear-gradient(158deg,#2b3440,#141a21)}
  .aw-bike{background:linear-gradient(158deg,#1f6d4a,#0e3a28)}
  .aw-kite{background:linear-gradient(158deg,#1a7fc1,#0b3f68)}
  .aw-natacao{background:linear-gradient(158deg,#1594a8,#08424f)}
  .aw-topo{display:flex;align-items:center;gap:9px;position:relative;z-index:1}
  .aw-icone{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.19);display:flex;align-items:center;justify-content:center;font-size:17px;backdrop-filter:blur(6px)}
  .aw-nome{font-size:12.5px;font-weight:800;letter-spacing:.4px}
  .aw-nome small{display:block;font-size:9.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;opacity:.62;margin-top:1px}
  .aw-corpo{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;z-index:1;padding:8px 0}
  .aw-leitura{font-size:40px;font-weight:800;letter-spacing:-1.4px;line-height:1}
  .aw-leitura small{font-size:15px;font-weight:700;letter-spacing:0;opacity:.75;margin:0 3px}
  .aw-legenda{font-size:11.5px;font-weight:700;letter-spacing:.4px;opacity:.72;margin-top:6px;text-transform:uppercase}
  .aw-chamada{font-size:14.5px;font-weight:700;line-height:1.32;position:relative;z-index:1;margin-bottom:11px}
  .aw-abrir{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.15);border-radius:999px;padding:8px 8px 8px 15px;font-size:12.5px;font-weight:800;position:relative;z-index:1;backdrop-filter:blur(6px)}
  .aw-abrir i{width:23px;height:23px;border-radius:50%;background:#fff;color:#141a21;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px}
  /* semáforo dentro do widget */
  .aw-semaforo{display:flex;gap:9px;justify-content:center}
  .aw-semaforo span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16)}
  .aw-semaforo span.on{background:#ffc93d;box-shadow:0 0 0 5px rgba(255,201,61,.22)}
  /* manômetro do widget da bike */
  .aw-gauge{width:104px;height:56px;position:relative;margin-bottom:2px}
  .aw-gauge svg{width:100%;height:100%;overflow:visible}
  /* pontinho de "ao vivo" */
  .aw-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.8}
  .aw-live b{width:6px;height:6px;border-radius:50%;background:#5ce08a;display:inline-block;animation:pisca 1.6s infinite}
  @keyframes pisca{50%{opacity:.3}}

  /* ---------- overlay do mini-app (abre na própria página) ---------- */
  #app-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto;
    background:rgba(14,18,23,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
  #app-overlay.aberto{display:flex}
  #app-overlay .palco{width:100%;max-width:620px;position:relative;animation:sobe .26s cubic-bezier(.2,.8,.3,1)}
  @keyframes sobe{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
  #app-overlay .fechar{position:absolute;top:-13px;right:-13px;z-index:5;width:38px;height:38px;border-radius:50%;background:#fff;border:none;cursor:pointer;
    font-size:19px;font-weight:700;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.28)}
  #app-overlay .fechar:hover{background:var(--sand)}
  @media(max-width:600px){
    #app-overlay{padding:14px 10px 30px}
    #app-overlay .fechar{top:-8px;right:-4px}
    .app-widget{min-height:210px}
  }

  /* ---------- telas de mini-app ---------- */
  .app-wrap{max-width:620px;margin:0 auto;padding:24px 20px 50px}
  .app-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(20,24,29,.08);background:#fff}
  .app-head{background:linear-gradient(115deg,var(--primary),#ff7a4b);color:#fff;padding:24px 24px 20px}
  .app-head .mini{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;opacity:.85}
  .app-head h1{font-size:26px;font-weight:800;letter-spacing:-.3px;margin-top:4px}
  .app-head p{font-size:14.5px;opacity:.92;margin-top:6px}
  .app-body{padding:24px}
  .campo{margin-bottom:14px}
  .campo label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft);display:block;margin-bottom:6px}
  .campo .inp{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:16px;font-weight:600;background:var(--sand);display:flex;justify-content:space-between;align-items:center}
  .campo .inp small{color:var(--ink-soft);font-weight:400;font-size:13px}
  .campos-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .btn-calc{width:100%;background:var(--primary);color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:16px;font-weight:800;padding:15px;cursor:pointer;margin-top:6px}
  .btn-calc:hover{background:var(--primary-dark)}
  .resultado{border-top:2px dashed var(--line);margin-top:22px;padding-top:22px}
  .resultado .rot-res{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
  .res-card{border:2px solid var(--primary);border-radius:14px;padding:20px;text-align:center;background:linear-gradient(180deg,#fff,#fff6f2)}
  .res-card .veredito{font-size:38px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
  .res-card .veredito.sim{color:#0b8a3e}
  .res-card .detalhe{font-size:15.5px;color:var(--ink-soft);margin-top:8px}
  .res-card .nums{display:flex;justify-content:center;gap:26px;margin-top:6px}
  .res-card .nums .n{font-size:36px;font-weight:800;color:var(--primary);line-height:1.05}
  .res-card .nums small{display:block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
  .semaforo{display:flex;justify-content:center;gap:14px;margin:6px 0 10px}
  .semaforo .luz{width:44px;height:44px;border-radius:50%;background:#e8e4e0;display:flex;align-items:center;justify-content:center;font-size:20px}
  .semaforo .luz.on-amarelo{background:#ffc93d;box-shadow:0 0 0 5px rgba(255,201,61,.3)}
  .check-res{text-align:left;margin-top:14px;font-size:14.5px}
  .check-res div{padding:7px 0;border-bottom:1px solid var(--line)}
  .check-res div:last-child{border-bottom:none}
  .share-box{background:#e9f9ef;border:1.5px solid #ace0bd;border-radius:14px;padding:18px;margin-top:18px}
  .share-box .tit{font-size:14.5px;font-weight:800;margin-bottom:4px}
  .share-box .sub-sh{font-size:13px;color:var(--ink-soft);margin-bottom:12px}
  .btn-wa{display:block;width:100%;background:#25D366;color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:15.5px;font-weight:800;padding:14px;cursor:pointer;text-align:center}
  .btn-wa:hover{background:#1eb958}
  .btn-copiar{display:block;width:100%;background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;padding:12px;cursor:pointer;text-align:center;margin-top:8px}
  .share-preview{background:#dcf8c6;border-radius:10px 10px 10px 2px;padding:12px 14px;font-size:13.5px;margin-top:14px;box-shadow:0 1px 2px rgba(0,0,0,.12);line-height:1.5}
  .share-preview .de{font-size:11px;font-weight:700;color:#1eb958;margin-bottom:3px}
  .app-prod{display:flex;gap:14px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-top:18px}
  .app-prod img{width:72px;height:72px;object-fit:contain;background:var(--sand);border-radius:10px;padding:5px;flex-shrink:0}
  .app-prod .rotulo{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary)}
  .app-prod h4{font-size:15px;font-weight:800;line-height:1.3}
  .app-prod p{font-size:12.5px;color:var(--ink-soft)}
  .app-prod .btn{padding:9px 16px;font-size:12.5px;flex-shrink:0}
  .app-pe{text-align:center;font-size:12px;color:var(--ink-soft);padding:14px;background:var(--sand);border-top:1px solid var(--line)}
  @media(max-width:600px){.app-prod{flex-wrap:wrap}.app-prod .btn{width:100%;text-align:center}.app-prod div[style]{min-width:60%}}

  /* ---------- página de matéria ---------- */
  .artigo-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
  .breadcrumb{font-size:13px;color:var(--ink-soft);padding:18px 0 6px}
  .breadcrumb a{color:var(--primary);font-weight:600}
  article.materia{display:grid;grid-template-columns:1fr 300px;gap:40px;padding-bottom:30px}
  .materia .head h1{font-size:36px;line-height:1.18;font-weight:800;letter-spacing:-.5px;margin:10px 0 12px}
  .materia .head .sub{font-size:18px;color:var(--ink-soft);line-height:1.5}
  .byline{display:flex;align-items:center;gap:12px;margin:20px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap}
  .byline .avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
  .byline b{color:var(--ink)}
  .materia .figura{border-radius:14px;overflow:hidden;margin:6px 0 22px}
  .materia .figura figcaption{font-size:12.5px;color:var(--ink-soft);padding:8px 2px}
  .materia .corpo{font-size:17.5px;line-height:1.75}
  .materia .corpo p{margin-bottom:20px}
  .materia .corpo h2{font-size:24px;font-weight:800;margin:34px 0 14px;letter-spacing:-.3px;padding-left:14px;position:relative}
  .materia .corpo h2::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:5px;background:var(--primary);border-radius:3px}
  .toc{background:var(--sand);border-radius:12px;padding:18px 22px;margin-bottom:24px;font-size:15px}
  .toc b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin-bottom:10px}
  .toc a{display:block;color:var(--primary);font-weight:600;margin-bottom:7px}
  .dica{border-left:5px solid var(--primary);background:var(--sand);border-radius:0 12px 12px 0;padding:18px 22px;margin:24px 0;font-size:16px}
  .dica b{color:var(--primary)}
  .prod-inline{display:flex;gap:20px;align-items:center;border:2px solid var(--primary);border-radius:14px;padding:20px;margin:28px 0;flex-wrap:wrap}
  .prod-inline img{width:110px;height:110px;object-fit:contain;background:var(--sand);border-radius:10px;padding:8px}
  .prod-inline .info{flex:1;min-width:220px}
  .prod-inline .rotulo{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary)}
  .prod-inline h4{font-size:18px;font-weight:800;margin:4px 0}
  .prod-inline p{font-size:14.5px;color:var(--ink-soft)}
  .rel{margin:30px 0}
  .rel h3{font-size:19px;font-weight:800;margin-bottom:16px;padding-left:12px;position:relative}
  .rel h3::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:5px;background:var(--primary);border-radius:3px}

  .voltar{display:inline-block;margin:16px 0;font-size:14px;font-weight:700;color:var(--primary);cursor:pointer}

  /* ---------- responsivo ---------- */
  @media(max-width:960px){
    .masthead nav,.masthead .icons{display:none}
    .burger{display:block}
    .hero-grid{grid-template-columns:1fr;padding-top:18px}
    .manchete{min-height:340px}
    .manchete h1{font-size:26px}
    .destaques{flex-direction:row;gap:14px}
    .destaque{min-height:170px}
    .destaque h3{font-size:15px}
    .cols{grid-template-columns:1fr;gap:0}
    .cards{grid-template-columns:1fr 1fr;gap:14px}
    .card.destacada{grid-column:span 2}
    article.materia{grid-template-columns:1fr}
    .materia .head h1{font-size:27px}
    footer .top{grid-template-columns:1fr 1fr;gap:24px}
  }
  @media(max-width:600px){
    .shopbar .right span.hide-m{display:none}
    .destaques{flex-direction:column}
    .cards{grid-template-columns:1fr}
    .card.destacada{grid-column:span 1}
    .banda-loja{padding:24px}
    .banda-loja .prods img{width:88px;height:88px}
  }

/* ---- v0.1.2: chip de mini-app na linha do título (widget não compete com post) ---- */
.franja-head{align-items:center}
.app-chip{display:inline-flex;align-items:center;gap:9px;margin-left:auto;margin-right:16px;padding:7px 8px 7px 13px;border-radius:999px;color:#fff;font-size:12.5px;font-weight:700;line-height:1;box-shadow:0 3px 10px rgba(20,24,29,.2);transition:transform .15s,box-shadow .15s}
.app-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,24,29,.28)}
.app-chip .chip-ico{font-size:14px}
.app-chip .chip-tx{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.app-chip .chip-abrir{background:rgba(255,255,255,.22);border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.chip-semaforo{display:inline-flex;gap:3px}
.chip-semaforo i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.chip-semaforo i.on{background:#ffc93d;box-shadow:0 0 0 2px rgba(255,201,61,.3)}
.chip-live{width:7px;height:7px;border-radius:50%;background:#5ce08a;display:inline-block;animation:pisca 1.6s infinite}
@keyframes pisca{50%{opacity:.3}}
@media(max-width:700px){
  .franja-head{flex-wrap:wrap;row-gap:10px}
  .app-chip{order:3;width:100%;margin:0;justify-content:space-between}
}

/* v0.1.3: icones SVG nos chips */
.app-chip .chip-ico{display:inline-flex;width:16px;height:16px}
.app-chip .chip-ico svg{width:16px;height:16px}

/* v0.1.3b: botao ABRIR do chip em verde solido (mais visual, pedido Calderon) */
.app-chip .chip-abrir{background:#1eb958;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.app-chip:hover .chip-abrir{background:#17a04c}

/* v0.1.3c: FONTE BRANCA no chip (a regra .franja-head a laranja vencia por especificidade) */
.franja-head a.app-chip, .franja-head a.app-chip .chip-tx, .franja-head a.app-chip .chip-ico{color:#fff}

/* ---- v0.2 mini-apps: overlay + mapa de spots + condições ---- */
.app-fonte[hidden]{display:none}
#app-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto;background:rgba(14,18,23,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#app-overlay.aberto{display:flex}
#app-overlay .palco{width:100%;max-width:620px;position:relative;animation:bcxsobe .26s cubic-bezier(.2,.8,.3,1)}
@keyframes bcxsobe{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
#app-overlay .fechar{position:absolute;top:-13px;right:-13px;z-index:5;width:38px;height:38px;border-radius:50%;background:#fff;border:none;cursor:pointer;font-size:21px;font-weight:700;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.28);line-height:1}
#app-overlay .fechar:hover{background:var(--sand)}
.mini-mapa{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:4px 0 16px}
.mini-mapa svg{width:100%;height:auto;display:block}
.mapa-legenda{display:flex;gap:16px;flex-wrap:wrap;padding:10px 14px;background:var(--sand);font-size:12px;font-weight:600;color:var(--ink-soft)}
.mapa-legenda span{display:inline-flex;align-items:center;gap:6px}
.mapa-legenda i{width:10px;height:10px;border-radius:50%;display:inline-block}
.condicoes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.cond{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;background:var(--sand)}
.cond .cond-rot{display:block;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.cond b{display:block;font-size:19px;font-weight:800;margin-top:4px}
.cond small{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px}
.app-chip{cursor:pointer}
@media(max-width:600px){#app-overlay{padding:14px 10px 30px}#app-overlay .fechar{top:-8px;right:-4px}.condicoes{grid-template-columns:1fr;gap:8px}}

/* ---- v0.2.1: mini-apps SEM laranjão (laranja é do e-commerce; portal é editorial) ---- */
/* cabeçalho do app usa a cor do ELEMENTO de cada esporte, não a cor da marca */
.app-card .app-head{background:#1e2a33}
.tema-kite .app-head{background:linear-gradient(150deg,#1a7fc1,#0b3f68)}
.tema-natacao .app-head{background:linear-gradient(150deg,#1594a8,#08424f)}
.tema-bike .app-head{background:linear-gradient(150deg,#1f6d4a,#0e3a28)}
.tema-corrida .app-head{background:linear-gradient(150deg,#2b3440,#141a21)}
/* botões e detalhes internos em grafite/neutro */
.app-card .btn-calc{background:#1e2a33}
.app-card .btn-calc:hover{background:#0f171d}
.app-card .res-card{border-color:#d9d5d0;background:#fff}
.app-card .rot-res,.app-card .campo label{color:#5a6470}
.app-card .nums .n{color:#1e2a33}
.app-card .app-prod{border-color:#d9d5d0}
.app-card .app-prod .rotulo{color:#5a6470}
.app-card .app-prod .btn{background:#1e2a33}

/* rodapé v0.2.1: 4 colunas + bloco legal com dados oficiais */
footer .legal{align-items:flex-start;line-height:1.6}
footer .legal .assina{text-align:right}
footer .legal a{display:inline;opacity:1;color:#ff8a5e}
footer .legal small{opacity:.55}
@media(max-width:700px){footer .legal{flex-direction:column}footer .legal .assina{text-align:left}}

/* v0.2.2: ilustrações dentro dos apps (bike e corrida) */
.ilustra{margin:2px 0 14px}
.ilustra svg{width:100%;height:auto;display:block;max-width:360px;margin:0 auto;overflow:visible}
.ilustra-corredor svg{max-width:270px}
.zonas{margin-top:14px;padding:12px 14px;background:var(--sand);border-radius:12px;font-size:14px;text-align:left}
.zonas-rot{display:block;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}

/* v0.2.4: ilustrações geradas (Higgsfield) nos apps */
.ilustra img{width:100%;height:auto;display:block;margin:0 auto}
.ilustra-bike img{max-width:400px}
.psi-linha{display:flex;justify-content:center;gap:76px;margin-top:6px}
.psi-bloco{text-align:center;line-height:1}
.psi-bloco b{display:block;font-size:34px;font-weight:800;color:#12352a}
.psi-bloco small{display:block;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#5f6b74;margin-top:3px}
.psi-bloco em{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#98a1a9;margin-top:5px}
@media(max-width:600px){.psi-linha{gap:52px}}
.ilustra-corredor{position:relative;max-width:300px;margin:0 auto 14px}
.ilustra-corredor .marca-canela{position:absolute;right:2%;bottom:31%;font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#8a6d00;background:#fef3c7;border-radius:999px;padding:4px 10px}
@media(max-width:600px){.bike-rotulos{gap:98px}}

/* ---- ticker em loop contínuo (estilo emissora) ---- */
.ticker .wrap{gap:0;height:38px;overflow:hidden}
.ticker b{flex-shrink:0;padding-right:14px;margin-right:14px;border-right:1px solid var(--line);z-index:2;background:var(--sand)}
.ticker-janela{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent)}
.ticker-trilha{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;will-change:transform;animation:bcx-esteira 55s linear infinite}
.ticker-janela:hover .ticker-trilha{animation-play-state:paused}
.ticker-trilha a{flex-shrink:0}
.ticker-trilha .dot{flex-shrink:0;color:var(--line)}
@keyframes bcx-esteira{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .ticker-trilha{animation:none}
  .ticker-janela{overflow-x:auto;scrollbar-width:none}
}

/* ---------- card de prova: uma cor por modalidade ---------- */
/* --esp manda no card inteiro: data, esporte, nome, local e o tile do icone. */
.prova{--esp:var(--primary);--esp-fundo:#fff3ec}
.prova-natacao{--esp:#0e7f92;--esp-fundo:#e7f6f8}
.prova-bike   {--esp:#1f6d4a;--esp-fundo:#e8f5ee}
.prova-kite   {--esp:#1a6fa8;--esp-fundo:#e8f2fb}
.prova-triatlo{--esp:#5a45a8;--esp-fundo:#f1eefb}
.prova-beach  {--esp:#a67a12;--esp-fundo:#fdf3e0}

.prova-topo{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.prova-ic{display:inline-flex;width:22px;height:22px;flex-shrink:0;border-radius:6px;
  align-items:center;justify-content:center;background:var(--esp-fundo);color:var(--esp)}
.prova-ic .ic-esporte{width:15px;height:15px}
.prova .data{font-size:11px;letter-spacing:.4px;color:var(--esp)}
.prova .nome{color:var(--esp)}
.prova .meta{color:var(--esp);opacity:.68}

/* ======================================================================
   TIPOGRAFIA EDITORIAL DA MATÉRIA (v0.3) — tabelas, listas, números
   ====================================================================== */

/* ---- ritmo do texto ---- */
.corpo{max-width:720px}
.corpo > *:first-child{margin-top:0}
.corpo p{margin-bottom:20px}
.corpo p:last-child{margin-bottom:0}
.corpo h2{font-size:25px;margin:40px 0 14px}
.corpo h3{font-size:19.5px;font-weight:800;margin:28px 0 10px;letter-spacing:-.2px}
.corpo strong,.corpo b{font-weight:700;color:var(--ink)}
.corpo em{font-style:italic}
.corpo a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:rgba(236,84,36,.35)}
.corpo a:hover{text-decoration-color:var(--primary)}

/* ---- listas ---- */
.corpo ul,.corpo ol{margin:0 0 22px;padding-left:26px}
.corpo li{margin-bottom:9px;padding-left:4px}
.corpo li:last-child{margin-bottom:0}
.corpo ul li::marker{color:var(--primary)}
.corpo ol li::marker{color:var(--primary);font-weight:800}
.corpo li > ul,.corpo li > ol{margin:9px 0 0}

/* ---- TABELAS (o padrão de dado do portal) ---- */
.corpo figure.wp-block-table,.corpo .wp-block-table{margin:26px 0 30px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.corpo table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.45;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.corpo thead th{background:var(--ink);color:#fff;font-size:12px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;text-align:left;padding:12px 16px;white-space:nowrap;vertical-align:middle}
.corpo thead th:not(:first-child){text-align:center}
.corpo tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:middle;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.corpo tbody tr:nth-child(even) td{background:#faf8f6}
.corpo tbody td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.corpo tbody td:not(:first-child){text-align:center;color:var(--ink-soft)}
.corpo tbody td strong{color:var(--ink)}
.corpo tbody tr:hover td{background:#fff6f2}
/* tabela com muita descrição: volta pra alinhamento à esquerda */
.corpo table.texto tbody td:not(:first-child),
.corpo table.texto thead th:not(:first-child){text-align:left}

/* ---- imagem e legenda dentro do texto ---- */
.corpo figure:not(.wp-block-table){margin:28px 0}
.corpo figure img{border-radius:12px;width:100%;height:auto}
.corpo figcaption{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.5}

/* ---- citação ---- */
.corpo blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:4px solid var(--primary);
  font-size:19px;font-style:italic;color:var(--ink)}
.corpo blockquote p:last-child{margin-bottom:0}

/* ---- separador ---- */
.corpo hr{border:none;border-top:1px solid var(--line);margin:34px 0}

/* ---- código/valor inline ---- */
.corpo code{background:var(--sand);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  font-size:14px;font-variant-numeric:tabular-nums}

/* ---- números tabulares no resto do portal (evita "dançar" no ticker e nos cards) ---- */
.prova .data,.card .meta,.materia .byline,.maislidas a::before{font-variant-numeric:tabular-nums}

/* ---- mobile ---- */
@media(max-width:700px){
  .corpo{font-size:17px}
  .corpo h2{font-size:22px;margin:32px 0 12px}
  .corpo h3{font-size:18px}
  .corpo table{font-size:14.5px}
  .corpo thead th{padding:10px 12px;font-size:11px}
  .corpo tbody td{padding:11px 12px}
  .corpo figure.wp-block-table::after{content:"→ arraste pra ver a tabela inteira";display:block;
    font-size:11.5px;color:var(--ink-soft);padding:6px 2px 0;font-weight:600}
}


/* ======================================================================
   MENU MOBILE (v0.3.1) — o burger existia e nao abria nada
   ====================================================================== */
.burger{align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;padding:0}
.burger-ic{display:block;width:20px;height:14px;position:relative}
.burger-ic i{position:absolute;left:0;width:100%;height:2.2px;border-radius:2px;background:var(--ink);
  transition:transform .22s ease,opacity .16s ease,top .22s ease}
.burger-ic i:nth-child(1){top:0}
.burger-ic i:nth-child(2){top:6px}
.burger-ic i:nth-child(3){top:12px}
body.nav-aberto .burger-ic i:nth-child(1){top:6px;transform:rotate(45deg)}
body.nav-aberto .burger-ic i:nth-child(2){opacity:0}
body.nav-aberto .burger-ic i:nth-child(3){top:6px;transform:rotate(-45deg)}
body.nav-aberto .burger{background:var(--sand)}

@media(max-width:960px){
  header.portal{position:relative;z-index:60}
  .burger{display:flex}
  .masthead nav#nav-portal{
    display:block;position:absolute;left:0;right:0;top:100%;
    margin:0;padding:6px 20px 14px;background:#fff;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(20,24,29,.13);
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  body.nav-aberto .masthead nav#nav-portal{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .masthead nav#nav-portal a{
    display:block;padding:13px 2px;font-size:16px;border-bottom:1px solid var(--line);
    border-left:3px solid transparent;padding-left:11px}
  .masthead nav#nav-portal a:last-child{border-bottom:none}
  .masthead nav#nav-portal a:hover,.masthead nav#nav-portal a.on{
    color:var(--primary);border-bottom-color:var(--line);border-left-color:var(--primary);background:var(--sand)}
  .masthead nav#nav-portal a.nav-rankings{
    border-radius:9px;margin-top:10px;text-align:center;padding:13px;border-left:none}
}

/* ---- v0.3.2: no celular a manchete e so foto + titulo ----
   O subtexto empurrava a home inteira pra baixo e competia com o titulo na
   tela pequena. Some so no telefone; tablet e desktop seguem com a linha fina. */
@media(max-width:600px){
  .manchete .txt p{display:none}
  .manchete .txt{padding:22px 20px 24px}
  .manchete h1{font-size:25px}
}