@font-face {
  font-family: "Syncopate";
  src: url("/static/fonts/syncopate-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* renet-hosting - lo que style.css (de renet-fact, no se toca) no trae:
   la pinta publica de /pedir y /pedido, y un par de detalles chicos del
   panel. Las paginas publicas son siempre oscuras y con la marca de
   renet.com.ar/hosting: todo va bajo body.publico, que redefine los tokens de
   style.css (asi panel, field, note-box, tablas y botones salen oscuros sin
   tocar nada) y no afecta al panel del operador. */

/* Desde el 12/10/2026, con el estilo de renet-app ("Starlink", igual que renet.com.ar):
   casi negro, vidrio esmerilado (superficie 5 %, borde 12 %, blur 20), botones pastilla,
   numeros grandes y livianos, color solo para el estado y el azul para las acciones.
   Los valores son los de renet-app/web/app.css (tema oscuro). */
body.publico {
  color-scheme: dark;
  --pub-fondo:   #05070a;
  --pub-tarjeta: rgba(255,255,255,.05);   /* --surface: vidrio */
  --pub-solido:  #0e1217;                 /* --panel: lo que va encima de todo (dialog, etiquetas) */
  --pub-muted:   rgba(255,255,255,.06);   /* campos, totales, barras */
  --pub-borde:   rgba(255,255,255,.12);
  --pub-texto:   #f4f6f8;
  --pub-apagado: #a0a9b6;
  --pub-primario: #2f6ea5;
  --pub-azul-texto: #7ab8ee;
  --pub-brillo:  rgba(47,110,165,.5);
  --pub-radio:   22px;
  --pub-radio-chico: 16px;
  --pub-vidrio:  saturate(150%) blur(20px);

  --bg: var(--pub-fondo); --bg-raised: var(--pub-muted); --bg-card: var(--pub-tarjeta);
  --bg-sunken: var(--pub-fondo); --bg-hover: rgba(255,255,255,.08);
  --ink: var(--pub-texto); --ink-muted: var(--pub-apagado); --ink-faint: var(--pub-apagado);
  --line-soft: rgba(255,255,255,.08); --line-strong: var(--pub-borde);
  --brand: var(--pub-primario); --brand-dark: var(--pub-azul-texto); --brand-light: var(--pub-azul-texto);
  --brand-bg: rgba(122,184,238,.15);
  --ok: #3ddc97; --warn: #fbbf24; --danger: #ff7a7a;
  --ok-bg: rgba(61,220,151,.13); --warn-bg: rgba(251,191,36,.13); --danger-bg: rgba(255,122,122,.13);
  --radius: var(--pub-radio); --radius-sm: var(--pub-radio-chico);
  --shadow-sm: none; --shadow-md: 0 16px 48px rgba(0,0,0,.55);

  /* El cielo del ingreso de renet-app: estrellas sueltas y el brillo azul de arriba. */
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 78% 12%, rgba(255,255,255,.75), transparent),
    radial-gradient(2.2px 2.2px at 34% 42%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 90% 38%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 8% 66%, rgba(255,255,255,.75), transparent),
    radial-gradient(2.2px 2.2px at 62% 74%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 46% 90%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 22% 84%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 70% 30%, rgba(255,255,255,.75), transparent),
    radial-gradient(60% 40% at 50% -5%, rgba(47,110,165,.28), transparent 70%),
    var(--pub-fondo);
  background-attachment: fixed;
  color: var(--pub-texto);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
body.publico a { color: var(--pub-azul-texto); }
body.publico ::selection { background: rgba(47,110,165,.45); }
body.publico :focus-visible { outline: 2px solid var(--pub-azul-texto); outline-offset: 2px; }

/* Botones: pastilla. El primario es el azul lleno; el resto, vidrio con borde fino.
   El hover solo aclara (como la app), sin brillo alrededor. */
body.publico .btn, body.publico button { border-radius: 999px; font-weight: 500; letter-spacing: .02em;
  transition: filter .18s, background-color .18s, border-color .18s, color .18s, transform .12s; }
body.publico button:not(.primary):not(.prender):not(.guia-link),
body.publico .btn:not(.primary) {
  background: var(--pub-tarjeta); border-color: var(--pub-borde); color: var(--pub-texto);
  -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio);
}
body.publico button.primary, body.publico .btn.primary {
  background: var(--pub-primario); border-color: var(--pub-primario); color: #fff;
}
body.publico button.primary:hover, body.publico .btn.primary:hover {
  background: var(--pub-primario); border-color: var(--pub-primario); color: #fff; filter: brightness(1.12);
}
body.publico button:hover:not(.primary):not(.prender):not(.guia-link), body.publico .btn:hover:not(.primary) {
  background: rgba(255,255,255,.08); border-color: var(--pub-apagado); color: var(--pub-texto);
}
body.publico button:active, body.publico .btn:active { transform: scale(.97); }
body.publico button.danger:not(.primary), body.publico button.danger:not(.primary):hover { color: var(--danger); }
body.publico button.danger:not(.primary):hover { border-color: var(--danger); }
body.publico button.link:not(.primary) { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--pub-azul-texto); }
body.publico .ancho-total { width: 100%; }

