/* ============================================================
   Camba Ajedrez — base visual
   Azul marino = la mesa.  Madera = tablero y marca.
   Papel = paneles.  Verde de torneo = solo lo vivo.
   ============================================================ */

:root {
  --azul:           #16283F;
  --azul-alto:      #1E3550;
  --azul-borde:     #335073;
  --azul-suave:     #A2B4C9;

  --papel:          #F4EDDF;
  --papel-hondo:    #EBE1CC;
  --papel-borde:    #D5C6A8;
  --tinta:          #24211B;
  --tinta-suave:    #625A4A;

  --nogal:          #7B4F26;
  --nogal-claro:    #A06A34;
  --ocre-claro:     #D2A059;
  --verde:          #3E6046;

  --casilla-clara:  #EADCBC;
  --casilla-oscura: #A97A45;

  --display: "Libre Baskerville", Georgia, serif;
  --texto:   "Source Serif 4", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--azul);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--ocre-claro);
  outline-offset: 2px;
}

/* ---------- Barra superior ---------- */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 30px;
  background: var(--azul-alto);
  border-bottom: 3px double var(--azul-borde);
}

.marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.01em;
  color: var(--papel);
  text-decoration: none;
}

.marca__acento {
  color: var(--ocre-claro);
  margin-left: 0;
}

.barra__acciones {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Controles ---------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.campo__etiqueta {
  font-family: var(--display);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul-suave);
}

.campo__control {
  appearance: none;
  min-width: 152px;
  padding: 9px 12px;
  background: var(--azul);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  color: var(--papel);
  font-family: var(--texto);
  font-size: 14px;
  cursor: pointer;
}

.campo__control:hover { border-color: var(--ocre-claro); }

.boton {
  padding: 11px 22px;
  background: var(--ocre-claro);
  border: 1px solid var(--ocre-claro);
  border-radius: 2px;
  color: var(--azul);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease;
}

.boton:hover { background: #E0B171; }

/* ---------- Mesa ---------- */

.mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 36px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 30px 60px;
}

.tablero-zona {
  display: grid;
  place-items: center;
  min-width: 0;
}

.tablero-marco {
  width: min(100%, 77vh);
  padding: 14px;
  background: linear-gradient(160deg, #6F4620 0%, #8A5A2A 50%, #6A4220 100%);
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.tablero {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(40, 24, 8, 0.6);
  background-color: var(--casilla-clara);
  background-image:
    linear-gradient(45deg, var(--casilla-oscura) 25%, transparent 25%, transparent 75%, var(--casilla-oscura) 75%),
    linear-gradient(45deg, var(--casilla-oscura) 25%, transparent 25%, transparent 75%, var(--casilla-oscura) 75%);
  background-size: 25% 25%;
  background-position: 0 0, 12.5% 12.5%;
}

/* ---------- Panel lateral ---------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jugador {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--papel-hondo);
  border: 1px solid var(--papel-borde);
  border-radius: 2px;
  color: var(--tinta);
}

.jugador__estado {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  background: var(--papel-borde);
}

.jugador--activo .jugador__estado { background: var(--verde); }

.jugador__datos {
  flex: 1;
  min-width: 0;
}

.jugador__nombre {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}

.jugador__meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--tinta-suave);
}

.reloj {
  margin: 0;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--tinta);
}

.jugador--activo .reloj { color: var(--verde); }

/* ---------- Planilla (elemento firma) ---------- */

.planilla {
  background: var(--papel-hondo);
  border: 1px solid var(--papel-borde);
  border-radius: 2px;
  overflow: hidden;
  color: var(--tinta);
}

.planilla__titulo {
  margin: 0;
  padding: 14px 16px 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nogal);
  text-align: center;
  border-bottom: 1px solid var(--papel-borde);
}

.planilla__cabecera {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  padding: 9px 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: 2px solid var(--nogal);
}

.planilla__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 340px;
  overflow-y: auto;
}

.planilla__vacia {
  margin: 0;
  padding: 28px 16px;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  color: var(--tinta-suave);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .mesa {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 18px 46px;
  }
  .tablero-marco { width: 100%; padding: 10px; }
  .barra { padding: 16px 18px; }
  .campo__control { min-width: 134px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ---------- Tablero real (cm-chessboard) ---------- */

.tablero {
  border: none;
  background-image: none;
  background-color: transparent;
  aspect-ratio: auto;
}

.tablero-marco { padding: 0; }

.cm-chessboard.camba .board .square.white { fill: var(--casilla-clara); }
.cm-chessboard.camba .board .square.black { fill: var(--casilla-oscura); }

.cm-chessboard.camba.border-type-frame .board .border {
  fill: #7A4E24;
  stroke: none;
}

.cm-chessboard.camba.border-type-frame .board .border-inner {
  fill: none;
  stroke: #4A2C10;
  stroke-width: 0.7%;
}

.cm-chessboard.camba .coordinates .coordinate,
.cm-chessboard.camba .coordinates .coordinate.white,
.cm-chessboard.camba .coordinates .coordinate.black {
  fill: #EADCBC;
  font-size: 6.5px;
}

/* ---------- Filas de la planilla ---------- */

.planilla__fila {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  padding: 6px 16px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(123, 79, 38, 0.14);
}

.planilla__fila:last-child { border-bottom: none; }

.planilla__num {
  color: var(--nogal);
  font-weight: 600;
}

/* ---------- Estado de la partida ---------- */

.estado {
  margin: 0;
  padding: 13px 16px;
  background: var(--nogal);
  border-radius: 2px;
  color: var(--papel);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.estado[hidden] { display: none; }

/* ---------- Reloj en apuro ---------- */

.reloj--apuro { color: #8C2F2A !important; }

/* ---------- Panel de fin de partida ---------- */

.final {
  padding: 20px 16px;
  background: var(--papel-hondo);
  border: 1px solid var(--papel-borde);
  border-top: 3px solid var(--nogal);
  border-radius: 2px;
  color: var(--tinta);
  text-align: center;
}

.final[hidden] { display: none; }

.final__resultado {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
}

.final__detalle {
  margin: 5px 0 16px;
  font-size: 14px;
  font-style: italic;
  color: var(--tinta-suave);
}

/* ---------- Acciones de la partida ---------- */

.acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.acciones[hidden] { display: none; }

.boton--secundario {
  padding: 9px 8px;
  background: transparent;
  border: 1px solid var(--azul-borde);
  color: var(--azul-suave);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.boton--secundario:hover {
  background: rgba(210, 160, 89, 0.12);
  border-color: var(--ocre-claro);
  color: var(--papel);
}

.boton--secundario:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- Jugadas pinchables en la planilla ---------- */

.planilla__jugada {
  padding: 0;
  background: none;
  border: none;
  border-radius: 2px;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.planilla__jugada:hover { color: var(--nogal); }

.planilla__jugada--activa {
  background: var(--nogal);
  color: var(--papel);
  padding: 0 5px;
  margin: 0 -5px;
}

/* ---------- Barra de navegacion ---------- */

.navegacion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--azul-alto);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
}

.navegacion[hidden] { display: none; }

.nav__boton {
  flex: 1;
  padding: 6px 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--azul-suave);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.nav__boton:hover:not(:disabled) {
  background: rgba(210, 160, 89, 0.14);
  color: var(--papel);
}

.nav__boton:disabled { opacity: 0.3; cursor: default; }

.nav__estado {
  flex: 1.6;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ocre-claro);
}

/* ---------- Exportar PGN ---------- */

.boton--ancho { width: 100%; }
.boton--ancho[hidden] { display: none; }

/* ---------- Menu de navegacion ---------- */

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
}

.menu__enlace {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-suave);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.menu__enlace:hover { color: var(--papel); }

.menu__enlace--activo {
  color: var(--ocre-claro);
  border-bottom-color: var(--ocre-claro);
}

/* ---------- Fila de controles de la partida ---------- */

.controles {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 30px;
  border-bottom: 1px solid var(--azul-borde);
}

/* ---------- Portada ---------- */

.portada {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 30px 60px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 72px 0 64px;
}

.hero__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--papel);
}

