/* =========================================================
   OddsLab — hoja de estilo
   Oscuro y denso a propósito: es una herramienta de datos,
   no un folleto. Los números mandan sobre la decoración.
   ========================================================= */

:root{
  --bg:      #0A0E15;
  --bg-2:    #111726;
  --bg-3:    #18202F;
  --bg-4:    #1F2938;

  --linea:   rgba(255,255,255,.085);
  --linea-2: rgba(255,255,255,.045);

  --ink:     #EDF2FA;
  --ink-2:   #B4C0D2;
  --ink-3:   #7D8AA2;

  /* Tomados del logotipo: el verde de "Odds" y el cian de la Z */
  --val:     #19E68C;   /* verde de marca · valor positivo */
  --val-d:   #0E8E58;
  --cian:    #0FD4E0;   /* cian de marca */
  --acc:     #0FD4E0;   /* acento = cian de marca */
  --grad:    linear-gradient(135deg, #0FD4E0 0%, #19E68C 100%);
  --avi:     #F5A524;
  --mal:     #F2565C;

  /* Dos familias con trabajos distintos: Archivo manda en los titulares,
     Plex Sans se lee sin cansar en los párrafos y Plex Mono alinea cifras. */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 10px;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --max: 1320px;
  --ease: cubic-bezier(.2,.8,.3,1);

  /* El diseño es oscuro a propósito: que los controles nativos lo sepan */
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans); font-size:16px; line-height:1.62;
  color:var(--ink);
  background:
    radial-gradient(900px 480px at 12% -6%, rgba(15,212,224,.075), transparent 60%),
    radial-gradient(760px 420px at 88% 3%, rgba(25,230,140,.06), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
}
img,svg{ display:block; max-width:100%; }
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }
h1,h2,h3,h4{ font-family:var(--display); text-wrap:balance; }
h1{ font-size:clamp(1.55rem,3.2vw,2.05rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
h2{ font-size:1.25rem; font-weight:700; letter-spacing:-.012em; }
h3{ font-size:1.02rem; font-weight:600; letter-spacing:-.008em; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--acc); color:#fff; padding:.6rem 1rem; border-radius:6px; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }

.env{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.env-estrecho{ max-width:760px; }
.sub{ color:var(--ink-2); font-size:.95rem; margin-top:.3rem; max-width:62ch; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- cinta de demo ---------- */
.demo-cinta{
  background:linear-gradient(90deg,#3B2A05,#4A3408);
  border-bottom:1px solid rgba(245,165,36,.3);
  color:#F7CE7A; font-size:.76rem; letter-spacing:.02em;
  padding:.45rem var(--gut); display:flex; gap:.6rem; justify-content:center;
  flex-wrap:wrap; text-align:center;
}
.demo-cinta strong{ color:var(--avi); letter-spacing:.14em; font-weight:700; }

/* ---------- cabecera ---------- */
.cab{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:60; background:rgba(10,14,21,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea); }
.cab-in{ max-width:var(--max); margin-inline:auto; padding:.7rem var(--gut); display:flex; align-items:center; gap:1.4rem; }
.marca{ display:flex; align-items:center; flex-shrink:0; line-height:0; }
.marca img{ width:auto; }
.marca .marca-lockup{ display:block; height:30px; }
.marca .marca-simbolo{ display:none; height:26px; }
@media (max-width:539px){
  .marca .marca-lockup{ display:none; }
  .marca .marca-simbolo{ display:block; }
}

.nav{ display:none; gap:.3rem; margin-right:auto; }
.nav a{
  font-family:var(--display); font-weight:500;
  font-size:.88rem; color:var(--ink-2); padding:.42rem .7rem; border-radius:7px;
  transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--ink); background:var(--bg-3); }
.nav a.activo{ color:var(--ink); background:var(--bg-3); }

.cab-der{ display:flex; align-items:center; gap:.55rem; margin-left:auto; flex-wrap:wrap; }
.selector select{
  background:var(--bg-3); border:1px solid var(--linea); color:var(--ink-2);
  border-radius:7px; padding:.38rem .45rem; font-size:.75rem; max-width:132px;
}
.idioma{ display:flex; flex:0 0 auto; border:1px solid var(--linea); border-radius:7px; overflow:hidden; }
.idioma button{ padding:.34rem .5rem; font-size:.72rem; font-weight:600; color:var(--ink-3); }
.idioma button.es-activo,.idioma button.en-activo{ background:var(--bg-4); color:var(--ink); }

.cuenta{ display:flex; align-items:center; gap:.45rem; }
.cuenta-ini{
  width:28px; height:28px; border-radius:50%; background:var(--acc); color:#fff;
  display:grid; place-items:center; font-size:.76rem; font-weight:700;
}
.cuenta-txt{ font-size:.75rem; color:var(--ink-2); white-space:nowrap; }
.cuenta-txt span:first-child{ color:var(--val); font-weight:700; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem 1rem; border-radius:8px; font-size:.86rem; font-weight:600;
  font-family:var(--display);
  border:1px solid var(--linea); background:var(--bg-3); color:var(--ink);
  transition:transform .18s var(--ease), background .2s, border-color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); background:var(--bg-4); }
.btn-sm{ padding:.4rem .75rem; font-size:.78rem; }
.btn-pri{ background:var(--val); color:#04120D; border-color:transparent; }
.btn-pri:hover{ background:#3CF0A2; }
.btn-gr{ background:var(--grad); color:#03140F; border-color:transparent; box-shadow:0 6px 24px rgba(25,230,140,.22); }
.btn-gr:hover{ filter:brightness(1.07); background:var(--grad); }
.btn-ghost{ background:transparent; }

/* ---------- vistas ---------- */
.vista{ padding-block:2rem 3.5rem; }
.vista[hidden]{ display:none; }
.titulo-fila{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between; margin-bottom:1.5rem; }

.deporte-tabs{ display:flex; gap:.25rem; background:var(--bg-2); padding:.25rem; border-radius:9px; border:1px solid var(--linea); }
.deporte-tabs button{ font-family:var(--display); padding:.4rem .85rem; border-radius:7px; font-size:.83rem; font-weight:600; color:var(--ink-3); transition:background .2s,color .2s; }
.deporte-tabs button.activo{ background:var(--bg-4); color:var(--ink); }

/* ---------- tarjetas de partido ---------- */
.partidos{ display:grid; gap:.6rem; }
.part{
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r);
  padding:.9rem 1.1rem; display:grid; gap:.85rem;
  transition:border-color .2s, background .2s;
}
.part:hover{ border-color:rgba(76,141,255,.35); background:var(--bg-3); }
.part-cab{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.part-liga{ font-family:var(--display); font-weight:500; font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--bg-4); padding:.18rem .5rem; border-radius:5px; }
.part-hora{ font-size:.75rem; color:var(--ink-3); font-family:var(--mono); }
.part-eq{ font-family:var(--display); font-size:1.02rem; font-weight:600; letter-spacing:-.012em; }
.part-eq span{ color:var(--ink-3); font-weight:400; margin-inline:.4rem; }
.part-mas{ margin-left:auto; font-size:.78rem; color:var(--acc); font-weight:600; }

.cuotas-fila{ display:flex; gap:.45rem; flex-wrap:wrap; }
.cuota{
  flex:1 1 120px; min-width:106px; background:var(--bg-3); border:1px solid var(--linea-2);
  border-radius:8px; padding:.5rem .65rem; display:flex; flex-direction:column; gap:.1rem;
  position:relative;
}
.cuota-et{ font-size:.68rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; }
.cuota-v{ font-family:var(--mono); font-size:1.02rem; font-weight:600; }
.cuota-casa{ font-size:.68rem; color:var(--ink-3); }
.cuota.tiene-valor{ border-color:rgba(46,216,167,.45); background:linear-gradient(180deg,rgba(46,216,167,.08),transparent); }
.cuota.tiene-valor .cuota-v{ color:var(--val); }
.insignia{
  position:absolute; top:-7px; right:7px; font-size:.62rem; font-weight:700;
  background:var(--val); color:#04120D; padding:.08rem .34rem; border-radius:4px;
  font-family:var(--mono);
}

/* ---------- detalle ---------- */
.det-cab{ margin-bottom:1.5rem; }
.volver{ font-size:.82rem; color:var(--ink-2); display:inline-block; margin-bottom:.8rem; }
.volver:hover{ color:var(--ink); }
.bloque{ background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r); padding:1.1rem; margin-bottom:1.1rem; }
.bloque h2{ margin-bottom:.9rem; }
.bloque-nota{ font-size:.82rem; color:var(--ink-3); margin-top:.7rem; }

.arb{
  background:linear-gradient(90deg,rgba(46,216,167,.14),rgba(46,216,167,.03));
  border:1px solid rgba(46,216,167,.4); border-radius:var(--r);
  padding:.85rem 1.1rem; margin-bottom:1.1rem; display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;
}
.arb strong{ color:var(--val); font-family:var(--mono); font-size:1.05rem; }
.arb-txt{ font-size:.86rem; color:var(--ink-2); }

/* ---------- tablas ---------- */
.tabla-env{ overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r); background:var(--bg-2); }
.tabla{ font-size:.86rem; min-width:860px; }
.tabla th{
  text-align:left; font-size:.69rem; letter-spacing:.09em; text-transform:uppercase;
  font-family:var(--display); color:var(--ink-3); font-weight:600; padding:.7rem .75rem;
  border-bottom:1px solid var(--linea); background:var(--bg-3); position:sticky; top:0;
}
.tabla th.num{ text-align:right; }
.tabla td{ padding:.6rem .75rem; border-bottom:1px solid var(--linea-2); vertical-align:middle; }
.tabla tbody tr:last-child td{ border-bottom:0; }
.tabla tbody tr:hover{ background:var(--bg-3); }
.tabla .mono{ font-family:var(--mono); }
.tabla .jug{ font-weight:600; }
.tabla .eq{ color:var(--ink-3); font-size:.78rem; }
.tabla .part-mini{ color:var(--ink-2); font-size:.8rem; }

.lado{ font-family:var(--mono); font-size:.78rem; font-weight:600; padding:.15rem .45rem; border-radius:5px; background:var(--bg-4); }
.lado.over{ color:#7DD3FC; }
.lado.under{ color:#FCA5A5; }

.val-pill{ font-family:var(--mono); font-weight:600; font-size:.82rem; }
.val-pos{ color:var(--val); }
.val-neg{ color:var(--ink-3); }

.racha-barra{ display:flex; gap:2px; align-items:center; }
.racha-p{ width:7px; height:16px; border-radius:2px; background:var(--bg-4); }
.racha-p.si{ background:var(--val); }
.racha-txt{ font-family:var(--mono); font-size:.76rem; color:var(--ink-2); margin-left:.4rem; }

.nota-tabla{ font-size:.8rem; color:var(--ink-3); margin-top:.7rem; }

/* ---------- filtros ---------- */
.panel-filtros{
  display:flex; gap:.9rem; flex-wrap:wrap; align-items:flex-end;
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r);
  padding:.9rem 1.1rem; margin-bottom:1rem;
}
.filtro{ display:flex; flex-direction:column; gap:.25rem; }
.filtro label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; }
.filtro select{ background:var(--bg-3); border:1px solid var(--linea); border-radius:7px; padding:.42rem .6rem; font-size:.84rem; min-width:140px; }
.filtro-buscar{ flex:1; min-width:200px; }
.busca-env{ position:relative; display:block; }
.busca-env svg{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--ink-3); pointer-events:none;
}
.panel-filtros .busca-env input{
  width:100%; background:var(--bg-3); border:1px solid var(--linea); border-radius:7px;
  padding:.42rem .6rem .42rem 2rem; font-size:.84rem;
}
.panel-filtros .busca-env input:focus{ border-color:rgba(25,230,140,.45); outline:none; }
.check{ display:flex; align-items:center; gap:.45rem; font-size:.84rem; color:var(--ink-2); cursor:pointer; padding-bottom:.42rem; }
.check input{ accent-color:var(--val); width:15px; height:15px; }
.check.bloqueado{ color:var(--ink-3); cursor:pointer; }
.candado{ width:13px; height:13px; color:var(--avi); }

/* ---------- chollos ---------- */
.chollos{ display:grid; gap:.7rem; grid-template-columns:1fr; }
.chollo{
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r);
  padding:1rem 1.1rem; display:grid; gap:.6rem; position:relative; overflow:hidden;
}
.chollo-top{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.chollo-val{ font-family:var(--mono); font-size:1.3rem; font-weight:600; color:var(--val); }
.chollo-jug{ font-weight:650; }
.chollo-ctx{ color:var(--ink-3); font-size:.82rem; }
.chollo-det{ display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.84rem; color:var(--ink-2); }
.chollo-det b{ font-family:var(--mono); color:var(--ink); font-weight:600; }
.chollo-exp{ font-size:.84rem; color:var(--ink-2); border-top:1px solid var(--linea-2); padding-top:.6rem; }

.chollo.oculto .chollo-top,.chollo.oculto .chollo-det,.chollo.oculto .chollo-exp{ filter:blur(6px); user-select:none; pointer-events:none; }
.chollo-muro{
  position:absolute; inset:0; display:grid; place-items:center; gap:.5rem;
  background:linear-gradient(180deg,rgba(10,14,21,.55),rgba(10,14,21,.9));
  text-align:center; padding:1rem;
}
.chollo-muro .candado{ width:20px; height:20px; }

/* ---------- combinada ---------- */
.comb{ background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r); padding:1.1rem; display:grid; gap:.8rem; margin-top:1.2rem; }
.comb-sel{ display:grid; gap:.5rem; }
.comb-fila{ display:flex; gap:.5rem; align-items:stretch; }
.comb-slot{
  flex:1; min-width:0; display:flex; align-items:center; gap:.8rem; text-align:left;
  background:var(--bg-3); border:1px solid var(--linea); border-radius:9px;
  padding:.65rem .8rem; transition:border-color .18s, background .18s;
}
.comb-slot:hover{ border-color:rgba(25,230,140,.4); background:var(--bg-4); }
.comb-slot.lleno{ border-color:rgba(25,230,140,.28); background:linear-gradient(180deg, rgba(25,230,140,.06), var(--bg-3)); }
.comb-slot-t{ display:grid; gap:.1rem; min-width:0; font-family:var(--display); font-weight:600; font-size:.92rem; }
.comb-slot-t small{
  font-family:var(--sans); font-weight:400; font-size:.76rem; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.comb-slot-v{ color:var(--ink-3); font-weight:500; }
.comb-slot-c{
  margin-left:auto; display:grid; justify-items:end; gap:.05rem; flex-shrink:0;
  font-family:var(--mono); font-size:1.05rem; font-weight:600; color:var(--val);
}
.comb-slot-c small{ font-family:var(--sans); font-size:.7rem; font-weight:400; color:var(--ink-3); }
.comb-slot-mas{ margin-left:auto; font-size:1.3rem; color:var(--ink-3); line-height:1; flex-shrink:0; }
.comb-x{ color:var(--ink-3); font-size:1.2rem; padding:0 .4rem; flex-shrink:0; }
.comb-x:hover{ color:var(--mal); }

/* ---------- selector de selección ---------- */
.modal-ancho .modal-caja{ width:min(620px,100%); }
.modal-sel{ padding:0; display:flex; flex-direction:column; max-height:min(80vh, 680px); gap:0; overflow:hidden; }
.sel-cab{
  display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.25rem .9rem;
  border-bottom:1px solid var(--linea); flex-shrink:0;
}
.sel-cab h2{ font-size:1.05rem; }
.sel-cab .modal-x{ position:static; margin-left:auto; }
.sel-buscar{ position:relative; padding:.85rem 1.25rem 0; flex-shrink:0; }
.sel-buscar svg{
  position:absolute; left:2rem; top:50%; transform:translateY(-50%); margin-top:.42rem;
  width:15px; height:15px; color:var(--ink-3); pointer-events:none;
}
.modal-sel .sel-buscar input{
  width:100%; background:var(--bg-3); border:1px solid var(--linea); border-radius:8px;
  padding:.6rem .8rem .6rem 2.4rem; font-size:.88rem;
}
.sel-filtros{ display:flex; gap:.3rem; padding:.8rem 1.25rem; flex-wrap:wrap; flex-shrink:0; }
.sel-filtros button{
  font-family:var(--display); font-size:.78rem; font-weight:600; color:var(--ink-3);
  padding:.32rem .7rem; border-radius:100px; border:1px solid var(--linea);
  transition:color .18s, background .18s, border-color .18s;
}
.sel-filtros button:hover{ color:var(--ink); }
.sel-filtros button.sel{ color:#03140F; background:var(--val); border-color:var(--val); }
.sel-lista{ overflow-y:auto; min-height:0; flex:1; padding:0 1.25rem 1.25rem; display:grid; gap:1rem; align-content:start; }
.sel-partido{ display:grid; gap:.45rem; }
.sel-ph{ display:flex; align-items:center; gap:.4rem; }
.sel-ph .escudo{ margin-right:-7px; }
.sel-pt{ font-family:var(--display); font-weight:600; font-size:.86rem; margin-left:.5rem; }
.sel-pm{ font-size:.72rem; color:var(--ink-3); margin-left:auto; text-align:right; }
.sel-chips{ display:grid; gap:.35rem; grid-template-columns:1fr; }
.sel-chip{
  display:flex; align-items:center; gap:.7rem; text-align:left; width:100%;
  background:var(--bg-3); border:1px solid var(--linea); border-radius:8px;
  padding:.55rem .75rem; transition:border-color .18s, background .18s;
}
.sel-chip:hover{ border-color:rgba(25,230,140,.45); background:var(--bg-4); }
.sel-chip.puesta{ border-color:var(--val); background:rgba(25,230,140,.1); }
.sel-ct{ display:grid; gap:.05rem; min-width:0; font-size:.87rem; font-weight:500; }
.sel-ct small{ font-size:.73rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sel-cc{
  margin-left:auto; display:grid; justify-items:end; gap:.02rem; flex-shrink:0;
  font-family:var(--mono); font-size:.95rem; font-weight:600;
}
.sel-cc small{ font-family:var(--sans); font-size:.68rem; font-weight:400; color:var(--ink-3); }
.sel-vacio{ padding:0 1.25rem 1.25rem; font-size:.88rem; color:var(--ink-3); }
@media (min-width:560px){
  .sel-chips{ grid-template-columns:repeat(2,1fr); }
}
.comb-res{ border-top:1px solid var(--linea); padding-top:.9rem; display:grid; gap:.5rem; }
.comb-linea{ display:flex; justify-content:space-between; font-size:.9rem; }
.comb-linea span:first-child{ color:var(--ink-2); }
.comb-linea b{ font-family:var(--mono); font-weight:600; }
.comb-ver{ font-size:.86rem; padding:.7rem .9rem; border-radius:8px; margin-top:.3rem; }
.comb-ver.bien{ background:rgba(46,216,167,.1); border:1px solid rgba(46,216,167,.35); color:#9FF0D8; }
.comb-ver.mal{ background:rgba(242,86,92,.08); border:1px solid rgba(242,86,92,.3); color:#F7B4B7; }

/* ---------- planes ---------- */
.planes{ display:grid; gap:1rem; margin-top:1.5rem; grid-template-columns:1fr; }
.plan{ background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r); padding:1.3rem; display:grid; gap:.8rem; align-content:start; }
.plan.destacado{ border-color:rgba(46,216,167,.45); background:linear-gradient(180deg,rgba(46,216,167,.06),var(--bg-2)); }
.plan-nom{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.plan-precio{ font-size:2rem; font-weight:700; letter-spacing:-.03em; font-family:var(--mono); }
.plan-precio small{ font-size:.82rem; color:var(--ink-3); font-weight:400; font-family:var(--sans); }
.plan ul{ list-style:none; display:grid; gap:.45rem; font-size:.88rem; color:var(--ink-2); }
.plan li{ display:flex; gap:.5rem; align-items:flex-start; }
.plan li::before{ content:"·"; color:var(--val); font-weight:700; }
.plan li.no{ color:var(--ink-3); }
.plan li.no::before{ content:"—"; color:var(--ink-3); }
.nota-legal{ font-size:.8rem; color:var(--ink-3); margin-top:1rem; }

/* ---------- anuncio ---------- */
.anuncio{
  margin-top:1.5rem; border:1px dashed var(--linea); border-radius:var(--r);
  background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 10px,var(--bg) 10px,var(--bg) 20px);
  min-height:92px; display:grid; place-items:center;
  color:var(--ink-3); font-size:.78rem; text-align:center; padding:1rem;
}

/* ---------- chat ---------- */
.chat-abrir{
  position:fixed; right:1rem; bottom:76px; z-index:70;
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1.1rem; border-radius:100px;
  background:var(--grad); color:#03140F; font-size:.84rem; font-weight:650;
  box-shadow:0 8px 28px rgba(25,230,140,.3);
  transition:transform .25s var(--ease);
}
.chat-abrir:hover{ transform:translateY(-2px); }
.chat-abrir svg{ width:17px; height:17px; }
.chat-abrir[hidden]{ display:none; }
/* En móvil el botón tapaba una de las cifras de la portada: ahí se queda
   solo el icono, que es lo que hacen las apps. */
@media (max-width:639px){
  .chat-abrir{ padding:0; width:50px; height:50px; justify-content:center; border-radius:50%; }
  .chat-abrir span{ display:none; }
  .chat-abrir svg{ width:21px; height:21px; }
}

.chat{
  position:fixed; right:1rem; bottom:76px; z-index:80;
  width:min(400px, calc(100vw - 2rem)); height:min(580px, calc(100vh - 100px));
  background:var(--bg-2); border:1px solid var(--linea); border-radius:14px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.chat[hidden]{ display:none; }
.chat-cab{ display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; border-bottom:1px solid var(--linea); background:var(--bg-3); }
.chat-tit{ display:flex; align-items:center; gap:.4rem; font-weight:650; font-size:.9rem; }
.chat-tit svg{ width:16px; height:16px; color:var(--val); }
.chat-creditos{ margin-left:auto; font-size:.72rem; color:var(--ink-3); }
.chat-creditos span:first-child{ color:var(--val); font-weight:700; }
.chat-cerrar{ font-size:1.4rem; line-height:1; color:var(--ink-3); padding:0 .2rem; }
.chat-log{ flex:1; overflow-y:auto; padding:.9rem; display:flex; flex-direction:column; gap:.6rem; }
.msj{ max-width:88%; padding:.6rem .8rem; border-radius:12px; font-size:.86rem; line-height:1.5; white-space:pre-wrap; }
.msj-bot{ background:var(--bg-3); border:1px solid var(--linea-2); align-self:flex-start; border-bottom-left-radius:4px; }
.msj-yo{ background:var(--acc); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msj-esc{ display:flex; gap:4px; align-items:center; }
.msj-esc i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:pt 1.3s infinite; }
.msj-esc i:nth-child(2){ animation-delay:.18s; }
.msj-esc i:nth-child(3){ animation-delay:.36s; }
@keyframes pt{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } }
.chat-sug{ display:flex; gap:.35rem; padding:0 .9rem .5rem; flex-wrap:wrap; }
.chat-sug button{
  font-size:.74rem; padding:.34rem .6rem; border-radius:100px;
  border:1px solid var(--linea); color:var(--ink-2); background:var(--bg-3);
}
.chat-sug button:hover{ color:var(--ink); border-color:var(--acc); }
.chat-form{ display:flex; gap:.5rem; padding:.7rem .9rem; border-top:1px solid var(--linea); }
.chat-form input{ flex:1; background:var(--bg-3); border:1px solid var(--linea); border-radius:8px; padding:.55rem .7rem; font-size:.85rem; min-width:0; }
.chat-form input::placeholder{ color:var(--ink-3); }
.chat-form button{ width:38px; border-radius:8px; background:var(--grad); color:#03140F; display:grid; place-items:center; }
.chat-form button svg{ width:16px; height:16px; }
.chat-pie{ font-size:.68rem; color:var(--ink-3); text-align:center; padding:0 .9rem .7rem; }

/* ---------- modales ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1rem; background:rgba(5,8,13,.78); backdrop-filter:blur(4px); }
.modal[hidden]{ display:none; }
.modal-caja{
  position:relative; background:var(--bg-2); border:1px solid var(--linea);
  border-radius:14px; padding:1.6rem; width:min(420px,100%); display:grid; gap:.8rem;
}
.modal-caja h2{ padding-right:1.5rem; }
.modal-caja p{ font-size:.9rem; color:var(--ink-2); }
.modal-x{ position:absolute; top:.7rem; right:.9rem; font-size:1.5rem; line-height:1; color:var(--ink-3); }
.modal-caja form{ display:grid; gap:.6rem; }
.modal-caja input{ background:var(--bg-3); border:1px solid var(--linea); border-radius:8px; padding:.65rem .8rem; font-size:.9rem; }
.modal-mini{ font-size:.75rem; color:var(--ink-3); }
.muro-opciones{ display:grid; gap:.5rem; }
.modal-anuncio{ text-align:center; }
.anuncio-sim{
  background:var(--bg-4); border:1px dashed var(--linea); border-radius:10px;
  min-height:170px; display:grid; place-items:center; gap:.6rem; color:var(--ink-3); font-size:.82rem;
}
.anuncio-sim strong{ font-family:var(--mono); font-size:2.2rem; color:var(--val); }

/* ---------- pie ---------- */
.pie{ border-top:1px solid var(--linea); background:var(--bg-2); padding-block:2rem 2.5rem; margin-top:2rem; }
.pie-in{ display:grid; gap:1.4rem; }
.pie-marca img{ height:74px; width:auto; }
.pie-marca p{ font-size:.82rem; color:var(--ink-3); margin-top:.9rem; max-width:44ch; }
.pie-legal{ display:grid; gap:.4rem; }
.pie-legal p{ font-size:.8rem; color:var(--ink-2); max-width:60ch; }
.edad{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--mal); color:var(--mal); font-weight:700; font-size:.8rem;
}
.pie-mini{ font-size:.75rem !important; color:var(--ink-3) !important; }

/* ---------- cabecera en móvil: el selector de región baja de fila ---------- */
@media (max-width:859px){
  .cab-in{ flex-wrap:wrap; row-gap:.5rem; gap:.6rem; }
  .selector{ order:5; flex:1 1 100%; }
  .selector select{ max-width:none; width:100%; }
  .cab-der{ gap:.4rem; }
}

/* ---------- navegación inferior en móvil ---------- */
.nav-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  display:flex; background:rgba(10,14,21,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--linea); padding-bottom:env(safe-area-inset-bottom);
}
.nav-movil a{
  flex:1; display:grid; justify-items:center; gap:.15rem; padding:.5rem .2rem .55rem;
  font-size:.62rem; color:var(--ink-3); letter-spacing:.01em; text-align:center;
}
.nav-movil a svg{ width:19px; height:19px; }
.nav-movil a.activo{ color:var(--val); }
body{ padding-bottom:64px; }

/* ---------- escritorio ---------- */
@media (min-width:860px){
  .nav{ display:flex; }
  .nav-movil{ display:none; }
  body{ padding-bottom:0; }
  .chollos{ grid-template-columns:repeat(2,1fr); }
  .planes{ grid-template-columns:repeat(3,1fr); }
  .pie-in{ grid-template-columns:1fr 1.4fr; }
  .cuotas-fila .cuota{ flex:0 1 150px; }
}
@media (min-width:860px){
  .chat-abrir,.chat{ bottom:1rem; }
  .chat{ height:min(580px, calc(100vh - 2rem)); }
}
@media (min-width:1180px){
  .chollos{ grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Carga visual — portada, escudos, avatares y secciones
   ========================================================= */

/* ---------- portada ---------- */
.portada{ position:relative; overflow:hidden; padding-block:clamp(2.5rem,7vw,5rem) clamp(2.2rem,4vw,3rem); }
.portada-luz{
  position:absolute; inset:-30% -10% auto -10%; height:140%;
  background:
    radial-gradient(620px 320px at 20% 20%, rgba(15,212,224,.17), transparent 65%),
    radial-gradient(520px 300px at 76% 10%, rgba(25,230,140,.14), transparent 65%);
  pointer-events:none;
}

.portada-escena{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
/* La banda de atletas de la lámina de marca, difuminada por la izquierda
   para que el titular siempre caiga sobre fondo limpio. */
.portada-atletas{
  position:absolute; z-index:0; right:0; top:0; height:100%;
  width:min(54%, 780px); max-width:none; object-fit:cover; object-position:left center;
  opacity:.72; pointer-events:none;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 58%),
             linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 58%),
                     linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-composite:intersect; -webkit-mask-composite:source-in;
}
@media (max-width:860px){ .portada-atletas{ opacity:.3; width:72%; } }
@media (max-width:620px){ .portada-atletas{ display:none; } }
.portada-in{ position:relative; z-index:1; }

/* ---------- cinta de cuotas de la portada ---------- */
.portada-cinta{
  position:relative; z-index:1; margin-bottom:.5rem;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  background:rgba(10,14,21,.55); overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta-pista{
  display:flex; width:max-content; gap:0;
  animation:cinta 48s linear infinite;
}
.portada-cinta:hover .cinta-pista{ animation-play-state:paused; }
@keyframes cinta{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.cinta-it{
  display:flex; align-items:center; gap:.55rem; flex-shrink:0;
  padding:.6rem 1.15rem; border-right:1px solid var(--linea-2); white-space:nowrap;
}
.cinta-liga{
  font-family:var(--display); font-size:.62rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--linea); border-radius:4px; padding:.1rem .34rem;
}
.cinta-eq{ font-family:var(--display); font-size:.82rem; font-weight:600; color:var(--ink-2); }
.cinta-c{ font-family:var(--mono); font-size:.82rem; font-weight:500; color:var(--ink); }
.cinta-c b{ color:var(--ink-3); font-weight:500; margin-right:.22rem; font-size:.74rem; }
.cinta-c.alta{ color:var(--val); }
@media (prefers-reduced-motion: reduce){
  .cinta-pista{ animation:none; }
}

.portada-et{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:600;
  background:rgba(255,255,255,.04); border:1px solid var(--linea);
  padding:.34rem .75rem; border-radius:100px; margin-bottom:1.1rem;
}
.punto{ width:7px; height:7px; border-radius:50%; background:var(--val); box-shadow:0 0 0 0 rgba(25,230,140,.6); animation:late 2.4s infinite; }
@keyframes late{ 70%{ box-shadow:0 0 0 7px rgba(25,230,140,0); } 100%{ box-shadow:0 0 0 0 rgba(25,230,140,0); } }
.portada-tit{
  font-family:var(--display);
  font-size:clamp(2.1rem,5.4vw,3.7rem); font-weight:800; letter-spacing:-.034em;
  line-height:1.06; max-width:17ch;
  background:linear-gradient(165deg,#FFFFFF 0%,#FFFFFF 52%, #A7EED3 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.portada-sub{ color:var(--ink-2); font-size:clamp(.95rem,1.5vw,1.08rem); max-width:56ch; margin-top:1rem; }
.portada-acc{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.portada-datos{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:2.2rem;
}
.dato{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid var(--linea); border-radius:var(--r); padding:.85rem 1rem;
}
.dato-v{ font-family:var(--mono); font-size:1.5rem; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.dato-v.acento{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dato-e{ font-family:var(--display); font-size:.71rem; font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-top:.25rem; }

/* ---------- qué hace la web ---------- */
.capas{ position:relative; overflow:hidden; padding-block:1.6rem 2rem; margin-bottom:.6rem; }
.capas-fondo{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:min(34%,420px); max-width:none; opacity:.16; pointer-events:none;
  mask-image:linear-gradient(90deg, transparent, #000 55%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 55%);
}
.capas-rej{ position:relative; z-index:1; }
.capas-fila{ display:grid; gap:.7rem; grid-template-columns:1fr; }
.capa{ display:grid; gap:.28rem; align-content:start; }
.capa-ico{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  border:1px solid rgba(25,230,140,.28); background:rgba(25,230,140,.07);
  color:var(--val); margin-bottom:.45rem;
}
.capa-ico svg{ width:20px; height:20px; }
.capa h3{ font-size:.93rem; }
.capa p{ font-size:.83rem; color:var(--ink-2); line-height:1.5; }

/* ---------- qué cubre ---------- */
.onda{
  display:block; width:100%; max-width:none; height:46px; object-fit:cover;
  opacity:.5; margin-top:2.4rem;
  mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.cobertura{ display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:1.4rem; align-items:center; }
.cob-lista{ list-style:none; display:grid; gap:.3rem; margin-top:1.1rem; }
.cob-lista li{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem;
  background:var(--bg-2); border:1px solid var(--linea); border-radius:9px;
}
.cob-lista .ico-dep{ color:var(--val); flex-shrink:0; }
.cob-liga{ font-family:var(--display); font-weight:600; font-size:.92rem; }
.cob-n{ margin-left:auto; font-size:.8rem; color:var(--ink-3); }
.cob-n b{ color:var(--ink); font-family:var(--mono); font-weight:500; }
.cob-falta{ margin-top:.9rem; font-size:.82rem; color:var(--ink-3); line-height:1.5; max-width:54ch; }
.cob-img{ border-radius:12px; overflow:hidden; border:1px solid var(--linea); line-height:0; }
.cob-img img{ width:100%; height:auto; display:block; opacity:.92; }

/* ---------- títulos de sección ---------- */
.tit-seccion{
  font-family:var(--display);
  font-size:clamp(1.35rem,2.6vw,1.8rem); font-weight:700; letter-spacing:-.025em;
  display:flex; align-items:center; gap:.65rem;
}
.tit-seccion::before{
  content:""; width:4px; height:1.05em; border-radius:3px; background:var(--grad); flex-shrink:0;
}

/* ---------- escudos y avatares ---------- */
.escudo{ display:block; flex-shrink:0; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.avatar{ display:block; flex-shrink:0; }
.ico-dep{ display:block; }

.part-eq{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.eq-lado{ display:flex; align-items:center; gap:.5rem; }
.eq-nom{ font-size:1rem; font-weight:650; letter-spacing:-.01em; }
.part-vs{ color:var(--ink-3); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.cel-jug{ display:flex; align-items:center; gap:.6rem; }
.cel-jug .jug{ font-weight:600; display:block; line-height:1.25; }
.cel-jug .eq{ color:var(--ink-3); font-size:.75rem; }
.cel-part{ display:flex; align-items:center; gap:.3rem; }

.deporte-tabs button{ display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- tarjeta de partido con más cuerpo ---------- */
.part{ position:relative; overflow:hidden; }
.part::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); opacity:0; transition:opacity .25s;
}
.part:hover::before{ opacity:1; }

/* ---------- chollos con cabecera de color ---------- */
.chollo:not(.oculto){ border-top:2px solid transparent; border-image:var(--grad) 1; border-image-slice:1; }
.chollo.oculto{ opacity:.85; }
.chollo-jug{ display:inline-flex; align-items:center; gap:.5rem; }

/* ---------- bloques del detalle ---------- */
.det-cab{ display:grid; gap:.8rem; }
.det-equipos{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.det-equipos .escudo{ filter:drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.det-eq{ display:flex; align-items:center; gap:.65rem; }
.det-eq strong{ font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:700; letter-spacing:-.025em; }
.det-vs{ color:var(--ink-3); font-family:var(--mono); font-size:.85rem; }
.det-meta{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; font-size:.82rem; color:var(--ink-3); }
.det-chip{ background:var(--bg-3); border:1px solid var(--linea); border-radius:6px; padding:.2rem .55rem; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }

/* ---------- combinada con más estructura ---------- */
.comb-paso{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:.1rem; }
.comb-ayuda{
  background:var(--bg-3); border:1px solid var(--linea); border-radius:var(--r);
  padding:1rem 1.1rem; margin-top:1.1rem; font-size:.86rem; color:var(--ink-2);
}
.comb-ayuda h3{ font-size:.92rem; margin-bottom:.4rem; color:var(--ink); }

/* ---------- planes ---------- */
.plan{ position:relative; overflow:hidden; }
.plan.destacado::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
}
.plan-etiqueta{
  position:absolute; top:.9rem; right:.9rem; font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; background:var(--grad); color:#03140F;
  padding:.18rem .5rem; border-radius:5px;
}

/* ---------- confianza ---------- */
.confianza{ margin-top:2.8rem; padding-top:2rem; border-top:1px solid var(--linea); }
.metodo-tit{
  font-family:var(--display); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:1.1rem;
}
.metodo-rej{ display:grid; gap:.7rem; grid-template-columns:1fr; }
.conf{
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.1rem; display:grid; gap:.3rem; align-content:start;
}
.conf-v{
  font-family:var(--mono); font-size:1.65rem; font-weight:600; letter-spacing:-.02em;
  line-height:1.1; color:var(--ink); margin-bottom:.15rem;
}
.conf h3{ font-size:.92rem; }
.conf p{ font-size:.84rem; color:var(--ink-2); line-height:1.5; }

@media (min-width:640px){
  .portada-datos{ grid-template-columns:repeat(4,1fr); }
  .metodo-rej{ grid-template-columns:repeat(2,1fr); }
  .capas-fila{ grid-template-columns:repeat(2,1fr); gap:1.3rem; }
}
@media (min-width:860px){
  .metodo-rej{ grid-template-columns:repeat(4,1fr); }
  .capas-fila{ grid-template-columns:repeat(4,1fr); }
  .cobertura{ grid-template-columns:1fr 340px; gap:2.4rem; }
  .marca-lockup{ height:34px; }
}

/* =========================================================
   Menú desplegable grande
   ========================================================= */
.nav{ position:relative; }
.nav-item{ position:relative; }
.nav-item > button,
.nav-item > a{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.86rem; color:var(--ink-2); padding:.42rem .7rem; border-radius:7px;
  transition:color .2s, background .2s; font-weight:500;
}
.nav-item > button:hover, .nav-item > a:hover,
.nav-item.abierto > button{ color:var(--ink); background:var(--bg-3); }
.nav-item.activa > button, .nav-item.activa > a{ color:var(--ink); background:var(--bg-3); }
.nav-ch{ width:12px; height:12px; transition:transform .2s; opacity:.7; }
.nav-item.abierto .nav-ch{ transform:rotate(180deg); }

.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--bg-2); border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  z-index:61;
}
.mega-velo{ position:fixed; inset:0; z-index:55; background:rgba(5,8,13,.5); }
.mega-in{ max-width:var(--max); margin-inline:auto; padding:1.3rem var(--gut) 1.5rem; }
.mega-cab{ display:flex; align-items:center; gap:.7rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--linea); }
.mega-ico{ width:30px; height:30px; border-radius:8px; background:var(--grad); display:grid; place-items:center; color:#03140F; flex-shrink:0; }
.mega-ico svg{ width:16px; height:16px; }
.mega-tit{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; }
.mega-cta{ margin-left:auto; }

.mega-cols{ display:grid; grid-template-columns:200px 1fr 250px; gap:1.6rem; }
.mega-art{ display:grid; gap:.55rem; align-content:start; }
.mega-art-img{
  border-radius:10px; overflow:hidden; border:1px solid var(--linea);
  background:var(--bg); line-height:0; position:relative;
}
.mega-art-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,21,.1), rgba(10,14,21,.65));
}
.mega-art-img svg{ width:100%; height:auto; display:block; }
.mega-art-pie{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.mega-art-pie strong{ font-family:var(--display); font-size:.9rem; font-weight:700; }
.mega-art-pie span{ font-size:.78rem; color:var(--ink-3); }
.mega-art-pie b{ color:var(--val); font-family:var(--mono); font-weight:500; }
@media (max-width:1100px){
  .mega-cols{ grid-template-columns:190px 1fr; }
  .mega-art{ display:none; }
}
.mega-dep{ display:grid; gap:.15rem; align-content:start; border-right:1px solid var(--linea); padding-right:1.2rem; }
.mega-dep button{
  display:flex; align-items:center; gap:.55rem; width:100%; text-align:left;
  padding:.5rem .6rem; border-radius:7px; font-size:.86rem; color:var(--ink-2); font-weight:500;
}
.mega-dep button:hover{ background:var(--bg-3); color:var(--ink); }
.mega-dep button.sel{ background:var(--bg-4); color:var(--ink); }
.mega-dep .flecha{ margin-left:auto; opacity:.45; width:11px; height:11px; }

.mega-links{ display:grid; grid-template-columns:repeat(2,1fr); gap:.15rem 1.2rem; align-content:start; }
.mega-links a{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border-radius:7px;
  font-size:.88rem; color:var(--ink-2);
}
.mega-links a:hover{ background:var(--bg-3); color:var(--ink); }
.mega-links a .candado{ width:12px; height:12px; margin-left:auto; }
.mega-links .desc{ display:block; font-size:.74rem; color:var(--ink-3); margin-top:.1rem; }
.mega-links a span.txt{ display:block; }

.mega-pie{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--linea);
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  font-size:.8rem; color:var(--ink-3);
}
.mega-pie b{ color:var(--val); font-family:var(--mono); }

/* ---------- fotos de jugador ---------- */
.foto-jug{
  border-radius:50%; object-fit:cover; object-position:center center;
  flex-shrink:0; display:block; background:var(--bg-3);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.4);
}

/* ---------- créditos ---------- */
.cred-intro{ color:var(--ink-2); font-size:.92rem; line-height:1.6; margin-top:1rem; max-width:62ch; }
.cred-lista{ list-style:none; display:grid; gap:.4rem; margin-top:1.4rem; }
.cred-lista li{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  gap:.1rem .8rem; align-items:center;
  background:var(--bg-2); border:1px solid var(--linea); border-radius:10px; padding:.6rem .85rem;
}
.cred-lista img{ grid-column:1; grid-row:1 / 3; border-radius:50%; object-fit:cover; }
.cred-n{ grid-column:2; grid-row:1; font-family:var(--display); font-weight:600; font-size:.9rem; align-self:end; }
.cred-d{ grid-column:2; grid-row:2; font-size:.78rem; color:var(--ink-3); align-self:start; }
.cred-l{ grid-column:3; grid-row:1 / 3; justify-self:end; font-size:.78rem; color:var(--acc); white-space:nowrap; }
.cred-l:hover{ text-decoration:underline; }

/* ---------- cabecera de página ----------
   La banda que abre cada vista: etiqueta, titular a dos tonos, subtítulo y
   cuatro capacidades. La imagen se difumina por la izquierda, igual que en
   la portada, para que el texto caiga siempre sobre fondo limpio. */
.cab-pag{
  position:relative; overflow:hidden;
  padding-block:clamp(1.8rem,4vw,3rem) clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--linea); margin-bottom:1.6rem;
  background:
    radial-gradient(680px 300px at 14% 0%, rgba(15,212,224,.10), transparent 62%),
    radial-gradient(560px 280px at 70% 10%, rgba(25,230,140,.08), transparent 64%);
}
.cab-pag-img{
  position:absolute; right:0; top:0; height:100%;
  width:min(46%, 620px); max-width:none; object-fit:cover; object-position:center;
  opacity:.6; pointer-events:none;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 30%, #000 65%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 30%, #000 65%);
}
.cab-pag-in{ position:relative; z-index:1; }
.cab-pag-et{
  font-family:var(--display); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:.5rem; padding-left:.9rem; position:relative;
}
.cab-pag-et::before{
  content:""; position:absolute; left:0; top:.1em; width:3px; height:1em;
  border-radius:2px; background:var(--grad);
}
.cab-pag-t{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.04; max-width:18ch;
}
.cab-pag-t span{ color:var(--val); }
.cab-pag-sub{ color:var(--ink-2); font-size:.95rem; margin-top:.7rem; max-width:48ch; }
.cab-caps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.2rem; margin-top:1.6rem; max-width:880px; }
.cab-cap{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:0 .6rem; align-items:center; }
.cab-cap i{
  grid-row:1 / 3; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  border:1px solid rgba(25,230,140,.26); background:rgba(25,230,140,.07); color:var(--val);
}
.cab-cap i svg{ width:18px; height:18px; }
.cab-cap b{ font-family:var(--display); font-size:.85rem; font-weight:600; align-self:end; white-space:nowrap; }
.cab-cap small{ font-size:.73rem; color:var(--ink-3); align-self:start; line-height:1.35; }
@media (min-width:720px){
  .cab-caps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:620px){
  .cab-pag-img{ opacity:.26; width:70%; }
}

/* ---------- fichas de prop ----------
   Una ficha por prop. En ancho grande se lee en una línea: quién, qué
   apuesta, a cuánto y cuánto valor tiene; debajo, los números que
   sostienen esa recomendación. En móvil se apila sin apretarse. */
.props-lista{ display:grid; gap:.6rem; margin-top:1.2rem; }
.prop{
  background:var(--bg-2); border:1px solid var(--linea); border-radius:11px;
  padding:.95rem 1.05rem;
  display:grid; gap:.75rem 1.1rem;
  grid-template-columns:repeat(2,1fr);
  align-items:center;
}
.prop-jug, .prop-ap, .prop-pie{ grid-column:1 / -1; }
.prop-jug{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.prop-jug span{ display:grid; gap:.1rem; min-width:0; }
.prop-jug b{ font-family:var(--display); font-weight:600; font-size:.98rem; letter-spacing:-.01em; }
.prop-jug small{
  font-size:.78rem; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prop-ap{
  justify-self:start; display:inline-block;
  font-family:var(--display); font-weight:600; font-size:.88rem;
  padding:.42rem .8rem; border-radius:100px; border:1px solid;
  transition:background .18s;
}
.prop-ap.over{ color:var(--val); border-color:rgba(25,230,140,.35); background:rgba(25,230,140,.08); }
.prop-ap.under{ color:var(--cian); border-color:rgba(15,212,224,.32); background:rgba(15,212,224,.07); }
.prop-ap.over:hover{ background:rgba(25,230,140,.17); }
.prop-ap.under:hover{ background:rgba(15,212,224,.15); }
.prop-cuota, .prop-valor{ display:grid; gap:.05rem; }
.prop-cuota b{ font-family:var(--mono); font-size:1.12rem; font-weight:600; }
.prop-cuota small, .prop-valor small{
  font-family:var(--display); font-size:.65rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.prop-valor b{ font-family:var(--mono); font-size:1.12rem; font-weight:600; }
.prop-valor.pos b{ color:var(--val); }
.prop-valor.neg b{ color:var(--mal); }
.prop-pie{
  display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap;
  padding-top:.7rem; border-top:1px solid var(--linea-2);
}
.prop-dato{ font-family:var(--mono); font-size:.88rem; display:flex; align-items:baseline; gap:.4rem; }
.prop-dato i{
  font-family:var(--display); font-style:normal; font-size:.65rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.prop-dato em{ font-style:normal; font-size:.7rem; }
.prop-dato em.arr{ color:var(--val); }
.prop-dato em.aba{ color:var(--mal); }
.prop-graf{ display:flex; align-items:center; gap:.7rem; grid-column:1 / -1; }
.chispa{
  flex:1; min-width:0; height:40px; display:block;
  border:1px solid var(--linea); border-radius:8px; background:rgba(255,255,255,.015);
  padding:0;
}
.prop-ver{
  flex-shrink:0; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--linea); color:var(--ink-3);
  transition:color .18s, border-color .18s, background .18s;
}
.prop-ver:hover{ color:var(--val); border-color:rgba(25,230,140,.45); background:rgba(25,230,140,.08); }
.prop-ver svg{ width:12px; height:12px; }
.prop-contra{
  font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--avi);
  border:1px solid rgba(245,165,36,.3); background:rgba(245,165,36,.08);
  padding:.14rem .5rem; border-radius:5px;
}
.prop-racha{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.prop-racha > span{ font-size:.78rem; color:var(--ink-3); }
.prop-racha .racha-txt{ display:none; }
@media (min-width:820px){
  .prop{ grid-template-columns:minmax(0,1.3fr) minmax(0,.95fr) auto auto auto; }
  .prop-jug, .prop-ap{ grid-column:auto; }
  .prop-cuota, .prop-valor{ justify-items:end; text-align:right; min-width:72px; }
  .prop-graf{ grid-column:auto; }
  .chispa{ flex:none; width:104px; }
}

/* ---------- las casas ---------- */
.tabla-casas{ min-width:620px; }
.tabla-casas .casa-n{ font-family:var(--display); font-weight:600; }
.pill{
  display:inline-block; font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding:.18rem .5rem; border-radius:5px;
  border:1px solid var(--linea); color:var(--ink-3);
}
.pill-eu{ color:var(--val); border-color:rgba(25,230,140,.3); background:rgba(25,230,140,.07); }
.pill-us{ color:var(--cian); border-color:rgba(15,212,224,.28); background:rgba(15,212,224,.06); }
.tabla-casas .num{ white-space:nowrap; }
.tabla-casas .cifra{ font-family:var(--mono); font-weight:500; }
.barra{
  display:inline-block; vertical-align:middle; width:72px; height:5px; border-radius:3px;
  background:var(--bg-4); margin-right:.55rem; overflow:hidden;
}
.barra i{ display:block; height:100%; background:var(--avi); border-radius:3px; }
.barra-v i{ background:var(--grad); }

/* ---------- juego responsable ---------- */
.jr{
  margin-top:1.1rem; padding:1.15rem 1.25rem; background:var(--bg-2);
  border:1px solid var(--linea); border-radius:var(--r); display:grid; gap:.4rem;
}
.jr h3{ font-size:1rem; }
.jr p{ font-size:.9rem; color:var(--ink-2); line-height:1.6; }
.jr-tel{ border-color:rgba(25,230,140,.3); background:linear-gradient(180deg, rgba(25,230,140,.07), var(--bg-2)); }
.jr-num{ word-break:break-word;
  font-family:var(--mono); font-size:1.9rem; font-weight:600; letter-spacing:.01em;
  color:var(--val); margin-top:.3rem;
}
.jr-pie{ font-size:.82rem; color:var(--ink-3); }
.jr-edad{
  display:flex; align-items:center; gap:.7rem; margin-top:1.4rem;
  font-size:.86rem; color:var(--ink-2);
}
.jr-edad .edad{ flex-shrink:0; }

.pie-enlaces{ display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.9rem; }
.pie-enlaces a{ font-size:.82rem; color:var(--ink-2); border-bottom:1px solid var(--linea); padding-bottom:.1rem; }
.pie-enlaces a:hover{ color:var(--val); border-color:var(--val); }

/* ---------- aviso de contexto ---------- */
.aviso-liga{
  display:flex; gap:.8rem; align-items:flex-start;
  background:linear-gradient(90deg, rgba(15,212,224,.09), rgba(15,212,224,.02));
  border:1px solid rgba(15,212,224,.3); border-radius:var(--r);
  padding:.85rem 1.1rem; margin-bottom:1rem; font-size:.88rem; color:var(--ink-2);
}
.aviso-liga b{ color:var(--ink); }
.aviso-ico{ color:var(--cian); flex-shrink:0; margin-top:.1rem; }
.aviso-ico svg{ width:17px; height:17px; }

/* ---------- fecha y etiquetas en la tarjeta ---------- */
.part-fecha{ font-size:.75rem; color:var(--ink-3); font-family:var(--mono); }
.part-dest{
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--grad); color:#03140F; padding:.14rem .45rem; border-radius:5px;
}
.part-sede{ font-size:.72rem; color:var(--ink-3); }
.grupo-fecha{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; margin:1.4rem 0 .6rem; display:flex; align-items:center; gap:.7rem;
}
.grupo-fecha::after{ content:""; flex:1; height:1px; background:var(--linea); }
.grupo-fecha:first-child{ margin-top:0; }

/* ---------- aprender ---------- */
.apr{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:1.5rem; }
.apr-bloque{ min-width:0; background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r); padding:1.3rem; }
.apr-bloque h3{ font-size:1.05rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.apr-bloque h3 .n{ font-family:var(--mono); color:var(--val); font-size:.9rem; }
.apr-bloque p{ color:var(--ink-2); font-size:.92rem; margin-bottom:.7rem; }
.apr-bloque p:last-child{ margin-bottom:0; }
.apr-calc{
  background:var(--bg); border:1px solid var(--linea); border-radius:8px;
  padding:.9rem 1rem; font-family:var(--mono); font-size:.84rem; color:var(--ink-2);
  margin:.8rem 0; overflow-x:auto; white-space:pre;
}
.apr-calc b{ color:var(--val); }
.apr-aviso{
  background:rgba(242,86,92,.07); border:1px solid rgba(242,86,92,.3);
  border-radius:var(--r); padding:1.1rem 1.3rem;
}
.apr-aviso h3{ color:#F7B4B7; }
.apr-aviso p{ color:#E8C4C6; }
.apr-aviso a{ color:#FFF; text-decoration:underline; text-underline-offset:2px; }

/* ---------- comportamiento por fecha ---------- */
.grupo-cuando{
  font-size:.68rem; letter-spacing:.06em; color:var(--ink-3);
  background:var(--bg-3); border:1px solid var(--linea); border-radius:5px;
  padding:.1rem .45rem; text-transform:none; font-weight:500;
}
.grupo-cuando.es-hoy{ color:#03140F; background:var(--val); border-color:transparent; font-weight:700; }
.part-pasado{ opacity:.5; }
.part-pasado:hover{ opacity:.8; }
.ver-jugados{ margin-top:1.2rem; }
.jugados{ display:grid; gap:.6rem; margin-top:.8rem; }
.vacio{
  background:var(--bg-2); border:1px dashed var(--linea); border-radius:var(--r);
  padding:2rem 1.2rem; text-align:center; color:var(--ink-3); font-size:.92rem;
}
.aviso-caducado{
  background:linear-gradient(90deg, rgba(245,165,36,.1), rgba(245,165,36,.02));
  border-color:rgba(245,165,36,.35);
}
.aviso-caducado .aviso-ico{ color:var(--avi); }