/* ============================================================================
   site-fixes.css — Libertadores.net V4.1
   Carregar DEPOIS de site.css. Contém apenas as correções do Bloco A.
   Nada aqui é redesign: o redesign é o Bloco B (design-system.css).
   ========================================================================= */

/* --- D18: monograma fora do fluxo de texto ------------------------------
   Antes o HTML servido continha "PPlatense" / "PedroFlamengo", porque a
   inicial ficava dentro do texto. Agora vem de data-i via ::before. */
.crest::before{content:attr(data-i)}

/* --- Acessibilidade ---------------------------------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible{
    outline:3px solid var(--gold2);outline-offset:2px;border-radius:3px}
/* D06 — os cinzas mais claros do tema não passavam 4.5:1 sobre #07090b. */
.lead,.footgrid p,.panel td small,.heroMain p{color:#b6bcbe}
.copy,.features p,.footgrid>a,.footgrid a{color:#a8aeb0}
.nav nav a{color:#ced2d4}
/* Alvo mínimo de toque */
.nav nav a{display:inline-flex;align-items:center;min-height:44px}
.footgrid a{min-height:32px;display:flex;align-items:center}

/* --- D16: faixa de proveniência ---------------------------------------- */
.frescor{width:min(1440px,calc(100% - 48px));margin:10px auto;display:flex;
    flex-wrap:wrap;gap:14px;align-items:center;padding:9px 12px;
    background:#0d1114;border:1px solid var(--line);border-radius:6px;
    font-size:11px;color:#b6bcbe}
.frescor b{color:#e9edee}
.frescor a{color:var(--gold2)}
.frescor .dot{width:7px;height:7px;border-radius:50%;background:#1bd36b;flex:none}
.frescor[data-nivel="ok"] .dot{background:var(--gold)}
.frescor[data-nivel="velho"] .dot{background:#e0642f}
.frescor[data-nivel="indisponivel"] .dot{background:#7b8285}

/* --- D30: estado vazio honesto ----------------------------------------- */
.semdados{padding:22px 18px}
.semdados h3{margin:0 0 6px;font-size:14px;color:#e9edee;border:0;padding:0}
.semdados p{margin:0;font-size:12px;line-height:1.6;color:#a8aeb0;max-width:62ch}
.ausente{color:#8f9597;font-style:italic}

/* --- D21/D23: apostas e publicidade ------------------------------------ */
.aviso18{margin:14px 0 0;padding:12px 14px;border-left:3px solid #d8402e;
    background:#1a100e;color:#d3c4c1;font-size:11px;line-height:1.6}
.aviso18 b{color:#f08b7b}
.adlabel{border:1px solid #4a4033;background:#14110c;padding:6px 10px;border-radius:4px;
    font-size:10px;letter-spacing:.08em}

/* --- P8: altura do anúncio igual à do formato -------------------------- */
.ad{height:auto;min-height:100px}
.ad-mpu{min-height:250px}
@media(max-width:520px){.ad,.ad-mpu{min-height:100px}}

/* --- Lista de jogos ----------------------------------------------------- */
.diahead{margin:0;padding:9px 18px;background:#0b0e10;border-bottom:1px solid #202527;
    font-size:10px;font-weight:700;letter-spacing:.06em;color:#9aa1a3}
.match{grid-template-columns:64px 1fr 24px 1fr;row-gap:4px}
.match>b{font-size:15px;font-weight:700;text-align:left}
.match>b small{display:block;font-size:8px;color:#8f9597;letter-spacing:.04em}
.match .local{grid-column:1/-1;font-style:normal;font-size:10px;color:#8f9597}
@media(max-width:520px){.match{grid-template-columns:52px 1fr 18px 1fr;padding:12px 10px}}

/* --- D26: breadcrumb ---------------------------------------------------- */
.bread{font-size:11px;color:#9aa1a3;margin-bottom:10px}
.bread a{color:var(--gold2)}

/* --- D19: tabela rola dentro do componente, não na página --------------- */
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela-rolagem table{min-width:520px}

/* --- Botão de menu ------------------------------------------------------ */
.menu{align-items:center;justify-content:center;min-width:44px;min-height:44px}

/* ============================================================================
   v4.2 — Chaveamento, resultados e destaque entre fases
   ========================================================================= */

/* --- Resultados --------------------------------------------------------- */
.match.resultado{grid-template-columns:52px 1fr 72px 1fr}
.chip-fim{font-size:9px;font-weight:800;letter-spacing:.06em;color:#9aa1a3;
    border:1px solid #2b3033;border-radius:99px;padding:3px 7px;text-align:center}
.placar{display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;color:#f5f0e6}
.placar i{font-style:normal;font-size:11px;color:#6d7477}
.match .venceu b,.match span.venceu{color:#fff;font-weight:700}

/* --- Chaveamento --------------------------------------------------------- */
.painel-chave{padding:18px}
.fase{margin-bottom:26px}
.fase:last-child{margin-bottom:0}
.fase>h3{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:0;border:0;
    font-size:13px;letter-spacing:.05em;color:#f5f0e6}
.tag-fim{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.08em;
    color:#9aa1a3;border:1px solid #2b3033;border-radius:99px;padding:2px 7px}

.chave{display:grid;gap:10px}
@media(min-width:760px){.chave{grid-template-columns:1fr 1fr}}

.confronto{background:#0b0f11;border:1px solid #2b3033;border-radius:6px;padding:13px 15px}
.confronto.indefinido{border-style:dashed;opacity:.75}
.confronto .lado{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}
.confronto .lado b{font-weight:600;color:#dfe3e4}
.confronto .lado.venceu b{color:#fff;font-weight:700}
.confronto .lado .pais{margin-left:auto;font-style:normal;font-size:9px;font-weight:700;
    letter-spacing:.06em;color:#7f8689}
.confronto .lado .ok{font-style:normal;color:#1bd36b;font-size:12px;margin-left:6px}

.pernas{margin-top:10px;padding-top:9px;border-top:1px solid #1e2325;
    display:flex;flex-direction:column;gap:4px}
.perna{font-size:10px;color:#9aa1a3;line-height:1.5}
.perna b{font-weight:700;color:#c3c8ca}
.perna strong{color:var(--gold2);font-variant-numeric:tabular-nums}
.perna.agregado{color:#c3c8ca}
.perna.obs{color:#8f9597;font-style:italic}

.premiacao{margin-top:16px;padding-top:12px;border-top:1px solid #1e2325;
    font-size:10px;color:#8f9597}
.nota-fonte{margin-top:10px;font-size:10px;color:#8f9597;line-height:1.6;max-width:70ch}

.secao-chave{margin-top:12px}
.secao-topo{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}
.secao-topo h2{font:600 24px 'Playfair Display',serif;margin:0}
.l-link{font-size:11px;font-weight:700;color:var(--gold2)}

/* --- Destaque entre fases (sem jogos na janela da API) ------------------- */
.proximo-confronto{padding:18px}
.fase-tag{display:inline-block;background:var(--gold);color:#090b0c;font-weight:800;
    font-size:9px;letter-spacing:.06em;padding:3px 8px;border-radius:4px}
.duelo{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:12px 0 6px;font-size:15px}
.duelo b{font-weight:700;color:#fff}
.duelo i{font-style:normal;color:#6d7477}
.quando{font-size:11px;color:#b6bcbe;margin:0}
.proximo-confronto .obs{margin-top:7px;font-size:10px;color:#8f9597;font-style:italic}

.sub{font:600 18px 'Playfair Display',serif;margin:22px 0 9px}

/* ============================================================================

/* @BLOCO-TIPOGRAFIA-V43 */
/* ============================================================================
   v4.3 — TIPOGRAFIA LEGÍVEL
   
   O CSS original usava uma escala pequena demais: body em 14px e rótulos em
   8px e 9px. Abaixo de 12px o texto deixa de ser lido e passa a ser decifrado,
   e num portal de dados — onde o leitor confere placar, horário e cotação —
   isso custa confiança antes de custar conforto.
   
   A escala abaixo parte de 16px (padrão dos navegadores) e cresce em passos
   de ~1,2. Nenhum texto fica abaixo de 12px. Os títulos não mudam: já estavam
   bons, e mexer neles quebraria o herói.
   ========================================================================= */

:root{
  --f-2xs: 0.75rem;    /* 12px — micro-rótulos: fuso, "Fim", país */
  --f-xs:  0.8125rem;  /* 13px — metadados, legendas, rodapé */
  --f-sm:  0.875rem;   /* 14px — navegação, botões, texto secundário */
  --f-md:  1rem;       /* 16px — corpo */
  --f-lg:  1.125rem;   /* 18px — nomes de time, destaques */
  --f-xl:  1.375rem;   /* 22px — placar */
}

/* --- Base ---------------------------------------------------------------- */
body{font-size:var(--f-md);line-height:1.6}

/* --- Cabeçalho e navegação ----------------------------------------------- */
.nav nav a{font-size:var(--f-sm);letter-spacing:.01em}
.nav em{font-size:var(--f-2xs);padding:2px 6px}
.btn{font-size:var(--f-sm);padding:11px 18px;letter-spacing:0}

/* --- Herói ---------------------------------------------------------------- */
.heroMain p{font-size:1.0625rem;line-height:1.65;max-width:62ch}
.heroMain>small,.eyebrow{font-size:var(--f-xs);letter-spacing:.06em}
.heroMain label{font-size:var(--f-xs)}

/* --- Painéis e seções ----------------------------------------------------- */
.side h3,.panel>h3{font-size:var(--f-md);padding:18px 20px}
.side h3 a,.panel h3 a{font-size:var(--f-xs)}
.lead{font-size:1.0625rem;line-height:1.65;max-width:68ch}

/* --- Tabelas: o pior caso do CSS antigo (th em 8px) ----------------------- */
.panel table{font-size:var(--f-sm)}
.panel th{font-size:var(--f-2xs);letter-spacing:.04em;padding:12px 10px}
.panel td{padding:13px 12px}
.panel td small{font-size:var(--f-xs)}

/* --- Jogos e resultados --------------------------------------------------- */
.match{padding:16px 18px}
.match>span{font-size:var(--f-lg)}
.match small{font-size:var(--f-2xs)}
.match>b{font-size:var(--f-lg)}
.match>b small{font-size:var(--f-2xs);letter-spacing:.02em}
.match .local{font-size:var(--f-xs)}
.diahead{font-size:var(--f-2xs);letter-spacing:.05em;padding:11px 18px}
.chip-fim{font-size:var(--f-2xs);padding:4px 9px}
.placar{font-size:var(--f-xl)}
.placar i{font-size:var(--f-2xs)}
.crest{width:32px;height:32px;font-size:var(--f-2xs)}

/* --- Chaveamento ---------------------------------------------------------- */
.fase>h3{font-size:var(--f-md);letter-spacing:.03em}
.tag-fim{font-size:var(--f-2xs);padding:3px 9px}
.confronto{padding:15px 17px}
.confronto .lado{font-size:var(--f-lg);padding:6px 0}
.confronto .lado .pais{font-size:var(--f-2xs)}
.confronto .lado .ok{font-size:var(--f-md)}
.perna{font-size:var(--f-xs);line-height:1.6}
.premiacao,.nota-fonte{font-size:var(--f-xs);line-height:1.65}
.secao-topo h2{font-size:1.75rem}
.l-link{font-size:var(--f-xs)}

/* --- Próximo confronto (home entre fases) --------------------------------- */
.fase-tag{font-size:var(--f-2xs);padding:4px 10px}
.duelo{font-size:1.25rem}
.quando{font-size:var(--f-sm);line-height:1.6}
.proximo-confronto .obs{font-size:var(--f-xs)}

/* --- Proveniência e estados ----------------------------------------------- */
.frescor{font-size:var(--f-xs);padding:11px 14px}
.semdados h3{font-size:var(--f-md)}
.semdados p{font-size:var(--f-sm);line-height:1.65}
.bread{font-size:var(--f-xs)}

/* --- Odds ----------------------------------------------------------------- */
.oddshead h2{font-size:1.75rem}
.oddshead p{font-size:var(--f-xs)}
.sponsor,.adlabel{font-size:var(--f-2xs)}
.sponsor b{font-size:var(--f-sm)}
.meta,.small{font-size:var(--f-2xs)}
.meta strong{font-size:var(--f-2xs)}
.teams{font-size:var(--f-sm)}
.prices b{font-size:1.25rem;padding:11px}
.tabs>*{font-size:var(--f-2xs);padding:9px 13px}
.aviso18{font-size:var(--f-xs);line-height:1.65;padding:14px 16px}
.notice{font-size:var(--f-xs);line-height:1.65;padding:14px}

/* --- Editorial ------------------------------------------------------------ */
.article p,.legal p{font-size:var(--f-md);line-height:1.7;max-width:70ch}
.article h2,.legal h2{font-size:1.5rem}

/* --- Rodapé --------------------------------------------------------------- */
.footgrid h5{font-size:var(--f-2xs);letter-spacing:.08em}
.footgrid a,.footgrid>a{font-size:var(--f-sm);margin:10px 0}
.footgrid p{font-size:var(--f-xs);line-height:1.65}
.copy{font-size:var(--f-2xs);line-height:1.6}

/* --- Ferramentas ---------------------------------------------------------- */
.tool input{font-size:var(--f-md);padding:13px}
.price strong{font-size:2rem}

/* --- Mobile: nada encolhe abaixo do legível ------------------------------- */
@media(max-width:520px){
  .match{grid-template-columns:56px 1fr 20px 1fr;padding:14px 12px}
  .match>span,.match>b{font-size:var(--f-md)}
  .match.resultado{grid-template-columns:50px 1fr 62px 1fr}
  .placar{font-size:1.125rem}
  .confronto .lado{font-size:var(--f-md)}
  .heroMain p,.lead{font-size:var(--f-md)}
}

/* @BLOCO-ESCUDOS-V44 */
/* ============================================================================
   v4.4 — escudo no lugar do monograma
   O monograma (a letra em .crest::before) continua no HTML: ele e o fallback.
   Quando existe escudo, a imagem entra e a letra sai; se a imagem falhar,
   site.js devolve a classe e a letra reaparece — sem buraco no layout.
   ========================================================================= */
.crest.tem-escudo{
    border:0;                       /* o brasao ja tem forma propria */
    background:transparent;
    width:40px;height:40px;
    overflow:visible;
}
.crest.tem-escudo::before{content:none}
.crest.tem-escudo img{
    display:block;
    width:100%;height:100%;
    object-fit:contain;             /* escudo nunca distorce nem corta */
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* Jogos, resultados e odds: escudo em cima, nome embaixo (o .match e o
   .teams ja centralizam; aqui so o espaco entre um e outro). */
.match>span .crest,.teams .crest{margin:0 auto 7px}
.match.resultado>span .crest{width:36px;height:36px}

/* Times: o cartao da pagina /times comporta um escudo maior. */
.teamcard .crest.tem-escudo{width:64px;height:64px;margin:0 auto 10px}

/* Chaveamento e destaque da home: linha unica, escudo ao lado do nome. */
.confronto .lado .crest.tem-escudo{width:28px;height:28px;margin:0;flex:0 0 28px}
.duelo .crest.tem-escudo{width:34px;height:34px;margin:0;flex:0 0 34px}

/* Tabela de classificacao: o escudo nao pode esticar a linha. */
.panel td .crest.tem-escudo{width:26px;height:26px;margin:0 8px 0 0;
    display:inline-grid;vertical-align:middle}

@media(max-width:520px){
    .crest.tem-escudo{width:34px;height:34px}
    .match.resultado>span .crest{width:30px;height:30px}
    .teamcard .crest.tem-escudo{width:52px;height:52px}
}