/* Tarjetas de vidrio */
body.publico .panel { border-radius: var(--pub-radio); background: var(--pub-tarjeta); border: 1px solid var(--pub-borde); box-shadow: none;
  -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio); }

/* Campos como los de la app: superficie, borde fino, radio 16 y foco con contorno azul. */
body.publico input:not([type=checkbox]):not([type=radio]), body.publico select, body.publico textarea {
  background: var(--pub-muted); border-color: var(--pub-borde); border-radius: var(--pub-radio-chico); color: var(--pub-texto);
}
body.publico input:not([type=checkbox]):not([type=radio]):hover, body.publico select:hover, body.publico textarea:hover { border-color: var(--pub-apagado); }
body.publico input:focus, body.publico select:focus, body.publico textarea:focus {
  box-shadow: none; outline: 2px solid var(--pub-azul-texto); outline-offset: 1px; border-color: transparent;
}
body.publico select option { background: var(--pub-solido); color: var(--pub-texto); }
body.publico input[type=checkbox], body.publico input[type=radio] { accent-color: var(--pub-primario); }

/* Titulos finos y grandes */
body.publico h1, body.publico h2, body.publico h3 { font-weight: 400; }

/* ------------------------------------------------------- barra y pie */

.pub-ancho { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.pub-top { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(10,13,18,.78); position: sticky; top: 0; z-index: 20;
  -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio); }
.pub-top .pub-ancho, .pub-pie .pub-ancho { max-width: 1280px; }
.pub-top-in { display: flex; align-items: center; gap: 24px; height: 64px; position: relative; }
.pub-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pub-texto) !important; }
.pub-marca img { width: 34px; height: 34px; border-radius: 22%; }
.pub-marca span { font-family: "Syncopate", "Outfit", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .06em; }
.pub-nav { display: none; align-items: center; justify-content: center; gap: 32px; flex: 1; font-size: 14px; font-weight: 500; }
body.publico .pub-nav a { color: var(--pub-apagado); text-decoration: none; }
body.publico .pub-nav a:hover { color: var(--pub-texto); text-decoration: none; }
.pub-acciones { display: none; align-items: center; gap: 12px; margin-left: auto; }
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px;
  border: 1px solid var(--pub-borde); border-radius: 999px; color: var(--pub-texto) !important;
  background: var(--pub-tarjeta); -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio);
  font-size: 14px; font-weight: 500; letter-spacing: .02em; text-decoration: none !important; white-space: nowrap;
  transition: filter .18s, background-color .18s, border-color .18s;
}
.pub-btn:hover { background: rgba(255,255,255,.08); border-color: var(--pub-apagado); }
.pub-btn-primario { background: var(--pub-primario); border-color: var(--pub-primario); color: #fff !important; }
.pub-btn-primario:hover { background: var(--pub-primario); border-color: var(--pub-primario); filter: brightness(1.12); }
/* Menu del celular: <details>, sin JS. */
.pub-menu { margin-left: auto; }
.pub-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; color: var(--pub-apagado);
}
.pub-menu summary:hover { background: rgba(255,255,255,.05); color: var(--pub-texto); }
.pub-menu summary::-webkit-details-marker { display: none; }
.pub-menu[open] summary { background: rgba(255,255,255,.08); color: var(--pub-texto); }
.pub-menu-lista {
  position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px 16px; background: rgba(10,13,18,.94); border-bottom: 1px solid var(--pub-borde);
  -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio);
}
body.publico .pub-menu-lista a:not(.pub-btn) { padding: 12px 4px; color: var(--pub-texto); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.08); }
.pub-menu-lista .pub-btn { height: 48px; }
.pub-menu-lista .pub-btn { margin-top: 8px; }
@media (min-width: 1024px) {
  .pub-nav, .pub-acciones { display: flex; }
  .pub-menu { display: none; }
}