.hero__lema {
  margin: 20px 0 34px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--azul-suave);
}

.hero__acciones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.boton--grande {
  padding: 15px 32px;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
}

.hero__tablero {
  aspect-ratio: 1;
  width: min(100%, 400px);
  justify-self: center;
  border: 14px solid #7A4E24;
  border-radius: 2px;
  background-color: var(--casilla-clara);
  background-image:
    linear-gradient(45deg, var(--casilla-oscura) 25%, transparent 25%, transparent 75%, var(--casilla-oscura) 75%),
    linear-gradient(45deg, var(--casilla-oscura) 25%, transparent 25%, transparent 75%, var(--casilla-oscura) 75%);
  background-size: 25% 25%;
  background-position: 0 0, 12.5% 12.5%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(-3deg);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 44px 0 40px;
  }
  .portada { padding: 0 18px 44px; }
  .menu { gap: 18px; }
  .controles { padding: 14px 18px; }
}

/* ---------- Secciones de la portada ---------- */

.seccion { padding: 0 0 64px; }

.seccion__cabecera { margin-bottom: 26px; }

.seccion__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  color: var(--papel);
}

.seccion__lema {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--azul-suave);
}

/* ---------- Problema del dia ---------- */

.puzzle {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.puzzle__marco {
  width: 100%;
  padding: 0;
  background: linear-gradient(160deg, #6F4620 0%, #8A5A2A 50%, #6A4220 100%);
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

.puzzle__tablero { width: 100%; }

.puzzle__turno {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocre-claro);
}

.puzzle__mensaje {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--papel);
}

.puzzle__mensaje--bien { color: #7FBF8C; }
.puzzle__mensaje--mal  { color: #E09A93; }

.puzzle__patron {
  margin: 0 0 18px;
  font-size: 15px;
  font-style: italic;
  color: var(--azul-suave);
}

.puzzle__patron[hidden] { display: none; }
#puzzle-solucion[hidden] { display: none; }

@media (max-width: 900px) {
  .puzzle {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .seccion { padding: 0 0 44px; }
}

/* ---------- Marcador de estadisticas ---------- */

.marcador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.marcador__dato {
  padding: 18px 16px;
  background: var(--azul-alto);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  text-align: center;
}

.marcador__cifra {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
}

.marcador__cifra--bien { color: #7FBF8C; }
.marcador__cifra--mal  { color: #E09A93; }
.marcador__cifra--ocre { color: var(--ocre-claro); }

.marcador__etiqueta {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--azul-suave);
}

/* ---------- Lista de partidas ---------- */

.partidas {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  overflow: hidden;
}

.partida {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  background: var(--azul-alto);
  border-bottom: 1px solid var(--azul-borde);
}

.partida:last-child { border-bottom: none; }

.partida__resultado {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
}

.partida--victoria .partida__resultado { color: #7FBF8C; }
.partida--derrota  .partida__resultado { color: #E09A93; }
.partida--tablas   .partida__resultado { color: var(--azul-suave); }

.partida__detalle {
  font-size: 14px;
  color: var(--azul-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partida__fecha {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--azul-suave);
}

.partida__pgn {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  color: var(--azul-suave);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.partida__pgn:hover { border-color: var(--ocre-claro); color: var(--papel); }

.sutil {
  padding: 0;
  background: none;
  border: none;
  color: var(--azul-suave);
  font-family: var(--texto);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.sutil:hover { color: #E09A93; }

.vacio {
  margin: 0;
  padding: 34px 20px;
  background: var(--azul-alto);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  text-align: center;
  font-size: 16px;
  color: var(--azul-suave);
}

.vacio__enlace { color: var(--ocre-claro); }

@media (max-width: 700px) {
  .partida {
    grid-template-columns: 1fr auto;
    grid-template-areas: "res fecha" "det pgn";
    gap: 6px 12px;
  }
  .partida__resultado { grid-area: res; }
  .partida__detalle   { grid-area: det; white-space: normal; }
  .partida__fecha     { grid-area: fecha; text-align: right; }
  .partida__pgn       { grid-area: pgn; justify-self: end; }
}

/* ---------- Pagina de aperturas ---------- */

.ap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
  padding: 30px 30px 60px;
}

.ap__izquierda {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.ap__izquierda .tablero-marco { width: min(100%, 62vh); }
.ap__izquierda .navegacion { width: min(100%, 62vh); }

.ap__ficha {
  width: min(100%, 62vh);
  padding: 20px 22px;
  background: var(--papel-hondo);
  border: 1px solid var(--papel-borde);
  border-top: 3px solid var(--nogal);
  border-radius: 2px;
  color: var(--tinta);
}

.ap__eco {
  margin: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--nogal);
}

.ap__nombre {
  margin: 4px 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
}

.ap__idea {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.ap__linea {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--papel-borde);
  font-variant-numeric: tabular-nums;
}

.ap__num {
  margin-right: 4px;
  color: var(--nogal);
  font-weight: 600;
}

.ap__jugada {
  margin-right: 10px;
  padding: 2px 5px;
  background: none;
  border: none;
  border-radius: 2px;
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 16px;
  cursor: pointer;
}

.ap__jugada--hecha { color: var(--tinta); font-weight: 600; }

.ap__jugada--actual {
  background: var(--nogal);
  color: var(--papel);
}

/* lista lateral */

.ap__familia {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocre-claro);
}

.ap__grupo {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  overflow: hidden;
}

.ap__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--azul-alto);
  border: none;
  border-bottom: 1px solid var(--azul-borde);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.ap__grupo li:last-child .ap__item { border-bottom: none; }

.ap__item:hover { background: rgba(210, 160, 89, 0.12); }

.ap__item--activa {
  background: var(--nogal);
  color: var(--papel);
}

.ap__item-eco {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--azul-suave);
}

.ap__item--activa .ap__item-eco { color: var(--papel); }

/* ---------- Fichas de apertura en la portada ---------- */

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ficha {
  display: block;
  padding: 16px 18px;
  background: var(--azul-alto);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  text-decoration: none;
}

.ficha:hover { border-color: var(--ocre-claro); }

.ficha__eco {
  display: block;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ocre-claro);
}

.ficha__nombre {
  display: block;
  margin: 5px 0 7px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--papel);
}

.ficha__jugadas {
  display: block;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--azul-suave);
}

.sutil--enlace { display: inline-block; text-decoration: underline; }

@media (max-width: 1000px) {
  .ap {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px 44px;
  }
  .ap__izquierda .tablero-marco,
  .ap__izquierda .navegacion,
  .ap__ficha { width: 100%; }
}

/* ---------- Proximamente: multijugador ---------- */

.proximo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  padding: 28px;
  background: var(--azul-alto);
  border: 1px solid var(--azul-borde);
  border-left: 3px solid var(--ocre-claro);
  border-radius: 2px;
}

.proximo__intro {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocre-claro);
}

.proximo__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.proximo__lista li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 16px;
  color: var(--papel);
}

.proximo__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 8px;
  background: var(--casilla-oscura);
}

.aviso {
  align-self: start;
  padding: 20px;
  background: var(--azul);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
}

.aviso__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--papel);
}

.aviso__nota {
  margin: 5px 0 14px;
  font-size: 14px;
  color: var(--azul-suave);
}

.aviso__fila {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.aviso__campo {
  flex: 1;
  min-width: 150px;
  padding: 11px 12px;
  background: var(--azul-alto);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  color: var(--papel);
  font-family: var(--texto);
  font-size: 15px;
}

.aviso__campo::placeholder { color: var(--azul-suave); }
.aviso__campo:focus { border-color: var(--ocre-claro); outline: none; }

.aviso__respuesta {
  margin: 12px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--ocre-claro);
}

.aviso__respuesta[hidden] { display: none; }

@media (max-width: 900px) {
  .proximo {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
  }
}

