/* FondosYA — sistema de diseño "pizarra de cotizaciones"
   Paleta: hueso #FAFAF7 · tinta #101418 · azul dato #12406F · verde #0E8A3E ·
   rojo #C6323B · marcador #FFD23F (acento propio, resalta al líder del día)
   Tipos: Archivo (display) · Public Sans (texto) · IBM Plex Mono (metadata) */
:root{
  --hueso:#FAFAF7; --tinta:#101418; --gris:#5A6472; --linea:#E4E2D8;
  --azul:#12406F; --pos:#0E8A3E; --neg:#C6323B; --marcador:#FFD23F;
  --radio:10px; --wrap:1100px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--hueso);color:var(--tinta);
  font:16px/1.55 "Public Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
a{color:var(--azul)} img{max-width:100%}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris)}
.display{font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.015em;
  line-height:1.04;margin:.2em 0 .3em;font-size:clamp(1.9rem,5.5vw,3.4rem)}
h2{font-family:Archivo,sans-serif;font-weight:700;font-size:1.25rem;margin:0 0 .7em}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pos{color:var(--pos);font-weight:700}.neg{color:var(--neg);font-weight:700}
.sd{color:var(--gris)}

/* header */
.topbar{background:#fff;border-bottom:2px solid var(--tinta);position:sticky;top:0;z-index:40}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.logo{font-family:Archivo,sans-serif;font-weight:900;font-size:1.35rem;color:var(--tinta);
  text-decoration:none;letter-spacing:-.02em}
.logo span{background:var(--marcador);padding:0 .12em;border-radius:3px}
.topbar nav{display:flex;gap:4px;overflow-x:auto}
.topbar nav a{color:var(--tinta);text-decoration:none;font-weight:600;font-size:.9rem;
  padding:.45em .7em;border-radius:6px;white-space:nowrap}
.topbar nav a:hover,.topbar nav a[aria-current]{background:var(--tinta);color:#fff}

/* hero pizarra */
.hero{padding:2.6rem 0 1.4rem}
.hero .kicker{display:inline-block;background:var(--tinta);color:var(--marcador);
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.1em;
  padding:.35em .8em;border-radius:4px;text-transform:uppercase}
.hero p.sub{max-width:640px;color:var(--gris);font-size:1.05rem;margin:.4em 0 0}
.sub{color:var(--gris)}
.miga{margin:1.4rem 0 .2rem}

/* pizarra (ranking hero) */
.pizarra{background:#fff;border:2px solid var(--tinta);border-radius:var(--radio);
  overflow:hidden;box-shadow:5px 5px 0 var(--tinta)}
.pizarra header{display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  padding:.8rem 1rem;border-bottom:2px solid var(--tinta);flex-wrap:wrap}
.pizarra header h2{margin:0}
.pizarra table{width:100%;border-collapse:collapse}
.pizarra td,.pizarra th{padding:.7rem .9rem;border-top:1px solid var(--linea);font-size:.95rem}
.pizarra th{border-top:0;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--gris);text-align:left;font-weight:500}
.pizarra tr.lider{position:relative;background:
  linear-gradient(104deg,transparent 0 2px,var(--marcador) 2px 99%,transparent 99%)}
.pizarra tr.lider td:first-child::before{content:"🏆 ";font-size:.85em}
.pizarra .tna{font-family:Archivo,sans-serif;font-weight:900;font-size:1.35rem}
.rank-pos{color:var(--gris);font-family:"IBM Plex Mono",monospace;width:2ch}