body.publico > main.pub-main { display: block; place-items: normal; min-height: 0; max-width: 1160px; padding: 40px 24px 64px; }
.pub-main { flex: 1; padding-top: 40px; padding-bottom: 64px; }
.pub-pie { border-top: 1px solid rgba(255,255,255,.08); background: transparent; padding: 48px 0 24px; color: var(--pub-apagado); font-size: 14px; }
.pub-pie-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pub-pie-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pub-pie-col p { margin: 0; max-width: 34ch; line-height: 1.5; }
.pub-pie-col h2 { font-size: 12px; font-weight: 500; color: var(--pub-apagado); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .14em; border: 0; padding: 0; }
body.publico .pub-pie-col a { color: var(--pub-apagado); text-decoration: none; }
body.publico .pub-pie-col a:hover { color: var(--pub-texto); }
.pub-redes { display: inline-flex; padding: 10px; border: 1px solid var(--pub-borde); border-radius: 999px; background: var(--pub-tarjeta); }
.pub-pie-copy { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
@media (min-width: 768px) { .pub-pie-grilla { grid-template-columns: 1.4fr 1fr 1fr; } }

.pub-hero { margin-bottom: 28px; }
.pub-hero h1 { font-size: 48px; line-height: 1.08; font-weight: 300; letter-spacing: -.02em; margin: 0 0 10px; }
.pub-hero .sub { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 300; color: var(--pub-apagado); }
.pub-centro { text-align: center; padding: 48px 0; }
.pub-centro .btn { margin-top: 16px; }
.pub-error { margin-bottom: 20px; }
.pub-juego { font-size: 26px; font-weight: 300; margin: 36px 0 14px; text-transform: none; letter-spacing: 0; color: var(--pub-texto); border: 0; padding: 0; }

/* ------------------------------------------------- elegir plan (grilla) */

.planes-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 20px; }
.plan-card {
  display: flex; flex-direction: column; gap: 14px; padding: 24px;
  background: var(--pub-tarjeta); border: 1px solid var(--pub-borde); border-radius: var(--pub-radio);
  -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio);
  transition: border-color 120ms ease-out;
}
.plan-card:hover { border-color: rgba(122,184,238,.55); }
.plan-nombre { font-weight: 500; font-size: 20px; margin: 0; }
.plan-lista { list-style: none; margin: 0; padding: 0; color: var(--pub-apagado); font-size: 15px; display: grid; gap: 6px; }
.plan-lista li::before { content: "\2713"; color: var(--pub-azul-texto); margin-right: 8px; font-weight: 700; }
.plan-precios { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pub-borde); }
.plan-precio-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plan-precio-medio { color: var(--pub-apagado); font-size: 14px; }
.plan-precio { font-size: 26px; font-weight: 300; letter-spacing: -.01em; color: var(--pub-texto); font-variant-numeric: tabular-nums; }
.plan-precio small { font-size: 14px; font-weight: 400; color: var(--pub-apagado); }
.plan-precio-mp .plan-precio { font-size: 19px; font-weight: 300; color: var(--pub-apagado); }

/* ------------------------------------------------------- checkout */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.checkout .resumen { grid-column: 2; grid-row: 1; position: sticky; top: 88px; }
.checkout .form-pedido { grid-column: 1; grid-row: 1; padding: 32px; }
.resumen-in { background: var(--pub-tarjeta); border: 1px solid var(--pub-borde); border-radius: var(--pub-radio); padding: 28px;
  -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio); }