/* ---------- Plantel de rivales ---------- */

.seccion--primera { padding-top: 34px; }
.seccion__titulo--grande { font-size: 38px; }

.rival__rango {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocre-claro);
}

.rivales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}

.rival {
  display: block;
  padding: 18px 14px 14px;
  background: var(--azul-alto);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
}

.rival:hover {
  border-color: var(--ocre-claro);
  background: rgba(210, 160, 89, 0.09);
}

.rival__avatar {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  padding: 7px;
  background: var(--casilla-clara);
  border: 2px solid var(--nogal);
  border-radius: 50%;
}

.rival__avatar svg { width: 100%; height: 100%; display: block; }

.rival__nombre {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--papel);
}

.rival__pais {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--azul-suave);
}

.rival__pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--azul-borde);
}

.rival__elo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ocre-claro);
}

.rival__estilo {
  font-size: 12px;
  color: var(--azul-suave);
}

.campo__control--ancho { min-width: 232px; }

/* ---------- Pie de pagina ---------- */

.pie {
  margin-top: 40px;
  padding: 34px 30px 42px;
  background: var(--azul-alto);
  border-top: 3px double var(--azul-borde);
}

.pie__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr);
  gap: 40px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}

.pie__nombre {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--papel);
}

.pie__lema {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--azul-suave);
}

.pie__enlaces {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pie__enlaces a {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-suave);
  text-decoration: none;
}

.pie__enlaces a:hover { color: var(--ocre-claro); }

.pie__creditos p {
  margin: 0 0 9px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--azul-suave);
}

.pie__creditos a {
  color: var(--azul-suave);
  text-decoration: underline;
}

.pie__creditos a:hover { color: var(--ocre-claro); }

.pie__nota {
  padding-top: 9px;
  border-top: 1px solid var(--azul-borde);
  font-style: italic;
  color: var(--ocre-claro) !important;
}

@media (max-width: 900px) {
  .pie {
    padding: 26px 18px 32px;
  }
  .pie__caja {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .pie__enlaces {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }
}

.menu__idioma {
  appearance: none;
  padding: 5px 9px;
  background: var(--azul);
  border: 1px solid var(--azul-borde);
  border-radius: 2px;
  color: var(--azul-suave);
  font-family: var(--texto);
  font-size: 13px;
  cursor: pointer;
}

.menu__idioma:hover { border-color: var(--ocre-claro); color: var(--papel); }

/* ---------- Devanagari para hindi ---------- */

html[lang="hi"] {
  --display: "Noto Serif Devanagari", "Libre Baskerville", Georgia, serif;
  --texto:   "Noto Serif Devanagari", "Source Serif 4", Georgia, serif;
}

html[lang="hi"] .hero__titulo { line-height: 1.25; }
html[lang="hi"] .marca,
html[lang="hi"] .pie__nombre { font-family: "Libre Baskerville", Georgia, serif; }

/* ================= ARABE: interfaz espejada ================= */

html[lang="ar"] {
  --display: "Noto Naskh Arabic", "Libre Baskerville", Georgia, serif;
  --texto:   "Noto Naskh Arabic", "Source Serif 4", Georgia, serif;
}

/* La marca y la notacion se quedan en alfabeto latino */
html[lang="ar"] .marca,
html[lang="ar"] .pie__nombre,
html[lang="ar"] .planilla__lista,
html[lang="ar"] .ap__linea,
html[lang="ar"] .reloj,
html[lang="ar"] .rival__elo,
html[lang="ar"] .marcador__cifra {
  font-family: "Libre Baskerville", Georgia, serif;
  direction: ltr;
}

/* El titular arabe necesita mas aire vertical */
html[lang="ar"] .hero__titulo { line-height: 1.35; }

/* Las flechas de navegacion apuntan al reves en un idioma espejado */
html[rtl-flechas="si"] .nav__boton { transform: scaleX(-1); }

/* Los bordes de acento cambian de lado */
html[lang="ar"] .proximo {
  border-left: 1px solid var(--azul-borde);
  border-right: 3px solid var(--ocre-claro);
}

html[lang="ar"] .proximo__lista li {
  padding: 7px 24px 7px 0;
}

html[lang="ar"] .proximo__lista li::before {
  left: auto;
  right: 0;
}

html[lang="ar"] .marca__acento { margin-left: 0; margin-right: 7px; }

/* La planilla es una tabla de datos: se lee igual en todos los idiomas */
html[lang="ar"] .planilla__cabecera,
html[lang="ar"] .planilla__fila {
  direction: ltr;
}

/* ---------- El Elo en el cartel de final ---------- */

.final__elo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 40, 63, .15);
  font-variant-numeric: tabular-nums;
}

.elo__antes {
  font-size: 1.05rem;
  color: rgba(22, 40, 63, .5);
}

.elo__flecha {
  font-size: .95rem;
  color: rgba(22, 40, 63, .35);
}

.elo__despues {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--tinta);
}

.elo__cambio {
  font-size: 1rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 3px;
}

.elo__cambio--sube {
  color: #24503A;
  background: rgba(62, 96, 70, .14);
}

.elo__cambio--baja {
  color: #8A3028;
  background: rgba(138, 48, 40, .12);
}

/* Cuando la partida no puntua, una nota discreta y sin cifras */
.final__elo--nota {
  display: block;
  font-size: .9rem;
  font-style: italic;
  color: rgba(22, 40, 63, .55);
}

/* ================= PERFIL ================= */

.perfil {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* --- La tarjeta de arriba --- */

.tarjeta-perfil {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 34px;
  background: var(--papel);
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}

.avatar {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  background: var(--arce);
  border: 2px solid var(--nogal);
  border-radius: 50%;
}

.avatar svg {
  width: 62px;
  height: 62px;
}

/* Los dos tramos mas altos repiten pieza, pero con aro dorado */
.avatar--coronado {
  border-color: var(--ocre);
  box-shadow: 0 0 0 3px rgba(201, 154, 74, .3);
}

.tarjeta-perfil__datos { flex: 1 1 auto; min-width: 0; }

.tarjeta-perfil__nombre {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--tinta);
}

.tarjeta-perfil__elo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
}

