/*
 * e23-2026.css — Estilo 2026 de elopi23.com (el de la portada viva), para el resto de páginas (10-10-2026) 🎨
 * Solo actúa en páginas cuyo <body> lleva la clase «e23v2»: así se pasa la web por tandas sin romper nada.
 *   Tanda 1 → artículos (articulo.php)
 * Colores y letras: los mismos que assets/e23-portada.css.
 */
body.e23v2{
  --bg:#0B0B0D;--card:#16161A;--card2:#1D1D22;--line:#26262C;--tx:#F2F2F2;--dim:#A3A3AB;--dim2:#6E6E78;
  --red:#E0141E;--gold:#F5C451;--wa:#25D366;--r2:18px;
  --fd:'Saira Condensed',sans-serif;--fi:'Saira Condensed',sans-serif;--fb:'Barlow',system-ui,-apple-system,sans-serif;
  --border:#26262C;--card-bg:#16161A;
  --ease2:cubic-bezier(.2,.8,.2,1);
  background:var(--bg);color:var(--tx);font-family:var(--fb);-webkit-font-smoothing:antialiased;
}
body.e23v2::before{display:none}
.e23v2.s-sporting,.e23v2 .s-sporting{--sc:#ff4d55}.e23v2.s-hypermotion,.e23v2 .s-hypermotion{--sc:#5EA8FF}.e23v2.s-futbol,.e23v2 .s-futbol{--sc:#9BE15D}.e23v2.s-cuanto-cobra,.e23v2 .s-cuanto-cobra{--sc:#F5C451}.e23v2.s-fuera-de-juego,.e23v2 .s-fuera-de-juego{--sc:#C69CFF}

/* ───────────── ARTÍCULO ───────────── */

/* Fuera lo duplicado bajo el menú (ya hay menú y miga de pan) */
.e23v2 .topnav,.e23v2 > .breadcrumb{display:none}

.e23v2 .read-progress{height:3px;background:linear-gradient(90deg,var(--red),var(--gold))}

.e23v2 .art-outer{max-width:760px;padding:14px 16px 40px}
.e23v2 .art-wrap{background:none;border:0;border-radius:0;padding:0}
@media(max-width:700px){.e23v2 .art-wrap{padding:0}}

.e23v2 .art-breadcrumb{font-family:var(--fb);font-size:12.5px;margin-bottom:14px}
.e23v2 .art-breadcrumb a{color:var(--dim)}
.e23v2 .bc-current{color:var(--dim2)}

/* Foto de portada: a sangre en el móvil, con esquinas en escritorio */
.e23v2 .art-wrap > figure{margin:0 0 22px!important}
.e23v2 .art-wrap > figure img{border-radius:var(--r2)!important;box-shadow:0 20px 50px rgba(0,0,0,.45)}
@media(max-width:700px){
  .e23v2 .art-wrap > figure{margin:0 -16px 20px!important}
  .e23v2 .art-wrap > figure img{border-radius:0!important}
  .e23v2 .art-wrap > figure figcaption{padding:0 16px}
}

/* Categoría como píldora del color de su sección */
.e23v2 .art-category{display:inline-flex;align-items:center;gap:7px;font:800 12px/1 var(--fb);letter-spacing:.8px;text-transform:uppercase;color:var(--sc,var(--red));background:color-mix(in srgb,var(--sc,#E0141E) 12%,transparent);border:1px solid color-mix(in srgb,var(--sc,#E0141E) 35%,transparent);padding:7px 11px;border-radius:99px;margin:0}
.e23v2 .art-category::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sc,var(--red))}

.e23v2 .art-title{font-family:var(--fd);font-weight:900;font-size:clamp(34px,7.4vw,56px);line-height:1.02;letter-spacing:-.4px;margin:6px 0 16px;text-wrap:balance}

.e23v2 .art-meta{gap:8px 10px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.e23v2 .art-author-name{font-size:14px;font-weight:700;color:var(--tx)}
.e23v2 .art-date,.e23v2 .read-time{font-size:13px;color:var(--dim)}
.e23v2 .read-time svg{fill:var(--dim)}
.e23v2 .art-dot{color:var(--dim2)}
.e23v2 .cm-chip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:5px 11px}

/* Resumen */
.e23v2 .ai-summary{background:var(--card)!important;border:1px solid var(--line)!important;border-left:3px solid var(--gold)!important;border-radius:16px!important}
.e23v2 .ai-summary-label{color:var(--gold)}
.e23v2 .ai-summary-list li{font-size:15px;color:#d8d8de}
.e23v2 .ai-summary-list li::before{color:var(--gold)}

/* Cuerpo */
.e23v2 .art-body p{font-family:var(--fb);font-size:19px;line-height:1.72;color:#E4E1DC;margin-bottom:22px}
@media(max-width:700px){.e23v2 .art-body p{font-size:18px}}
.e23v2 .art-body li{font-family:var(--fb)}
.e23v2 .art-body h2{font-family:var(--fd);font-weight:800;font-size:32px;line-height:1.08;letter-spacing:-.2px;margin:46px 0 16px;text-wrap:balance}
.e23v2 .art-body h2::after{width:48px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--gold))}
.e23v2 .art-body h3{font-family:var(--fd);font-weight:800;font-size:23px;line-height:1.15;margin:26px 0 10px}
.e23v2 .art-body .mw-lede{font-size:21px;color:#c9c5be}
.e23v2 .art-body img{border-radius:14px}
.e23v2 .art-body a{color:#ffd9d6;box-shadow:inset 0 -.5em 0 rgba(224,20,30,.22)}
.e23v2 .art-body a:hover{box-shadow:inset 0 -1.6em 0 rgba(224,20,30,.45)}

.e23v2 .art-destacado{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:16px;padding:18px 20px;margin:30px 0}
.e23v2 .art-broma{background:#141210;border:1px dashed #3a3324;border-radius:16px;color:#e9dfc6}
.e23v2 .mw-keys{border-radius:16px}
.e23v2 .mw-card,.e23v2 .mw-faq,.e23v2 .conv-faq{background:var(--card);border-color:var(--line);border-radius:16px}
.e23v2 .art-body table{border-radius:14px;overflow:hidden}
.e23v2 .mw-table th{font-family:var(--fb);font-weight:700}

/* Etiquetas y compartir */
.e23v2 .art-tags{border-top:1px solid var(--line)}
.e23v2 .art-tag{background:var(--card);border:1px solid var(--line);border-radius:99px;color:var(--dim);font-weight:600}
.e23v2 .share-block{border-top:1px solid var(--line);gap:8px}
.e23v2 .share-label{font-family:var(--fb);color:var(--dim2)}
.e23v2 .share-btn{border-radius:99px;font-family:var(--fb);font-weight:700;transition:transform .15s var(--ease2)}
.e23v2 .share-btn:active{transform:scale(.95)}
.e23v2 .share-copy{background:var(--card2);border-color:var(--line)}
.e23v2 .art-wa-cta{border-radius:18px!important}
.e23v2 .hm-hub-cta{border-radius:18px!important}
.e23v2 .back-link{border-radius:99px;border-color:var(--line);color:var(--dim)}

/* Relacionados: tarjetas con foto que se deslizan */
.e23v2 .related-section{margin:40px 0 0;padding:0;border:0;background:none;border-radius:0}
@media(max-width:700px){.e23v2 .related-section{margin:34px 0 0;padding:0}}
.e23v2 .related-eyebrow{font:900 26px/1 var(--fd);letter-spacing:-.2px;text-transform:lowercase;color:var(--tx);margin-bottom:12px}
.e23v2 .related-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:2px 16px 8px;scroll-padding:0 16px}
.e23v2 .related-grid::-webkit-scrollbar{display:none}
.e23v2 .related-card{flex:0 0 72%;max-width:280px;scroll-snap-align:start;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:16px;transition:transform .15s var(--ease2),border-color .2s}
@media(min-width:760px){.e23v2 .related-card{flex-basis:31%}}
.e23v2 .related-card:hover{transform:translateY(-3px);border-color:#3a3a42}
.e23v2 .related-card:active{transform:scale(.97)}
.e23v2 .related-card .rc-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block;background:var(--card2)}
.e23v2 .related-card-cat{font:800 11px/1 var(--fd);letter-spacing:.6px;text-transform:uppercase;color:var(--sc,var(--red));padding:12px 12px 5px}
.e23v2 .related-card-titulo{font-family:var(--fb);font-size:15px;font-weight:700;line-height:1.25;color:var(--tx);padding:0 12px}
.e23v2 .related-card-fecha{font-size:12px;color:var(--dim2);padding:6px 12px 13px;margin-top:auto}

/* Lo más leído ahora (tendencias de la portada) */
.e23v2 .e23-tend{margin:36px 0 0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 16px 8px}
.e23v2 .e23-tend h2{font:900 24px/1 var(--fd);text-transform:lowercase;margin:0 0 4px;color:var(--tx)}
.e23v2 .e23-tend p{font-size:13.5px;color:var(--dim);margin:0 0 8px}
.e23v2 .e23-tend ol{list-style:none;margin:0;padding:0}
.e23v2 .e23-tend li a{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--tx)}
.e23v2 .e23-tend li:first-child a{border-top:0}
.e23v2 .e23-tend b{font:900 30px/.9 var(--fd);width:26px;text-align:center;flex-shrink:0;color:transparent;-webkit-text-stroke:1.4px var(--red)}
.e23v2 .e23-tend li:first-child b{color:var(--red)}
.e23v2 .e23-tend span{font-weight:700;font-size:15px;line-height:1.25}
.e23v2 .e23-tend em{display:block;font-style:normal;font-size:12px;color:#9BE15D;font-weight:700;margin-top:3px}

.e23v2 .stt{background:var(--card2);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.e23v2 .stt svg{fill:var(--tx)}

@media(prefers-reduced-motion:reduce){.e23v2 .related-card,.e23v2 .share-btn{transition:none}}

/* ───────────── LISTADO DE ARTÍCULOS (tanda 2) ───────────── */
.e23v2 .al{max-width:1100px;margin:0 auto;padding:22px 16px 48px}
.e23v2 .al a{text-decoration:none;color:inherit}
.e23v2 .al-eyebrow{display:flex;align-items:center;gap:10px;font:800 12px/1 var(--fb);letter-spacing:.8px;text-transform:uppercase;color:var(--red)}
.e23v2 .al-lang{margin-left:auto;border:1px solid var(--line);border-radius:99px;padding:5px 11px;font-size:12px;color:var(--dim)!important;letter-spacing:0}
.e23v2 .al-h1{font:900 clamp(40px,8vw,64px)/1 var(--fd);letter-spacing:-.5px;text-transform:lowercase;margin:8px 0 8px;color:var(--tx)}
.e23v2 .al-sub{font-size:16px;color:var(--dim);margin:0 0 14px;max-width:560px}
.e23v2 .al-stats{display:flex;gap:8px;margin-bottom:18px}
.e23v2 .al-stats span{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:13px;color:var(--dim)}
.e23v2 .al-stats b{color:var(--tx);font-weight:800}
.e23v2 .al-note{font-size:12.5px;color:var(--dim2);margin:0 0 16px}
.e23v2 .al-tools{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.e23v2 .al-buscar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 14px;color:var(--dim);transition:border-color .2s}
.e23v2 .al-buscar:focus-within{border-color:#4a4a52}
.e23v2 .al-buscar input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font:500 16px var(--fb);padding:13px 0}
.e23v2 .al-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.e23v2 .al-chips::-webkit-scrollbar{display:none}
.e23v2 .al-chips .tab{flex:0 0 auto;font:700 13.5px/1 var(--fb);letter-spacing:0;text-transform:none;padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--dim);cursor:pointer;transition:all .2s var(--ease2)}
.e23v2 .al-chips .tab.active{background:#fff;border-color:#fff;color:#0B0B0D}
.e23v2 .no-results{display:none;text-align:center;padding:40px 16px;color:var(--dim)}
.e23v2 .no-results.show{display:block}

.e23v2 .al-grid{display:grid;gap:10px}
.e23v2 .al-card{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:9px;transition:transform .15s var(--ease2),border-color .2s;animation:alIn .4s var(--ease2) both}
.e23v2 .al-card.hidden{display:none}
.e23v2 .al-card:active{transform:scale(.985)}
@media(hover:hover){.e23v2 .al-card:hover{border-color:#3a3a42}.e23v2 .al-card:hover .al-img{transform:scale(1.04)}}
@keyframes alIn{from{opacity:0;transform:translateY(8px)}}
.e23v2 .al-img{width:108px;height:81px;flex-shrink:0;border-radius:11px;object-fit:cover;background:var(--card2);transition:transform .4s var(--ease2)}
.e23v2 .al-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.e23v2 .al-k{display:flex;align-items:center;gap:8px;font-size:11.5px}
.e23v2 .al-cat{font:800 11px/1 var(--fd);letter-spacing:.6px;text-transform:uppercase;color:var(--sc,var(--red))}
.e23v2 .al-f{color:var(--dim2)}
.e23v2 .al-t{font:700 16px/1.25 var(--fb);color:var(--tx);margin:0;letter-spacing:0;text-transform:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.e23v2 .al-d{display:none;font-size:14px;color:var(--dim);line-height:1.45}

/* El más nuevo, a lo grande */
.e23v2 .al-card.al-top{position:relative;display:block;padding:0;overflow:hidden;border-radius:20px;aspect-ratio:4/5}
.e23v2 .al-top .al-img{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.e23v2 .al-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.6) 60%,rgba(11,11,13,.97))}
.e23v2 .al-top .al-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px}
.e23v2 .al-top .al-t{font:800 28px/1.04 var(--fd);-webkit-line-clamp:4}
.e23v2 .al-top .al-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#cfcfd4}
.e23v2 .al-top .al-k{order:-1}

@media(min-width:760px){
  .e23v2 .al-tools{flex-direction:row;align-items:center}
  .e23v2 .al-buscar{flex:0 0 320px}
  .e23v2 .al-chips{margin:0;padding:0}
  .e23v2 .al-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .e23v2 .al-card{flex-direction:column;padding:0;overflow:hidden;gap:0}
  .e23v2 .al-card:not(.al-top) .al-img{width:100%;height:auto;aspect-ratio:4/3;border-radius:0}
  .e23v2 .al-card:not(.al-top) .al-txt{padding:12px 14px 16px;gap:6px}
  .e23v2 .al-card:not(.al-top) .al-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .e23v2 .al-card.al-top{grid-column:1/-1;aspect-ratio:21/9}
  .e23v2 .al-top .al-txt{padding:28px;max-width:780px}
  .e23v2 .al-top .al-t{font-size:42px}
}
.e23v2 .al-mas{display:block;width:100%;max-width:420px;margin:22px auto 0;background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:99px;padding:13px;font:800 15px var(--fb);cursor:pointer;transition:transform .15s var(--ease2)}
.e23v2 .al-mas:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.e23v2 .al-card{animation:none}}

/* ───────────── HYPERMOTION (tanda 3): hub, jornadas, partidos, equipos, goleadores, bajas, mercado… ───────────── */
/* Estas páginas ya tiran de variables (--bg, --bg2, --border, --red, --text, --muted): las pasamos a la paleta nueva */
body.e23hm{
  --bg:#0B0B0D;--bg2:#16161A;--bg3:#1D1D22;--border:#26262C;--red:#E0141E;--text:#F2F2F2;--muted:#A3A3AB;--gold:#F5C451;
  --fi:'Barlow',system-ui,sans-serif;--r:16px;--rad-md:14px;--rad-lg:18px;
  background:#0B0B0D!important;font-family:'Barlow',system-ui,-apple-system,sans-serif!important;
}
body.e23hm::before{display:none}
body.e23hm h1{font-family:'Saira Condensed',sans-serif;font-weight:900;letter-spacing:-.4px;line-height:1.02;text-wrap:balance}
body.e23hm h2{font-family:'Saira Condensed',sans-serif;letter-spacing:-.1px;text-wrap:balance}
body.e23hm table{font-variant-numeric:tabular-nums}
body.e23hm main a,body.e23hm .wrap a{transition:color .15s,border-color .2s,transform .15s}
body.e23hm img{max-width:100%}
body.e23hm details>summary{cursor:pointer}
body.e23hm .enav{display:none}
body.e23hm h1{font-weight:900!important}
/* Jornada */
body.e23hm .jw{max-width:860px;padding-top:22px}
body.e23hm .jhdr h1{font-size:clamp(34px,7vw,52px)}
body.e23hm .jsub{font-size:15px}
body.e23hm .jnav a{border-radius:99px;background:var(--bg2);font-family:'Barlow',sans-serif}
body.e23hm .jw .mlist{gap:10px}
body.e23hm .jw .mcard{border-radius:16px;padding:14px 16px;transition:transform .15s cubic-bezier(.2,.8,.2,1),border-color .2s}
@media(hover:hover){body.e23hm .jw .mcard:hover{transform:translateY(-2px);border-color:#3a3a42}}
body.e23hm .jw .mside img{width:32px;height:32px}
body.e23hm .jw .mside a{font-size:15px}
body.e23hm .jw .mscore{font:900 28px/1 'Saira Condensed',sans-serif;letter-spacing:1px}
body.e23hm .jw .mcard.derbi{background:linear-gradient(135deg,#2a0a0d,#16161A 65%)}

/* ───────────── SPORTING (tanda 4): cuándo juega, partido, jugadores, tu once, notas, porra ───────────── */
body.cjs .w{max-width:780px}
body.e23hm .w > h1,body.e23hm .wrap > h1{font-size:clamp(34px,7vw,52px)!important;margin:8px 0 16px}
/* ¿Cuándo juega? */
body.e23hm .answer{background:var(--bg2);border-radius:18px;font-size:18px;line-height:1.5}
body.cjs .w > .card{position:relative;overflow:hidden;border-radius:20px;padding:26px 18px;background:linear-gradient(135deg,#2a0a0d 0%,#16161A 62%);border-color:#3a1418}
body.cjs .w > .card .team img{width:84px;height:84px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
body.cjs .w > .card .team a{font:800 19px/1.1 'Saira Condensed',sans-serif}
body.cjs .w > .card .mid .vs{font:900 26px/1 'Saira Condensed',sans-serif;color:#6E6E78}
body.cjs .w > .card .mid .when{font-size:14px;max-width:170px}
.cjs-cd{display:flex;justify-content:center;gap:8px;margin:-6px 0 18px}
.cjs-cd span{background:var(--bg2,#16161A);border:1px solid var(--border,#26262C);border-radius:12px;padding:8px 10px;text-align:center;min-width:64px}
.cjs-cd b{display:block;font:800 28px/1 'Saira Condensed',sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.cjs-cd small{font-size:10.5px;color:#A3A3AB;text-transform:uppercase;letter-spacing:.5px}
body.e23hm .meta .chip{padding:8px 14px}
body.e23hm .plist{gap:10px}
body.e23hm .prow{border-radius:14px;padding:12px 14px;transition:transform .15s cubic-bezier(.2,.8,.2,1),border-color .2s}
@media(hover:hover){body.e23hm .prow:hover{transform:translateY(-2px)}}
body.e23hm .prow img{width:30px;height:30px}
body.e23hm .faq h3{font-family:'Barlow',sans-serif!important;font-size:16px}

/* ───────────── TIENDA, ZAPATILLAS, PÁDEL, GYM, CGM (tanda 5) ───────────── */
body.e23shop .w > h1{margin-top:4px}
body.e23shop .card,body.e23shop .mod,body.e23shop .zap-duo,body.e23shop .look{border-radius:18px;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
@media(hover:hover){body.e23shop .card:hover,body.e23shop .mod:hover,body.e23shop .zap-duo:hover{transform:translateY(-3px);border-color:#3a3a42;box-shadow:0 14px 34px rgba(0,0,0,.45)}}
body.e23shop .card:active,body.e23shop .mod:active{transform:scale(.98)}
body.e23shop .grid{gap:14px}
body.e23shop .fbtn{font-family:'Barlow',sans-serif;font-weight:700}
body.e23shop .resp,body.e23shop .truco{border-radius:0 16px 16px 0}
body.e23shop .codebar,body.e23shop .codebox{border-radius:18px}
body.e23shop .stats > *{border-radius:99px}