.resumen-tag { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--pub-apagado); font-weight: 500; margin-bottom: 8px; }
.resumen-plan { font-size: 28px; font-weight: 300; margin: 0; border: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.resumen .plan-lista { margin: 16px 0 0; }
.resumen-total { margin: 22px 0; padding: 18px; border-radius: var(--pub-radio-chico); background: rgba(122,184,238,.10); }
.resumen-etiqueta { color: var(--pub-apagado); font-size: 14px; }
.resumen-precio { font-size: 40px; font-weight: 200; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.resumen-precio small { font-size: 16px; font-weight: 400; color: var(--pub-apagado); }
.resumen-nota { color: var(--pub-apagado); font-size: 14px; margin-top: 4px; min-height: 1.3em; }
.resumen-sub { font-size: 15px; margin: 0 0 10px; color: var(--pub-texto); text-transform: none; letter-spacing: 0; }
.incluye { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--pub-apagado); }
.incluye li::before { content: "\2713"; color: var(--ok); margin-right: 8px; font-weight: 700; }
.resumen-cambiar { font-size: 14.5px; }

.paso { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 300; margin: 0 0 18px; border: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.paso span {
  width: 28px; height: 28px; border-radius: 50%; background: var(--pub-primario); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500;
}
.form-pedido .paso:not(:first-of-type) { margin-top: 30px; }
.form-pedido .field label { color: var(--pub-texto); font-weight: 500; }

/* Formas de pago como tarjetas: el radio real queda adentro pero invisible,
   asi sigue andando con teclado y lectores de pantalla. */
.pagos { display: grid; gap: 14px; margin-bottom: 8px; }
/* Cuantos meses pagar (/pedir y Renovar): mismas tarjetas, un subtitulo arriba. */
.paso-sub { font-size: 17px; font-weight: 400; margin: 24px 0 12px; text-transform: none; letter-spacing: 0; }
#bloque-meses[hidden] { display: none; }
.pago { position: relative; }
.pago-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pago-cuerpo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin: 0;
  background: var(--pub-muted); border: 1px solid var(--pub-borde); border-radius: var(--pub-radio-chico);
  cursor: pointer; transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.pago-cuerpo:hover { border-color: var(--pub-apagado); }
.pago-punto {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pub-apagado);
  flex-shrink: 0; display: inline-block; position: relative;
}
.pago-texto { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.pago-texto strong { font-size: 16.5px; font-weight: 500; color: var(--pub-texto); }
.pago-texto small { color: var(--pub-apagado); font-size: 14px; }
.pago-precio { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pago-precio small { font-size: 13.5px; font-weight: 400; color: var(--pub-apagado); }
.pago-etiqueta {
  position: absolute; top: -10px; right: 16px; font-size: 12.5px; font-weight: 500; color: var(--ok);
  background: var(--pub-solido); border: 1px solid rgba(61,220,151,.5); padding: 1px 10px; border-radius: 999px;
}
.pago-radio:checked ~ .pago-cuerpo { border-color: rgba(122,184,238,.6); box-shadow: 0 0 0 1px rgba(122,184,238,.6), 0 0 32px rgba(47,110,165,.25); background: rgba(122,184,238,.08); }
.pago-radio:checked ~ .pago-cuerpo .pago-punto { border-color: var(--pub-azul-texto); }
.pago-radio:checked ~ .pago-cuerpo .pago-punto::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pub-azul-texto);
}
.pago-radio:focus-visible ~ .pago-cuerpo { outline: 2px solid var(--pub-azul-texto); outline-offset: 2px; }
.pago-radio:disabled ~ .pago-cuerpo { opacity: .45; cursor: not-allowed; }
.pago-radio:disabled ~ .pago-cuerpo:hover { border-color: var(--pub-borde); }
.pedir-boton { height: 52px; font-size: 17px; margin-top: 24px; }

/* ------------------------------------------------------- /pedido */

.pedido-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.pedido-izq, .pedido-der { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; align-content: start; }
.bloque { padding: 24px; margin: 0; }
.bloque-t { font-size: 12px; font-weight: 500; color: var(--pub-apagado); margin: 0 0 16px; display: block; text-transform: uppercase; letter-spacing: .14em; border: 0; padding: 0; }
.estado-pedido {
  padding: 28px; border-radius: var(--pub-radio); text-align: left; margin: 0;
  border: 1px solid var(--pub-borde); background: var(--pub-tarjeta);
  -webkit-backdrop-filter: var(--pub-vidrio); backdrop-filter: var(--pub-vidrio);
}
.estado-titulo { font-size: 32px; font-weight: 300; letter-spacing: -.01em; }
.estado-detalle { font-size: 16px; font-weight: 400; color: var(--pub-apagado); margin-top: 4px; }
.estado-pedido.estado-activo { border-color: rgba(61,220,151,.45); background: var(--ok-bg); box-shadow: 0 0 32px rgba(61,220,151,.18); }
.estado-pedido.estado-activo .estado-titulo { color: var(--ok); }
.estado-pedido.estado-suspendido, .estado-pedido.estado-error { border-color: rgba(255,122,122,.45); background: var(--danger-bg); }
.estado-pedido.estado-suspendido .estado-titulo, .estado-pedido.estado-error .estado-titulo { color: var(--danger); }
.estado-pedido.estado-pendiente, .estado-pedido.estado-creando { border-color: rgba(251,191,36,.45); background: var(--warn-bg); }
.estado-pedido.estado-pendiente .estado-titulo, .estado-pedido.estado-creando .estado-titulo { color: var(--warn); }

.monto-grande { font-size: 24px; font-weight: 300; margin: 0 0 14px; }
.datos-transf { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; padding: 14px 16px; background: var(--pub-muted); border-radius: var(--pub-radio-chico); }
.datos-transf dt { color: var(--pub-apagado); }
.datos-transf dd { margin: 0; word-break: break-all; }
.detalle { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; }
.detalle dt { color: var(--pub-apagado); }
.detalle dd { margin: 0; text-align: right; }
.detalle .plan-lista { justify-items: end; }
.detalle .plan-lista li::before { content: none; }

.copiable { display: flex; gap: 8px; }
.copiable input { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 20px; }
.copiable button { flex-shrink: 0; }
body.publico table { font-size: 14.5px; }
body.publico .table-wrap { overflow-x: auto; }
/* En la columna de 400 px la tabla de pagos no entraba con el padding y el
   nowrap de style.css: aparecia scroll y se cortaban Monto y Estado. */
body.publico .bloque th, body.publico .bloque td { padding-left: 8px; padding-right: 8px; }
body.publico .pedido-der table { font-size: 13px; width: 100%; }
body.publico .pedido-der th,
body.publico .pedido-der td { padding: 8px 6px; white-space: normal; }
body.publico .pedido-der .badge,
body.publico .pedido-der .num { white-space: nowrap; }

/* ------------------------------------------------------- varios */

/* Honeypot: fuera de la pantalla, nunca display:none (algunos bots ignoran
   los campos con display:none y lo llenan igual). */
.hp { position: absolute; left: -9999px; top: -9999px; }
.hint { display: block; color: var(--ink-faint); font-size: var(--fs-xs); margin-top: 6px; }
.check-campo { margin-top: 30px; }

/* ------------------------------------------------------- celular */

@media (max-width: 900px) {
  .checkout, .pedido-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* El resumen va arriba del formulario y deja de ser pegajoso. */
  .checkout .resumen { grid-column: 1; grid-row: 1; position: static; }
  .checkout .form-pedido { grid-column: 1; grid-row: 2; padding: 20px; }
  .pedido-der { order: 2; }
}
@media (max-width: 560px) {
  .pub-ancho { padding: 0 16px; }
  body.publico > main.pub-main { padding: 24px 16px 48px; }
  .pub-hero h1 { font-size: 28px; }
  /* En el celular el resumen es una cabecera compacta: lo que incluye ya lo
     dice la web, y el formulario tiene que quedar a la vista. */
  .resumen-in { padding: 18px; }
  .resumen-plan { font-size: 22px; }
  .resumen .plan-lista { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 14px; }
  .resumen-total { margin: 14px 0 10px; padding: 12px 14px; }
  .resumen-precio { font-size: 28px; }
  .resumen-sub, .incluye { display: none; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
  .pago-cuerpo { padding: 14px; }
  .copiable input { font-size: 17px; }
}

/* Dominio propio (nombre.rn.ar) en /pedir */
.dominio-campo { display: flex; align-items: center; gap: 8px; }
.dominio-campo input { flex: 1; min-width: 0; }
.dominio-sufijo { flex-shrink: 0; color: var(--ink-muted); }
.hint.dominio-ok { color: var(--ok); }
.hint.dominio-mal { color: var(--danger); }

/* Estado en vivo del server en /pedido: boton Prender dentro de la tarjeta de estado */
body.publico [hidden] { display: none !important; }
body.publico .estado-acciones { margin-top: 16px; }

/* Casilla de la EULA de Mojang en /pedir (planes de Minecraft) */
body.publico .eula-campo { margin-top: 24px; }
body.publico .eula-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; line-height: 1.4; }
body.publico .eula-check input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
body.publico .aviso-licencia { margin-top: 16px; }

/* ------------------------------------------------------- /cuenta (cuenta del cliente) */

.entrar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; max-width: 900px; }
.entrar-grid .note-box { margin-bottom: 14px; }
.form-clave { max-width: 460px; }
.cuenta-volver { margin: 0 0 12px; font-size: 15px; }