.elo-grande {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.elo-etiqueta {
  font-size: .88rem;
  color: rgba(22, 40, 63, .6);
}

/* --- La barra hacia el siguiente tramo --- */

.progreso__pista {
  height: 7px;
  background: rgba(22, 40, 63, .12);
  border-radius: 4px;
  overflow: hidden;
}

.progreso__hecho {
  height: 100%;
  background: var(--ocre);
  border-radius: 4px;
  transition: width .5s ease;
}

.progreso__falta {
  margin: 7px 0 0;
  font-size: .84rem;
  color: rgba(22, 40, 63, .55);
}

/* --- Las cifras --- */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.cifra {
  padding: 20px 22px;
  background: var(--papel);
  border-radius: 4px;
  text-align: center;
}

.cifra__dato {
  margin: 0;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.cifra__nombre {
  margin: 4px 0 0;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(22, 40, 63, .55);
}

/* --- Bloques --- */

.bloque {
  margin-top: 36px;
  padding: 26px 30px;
  background: var(--papel);
  border-radius: 4px;
}

.bloque__titulo {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--tinta);
}

.bloque__nota {
  margin: 0 0 18px;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(22, 40, 63, .68);
}

.campo-linea {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.campo-linea .campo__control {
  flex: 1 1 220px;
  min-width: 0;
}

.campo-linea__aviso {
  font-size: .85rem;
  color: #24503A;
}

/* --- La escala oficial --- */

.escala {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: rgba(22, 40, 63, .12);
  border-radius: 3px;
  overflow: hidden;
}

.escala__hito {
  display: grid;
  grid-template-columns: 72px 56px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--papel);
}

.escala__hito--pasado { background: rgba(201, 154, 74, .14); }

.escala__elo {
  font-family: var(--display);
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.escala__sigla {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ocre-oscuro, #8A6A2F);
}

.escala__nota {
  font-size: .8rem;
  color: rgba(22, 40, 63, .55);
}

@media (max-width: 640px) {
  .tarjeta-perfil { flex-direction: column; text-align: center; }
  .tarjeta-perfil__elo { justify-content: center; }
  .escala__hito { grid-template-columns: 64px 48px 1fr; }
}

/* ---------- Interruptores de ajustes ---------- */

.interruptores {
  list-style: none;
  margin: 0;
  padding: 0;
}

.interruptor {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(22, 40, 63, .1);
}

.interruptor:last-child { border-bottom: 0; }

.interruptor__texto {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

.interruptor__nombre {
  display: block;
  color: var(--tinta);
}

.interruptor__nota {
  display: block;
  margin-top: 2px;
  font-size: .82rem;
  color: rgba(22, 40, 63, .55);
}

/* La casilla de siempre, vestida de palanca */
.interruptor__caja {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background: rgba(22, 40, 63, .22);
  cursor: pointer;
  transition: background .18s ease;
}

.interruptor__caja::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}

.interruptor__caja:checked { background: var(--verde, #3E6046); }
.interruptor__caja:checked::after { transform: translateX(20px); }

.interruptor__caja:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 2px;
}

/* En arabe la palanca se mueve al otro lado */
html[lang="ar"] .interruptor__caja::after { left: auto; right: 3px; }
html[lang="ar"] .interruptor__caja:checked::after { transform: translateX(-20px); }

/* ---------- Piezas comidas junto a cada jugador ---------- */

.comidas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  margin: 5px 0 0;
  min-height: 17px;
}

.comidas svg {
  width: 17px;
  height: 17px;
  opacity: .5;
}

.comidas__ventaja {
  margin-inline-start: 7px;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(22, 40, 63, .6);
  font-variant-numeric: tabular-nums;
}

/* ================= ESTADISTICAS ================= */

.plantel-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}

.plantel-total__cifra {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.plantel-total__pct {
  font-size: .95rem;
  color: rgba(22, 40, 63, .55);
}

/* --- Progreso por rango --- */

.rangos {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.rango-fila {
  display: grid;
  grid-template-columns: 130px 1fr 46px;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font-size: .88rem;
}

.rango-fila__nombre { color: rgba(22, 40, 63, .78); }

.rango-fila__pista {
  height: 5px;
  background: rgba(22, 40, 63, .12);
  border-radius: 3px;
  overflow: hidden;
}

.rango-fila__hecho {
  display: block;
  height: 100%;
  background: var(--ocre);
  border-radius: 3px;
  transition: width .4s ease;
}

.rango-fila--completo .rango-fila__hecho { background: var(--verde, #3E6046); }

.rango-fila__cuenta {
  text-align: end;
  color: rgba(22, 40, 63, .55);
  font-variant-numeric: tabular-nums;
}

/* --- La curva de progresion --- */

.curva {
  position: relative;
  margin: 6px 0 4px;
  padding: 4px 0;
}

.curva__svg {
  display: block;
  width: 100%;
  height: 180px;
}

.curva__area  { fill: rgba(201, 154, 74, .30); }
.curva__linea { fill: none; stroke: #16283F; stroke-width: 3.5; stroke-linejoin: round; }
.curva__punto { fill: var(--papel); stroke: #16283F; stroke-width: 2.5; }

.curva__tope,
.curva__suelo {
  position: absolute;
  inset-inline-end: 0;
  font-size: 1.23rem;
  color: rgba(22, 40, 63, .92);
  font-variant-numeric: tabular-nums;
}

.curva__tope  { top: 0; }
.curva__suelo { bottom: 0; }

/* --- Mejor victoria --- */

.mejor-victoria {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--tinta);
}

/* --- Cuentas pendientes --- */

.pendientes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: rgba(22, 40, 63, .12);
  border-radius: 3px;
  overflow: hidden;
}

.pendiente__enlace {
  display: grid;
  grid-template-columns: 1fr 62px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--papel);
  text-decoration: none;
  transition: background .15s ease;
}

.pendiente__enlace:hover { background: rgba(201, 154, 74, .12); }

.pendiente__nombre { color: var(--tinta); }

.pendiente__elo {
  color: rgba(22, 40, 63, .6);
  font-variant-numeric: tabular-nums;
}

.pendiente__intentos {
  font-size: .8rem;
  color: rgba(22, 40, 63, .45);
}

.cifra__pie {
  margin: 3px 0 0;
  font-size: .76rem;
  color: rgba(22, 40, 63, .45);
}

@media (max-width: 640px) {
  .rango-fila { grid-template-columns: 100px 1fr 42px; font-size: .82rem; }
  .pendiente__enlace { grid-template-columns: 1fr auto; }
  .pendiente__intentos { grid-column: 1 / -1; }
}

/* ---------- Rivales sugeridos en la portada ---------- */

.sugeridos {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.sugerido__enlace {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: rgba(244, 237, 223, .06);
  border: 1px solid rgba(244, 237, 223, .12);
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}

.sugerido__enlace:hover {
  background: rgba(244, 237, 223, .11);
  border-color: rgba(201, 154, 74, .5);
}

.sugerido__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--arce);
  border-radius: 50%;
}

.sugerido__avatar svg { width: 27px; height: 27px; }

.sugerido__datos { min-width: 0; }

.sugerido__nombre {
  display: block;
  font-family: var(--display);
  color: var(--papel);
}

.sugerido__meta {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: rgba(244, 237, 223, .55);
}

.sugerido__elo {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ocre);
  font-variant-numeric: tabular-nums;
}

/* La etiqueta de por que aparece: se coloca sola bajo el nombre */
.sugerido__razon {
  grid-column: 2 / -1;
  justify-self: start;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sugerido__razon--pendiente { color: #E8B4A8; background: rgba(180, 90, 75, .22); }
.sugerido__razon--reto      { color: var(--ocre); background: rgba(201, 154, 74, .18); }
.sugerido__razon--nuevo     { color: #A8C5B0; background: rgba(62, 96, 70, .28); }
.sugerido__razon--medida    { color: rgba(244, 237, 223, .55); background: rgba(244, 237, 223, .08); }

.seccion__mas {
  display: inline-block;
  color: var(--ocre);
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 154, 74, .4);
}

.seccion__mas:hover { border-bottom-color: var(--ocre); }

/* ================= PROBLEMAS ================= */

.pz {
  padding: 22px 24px;
  background: var(--papel);
  border-radius: 4px;
}

.pz__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(22, 40, 63, .12);
}

.pz__turno {
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ocre-oscuro, #8A6A2F);
}

.pz__elo {
  font-size: .82rem;
  color: rgba(22, 40, 63, .5);
  font-variant-numeric: tabular-nums;
}

.pz__temas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  min-height: 22px;
}

.pz__tema {
  padding: 3px 10px;
  border-radius: 3px;
  background: rgba(201, 154, 74, .16);
  color: var(--ocre-oscuro, #8A6A2F);
  font-size: .76rem;
}

/* Puntos que marcan cuantas jugadas llevas de la linea */
.pz__progreso {
  display: flex;
  gap: 6px;
  margin: 16px 0 12px;
  min-height: 9px;
}

.pz__paso {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(22, 40, 63, .28);
}

.pz__paso--hecho {
  background: var(--verde, #3E6046);
  border-color: var(--verde, #3E6046);
}

.pz__mensaje {
  margin: 0 0 18px;
  min-height: 2.6em;
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(22, 40, 63, .75);
}

.pz__mensaje--bien { color: #24503A; }
.pz__mensaje--mal  { color: #8A3028; }

.pz__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.pz__credito {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 40, 63, .1);
  font-size: .76rem;
  color: rgba(22, 40, 63, .45);
}

/* ---------- El avatar y su panel en la barra ---------- */

.yo {
  position: relative;
  flex: 0 0 auto;
}

.yo__boton {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  background: rgba(244, 237, 223, .07);
  border: 1px solid rgba(244, 237, 223, .16);
  border-radius: 22px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.yo__boton:hover {
  background: rgba(244, 237, 223, .13);
  border-color: rgba(201, 154, 74, .5);
}

.yo__pieza {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--arce);
  border-radius: 50%;
}

.yo__pieza svg { width: 21px; height: 21px; }

.yo__elo {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--ocre);
  font-variant-numeric: tabular-nums;
}

/* El panel cuelga del avatar, alineado a su borde exterior */
.yo__panel {
  position: absolute;
  top: calc(100% + 9px);
  inset-inline-end: 0;
  z-index: 50;
  min-width: 210px;
  padding: 14px;
  background: var(--papel);
  border-radius: 4px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .38);
}

.yo__nombre {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(22, 40, 63, .12);
  font-family: var(--display);
  color: var(--tinta);
}

.yo__enlace {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 3px;
  color: var(--tinta);
  text-decoration: none;
  transition: background .12s ease;
}

.yo__enlace:hover { background: rgba(201, 154, 74, .16); }

.yo__enlace--activo {
  color: var(--ocre-oscuro, #8A6A2F);
  font-weight: 700;
}

.yo__idioma {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 40, 63, .12);
}

.yo__idioma span {
  display: block;
  margin-bottom: 5px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(22, 40, 63, .5);
}

.yo__idioma select {
  width: 100%;
  padding: 7px 9px;
  background: rgba(22, 40, 63, .05);
  border: 1px solid rgba(22, 40, 63, .18);
  border-radius: 3px;
  color: var(--tinta);
  font-family: inherit;
  font-size: .9rem;
}

/* En pantallas estrechas el menu central se compacta */
@media (max-width: 760px) {
  .barra { gap: 10px; }
  .menu { gap: 14px; font-size: .82rem; }
  .yo__elo { display: none; }
}

/* ---------- Aviso antes de una mala jugada ---------- */

.aviso-jugada {
  margin: 14px 0;
  padding: 16px 18px;
  background: rgba(201, 154, 74, .16);
  border-inline-start: 3px solid var(--ocre);
  border-radius: 3px;
}

.aviso-jugada.aviso--grave {
  background: rgba(138, 48, 40, .14);
  border-inline-start-color: #8A3028;
}

.aviso__texto {
  margin: 0 0 13px;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--tinta);
}

.aviso__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* ================= CARATULA DE ENTRADA ================= */

body.entrada {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201, 154, 74, .10), transparent 55%),
    var(--azul, #16283F);
}

.portal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 54px;
  width: 100%;
  max-width: 1400px;
  padding: 40px 44px;
}

/* --- Zona 1: la marca --- */

.portal__nombre {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.05;
  color: var(--papel);
}

.portal__lema {
  margin: 20px 0 6px;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  color: var(--ocre);
}

.portal__sub {
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: rgba(244, 237, 223, .55);
  max-width: 24em;
}

/* --- Zona 2: el tablero --- */

.portal__tablero { text-align: center; }

.portal__tablero .tablero-marco { width: clamp(240px, 30vw, 400px); }

.portal__pie-tablero {
  margin: 14px 0 0;
  font-size: .78rem;
  font-style: italic;
  color: rgba(244, 237, 223, .4);
}

/* --- Zona 3: el acceso --- */

.portal__acceso {
  justify-self: end;
  width: 100%;
  max-width: 320px;
  padding: 30px 28px;
  background: var(--papel);
  border-radius: 4px;
  box-shadow: 0 8px 34px rgba(0, 0, 0, .34);
}

.portal__saludo {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--tinta);
}

