/* ============================================================
   est.css — direzione "Curva" (approvata 2026-09-01)
   migliorisitiscommesse.net · sostituisce integralmente est.css
   Nero #101216 + rosso segnale #e03131 · asse 1020px · niente card
   Font: Anton (titoli) + Barlow (testo), caricati da header.php con
   preconnect: NON usare @import qui, costa un round-trip sul LCP.
   Il markup NON cambia: agisce sulle classi della home v3.
   ============================================================ */

/* ---- cornice di pagina ---- */
html { background-color: #e9eaec !important; background-image: none !important; }
html body { background-color: transparent; color: #14161a; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif; }
html body:before, html body:after { display: none !important; content: none !important; }
html body article { background: transparent; max-width: none; padding: 0 0 48px; }

/* ---- header: fascia nera con filetto rosso ---- */
html body header { background-color: #101216 !important; background-image: none !important; border-bottom: 4px solid #e03131; width: 100% !important; max-width: none !important; margin: 0 !important; padding-right: 0 !important; box-shadow: none; }
html body header .logo { background: none !important; width: auto !important; min-height: 56px !important; line-height: 56px !important; text-indent: 0 !important; color: #ffffff !important; font-family: 'Anton', Impact, sans-serif; font-size: 21px !important; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; padding-left: max(16px, calc((100% - 1020px) / 2)) !important; white-space: nowrap; }
html body header .logo .tld { color: #e03131; }
html body header nav { min-height: 56px; }
html body header nav .nav li a { color: #d7d9dd !important; text-decoration: none; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
html body header nav .nav li a:hover { color: #ffffff !important; }

/* ---- navigazione ----
   Il tema porta i li a 36px di padding (0 10px 0 26px) e nasconde la nav
   sotto 1199px: nav larga 840px e nessun menu visibile su qualunque
   finestra sotto i 1200, hamburger da 24x15 senza etichetta compreso.
   Qui la nav viene compressa e la soglia scende a 900px. */
html body header nav .nav li { padding: 0; float: left; line-height: 56px; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif; font-size: 13.5px; }
html body header nav .nav li a { padding: 0 11px; }

@media (min-width: 900px) {
  html body header nav { right: max(16px, calc((100% - 1020px) / 2)); }
  html body header nav button.nav-toggle { display: none !important; }
  html body header nav .nav { display: block !important; position: relative; top: auto; width: auto; margin: 0; padding: 0; background: transparent; box-shadow: none; }
  html body header nav .nav li { float: left; display: list-item; line-height: 56px; padding: 0; }
}

/* sotto 900px: hamburger riconoscibile (quadrato rosso, non tre righe
   nel nulla) e pannello a tendina vestito come il resto */
@media (max-width: 899px) {
  html body header nav button.nav-toggle { display: block; width: 40px; height: 40px; right: 12px; margin-top: -20px; background-color: #e03131; border-radius: 2px; }
  html body header nav button.nav-toggle:before, html body header nav button.nav-toggle:after, html body header nav button.nav-toggle > span { width: 20px; left: 10px; background-color: #ffffff; }
  html body header nav button.nav-toggle > span { top: 13px; }
  html body header nav button.nav-toggle:before { top: 19px; }
  html body header nav button.nav-toggle:after { top: 25px; }
  html body header nav button.nav-toggle:hover > span, html body header nav button.nav-toggle:hover:before, html body header nav button.nav-toggle:hover:after { background-color: #ffffff; }
  html body header nav .nav { width: 220px; margin-top: 0; top: 56px; right: 12px; padding: 6px 0; background-color: #101216; border-top: 3px solid #e03131; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
  html body header nav .nav li { float: none; display: block; line-height: 1.2; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  html body header nav .nav li:last-child { border-bottom: 0; }
  html body header nav .nav li a { display: block; padding: 13px 16px; font-size: 14px; }
}

/* ---- contenitore: nessuna card, fondo bianco a piena larghezza ---- */
.est { background-color: #ffffff; color: #14161a; max-width: none; margin: 0; padding: 0 16px 40px; border-radius: 0; box-shadow: none; overflow: visible; font-size: 17px; line-height: 1.65; }
.est > * { max-width: 1020px; margin-left: auto; margin-right: auto; }

.est.est ul li, .est.est ol li { background: none; font-style: normal; padding-top: 0; }
.est.est p, .est.est li, .est.est td, .est.est th, .est.est summary { text-align: left; hyphens: none; font-family: inherit; }
.est.est p { max-width: 68ch; font-size: 17px; line-height: 1.68; color: #2a2e35; margin: 0 auto 18px; padding: 0; }
.est.est li { font-size: 17px; color: #2a2e35; }
/* i paragrafi di primo livello occupano l'asse dei titoli per intero:
   nessun rientro a destra, la riga finisce dove finiscono tabelle e filetti */
.est.est > p { max-width: 1020px; margin: 0 auto 20px; font-size: 19px; line-height: 1.68; }  /* riga piena fino all'asse: corpo e interlinea alzati per tenerla leggibile */
.est.est a { color: #c2255c; text-decoration: underline; text-underline-offset: 2px; }
.est.est strong { color: #101216; font-weight: 700; }

/* ---- mese automatico ----
   lo shortcode [month] dell'Optimizer restituisce il mese con l'iniziale
   maiuscola; in italiano, dopo una preposizione, va minuscolo. Qui il
   minuscolo è forzato una volta per tutte, senza dipendere dal plugin.
   Nei blocchi che il CSS rende maiuscoli (titoli, trust bar) eredita. */
.est .est-mese { text-transform: lowercase; }
.est.est h1 .est-mese, .est.est h2 .est-mese, .est.est h3 .est-mese, .est .est-trust .est-mese { text-transform: inherit; }

/* ---- titoli: Anton maiuscolo, filetto rosso pieno ---- */
.est.est h1, .est.est h2, .est.est h3 { font-family: 'Anton', Impact, sans-serif; font-weight: 400; color: #101216; background: none; text-shadow: none; text-transform: uppercase; letter-spacing: 0.005em; }
.est.est h2 { max-width: 1020px; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.04; margin: 56px auto 20px; padding: 0 0 10px; border-bottom: 4px solid #101216; position: relative; }
.est.est h2:after { content: ""; position: absolute; left: 0; bottom: -4px; width: 120px; height: 4px; background-color: #e03131; }
.est.est h3 { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.12; margin: 30px auto 10px; }

/* ---- hero: blocco nero a tutta larghezza ---- */
.est .est-hero { background-color: #101216; background-image: none; color: #ffffff; max-width: none; width: auto; margin: 0 -16px 34px; padding: 30px 16px 34px; border-radius: 0; border-bottom: 4px solid #e03131; }
.est .est-hero > * { max-width: 1020px; margin-left: auto; margin-right: auto; }
.est .est-trust { display: flex; flex-wrap: wrap; gap: 0; margin: 0 auto 18px; padding: 0; border: 0; }
.est .est-trust > span { display: inline-block; background-color: transparent; border-right: 1px solid rgba(255, 255, 255, 0.22); color: #c9ccd2; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 14px 0 0; margin: 0 14px 8px 0; white-space: nowrap; }
.est.est .est-hero h1 { color: #ffffff; font-size: clamp(32px, 6.6vw, 62px); line-height: 0.98; letter-spacing: -0.005em; margin: 0 auto 16px; max-width: 1020px; padding: 0; border: 0; }  /* larghezza piena dell'asse, allineato a logo e trust bar */
.est.est .est-hero h1:after { display: none; }
.est.est .est-hero p { color: #b9bdc4; font-size: 18.5px; line-height: 1.55; margin: 0 auto; max-width: 1020px; font-weight: 500; }

/* ---- TOC: nastro di link ---- */
.est.est .est-toc { max-width: 1020px; margin: 0 auto 40px; background-color: #f4f4f2; border: 0; border-top: 2px solid #101216; border-bottom: 2px solid #101216; border-radius: 0; padding: 12px 0 6px; line-height: 1; }
.est.est .est-toc a { display: inline-block; background: none; border: 0; color: #101216; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; padding: 6px 0; margin: 0 22px 6px 0; border-bottom: 2px solid transparent; }
.est.est .est-toc a:hover { border-bottom-color: #e03131; }

/* ---- tabelle: righe nette, zero arrotondamenti ---- */
.est .est-tablewrap { max-width: 1020px; margin: 24px auto 12px; overflow-x: auto; border: 0; border-top: 3px solid #101216; border-radius: 0; }
.est table.est-rank, .est table.est-data { width: 100%; border-collapse: collapse; background-color: #ffffff; margin: 0; }
.est.est table.est-rank th, .est.est table.est-data th { background-color: #ffffff; color: #6a7078; text-align: left; padding: 12px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 0; border-bottom: 1px solid #101216; white-space: nowrap; }
.est.est table.est-rank td, .est.est table.est-data td { padding: 16px 14px; border: 0; border-bottom: 1px solid #dcdde0; vertical-align: middle; background-color: #ffffff; font-size: 16px; color: #2a2e35; }
.est.est table.est-data tbody tr:nth-child(even) td { background-color: #fafafa; }
.est.est table.est-rank tr.est-top td { background-color: #fff5f5; }
.est.est table.est-rank tbody td:first-child { font-family: 'Anton', Impact, sans-serif; font-size: 26px; color: #c8ccd2; width: 58px; text-align: left; line-height: 1; }
.est.est table.est-rank tbody tr:nth-child(1) td:first-child { color: #e03131; }
.est .est-op { font-family: 'Anton', Impact, sans-serif; font-size: 20px; text-transform: uppercase; color: #101216; white-space: nowrap; }
/* logo in classifica: inline accanto al nome, non rompe la cella della tabella */
.est .est-op img { display: inline-block; vertical-align: middle; width: 32px; height: 32px; border-radius: 2px; margin: -3px 10px 0 0; }
.est.est .est-vote { font-family: 'Anton', Impact, sans-serif; font-size: 24px; color: #101216; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est.est .est-stamp { max-width: 1020px; margin: 12px auto 0; font-size: 12.5px; color: #6a7078; }

/* ---- CTA: rettangolo rosso ---- */
.est.est a.est-go { display: inline-block; background-color: #e03131; background-image: none; color: #ffffff; font-family: 'Anton', Impact, sans-serif; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 22px; border-radius: 2px; text-decoration: none; white-space: nowrap; box-shadow: none; transition: background-color 120ms linear; }
.est.est a.est-go:hover { background-color: #101216; color: #ffffff; }

/* ---- scheda operatore: blocco a filetti, niente ombre ---- */
.est .opcard { max-width: 1020px; margin: 0 auto; background-color: #ffffff; border: 0; border-top: 1px solid #dcdde0; border-radius: 0; overflow: visible; box-shadow: none; padding: 8px 0 26px; }
.est .opcard .ophead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; background: none; border: 0; padding: 20px 0 14px; }
/* riquadro del logo operatore: l'immagine ha già il fondo del brand */
.est .opcard .oplogo { width: 54px; height: 54px; border-radius: 2px; background: none; overflow: hidden; flex: 0 0 auto; box-shadow: none; }
.est .opcard .oplogo img { display: block; width: 54px; height: 54px; object-fit: cover; }
.est .opcard .opname { flex: 1 1 180px; min-width: 0; }
.est.est .opcard .opname h3 { margin: 0; font-size: 26px; }
/* la tagline della scheda operatore è dentro un <p> (chiuso da wpautop):
   va sottratta alle regole della prosa, altrimenti si centra */
.est.est .opcard .opname p { max-width: none; margin: 0; padding: 0; }
.est .opcard .opname p > span { display: block; font-size: 13.5px; color: #6a7078; margin-top: 2px; font-weight: 500; }
.est .opcard .opvote { flex: 0 0 auto; text-align: right; background: none; border: 0; border-left: 3px solid #e03131; border-radius: 0; padding: 2px 0 2px 14px; min-width: 0; }
.est .opcard .opvote b { display: block; font-family: 'Anton', Impact, sans-serif; font-size: 34px; color: #101216; line-height: 0.9; font-variant-numeric: tabular-nums; }
.est .opcard .opvote span { font-size: 10px; color: #6a7078; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.est .opcard .opbody { padding: 0; }
.est.est .opcard .opbody p { max-width: 68ch; margin: 0 0 16px; }
.est .opcard .opfacts { display: flex; flex-wrap: wrap; gap: 0; padding: 4px 0 16px; }
.est .opcard .opfacts > span { background: none; border: 0; border-left: 2px solid #e03131; color: #14161a; border-radius: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 0 2px 10px; margin: 0 26px 8px 0; white-space: nowrap; }

.est .procon { display: flex; flex-direction: column; gap: 0; padding: 0 0 4px; }
.est .procon .pro, .est .procon .contro { background: none; border: 0; border-top: 2px solid #101216; border-radius: 0; padding: 12px 0 4px; flex: 1 1 0; }
.est .procon .contro { border-top-color: #e03131; }
.est .procon b { display: block; font-family: 'Anton', Impact, sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; }
.est .procon .pro b { color: #101216; }
.est .procon .contro b { color: #e03131; }
.est.est .procon ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.est.est .procon li { position: relative; margin: 0 0 6px; padding: 0 0 0 18px; font-size: 15px; line-height: 1.45; color: #2a2e35; background: none; font-style: normal; }
.est .procon .pro li:before { content: "+"; position: absolute; left: 0; top: 0; color: #101216; font-weight: 700; }
.est .procon .contro li:before { content: "−"; position: absolute; left: 0; top: 0; color: #e03131; font-weight: 700; }

/* ---- callout ---- */
.est .est-note { max-width: 1020px; position: relative; background-color: #f4f4f2; border: 0; border-left: 5px solid #e03131; border-radius: 0; padding: 16px 18px; margin: 26px auto; }
.est .est-note:before { display: none; }
.est.est .est-note p { max-width: none; margin: 0; font-size: 16px; color: #2a2e35; font-weight: 500; }

/* ---- step ---- */
.est.est ol.est-steps { list-style: none; max-width: 1020px; margin: 24px auto; padding: 0; counter-reset: step; }
.est.est ol.est-steps li { counter-increment: step; position: relative; padding: 0 0 22px 62px; margin: 0; background: none; font-style: normal; }
.est.est ol.est-steps li:before { content: counter(step); position: absolute; left: 0; top: -4px; font-family: 'Anton', Impact, sans-serif; font-size: 34px; color: #e03131; line-height: 1; }
.est.est ol.est-steps li:after { display: none; }

/* ---- griglia criteri ---- */
.est .est-grid { display: grid; grid-template-columns: 1fr; gap: 0 34px; max-width: 1020px; margin: 26px auto; }
.est .est-grid .cell { background: none; border: 0; border-top: 2px solid #101216; border-radius: 0; padding: 14px 0 20px; }
.est.est .est-grid .cell h3 { max-width: none; margin: 0 0 8px; padding: 0; font-size: 19px; line-height: 1.15; }
.est.est .est-grid .cell h3:before { display: none; }
.est.est .est-grid .cell p { max-width: none; margin: 0; font-size: 15.5px; line-height: 1.55; color: #4a5058; }

/* ---- liste ---- */
.est ul.est-list { max-width: 68ch; margin: 16px auto; padding-left: 20px; list-style: square; }
.est.est ul.est-list li { margin: 8px 0; padding-left: 0; background: none; font-style: normal; }
.est.est ul.est-list li:before { content: none; }
.est.est ul.est-list li::marker { color: #e03131; }

/* ---- FAQ ---- */
.est details.est-faq { max-width: 1020px; margin: 0 auto; background: none; border: 0; border-bottom: 1px solid #dcdde0; border-radius: 0; }
.est.est details.est-faq summary { display: block; list-style: none; position: relative; cursor: pointer; font-family: 'Anton', Impact, sans-serif; font-size: 19px; text-transform: uppercase; color: #101216; padding: 18px 46px 18px 0; }
.est.est details.est-faq summary::-webkit-details-marker { display: none; }
.est.est details.est-faq summary:after { content: "+"; position: absolute; right: 4px; top: 50%; margin-top: -16px; width: 30px; height: 30px; background: none; border: 0; color: #e03131; font-size: 30px; line-height: 28px; text-align: center; }
.est.est details.est-faq[open] summary:after { content: "−"; }
.est.est details.est-faq div { padding: 0 0 18px; }
.est.est details.est-faq div p { max-width: 68ch; margin: 0; font-size: 16px; }

/* ---- legal ---- */
.est .est-legal { max-width: 1020px; margin: 48px auto 0; padding: 18px 0 0; background: none; border: 0; border-top: 3px solid #101216; border-radius: 0; }
.est.est .est-legal p { max-width: none; margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; color: #6a7078; }

/* ---- footer ---- */
html body footer { background-color: #101216 !important; background-image: none !important; border-top: 4px solid #e03131; min-height: 0; padding: 26px 0 18px; }
html body footer .container { max-width: 1020px; background-image: none !important; min-height: 0 !important; padding-left: 16px; padding-right: 16px; }
html body footer, html body footer p, html body footer a, html body footer div, html body footer span { font-family: inherit; }
html body footer .rg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
html body footer .rg-bar p { flex: 1 1 300px; margin: 0; color: #c9ccd2 !important; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left; }
html body footer .rg-bar a { color: #ff8787 !important; }
html body footer .legal-note { margin: 0 0 12px; color: #8a9098 !important; font-size: 12px; line-height: 1.5; text-align: left; }
html body footer .container .bottom p { color: #8a9098 !important; font-size: 12.5px; }
html body footer .container .bottom a { color: #d7d9dd !important; font-size: 12.5px; text-decoration: none; }
html body footer .container .bottom a:hover { color: #ffffff !important; }
.btt { background-color: #e03131 !important; background-image: none !important; border-radius: 2px; text-indent: 0 !important; font-size: 0; box-shadow: none; }
.btt:after { content: "\2191"; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #ffffff; font-size: 22px; font-weight: 700; text-indent: 0 !important; }

/* ---- mobile: classifica in blocchi ---- */
@media (max-width: 767px) {
  .est.est table.est-rank { display: block; }
  .est.est table.est-rank thead { display: none; }
  .est.est table.est-rank tbody, .est.est table.est-rank tr { display: block; }
  .est.est table.est-rank tbody { counter-reset: rank; }
  .est.est table.est-rank tr { counter-increment: rank; border-bottom: 3px solid #101216; padding: 14px 0 16px; }
  .est.est table.est-rank tr.est-top { background: none; }
  .est.est table.est-rank td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; border-bottom: 1px solid #ececee; background: none !important; font-size: 15.5px; }
  .est.est table.est-rank td:nth-child(3):before { content: "Bonus"; }
  .est.est table.est-rank td:nth-child(4):before { content: "Payout Serie A"; }
  .est.est table.est-rank td:nth-child(5):before { content: "Streaming"; }
  .est.est table.est-rank td:nth-child(6):before { content: "Cash out"; }
  .est.est table.est-rank td:nth-child(7):before { content: "Voto"; }
  .est.est table.est-rank td:before { color: #6a7078; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .est.est table.est-rank td:first-child { display: none; }
  .est.est table.est-rank td:nth-child(2) { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 0 0 10px; border-bottom: 2px solid #101216; }
  .est.est table.est-rank td:nth-child(2):before { content: counter(rank); font-family: 'Anton', Impact, sans-serif; font-size: 26px; color: #e03131; letter-spacing: 0; text-transform: none; }
  .est.est table.est-rank td:last-child { display: block; padding: 14px 0 0; border: 0; }
  .est.est table.est-rank td:last-child:before { content: none; }
  .est.est a.est-go { display: block; text-align: center; padding: 14px; font-size: 15px; }
}

@media (min-width: 768px) {
  .est { padding: 0 24px 48px; }
  .est .est-hero { margin: 0 -24px 40px; padding: 44px 24px 46px; }
  .est .procon { flex-direction: row; gap: 34px; }
  .est .est-grid { grid-template-columns: 1fr 1fr; }
  .est .opcard .ophead { flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
  .est { padding: 0 32px 64px; }
  .est .est-hero { margin: 0 -32px 48px; padding: 58px 32px 60px; }
  .est .est-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }
}