/* ====================================================================
   /servidorsamp — mismo lenguaje que la portada (17/10/2026)
   --------------------------------------------------------------------
   Negro puro, tipografia Anton, un solo rojo, nada redondeado y texto
   minimo. Movil primero: el CSS de arriba es el del telefono y solo a
   partir de 760 px se anade lo de escritorio. Las filas miden 68 px o
   mas y cada :hover lleva su :active, porque en el movil no hay raton.
   ==================================================================== */

@font-face{
  font-family:'Anton';
  src:url('/fonts/Anton-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

:root{
  color-scheme:dark;
  --negro:#000;
  --humo:#0b0b0b;
  --rojo:#ff2a1f;
  --blanco:#fff;
  --gris:#7a7a7a;
  --gris-claro:#b5b5b5;
  --linea:#1f1f1f;
  --display:'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  --cuerpo:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--cuerpo);
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
svg{ display:block; flex:0 0 auto; }
::selection{ background:var(--rojo); color:#000; }
:focus-visible{ outline:3px solid var(--rojo); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

.envoltura{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 16px;
}

/* --- Barra de arriba: volver e idioma -------------------------------- */
.barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:calc(14px + env(safe-area-inset-top));
  padding-bottom:14px;
}
.volver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--gris);
}
.volver:hover, .volver:active{ color:var(--rojo); }
.volver svg{ width:13px; height:13px; }
.idioma{ display:flex; gap:4px; }
.idioma-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:30px;
  padding:0;
  border:1px solid var(--linea);
  background:none;
  cursor:pointer;
  opacity:.4;
  transition:opacity .15s ease, border-color .15s ease;
}
.idioma-btn svg{ width:22px; height:14px; }
.idioma-btn[aria-pressed="true"]{ opacity:1; border-color:var(--rojo); }

/* --- Titulo ----------------------------------------------------------- */
.titular{ padding:14px 0 30px; }
.titular h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(40px, 13.5vw, 118px);
  line-height:.86;
  letter-spacing:-.02em;
  margin:0;
  text-transform:uppercase;
}
.titular h1 .rojo{ color:var(--rojo); }
.regla{ height:7px; background:var(--rojo); margin:16px 0 0; width:100%; }