.portal__campo { margin-bottom: 16px; }

.portal__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(22, 40, 63, .55);
}

.boton--ancho { width: 100%; }

.portal__o {
  margin: 14px 0;
  text-align: center;
  font-size: .82rem;
  color: rgba(22, 40, 63, .4);
}

.portal__panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(22, 40, 63, .14);
}

.rank {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  /* El texto hereda un color pensado para fondo oscuro y aqui el bloque
     es claro: sin esto las celdas quedan invisibles sobre el papel. */
  color: rgba(22, 40, 63, .88);
}
.rank th {
  padding: 0 0 8px;
  text-align: start;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(22, 40, 63, .45);
  border-bottom: 1px solid rgba(22, 40, 63, .14);
}
.rank td {
  padding: 9px 0;
  border-bottom: 1px solid rgba(22, 40, 63, .07);
}
.rank__pos {
  width: 2.4em;
  color: rgba(22, 40, 63, .4);
  font-variant-numeric: tabular-nums;
}
.rank__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.rank__record {
  margin-inline-start: 6px;
  font-size: .8rem;
  color: rgba(22, 40, 63, .42);
}
.rank__fila--yo {
  font-weight: 700;
}
.rank__fila--yo .rank__pos { color: var(--ocre); }

.yo__sesion {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 40, 63, .12);
}
.yo__salir {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: rgba(22, 40, 63, .55);
  font-family: inherit;
  font-size: .85rem;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.yo__salir:hover { color: rgba(22, 40, 63, .85); }
.panel__pestanas {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid rgba(22, 40, 63, .14);
}
.pestana {
  flex: 1;
  padding: 9px 0 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(22, 40, 63, .5);
  font-family: inherit;
  font-size: .86rem;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.pestana:hover { color: rgba(22, 40, 63, .78); }
.pestana--activa {
  color: rgba(22, 40, 63, .92);
  border-bottom-color: var(--ocre);
}
.panel__campos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel__campos .campo__control { width: 100%; }
.panel__aviso {
  margin: 12px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: #a8443c;
}
.portal__nota {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.55;
  color: rgba(22, 40, 63, .68);
}

.portal__saltar,
.portal__cuenta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: 0;
  color: rgba(22, 40, 63, .55);
  font-family: inherit;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}

.portal__pie {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(22, 40, 63, .12);
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(22, 40, 63, .5);
}

.portal__idioma { margin-top: 16px; }

.portal__idioma select {
  width: 100%;
  padding: 7px 9px;
  background: rgba(22, 40, 63, .05);
  border: 1px solid rgba(22, 40, 63, .18);
  border-radius: 3px;
  color: var(--tinta);
  font-family: inherit;
  font-size: .88rem;
}

/* En pantallas medianas el tablero estorba mas que ayuda */
@media (max-width: 1080px) {
  .portal { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .portal__tablero { display: none; }
  .portal__sub { margin-inline: auto; }
  .portal__acceso { justify-self: center; }
}

/* Si un texto latino cae en una pagina espejada, la puntuacion se va
   al lado contrario. Esto la deja en su sitio. */
html[lang="ar"] .portal__nombre,
html[lang="ar"] .portal__pie-tablero {
  direction: ltr;
  unicode-bidi: isolate;
}

/* La marca y los nombres propios van siempre en alfabeto latino,
   tambien en paginas espejadas: asi la puntuacion no se descoloca. */
.portal__nombre,
.portal__pie-tablero,
.marca,
.pie__nombre {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ================= PREGUNTAS FRECUENTES ================= */

.ayuda {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.ayuda__intro {
  margin: 0 0 40px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(244, 237, 223, .7);
}

.ayuda__grupo { margin-bottom: 38px; }

.ayuda__titulo {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--ocre);
}

.faq {
  background: var(--papel);
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}

.faq__pregunta {
  padding: 15px 20px;
  cursor: pointer;
  color: var(--tinta);
  list-style: none;
  transition: background .12s ease;
}

.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta::after {
  content: "+";
  float: inline-end;
  margin-inline-start: 12px;
  color: var(--ocre-oscuro, #8A6A2F);
  font-size: 1.2rem;
  line-height: 1;
}

.faq[open] .faq__pregunta::after { content: "\2212"; }

.faq__pregunta:hover { background: rgba(201, 154, 74, .1); }

.faq__respuesta {
  padding: 0 20px 18px;
  font-size: .93rem;
  line-height: 1.7;
  color: rgba(22, 40, 63, .78);
}

.faq__respuesta p { margin: 0 0 10px; }
.faq__respuesta p:last-child { margin-bottom: 0; }

.ayuda__titulo-pagina {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 2rem;
  color: var(--papel);
}

/* ---------- Bloque de Chess Master AI en la portada ---------- */

.patro__etiqueta {
  margin: 0 0 12px;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 237, 223, .4);
}

.patro {
  display: block;
  max-width: 560px;
  padding: 24px 26px;
  background: rgba(244, 237, 223, .06);
  border: 1px solid rgba(244, 237, 223, .13);
  border-radius: 4px;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}

.patro:hover {
  background: rgba(244, 237, 223, .1);
  border-color: rgba(201, 154, 74, .45);
}

.patro__nombre {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--papel);
}

.patro__lema {
  display: block;
  margin-top: 8px;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(244, 237, 223, .62);
}

.patro__enlace {
  display: inline-block;
  margin-top: 14px;
  color: var(--ocre);
  font-size: .89rem;
  border-bottom: 1px solid rgba(201, 154, 74, .4);
}

.patro:hover .patro__enlace { border-bottom-color: var(--ocre); }

/* ---------- Pagina de patrocinio ---------- */

.pat__lista {
  margin: 0;
  padding-inline-start: 20px;
  font-size: .93rem;
  line-height: 1.8;
  color: rgba(22, 40, 63, .78);
}

.pat__form { margin-top: 6px; }

.pat__campo {
  display: block;
  margin-bottom: 14px;
}

.pat__campo span {
  display: block;
  margin-bottom: 5px;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(22, 40, 63, .55);
}

.pat__campo .campo__control { width: 100%; }

.pat__campo textarea {
  font-family: inherit;
  font-size: .95rem;
  resize: vertical;
}

.pat__correo { margin-top: 16px; }

/* ============================================================
   VOLUMEN DECORATIVO — el tablero de juego NO se toca
   ============================================================ */

.hero__tablero {
  position: relative;
  aspect-ratio: 1;
  width: min(88%, 430px);
  justify-self: center;
  border: 12px solid var(--nogal);
  border-radius: 3px;
  /* el damero, directamente aqui: sin pseudo-elementos que se tapen */
  background-color: var(--casilla-clara);
  background-image:
    linear-gradient(45deg, var(--casilla-oscura) 25%, transparent 25%, transparent 75%, var(--casilla-oscura) 75%),
    linear-gradient(45deg, var(--casilla-oscura) 25%, transparent 25%, transparent 75%, var(--casilla-oscura) 75%);
  background-size: 25% 25%;
  background-position: 0 0, 12.5% 12.5%;
  /* inclinacion suave y el canto de madera bajo el tablero */
  transform: perspective(1200px) rotateX(14deg) rotateZ(-6deg);
  box-shadow:
    0 6px 0 #6A421E,
    0 12px 0 #59381A,
    0 34px 44px rgba(0, 0, 0, .5),
    inset 0 0 44px rgba(0, 0, 0, .22);
}

.hero__piezas {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  pointer-events: none;
}

.hero__pieza { display: grid; place-items: center; }

.hero__pieza svg {
  width: 80%;
  height: 80%;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .5));
}