/* chips de marca */
.chip{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.8rem;
  color:var(--c,#333);border:1.5px solid var(--c,#333);border-radius:999px;
  padding:.12em .7em;text-decoration:none;background:#fff;white-space:nowrap}
.chip::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--c,#333)}
.chip img{height:1.05em;width:auto;display:block}
.chip.has-logo::before{display:none}

/* grillas y cards */
.grid{display:grid;gap:16px;margin:1rem 0}
.grid.plataformas{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.grid.ligas{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:#fff;border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:1.1rem 1.2rem;margin:1.2rem 0}
.card.plat{margin:0;padding:1rem;border-color:var(--tinta);border-width:1.5px;
  text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;gap:.5em;
  transition:transform .12s}
.card.plat:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--pc,var(--tinta))}
.card.plat .marca{display:flex;align-items:center;gap:.5em;font-family:Archivo,sans-serif;
  font-weight:700;font-size:1.05rem}
.card.plat .marca i{width:.85em;height:.85em;border-radius:3px;background:var(--pc);flex:none}
.card.plat .marca img{height:1.4em;width:auto}
.card.plat .dato{font-family:Archivo,sans-serif;font-weight:900;font-size:1.5rem}
.card.liga{margin:0;border:2px solid var(--tinta)}
.card.liga h3{font-family:Archivo,sans-serif;font-weight:900;margin:0;font-size:1.15rem}
.card.liga .pregunta{color:var(--gris);font-size:.88rem;margin:.15em 0 .8em}
.card.liga table{width:100%;border-collapse:collapse;font-size:.9rem}
.card.liga td{padding:.5em 0;border-top:1px solid var(--linea)}
.card.liga tr.lider td{background:linear-gradient(180deg,transparent 15%,var(--marcador) 15% 88%,transparent 88%)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:1.2rem 0}
.kpi{background:#fff;border:1.5px solid var(--linea);border-radius:var(--radio);padding:.9rem 1rem}
.kpi strong{display:block;font-family:Archivo,sans-serif;font-weight:900;font-size:1.25rem;margin-top:.2em}

/* tablas genéricas */
.tabla{width:100%;border-collapse:collapse;font-size:.93rem}
.tabla th{font-family:"IBM Plex Mono",monospace;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--gris);text-align:left;font-weight:500;padding:.5em .6em}
.tabla td{padding:.55em .6em;border-top:1px solid var(--linea)}
.tabla th.sortable{cursor:pointer;user-select:none}
.tabla th.sortable:hover{color:var(--tinta)}
.tabla th.sorted::after{content:" ▼"}

/* simulador */
.simulador{background:var(--tinta);color:#fff;border-radius:var(--radio);padding:1.3rem;margin:1.6rem 0}
.simulador h2{color:var(--marcador)}
.simulador .fila{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;font-size:1.05rem}
.simulador select,.simulador input{font:inherit;padding:.35em .5em;border-radius:6px;
  border:0;background:#fff;color:var(--tinta);font-weight:600;max-width:9.5em}
.simulador .resultado{margin-top:1em;font-family:Archivo,sans-serif;font-size:1.15rem;line-height:1.4}
.simulador .resultado strong{color:var(--marcador);font-size:1.5rem}
.share{display:inline-flex;gap:.5em;margin-top:.9em}
.share a,.btn-sec{display:inline-block;background:#fff;color:var(--tinta);font-weight:700;
  padding:.5em 1em;border-radius:8px;text-decoration:none;border:1.5px solid var(--tinta);font-size:.9rem}
.btn-sec:hover{background:var(--marcador)}

/* gráfico */
.grafico{position:relative;min-height:280px}
.grafico canvas{max-height:380px}
.vacio,.vacio-inline{color:var(--gris);background:repeating-linear-gradient(45deg,#fff,#fff 8px,#f4f2ea 8px,#f4f2ea 16px);
  border:1.5px dashed var(--linea);border-radius:8px;padding:1.2rem;text-align:center}
.aviso{background:#FFF6D6;border:1.5px solid var(--marcador);border-radius:8px;padding:.7rem 1rem;font-size:.92rem}

/* controles */
.controles{display:flex;flex-wrap:wrap;gap:.6em;margin:1rem 0;align-items:center}
.controles select,.controles input[type=search]{font:inherit;padding:.5em .7em;
  border:1.5px solid var(--tinta);border-radius:8px;background:#fff;min-width:0}
.controles input[type=search]{flex:1;min-width:200px}
.ventanas{display:inline-flex;border:1.5px solid var(--tinta);border-radius:8px;overflow:hidden}
.ventanas button{font:inherit;font-weight:700;border:0;background:#fff;padding:.45em .8em;cursor:pointer}
.ventanas button[aria-pressed=true]{background:var(--tinta);color:var(--marcador)}
.seleccion{display:flex;flex-wrap:wrap;gap:.4em;margin:.6em 0}
.seleccion .tag{background:#fff;border:1.5px solid var(--tinta);border-radius:999px;
  padding:.15em .4em .15em .8em;font-size:.85rem;font-weight:600;display:inline-flex;gap:.4em;align-items:center}
.seleccion .tag button{border:0;background:var(--tinta);color:#fff;border-radius:50%;
  width:1.3em;height:1.3em;cursor:pointer;line-height:1}
.sugerencias{position:absolute;background:#fff;border:1.5px solid var(--tinta);border-radius:8px;
  max-height:260px;overflow:auto;z-index:30;width:min(480px,90vw);box-shadow:4px 4px 0 rgba(16,20,24,.15)}
.sugerencias div{padding:.5em .8em;cursor:pointer;font-size:.9rem}
.sugerencias div:hover{background:var(--marcador)}
.rel{position:relative}

/* ads + footer */
.adslot{display:flex;align-items:center;justify-content:center;color:var(--gris);
  border:1.5px dashed var(--linea);border-radius:8px;min-height:90px;margin:1.4rem 0;
  font-family:"IBM Plex Mono",monospace;font-size:.75rem}
.pie{background:var(--tinta);color:#cfd6de;margin-top:3rem;padding:2rem 0}
.pie p{font-size:.85rem;max-width:820px}
.pie .legal{color:#8b95a1;font-size:.78rem}
.pie a{color:var(--marcador)}
.nota{font-size:.8rem;text-transform:none;letter-spacing:0}
.faq details{background:#fff;border:1.5px solid var(--linea);border-radius:8px;
  padding:.8rem 1rem;margin:.6rem 0}
.faq summary{font-weight:700;cursor:pointer}
.demo-banner{background:var(--marcador);border-bottom:2px solid var(--tinta);
  text-align:center;font-size:.85rem;font-weight:600;padding:.4em .8em}

@media (max-width:640px){
  .pizarra td,.pizarra th{padding:.55rem .5rem;font-size:.85rem}
  .pizarra .tna{font-size:1.1rem}
  .oculta-m{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}