/* Poker Run — web pública. Negro esmalte y plata pulida, como los emblemas. */
/* Misma tipografía que la web de Rally One Second (TeX Gyre Pagella) */
@font-face { font-family: "ROS Serif"; src: url("fonts/texgyrepagella-regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ROS Serif"; src: url("fonts/texgyrepagella-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ROS Serif"; src: url("fonts/texgyrepagella-italic.otf") format("opentype"); font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }

:root {
  --negro: #000000;
  --grafito: #16171a;
  --acero: #2b2d32;
  --plata-oscura: #7f848d;
  --plata: #c6c9cf;
  --platino: #f3f4f6;
  --rojo-naipe: #c8202d;
  --verde-vivo: #3ecf7a;
  --cromo: linear-gradient(180deg, #ffffff 0%, #e4e6ea 28%, #9fa4ad 50%, #e9ebee 72%, #b9bdc4 100%);
  --cromo-borde: linear-gradient(135deg, #f6f7f8, #8a8f98 35%, #e8eaed 55%, #6e737b 80%, #d9dce0);
  --serif: "ROS Serif", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --boton: var(--cromo);
  --boton-texto: #0b0c0e;
  --fondo-portada: transparent;
  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--negro);
  color: var(--platino);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--platino); outline-offset: 3px; }

.cromado {
  background: var(--cromo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tema "Noche": los colores de la web de Rally One Second */
:root[data-tema="noche"] {
  --negro: #0b0f15;
  --grafito: #121822;
  --acero: #253042;
  --plata-oscura: #8d9bb0;
  --plata: #c9d3df;
  --platino: #e9eef5;
  --verde-vivo: #3fbf7f;
  --cromo: linear-gradient(180deg, #ffffff 0%, #e3e9f1 40%, #aeb7c2 55%, #f1f4f8 75%, #c9d1db 100%);
  --cromo-borde: linear-gradient(135deg, #f1f4f8, #5b6b82 35%, #e3e9f1 55%, #3d4b61 80%, #c9d1db);
  --boton: #4a90e2;
  --boton-texto: #ffffff;
  --fondo-portada: radial-gradient(at 22% 45%, #1a2638 0%, #0f141d 55%, #0b0f15 85%);
}
:root[data-tema="noche"] .puesto { background: linear-gradient(180deg, #18202c 0%, #121822 100%); }
:root[data-tema="noche"] .barra { background: rgba(11, 15, 21, .95); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 28px;
  padding: 10px max(16px, calc((100% - var(--ancho)) / 2));
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--acero);
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 19px; }
.enlaces { display: flex; gap: 22px; margin-left: auto; }
.enlaces a { text-decoration: none; color: var(--plata); font-size: 15px; }
.enlaces a:hover { color: var(--platino); }
.directo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--plata); white-space: nowrap; }
.punto-vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--plata-oscura); }
.directo.vivo .punto-vivo { background: var(--verde-vivo); box-shadow: 0 0 0 0 rgba(62, 207, 122, .6); animation: latido 2.4s infinite; }
.directo.caido .punto-vivo { background: var(--rojo-naipe); }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(62,207,122,.55); } 70% { box-shadow: 0 0 0 9px rgba(62,207,122,0); } 100% { box-shadow: 0 0 0 0 rgba(62,207,122,0); } }

/* ---------- Portada ---------- */
.portada-fondo { background: var(--fondo-portada); }
.portada {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); gap: 64px; align-items: center;
  padding: 64px 16px 56px;
}
.portada-logo { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(255,255,255,.06)); }
.portada-marca { margin: 0; }
.credito {
  margin-top: 14px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: .02em;
  color: var(--plata-oscura);
}
.portada-texto h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: .01em;
  margin: 0 0 14px;
}
.subtitulo { font-family: var(--serif); font-size: 22px; color: var(--plata); margin: 0 0 36px; max-width: 30em; }

.cifras { display: flex; gap: 0; margin: 0 0 40px; border-top: 1px solid var(--acero); border-bottom: 1px solid var(--acero); }
.cifras div { flex: 1; padding: 16px 20px 14px 0; }
.cifras div + div { padding-left: 20px; border-left: 1px solid var(--acero); }
.cifras dt { font-size: 14px; color: var(--plata-oscura); }
.cifras dd { margin: 2px 0 0; font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }

.buscar label { display: block; font-family: var(--serif); font-size: 20px; margin-bottom: 10px; }
.buscar-fila { display: flex; gap: 10px; max-width: 460px; }
.buscar input {
  flex: 1; min-width: 0;
  background: var(--grafito); color: var(--platino);
  border: 1px solid var(--acero); border-radius: 10px;
  padding: 13px 16px; font: inherit; font-size: 17px;
}
.buscar input::placeholder { color: var(--plata-oscura); }
.buscar button, .filtros button { font: inherit; cursor: pointer; }
.buscar button {
  border: 0; border-radius: 10px; padding: 0 20px; font-weight: 600; color: #0b0c0e;
  background: var(--boton); color: var(--boton-texto); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #000;
}
.ayuda { min-height: 1.5em; margin: 8px 0 0; color: var(--plata); font-size: 14px; }