/* que el tablero no se salga por el borde al inclinarse */
.hero__tablero {
  width: min(80%, 400px);
  margin-inline-end: 6%;
  transform: perspective(1300px) rotateX(12deg) rotateZ(-5deg);
}

/* --- Casillas limpias y piezas alineadas --- */

.hero__tablero {
  /* el damero con conic-gradient: cuadrados de verdad, no rombos */
  background-color: var(--casilla-clara);
  background-image:
    conic-gradient(
      var(--casilla-oscura) 90deg,
      var(--casilla-clara)  90deg 180deg,
      var(--casilla-oscura) 180deg 270deg,
      var(--casilla-clara)  270deg
    );
  background-size: 25% 25%;
  background-position: 0 0;
  background-repeat: repeat;
  /* el fondo se dibuja dentro del borde, igual que la rejilla de piezas */
  background-origin: content-box;
  background-clip: content-box;
  padding: 0;
}

/* la rejilla ocupa exactamente la zona del damero */
.hero__piezas {
  inset: 0;
}

/* ============================================================
   PROFUNDIDAD GENERAL — tarjetas, fichas y botones
   Nada de esto toca el tablero de juego.
   ============================================================ */

/* Las fichas oscuras sobre azul: relieve suave y se levantan al pasar */
.sugerido__enlace,
.apertura,
.partida,
.dato {
  background-image: linear-gradient(165deg, rgba(244,237,223,.07), rgba(0,0,0,.07));
  box-shadow:
    0 1px 0 rgba(244, 237, 223, .09) inset,
    0 2px 4px rgba(0, 0, 0, .22),
    0 8px 18px rgba(0, 0, 0, .18);
  transition: transform .16s ease, box-shadow .16s ease;
}

.sugerido__enlace:hover,
.apertura:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(244, 237, 223, .14) inset,
    0 6px 10px rgba(0, 0, 0, .26),
    0 18px 34px rgba(0, 0, 0, .26);
}

/* Los paneles de papel: como hojas apoyadas, no rectangulos pegados */
.faq,
.bloque,
.ayuda__grupo .faq,
.perfil__caja,
.ajustes__grupo {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 2px 3px rgba(0, 0, 0, .16),
    0 10px 24px rgba(0, 0, 0, .22);
}

/* El boton principal, con canto inferior: se hunde al pulsarlo */
.boton {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 3px 0 rgba(0, 0, 0, .22),
    0 6px 12px rgba(0, 0, 0, .2);
  transition: transform .1s ease, box-shadow .1s ease;
}

.boton:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .2) inset,
    0 1px 0 rgba(0, 0, 0, .22),
    0 3px 7px rgba(0, 0, 0, .2);
}

/* El avatar de la barra, con volumen de ficha */
.yo__pieza {
  background-image: linear-gradient(160deg, #F8F2E6, var(--papel-hondo));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 2px 4px rgba(0, 0, 0, .35);
}

/* ============================================================
   RITMO — que las secciones no pesen todas igual
   ============================================================ */

/* Franjas alternas: el fondo cambia sutilmente de una a otra */
.seccion:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(0,0,0,.13), rgba(0,0,0,.05));
  box-shadow:
    inset 0 1px 0 rgba(244, 237, 223, .05),
    inset 0 -1px 0 rgba(0, 0, 0, .18);
}

.seccion {
  padding-block: clamp(48px, 6vw, 84px);
}

/* Titulos con mas presencia y una linea ocre que los ancla */
.seccion__titulo {
  position: relative;
  padding-bottom: 14px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.seccion__titulo::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ocre-claro), transparent);
}

/* El hero, mas alto y con un halo de luz detras del tablero */
.hero {
  position: relative;
  align-items: center;
  min-height: min(82vh, 720px);
}

.hero::before {
  content: "";
  position: absolute;
  inset-inline-end: 4%;
  top: 12%;
  width: min(52%, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 154, 74, .17), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

/* Aprovechar el ancho en pantallas grandes: menos vacio a los lados */
.seccion__caja,
.hero {
  max-width: min(1400px, 92vw);
}

/* Los contenedores de las paginas interiores, al mismo ancho que la portada */
.rivales-pagina,
.pagina,
.contenido,
main > .caja,
.aperturas-pagina {
  max-width: min(1400px, 92vw);
  margin-inline: auto;
}

/* En pantallas anchas, fichas mas grandes en vez de mas columnas apretadas */
@media (min-width: 1100px) {
  .rivales { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* La pagina de rivales cuelga sus rejillas directamente de .seccion,
   no de .seccion__caja: hay que darles el ancho aqui tambien. */
.seccion > #rivales,
.seccion > .seccion__cabecera,
.seccion > .rivales,
.seccion > .aperturas {
  max-width: min(1400px, 92vw);
  margin-inline: auto;
}

/* ============================================================
   PERFIL — el avatar como ficha con relieve
   ============================================================ */

.perfil__avatar,
#perfil-pieza {
  position: relative;
  background-image:
    radial-gradient(circle at 32% 26%, #FFFDF7, var(--papel) 42%, var(--papel-hondo) 78%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .55) inset,
    0 -3px 6px rgba(0, 0, 0, .1) inset,
    0 3px 0 var(--papel-borde),
    0 6px 14px rgba(0, 0, 0, .34),
    0 14px 30px rgba(0, 0, 0, .2);
}

.perfil__avatar svg,
#perfil-pieza svg {
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .3));
}