.cuenta-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: -12px 0 28px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.cuenta-nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.cuenta-nav-links a {
  padding: 8px 18px; border-radius: 999px; color: var(--pub-apagado); text-decoration: none; font-weight: 500;
}
.cuenta-nav-links a:hover { color: var(--pub-texto); background: var(--bg-hover); }
.cuenta-nav-links a.activo { color: var(--pub-texto); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--pub-borde); }
.cuenta-salir { display: flex; align-items: center; gap: 12px; margin: 0; }
.cuenta-quien { color: var(--pub-apagado); font-size: 14px; overflow-wrap: anywhere; }

.cuenta-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; margin-bottom: 24px; }
.server-card { padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.server-card-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* El badge de style.css es monoespaciado y no corta: aca el texto es una frase. */
.server-card-cab .badge { font-family: inherit; font-size: 14px; white-space: normal; line-height: 1.3; }
.server-nombre { font-size: 24px; font-weight: 400; margin: 0; border: 0; padding: 0; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.server-nombre a { color: var(--pub-texto); text-decoration: none; }
.server-nombre a:hover { color: var(--pub-azul-texto); }
.server-plan { color: var(--pub-apagado); font-size: 15px; margin-top: 2px; }
.server-datos { margin: 0; }
.server-datos dd { overflow-wrap: anywhere; }
.server-acciones { margin-top: auto; }
.cuenta-vacia { text-align: center; padding: 40px 24px; }
.cuenta-aviso { margin-top: 8px; }

/* Estado en vivo: un punto de color y el texto. Los colores son los de los badges. */
.vivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 36px; }
.vivo-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--pub-apagado); flex-shrink: 0; }
.vivo-punto.val-ok { background: var(--ok); box-shadow: 0 0 12px rgba(61,220,151,.6); }
.vivo-punto.val-warn { background: var(--warn); }
.vivo-punto.val-off { background: var(--pub-apagado); }
.vivo-texto { font-weight: 500; }
.vivo-boton { margin-left: auto; }
.vivo-grande { margin-top: 10px; font-size: 18px; }