/* --- Conectar: el bloque que manda ------------------------------------ */
.conectar{
  display:block;
  position:relative;
  background:var(--rojo);
  color:#000;
  padding:20px 16px;
  margin:0 0 14px;
  transition:background-color .12s ease;
}
.conectar::after{
  content:"";
  position:absolute;
  top:18px; right:16px;
  width:16px; height:16px;
  border-top:3px solid #000;
  border-right:3px solid #000;
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.conectar:hover, .conectar:active{ background:#fff; }
.conectar:hover::after, .conectar:active::after{ transform:rotate(45deg) translate(2px,-2px); }
.conectar-nombre{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px, 9vw, 54px);
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:uppercase;
  padding-right:34px;
}
.estado{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.estado[hidden]{ display:none; }
.estado::before{
  content:"";
  width:9px; height:9px;
  background:currentColor;
  flex:0 0 auto;
}
.estado-on::before{ animation:parpadeo 1.8s steps(1) infinite; }
@keyframes parpadeo{ 0%,60%{ opacity:1; } 61%,100%{ opacity:.2; } }

/* --- Open MP Live ------------------------------------------------------
   El hilo del servidor en el foro de open.mp, en directo. Va justo debajo
   de CONECTAR y con el mismo tamano, pero al reves: fondo negro y borde
   rojo, para que CONECTAR siga siendo el unico bloque macizo. La flecha
   es la de "esto se abre fuera". */
.openmp{
  display:block;
  position:relative;
  background:var(--negro);
  border:3px solid var(--rojo);
  color:var(--blanco);
  padding:20px 16px;
  margin:0 0 14px;
  transition:background-color .12s ease, color .12s ease;
}
.openmp::after{
  content:"";
  position:absolute;
  top:20px; right:18px;
  width:15px; height:15px;
  border-top:3px solid var(--rojo);
  border-right:3px solid var(--rojo);
  transform:rotate(45deg);
  transition:border-color .12s ease, transform .15s ease;
}
.openmp:hover, .openmp:active{ background:var(--rojo); color:#000; }
.openmp:hover::after, .openmp:active::after{ border-color:#000; transform:rotate(45deg) translate(3px,-3px); }
.openmp-nombre{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px, 9vw, 54px);
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:uppercase;
  padding-right:34px;
}
.openmp-pie{
  display:block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--gris);
}
.openmp:hover .openmp-pie, .openmp:active .openmp-pie{ color:#000; }

/* --- IP ---------------------------------------------------------------- */
.ip{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:56px;
  padding:12px 16px;
  margin:0 0 26px;
  border:1px solid var(--linea);
  background:none;
  cursor:pointer;
  font-family:var(--mono);
  font-size:clamp(13px, 4vw, 16px);
  letter-spacing:1px;
  color:var(--blanco);
  text-align:left;
  user-select:all;
  -webkit-user-select:all;
}
.ip:hover, .ip:active{ border-color:var(--rojo); color:var(--rojo); }
.ip svg{ width:15px; height:15px; margin-left:auto; opacity:.6; }
.ip-aviso{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--rojo);
  margin:-18px 0 22px;
  min-height:14px;
}

/* --- Filas: accesos y secciones ---------------------------------------- */
.lista{
  list-style:none;
  margin:0 0 30px;
  padding:0;
  border-top:1px solid var(--linea);
}
.fila{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:68px;
  padding:14px 2px;
  border-bottom:1px solid var(--linea);
  transition:background-color .12s ease, padding-left .12s ease;
}
.fila-nombre{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(21px, 6.6vw, 32px);
  line-height:1;
  letter-spacing:-.005em;
  text-transform:uppercase;
  min-width:0;
  flex:1 1 auto;
}
.fila-cmd{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:1.2px;
  color:var(--gris);
  flex:0 0 auto;
  white-space:nowrap;
}
.fila-flecha{
  width:20px; height:20px;
  flex:0 0 auto;
  color:var(--linea);
  transition:color .12s ease, transform .15s ease;
}
.fila:hover, .fila:active{ background:var(--rojo); color:#000; padding-left:12px; }
.fila:hover .fila-cmd, .fila:active .fila-cmd{ color:#000; }
.fila:hover .fila-flecha, .fila:active .fila-flecha{ color:#000; transform:translateX(4px); }

/* --- Pie ---------------------------------------------------------------- */
.pie{
  border-top:1px solid var(--linea);
  padding:20px 0 calc(30px + env(safe-area-inset-bottom));
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--gris);
}
.pie-enlaces{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:12px; }
.pie-enlaces a{ color:var(--gris-claro); border-bottom:1px solid var(--linea); padding-bottom:2px; }
.pie-enlaces a:hover, .pie-enlaces a:active{ color:var(--rojo); border-color:var(--rojo); }
.pie-aviso{ margin:0; text-transform:none; letter-spacing:.4px; line-height:1.6; max-width:70ch; }

/* ====================================================================
   ESCRITORIO (>= 760 px)
   ==================================================================== */
@media (min-width:760px){
  .envoltura{ padding:0 40px; }
  .barra{ padding-top:24px; padding-bottom:20px; }
  .titular{ padding:20px 0 40px; }
  .conectar{ padding:30px 28px; margin-bottom:18px; }
  .conectar::after{ top:28px; right:28px; width:22px; height:22px; }
  .openmp{ padding:30px 28px; margin-bottom:18px; }
  .openmp::after{ top:30px; right:30px; width:20px; height:20px; }
  .openmp-pie{ font-size:12.5px; }
  .ip{ min-height:64px; }
  .lista{ display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }
  .fila{ min-height:84px; padding:18px 4px; }
}
@media (min-width:1100px){
  .lista-secciones{ grid-template-columns:repeat(3, 1fr); column-gap:44px; }
}