/* La barra de progreso, hundida en el papel */
.perfil__pista,
.rango-fila__pista {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .22) inset,
    0 -1px 0 rgba(255, 255, 255, .5);
}

.perfil__hecho,
.rango-fila__hecho {
  background-image: linear-gradient(180deg, var(--ocre-claro), var(--ocre, #C99A4A));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
}

/* Las cifras grandes, con un poco de peso */
.dato__cifra,
.perfil__elo {
  text-shadow: 0 2px 3px rgba(0, 0, 0, .28);
}

/* Los interruptores de ajustes, con canto */
.palanca {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .28) inset,
    0 1px 0 rgba(255, 255, 255, .45);
}

/* ============================================================
   ESTADISTICAS y CARATULA
   ============================================================ */

/* La curva de progresion, con la linea marcada y relleno bajo ella */
.curva__linea {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  stroke-width: 2.5;
}

.curva__area { opacity: .22; }

.curva__punto {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

/* Las barras de rango, con brillo superior */
.rango-fila__hecho::after {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  border-radius: 3px 3px 0 0;
}

.rango-fila__hecho { position: relative; }

/* La caratula: el tablero de la Inmortal, con canto de madera */
.portal__tablero .tablero-marco {
  border-radius: 3px;
  box-shadow:
    0 5px 0 #6A421E,
    0 10px 0 #59381A,
    0 28px 40px rgba(0, 0, 0, .55);
  transform: perspective(1200px) rotateX(7deg);
}

/* La tarjeta de acceso, como una hoja apoyada */
.portal__acceso {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 3px 5px rgba(0, 0, 0, .2),
    0 16px 40px rgba(0, 0, 0, .4);
}

/* Halo tras el tablero de la caratula, igual que en el hero */
.portal__tablero {
  position: relative;
}

.portal__tablero::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 154, 74, .15), transparent 66%);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   MOVIL — el volumen se modera, no desaparece
   ============================================================ */

@media (max-width: 860px) {

  /* El hero, en columna: primero el texto, luego el tablero */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    gap: 28px;
    padding-block: 34px;
  }

  .hero::before { display: none; }

  .hero__tablero {
    width: min(84%, 320px);
    margin-inline: auto;
    /* menos inclinacion: en pantalla pequena marea */
    transform: perspective(900px) rotateX(8deg) rotateZ(-3deg);
    box-shadow:
      0 4px 0 #6A421E,
      0 8px 0 #59381A,
      0 18px 26px rgba(0, 0, 0, .45);
  }

  /* Sombras mas cortas: en pantallas pequenas las largas ensucian */
  .sugerido__enlace,
  .apertura,
  .partida,
  .dato,
  .faq,
  .bloque {
    box-shadow:
      0 1px 0 rgba(244, 237, 223, .07) inset,
      0 2px 6px rgba(0, 0, 0, .22);
  }

  /* Sin levantamiento al tocar: en tactil no hay raton que pase por encima */
  .sugerido__enlace:hover,
  .apertura:hover { transform: none; }

  /* Secciones mas juntas */
  .seccion { padding-block: 36px; }

  /* Una columna para las fichas */
  .sugeridos,
  .aperturas { grid-template-columns: 1fr; }

  .rivales { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* La caratula, en columna y sin tablero */
  .portal { padding: 24px 18px; }
}

/* Movil estrecho */
@media (max-width: 480px) {
  .hero__tablero { width: 92%; }
  .rivales { grid-template-columns: repeat(2, 1fr); }
  .seccion__titulo { font-size: 1.35rem; }
}

/* El enlace del patrocinio conserva su color aunque se haya visitado */
.patro:visited .patro__enlace,
.patro__enlace { color: var(--ocre-claro); }

.patro:visited .patro__nombre { color: var(--papel); }

/* ============================================================
   HERO — composicion en dos pesos, a tu manera
   ============================================================ */

.hero__titulo {
  display: flex;
  flex-direction: column;
  margin: 0 0 18px;
  line-height: .96;
}

.hero__titulo--suave {
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: rgba(244, 237, 223, .72);
  letter-spacing: .01em;
}

.hero__titulo--fuerte {
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.6rem);
  color: var(--papel);
  /* el ocre solo en el borde inferior de las letras: sutil, no neon */
  text-shadow: 0 3px 0 rgba(201, 154, 74, .28), 0 6px 18px rgba(0, 0, 0, .4);
}

/* Los botones, en columna propia y mas presentes */
.hero__acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 300px;
  margin-top: 26px;
}

.hero__acciones .boton {
  padding-block: 15px;
  font-size: 1.02rem;
  text-align: center;
}

/* El hero recupera su presencia: dos columnas amplias y centradas */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
  min-height: min(78vh, 680px);
  padding-block: clamp(40px, 6vw, 80px);
}

.hero__texto { max-width: 34rem; }

.hero__tablero {
  width: min(100%, 430px);
  justify-self: center;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__texto { max-width: none; }
}

/* El problema del dia, en dos columnas: tablero y enunciado
   con mas aire, en vez de una franja ancha medio vacia */
@media (min-width: 900px) {
  .puzzle {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    align-items: center;
    gap: 40px;
  }
}

/* ============================================================
   FONDO — un tablero en perspectiva, muy tenue
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* el damero, dibujado con conic-gradient como el del hero */
  background-color: transparent;
  background-image:
    conic-gradient(
      rgba(244, 237, 223, .05) 90deg,
      transparent 90deg 180deg,
      rgba(244, 237, 223, .05) 180deg 270deg,
      transparent 270deg
    );
  background-size: 132px 132px;
  /* inclinado hacia el horizonte, como un suelo */
  transform: perspective(760px) rotateX(62deg) scale(2.4);
  transform-origin: center 78%;
}

/* Se desvanece hacia arriba: el tablero nace abajo y se pierde */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--azul) 0%,
    rgba(22, 40, 63, .92) 34%,
    rgba(22, 40, 63, .74) 62%,
    rgba(22, 40, 63, .88) 100%);
}

body { position: relative; }

/* Fondo de tablero, un punto mas visible */
body::before {
  background-image:
    conic-gradient(
      rgba(244, 237, 223, .085) 90deg,
      transparent 90deg 180deg,
      rgba(244, 237, 223, .085) 180deg 270deg,
      transparent 270deg
    );
}

body::after {
  background: linear-gradient(180deg,
    var(--azul) 0%,
    rgba(22, 40, 63, .88) 32%,
    rgba(22, 40, 63, .6) 60%,
    rgba(22, 40, 63, .82) 100%);
}

/* Fondo de tablero, otro escalon mas */
body::before {
  background-image:
    conic-gradient(
      rgba(244, 237, 223, .11) 90deg,
      transparent 90deg 180deg,
      rgba(244, 237, 223, .11) 180deg 270deg,
      transparent 270deg
    );
}

body::after {
  background: linear-gradient(180deg,
    var(--azul) 0%,
    rgba(22, 40, 63, .84) 30%,
    rgba(22, 40, 63, .52) 58%,
    rgba(22, 40, 63, .78) 100%);
}

/* ============================================================
   Avatares de rivales — fichas con relieve, en madera oscura
   ============================================================ */