/* La línea de meta: banda de cuadros, como la bandera del logotipo */
.meta {
  height: 18px; margin: 8px 0 0;
  background:
    conic-gradient(var(--platino) 25%, var(--negro) 0 50%, var(--platino) 0 75%, var(--negro) 0) 0 0 / 18px 18px;
  opacity: .9;
  border-top: 1px solid var(--plata-oscura); border-bottom: 1px solid var(--plata-oscura);
}

/* ---------- Bloques ---------- */
.bloque { max-width: var(--ancho); margin: 0 auto; padding: 72px 16px 8px; }
.bloque h2 { font-family: var(--serif); font-weight: 700; font-size: 36px; margin: 0 0 28px; color: var(--platino); }
.bloque-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bloque-cabecera h2 { margin-bottom: 20px; }

/* ---------- Podio: manos abiertas en abanico ---------- */
.podio { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 20px; align-items: end; }
.puesto {
  position: relative; text-align: center;
  padding: 34px 18px 26px; border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, #22242a 0%, var(--grafito) 55%, #0c0d0f 100%);
  border: 1px solid var(--acero);
}
.puesto.p1 { order: 2; padding-top: 46px; }
.puesto.p2 { order: 1; }
.puesto.p3 { order: 3; }
.puesto.p1::before {
  content: ""; position: absolute; inset: -1px; border-radius: 22px; padding: 1px;
  background: var(--cromo-borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.medalla {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 22px; color: #111;
  background: var(--cromo); box-shadow: 0 0 0 4px var(--negro), inset 0 1px 0 #fff;
}
.p1 .medalla { width: 54px; height: 54px; top: -27px; font-size: 27px; background: linear-gradient(180deg,#fff6cf,#e2bd4f 45%,#9c7a1d 55%,#f1d67a); }
.p3 .medalla { background: linear-gradient(180deg,#ffe2c8,#c98a52 45%,#7f4f26 55%,#e2a874); }
.abanico { position: relative; height: 150px; margin: 0 auto 30px; width: 260px; max-width: 100%; }
.p1 .abanico { height: 178px; width: 300px; }
.abanico svg { position: absolute; left: 50%; bottom: 0; width: 92px; height: auto; transform-origin: 50% 120%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.p1 .abanico svg { width: 108px; }
.puesto .nombre { font-family: var(--serif); font-size: 26px; font-weight: 700; margin: 0; line-height: 1.15; }
.puesto .datos { color: var(--plata-oscura); font-size: 14px; margin: 4px 0 12px; }
.puesto .jugada { font-family: var(--serif); font-size: 21px; margin: 0; }
.puesto.vacio { min-height: 260px; display: grid; place-items: center; color: var(--plata-oscura); }

/* ---------- Clasificación ---------- */
.filtros { display: flex; gap: 6px; background: var(--grafito); border: 1px solid var(--acero); border-radius: 999px; padding: 4px; }
.filtros button { border: 0; background: none; color: var(--plata); padding: 7px 14px; border-radius: 999px; font-size: 14px; }
.filtros button.activo { background: var(--acero); color: var(--platino); }

.tabla { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--acero); }
.fila {
  display: grid; grid-template-columns: 56px minmax(170px, 1.1fr) auto minmax(200px, 1fr);
  gap: 22px; align-items: center;
  padding: 14px 8px; border-bottom: 1px solid var(--acero);
  cursor: pointer;
}
.fila:hover { background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 70%); }
.fila .pos { font-family: var(--serif); font-weight: 700; font-size: 30px; text-align: center; font-variant-numeric: lining-nums; color: var(--plata); }
.fila.top .pos { background: var(--cromo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fila .quien b { display: block; font-size: 17px; font-weight: 600; }
.fila .quien span { font-size: 14px; color: var(--plata-oscura); }
.mano { display: flex; gap: 6px; }
.mano svg { width: 46px; height: auto; }
.fila .resultado b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 700; }
.fila .resultado span { font-size: 14px; color: var(--plata-oscura); }
.fila .resultado span.empate { color: #e7b04a; }
.fila.incompleta .quien b, .fila.incompleta .resultado b { color: var(--plata); }
.fila.resaltada { background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--platino); }
.tabla .vacio { padding: 40px 8px; color: var(--plata-oscura); }

/* ---------- Ruta ---------- */
.ruta { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.ruta::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--cromo-borde); opacity: .55; }
.ruta li { position: relative; text-align: center; padding: 0 6px; }
.ruta .hito {
  position: relative; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 22px; color: #111;
  background: var(--cromo); box-shadow: 0 0 0 6px var(--negro);
}
.ruta li.inactivo .hito { background: var(--acero); color: var(--plata); }
.ruta .lugar { font-family: var(--serif); font-size: 22px; font-weight: 700; margin: 0; }
.ruta .paso { color: var(--plata-oscura); font-size: 14px; margin: 2px 0 0; }
.ruta .barra-paso { height: 4px; border-radius: 2px; background: var(--acero); margin: 10px auto 0; max-width: 120px; overflow: hidden; }
.ruta .barra-paso i { display: block; height: 100%; background: var(--plata); }

/* ---------- Escalera de jugadas ---------- */
.escalera { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0 40px; }
.escalera li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--acero); }
.escalera .rango { width: 26px; font-family: var(--serif); font-weight: 700; color: var(--plata-oscura); text-align: right; }
.escalera .nombre-j { flex: 1; font-family: var(--serif); font-size: 19px; }
.escalera .ej { display: flex; gap: 3px; }
.escalera .ej svg { width: 32px; height: auto; }

/* ---------- Pie ---------- */
.pie { max-width: calc(var(--ancho) - 32px); margin: 96px auto 0; padding: 32px 0 48px; display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--acero); color: var(--plata-oscura); font-size: 14px; }
.pie p { margin: 0; max-width: 60ch; }

/* ---------- Diálogo "mi mano" ---------- */
.dialogo {
  width: min(560px, calc(100% - 32px)); border: 1px solid var(--acero); border-radius: 22px; padding: 30px 28px 28px;
  background: radial-gradient(120% 80% at 50% 0%, #23252b, var(--grafito) 60%); color: var(--platino);
}
.dialogo::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(3px); }
.dialogo .cerrar { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--plata); font-size: 30px; cursor: pointer; line-height: 1; }
.dialogo h3 { font-family: var(--serif); font-size: 30px; margin: 0; }
.dialogo .datos { color: var(--plata-oscura); margin: 2px 0 22px; font-size: 14px; }
.dialogo .mano { justify-content: center; gap: 8px; }
.dialogo .mano svg { width: 84px; }
.dialogo .puntos { list-style: none; margin: 22px 0 0; padding: 0; }
.dialogo .puntos li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--acero); font-size: 15px; }
.dialogo .puntos li span:last-child { font-weight: 600; }
.dialogo .veredicto { text-align: center; font-family: var(--serif); font-size: 26px; margin: 22px 0 2px; }
.dialogo .posicion { text-align: center; color: var(--plata); margin: 0; }