/* Tablero del server (/cuenta/servidor/<id>) */
.tablero { padding: 24px; margin: 0 0 24px; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 18px; min-height: 0; }
.tablero-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.tablero-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; }
.tablero-uptime { color: var(--pub-apagado); font-size: 15px; }
.tablero-insignias { display: flex; gap: 8px; flex-wrap: wrap; }
.insignia {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--pub-muted); border: 1px solid var(--pub-borde); color: var(--pub-apagado);
}
.insignia.tps-ok { color: var(--ok); border-color: transparent; background: var(--ok-bg); }
.insignia.tps-medio { color: var(--warn); border-color: transparent; background: var(--warn-bg); }
.insignia.tps-mal { color: var(--danger); border-color: transparent; background: var(--danger-bg); }
.tablero-jugando { display: flex; align-items: baseline; gap: 10px; }
.tablero-jugando-num { font-size: 56px; font-weight: 200; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tablero-jugando-txt { color: var(--pub-apagado); font-size: 18px; }
/* Jugadores conectados: siempre visible en el tablero. La cabecita es la inicial en un
   circulo (la CSP no deja imagenes externas); el color lo pone cuenta.js por CSSOM. */
.tablero-jugadores { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.tablero-sub { margin: 0 0 12px; font-size: 12px; font-weight: 500; color: var(--pub-apagado); letter-spacing: .14em; text-transform: uppercase; }
.jugadores-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.jugadores-lista[hidden], .jugadores-mas[hidden], .jugadores-vacio[hidden] { display: none; }
.jugador { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jugador-cabeza { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 15px; color: #fff; background: var(--pub-primario); }
.jugador-nombre { overflow-wrap: anywhere; font-size: 15px; }
.jugadores-mas { margin: 10px 0 0; color: var(--pub-apagado); font-size: 14px; }
.jugadores-vacio { margin: 0; color: var(--pub-apagado); font-size: 15px; }
.tablero-botones { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
/* Prender es lo que mas busca el cliente: verde y primero, al lado de Ir al panel. */
body.publico button.prender { background: var(--ok); border-color: var(--ok); color: #04130c; font-weight: 500; box-shadow: 0 0 32px rgba(61,220,151,.30); }
body.publico button.prender:hover { background: var(--ok); border-color: var(--ok); color: #04130c; filter: brightness(1.08); }
.tablero-botones .grande { min-height: 48px; padding: 0 22px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.tablero-botones .peligro:hover { border-color: var(--danger); color: var(--danger); }
.tablero-ip { color: var(--pub-apagado); font-size: 14px; overflow-wrap: anywhere; margin-top: -8px; }
.tablero-barras { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.barra-fila[hidden] { display: none; }
.barra-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.barra-cab span:first-child { font-weight: 500; }
.barra-texto { color: var(--pub-apagado); font-variant-numeric: tabular-nums; }
.barra { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra-relleno { height: 100%; width: 0; border-radius: 999px; background: var(--pub-azul-texto); transition: width .4s; }
.barra-relleno.media { background: var(--warn); }
.barra-relleno.alta { background: var(--danger); }
.tarjeta-jugadores { color: var(--pub-apagado); font-size: 15px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .entrar-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Pagos en el celu: cada fila pasa a ser una tarjetita apilada (fecha y monto arriba;
   server, metodo y estado abajo con su rotulo, que sale del data-label), sin scroll
   horizontal. Las clases c-* las ponen cuenta_servidor, cuenta_pagos y pedido. */
@media (max-width: 640px) {
  body.publico .table-wrap { overflow-x: visible; }
  body.publico table.tabla-pagos,
  body.publico table.tabla-pagos tbody { display: block; width: 100%; }
  body.publico table.tabla-pagos thead { display: none; }
  body.publico table.tabla-pagos tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px;
    padding: 12px 0; border-bottom: 1px solid var(--line-soft);
  }
  body.publico table.tabla-pagos tbody tr:last-child { border-bottom: none; }
  body.publico table.tabla-pagos td {
    display: block; padding: 0; border: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere;
  }
  body.publico table.tabla-pagos td.c-fecha { grid-column: 1; grid-row: 1; font-weight: 600; }
  body.publico table.tabla-pagos td.c-monto { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; white-space: nowrap; }
  body.publico table.tabla-pagos td[data-label] { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; }
  body.publico table.tabla-pagos td[data-label]::before {
    content: attr(data-label); flex: 0 0 4.8em; color: var(--pub-apagado); font-size: 12px;
    text-transform: uppercase; letter-spacing: .05em;
  }
}
@media (max-width: 560px) {
  .cuenta-grilla { grid-template-columns: minmax(0, 1fr); }
  .server-card { padding: 18px; }
  .cuenta-nav { margin-top: 0; }
  .cuenta-salir { width: 100%; justify-content: space-between; }
  .server-acciones .btn, .server-acciones button { flex: 1 1 auto; text-align: center; }
  .tablero { padding: 18px; }
  .tablero-barras { grid-template-columns: minmax(0, 1fr); }
  .tablero-botones .grande { flex: 1 1 calc(50% - 10px); padding: 0 12px; }
}

/* /pedido/<token> de un server ya pagado: pagina corta con un solo boton. */
.pub-centro .estado-pedido { text-align: center; max-width: 560px; margin: 0 auto 24px; }
.pub-centro .btn.grande { min-height: 52px; padding: 0 32px; font-size: 18px; display: inline-flex; align-items: center; }
.pub-centro .sub { max-width: 560px; margin: 16px auto 0; }

/* ------------------------------------------------ guias (<dialog>, web/guia.js) */
body.publico .btn.grande, body.publico button.grande {
  min-height: 52px; padding: 0 28px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
}
body.publico dialog.guia {
  width: calc(100% - 32px); max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--pub-borde); border-radius: var(--pub-radio);
  background: var(--pub-solido); color: var(--pub-texto); box-shadow: var(--shadow-md);
  overflow-x: hidden; overflow-y: auto; box-sizing: border-box;
}
body.publico dialog.guia::backdrop { background: rgba(0,0,0,.65); }
.guia-caja { padding: 24px 24px 20px; }
.guia-titulo { margin: 0 0 14px; font-size: 24px; font-weight: 300; line-height: 1.25; }
.guia-cuerpo p { margin: 0 0 12px; line-height: 1.5; }
.guia-pasos { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: paso; display: grid; gap: 14px; }
.guia-pasos li { counter-increment: paso; position: relative; padding-left: 44px; min-height: 32px; line-height: 1.45; }
.guia-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 500;
  background: var(--pub-primario); color: #fff;
}
.guia-pasos strong { color: var(--pub-texto); }
.guia-pie { display: flex; justify-content: flex-end; margin-top: 8px; }
.guia-pie button { width: 100%; box-sizing: border-box; }
body.publico button.guia-link {
  display: inline; height: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--pub-azul-texto); font: inherit; text-decoration: underline; cursor: pointer; border-radius: 4px;
}
body.publico button.guia-link:hover { color: #a9d2f5; }
body.publico button.guia-link:focus-visible, body.publico dialog.guia button:focus-visible {
  outline: 2px solid var(--pub-azul-texto); outline-offset: 2px;
}
.guia-ayuda { margin: 10px 0 0; font-size: 14px; color: var(--pub-apagado); }

/* "Ya transferi": el unico boton primario; el WhatsApp aparece recien si no lo encuentra. */
.transf-accion { display: grid; gap: 8px; justify-items: stretch; margin-top: 8px; }
.transf-accion .nota { margin: 0; font-size: 14px; color: var(--pub-apagado); text-align: center; }
.transf-wa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.transf-wa p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--pub-apagado); }
@media (max-width: 560px) {
  .guia-caja { padding: 20px 18px 16px; }
  .guia-titulo { font-size: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  body.publico dialog.guia[open] { animation: guia-entra .18s ease-out; }
  @keyframes guia-entra { from { opacity: 0; transform: translateY(8px); } }
}

/* Versión de Minecraft: línea del tablero y lista agrupada por rama. */
.tablero-version { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.version-rama { border: 0; padding: 0; margin: 0 0 18px; }
.version-rama legend { font-weight: 500; margin-bottom: 8px; padding: 0; }

/* Entrar con Google (/cuenta/entrar) */
.entrar-google { max-width: 900px; margin-bottom: 24px; }
.entrar-google .hint { display: block; margin-top: 8px; text-align: center; }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.google-g { width: 20px; height: 20px; flex: none; background: #fff; border-radius: 50%; padding: 2px; }
.pedir-google { margin-bottom: 16px; }
.pedir-google .hint { display: block; margin-top: 6px; }
.entrar-nuevo { max-width: 900px; margin-top: 24px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.entrar-nuevo .bloque-t { margin-bottom: 4px; }
.entrar-nuevo p { margin: 0; }

/* Terminos y privacidad: texto largo, ancho de lectura */
.legal { max-width: 760px; line-height: 1.65; }
.legal h2 { font-size: 24px; font-weight: 300; margin: 36px 0 10px; scroll-margin-top: 90px; }
.legal h3 { font-size: 17px; font-weight: 500; margin: 20px 0 6px; }
.legal p, .legal li { font-size: 15.5px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 4px; }
.legal-indice { margin: 20px 0 8px; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: var(--pub-radio-chico); background: var(--pub-tarjeta); }
.legal-indice ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.legal-aaip { font-size: 13.5px; opacity: .85; }
.legal-firma { margin-top: 36px; opacity: .8; font-size: 14px; }
.pedir-legal { display: block; margin-top: 10px; text-align: center; }
@media (max-width: 640px) { .legal-indice ol { columns: 1; } }
.legal-arrep { max-width: 640px; }
.legal-arrep p { margin: 12px 0 0; }
.legal-arrep-nota { max-width: 640px; margin-top: 14px; font-size: 13.5px; }
.pub-pie-col .pub-arrepentimiento { font-weight: 500; }