.rival__avatar,
.sugerido__avatar {
  position: relative;
  background-image:
    radial-gradient(circle at 32% 26%, #F8F2E6, var(--papel) 44%, var(--papel-hondo) 80%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .5) inset,
    0 -2px 5px rgba(0, 0, 0, .12) inset,
    0 2px 0 var(--papel-borde),
    0 4px 9px rgba(0, 0, 0, .38),
    0 10px 20px rgba(0, 0, 0, .22);
}

.rival__avatar svg,
.sugerido__avatar svg {
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35));
}

/* Al pasar por encima, la ficha se levanta un poco mas */
.rival:hover .rival__avatar,
.sugerido__enlace:hover .sugerido__avatar {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .6) inset,
    0 -2px 5px rgba(0, 0, 0, .12) inset,
    0 3px 0 var(--papel-borde),
    0 7px 14px rgba(0, 0, 0, .42),
    0 16px 28px rgba(0, 0, 0, .26);
}

/* El icono de la app, con el relieve de ficha del resto del sitio */
.patro {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 18px;
}

.patro__icono {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .3) inset,
    0 3px 0 rgba(0, 0, 0, .25),
    0 6px 14px rgba(0, 0, 0, .4);
  transition: transform .16s ease;
}

.patro:hover .patro__icono { transform: translateY(-2px); }

@media (max-width: 520px) {
  .patro { grid-template-columns: 1fr; }
  .patro__icono { width: 60px; height: 60px; }
}

/* Boton de reporte en la clasificacion. Discreto por defecto: no debe
   competir con los datos de la tabla ni invitar a pulsarlo sin motivo. */
.rank__accion {
    text-align: right;
    white-space: nowrap;
}
.rank__reportar {
    font: inherit;
    font-size: .82em;
    color: #8b95a3;
    background: transparent;
    border: 1px solid #d9d3c6;
    border-radius: 4px;
    padding: .18em .6em;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.rank__reportar:hover {
    color: #a0442e;
    border-color: #a0442e;
}
.rank__reportar:disabled {
    color: #8b95a3;
    border-color: transparent;
    cursor: default;
    font-style: italic;
}
.rank__pais { display:block; font-size:.72rem; letter-spacing:.04em; color:#7C8A9E; margin-top:2px; }

/* --- Retos entre jugadores --- */
.retos__crear { margin-bottom: 18px; }
.retos__intro { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
                color: var(--ocre); margin: 0 0 10px; }
.retos__fila  { display: flex; gap: 10px; flex-wrap: wrap; }
.retos__fila .campo__control { flex: 0 1 150px; }
.retos__aviso { color: var(--ocre); margin: 10px 0 0; font-size: .9rem; }
.retos__vacio { color: rgba(244,237,223,.6); font-style: italic; margin: 0; }

.retos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reto {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto auto;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(244,237,223,.06);
  border: 1px solid rgba(244,237,223,.10);
  border-radius: 8px;
}
.reto:hover { background: rgba(244,237,223,.10); }
.reto--mio  { border-color: rgba(210,160,89,.45); }
.reto__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--papel) url("../assets/img/favicon.svg") center/58% no-repeat;
  border: 2px solid var(--ocre);
}
.reto__quien  { display: flex; flex-direction: column; min-width: 0; }
.reto__nombre { font-family: var(--display); font-size: 1.05rem; color: var(--crema);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reto__meta   { font-size: .82rem; color: rgba(244,237,223,.62); margin-top: 2px; }
.reto__tiempo { font-family: var(--display); font-size: 1.35rem; color: var(--ocre);
                font-variant-numeric: tabular-nums; }
.reto__min    { font-size: .68rem; margin-inline-start: 3px; opacity: .75; }
.reto__color,
.reto__cuando { font-size: .82rem; color: rgba(244,237,223,.62); }
.reto__pendiente { font-size: .8rem; color: rgba(244,237,223,.5); font-style: italic; }
.reto__accion { padding: 6px 14px; font-size: .82rem; }

@media (max-width: 640px) {
  .reto { grid-template-columns: 40px 1fr auto; row-gap: 6px; }
  .reto__color, .reto__cuando { grid-column: 2 / -1; }
}

.pie__invita { margin: 6px 0 0; font-size: .88rem; }
.pie__invita a { color: var(--ocre); text-decoration: none; border-bottom: 1px solid rgba(210,160,89,.4); }
.pie__invita a:hover { border-bottom-color: var(--ocre); }

.pie__nota a { color: var(--ocre); text-decoration: underline; }

.retos__entrar { margin: 0 0 18px; }
.retos__entrar a { color: var(--ocre); font-size: .95rem; text-decoration: none; border-bottom: 1px solid rgba(210,160,89,.45); }
.retos__entrar a:hover { border-bottom-color: var(--ocre); }

/* --- Duelo entre dos personas --- */
.duelo { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.duelo__aviso { background: var(--ocre); color: #16283F; padding: 10px 14px;
                border-radius: 6px; margin: 0 0 16px; }
.duelo__mesa { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 24px; align-items: start; }
.duelo__tablero { min-width: 0; }
.duelo__lado { display: grid; gap: 12px; }
.duelo__jugador { background: rgba(244,237,223,.06); border: 1px solid rgba(244,237,223,.10);
                  border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px; }
.duelo__jugador--turno { border-color: var(--ocre); background: rgba(210,160,89,.12); }
.duelo__nombre { font-family: var(--display); font-size: 1.1rem; color: var(--crema); }
.duelo__elo    { font-size: .82rem; color: rgba(244,237,223,.62); }
.duelo__reloj  { font-family: var(--display); font-size: 2rem; color: var(--crema);
                 font-variant-numeric: tabular-nums; margin-top: 4px; }
.duelo__estado { text-align: center; color: var(--ocre); font-size: .95rem; padding: 6px 0; }
.duelo__estado--fin { font-family: var(--display); font-size: 1.4rem; color: var(--crema); }
.duelo__acciones { display: grid; gap: 8px; }
@media (max-width: 860px) { .duelo__mesa { grid-template-columns: 1fr; } }

/* ---- Torneos (Fase 3) ------------------------------------------- */

.torneos { list-style: none; margin: 1rem 0 0; padding: 0; }

.torneo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid rgba(0,0,0,.12);
}

.torneo__nombre {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #1d2a3a;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.torneo__nombre:hover { opacity: .75; }

.torneo__datos,
.torneo__estado { font-size: .9rem; opacity: .75; }
.torneo__accion { margin-left: auto; }

.cuadro__ronda { margin-top: 1.25rem; }
.cuadro__titulo { margin: 0 0 .5rem; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.cuadro__lista { list-style: none; margin: 0; padding: 0; }

.cuadro__partida,
.cuadro__bye {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem .75rem;
    border-left: 3px solid rgba(0,0,0,.15);
    margin-bottom: .4rem;
}

.cuadro__vs { opacity: .5; }
.cuadro__gana { margin-left: auto; font-size: .85rem; font-weight: 700; }
.cuadro__gana::before { content: "\2713\00a0"; }
.cuadro__jugar { margin-left: auto; font-size: .85rem;
                 font-weight: 700; padding: .25rem .7rem; border: 1px solid currentColor;
                 border-radius: 4px; text-decoration: none; }
.cuadro__jugar:hover { background: var(--ocre-claro); }
.cuadro__byeNota { font-size: .85rem; opacity: .7; }
.cuadro__inscritos { list-style: none; margin: .75rem 0 0; padding: 0; }
.cuadro__inscritos li { padding: .3rem 0; border-top: 1px solid rgba(0,0,0,.08); }

/* El contenido del cuadro necesita color propio: heredado sale del
   color del fondo y el texto queda invisible. */
.cuadro__ronda,
.cuadro__titulo,
.cuadro__lista,
.cuadro__partida,
.cuadro__bye,
.cuadro__lado,
.cuadro__vs,
.cuadro__jugar,
.cuadro__gana,
.cuadro__byeNota,
.cuadro__inscritos,
.cuadro__inscritos li,
.torneo__datos,
.torneo__estado { color: #1d2a3a; }

/* El retrato de El Juez ocupa el mismo hueco que la pieza de los demas */
.rival__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}