/* ---------- Móvil ---------- */
@media (max-width: 1100px) { .escalera { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); } }
@media (max-width: 900px) {
  .enlaces { display: none; }
  .portada { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 30px; text-align: center; }
  .portada-logo { max-width: 260px; margin: 0 auto; }
  .credito { margin-top: 10px; font-size: 14px; }
  .subtitulo { margin-left: auto; margin-right: auto; font-size: 19px; }
  .cifras dd { font-size: 30px; }
  .cifras div { padding-right: 8px; }
  .cifras div + div { padding-left: 10px; }
  .buscar-fila { margin: 0 auto; }
  .podio { grid-template-columns: 1fr; gap: 40px; }
  .puesto.p1, .puesto.p2, .puesto.p3 { order: 0; }
  .fila { grid-template-columns: 40px 1fr; gap: 6px 14px; }
  .fila .pos { grid-row: span 3; font-size: 24px; }
  .mano svg { width: 40px; }
  .ruta { grid-auto-flow: row; gap: 18px; }
  .ruta::before { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .ruta li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; align-items: center; }
  .ruta .hito { margin: 0; grid-row: span 3; }
  .ruta .barra-paso { margin: 6px 0 0; }
  .barra { gap: 12px; }
  .escalera { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .pie { margin-left: 16px; margin-right: 16px; }
  .marca span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .directo.vivo .punto-vivo { animation: none; }
}

/* ---------- Botón a la página principal (onesecond.es / onesecond.cat) ---------- */
.os-inicio { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05); color: #e9eef5; text-decoration: none;
  font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .04em; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease; }
.os-inicio:hover, .os-inicio:focus-visible { border-color: #4a90e2; background: rgba(74, 144, 226, .16); outline: none; }
.os-inicio img { width: 20px; height: auto; display: block; }
@media (max-width: 640px) { .os-inicio { padding: 6px 8px; } .os-inicio span { display: none; } }

/* ---------- Personas consultando los tiempos (como en el rally) ---------- */
.personas { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 12px; font-weight: 600;
  color: var(--plata); white-space: nowrap; }
.personas svg { width: 15px; height: 15px; fill: currentColor; opacity: .9; }
.personas b { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .personas-texto { display: none; } }
@media (max-width: 640px) {
  .barra { gap: 12px; }
  .marca span { white-space: nowrap; }
  .directo, .personas { font-size: 12px; }
  .directo .hora { display: none; }     /* en el móvil no cabe la hora: se ve "En directo" */
}